WPエンキューとは何ですか？どのように使用しますか？

公開: 2017-10-28

HTMLを初めて学習するとき、あらゆる種類の対話機能を挿入する方法を知る唯一の方法は、ページのヘッダーまたはフッターにスクリプトタグを使用して、外部JavaScriptファイルのタイプとソースを設定することです。（または、本当に学習しているだけの場合は、本体内のスクリプトタグ間のJS関数全体が学習には問題ありませんが、高度なWordPress開発に移行すると、かなり悪い習慣になります。エンキュー関数に入ります。

単純な1ページのWebサイトを通過すると、これらの初心者の慣習により、非常に厄介な状況が発生する可能性があります。 JavaScriptをどんどん追加し始めると、Webサイトはどんどん遅くなります。更新には時間がかかります。最終的に、JavaScript-gettiの大きな山を作りました。どんなに頑張っても、その麺の山は解けません。

ありがたいことに、WordPressのエンキュー機能を使用して、CMSが処理するスタイルとスクリプトを追加できます。すべての混乱はあなたのために処理されます。各ページのヘッダーまたはフッターに必要なスクリプトまたはスタイルを直接貼り付けるほど簡単ではありませんが、それを処理する正しい方法です。 WordPressはひどく意見が分かれていません、あなたが知っておくべき一連のベストプラクティスが間違いなくあります

そして、 wp_enqueue_scriptsはこれらのプラクティスの最前線にあります。

大したことは何ですか？

wp_enqueueを使用する主な理由は、サイトをスムーズかつ迅速に実行し続けるためです。ページの速度は重要であり、同じスクリプトとスタイルを何度も何度も使用しても役に立ちません。まったく。

幸い、 wp_enqueueは関数型プログラミングの一例です。つまり、実行するコード（JavaScriptスニペット）を1つ記述し、必要なたびにすべてを書き直して貼り付ける代わりに、 wp_enqueueを使用して呼び出します。

それです。素晴らしい。

さらに素晴らしいことに、enqueueメソッドを使用すると、WordPress自体が_script_タグをヘッダーとフッターに自動的に挿入し、各ページに個別に入力しなくてもロードできます。

WPエンキュー構文とパラメータ

スクリプトのエンキューはそれほど難しくありません。そもそもJavaScriptを操作するのに十分な知識がある場合、エンキューに使用するPHP関数は簡単です。

通常のスクリプトタグでは、外部の.jsファイルを直接インポートするか、タグ自体の間に長いコードスニペット全体を貼り付けます。（これは、DiviコードモジュールまたはWPカスタムHTMLまたはテキストウィジェットに何かを貼り付ける場合にも実行します）。

いくつかの基本的なパラメータと構文を知っておく必要があります。

コーデックスはこれを基本エンキューコードとして提供します。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

全体として、パラメーターによって使用可能なビットに分解するのは非常に簡単です。

wp_enqueue_script（）は、すべてのコードをページに配置するすべての関数です。
$ handleは、スクリプト自体の一意の名前です。
$ srcは、エンキューしている実際の.jsファイルのURLを表します。
$ depsは、これが必要とする依存関係の$ handleです。
$ verがバージョン番号になります。何も指定されていない場合は、WPインストールバージョンが自動的に追加されます。
$ in_footerまたは$ in_headerは、スクリプトを配置する場所をWordPressに指示します。

スクリプトをエンキューするための完全なドキュメントは、コーデックスで見ることができます。

注意、学生：WP登録が今始まります！

WPには、_wp_enqueue__に加えて、_wp_register__と呼ばれる便利でダンディなメソッドもあります。どちらのメソッドも同じパラメーターと構文を使用するため、実際には、それらのペアを2対1で処理できます。基本的に、スクリプトの登録は、JavaScriptで関数に名前を付けることと同じです。

必須ではありませんが、スクリプトを登録すると、後で依存関係として宣言する必要がなくなるため、作業が大幅に楽になります。それらはすでに登録されています。したがって…_wp_register__。スクリプトが登録されると、以下の例に示すように、その$ handleによってスクリプトを呼び出すことができます。

次のようにコードを登録します。

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer);

その後、再び必要になったときはいつでも、次のようにコールバックできます。

wp_enqueue_script( 'jquery' );

さらに、登録とは、スクリプトが不要な場合でも、スクリプトをロードする必要がないことを意味します。 WPMUには、ショートコード作成のすばらしい例があります。スクリプトを_wp_enqueue__を使用するショートコードに登録すると、ショートコードが使用されている場合にのみ使用されます。ただし、エンキューするだけで呼び出すと、ショートコードを使用しなくても読み込まれます。

あなたはコーデックスのメソッドについてのすべてを読むことができます。

さらに、プラグインの作成者は、WordPress.orgリポジトリにスクリプトを含める必要がある場合は、スクリプトをキューに入れる必要があります。そのため、それが重要な場合は、queueinにアクセスすることをお勧めします。

それを一緒に入れて

コードの実装は簡単です。以下のようなスニペットをfunctions.phpにドロップするだけです。残りはWordPressが処理します。つまり、これはjQueryを呼び出すための非常に基本的なスニペットですが、これらがどのように連携するかを確認できます。

通常、次のようなものを使用します。

<script type="text/javascript" src="jquery.js"></script>

enqueue_scripts_の使用方法を学ぶと、次のようなものが表示されます。

add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts(){
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, true);
    wp_enqueue_script( 'jquery' ); 
}

ここで、上記のコードで、WordPressの一部であるadd_scripts（）_関数を使用して、次のいくつかのステップの順序を概説していることに注目してください。まず、 wp_register_関数は、指定されたすべての詳細を取得し、スクリプトをページフッターに配置します。次に、すべてがセットアップされたら、 wp_enqueueを使用して最後に呼び出します。

まとめ

それが本当にすべてです。まあ、それは真実ではありません-エンキューはWPのかなり根付いた部分です。しかし、これらはあなたが以前よりもWordPressでより多くのことをすることをいじくり回す基本です。

Web開発を始めたときにスクリプトを挿入することについて私たち全員が学んだ基本は今でも機能しますが、それが常に最善の方法であるとは限りません。 PHP上に構築されているWordPressの利点の一部は、とにかく持っていたのと同じ基本構造とワークフローを実際に維持しながら、この種のロジックを作業に取り入れることができることです。

hanss /shutterstock.comによる記事のサムネイル画像