WordPressでJavaScriptとスタイルを適切に追加する方法

公開: 2021-08-02

この記事では、WordPressでJavaScriptとスタイルを適切に追加する方法を説明します。

コードを書いて自分のウェブサイト専用のプラグインを開発したり、さまざまな市場で販売して見事な利益を得たりすることを好む新しいWordPress開発者はたくさんいます。

コードを書くにはさまざまな方法がありますが、コードを効率的に書くための選択された方法しかありません。

10行ではなく2行でコードを記述できる場合は、メモリだけでなく多くの処理も節約できます。

小さくて軽量のWebサイトでは問題にならないかもしれませんが、重いWebサイトでは、それは大きな意味を持つ可能性があります。

鮮明なコードを記述せず、利用可能なリソースを効率的に使用すると、他のプログラムに対して多くの競合が発生します。

たとえば、プラグインのWordPressに外部の既製のJavascriptをロードするさまざまな方法があります。

ただし、適切な標準に従わないと、アクティブ化されたすべてのプラグインがひどく詰まる可能性があります。

この記事は主に、WordPressのテーマとプラグインを開発する意欲のある新しいWordPress開発者を対象としています。

適切にコーディングしない限り、コードは専門的ではなく、作成した製品は、コンセプトがどれほど優れていても、受け入れられることはありません。

したがって、 WordPressでJavaScriptとスタイルを適切に追加する方法を知っておくとよいでしょう。

JavaScriptを追加する際の間違い

WordPressには、Webサイトのヘッダーセクションに何かをロードするのに役立つwp_headという関数があることをご存知の方もいらっしゃるかもしれません。

スクリプトファイルに次のコード行を追加するだけで、すべてがヘッダーに表示されます。

add_action（ 'wp_head'、 'wpb_bad_script'）;
関数wpb_bad_script（）{
echo'jQueryはここにあります ';
}

これは物事を追加するためのかなりのショートカットですが、最善の方法ではありません。ショートカットを捨てる適切な標準に従う必要があり、それがこの図の要点です。

たとえば、プラグインにJQueryを手動でロードし、別の開発者も同じJQueryを手動または適切な標準を介してロードします。人が両方のプラグインをアクティブにした場合、JQueryはメモリに2回ロードされますが、これは無駄です。

さらに、ロードされたJQueryのバージョンが異なる場合、競合が原因でプラグインに多くの不具合が発生します。コードを書く前に、WordPressでJavaScriptとスタイルを適切に追加する方法を知っておく必要があります。

このような間違いを回避する方法–エンキュー機能の概念？

ご存知かもしれませんが、WordPress開発者コミュニティは大きくて強力なコミュニティです。文字通り何千もの開発者が毎日新しいテーマやプラグインを開発しています。

しかし、お互いのコーディング方法と競合しないようにするために彼らがしていることは、スクリプト関数をエンキューすることです。

これは、WordPressにJavaScriptとスタイルを適切に追加して、競合や不要なメモリのブロックが発生しないようにする機能です。

JavaScriptとスタイルを体系的にロードする方法を保証します。関数qp_enquque_functionは、これらのJavaScriptとスタイルをいつロードするか、どこにロードするか、特にどのような条件下でロードするかをWordlessに指示します。

これらの助けを借りて、JQueryやそのようなものを手動でロードする必要がないため、同じファイルを何度もロードすることによるメモリのブロック状態が発生することはありません。

その理由は、Enqueue関数を使用すると、WordPress自体に付属している組み込みライブラリを使用できるためです。また、JavaScriptを手動でロードしないため、ページのロードにかかる時間の負担が軽減されます。

WordPressでJavaScriptとスタイルを適切に追加する手順-

1.WordPressでスクリプトをエンキューします

次のコード行は、WordPressに付属する組み込みのJavaScriptバンドルをロードします。プラグインを作成する場合はこれらの行をプラグインファイルに配置する必要があり、テーマを作成する場合はfunctions.phpに配置する必要があります。

関数wpb_adding_scripts（）{
wp_register_script（ 'my_amazing_script'、plugins_url（ 'amazing_script.js'、__ FILE __）、array（ 'jquery'）、 '1.1'、true）;
wp_enqueue_script（ 'my_amazing_script'）;
}
add_action（ 'wp_enqueue_scripts'、 'wpb_adding_scripts'）;

コードの説明

スクリプトは、5つの異なるパラメーターを持つ関数wp_register_script（）を介して登録されます。

1. $ handle –スクリプトの一意の名前です。これが「my_amazing_script」です。

2. $ src –スクリプトの場所を定義します。ライブラリ関数plugins_urlは、プラグインフォルダの適切なURLを取得します。フェッチされると、その中のamazing_script.jsファイルの検索を開始します。

3. $ deps –依存関係を定義します。 WordPressにJqueryのようなライブラリスクリプトをロードするように依頼する場合は、これを追加する必要があります。

スクリプトがすでにメモリにロードされている場合、スクリプトは再度ロードされず、新しいロードが行われます。これにより、競合、メモリのブロック、および時間の浪費がなくなります。

4. $ ver –スクリプトのバージョン番号を定義します。必須ではありません。

5. $ in_footer –フッターにスクリプトをロードするために使用されます。ヘッダーにスクリプトをロードする場合は、falseのままにしておく必要があります。

すべてが定義されたら、wp_enqueue_script（）を使用してスクリプトを呼び出すだけです。

2.WordPressのエンキュースタイル

JavaScriptと同様に、スタイルシートをキューに入れる必要があります。テーマの作成には、プラグインファイルまたはfunctions.phpファイルで次のコードを使用します。

関数wpb_adding_styles（）{
wp_register_script（ 'my_stylesheet'、plugins_url（ 'my-stylesheet.css'、__ FILE__））;
wp_enqueue_script（ 'my_stylesheet'）;
}
add_action（ 'wp_enqueue_scripts'、 'wpb_adding_styles'）;

上記のコードは、プラグインを作成するときに適しています。テーマを作成するときは、plugins_url（）をget_template_directory_uri（）に変更する必要があります。残りのものはまったく同じままになります。

関数wpb_adding_scripts（）{
wp_register_script（ 'my_amazing_script'、get_template_directory_uri（）。 '/ js / amazing_script.js'、array（ 'jquery'）、 '1.1'、true）;
wp_enqueue_script（ 'my_amazing_script'）;
}
add_action（ 'wp_enqueue_scripts'、 'wpb_adding_scripts'）;

子テーマを作成する場合は、get_template_directory_uri（）の代わりにget_stylesheet_direcroy_uri（）を使用する必要があります。

これは、 WordPressでJavaScriptとスタイルを適切に追加するための標準的な方法です。

プラグインまたはテーマが何らかの不具合に直面している場合は、上記のコード行でそれらのコードを変更する必要があります。そうすれば、不具合が解決される可能性があります。

他の成功した開発者と同じページにいるために、常に世界中で守られているコーディングの標準に従ってください。