如何在WordPress子主题中正确加载和调用Javascript?

I already searched several hours for a proper tutorial that explains how to correctly incorporate Javascript in a WordPress website, but could not find a decent explanation.

I am running WordPress 3.8.1 with the Genesis Framework and the sample child theme on my localhost, i.e. I do all edits in the functions.php and style.css of my child theme.

On the front page I would like to call some Javasript/jQuery, a fullscreen background slideshow called Vegas.

So I created a js-folder in the child theme's directory, to which I copied jquery.vegas.js and added the following to my functions.php:

//* Adds Vegas slideshow to the front page

add_action( 'wp_enqueue_scripts', 'front_page_slideshow' );

function front_page_slideshow() {

  wp_register_script( 'jquery.vegas', get_stylesheet_directory_uri() . '/js/jquery.vegas.js', array('jquery'), '1.3.4', true );

  if ( is_front_page() ) {
    wp_enqueue_script('jquery.vegas');
    }

}

Furthermore, I added the relevant CSS-classes of jquery.vegas.css to my style.css.

My problem is that I don't know, where to place the code, that triggers the script execution. According to the Vegas-documentation, the script executes by placing e.g. the following javascript just before the closing body-tag:

$.vegas('slideshow', {
  backgrounds:[
    { src:'/img/bg1.jpg', fade:1000 },
    { src:'/img/bg2.jpg', fade:1000 },
    { src:'/img/bg3.jpg', fade:1000 }
  ]
})('overlay', {
  src:'/vegas/overlays/11.png'
});

I unsuccesfully tried to place it in an additional php-file and called it with a hook in functions.php with the following:

add_action( 'genesis_after_footer', 'slideshow' );

function test() {
    if (is_front_page()) 
    require(CHILD_DIR.'/slideshow.php');
}

However, the script does not execute. I would appreciate your help and advice on this.

duanqiu9104
duanqiu9104 是的,.js的脚本标记显示在HTML中,$.vegas('slideshow',{backgrounds:[...)也是如此。
6 年多之前 回复
dongtu7567
dongtu7567 您的.js脚本标记是否显示在HTML中?你有404错误吗?$.vegas不会像这样工作,检查Wordpress文档中的jQuerynoconflict实现。
6 年多之前 回复
dqbjvg2518
dqbjvg2518 首先,这是正确的方法,如何加载和执行脚本?Chrome控制台指出以下内容:未捕获TypeError:无法调用未定义的方法'vegas'
6 年多之前 回复
duanhuanbo5225
duanhuanbo5225 您是否在浏览器javascript控制台中查找错误?
6 年多之前 回复

2个回答



你必须使用 jQuery noConflict包装器WordPress提供。</ p>

而不是</ p>

  $ .vegas(); 
< / code> </ pre>

你必须使用</ p>

  jQuery.vegas(); 
</ code> </ pre>

这就是为什么你得到无法调用未定义</ code>的方法,因为 $ </ code>没有在WordPress中定义,它被称为 jQuery </ code>。</ p>

如果您想使用大量使用 $ </ code>简写的代码,您可以使用此技巧来避免重写所有内容:</ p>

< pre> jQuery(document).ready(function($){
//在这个函数内部,$()将作为jQuery()的别名
//和其他库也使用$不会 可以在这个快捷方式下访问
$ .vegas(); //这将在这里工作。
});
</ code> </ pre>
</ div>

展开原文

原文

You have to use the jQuery noConflict wrapper WordPress provides.

Instead of

$.vegas();

you have to use

jQuery.vegas();

That's why you get Cannot call method of undefined, because $ is not defined in WordPress, it's called jQuery.

If you want to use a lot of code that uses the $ shorthand you can use this trick to spare you rewriting everything:

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
    $.vegas(); // this will work in here.
});

douliu8327
douliu8327 这解决了这个问题。 该脚本现在就像一个魅力。 非常感谢。
6 年多之前 回复



更改:</ p>

  add_action('genesis_after_footer','test'); \  n </ code> </ pre> 

收件人:</ p>

  add_action('wp_footer','test',100); 
</ code > </ pre>

您的JS文件正在WordPress页脚挂钩上加载,而您的JS代码正在其上方加载。 通过将您的JS代码加载到WP页脚挂钩上并给它一个低优先级,您可以确保它在正确的阶段加载。</ p>

请务必按顺序更改图像路径 。</ p>
</ div>

展开原文

原文

Change:

add_action( 'genesis_after_footer', 'test' );

To:

add_action( 'wp_footer', 'test', 100 );

Your JS file is loading on the WordPress footer hook whereas your JS code is loading above it. By loading your JS code on the WP footer hook as well and giving it a low priority you're ensuring it loads at the right stage.

Be sure to change the image paths by the way.

douhuang5331
douhuang5331 是否包裹在$(功能......
6 年多之前 回复
douxueke5653
douxueke5653 HTML首先显示JS文件的链接,然后直接显示<script> $ .vegas ...控制台仍显示Uncaught TypeError:无法调用undefined的方法'vegas'指向图片和jQuery.vegas.js的链接正在工作 ; 脚本只是不执行。 是的,我使用了test.php。
6 年多之前 回复
douchou8935
douchou8935 我修改了我的问题,因为你的函数名是测试而不是幻灯片
6 年多之前 回复
dongzhao4036
dongzhao4036 它出现在JS文件之后吗? 你在控制台中看到了同样的问题吗? 在你的JS中,你在$(function(){中包装$ .vegas ...
6 年多之前 回复
duanbu1421
duanbu1421 该脚本仍然无法运行。 唯一的区别是th .js的script-tag被完全推送到HTML的末尾。 我相应地更改了链接。
6 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问