web-dev-qa-db-ja.com

非同期JavaScriptローダー

ページの読み込み中にスクリプトを読み込むことを利用したいです。すなわち。 Yepnope 、 head.js など...

しかし、私は他のプラグインがそれらを追加しようとしないようにスクリプトをキューに入れることができるようにしたいです。 （ラクエリー）

誰かが何か提案がありますか？

前もって感謝します...

jqueryjavascriptwp-enqueue-script
2
Adam

あなたは両方を持つことはできません：あなたはwp_enqueue_script（）かhead.jsのどちらかを使います。

あるいは、WPスクリプト依存関係ツリーをhead.js呼び出しに変換するために、ちょっと変わったハッキン​​グをします。

注意：head.jsをあなたが使いたいライブラリに置き換えてください。

1
scribu

これはコメントであるべきですが、私はまだそれらの特権を持っていません。

しかし、主な関心事が単に複製を防ぐことである場合は、スクリプトを登録解除してから、同じスクリプトをソースなしで登録して、それをエンキューします。基本的に、wpは空白のスクリプトを実行して、それ以外のすべての登録/エンキューバージョンをブロックします。

それからあなたが選んだ方法でスクリプトを追加してください。徹底的なテストはしていませんが、どこか他のところからヒントを得ています。理論上はうまくいくはずです。

1
David Hobs

これは私がこれを達成するためにしていることです。私はこれを可能な解決策として掲載しており、また私よりも[WPを経験したことのある人からフィードバックを得ています。私の実装に問題がある、または私が考えていないことに気づいたら、私に知らせてください。

既知の制限事項：

  • wp_enqueue_scriptで正しくエンキューされているスクリプトでのみ動作します。
  • ページの<head>セクションにのみ出力されるように登録されていても、フッター内のすべてのスクリプトを出力します。これは回避するのが簡単かもしれませんが、私の実装のために私はこれを好む。

head.jsプラグイン で見た問題は、それが<head>セクションのスクリプトでしか動作しないように見えたことと、それができなかったという事実です。私の考えでは、このようにスクリプトをロードすることは本当に良い利点である、簡単なCDNフォールバック機能を可能にします。

わかりました、これはコードです。これは私の一般的な機能プラグインの中にあるクラスの一部ですが、functions.phpの中にあるか、または他の方法で編成されているのと同じくらい簡単にできます。私は今のところ yepnope を使用していますが、これは別のスクリプトローダーを使用するように簡単に変更できます。

class example {

    function __construct() {

        /*
        Hook into the script printing functionality and use our own resource loader to load
        scripts in a non-blocking, asynchronous, parallel fancy way
        */
        if( !is_admin() ) {

            add_action( 'wp_print_scripts',  array( &$this, 'deploy_script_loader' ) );
        }       
    }   

    /*
    If we have any javascripts queued for the page, grab the handles of
    all of the ones to be loaded in the header and dequeue them now. 
    Then, we will check again and reload any that weren't queued
    yet in the footer.
    */
    function deploy_script_loader( ) {
        global $wp_scripts;

        if ( !empty( $wp_scripts->queue ) && !is_admin() ) {

            // Get the queue in our class property, and dequeue everything
            foreach ( $wp_scripts->queue as $handle ) {

                /*
                Check if this script is supposed to be loaded in the header (group isn't 1).
                If it is, we'll grab it now and dequeue it. We'll save the rest of the dequeuing
                for the footer script or else we'll miss some scripts that are queued after
                this hook is run.
                */
                if ( 1 !== $wp_scripts->registered[$handle]->extra['group'] ) {

                    /*
                    Just dequeuing a script here isn't enough to prevent it from being
                    printed in the header if another script that we haven't dequeued (ie a footer
                    script) depends on it. So, we need to make sure that all of the
                    scripts we just dequeued will be ok loading in the footer (where they will
                    get dequeued for real before they are printed).
                    */
                    $wp_scripts->registered[$handle]->extra['group'] = 1;
                }
            }

            // Add our hook to load everything in the footer
            add_action( 'wp_footer', array( &$this, 'output_script_loader' ) );
        }       
    }

    /*
    Function to be ran in wp_footer to output the js script loader
    html content.
    */
    function output_script_loader() {
        global $wp_scripts;

    // Process the scripts dependency tree, but don't print anything
    ob_start();
    $script_queue = $wp_scripts->do_items();
    ob_clean();

        // Add our script loader
        echo '<script type="text/javascript" src="' . plugins_url( '/scripts/yepnope.1.0.2-min.js', __FILE__ ) . '"></script><script type="text/javascript">';

        // Loop through the queued scripts and get all of their localization output objects first
        foreach( $script_queue as $handle ) {

            echo $wp_scripts->registered[$handle]->extra['data'];
        }

        echo 'yepnope.errorTimeout = 4000; yepnope([';

        $i = 0;
        $count = count( $script_queue );

        // Loop through the queued scripts again, this time output the script loader syntax
        foreach( $script_queue as $handle ) {

            if ( 'jquery' === $handle ) {

                $jquery_cdn_url = ( is_ssl() ) ? 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' : 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';

                echo ' { load: "'. $jquery_cdn_url .'", callback: function () { if (!window.jQuery) { yepnope("' . $wp_scripts->base_url . $wp_scripts->registered['jquery']->src . '"); } } },';
            } else {

                $src = $wp_scripts->registered[$handle]->src;

                // Check if this is a relative path or if we have the whole thing
                if( 'http' !== strtolower( substr( $src, 0, 4 ) ) ) {

                    $src = $wp_scripts->base_url . $src;
                } else {

                    $src = ( is_ssl() ) ? 'https' . substr( $src, strpos( $src, ':' ), strlen( $src ) ) : 'http' . substr( $src, strpos( $src, ':' ), strlen( $src ) );
                }

                $comma = ( $i == ( $count - 1 ) ) ? '' : ',';

                echo '{ load: "' . $src . '" }' . $comma;
            }

            $i++;
        }       

        echo ']);</script>';
    }
}

// Instantiate the class
new example;
1
Dominic P

これがWordPressですべてのカスタムjsファイルに非同期を追加する簡単な方法です。

functions.phpに追加：

// Async load for all style
    function base_async_scripts($url)
    {
        if ( strpos( $url, '#asyncload') === false )
            return $url;
        else if ( is_admin() )
            return str_replace( '#asyncload', '', $url );
        else
        return str_replace( '#asyncload', '', $url )."' async='async"; 
        }
    add_filter( 'clean_url', 'base_async_scripts', 11, 1 );

//add or change in url as mentioned below
wp_enqueue_script( 'base-functions', get_template_directory_uri() . '/js/functions.js#asyncload', array( 'jquery' ), null, true );
0
user86710

私はちょうどWordpressのインストール用のドロップインになるはずのプラグインをリリースしました。まだ非常に早い段階で、私はバグがあると確信しています、しかしそれは私が取り組んでいるサイトで私のために働きました：

http://wordpress.org/extend/plugins/asynchronous-javascript/

0
Paris Holley