WordPressでJavascriptやCSSをどのように読み込むべきか

 前に「WordPressのテーマをjQuery初心者がカスタマイズしてみる | Naokix.net」というエントリーでやらかしてしまいましたので、訂正エントリーを書きます。訪問してくれた方々、申し訳ありませんです。

悪い例

 外部ファイルにJavaScriptを記述してテーマの header.php の中で、

の前に script タグを使って読み込む方法です。

CSS だとこうなりましょうか。

私はこれをやらかした訳ですが、この方法は WordPress の流儀にのっとっていないのでよろしくありません。これだとファイルを重複して読み込んでしまう危険があるため、WordPress では独自の Javascript・CSS 読み込み方法を提供してくれています。

WordPress での正しい読み込み方

 wp_enqueue_scripts アクションに対して add_action 関数でフックします。テーマのフォルダの中に「test.js」という外部 Javascript ファイルがあった場合、function.php に次のソースを追記してください。

第1引数の「$handle」ですが、WordPress がデフォルトで登録している識別名とかぶらない名前にしてください。登録済みの識別名は以下で確認できます。

wp_enqueue_script:WordPress私的マニュアル

上の例では、第3引数から第5引数を省略していますが、これは次のように記述しても同じ結果になります。

 メインのスタイルシートとは別に、追加のスタイルシートを読み込ませたい場合も、wp_enqueue_scripts アクションに対してフックを行います。wp_enqueue_script 関数のかわりに wp_enqueue_style 関数を使ってください。

PC とスマホでスタイルシートを切り替えたり、Web フォントアイコン用のスタイルシートを読み込む場合などに活用してください。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP