如何正确包含jQuery和JavaScript文件？

时间：2012-03-13 作者：Johan Dahl

我现在正在使用以下代码进行操作：

function uw_load_scripts() {
    // De-register the built in jQuery
    wp_deregister_script(\'jquery\');
    // Register the CDN version
    wp_register_script(\'jquery\', \'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\', array(), null, false); 
    // Load it in your theme
    wp_enqueue_script( \'jquery\' );
}
add_action( \'wp_enqueue_scripts\', \'uw_load_scripts\' );

这是可行的，但我应该为每个人这样做，还是为管理员以外的所有人这样做（以便后端使用WordPress版本？）：

if (function_exists(\'load_my_scripts\')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( \'jquery\' );  
    wp_register_script(\'jquery\', \'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\', array(), null, false); 
    wp_enqueue_script(\'jquery\');   
    }  
}  
}  
add_action(\'init\', \'load_my_scripts\');

这个版本根本不起作用实际上，我得到的是WordPress jQuery版本，而不是Google版本。

因此，我是否应该取消WordPress中包含的jQuery的注册？

另外，我如何以正确的方式添加自己的脚本（slider脚本、modernizr和我自己的custom.js）？我想我应该通过函数来实现这一点。php，而不是像我现在这样在标题中，但我不确定我将如何做到这一点。

6 个回复

最合适的回答,由SO网友:Chip Bennett 整理而成

第一条经验法则：do not deregister core-bundled scripts and replace with other versions, 除非您完全确定没有主题、插件或核心本身会因版本更改而中断。真的，除非你absolutely need 作为核心捆绑脚本的替代版本，只需使用与核心捆绑的内容即可。

其次，我强烈建议wp_enqueue_scripts 用于脚本注册和排队，而不是init. （它在init, 但从与他人友好相处的角度来看，最好使用语义最正确的钩子。）

第三，要将自己的自定义脚本排队，请使用与上面相同的方法：

<?php
function wpse45437_enqueue_scripts() {
    if ( ! is_admin() ) {
        $script_path = get_template_directory_uri() . \'/js/\';
        // Enqueue slider script
        wp_enqueue_script( \'wpse45437_slider\', $script_path . \'slider.js\', array( \'jquery\' ) );
        // Enqueue modernizr script
        wp_enqueue_script( \'wpse45437_modernizr\', $script_path . \'modernizr.js\', array( \'jquery\' ) );
    }
}
add_action( \'wp_enqueue_scripts\', \'wpse45437_enqueue_scripts\' );
?>

只需添加任何需要排队的脚本。

SO网友:Stephen Harris

希望这有帮助，请查阅法典wp_enqueue_scripts 了解更多信息。

不要使用init 到enqueue. 使用wp_enqueue_scripts 对于前端材料和admin_enqueue_scripts 对于管理端。您可以使用init 到register 但是脚本wp_enqueue_scripts 只在前端触发（而不在登录页面上），因此您无需进行检查is_admin().functions.php 对于主题或插件中的主题。您只需简单地说：

 function myprefix_load_scripts() {
   // Load scripts here
 }
 add_action( \'wp_enqueue_scripts\', \'myprefix_load_scripts\' );

如果目的是在使用短代码时将脚本排队，您可能希望使用wp_enqueue_script 在快捷码回调中，仅在需要时将其排队（这将在页脚中打印它since 3.3).

您不应该在管理端重新注册现有jQuery。你可能弄坏了什么东西：D。

插件should not 重新注册现有jQuery。

您应该权衡重新注册jQuery的利弊。例如，如果你注册了一个旧版本，它可能会破坏一些插件（可能不是现在，而是将来…）

SO网友:Boone Gorges

公平警告：取消注册WP的打包版jQuery可能会导致问题，尤其是如果您不特别小心，确保在WP更新其版本时更改所指向的版本。这对插件来说是双重的，它们通常（或者至少应该）编写插件以最大程度地兼容jQuery的WP版本。

也就是说，您的第一个版本是正确的-它与wp_enqueue_scripts. 您的第二个函数连接到init, 这可能就是它不能正常工作的原因。

以类似的方式添加您自己的脚本：

function bbg_enqueue_scripts() {
    // You should probably do some checking to see what page you\'re on, so that your
    // script only loads when it needs to
    wp_enqueue_script( \'bbg-scripts\', get_stylesheet_directory_url() . \'/js/bbg-scripts.js\', array( \'jquery\' ) );
}
add_action( \'wp_enqueue_scripts\', \'bbg_enqueue_scripts\' );

我在这里假设您正在从js 当前主题目录中的目录；如果不是这样，请更改URI参数。第三个参数array( \'jquery\' ) 他说bbg-scripts 取决于jquery, 所以应该在之后加载。看见https://codex.wordpress.org/Function_Reference/wp_enqueue_script 了解更多详细信息。

SO网友:Adam

if (function_exists(\'load_my_scripts\')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( \'jquery\' );  
    wp_register_script(\'jquery\', \'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\', array(), null, false); 
    wp_enqueue_script(\'jquery\');   
    }  
}  
}  
add_action(\'init\', \'load_my_scripts\');

这没什么用。。。我猜你是说

if (!function_exists(\'load_my_scripts\')) {

您的示例只会在函数load\\u my\\u scripts已经存在的情况下加载它（如果它不存在，则不会加载，如果它确实存在，则会创建一个错误）

SO网友:cjbj

如果出于性能原因，您想从CDN加载jquery和其他core js文件，请确保加载的是相同的版本，以防止core和插件函数发生令人讨厌的事情。像这样：

$wp_jquery_version = $GLOBALS[\'wp_scripts\']->registered[\'jquery-core\']->ver;
$jquery_version = ( $wp_jquery_version == \'\' ) ? \'1.8.3\' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script(\'jquery\');
wp_register_script(\'jquery\', \'http://ajax.googleapis.com/ajax/libs/jquery/\'. $jquery_version .\'/jquery.min.js\', $jquery_version, false );
wp_enqueue_script(\'jquery\');

SO网友:nautilus7

在检查了加载jquery的所有不同方法之后（不仅仅是在这篇文章中），我意识到没有一种方法能够完成所有这些：

使用函数注册（或者排队）jquery，以便插件可以使用它列表中有很多替代版本在执行其中的一些操作，但不是全部，因此我编写了我的版本，对一些已经可用的方法进行了梳理和修改。这是：

function nautilus7_enqueue_scripts() {

    // Load jquery from Google CDN (protocol relative) with local fallback when not available
    if ( false === ( $url = get_transient(\'jquery_url\') ) ) {

        // Check if Google CDN is working
        $url = ( is_ssl() ? \'https:\' : \'http:\' ) . \'//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\';
        $resp = wp_remote_head($url);

        // Load local jquery if Google down
        if ( is_wp_error($resp) || 200 != $resp[\'response\'][\'code\'] ) {

            $url = get_template_directory_uri() . \'/js/vendor/jquery-1.7.2.min.js\';
        }

        // Cache the result for 5 minutes to save bandwidth
        set_transient(\'jquery_url\', $url, 60*5);
    }

    // Deregister Wordpress\' jquery and register theme\'s copy in the footer
    wp_deregister_script(\'jquery\');
    wp_register_script(\'jquery\', $url, array(), null, true);

    // Load other theme scripts here

}
add_action(\'wp_enqueue_scripts\', \'nautilus7_enqueue_scripts\');

为了节省带宽，并且不会在每次重新加载页面时ping谷歌，它会使用Wordpress Transient API在5分钟内记住谷歌CDN是否在线。

结束

小码农CODE

如何正确包含jQuery和JavaScript文件？

相关推荐

WP 3.3.1无法使jQuery Datepicker工作