WordPress:使用 enqueue 加载多个脚本

问题描述

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

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-2.0.3.min.js 没有加载，我不知道我是否正确地进行了排队.尽管已加载 jquery-1.10.2.而且，另一个脚本也没有加载.对于两个脚本(2.0.3 和其他脚本)，最后是:?ver=3.6.1

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

我还读到将两者都加载到一个函数中可能更好?

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

推荐答案

wordpress 中默认的第一件事就是 jquery，所以你不必注册它，只需将它排入队列

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

大部分 jquery ui 库和核心 jquery 文件已经在 wordpress 中注册，所以你只需要使用正确的句柄入队，看这里 入队脚本

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

wp_enqueue_script 用于将脚本入队，wp_enqueue_style 用于将样式入队

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

调用自定义js最好先注册script或者style再使用

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

wp_register_script//注册脚本

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

还记得用 wp_enqueue_scripts 钩住你的函数，以便脚本 &样式加载正确 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' );

这篇关于WordPress:使用 enqueue 加载多个脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！