CSSファイルに付くパラメータのバージョン番号を変える方法

2024/11/10公開

最近、WordPressで作ったサイトなんですけど、HTMLソースがちょっと気になってて、使ってるWordPressのバージョンがバレないように対策しようと思ってるんです！😄具体的には、wp_default_stylesのフックを使ってdefault_versionを置き換えて、ハッシュ値を算出するんですよ。これでバージョンが変わるたびにキャッシュも管理できるんです！✨

サンプルコード(functions.php)
解説
- 対策前
- 対策後
CSSファイルの後ろにバージョン番号が表示されている理由は？
バージョン番号がソースに表示されているとダメなの？

サンプルコード(functions.php)

PHP

/**
 * my_default_styles
 * デフォルトのスタイルを割り当てるwp_default_stylesのフック
 */
function my_default_styles( $styles ) {
	$default_version = substr( hash( 'sha256', filemtime( ABSPATH . WPINC . '/version.php' ).filemtime( get_stylesheet_directory(). '/style.css' ) ), 3, 8 ) ;
	$styles->default_version = $default_version;
}
add_action( 'wp_default_styles', 'my_default_styles' );

解説

具体的には、wp_default_stylesのフックを使ってdefault_versionを置き換えるんですよ。それで、更新日からハッシュ値を算出して8バイト分をセットするんです。バージョンアップとかテーマの更新があったらハッシュ値も変わるから、バージョン番号を隠しながらキャッシュ制御もできちゃうんです！✨

対策前

HTML

<link rel="stylesheet" id="wp-block-library-css" href="http://example.com/wp-includes/css/dist/block-library/style.min.css?ver=6.6.2" media="all">
<link rel="stylesheet" id="style-css" href="http://example.com/wp-content/themes/mytheme/css/style.css?ver=6.6.2" media="all">

対策後

HTML

<link rel="stylesheet" id="wp-block-library-css" href="http://example.com/wp-includes/css/dist/block-library/style.min.css?ver=88a9f654" media="all">
<link rel="stylesheet" id="style-css" href="http://example.com/wp-content/themes/mytheme/css/style.css?ver=88a9f654" media="all">

CSSファイルの後ろにバージョン番号が表示されている理由は？

ブラウザキャッシュの制御のためなんです。スタイルシートのファイル名にバージョン番号を入れておくことで、WordPressがバージョンアップしたときに、ブラウザに明示的にキャッシュさせることができるんです。これで、バージョンアップ後に表示が変になっちゃうトラブルを防げるんですよね！✨

バージョン番号がソースに表示されているとダメなの？

万が一、WordPressに脆弱性が見つかった時に、使ってるバージョンが簡単にバレちゃうんですよ。そうなると、悪意を持った攻撃者に狙われる危険性があるから、リスクはできるだけ減らしておきたいなって考えてます！✨

functions.php WordPress