WordPressテーマにJavascriptを適切に追加する

プラグインや親WordPressテーマとの競合を防ぐために、WordPressテーマにJavaScriptを追加する特定の方法があります。問題は、多くの「開発者」が、javascriptファイルをheader.phpまたはfooter.phpファイルで直接呼び出すことです。これは、誤った方法です。.


このガイドでは、functions.phpファイルを使用してjavascriptファイルを正しく呼び出し、サイトのヘッドタグまたはフッタータグに直接ロードする方法を示します。この方法で、配布用のテーマを開発していて、エンドユーザーが子テーマを介してスクリプトを変更したい場合、または縮小/キャッシングまたは他の最適化プラグインを使用している場合は、正しく機能します。また、子テーマを使用している場合は、必要のないはずのheader.phpファイルまたはfooter.phpファイルを子テーマにコピーせずに、スクリプトを適切に追加します(適切にコーディングされたテーマを使用している場合)。

WordPressテーマにJavaScriptを追加する方法が間違っています

以下に示すように、header.phpファイルまたはfooter.phpファイルでjavascriptを呼び出すのは正しい方法ではありません。他のプラグインとの競合を引き起こし、CMSでの作業中に手動で行うことは決してないことを強くお勧めします。いい考え.

WordPressテーマにJavascriptを追加する正しい方法

WordPressテーマにJavaScriptを追加する場合は、以下を使用してfunctions.phpファイルから追加することをお勧めします wp_enqueue_script. wp_enqueue_scriptsアクションを使用してJavaScriptをロードすると、テーマを問題なく保つことができます.

wp_enqueue_script( 'my-script'、get_template_directory_uri()。 '/js/my-script.js'、array()、true);

上記のコードにより、my-script.jsファイルがサイトに読み込まれます。ご覧のとおり、$ handleのみを含めましたが、スクリプト、バージョン番号、およびヘッダーまたはフッター(デフォルトはヘッダー)にロードするかどうかの依存関係を追加することもできます。.

wp_enqueue_script()関数は、技術的には任意のテーマまたはプラグインテンプレートファイルで使用できますが、グローバルスクリプトをロードする場合は、テーマのfunction.phpファイル、または特にスクリプトをロードするための別のファイルに配置する必要があります。地点。ただし、特定のテンプレートファイル(ギャラリーの投稿など)にスクリプトを読み込むだけの場合は、関数をテンプレートファイルに直接配置できますが、個人的には、すべてのスクリプトを1か所に保管し、条件を使用して読み込むことをお勧めします必要に応じてスクリプト.

WordPressがホストするスクリプト

WordPressのすばらしい点の1つは、テーマの開発で使用できる、ホストされ、登録されたスクリプトがすでにたくさんあることです。たとえば、ほとんどすべてのプロジェクトで使用されるjQueryは、常にWordPressからロードし、Googleなどのサードパーティサイトでホストしないでください。したがって、プロジェクトにカスタムスクリプトを追加する前に、次のリストを確認してください。 登録済みスクリプト WordPressにまだ含まれていないことを確認します。含まれている場合は、独自に登録するのではなく、それをロードする必要があります。.

WordPressエンキューフックの使用

以前、サイトにスクリプトを読み込むために必要な関数について説明しましたが、functions.phpファイルなどの非テンプレートファイルを操作する場合は、適切なWordPressフックにフックされている別の関数内にこの関数を追加する必要があります。子テーマを使用する場合、WordPress、サードパーティのプラグイン、および親テーマによって登録された他のすべてのスクリプトに登録されます.

WordPressには、スクリプトの呼び出しに使用できる2つの異なるアクションフックがあります.

  1. wp_enqueue_scripts – フロントエンドでスクリプトを読み込むために使用されるアクション
  2. admin_enqueue_scripts – WP管理でスクリプトをロードするために使用されるアクション

関数を作成し、WordPressフックを使用してスクリプトを呼び出す方法の例(functions.phpファイルに追加されます)を次に示します.

/ **
*スクリプトをエンキューする
* /
function myprefix_enqueue_scripts(){
wp_enqueue_script( 'my-script'、get_template_directory_uri()。 '/js/my-script.js'、array()、true);
}
add_action( 'wp_enqueue_scripts'、 'myprefix_enqueue_scripts');

注意:スクリプトの場所を定義するときに「get_template_directory_uri」関数をどのように使用しているかを確認してください。この関数は、テーマフォルダーへのURLを作成します。子テーマを使用している場合は、代わりに「get_stylesheet_directory_uri」を使用して、親テーマではなく子テーマを指すようにします。.

インラインJavaScriptコードの追加

インラインJavaScriptは、scriptタグを介してテンプレートファイルに簡単に貼り付けることができますが、特にコアプラグインまたはテーマコードの場合は、WordPressフックを使用してインラインコードを追加することをお勧めします。以下は、インラインスクリプトをサイトに追加する例です。

function myprefix_add_inline_script(){
wp_add_inline_script( 'my-script'、 'alert( "hello world");'、 'after');
}
add_action( 'wp_enqueue_scripts'、 'myprefix_add_inline_script');

これにより、以前に登録した「my-script」スクリプトの後にインラインJavaScriptが追加されます。 wp_add_inline_scriptを使用する場合、インラインコードを追加できるのは、既に登録されているスクリプトの前または後にあるため、特定のスクリプトのコードを変更しようとしている場合は、その後に読み込まれるようにするか、フックできるカスタムコードを追加する必要があるだけです。ほとんどのWordPressテーマによって一般的に読み込まれるjqueryスクリプトにそれを送信します。そうでない場合は、wp_enqueue_scriptを使用して、WordPressがホストするバージョンのjQueryを読み込むことができます。.

この方法を使用すると、子テーマまたはプラグインアドオンを介してインラインスクリプトを簡単に削除できるため、すべてのカスタムJavaScriptがきちんと整理され、WordPressによって解析されるため、より安全です。また、子テーマを使用している場合は、header.phpまたはfooter.phpファイルを子テーマにコピーする代わりに、functions.phpファイルを介してスクリプトをロードできます。.

つまり、子テーマで作業している場合、これを行う必要はありません。以下の例のように、wp_headまたはwp_footerフックを使用して、コードをヘッダーにダンプできます。

add_action( 'wp_footer'、function(){?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map