web-dev-qa-db-ja.com

すべてのエンキュースクリプトでHead JSを使用する方法

最初に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/

javascriptperformancewp-enqueue-script
7
agileapricot

すべてのプラグイン/テーマがエンキューを使用しているわけではないことに注意してください。私が最初にアウトプットしたすべての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 Super Cache出力バッファリングの使用.

9
Backie

これが私が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>

スクリプトのラベル付けも使用されていることに注意してください。これは、スクリプトが何を（そしていつ）ロードされたかを識別するために非常に便利な場合があります。

2
Luciano Mammino

これが私の解決策です。私はhead.jsの代わりにyepnopeを使っていますが、理論はほとんど同じです。

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

それが助けになることを願っています、そしてあなたがその他のスレッドについて何かコメントがあれば私に知らせてください。

0
Dominic P

このプラグインを試すこともできます（または少なくともその中のコードを見てください）。

http://wordpress.org/extend/plugins/headjs-loader/ /

画面に出力される前に出力に対して正規表現を実行するので、キューに入れられなかったスクリプトでも機能します。

0
user2969