php WordPress：使用 enqueue 加载多个脚本

WordPress: Loading multiple scripts with enqueue

提问by alexwc_

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

回答by codepixlabs

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_scriptis used to enqueue script and wp_enqueue_styleis 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_scriptsso that scripts & style load correctly add_action( 'wp_enqueue_scripts', 'pr_scripts_styles' );

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

回答by Mike

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' );

回答by Tawshif Ahsan Khan

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' );