ZeroPlus Media > L_WordPress > Step1 > WordPressでCSSを読み込もう

WordPressでCSSを読み込もう

2022/07/14

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 );

パラメータ	役割	初期値
$handle	（必須）スタイルシートのハンドルとして使われる名称。	なし
$src	（オプション）スタイルシートのURL。絶対パスで記述する。	‘’（空文字列）
$deps	（オプション）このスタイルシートより前に読み込まれる必要があるスタイルシート。依存関係がない場合は空の配列を指定。	array()
$ver	（オプション）スタイルシートのバージョン番号を指定する文字列。	false
$media	（オプション）スタイルシートが定義されているメディアを指定する文字列。例: 'all'、'screen'、'handheld'、'print'。	'all'

※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' 
  );
 }