Question

我已经搜索了几个小时的a proper tutorial，它解释了如何在WordPress网站中正确合并Javascript，但找不到合适的解释。

我正在运行带有Genesis Framework的WordPress 3.8.1和我本地主机上的示例子主题，即我在我的子主题的functions.php和style.css中进行了所有编辑。 / p>

在首页上，我想调用一些Javasript / jQuery，一个名为Vegas的全屏背景幻灯片。

所以我在子主题的目录中创建了一个js - 文件夹，我复制了jquery.vegas.js并将以下内容添加到我的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');
    }

}

此外，我将jquery.vegas.css的相关CSS类添加到style.css。

我的问题是我不知道，在哪里放置代码，会触发脚本执行。根据{{3}}，脚本通过放置例如关闭body-tag之前的以下javascript：

$.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'
});

我不知不觉地试图将它放在一个额外的php文件中，并使用functions.php中的Vegas-documentation进行调用，其中包含以下内容：

add_action( 'genesis_after_footer', 'slideshow' );

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

但是，脚本不会执行。我很感激你的帮助和建议。

Answer 1

您必须使用jQuery noConflict wrapper WordPress provides。

而不是

$.vegas();

你必须使用

jQuery.vegas();

这就是为什么你得到Cannot call method of undefined，因为$未在WordPress中定义，它被称为jQuery。

如果您想使用大量使用$简写的代码，您可以使用此技巧来避免重写所有内容：

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.
});

Answer 2

变化：

add_action( 'genesis_after_footer', 'test' );

要：

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

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

请务必更改图像路径。

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

2 个答案: