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というプラグインです。