肥大化したcssは、メンテナンス性の悪さだけでなく、ページスピード低下の原因にも。
メンテナンスの面からも、cssは程よく分割することをお勧めします。
テンプレートなら、singleでも、pageでも、archiveでも、テンプレートごとの基本的なフォーマットはほぼ同じ。
cssもそれに合わせて作るのが一番合理的ですよね。
未だに全てのcssを 1ファイル にまとめているサイトを見かけます。
ちょっと凝ったサイトだと10,000行以上。。。
修正するにも、前の記述を使い回すにも
「どこに書かれている?? どれが適用されている?? 対応しきれない><」
時間に余裕があればまだしも、急ぎの時などは「更なるオーバーライドにスタイル追加」即決定。
こうしてどんどん肥大化して、いつしか魔窟のようなcssに。。。
Google様にもお叱りを受けてしまいます _ _;;
テンプレート別にcssを作る
まず、reset、header、 footer、layout など、サイト全体でほぼ共通となる部分をまとめた 共通css を作成。
次にテンプレートごとに異なる部分をまとめた、テンプレート別css を作成します。
テンプレート別cssの準備
テンプレートごとに対応するcss を作成し、作成した css をテンプレートと同じ名前 (例: single.php なら single.css ) にして、適当なディレクトリに保存します。
当サイトでは、/assets/css/ にまとめて保存しています。
css を テンプレートごとに呼び出す
css呼び出しコード
functions.php に以下を記載します
<?php /* functions.php に直接書き込む場合はこの行を削除 */
function my_template_enqueue_styles() {
$my_drcy = get_template_directory_uri();
$my_root_drcy = get_template_directory();
//共通cssの呼び出し
wp_enqueue_style( 'my-common', $my_drcy . '/assets/css/common.css' );
//テンプレ別cssの呼び出し
global $template;
$template_css = str_replace( '.php', '.css', basename( $template ) );
$template_css_path = $my_root_drcy . '/assets/css/' . $template_css; //絶対パス
if ( file_exists( $template_css_path ) ) {
wp_enqueue_style( 'my-template', $my_drcy . '/assets/css/' . $template_css ); //url
}
}
add_action( 'wp_enqueue_scripts', 'my_template_enqueue_styles' );たったこれだけ。
いちいち分岐設定をしなくても、テンプレートごとに、それぞれのcssを呼び出してくれます^^v
別ファイルにする場合は、最初の <?php をお忘れなく^^
css呼び出しコードの説明
| code | 説明 |
|---|---|
get_template_directory_uri() | テーマディレクトリまでのURL (最後の /必須。自動では入りません) |
get_template_directory() | テーマディレクトリまでの絶対パス (最後の /必須。自動では入りません) |
global $template; 以下 | テンプレート名.cssが、指定されたディレクトリにあったら、そのテンプレートページにテンプレート名 .cssを呼び出す |
複数cssの注意点
共通css(common.css) と、テンプレート名.css の２種類に分ける事で、無駄な読み込みが減りメンテナンスも楽になります^^
より細かい設定は別にcssを作成して分岐で読み込ませてもOKですが、あまり細かく分けると適用されている css が逆に見つけづらくなることも。
また、読み込むcssの数を増やしすぎると、サーバへのリクエストが多くなりパフォーマンス低下につながります。
読み込むcssは４～5件程度まで。
あまり多くなるようでしたら、cssを見直すか、pluginなどで結合させることをお勧めします。