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

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

wp_enqueue_style()

です。

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

説明
1. wp_enqueue_style()はfunction.phpに
使い方
まとめ

説明

ではまず『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

ファイルの種類は自動的に”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‘ );