Blog

WordPressでのページごとのCSSやJSの読み込みの振り分けをfunctions.phpで一括設定する

2016.07.26Cat:wordpress デザイナー

規模がある程度以上大きなサイトでWordPressを利用する場合、
ディレクトリやページごとに読み込むCSSやJSを変更する必要が出てくることが多々あります。

header.phpやfooter.php、または各種テンプレート内でこれらを振り分けることも可能ではありますが、
振り分けるファイルの数が多くなると、
これらの方法では、コードが見づらくなってしまったり、管理が煩雑になってしまいます。

WordPressでは、functions.phpでadd_action()という関数を使うことで、WPの特定のアクションに対して、様々な設定することができますが、
その設定の中で、wp_print_styles、wp_print_scriptsというアクションに対して、wp_enquete_style()、wp_enqueue_script()という関数を合わせることで、
管理のしやすい状態で、CSS、JSの振り分けを行うことができるようになります。

方法

  1. functions.php内でアクションのwp_print_stylesまたは、wp_print_scriptsに紐付ける関数を準備し、wp_register_style()、wp_register_script()で読み込むCSS、JSを登録
  2. 1で用意した関数内でis_home()やis_page()などで場合分けし、wp_enqueue_style()またはwp_enqueue_script()で登録したCSS、JSを呼び出す
  3. add_action()でアクションと1の関数を紐付ける

1. functions.php内でアクションのwp_print_stylesまたは、wp_print_scriptsに紐付ける関数を準備し、wp_register_style()、wp_register_script()で読み込むCSS、JSを登録

2. 1で用意した関数内でis_home()やis_page()などで場合分けし、wp_enqueue_style()またはwp_enqueue_script()で登録したCSS、JSを呼び出す

3. add_action()でアクションと1の関数を紐付ける

 

これでCSS、JSの読み込みの振り分けは完了です。

CSSやJSの場所が大きく変わってしまった場合などでも、一か所で管理できるので、
運用の多いサイトなどでも重宝する方法だと思います。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