如何将Head JS与所有入队脚本一起使用？

时间：2011-01-24 作者：agileapricot

我想先加载head js，然后将所有排队的脚本加载到它的函数中。就像这样。。。

<script src=">/js/head.load.min.js" type="text/javascript" charset="UTF-8"></script>

<script type="text/javascript">
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {

   // all done

});
</script>

我该怎么做？

对于那些不了解HeadJS的人来说，它是一个2.30KB的脚本，可以加速、简化和现代化您的站点。。。

http://headjs.com/

3 个回复

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

应该预先警告您，并非所有插件/主题都使用排队。当我第一次开始处理所有输出的Javascript和CSS文件时，我只是连接到排队的文件中。这导致我只能得到10个JavaScript文件中的2个和3个CSS文件中的1个。

这里有一些快速POC。这两种方法都没有经过测试，但如果你能编写代码的话，它们都是为了让你走上正确的方向。回到家后，我会做一些更合适、更实用的东西。

add_action(\'wp_print_scripts\',\'head_files\');
function head_files(){

    global $wp_scripts, $auto_compress_scripts;

    print \'print out head.js\';  

    $queue = $wp_scripts->queue;
        $wp_scripts->all_deps($queue);
        $to_do = $wp_scripts->to_do;
    $headArray = array();
        foreach ($to_do as $key => $handle) {
            $src = $wp_scripts->registered[$handle]->src;
        $headArray[] = $src;
    }

    print \'print out head.js("\'.implode("\'",$headArray.\'")\';
}

（基本上从JS & CSS Script Optimizer)

add_filter(\'wpsupercache_buffer\', \'head_files\' );
function head_files($buffer){
    if ( $fileType == "js" ){
            preg_match_all(\'~<script.*(type="["\\\']text/javascript["\\\'].*)?src=["\\\'](.*)["\\\'].*(type=["\\\']text/javascript["\\\'].*)?></script>~iU\',$content,$matches);
            $headArray = $matches[2];
    }


    print \'print out head.js\';  

    print \'print out head.js("\'.implode("\'",$headArray.\'")\';
    return $buffer;
}

使用WP超级缓存输出缓冲。

SO网友:Luciano Mammino

下面是我要做的，来整合head。js公司：

我将此代码放在模板中functions.php 文件

define(\'THEME\', get_bloginfo(\'template_url\'), true);
define(\'THEME_JS\', THEME . \'/js/\', true);

add_action(\'wp_print_scripts\',\'head_js_files\');
function head_js_files()
{
    if (is_admin()) return; //to preserve the admin

        global $wp_scripts;

    $in_queue = $wp_scripts->queue;

    if(!empty($in_queue))
    {
        $scripts = array();
        foreach($in_queue as $script)
        {

            $src = $wp_scripts->registered[$script]->src;
            $src = ( (preg_match(\'/^(http|https)\\:\\/\\//\', $src)) ? \'\' : get_bloginfo(\'url\') ) . $src;
            $scripts[] = \'{\' . $script . \':"\' . $src . \'"}\';
        }

        echo "<script type=\\"text/javascript\\" src=\\"".THEME_JS."head.js\\"></script>\\n";
        echo "<script type=\\"text/javascript\\">head.js(\\n". implode(",\\n", $scripts). "\\n);</script>\\n";
    }

    $wp_scripts->queue = array();
}

它输出如下内容：

<script type="text/javascript">head.js(
    {jquery:"/wp-includes/js/jquery/jquery.js"},
    {jquery_lastfm:"http://localhost/lucianomammino/wp-content/plugins/lastfm-recent-tracks-widget/js/jquery.lastfm.js"},
    {nav:"http://localhost/lucianomammino/wp-content/themes/lmtheme/js/jquery.dropdown.js"}
);</script>

请注意，它还使用了脚本标签，有时这对于确定加载了什么脚本（以及何时加载）非常有用。

SO网友:Dominic P

这是我的解决方案。我用的是yepnope而不是head。js，但理论基本相同。

https://wordpress.stackexchange.com/a/40325/9802

我希望这能有所帮助，如果你对另一个帖子有任何意见，请告诉我。

结束

标签： javascript performance wp-enqueue-script 小码农

如何将外部jQuery/Javascript文件与WordPress链接

因此，我使用Starkers作为我下一个WP主题的基础，我遇到了一个小问题，我在header.php 但是当我使用Firebug检查我的网站时，我注意到jquery被下载了两次，我做了一些挖掘，并注意到我不仅包括了文件，还包括了wp_head() 作用在尝试修复该问题时，我注意到头文件中有一条注释，该注释源于“210”主题：/* Always have wp_head() just before the closing </head> * tag of your theme, or

小码农CODE

如何将Head JS与所有入队脚本一起使用？

相关推荐

如何将外部jQuery/Javascript文件与WordPress链接