【WordPress】functions.phpで独自のスタイルシートを読み込む【wp_enqueue_style】

投稿日：

完全版を表示する

どうもカッパです。

今回は、前回簡単に説明したfunction.phpでスタイルシートを読み込むための関数「wp_enqueue_style」について、より詳しく解説します。

【WordPress】functions.phpで独自のcss・jsファイルを一元管理する方法

どうも、カッパです。 WordPressを使うなら、テーマの機能を熟知して素早く見栄えの良い記事を量産するのが至上命題だとは思います。 思いますが...。 技術的なことも少しは身につけておくと、実績と ...

続きを見る

wp_enqueue_style()の設定項目を解説

まずはwp_enqueue_style()の設定項目を見ていきましょう。


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

各引数の詳細はこちら

  • $handle 必須 : スタイルシートを区別するための名称として使われます
  • $src : 読み込ませたいスタイルシートのURLを指定します（ここでは事実上必須）
  • $deps : スタイルシートの読み込み順をコントロールする際に使用。他のスタイルシートで指定した$handleの文字列を入れておくと、その後に読み込まれる（「array()」と配列で指定）
  • $ver : スタイルシートにバージョンを付ける時に使用（後述）
  • $media : スタイルシートにメディアタイプを指定したい場合に使用。デフォルトは「all」

wp_enqueue_style()で使用される引数のそれぞれの役割

$handleのみ必須なのが意外ですが、それぞれ詳しく解説していきます。

$handleでスタイルシートに名前を付ける

必須項目の$handleですが、ここで読み込ませたいスタイルシートに名前を付けておきます。他で解説する「$deps」で、CSSファイルの読み込み順をコントロールするときの識別子として使うことがいちばんの役割になります。

$srcでスタイルシートのURLを指定する

スタイルシートまでのパスを自動補完してくる関数と併用することが多いです。

  • テーマをそのまま使っている場合 : get_template_directory_uri()
  • 子テーマを使っている場合 : get_stylesheet_directory_uri()

wp_enqueue_style( $handle, get_stylesheet_directory_uri().'/css/main.css' , $deps, $ver, $media );

書き方は、echoでhtmlを書くのと同じです。

$depsで読み込み順をコントロールする

たとえば、テンプレートで指定されたデフォルトのスタイルを別のCSSファイルで上書きして修正する必要が出てきた場合。

CSSは、後から読み込んだものを優先して適用されるので、スタイルを上書きで修正する場合は、テンプレートのデフォルトのCSSの後にオリジナルのCSSファイルを読み込ませたいですよね？

そんなときに、$depsを使って読み込み順をコントロールします。

$depsに、目的のスタイルシート（ここではテーマのデフォルトCSSファイル）に設定されている$handleの値を指定すると、このスタイルシートはデフォルトのcssの後に読み込まれることになります。

目的のCSSファイルの$handleに設定されている値を調べるには、ソースをみて


<link rel='stylesheet' id='xxxx-css'  href="...">

idに指定されてる「xxxx」が、$handleの値です。

$verでバージョンを指定する

スタイルシートにバージョンを指定するという行為、あまり馴染みがないかもしれません。

実際に$varの部分に今日の日付を変数として指定します。すると、HTMLでの記述は以下のようになります。


<link rel='stylesheet' id='xxxx-css'  href="/path/to/file.css?20190418">

file.cssの後に続く変数の形で指定されます。

バージョンを指定すると、それまでのキャッシュが無効化されます。

キャッシュが邪魔をして変更が反映されないのを未然に防ぐ！

ホームページの制作をしていると、クライアントにCSSを修正したので確認のお願いをしたのに

「変わってないよ？」

と言われ、キャッシュの削除をお願いする手間が増えるというケースがあります。

確認前にバージョンを指定しておくと、この手間が省けます。地味ですが、自分にとってもクライアントにとっても親切な設定と言えます。

$mediaを指定して、プリント専用にするとか、特定の幅専用のCSSにするとか

最後に$mediaです。

これは個人的にはほとんど使うことがないですが、CSSの用途を、たとえば「プリント専用」とか「ブラウザの特定幅専用」に限定したい時なんかに使います。

値の一覧は、CSSのMedia Typesのページに一覧が掲載されているので、参考にしてください。

header.phpや、テーマのカスタムCSSを使わないメリットは？

なぜfunctions.phpで読み込みファイルを一元管理するのか。

それは、テーマのアップデートに強くするためというのが今のところいちばんの目的になります。

cssの読み込みは、header.phpに直接書いても変わりはないのですが（ただし細かい順番の融通は効きません）、子テーマを使用する場合は、親テーマからheader.phpを引っ張って編集する必要があります。

仮に親テーマのバージョンアップがあり、header.phpに大幅な変更が加わった場合、子テーマのheader.phpも合わせて修正しなければいけないので、余計な手間になってしまいます。

functions.phpで読み込みファイルを管理していれば、その作業がいらなくなるため、それがメリットとなります。

便利なテーマはなるべく便利なまま使うというのが、効率のいいホームページ制作とSEO対策になるので、守っていきたいところです。

  • B!