douluan5444
2014-02-04 16:36 阅读 157

如何在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.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    douhuanchi6586 douhuanchi6586 2014-02-04 17:36

    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.
    });
    
    点赞 评论 复制链接分享
  • doujiangao4229 doujiangao4229 2014-02-04 17:05

    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.

    点赞 评论 复制链接分享

相关推荐