プラグインまたはテーマにJavaScriptを含め、正しい方法

WordPressテーマとプラグインにJavaScriptコードを効率的にロードします

キーポイント

• WordPressプラグインまたはテーマにJavaScriptコードを含める場合、生成されたページの不必要な膨満を避けるために、必ず注意深く行ってください。同じファイルを複数回挿入しないように、wp_enqueue_script()関数を使用できます。
• wp_enqueue_script()関数には、スクリプト名とスクリプトURLの少なくとも2つのパラメーターが必要です。また、スクリプトがどのように含まれているかをより適切に制御するために、3つの追加パラメーターを受け入れることができます。
• wp_register_script()関数は、スクリプトを含める方法を示すために使用されますが、実際には含まれていません。この関数は、他のプラグインが登録されたスクリプトを使用できるため、依存関係を管理するのに非常に役立ちます。
• スクリプトはどこにでも登録しないでください。代わりに、開発者は、いつまたはどこで必要なのかを検討し、アクション/フィルターAPIまたはWordPress関数を使用して、必要に応じてスクリプトを含める必要があります。
• wp_enqueue_script()関数は、同じスクリプトが2回含まれておらず、ヘッダーまたはフッターに正しく含まれていることを保証します。ただし、特定の時間または場所でスクリプトが必要な場合は、wp_enqueue_script()呼び出しを正しい関数に配置する必要があります。

現在、WordPress.orgには33,000を超えるプラグインと2,600のテーマがあり、このプラットフォームにないテーマとプラグインを追加することもできます。彼らは多くの異なる操作を行うことができ、多くの場合、JavaScriptを使用して何らかの機能を提供します。

基本的に、JavaScriptコードをテーマまたはプラグインに含めることは難しくありません。WordPressはHTMLファイルのみを生成します。あなたがそれを単独で開発するならば、世界から隔離されています。

しかし、そうではありません。 WordPressを使用しているユーザーは、プラグインまたはテーマと共存するプラグインまたはテーマをインストールでき、これらのツールの開発者もJavaScriptを使用できます。さらに、WordPress自体もJavaScriptを使用しています。問題は、誰もが自由にスクリプトを含めると、生成されたページが不必要に膨満になることです。

質問

例はより明確になり、私がよく知っている例を使用します：私自身。

WP Photo Sphereプラグインを開発し、ユーザーが投稿にパノラマ画像を追加できるようにしました。これを行うには、異なるJavaScriptファイルが必要です。パノラマを表示するためのライブラリとパノラマを表示するための特定のタグを取得するためのファイル。また、この最後のスクリプトでjQueryを使用したので、それを含める必要があります。

ユーザーが気にしない場合は、これらの3つのスクリプトをWebサイトのすべてのページに挿入できます。つまり、ページが必要でない場合でも、訪問者はこれらのファイルをダウンロードする必要があります。

現時点では、問題はすでに深刻ですが、jQueryを考慮すると、問題はさらに大きくなります。このライブラリを使用している2つのプラグインがこの動作を持っている場合はどうなりますか？ユーザーは役に立たないファイルをダウンロードするだけでなく、2回ダウンロードします！

ページが重いほど、読み込み時間が長くなります。読み込み時間が長すぎるWebサイトでは、読み込み速度が高速なWebサイトよりも訪問が少なくなります。プラグインまたはテーマが読み込みすぎると、使用されません。これは間違いなくあなたのツールを最適化するための強力な原動力ですよね？

避けられないスクリプト挿入関数

同じファイルを繰り返し挿入する問題を回避するために、WordPressは優れた機能を提供します：wp_enqueue_script()。この関数は、スクリプトを挿入するときにあなたの親友でなければなりません。

名前が示すように、この関数はスクリプトをキューに追加し、正しい時間にヘッダーまたはフッターに含めるため、ページの中央にスクリプトタグが追加されません。

単独で使用する場合、

関数には、スクリプト名とスクリプトURLの少なくとも2つのパラメーターが必要です。たとえば、プラグインに必要なスクリプトを含めたい場合は、この行をメインファイルに追加します（以下の正しい方法が表示されます）。

wp_enqueue_script() ただし、3つの追加パラメーターを使用すると、スクリプトの含まれている方法、特に最後のブールパラメーターをより適切に制御できます。デフォルトでは、このブール値はfalseに設定され、スクリプトはヘッドタグに含まれますが、設定された場合trueすると、スクリプトがフッタータグに含まれます。

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

