WordPress：使用enqueue加载多个脚本

I'm trying to load jQuery and other scripts into the header (or should it be footer), and I have the jQuery working sort of I can get an alert box running.

我正在尝试将jQuery和其他脚本加载到标题中(或者它应该是页脚),并且我有jQuery工作类型我可以运行警报框。

The thing is, jquery-2.0.3.min.js isn't loading, and I don't know if I'm doing the enqueue correctly. jquery-1.10.2 is loaded though. And also, the other script isn't loading either. For both scripts (2.0.3 and other script), this is at the end: ?ver=3.6.1

问题是,jquery-2.0.3.min.js没有加载,我不知道我是否正确地进行了入队。虽然加载了jquery-1.10.2。而且,另一个脚本也没有加载。对于这两个脚本(2.0.3和其他脚本),最后是:?ver = 3.6.1

Also I was reading that it might be better load both into one function?

另外我读到它可能更好地加载到一个功能?

So, any help would be appreciated!

所以,任何帮助将不胜感激!

function load_jquery() {
    wp_register_script( 'jquery_script', get_template_directory_uri() . 'js/jquery-2.0.3.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'jquery_script' );
}
add_action( 'init', 'load_jquery' ); // end jQuery

function another() {
    wp_register_script( 'another_script', get_template_directory_uri() . 'js/another.js', array( 'jquery' ) );
    wp_enqueue_script( 'another_script' );

}
add_action( 'init', 'another' );

3 个解决方案

#1

First thing jquery in there by default in wordpress so you dont have to register it , just enqueue it

在wordpress中默认存在jquery,所以你不必注册它,只是将它排队

most of the jquery ui libs and core jquery files are already registered with wordpress so you only need to enqueue with right handle look here enqueue script

大多数jquery ui libs和核心jquery文件已经在wordpress中注册,所以你只需要用右手柄排队看这里排队脚本

wp_enqueue_script is used to enqueue script and wp_enqueue_style is used to enqueue style

wp_enqueue_script用于排队脚本,wp_enqueue_style用于排队样式

for calling custom js, its better to register script or style first before using

为了调用自定义js,最好在使用之前先注册脚本或样式

wp_register_script // to register script

wp_register_script //注册脚本

wp_register_style // To register style

wp_register_style //注册样式

then enqueue using wp_enqueue_script, wp_enqueue_style

然后使用wp_enqueue_script,wp_enqueue_style排队

here is a sample code snippet for whole process from my site

这是我网站上整个流程的示例代码段

function pr_scripts_styles() {

    wp_enqueue_script('jquery'); // just enqueue as its already registered 
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
        wp_enqueue_script( 'comment-reply' );

    /*   REGISTER ALL JS FOR SITE */
    wp_register_script('pr_cycle_all',get_stylesheet_directory_uri().'/js/pr-slider.js');
    wp_register_script('pr_slider',get_stylesheet_directory_uri().'/js/jquery.cycle.all.min.js');
    wp_register_script('pr_validation_engine',get_stylesheet_directory_uri().'/js/jquery.validationEngine-en.js');
    wp_register_script('pr_validation_locale',get_stylesheet_directory_uri().'/js/jquery.validationEngine.js');
    wp_register_script('stylethemes',get_stylesheet_directory_uri().'/js/stylethemes.js');
    wp_register_script('pr-jquery-ui',get_stylesheet_directory_uri().'/js/jquery-ui.js');
    wp_register_script('main-js',get_stylesheet_directory_uri().'/js/main.js');
    wp_register_script('pr-galleriffic',get_stylesheet_directory_uri().'/js/jquery.galleriffic.js');
    wp_register_script('pr-rollover',get_stylesheet_directory_uri().'/js/jquery.opacityrollover.js');
    wp_register_script('pr_colorbox',get_stylesheet_directory_uri().'/js/jquery.colorbox.js');
    wp_register_script('pr_jcarousel_js',get_stylesheet_directory_uri().'/js/jquery.jcarousel.min.js');


    //wp_register_script('google-map-api','https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false');



    /*   REGISTER ALL CSS FOR SITE */
    wp_register_style('pr_woocommerce',get_stylesheet_directory_uri().'/css/_woocommerce.css');
    wp_register_style('pr_mobile',get_stylesheet_directory_uri().'/css/mobile.css');
    wp_register_style('pr_sec_teal_grey',get_stylesheet_directory_uri().'/css/secondary-teal-grey.css');
    wp_register_style('pr_site_options',get_stylesheet_directory_uri().'/css/site-options.css');
    wp_register_style('pr_teal_grey',get_stylesheet_directory_uri().'/css/teal-grey.css');
    wp_register_style('validation_css',get_stylesheet_directory_uri().'/css/validationEngine.jquery.css');
    wp_register_style('galleriffic_css',get_stylesheet_directory_uri().'/css/galleriffic.css');
    wp_register_style('pr_colorbox_style',get_stylesheet_directory_uri().'/css/colorbox.css');
    wp_register_style('pr_jcarousel_css',get_stylesheet_directory_uri().'/css/jcarouselskin.css');



    /*   CALL ALL CSS AND SCRIPTS FOR SITE */
    wp_enqueue_script('pr-jquery-ui');
    wp_enqueue_script('stylethemes');

    wp_enqueue_script('pr_cycle_all');

    wp_enqueue_script('pr_slider','','','',true);
    wp_enqueue_script('pr_validation_engine');
    wp_enqueue_script('pr_validation_locale');
    wp_enqueue_script('google-map-api');
    wp_enqueue_script('main-js');
    wp_enqueue_script('pr-galleriffic');
    wp_enqueue_script('pr-rollover');
    wp_enqueue_script('pr_colorbox');


    wp_enqueue_style( 'pr-style', get_stylesheet_uri(), array(), '2013-07-18' );
    wp_enqueue_style('pr_site_options');
    wp_enqueue_style('pr_woocommerce');
    wp_enqueue_style('pr_mobile');
    wp_enqueue_style('pr_sec_teal_grey');
    wp_enqueue_style('pr_teal_grey');
    wp_enqueue_style('validation_css');
    wp_enqueue_style('galleriffic_css');
    wp_enqueue_style('pr_colorbox_style');
    if(is_single()){
        wp_enqueue_script('pr_jcarousel_js');
        wp_enqueue_style('pr_jcarousel_css');
    }
}
add_action( 'wp_enqueue_scripts', 'pr_scripts_styles' );

also remember to hook your function with wp_enqueue_scripts so that scripts & style load correctly add_action( 'wp_enqueue_scripts', 'pr_scripts_styles' );

还记得用wp_enqueue_scripts挂钩你的函数,以便脚本和样式正确加载add_action('wp_enqueue_scripts','pr_scripts_styles');

#2

This works for me when using child theme, just be sure to use different names for the scripts:

这在使用子主题时适用于我,只需确保为脚本使用不同的名称:

function my_scripts_method() {

    wp_enqueue_script(
        'script-name1',
        get_stylesheet_directory_uri() . '/some-script.js',
        array( 'jquery' )
    );
    wp_enqueue_script(
        'script-name2',
        get_stylesheet_directory_uri() . '/another-script.js',
        array( 'jquery' )
    );

}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

#3

This is how i add styles and scripts works great for me. But i suggest before using it understand it first and then anyone can follow this approach there own way.

这就是我添加样式和脚本的方式对我来说非常有用。但我建议在使用之前先了解它,然后任何人都可以按照自己的方式遵循这种方法。

   function theme_files() {
        $styles = [
            ['handle' => 'style', 'src' => '../style.css', 'deps' => false, 'media'=>"all"],
            ['handle' => 'bootstrap', 'src' => 'bootstrap.min.css', 'deps' => false, 'media'=>"all"],
            ['handle' => 'font_awesome', 'src' => 'font-awesome.min.css', 'deps' => false, 'media'=>"all"],
            ['handle' => 'animate', 'src' => 'animate.min.css', 'deps' => false, 'media'=>"all"],
            ['handle' => 'lightbox', 'src' => 'lightbox.css', 'deps' => false, 'media'=>"all"],
            ['handle' => 'main', 'src' => 'main.css', 'deps' => false, 'media'=>"all"],
            ['handle' => 'responsive', 'src' => 'responsive.css', 'deps' => false, 'media'=>"all"]
        ];
        for ($i = 0; $i < sizeof($styles); $i++) {

            wp_enqueue_style($styles[$i]['handle'], get_template_directory_uri() . '/css/' . $styles[$i]['src'], $styles[$i]['deps'], $styles[$i]['media'] );

        }

        $scripts = [
            ['handle' => 'bootstrap', 'src'=>'bootstrap.min.js','dep'=> array( 'jquery' ),'var'=> false,'in_foot'=> true],
            ['handle' => 'lightbox', 'src'=>'lightbox.min.js','dep'=> array( 'jquery' ),'var'=> false,'in_foot'=> true],
            ['handle' => 'wow', 'src'=>'wow.min.js','dep'=> array( 'jquery' ),'var'=> false,'in_foot'=> true],
            ['handle' => 'main', 'src'=>'main.js', 'dep'=>array( 'jquery' ), 'var'=>false, 'in_foot'=>true]
        ];

        for ($i=0; $i < sizeof($scripts); $i++) {

            wp_enqueue_script( $scripts[$i]['handle'], get_template_directory_uri() . '/js/' . $scripts[$i]['src'], $scripts[$i]['dep'], $scripts[$i]['ver'], $scripts[$i]['in_foot'] );    

        }
    }
    add_action( 'wp_enqueue_scripts', 'theme_files' );