WordPressでCSSを読み込もう

WordPresでCSSを読み込む方法

HTMLでは、CSSの読み込みの記述をheadタグ内で、相対パスを使って行ってきました。

しかし、WordPressでは、前記事で説明したfunctions.phpに記述を行います。

functions.phpに関しては、こちらの記事で解説しています。

WordPressでCSSを読み込もう

基本的な読み込み方

WordPressでCSSの読み込みを行う場合は、次のように書きます。

wp_enqueue_style(
  'main_style',
  get_template_directory_uri() . '/css/style.css',
  array(),
  '1.0'
);

※<?php ?>は書いている前提で、省略します。

記述を細かく見ていきます。

CSSを読み込む関数として、wp_enqueue_style()を使っています。この関数を使うと、記述したスタイルシートを読み込む順番に追加してくれます。現段階では「CSSを読み込む時に使う関数」だと思ってください。

wp_enqueue_style()の引数を見ていきます。

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

※WordPressCodexより一部引用

• $handle →第一引数で、任意の名前をつけてあげる必要があります。
• $src →第二引数で、読み込むCSSの絶対パスを書きます。テーマまでのディレクトリを出力するget_template_directory_uri()を使います。
• $deps →第三引数で、ここで指定したスタイルシートよりも、前に読み込まれてほしいスタイルシートを指定します。詳しくは後述します。
• $ver →スタイルシートのバージョンがあれば指定します。編集するスタイルには、指定することでいいことがあるので、初めのうちはとりあえず「’1.0’」と入れておけば良いです。
• $media →スタイルシートのメディアというものを指定できますが、基本的には気にしなくて良いですが、気になる方はこちらを参照してください。

結論として、次のような書き方となります。

wp_enqueue_style(
  'main_style', // 追加する識別名
  get_template_directory_uri() . '/css/style.css', // 追加するCSSのパス
   array(), // CSSの依存先
  '1.0' // バージョンの指定
);

複数のCSSを読み込むとき

Web制作をする中で読み込むCSSは、一つのスタイルシートだけでなく複数であることの方が多いです。

その場合の書き方としては、次のパターンは２種類あります。

• 読み込み順を気にしなくて良い場合
• 読み込み順を決めなければいけない場合

読み込み順を気にしなくて良い場合

読み込み順を気にしなくて良い場合は、次のようにそのまま並べて記述します。

wp_enqueue_style(
  'google-fonts_style',
  'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap' // google fontsのCDN用のパス
);

wp_enqueue_style(
  'main_style',
  get_template_directory_uri() . '/css/style.css',
  array(),
  '1.0' 
);

このように書くと、記述した「google-fonts_style」「main_style」の二つのファイルが読み込まれます。

基本的には上から順に「google-fonts_style」→「main_style」で呼び出されますが、書き方として厳密に決めているわけではありません。

読み込み順を決めなければいけない場合

CSSではスタイルの優先度などの理由で、読み込み順を決めたい場合があります。

そのためにはスタイルシートの登録と依存関係の指定を行う必要があります。

それぞれ見ていきます。

スタイルシートの登録はwp_register_style()を使って、次のように行います。

wp_register_style(
  'reset_style', // 登録する識別名
  get_template_directory_uri() . '/css/reset.css', // 登録するCSSのパス
  array(), // CSSの依存先
  '1.0' //バージョンの指定
);

wp_register_style()は記述したスタイルシートを登録することができます。

非常によく似ていますが、wp_enqueue_style()とは異なり、登録をするだけで、このままでは読み込まれる処理に含まれません。

読み込まれる処理に追加するには、次のように依存関係の指定を使います。

wp_register_style(
  'reset_style',
  get_template_directory_uri() . '/css/reset.css',
  array(),
  '1.0' 
); 

wp_enqueue_style(
  'main_style',
  get_template_directory_uri() . '/css/style.css',
  array('reset_style'), // reset_styleが読み込まれた後にmain_styleを読み込む 
  '1.0'
);

wp_register_style()の第三引数を用いて依存関係の指定を行い、「登録したスタイルシートの後に読み込む」と書けば、読み込み順を厳密に指定することができます。

ちなみに、「register」は「登録」という意味です。

読み込むタイミングを決める

スタイルシートの登録と読み込みができるようになりました。

しかし、functions.phpで記述した内容は、管理画面など、思わぬところにも影響を及ぼしてしまいます。

そこで次のように、アクションフックと呼ばれる、処理を実行する場所やタイミングを指定する方法を利用します。

add_action('wp_enqueue_scripts', 'add_styles');
function add_styles() {
  // スタイルシートの登録と読み込み
}

add_action()は、

• 第一引数でアクションフック（実行するタイミング）
• 第二引数で関数名

を指定します。

今回使用するアクションフックであるwp_enqueue_scriptsは、「管理画面以外で処理を実行する」くらいの認識で大丈夫です。

ここまでの内容を統合すると、次のようにコードを記述して、WordPressのテーマでCSSを読み込んでいきます。

add_action('wp_enqueue_scripts', 'add_styles');  
function add_styles() {
  // google fonts
  wp_enqueue_style( 
    'google-fonts_style',
    'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap' 
  );

  // reset style
  wp_register_style(
    'reset_style',
    get_template_directory_uri() . '/css/reset.css', array(),
    '1.0' 
  );

  // main style
  wp_enqueue_style(
    'main_style',
    get_template_directory_uri() . '/css/style.css',
    array('reset_style'),
    '1.0' 
  );
 }

さいごに

長々と説明してきましたが、きちんと反映されていれば問題ないです。なのでまず覚えるべきなのは、「どう書けばうまくいくか」という部分です。

どうしてそれでうまくいくかは、慣れてきて余裕が出てきてからでも遅くはありません。筆者もそうですが、全体の流れを掴んでから細かいところに立ち返ると、スッと理解できたりするものです。

実際に書く中で理解していくのが一番早かったりするかもしれません。

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー