システムエンジニア方css/html

【wordpress】wp_enqueue_style関数をゼロから学ぶ

wp_enqueue_style関数とは

WordPressの関数を知りたいと思った時、まずはWordPress Codex 日本語版などを参照して調べるのが必定だと思います。

となれば、この「wp_enqueue_style」関数についても、「関数リファレンス/wp enqueue style」のページを確認すれば良いだけ……ではありますが、いざ理解しようと思った時にドツボにはまってしまいました。自己学習の備忘録として、このような記事を残したいと思います。

どのように使うのか?

WordPress が生成したページに CSS スタイルファイルを安全に (キューへ) 追加します。

関数リファレンス/wp enqueue styleより

不勉強なもので、どうにもこの手の解説はピンとこないのですが……。方式に従って指定した「スタイルシートファイル」を、処理のためにキューに入れる(読み込む)、という理解です。(意味の捉え違いなどがありましたら申し訳ありません)

形式は、下記の通りです。引数が5個あります。
wp_enqueue_style( $handle, $src, $deps, $ver, $media );

引数の説明はcodexを見て頂ければと思いますが、下記が、自分なりに内容をかみ砕いたものです。理解が至らず、説明内容に誤りがある可能性があるので、その点はご容赦頂ければ幸いです。

$handle
cssファイルのハンドル(識別名)を指定する。必須項目。
$src
cssファイルのURLを指定する。オプション項目。wordpressがcssファイルを認識している場合は指定不要。絶対パス・相対パス・関数などで指定可能。
$deps
今回扱うcssファイルが依存する、他のcssファイルのハンドル(識別名)を指定する。オプション項目。「扱うcssが他のcssに依存する(読み込みの順序がある)」という場合に、「先に読み込んで欲しいcss」として指定する。指定方法は「array(‘読み込んで欲しいcssのハンドル名’)」で、複数のハンドルを同時に指定可能。なお、指定しなくても動作することも多いようですが、「親テーマの後に子テーマを読み込む」という原則があるので、意識した方が良いと思われます。
$ver
cssファイルのバージョン番号を指定する。オプション項目。バージョン番号とは、環境に応じて自動あるいは手動で付与されるもの。特にバージョン番号を意識しない場合は、指定しなくても問題ない。
$media
cssファイルが定義されているメディアを指定する。オプション項目。デフォルトでは「all」が設定されているため、特に指定しなくても問題はない。

具体的な使い道は?

さて、そもそもこの関数はどのような用途で求められるのか。勿論、様々なケースでの利用が想定されることでしょう。

ところが実は、wordpressの子テーマを作る場合に、必ず用いる関数であるとなっています。WordPress Codexの「子テーマ」ページにも、その旨が記載されています。

かつて子テーマを作る時は、「cssファイルに、@importを使って親テーマを記述する」という手法が一般的(?)に用いられていたかと思います(僕もそのやり方に倣っていました)。が、いつ頃からか、これが動作上の問題点などが判明して非推奨となり、新たにこの関数を使った方法が推奨となったようです。

さて、そんなことは露知らずだった僕がこの関数と出会ったきっかけは、「記事ごとに設定されているアイキャッチ(サムネイル)画像を、同一のページ内の任意の箇所に、背景画像として表示させたい」と考えたことにあります。

背景画像として出力するためには、「cssにbackground-imageで画像のURLを指定する」必要があります。しかし、ページごとにアイキャッチ画像(のURL)は異なります。つまりページごとに指定すべきURLを取得し、cssファイルに対し、追加で書き込まなければならない。……さて、どうしたものか?

といった発案から様々なブログ等を拝見した結果、この関数に行きつきました。ところが、なかなか扱い方が分からず、「ハンドル?なに?」と戸惑ってしまい、それを整理したのが今回の記事です。次は、テストを交えつつさらに関数の詳細を確認したいと思います。

2017/2/15 追記:【wordpress】wp_enqueue_style関数で子テーマのcssを読み込む

スポンサーリンク

投稿者: サジマ

WEB担当+IT系の備忘録を担当。家庭菜園は、こっそり栽培と失敗を繰り返しており、2018年春の再起を計画中。

同一シリーズの前後の記事

同一カテゴリの記事(ランダム)

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です