Webサイトを作る上で必ず必要なのがスタイルシートの読み込みです。WordPressテーマ作成には「style.css」が必須ですが、このスタイルシートは自動的に読み込まれるわけではありません。

当記事では、WordPressでCSSを外部ファイルとして読み込む基本的な方法をご紹介します。テーマのちょっとしたカスタマイズでCSSを扱いたい方は、以下の記事をご覧ください。

2021.03.19

2024.08.14

WordPressテーマでCSSを間接的に編集する4つの方法

WordPressに慣れてくると、サイトのデザインをCSSでカスタマイズしたくなりますよね。この時最も気をつけておきたいのが、CSSの編集方法です。 特に、テーマのスタイルシートを直接編集するのは避けた方がよいでしょう。 当記事では、WordPressでCSSを編集する方法を4つご紹介し...

2024.08.14

2024.08.17

CSSとは？意味・基礎・書き方を初心者向けにわかりやすく解説

Webページをより美しく、そして魅力的にするためには、CSSという技術が欠かせません。 CSSを使うと、文字の色やサイズ、背景画像、レイアウトなど、Webページの見た目を思い通りにカスタマイズすることができます。 本稿では、CSSの意味や基礎、具体的な書き方まで、初心者の方にもわかりやす...

linkタグで直接読み込む方法（WordPress非推奨）

WordPress推奨の方法ではありませんが、linkタグを使ってCSSファイルを読み込む方法を先にご紹介します。一般的には、以下のlinkタグをheadタグ内に記入して読み込むことが多いのではないでしょうか？

<!-- 例）linkタグでスタイルシートを読み込む -->
<link rel='stylesheet' href='スタイルシートのパス' type='text/css'/>

WordPressでもこの方法でCSSファイルを読み込むことが可能です。WordPessでは、テーマディレクトリのパスを取得できる関数「get_template_directory_uri()」が用意されているので、header.phpのheadタグ内に以下を記述することでスタイルシートを読み込めます。

// 例）テーマフォルダ内の「style.css」を読み込む場合
<link rel='stylesheet' href='<?php echo get_template_directory_uri() . '/style.css'; ?>' type='text/css'/>

これでも問題なく読み込めますが、WordPress開発では非推奨の方法になります。理由としては、後述するwp_enqueue_style()を使ったほうが安全かつ確実にファイルの読み込みを管理できるからです。

wp_enqueue_style()とは？

スタイルシートの読み込みに使用するWordPress関数です。linkタグを直接書き込む方法と実現できることは大きく変わりませんが、以下の利点があります。

  • ファイルの重複読み込みを防ぐ
  • ファイルの読み込み順序を制御しやすい
  • functions.phpにて一元管理が可能

WordPress開発では、wp_enqueue_style()を使うデメリットが特にないので、スタイルシートの読み込みは、この関数を使うものだと覚えておきましょう。

公式ページ：WordPress Developer Resources | Function| wp_enqueue_style

wp_enqueue_style()の使い方

それではwp_enqueue_style()の使い方をご紹介します。まずは、最も基本的な書き方をみていきましょう。

<?php
// テーマフォルダ内の「style.css」を読み込む場合
add_action( 'wp_enqueue_scripts', function(){
  wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css' );
} );

// 出力結果
?>
<link rel='stylesheet' id='my-style-css' href='テーマディレクトリまでのパス/style.css?ver=6.4.1' type='text/css' media='all' />

上記は、テーマフォルダ内の「style.cs」ファイルを読み込むサンプルです。こちらが今回のゴールになりますので、それぞれ分解してみていきましょう。

wp_enqueue_style()は単体で使わない

WordPress開発では、wp_enqueue_style()を単体で扱いません。サンプルで使われている関数（add_action〜）とセットで使うものだと覚えておいてください。

WordPressでは、様々なフック（処理を実行できるタイミングのようなもの）が用意されています。その中の1つに「wp_enqueue_scripts」と呼ばれるアクションフックが存在します。

公式ページ：WordPress Developer Resources | Hook | wp_enqueue_scripts

「wp_enqueue_scripts」は、フロントのファイルの読み込みに最適なフックなため、wp_enqueue_style()はこのフックの中で実行します。（実行されるタイミングは、WordPressにheadタグが生成される直前くらい）

// NG例（単体で使っている）
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css' );

// OK例（適切なフックの中で実行されている）
add_action( 'wp_enqueue_scripts', function(){
  wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css' );
} );

wp_enqueue_style()で使えるパラメータ

wp_enqueue_style()は、以下の5つまで引数を指定できます。このパラメータを変更することで、読み込みの順番や属性などをコントロールできます。各パラメータについて順番に解説していきます。

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
ただ単にファイルを読み込むだけであれば、$handleと$srcだけの記入でも大丈夫です。

$handle：ハンドル名の指定

読み込むスタイルシートのハンドル名を記入します。この名前は、CSSファイルを判別して重複読み込みを防ぐために使われますので、必ず固有の名称にしてください。

// 同じハンドル名のスタイルシートは1度しか読み込まない
// 以下のように3つ処理を書いても、読み込まれるのは1つだけ
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css' );

$src：スタイルシートのパス

読み込むスタイルシートのパスを記入します。冒頭でもご紹介したようにテーマディレクトリまでのパスを取得できる関数と合わせて使うことが多いです。

wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css' );

$deps：依存関係を指定

先に読み込んでほしいスタイルシートがあれば、そのハンドル名を記入することで依存関係を示せます。例えば「A-style.css」の読み込みを「B-style.css」の読み込み後に実行したい場合などに使います。（依存関係が特に必要なければ、array()を記入）

// 以下の読み込み順は、A-style -> B-style
wp_enqueue_style( 'A-style', 'パス' );
wp_enqueue_style( 'B-style', 'パス' );

// 以下の読み込み順は、B-style -> A-style（依存関係を指定）
wp_enqueue_style( 'A-style', 'パス', array( 'B-style' ) );  // B-styleの後に実行される
wp_enqueue_style( 'B-style', 'パス' );

CSSは、より後から読み込んだものが優先される決まりがあるので、読み込む順番を制御するのにこのパラメータはよく利用します。

$ver：スタイルシートのバージョンを指定

ファイル名の末尾にクエリパラメータとして追加する文字列を記入します。以下はバージョンを1.2に指定した例です。何も指定しなければWordPressのバージョンが反映されます。

// 例）バージョンを1.2に指定すると
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css', array(), '1.2' );

// 出力結果（ファイル名の末尾にver=XXが付与される）
// <link rel='stylesheet' id='my-style-css' href='テーマディレクトリまでのパス/style.css?ver=1.2' type='text/css' media='all' />

このバージョンはキャッシュ対策に使われます。一般的には、ファイルの更新日時をバージョンに指定することが多いです。これでファイルを更新する度にキャッシュを更新できます。

// バージョン番号にcssファイルの更新日を指定
wp_enqueue_style(
  'my-style',
  get_template_directory_uri() . '/style.css',
  array(),
  filemtime( get_template_directory() . '/style.css' )
);

// 出力結果（ファイルが更新される度に番号が変わる）
// <link rel='stylesheet' id='my-style-css' href='テーマディレクトリまでのパス/style.css?ver=1699424961' type='text/css' media='all' />

$media：linkタグの属性を指定

CSSファイルを読み込むlinkタグには、以下のようにmedia属性を指定できます。5つ目の引数では、このmedia属性の値を変更することができます。

<link
  rel='stylesheet'
  href='パス'
  type='text/css'
  media='all' <!-- ←これがmedia属性 -->
/>

media属性は、読み込むスタイルをどのメディアに対して適用させるかを指定できます。簡単にいうとメディアクエリをファイル読み込み時に使う感じですね。

例えば、wp_enqueue_style()の第五引数に(max-width: 1024px)と入力すると、media属性にその値が反映され、ブラウザの横幅が1024px以下の時だけこのスタイルシートを読み込むようになります。

<?php
// media属性
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css', array(), false, '(max-width: 1024px)' );

// 出力結果
?>
<link rel='stylesheet' id='my-style-css' href='パス' type='text/css' media='(max-width: 1024px)' />

初期値の「all」で問題なく使えますので、基本的には省略していただいて構いません。

特定のページだけスタイルシートを読み込む

CSSファイルによっては、トップページなど特定のページでのみ読み込みたいケースがありますよね。そんな時は「wp_enqueue_scripts」フック内でWordPressの条件分岐タグを使うことで、読み込むページを制限できます。

add_action( 'wp_enqueue_scripts', function(){
  // トップページだけ「style.css」を読み込む
  if( is_front_page() ){
    wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css' );
  }
} );

CSSファイルをページ別に分けて管理したい方にオススメです。また、読み込むファイルを選別することで、ページの読み込み速度の向上にも繋がります。

管理画面でスタイルシートを読み込む方法

ここまで紹介したのは、フロントでCSSファイルを読み込む方法です。管理画面でスタイルシートを読み込みたい方は、以下のアクションフック内でwp_enqueue_style()を実行してください。

// my-script.jsを管理画面で読み込む
add_action( 'admin_enqueue_scripts', function(){
  wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css' );
} );
公式ページ：WordPress Developer Resources | Hook |admin_enqueue_scripts

管理画面のソースコード上に、CSSファイルを読み込むlinkタグが出力されていればOKです。

また、このアクションフックは、現在表示されている管理画面のページの識別名を引数として利用できます。この引数を利用すれば、管理画面の特定のページに限定してCSSファイルを読み込めます。

// 外観 > ウィジェットの画面でのみstyle.cssを読み込む
add_action( 'admin_enqueue_scripts', function( $hook_suffix ){
  if( $hook_suffix == 'widgets.php' ){
    wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css' );
  }
} );

まとめ

WordPressでCSSファイルを読み込む方法について解説しました。linkタグを直接書き込む方法でもスタイルシートの読み込みは実現できますが、後々の管理を考慮すると、圧倒的にwp_enqueue_style()をオススメします。

また、JavaScriptに関しても当記事で紹介したのと同じような方法で読み込むことができます。以下にその方法を解説してますので、ぜひ参考にしてください。

2023.11.20

WordPressでJavaScriptを外部ファイルで読み込む方法

Webサイトに何かしら動きをつけたい時にJavaScriptが必要になります。しかし、WordPress開発に慣れていないと、JavaScriptをどう読み込むべきか分からないですよね。 当記事では、WordPressでJavaScriptを外部ファイルとして読み込む基本的な方法をご紹介します...