Wordpressでfunctions.phpのCSSバージョンを変更する方法

Wordpressでheader.php以外にcss読込を記述している場合は、バージョン情報を変更に注意が必要です。

functions.php内にcssの登録の欄があれば、そこでバージョン数の変更または追記をする必要があります。

ファイル実物のバージョン数値と連動している場合は、cssの編集時に同時にバージョン数値も変更して下さい。

cssを更新してすぐに反映させるには

WEBサイトでcssに関する修正をした場合、すぐに反映されない事がありますよね。

場合によっては、Shift＋F5で強制更新しないと切り替わらないケースがあります。

正直、クライアントに確認してもらいにくくなるのでよくありません。

これはHTMLサイトはもちろん、Wordpressサイトでも同様です。

cssの末尾にパラメータをつける

以前、cssファイルの末尾に?から始まるパラメータをつける記事を紹介しました。

パラメータが変わるとcssパスが新規に読み込まれるので、それまでのキャッシュが一新されます。

これで強制更新をしなくても、最新情報に反映されるという訳ですね。

様々な読込ケースでパラメータを変更できる様に

基本的にこれが答えなのですが、これはheadタグ内にcssパスを直接入れている場合です。

Wordpressサイトでは、header.php上に直接cssパスを入れていない場合があります。

テーマ構成によってはheader.phpではなく、functions.phpに記述する場合もあるのです。

本記事では、様々なケースで記述されたcssパラメータを編集する方法を紹介します。

特にfunctions.phpでのcssパスの書き方については、詳細に解説をしていきます。

パラメータの付与ルールを把握する

まずは各ファイルに関するパラメータの付与ルールを見てみましょう。

Wordpressサイトではほとんどの場合、cssのパス末尾にバージョン数値が付与されています。

cssだけでなくjsや他のファイルにも、1.5.2などの数値がついていますよね。

各ファイルの末尾につくバージョン情報のパラメータ

バージョン情報には各ファイル自体の数値が入る

バージョン数値には、本来ファイル自体に掛かれたの設定数値をつけるのが一般的です。

cssの場合 https://lpeg.info/wp-content/themes/lpeg/style.css?ver1.2 jsの場合 https://lpeg.info/wp-content/themes/lpeg/js/script.js?ver0701

ファイル最上部にバージョン設定情報欄がある

各ファイルのバージョン数は本来、ファイル内上部に記載するようになっています。

cssのバージョン数も同様に、cssファイルの上部に記載しているはずです。

本来はファイルを編集したらバージョン数値も変えて、その数値をパスのパラメータにつけるのがセオリーな訳ですね。

Wordpressのバージョンが付与されている場合

しかしWordpressの場合、ファイル自体のバージョンと全く違う数値の場合があります。

Wordpressシステムのバージョン（例えば6.2.2など）が記載されているケースですね。

css以外に、jsファイルやWordpressの構成ファイルにも同じ数値がついています。

今回の目的はcssファイルのみ、違うパラメータ値にする事ですから、他は関係ありません。

Wordperssのバージョンが自動付与されているのなら、ルール変更しなければなりませんね。

他人が作ったテーマのルール

Wordpressサイトの更新をする場合、そのテーマは「自分が作ったか」「他人が作ったか」のどちらかです。

他人が作ったテーマの場合、パラメータの状態にも様々なケースが考えられます。

パラメータを変更する前に、どのようなルールで読み込まれているかを把握する必要があります。

それによって変更の仕方も自然と変わってきます。

header.phpに直接cssパスを書いている場合

まずは、自作テーマなどでheader.phpに直接cssパスを書いている場合です。

この場合、header.php内のcssファイルのパラメータ部分を直接変更すればOKです。

修正をするたびごとにこのパラメータ部分を変更すればよいですね。

header.phpのheadタグ内のcss記述を直接編集して上書きアップロードする

上記画像はバージョン数ではなく日付になっていますが、問題はありません。

functions.phpでcssを読み込む場合

header.phpへの直接記述を除けば、ほとんどがfunctions.phpへの設定となります。

ではまず、functions.phpでcssを読み込む基本的な方法を解説していきます。

css読込関数：wp_enqueue_style

functions.phpでcssの読み込みをする場合、基本的には以下のように書きます。

