Javascript/jQuery Wordpress

WordPressのテーマにJavaScriptを正しく読み込む方法

投稿日:

HTMLでJavaScriptを読み込む時、一般的には</head>前</body>前に直接記述することが多いが、Wordpressで読み込みたい場合は、関数を用いてfunctions.phpに記述することが推奨されている。今回はその方法を記載。

関数を使うメリット

  • プラグインで使用しているjQueryとJavaScriptの重複読み込みを避けることができる
  • ヘッダー・フッターどちらに表示するか選択でき、読み込み速度対策ができる
  • 適切な順番で読み込むように制御できる  など

関数の書き方

wp_enqueue_script関数を用いてfunctions.phpに記述していく。

wp_enqueue_script関数とは

スクリプトファイルの重複を回避し、適切な順番で読み込む制御を行う関数。

準備

wp_enqueue_script関数はwp_head()またはwp_footer() の中で処理されて出力される。

そのため、header.phpの</head>前に<?php wp_head(); ?>、footer.phpの</body>前に<?php wp_footer(); がなければ、記載しておく必要がある。

※テンプレートを自作している場合などは特に記載もれに注意。

【header.php】

【footer.php】

functions.phpへの基本の書き方

引数説明必須
$handleスクリプトを区別する名前。
※すでに登録済みの名前を入れると追加されないので注意。
初期値はなし
$srcスクリプトのURLを指定。
初期値はfalse
親テーマから呼び出したいときはget_template_directory_uri()
子テーマから呼び出したいときはget_stylesheet_directory_uri()を使う。
$depsこのスクリプトの前に読み込むスクリプトを指定。
この引数で読み込み順の制御ができる。
初期値はarray()
$verスクリプトのバージョン。任意で指定できる。
ブラウザキャッシュ対策に使える。
初期値はfalse
$in_footerスクリプトの読み込み位置の指定。
trueは</body>前、falseは</head>前
初期値はfalse

書き方例

【当初htmlで</body>前に書いたJSのコード↓】

【functions.phpに書き直したもの↓】

【最終的にhtmlの</body>前に出力されたコード↓】

これで読み込みが完了。</head>前や</body>前に当初記載していたJSコードは削除しておきましょう。

 
スポンサーリンク

テスト

テスト

-Javascript/jQuery, Wordpress

関連記事

WordPressにSVGをアップロードする方法

WordPressのメディアでSVG画像をアップしようとすると「セキュリティーの理由によりこのファイル形式は許可されていません」とエラーが出てしまう。 Indexfunctions.phpに追記するS …

「WP mail SMTP」を使い、ローカル環境でWordPressのメール送信テストをする方法

MAMPなどのローカル環境でWordpressのメール送信テストをしたい、というケースがある。ローカル環境にメールサーバーを稼働させるのは大変なので、外部のメールサーバーを使えるようにするプラグインと …

「送信された URL に noindex タグが追加されています」エラーの対処

WordPressを使用、かつ「Google XML Sitemaps」プラグインを利用しているケースで、Google Search Consoleに上記のエラーが出た場合の対処方法について記載。 I …

no image

jQuery超基本の書き方とメソッド

Index基本の書き方cssメソッドtextメソッドその他基本のメソッド – 隠す系その他基本のメソッド – 表示する系id, classに適用させる系 基本の書き方 $(&# …

IEブラウザを判定してアラートを表示する方法

Web制作に携わっていると、IEを(いまだに…)利用しているユーザーのための対応が必要になってくる。対応パターンとしては、 パターン1:IE用に別途cssを書くパターン2:「(レイアウトが崩れる)IE …