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ファイルでも同様にテーマのバージョンをバージョン番号として付与できます。