cssの読込関数として、wp_enqueue_style()が使われる事が多いです。

style.cssの読込例

wp_enqueue_style( 'style', //ハンドル名称 get_template_directory_uri() . '/style.css', //パス array(), //軸となるハンドル名称 '1.7.0' //バージョン //メディア設定あり );

バージョン

上記の様にパラメータとしてバージョン数を設定できるようになっています。

上記の場合「style.css?ver1.7.0」と出力される事になります。

この様にfunctions.php上で管理している事がわかれば、後は簡単です。

この1.7.0部分を随時変更すれば、cssパスのバージョンも随時変わってくれるという訳です。

※css上部設定欄のバージョンとは連動していません。

ハンドル名称

上記のハンドル名称は、そのままcssパス内の「id=""」の欄に入ります。

ここでcssの識別がされ、他のcssパスと差別化される訳です。

例えばハンドル名称が「bootstrap」の場合は以下の様に出力されます。

<link rel='stylesheet' id='bootstrap' href='https://lpeg.info/wp-content/themes/lpeg/bootstrap.css?ver=1.7.0' type='text/css' media='all'>

複数のcssファイルを読み込む場合

では次に、先程のwp_enqueue_style()を使って複数のcssを読み込む例を紹介しましょう。

ここでは「google-fonts」と「style」のcssファイル2枚を例にとっています。

複数ファイルを読む記述例

wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700' ); wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', array(), '1.7.0' );

手元の実物ファイル以外に、Google-fontsの様に外部CDNファイルも指定できます。

これを繰り返して複数ファイルを読み込む事ができますね。

wp_enqueue_style()の記述を探す

functions.phpでcssを読み込む記述をしているのであれば、wp_enqueue_style()の記述を見つけましょう。

見つけたらバージョン数値を変更するだけですし、仮に表記が無かったら追加すればOKです。

cssの読込順を決める

ここでちょっと脱線しますが、cssの読込順序の指定方法について触れておきます。

先程の例では、functions.phpで以下の2枚のcssを読込しました。

上記の順で書いていますが、きちんと順番を指定した事にはなっていないので注意が必要です。

順番を決定するにはcssの登録とは別に、並行して別途指定が必要です。

css登録関数：wp_register_style()

cssを登録するには、wp_register_style()を使います。

wp_register_style()はwp_enqueue_style()と違い、単にcssファイルを登録するだけです。

wp_register_style()に記述するだけでは、cssファイルの読み込み対象にはなりません。

reset.cssの登録例

wp_register_style( 'reset', get_template_directory_uri() . '/reset.css', array(), '1.2.0' ); wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', array('reset'), //IDが「reset」になっているファイルの次を指定する '1.7.0' );

array()について

array()は依存関係を示しています。

array()の中に入れたハンドル名称が、親の扱いとなるのです。

array('reset')としているので、style.cssはreset.cssの読み込み後に読み込まれる様になります。

wp_register_style()の記述を探す

この様に並び順を指定してある場合は、wp_register_style()でcssの登録がされている箇所があるはずです。

ですのでwp_register_styleでも、検索を掛けてみましょう。

そうすればcssの登録欄やバージョン数値が見つかるはずです。

ファイル実物内に記述されたバージョンを参照している場合

ファイル実物内に記述されたバージョンを読み取っている場合、以下の様な記述があるはずです。

テーマ情報関数：wp_get_theme()

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' ); function my_enqueue_scripts() { $theme_info = wp_get_theme(); wp_enqueue_style( 'default', get_stylesheet_uri(), array(), $theme_info->get( 'Version数値が入っている' )); wp_enqueue_style( 'custom', get_theme_file_uri('/css/custom.css'), array(), $theme_info->get( 'Version数値が入っている' )); }

上記には、テーマ情報を取得するwp_get_theme()の記述があります。

この関数で、css実物ファイル上部の設定欄にあるversionの数値を読み取っている訳です。

これは、css実物ファイルと連動している事になります。

ですのでこの場合、実物ファイルのバージョンを変更すればOKになりますね。

この様にWordpressの場合はバージョン数値の変更方法が多々ありますので、現場に合わせて対応しましょう。

一押し人気コーナー紹介