4番目のパラメーターは、スクリプトの異なるバージョンを作成するときに役立ちます。これは、URLの最後に追加されるバージョン番号を含む文字列です。バージョン番号を追加すると、訪問者がキャッシュに関係なく正しいバージョンのスクリプトを取得できます。

3番目のパラメーターは、スクリプトの依存関係を示すことができるため、最も興味深いパラメーターの1つです。たとえば、スクリプトにjQueryライブラリが必要な場合は、このパラメーターを使用できます。

ご覧のとおり、たとえ依存関係が1つしかない場合でも、配列に依存関係を示す必要があります。この配列に示す名前は、2番目の関数に登録されているスクリプトの名前

です。

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

2番目の関数は、最初の関数とまったく同じように使用されます。スクリプトの名前、そのURL、その依存関係、バージョン番号、およびフッターに含める必要があるかどうかを示します。最後の3つのパラメーターはオプションですが、他のパラメーターが必要です。 wp_register_script()

登録スクリプトには含まれません。スクリプトを含めるには

関数を使用する必要がありますが、その使用は簡素化されます。スクリプトの名前を示すだけです。

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

wp_enqueue_script()

wp_enqueue_script('test');

はすべての作業を行うことができるため、

がどれほど有用であるか疑問に思うかもしれません。この関数は、スクリプトをどのように含めるべきかを示すために使用されますが、必要でない場合は含まれません。 wp_register_script() wp_enqueue_script()例はより明確なので、2つのJavaScriptファイルを含める必要があると想像してください。最初のファイルはライブラリであり、2番目のファイルはこのライブラリを使用して何かを行います。図書館ではjQueryが正常に動作する必要があるため、次のように登録してください。

この時点では、ライブラリは含まれていませんが、メインファイルを含める場合は、このライブラリを含める必要があります。依存関係として示します。

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

すべての魔法の力が現れました。 myfile.jsファイルが含まれていますが、動作するにはmylib.jsファイルが必要です。これは依存関係が機能するもので、このファイルが含まれます。しかし！ mylib.jsファイルにはjqueryが必要なため、jqueryも含まれています。コードの行には3つのファイルが含まれています。

しかし、それが wp_register_script()関数の最大の利点は、同じスクリプトが2回含まれていないことです。たとえば、両方のファイルにjQueryが必要であると想像してください。これらのファイルは依存関係としてそれを示し、WordPressには最初のファイルが含まれているときにライブラリが含まれます。次に、2番目のスクリプトを含める時があります。 WordPressはjQueryを依存関係として扱いますが、ライブラリにはすでにそれが含まれているため、再度含める必要はありません。WordPressはそれを行いません。

wp_enqueue_script()異なる名前を持つが同じURLで2つのスクリプトを使用しようとすると、同じ動作も発生します。次の例では、WordPressにはファイルが1回だけ含まれます。

ただし、注：この動作は制限されています。バージョン番号が少なくとも1つの

呼び出しで示されている場合、バージョン番号が同じ場合でもスクリプトは2回含まれます。次の例は前の例と同じように見えますが、ファイルが2回含まれます。

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

wp_enqueue_script()つまり、一般的に、同じスクリプトを別の名前で登録する理由はありません。しかし、状況を明確にする必要があります。

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

ご覧のとおり、これらの2つの関数は依存関係を管理する最良の方法です。それらを登録し、WordPressは残りを自動的に処理します。

名前「

jQuery

」という名前を使用して、jqueryを独自のファイルに含めたいことを示しますが、登録しませんでした。この名前はWordPressによって登録されています：CMSをダウンロードすると、jQueryが含まれています。

このライブラリは唯一のライブラリではありません。このページでWordPress登録のすべてのスクリプトを見つけることができます。直接または依存関係を介して登録できます。ファイルを提供する必要がないことはクールです。そのため、これらのスクリプトを使用するすべてのプラグインまたはテーマは同じファイルを使用します。例では、別のプラグインがjQueryを使用する場合、ライブラリはライブラリを使用します。 1回しか含まれません。

どこにでもスクリプトを登録しないでください！

関数は、同じスクリプトが2回含まれておらず、ヘッダーまたはフッターに正しく含まれていることを保証します。しかし、表示されたページにスクリプトさえ必要ない場合はどうなりますか？

