【コピペ】wp_head()やwp_footer()にCSSやJSを読み込む方法

いままではheader.phpなどに記述していましたがついソースコードが長くなり、もっとスマートな記述方法がないか探してました。そこで、functions.phpのadd_action「wp_enqueue_scripts」を使ってwp_head()やwp_footer()にCSSやJSを読み込む方法があります。

この方法だと、functions.phpで一元管理できてとても楽です。
ソースコードも見やすい!

add_actionとは?

この関数はアクションフックとよばれるものです。
記事の投稿をしたとき、保存したとき、読み込んだときなど
WordPressのあらゆる処理に関連づけされています。

特定のアクションに関数をフックします。
この関数は add_filter() のエイリアスです。
アクションフックの一覧についてはアクションフック一覧をご覧ください。アクションは(通常は)WordPress コアが do_action() を呼び出すときにトリガーされます。

引用:関数リファレンス/add action

wp_enqueue_scripts

この関数はJSを読み込む処理に使われます。
「add_action」のアクションフックを使うことで任意の処理を追加できます。

スクリプトファイルがまだインクルードされていない場合、また、すべての依存するスクリプトが登録済みの場合、依存関係に従った適切なタイミングでファイルを生成されたページにリンクします。スクリプトのリンクは、wp_register_script() /en 関数ですでに登録済みのハンドル、またはこの関数に必要なパラメータを与えることで行えます。
これは WordPress が生成するページに JavaScript をリンクする際に推奨されている方法です。

引用:関数リファレンス/wp enqueue script

 

functions.php

 

処理内容

 

JSをインラインで読み込む場合

 

Sidebar