WordPressで使っていく上で､プラグインのCSSを読み込みたいとき等にデフォルトのstyle.cssとは別のCSSを読み込ませたい場面がでてきます｡
header.phpに直接書いても読み込むこともできるのですが､正しい読み込み方法があるので解説します｡
また､大規模サイト､複数人によるコーディングになってくるとcssを増やしていくこともあると思いますが､そのなときでもcssファイルを効率的に管理する方法についても紹介します｡
正しいCSS読み込み方法
以下のコードをfunctions.phpにコピペします｡
これはテーマフォルダ直下にCSSフォルダをつくり､その中につくったcommon.cssを読み込む場合のコードです｡
function custom_print_styles() {
wp_enqueue_style('style', get_template_directory_uri() . '/css/style.css'));
}
add_action('wp_print_styles', 'custom_print_styles');
効率的なCSS管理方法
WordPressに限りませんが､ホームページの読み込み時間はユーザーに閲覧してもらえるかどうかに影響してきます｡ 100ページとかのサイトで､CSSファイルを1つのファイルにまとめてしまうと､コーディング作業の効率がとても悪くなります｡ まず､全ページで使用するcss「style.css」を読み込ませます｡これはヘッダーやフッターや全体のレイアウトのcssになります｡ cssファイルはできれば､1ファイルにまとめるのが理想なので､ページ数が少ない場合はあえて分割する必要はないです｡
CSSファイルを読み込む回数(Httpリクエスト回数)はできるだけ少ないほうが速くなります｡
1ページに読み込むCSSは多くて2ファイル程度
また､1ページに不要なスタイルがたくさん読み込まれてしまったりして読み込みあｇ遅くなってしまいます｡
プラグイン用cssは別として､どのページにも読み込む共通cssと､そのページだけに読み込む専用cssの2つくらいに分割するといいと思います｡
function custom_print_styles() {
wp_enqueue_style('style', get_template_directory_uri() . '/css/style.css'));
//投稿ページに読み込む 「single.css」
if (is_single()) {
wp_enqueue_style('single', get_template_directory_uri() . '/css/single.css'));
}
//固定ページ別にcssを読み込む 「(スラッグ名).css」
if(is_page()) {
$page = get_post( get_the_ID() );
wp_enqueue_style($page->post_name , get_template_directory_uri() . '/css/'. $page->post_name .'.css'));
}
}
add_action('wp_print_styles', 'custom_print_styles');
その他はページやテンプレートによって読み込んだり読み込まなかったりします｡
そのためにphpのif文と分岐タグで指定していきます｡
Gulp等のツールを使えば､制作ではファイル分割しておいて､読み込み時には統合するということもできます｡
デフォルト「style.css」
テーマを自作するときには､テーマディレクトリ直下に「style.css」が必ず必要になります｡
これは特に読み込み設定をしなくて読み込まれます｡
以下､デフォルト「style.css」に必要な記述内容です｡
- テーマに必ず必要な「style.css」記述内容
-
/* Theme Name: (テーマ名) Author: (作者の名前) Author URI: (サイトのURL) Description: (テーマの説明) Version: (テーマのバージョン) */
まとめ
CSSファイルに限らず､できるだけデザインに影響のない内容はfunctions.phpに書いていくほうがテンプレートファイルがすっきりして､コーディングが効率的にできます｡
また､CSSを適切に分割することで読み込み速度を速くしたり､管理しやすくなったりします｡
