WordPressで読み込んでいるCSSのバージョン番号としてテーマのバージョンを付与する方法

WordPressで読み込んでいるCSSのバージョン番号としてテーマのバージョンを付与する方法

WordPressで読み込んでいるCSSのバージョン番号としてテーマのバージョンを付与する方法

WordPressで読み込んでいるCSSファイルのバージョン番号に、テーマのバージョンを使う方法をご紹介いたします。

通常は、wp_enqueue_styleで読み込むCSSには固定のバージョン番号を引数で指定しますが、テーマのバージョンをバージョン番号として使うことで、テーマの更新時にキャッシュもクリアされて結構便利だと思います。

WordPressで読み込んでいるCSSのバージョン番号としてテーマのバージョンを付与する方法

wp_get_theme関数について

CSSファイルのバージョン番号にテーマのバージョンを付与するには、wp_get_theme関数を利用します。

wp_get_themeはテーマの情報を取得できる関数で、テーマのstyle.css内で定義されている以下の情報を取得できます。

  • Name
  • ThemeURI
  • Description
  • Author
  • AuthorURI
  • Version
  • Template
  • Status
  • Tags
  • TextDomain
  • DomainPath

wp_get_theme関数で取得したテーマの情報は、以下のように出力できますのでこれを利用します。

$theme_info = wp_get_theme();
echo $theme_info->get( 'Version' );

なお、Descriptionは、翻訳前と翻訳後のどちらを出力するかで記述が異なります。

$theme_info = wp_get_theme();
echo $theme->get('Description'); //翻訳前の説明文
echo $theme->display('Description'); //翻訳後の説明文

wp_enqueue_styleでCSSを読み込んでいる場合

wp_enqueue_styleでCSSファイルを読み込んでいる場合は、以下のように記述してバージョン番号を追加します。

function my_enqueue_scripts() {
  $theme_info = wp_get_theme();
  wp_enqueue_style( 'default-style', get_stylesheet_uri(), array(), $theme_info->get( 'Version' ));
  wp_enqueue_style( 'etc-style', get_theme_file_uri('/css/etc.css'), array(), $theme_info->get( 'Version' ));
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

wp_get_theme関数で取得したテーマの情報を$theme_infoに代入し、「$theme_info->get(‘Version’)」でバージョンを指定しています。

これにより、出力されるHTMLでは、以下のようにテーマのバージョンがバージョン番号として付与されます。

<link rel='stylesheet' id='default-style-css' href='https://example.com/wp-content/themes/themename/style.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='etc-style-css' href='https://example.com/wp-content/themes/themename/css/etc.css?ver=1.0' type='text/css' media='all' />

付与されるバージョン番号を変更する時は、style.css内で定義している「Version」の値を変更します。

/*
Theme Name: themename
Author: himecas
Author URI: https://techmemo.biz/
Description: テーマの説明
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: themename
*/

header.php内でCSSを読み込んでいる場合

header.php内にベタ書きしている場合も、以下のように記述することでテーマのバージョンをバージョン番号として付与できます。

<?php $theme_info = wp_get_theme(); ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>?ver=<?php echo $theme_info->get('Version'); ?>">

あとがき

読み込むCSSファイルのバージョン番号とテーマのバージョンを合わせたい場合は、ぜひ上述した方法をお試しください。バージョンを変更する時は、style.cssの更新だけで済むので管理が楽ですね。

ちなみに、CSSファイルだけでなく、JavaScriptファイルでも同様にテーマのバージョンをバージョン番号として付与できます。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

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