[WordPress]キャッシュを気にせずcssをfunctions.phpから読み込む方法
functions.phpでまとめて管理
サイトを作る中で「cssファイルを新たに追加したい」となったとき、通常であれば<head>内に数行追加するだけで済みます。
しかしWordPressではheader.phpの<head>内に直接記載するよりも、functions.phpで読み込むことを推奨しているようです。
そこでcssファイルの読み込み方をまとめたいと思います。
指定するファイルのURLの書き方が、テーマフォルダに必須のstyle.cssか否かによって異なります。
それぞれ紹介したいと思います。
基本の追加方法
|
1 2 3 4 5 6 7 8 9 |
function mytheme_enqueue() { wp_enqueue_style( $handle, // ハンドル名 $src, // ファイルのURL $deps, // 依存関係にあるファイル $ver // ファイルのバージョン。「キャッシュ対策」にて説明 ); } add_action('wp_enqueue_scripts', 'mytheme_enqueue'); |
wp_enqueue_style()内のコードを変更していきます。
テーマフォルダのstyle.cssの場合
|
1 2 3 4 5 6 |
wp_enqueue_style( 'mytheme-style', // 他と被らないようにする get_stylesheet_uri(), array(), // 無いので初期値を設定 filemtime(get_theme_file_path('style.css')) // 「キャッシュ対策」にて説明 ); |
get_stylesheet_uri関数
get_stylesheet_uri()
現状のテーマで使われているスタイルシートのURLを返す関数
| 引数 | 説明 |
|---|---|
| なし | なし |
get_stylesheet_uri()による出力結果は次のようになります。
http://example.com/wp-content/themes/mytheme/style.css
ファイル名を指定せずに済むので楽です。
上記以外のcssの場合
|
1 2 3 4 5 6 |
wp_enqueue_style( 'mytheme-style-2', // 他と被らないようにする get_theme_file_uri('/css/style.css'), array(), // 無いので初期値を設定 filemtime(get_theme_file_path('/css/style.css')) // 「キャッシュ対策」にて説明 ); |
get_theme_file_uri関数
get_theme_file_uri($file)
テーマ内にあるファイルのURLを返す関数
| 引数 | 説明 |
|---|---|
| $file | ファイル名を指定する。 |
'/'は付かないので注意
get_theme_file_uri()による出力結果は以下のようになります。
http://example.com/wp-content/themes/mytheme
get_theme_file_uri('/css/style.css')のようにファイル名を指定すると以下のようになります。
http://example.com/wp-content/themes/mytheme/css/style.css
ちなみに…
テーマフォルダのstyle.cssですが、この関数を使用しても読み込み可能です。
get_theme_file_uri('/style.css')
キャッシュ対策
※対策不要な場合はwp_enqueue_style($handle, $src, $deps);までで構いません。
ブラウザでサイトを表示すると、次回からの表示速度を速めるためキャッシュが保存されます。しかしこのキャッシュのためにcssの更新が反映されないという問題も起き、随時キャッシュをクリアするなどの手間がかかります。
ここでcssを自動的に読み直す方法があるようです。
以下のコードのようなファイルの最後に「?」+「変数名」というクエリパラメータを追記する方法です。
|
1 |
<link rel="stylesheet" href="css/style.css?2109111800"> |
ファイル名が変わらずともクエリパラメータが異なる場合であれば、ブラウザは新しいファイルと認識してcssの読み直しがされるそうです。
■クエリパラメータの追加方法
何も指定しないままだと<link>のURLの末尾に「?ver=5.x」と付け加えられます。（WordPressのバージョン番号）
これはWordPressのバージョンが変わった際にCSSを確実に読み直すために付加されたものです。
しかしこのままではWordPressのバージョン更新時にしか働きません。そこでバージョンをCSSファイルの更新時刻に変更することで、随時読み直すようにします。
そしてWordPressのwp_enqueue_style()にはファイルのバージョンを第４引数に設定できるので、そちらを利用します。
|
1 |
filemtime(get_theme_file_path('/ファイル名')) |
filemtime関数
filemtime($filename)
ファイルの最終更新時刻を返すPHPの関数
| 引数 | 説明 |
|---|---|
| $filename | ファイル名を指定する。 |
時間は Unix タイムスタンプとして返されます。
Unix タイムスタンプとは、現時刻を「1970年1月1日午前0時0分0秒（UTC）」からの経過秒数で表現する方法です。
get_theme_file_path関数
get_theme_file_path($file)
テーマ内にあるファイルの絶対パスを返す関数
| 引数 | 説明 |
|---|---|
| $file | ファイル名を指定する。 |
'/'は付かないので注意
get_theme_file_path()による出力結果は以下のようになります。
＊Macのローカル環境の場合
/Users/.. 省略 ../app/public/wp-content/themes/mytheme
CDNの場合
|
1 2 3 4 |
wp_enqueue_style( 'fontawesome', 'https://use.fontawesome.com/releases/v5.13.0/css/all.css' ); |
FontAwesomeやプラグイン専用のcssを追加する際、CDNを利用することがあると思います。その時は第２引数にURLを入力するだけで読み込み可能です。
以上でfunctions.phpからcssを読み込めるようになりました。
