ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【WordPress】CSSファイルを正しく読み込む方法、効率的な管理方法

【WordPress】CSSファイルを正しく読み込む方法、効率的な管理方法

WordPressで使っていく上で、プラグインのCSSを読み込みたいとき等にデフォルトのstyle.cssとは別のCSSを読み込ませたい場面がでてきます。
header.phpに直接書いても読み込むこともできるのですが、正しい読み込み方法があるので解説します。
また、大規模サイト、複数人によるコーディングになってくるとcssを増やしていくこともあると思いますが、そのなときでもcssファイルを効率的に管理する方法についても紹介します。

目次
  1. 正しいCSS読み込み方法
  2. 効率的なCSS管理方法
    1. 1ページに読み込むCSSは多くて2ファイル程度
  3. デフォルト「style.css」
  4. まとめ

正しい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に限りませんが、ホームページの読み込み時間はユーザーに閲覧してもらえるかどうかに影響してきます。
CSSファイルを読み込む回数(Httpリクエスト回数)はできるだけ少ないほうが速くなります。

1ページに読み込むCSSは多くて2ファイル程度

100ページとかのサイトで、CSSファイルを1つのファイルにまとめてしまうと、コーディング作業の効率がとても悪くなります。
また、1ページに不要なスタイルがたくさん読み込まれてしまったりして読み込みあg遅くなってしまいます。
プラグイン用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');

まず、全ページで使用するcss「style.css」を読み込ませます。これはヘッダーやフッターや全体のレイアウトのcssになります。
その他はページやテンプレートによって読み込んだり読み込まなかったりします。
そのためにphpのif文と分岐タグで指定していきます。

投稿ページの場合
記事ごとに大きくcssを変更することはないので、すべての記事を同じcss「single.css」として読み込みます。
固定ページの場合
ページごとにデザインが大きく変わることが多いので、「(スラッグ名).css」で分けていくとページが増えても管理しやすくなります。

cssファイルはできれば、1ファイルにまとめるのが理想なので、ページ数が少ない場合はあえて分割する必要はないです。
Gulp等のツールを使えば、制作ではファイル分割しておいて、読み込み時には統合するということもできます。

デフォルト「style.css」

テーマを自作するときには、テーマディレクトリ直下に「style.css」が必ず必要になります。
これは特に読み込み設定をしなくて読み込まれます。

以下、デフォルト「style.css」に必要な記述内容です。

テーマに必ず必要な「style.css」記述内容
/*
Theme Name: (テーマ名)
Author: (作者の名前)
Author URI: (サイトのURL)
Description: (テーマの説明)
Version: (テーマのバージョン)
*/

まとめ

CSSファイルに限らず、できるだけデザインに影響のない内容はfunctions.phpに書いていくほうがテンプレートファイルがすっきりして、コーディングが効率的にできます。
また、CSSを適切に分割することで読み込み速度を速くしたり、管理しやすくなったりします。