如何使用WordPress链接外部jQuery / Javascript文件

因此，我使用Starkers作为下一个WP主题的基础，并且遇到了一个小问题，我在header.php文件中包含了自己的jQuery版本，但是在使用Firebug检查我的网站时，我发现jquery被下载了两次，做了一些挖掘，发现不仅我包括了文件，而且wp_head()函数也包括在内。

在尝试解决该问题时，我注意到头文件中有一条注释，该注释源自“二十十”主题：

/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head>, such 
 * as styles, scripts, and meta tags
 */

所以这是我的问题，我的印象是，必须在要使用它的任何其他文件之前设置jQuery文件，这wp_head()应该是<head>元素中的最后一件事，我现在有点困惑，因为我想知道我放在wp_head()顶部，因此WP包含的jQuery文件将用于我的所有插件，即使它说不这样做也是如此。

我确实在wp_head()函数中注释掉了jQuery行，但是它是管理页面所必需的，因此我不得不将其放回去。

我还想使用（至少是实验）来使用jQuery的Google CDN版本，但是不想两次包含它！

希望您理解我要解释的内容，关于如何解决此问题的任何建议将不胜感激。对于您如何使用头文件处理JavaScript文件的任何建议，我也将不胜感激。

谢谢！

— 本·埃弗拉德
source

标题应改为“如何使用WordPress链接外部jQuery / Javascript文件”。

— MikeSchinkel 2010年

我同意，我不确定该怎么称呼，因为我对我所遇到的问题不太熟悉：-)

— 本·埃弗拉德

Answers:

根据问题的措辞，您必须通过<script>在模板中编写标签来添加脚本。通过wp_enqueue_script()在模板的中添加自己的脚本functions.php，适当地设置对jQuery的依赖关系，并将wp_head()为您添加脚本。

function my_scripts() {
    wp_enqueue_script( 'my-sweet-script', get_bloginfo('template_directory') . '/script.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

有关更多信息，请参见法典页面。

— 安妮卡·贝克斯特伦（Annika Backstrom）
source

您认为我正在使用<script>标签添加脚本是正确的，这是我一直在寻找的替代方法，非常感谢！:-)

— Ben Everard

如果您只想在前端添加脚本，请钩住'template_redirect'而不是'init'。

— 约翰·布洛赫

好东西，我会更新我的答案。我几乎建议将队列包裹入is_admin()。

— Annika Backstrom

我通常将脚本排入模板文件中的上方get_header()，functions.php将其排入可能不需要的每个页面上。如果确实有全局变量，则在调用header.php之前wp_head()将其排队。这样，排队就是您希望他们进入的地方<head>

— Joe Hoyle 2010年

有时最好在页面底部添加脚本。这是codex.wordpress.org/Function_Reference/wp_enqueue_script的最后一个参数（第5个，$ in_footer），将其设置为true。对于那些需要更多控制权的人来说，信息很少。

— hakre 2010年

我建议看看使用jQuery和WordPress的5条技巧。除其他外，它显示了从Google的库中加载jQuery所需的代码：

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

您也可以查看“ 使用Google库”插件。

— 特拉维斯·诺斯卡特（Travis Northcutt）
source

实际上，这是一个更好的答案，因为它显示了如何使Google CDN版本的jQuery排队。不过，就像John在其他地方建议的那样，如果您只想在前端使用它，请使用template_redirect代替init。

— EAMann

关于加载位置的好点。虽然确实如此，但管理区域也使用jQuery，对吗？无论哪种方式，都感谢您展示如何控制它。

— 特拉维斯·诺斯卡特

是的，我刚刚找到了关于jquery / wp post的5个技巧，谢谢您的回答:-)

— Ben Everard 2010年

在WordPress上使用jQuery的5条提示-链接不再起作用。

— hakre

注意：该示例包括jQuery的“较旧”版本，当前WP版本（3.0.1）正在运行jQuery 1.4.2 ...

— t31os 2010年

尽管@tnorthcutt是正确的，如果您要加载自己的jQuery，则应该适当地使WP的本机jquery出队，但是在加载WP核心的另一个jquery版本时，您肯定会遇到问题。核心和插件都依赖它。因此，如果每次更新WP时都没有使用最新的jquery更新主题，则站点可能会中断。

以下代码将通过首先查找WP使用的版本，然后从Google加载该版本来确保您的主题始终加载正确的jquery版本：

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

— j
source