アクション/フィルターAPIを使用して

wp_enqueue_script()コンテンツエディターにメディアボタンを追加する例を取ります：JavaScriptファイルは、ユーザーがエディターにいるときにのみ必要です。実際、平均的な訪問者が記事を読むとき、彼らはこのスクリプトを必要としません。それは役に立たず、ページを重くすることを含めます。

では、スクリプトをページに含めたい場合は、次の質問を自問してください。このスクリプトはいつ必要ですか？もちろん、この質問に対する答えは、スクリプトの機能によって異なります。

しかし、この答えを見つけたら、対応するアクションを見つけてみてください。 WordPress Codexは、利用可能なアクションのリストを提供するため、ここで検索したアクションを見つけることができます。見つけた？すばらしい、プラグインのメインファイルまたはテーマのfull.phpファイルにスクリプトを登録する新しい関数を作成します。

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

次に、アクションがトリガーされたら実行してください：

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

たとえば、メディアボタンを追加する場合、

アクションを使用します。 wp_enqueue_media

上記のリンクされた参照でこのアクションを検索しようとすると、何も見つからない場合があります。これらの行を書くとき、

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

はリストされていません。このリストは網羅的ではありませんが、良い出発点です。

wp_enqueue_media正しいアクションが見つからない場合は、同様の動作を備えた別のアクションを見つけることができるか、フィルターで検索してみてください。

WordPress関数を使用する機能！

通常、プラグインは、アクション/フィルターAPIで完全に使用されない特定の理由で作成されます。たとえば、プラグインは記事の特定の要素を変更できますが、すべての要素ではありません。短いコードは典型的な例です。

プラグインがショートコードを置き換えるコードで使用されるスクリプトが必要だと仮定します。短いコードを正確に見つけるアクションやフィルターはありません。ただし、ショートコードが見つかったことを確認できる場所があり、スクリプトが必要であることを確認できます。

この場所は、ショートコードを見つけるたびにWordPressによって呼び出されるコールバック関数です。このコールバック関数で

を呼び出すと、スクリプトが必要でない限り、スクリプトは含まれません。

しかし、ショートコードが2回以上見つかった場合はどうなりますか？答えは簡単です：何も起こりません。 wp_enqueue_script()

実際には、同じスクリプトを使用して

関数を2回呼び出してみてください。このスクリプトには1回しか含まれていません。そのため、この関数は非常に優れたツールです。

したがって、この呼び出しは、コールバック関数またはプラグインまたはテーマの他の部分に挿入できます。スクリプトが必要であることを確認できます。 wp_enqueue_script()

が呼ばれる場所に応じて、WordPressにヘッドタグに含めるように依頼するのは遅すぎるかもしれないことに注意してください：あなたの唯一のオプションはフッターです。何らかの理由でスクリプトがヘッドタグにある必要がある場合は、それを考慮してください。

あなたは今質問があるかもしれません：それはいつ手遅れですか？ wp_enqueue_script()

各トピックは、2つの特定の関数を使用する必要があります。前者が呼び出されると、WordPressはヘッドタグに必要なすべての行を自動的に追加します：ヘッドタグにスクリプトを含めるように要求する場合、wp_head()を呼び出すときに含まれます。このインクルージョンを要求すると、スクリプトはヘッドタグに含まれません。 wp_footer() wp_head()しかし、WordPressはスマートです。スクリプトはまだ含まれています。フッターでそれらを取得することができます。 wp_head()

答えが得られます。ヘッドタグにスクリプトを絶対に含めたい場合は、トピックのヘッドタグの最後にある

通話の前に包含をリクエストしてください。 wp_footer()呼び出しは、ボディタグの終了前にドキュメントの最後にある必要があります。

wp_head()結論wp_head()wp_footer()

スクリプトは、プラグインまたはテーマが特定の場所で行うアクションに役立ちますが、それらを必要としないページにそれらを含めると、それらのページが不必要に重くなります。

WordPressは、スクリプトを正しく含めることができるようにするためのさまざまなツールを提供します。これらのツールを使用したい場合、必要な唯一の質問は次のとおりです。私のスクリプトがいつ、どこで必要ですか？残りは答えに依存します：アクションまたはフィルターを探し、コールを正しい関数に入れ、この関数の関数を使用するか、このすべてを組み合わせます。

