WordPress

WordPressでCSSやJavascriptをページ毎に振り分ける

Category

WordPress

WordPressでオリジナルのテーマを作成したり、テンプレートファイルをカスタマイズする場合、投稿ページ・カテゴリページ・固定ページ・カスタム投稿タイプで作成したページ等、ページによってCSSやJavascriptを個別に読み込みたい場合があります。
header.phpで条件分岐させてもよいのですが、様々な設定を一括管理できた方が楽です。
そこで、functions.phpでCSSやJavascriptといった外部ファイルの読み込みを一括管理する方法を書こうと思います。

Keyword:外部ファイル管理,css,javascript,functions.php

外部ファイルの読み込みを管理

functions.phpで外部CSSの読み込みを一括管理する

ここでは、「全ページ共通のCSS」「TOPページ専用のCSS」「投稿ページ・カスタム投稿ページ専用のCSS」「カテゴリページ専用のCSS」「カスタム投稿アーカイブページ専用のCSS」「固定ページ専用のCSS」の計6つのCSSをページの種類毎に振り分ける方法を紹介します。

functions.php

function register_style() {
  wp_register_style('style', get_bloginfo('template_directory').'/style.css');
  wp_register_style('home', get_bloginfo('template_directory').'/css/home.css');
  wp_register_style('single', get_bloginfo('template_directory').'/css/single.css');
  wp_register_style('category', get_bloginfo('template_directory').'/css/category.css');
  wp_register_style('archive-information', get_bloginfo('template_directory').'/css/archive-information.css');
  wp_register_style('page', get_bloginfo('template_directory').'/css/page.css');
}
   function add_stylesheet() {
     register_style();
     // 全ページ共通
     wp_enqueue_style('style');
     // TOPページ専用
     if (is_home()){
        wp_enqueue_style('home');
     }
     // 投稿・カスタム投稿ページ専用
     elseif (is_single()) {
        wp_enqueue_style('single');
     }
     // カテゴリページ専用
     elseif (is_category()) {
        wp_enqueue_style('category');
     }
     // カスタム投稿アーカイブページ専用
     elseif (is_post_type_archive('ポストタイプ名')) {
        wp_enqueue_style('archive-information');
     }
     // 固定ページ専用
     elseif (is_page()) {
        wp_enqueue_style('single');
     }
   }
add_action('wp_print_styles', 'add_stylesheet');

まず、ここで使うフックと関数について簡単に説明します。
WordPressには、フィルターフックとアクションフックと呼ばれるプラグインAPIが用意されています。これらのフックは、特定のタイミングでプラグインの関数を呼び出したり、プラグインを動作させたりするためのもので、プラグイン内に用意された関数がある場合、その関数を使ってWordPressのデフォルトの動作を変更したりできます。
上記では”wp_print_styles”というアクションフックを使っています。
そして、”wp_register_style”や”wp_enqueue_style”といった関数を使い、CSSを読み込んでいます。
プラグインAPI・アクションフック・それらに使用する関数に関しては、WordPressのCodexをご参照ください。

[WordPress Codex参照]
・プラグインAPI
・アクションフック
・関数リファレンス

全ページ共通のCSS

2行目で全ページ共通のCSSを読み込みます。
12行目で全ページ共通のCSSを指定しています。
‘style’の箇所は、CSSのファイル名と同じにした方が分かりやすいです。

TOPページ専用のCSS

3行目でTOPページ専用のCSSを読み込みます。
14~16行目でTOPページのみCSSを読み込むよう条件分岐させています。

投稿・カスタム投稿ページ専用のCSS

4行目で投稿・カスタム投稿ページ専用のCSSを読み込みます。
18~20行目で投稿・カスタム投稿ページのみCSSを読み込むよう条件分岐させています。

カテゴリページ専用のCSS

5行目でカテゴリページ専用のCSSを読み込みます。
22~24行目でカテゴリページのみCSSを読み込むよう条件分岐させています。

カスタム投稿アーカイブページ専用のCSS

6行目でカスタム投稿アーカイブページ専用のCSSを読み込みます。
26~28行目でカスタム投稿アーカイブページのみCSSを読み込むよう条件分岐させています(カスタム投稿アーカイブページに使用する条件分岐には、”is_post_type_archive(‘ポストタイプ名’)”を使います)。

固定ページ専用のCSS

