it-swarm.cn

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

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

在尝试解决问题时,我注意到头文件中的注释,其中的注释来自Twenty Ten主题:

/* 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行,但是管理页面需要它,所以我不得不把它放回去。

我也想使用(至少是实验)使用谷歌的CDN版本的jQuery,但不想包括它两次!

我希望你能理解我想要解释的内容,对于如何解决这个问题的任何建议都将非常感激。关于如何使用头文件处理JavaScript文件,我也很感激。

谢谢!

15
Ben Everard

根据您的问题的措辞,您必须通过在模板中编写<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');

有关详细信息,请参阅 codex页面

9
Annika Backstrom

我建议看看 使用WordPress的jQuery的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库 插件。

7
Travis Northcutt

虽然@tnorthcutt是正确的,你应该正确地将WP的本机jquery出列,如果你想加载自己的jquery,你肯定会在加载WP核心的不同jquery版本时遇到问题。核心和插件都依赖于它。因此,如果每次WP更新时都不使用最新的jquery更新主题,您的站点可能会中断。

以下代码将确保您的主题始终加载正确版本的jquery,首先查找WP正在使用的版本,然后从Google加载该版本:

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