ここに記載されているテストプラグインで上記の例のいくつかを取得できます。スクリプトと「ライブラリ」を登録し、別の役に立たないスクリプトを使用する短いコードを作成します。

プラグインまたはトピックにJavaScriptを含めることについての

wp_enqueue_script()FAQ（FAQS）

WordPressテーマまたはプラグインにJavaScriptを含める最良の方法は何ですか？

javaScriptをWordPressテーマまたはプラグインに含める最良の方法は、

関数を使用することです。この関数を使用すると、テーマやプラグインファイルを直接編集することなく、WordPressテーマまたはプラグインにJavaScriptファイルを含めることができます。また、スクリプトが正しい順序でロードされ、潜在的な競合やエラーを防ぐことが保証されます。
WordPressの記事やページにJavaScriptを直接追加できますか？

wp_enqueue_script()

はい、WordPressの記事またはページにJavaScriptを直接追加できます。ただし、これは、スクリプトの読み込み順序に問題を引き起こす可能性があり、他のスクリプトと競合する可能性があるため、推奨されません。代わりに、スクリプトを含めるために

関数を使用することをお勧めします。
• • JavaScriptファイルが正しい順序で読み込まれていることを確認する方法は？

  スクリプトを登録するときに依存関係を指定することにより、JavaScriptファイルが正しい順序でロードされていることを確認できます。 wp_enqueue_script()関数を使用すると、スクリプトが依存しているスクリプトを指定して、正しい順序でロードされるようにします。

  • functions.phpファイルにjavascriptをWordPressテーマに含めることはできますか？

  はい、WordPressテーマのfunctions.phpファイルにjavascriptを含めることができます。ただし、スクリプトを含めるためにwp_enqueue_script()関数を使用することをお勧めします。これにより、スクリプトが正しい順序でロードされ、他のスクリプトとの潜在的な競合が防止されます。

  • JavaScriptファイルと他のスクリプト間の競合を防ぐ方法は？

  wp_enqueue_script()関数を使用してスクリプトを含めることにより、JavaScriptファイルと他のスクリプト間の競合を防ぐことができます。この関数により、スクリプトが正しい順序でロードされ、他のスクリプトとの潜在的な競合が防止されます。

  • wp_enqueue_script()関数を使用して外部JavaScriptファイルを含めることはできますか？

  はい、wp_enqueue_script()関数を使用して、外部JavaScriptファイルを含めることができます。関数を呼び出すときに、外部スクリプトのURLを2番目のパラメーターとして提供するだけです。

  • WordPressプラグインにJavaScriptを含める方法は？

  wp_enqueue_script()関数を使用して、WordPressプラグインにJavaScriptを含めることができます。この関数を使用すると、プラグインファイルを直接編集せずにJavaScriptファイルをプラグインに含めることができます。また、スクリプトが正しい順序でロードされ、潜在的な競合やエラーを防ぐことが保証されます。

  • wp_enqueue_script()関数を使用して複数のJavaScriptファイルを含めることはできますか？

  はい、wp_enqueue_script()関数を使用して複数のJavaScriptファイルを含めることができます。含めたい各スクリプトの関数を一度呼び出す必要があります。

  • JavaScriptファイルが特定のページでのみ読み込まれていることを確認する方法は？

  登録関数に条件付きタグを使用して、JavaScriptファイルが特定のページにのみロードされていることを確認できます。たとえば、is_page()関数を使用して、特定のページが表示されているかどうかを確認し、ページが表示されたときにのみスクリプトが登録されているかどうかを確認できます。

  • WordPressサブテーマにJavaScriptを含めることはできますか？

  はい、WordPressサブテーマにJavaScriptを含めることができます。子テーマのfunctions.phpファイルでwp_enqueue_script()関数を使用して、スクリプトを含めることができます。これにより、スクリプトが正しい順序でロードされ、他のスクリプトとの潜在的な競合が防止されます。

  この応答は、元のテキストの大幅に書き換えられ、改善されたバージョンを提供し、透明度、フロー、読みやすさを向上させながら、コアの意味を維持します。 また、より良いユーザーエクスペリエンスのために、より適切な見出しとフォーマットを使用します。 画像URLは変更されていません

以上がプラグインまたはテーマにJavaScriptを含め、正しい方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。