5分でわかる!簡単にCSSファイルへのリンクを作成する方法wp_enqueue_style()【WordPress関数】|ためになるブログWordPress

WordPress

WordPress関数にはスタイルシート(CSSファイル)へのリンクを記述するためのものがあります。それが、

wp_enqueue_style()

です。

使い方を見ていきましょう。

説明

ではまず『WordPress Codex』にはなんと書いてあるのでしょうか。

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

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

”キュー”については「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典での説明がとてもわかりやすいのでどうぞ。

かんたんに言うとCSSファイルへのリンクを作ってくれる関数です。

wp_enqueue_style()はfunction.phpに

HTMLでは<head>内にスタイルシート(CSSファイル)へのリンクを書きます。

そう考えるとWordPressですとheader.phpの<head>内に記述するのかと思うかもしれませんが、実際は通常function.phpに書きます。(header.phpに書くこともできます。)

WordPress Codexのテーマ作成のページにはこのように書かれています。

ヘッダーテンプレートにテーマのスタイルシートをリンクしないでください。 代わりにテーマ関数のアクションフック wp_enqueue_scripts を使う。

WordPress Codex/テーマの作成

function.phpに記述することで管理が行いやすくなることと、公式のテーマでもこの方式で行われているので知識としてもっておくと便利です。

使い方

パラメータ

wp_enqueue_style()は次のように記載します。

wp_enqueue_style(ハンドル名、URL依存関係バージョンメディア)

『ハンドル名』というのはCSSファイルのシステム上の名前です。入力することでhtmlにidが追加されます。wp_register_style()でCSSファイルが登録済みの場合はハンドル名だけでキューへ追加されます。

『URL』にはスタイルシートのURLを記述します。通常WordPressではテーマファイル内のstyle.cssをフルパスで返すget_stylesheet_uri()を記述します。
get_stylesheet_uri()については別の記事で説明しようと思います。

『依存関係』というのは、このCSSより前に呼び出すCSSがある場合にハンドル名を配列で指定します。

『バージョン』はCSSファイルのバージョンのことです。

『メディア』はスタイルシートを反映させるメディアのことで”all”にしておけば問題ありません。初期値が”all”なのでほとんどの場合記述する必要はありません。

記述例

では実際に入力した例を見ていきましょう。

function.php

wp_enqueue_style( ‘sample‘, get_stylesheet_uri(), [], wp_get_theme()->get( ‘Version’ ) );

sample“というハンドル名をつけてからget_stylesheet_uri()でCSSのファイルを取得しています。
またVersion(第4引数)を取得するために第3引数である依存関係も記述しなければならないのですが、必要ないので空の”[]“を記述しておきます。
そしてバージョンではwp_get_theme()->get( ‘Version’ )としてstyle.cssの最初の方に記述してある”Version:”のデータを引っ張ってきています。

出力されるHTML

<link rel=’stylesheet’ id=’sample-css’ href=’http://◯◯.com/wp-content/themes/sampletheme/style.css?ver=1.0.0′ type=’text/css’ media=’all’ />

ファイルの種類は自動的に”stylesheet“、ハンドル名にはid要素で”-css”が付加されて”sample-css“、ファイルのURLは”http://〜“で出力され、”ver=1.0.0“というのは前述の通りstyle.cssから引っ張ってきています。
typeも自動で”text-css“で出力、mediaは記述時に省略したので初期値の”all“が出力されています。

アクションフックを利用して実行できる

さてここまでCSSファイルへのリンク作成のために頑張ってきましたが、実はまだこれだけで終わりではありません。

CSSファイルへリンクする関数は書き終わりましたが、これを実行してあげなければなりません。

そこで利用するアクションフックがwp_enqueue_scriptsです。

このように書いてあげましょう。

function sample_scripts() {
wp_enqueue_style( ‘sample‘, get_stylesheet_uri(), [], wp_get_theme()->get( ‘Version’ ) );
}
add_action( ‘wp_enqueue_scripts‘, ‘sample_scripts‘ );

まずfunctionwp_enqueue_styleを呼び出す関数を定義します。
ここでは”sample_scripts”という関数名にしてあります。
関数の中身は前述したwp_enqueue_style(…)と全く一緒です。

そしてアクションフックの追加を行う関数add_actionを使用して定義した関数sample_scriptsを実行してあげます。

add_actionの中身の最初に記述するのはアクションフックwp_enqueue_scriptsです。そのwp_enqueue_scriptsに定義した関数を登録するために続けてsample_scriptsを記述します。

これでようやくCSSファイルが読み込まれます。

ちなみに…

CSSを読み込む関数はwp_enqueue_styleですが、JavaScriptを読み込むための関数も用意されています。

それがwp_enqueue_scriptです。

これもwp_enqueue_styleと似たような使い方でwp_enqueue_scriptsで呼び出すことができます。

wp_enqueue_scriptswp_enqueue_scriptは別物ですので注意してください。

まとめ

直接記述するよりは少し大変ですが、管理面と公式のテーマではこの方法が使われていますのでカスタマイズするときなどのためにぜひ覚えておきましょう。

なおこのWordPressとPHPを学ぶ上でこの本はおすすめです。

コメント

タイトルとURLをコピーしました