7行目で固定ページ専用のCSSを読み込みます。
30~32行目で固定ページのみCSSを読み込むよう条件分岐させています。

以前の記事”WordPress 3.3について“の中で紹介した”編集画面(投稿・固定編集ページ)だけ、スタイルシートのbodyタグに設定しているスタイルが反映されてしまう”の件に関しての回避方法です。
※2012.01.03リリースのWordPress 3.3.1で修正されているようです。
※ページ内で使用するスタイルシートは、特に管理画面には必要ありませんので、以下条件分岐はそのまま適応しておいても問題ありません。

上記functions.phpに条件分岐を追記します。

functions.php

if (!is_admin()) {
// 上記のソースをここに記述
}

“管理画面には適応しない”といった意味です。

functions.phpで外部Javascriptの読み込みを一括管理する

スクリプトファイルの読み込みは”wp_print_scripts”というアクションフックを使います。
ここでは、「全ページ共通のJavascript」「TOPページ専用のJavascript」「特定の固定ページ専用のJavascript」の計3つのJavascriptをページの種類毎に振り分ける方法を紹介します。

functions.php

if (!is_admin()) {
   function register_script(){
     wp_register_script('rollover', get_bloginfo('template_directory').'/js/rollover.js');
     wp_register_script('slide', get_bloginfo('template_directory').'/js/slide.js');
     wp_register_script('jquery-lightbox', get_bloginfo('template_directory').'/js/jquery-lightbox.js');
   }
   function add_script() {
     register_script();
     // 全ページ共通
     wp_enqueue_script('rollover');
     // TOPページ専用
     if (is_home()) {
        wp_enqueue_script('slide');
     }
     // 固定ページIDが“1”と“3”のページ専用
     elseif (is_page(array(1,3))) {
        wp_enqueue_script('jquery-lightbox');
     }
   }
   add_action('wp_print_scripts', 'add_script');
}

管理画面には適応しない

ページ内で使うJavascriptは管理画面では使用しないため、1行目で条件を指定して管理画面には適応しません。
CSSの読み込みでやったのと同じ要領です。

全ページ共通のJavascript

3行目で全ページ共通のJavascriptを読み込みます。
10行目で全ページ共通のJavascriptを指定しています。
‘rollover’の箇所は、Javascriptのファイル名と同じにした方が分かりやすいです。

TOPページ専用のJavascript

4行目でTOPページ専用のJavascriptを読み込みます。
12~14行目でTOPページのみJavascriptを読み込むよう条件分岐させています。

特定の固定ページ専用のJavascript

5行目で特定の固定ページ専用のJavascriptを読み込みます。
16~18行目でページID”1″と”3″の固定ページのみJavascriptを読み込むよう条件分岐させています。

あと、最後にこれはおまけです。
WorsPressのバージョンをソース上に表示させたくない時、以下のような記述をfunctions.phpに追記することがあると思います。

functions.php

remove_action('wp_head', 'wp_generator');

ですが、アクションフックの”wp_print_styles”や”wp_print_scripts”でCSSやJavascriptの外部ファイルを読み込んだ場合、そのCSSやJavascriptのバージョンまで表記してしまいます。自作したCSSやJavascriptにはもちろんバージョン等ありませんので、WordPressのバージョンを記述してしまいます。
何だかこれだと、WordPressのバージョン表記を無効にした意味がありません…。

このCSSやJavascriptのバージョン表示自体を消してくれるプラグインがあります。
Remove Script & Stylesheet Versionsというプラグインです。

List

関連記事(※当記事と関連性が高いと思われる記事)

CSS3のベンダープレフィックス

2012/03/03
ベンダープレフィックス
スコア:16 ※スコアの数値が大きいほど、関連性の高い記事です。 ベンダープレフィックス ベンダープレフィックスとは、仕様策定途中のCSS3のプロパティや値を各ブラウザが先行実装している場合、それらの機能を動作させるためにプロパティや... 続きを読む...

Internet Explorer9以前でもCSS3を使う

2012/03/04
CSS3
スコア:15 ※スコアの数値が大きいほど、関連性の高い記事です。 CSS3 PIEで何ができるの? CSS3 PIEは、Javascriptを使ってInternet Explorer6~8でも一部のCSS3を使えるようにするスクリプト... 続きを読む...

おすすめ書籍・商品(※当記事と関連性が高いと思われる書籍・商品)

ページの先頭へ