WordPressの有料テーマ「DIVER」をカスタマイズする時のTips。
カスタマイズできるように子テーマの「DIVER CHILD」を使用する時、子テーマ側の style.css を当然編集すると思います。
しかし、このスタイルシートに付与されたクエリはWordPressのバージョン情報のみ。編集してもブラウザにキャッシュが残ってしまい、少し面倒臭いです。
そこで、style.cssの更新日時をクエリとして付与し、キャッシュが残らないようにしておく方法を探ってみたので、メモしておきます。
完成コード
説明は後でするとして、とりあえず子テーマ側のfunctions.phpのコードを以下のように変更すればOKです。
変更前のコード
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}この部分を、以下のように変更してください。
変更後のコード
add_action( 'init', 'remove_parent_filters' );
function remove_parent_filters(){
remove_filter( 'style_loader_src', 'add_file_ver_to_css_js');
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
$t_dire_uri = get_template_directory_uri();
$s_dire_uri = get_stylesheet_directory_uri();
$date_query = date("ymdGis", filemtime( get_stylesheet_directory() . '/style.css'));
wp_enqueue_style( 'parent-style', $t_dire_uri .'/style.css' );
wp_enqueue_style( 'maincss', $s_dire_uri.'/style.css', array('parent-style'), $date_query );
}※ 変数に置き換えているのは私の好みです。他にも追加するファイルがある場合に便利なので。
こうすることで、以下のように更新日情報がクエリに付与されます
<link rel='stylesheet' href='https://example.com/wp-content/themes/diver_child/style.css?ver=18092172434' media='all'>コードの説明
では、コードの中身を説明していきます。
親側で追加されているフックを削除
親テーマの「diver/lib/functions/load-script.php」というファイルの 114行目 あたりから以下のようなコードがあります。
add_filter( 'style_loader_src', 'add_file_ver_to_css_js');
add_filter( 'script_loader_src', 'add_file_ver_to_css_js');
if ( !function_exists( 'add_file_ver_to_css_js' ) ){
function add_file_ver_to_css_js( $src ) {
if (strpos( $src, site_url() ) !== false) {
// //Wordpressのバージョンを除去する場合
if ( strpos( $src, 'ver=' ) ){
$src = remove_query_arg( 'ver', $src );
}
//クエリーを削除したファイルURLを取得
$removed_src = preg_replace('{?.+$}i', '', $src);
$resource_file = str_replace(site_url('/'), ABSPATH, $removed_src );
$src = add_query_arg( 'ver',wp_theme_version(), $src );
}
return $src;
}
}add_file_ver_to_css_jsという関数が、style_loader_srcとscript_loader_srcにそれぞれフックされています。
これによってクエリ情報がWordPressのバージョン情報となるように強制されてしまっており、更新日のクエリを付与しても書き換えられてしまいます。
なので、このフックを解除しておく必要があります。それが完成コード1~4行目のコードの内容です。
add_action( 'init', 'remove_parent_filters' );
function remove_parent_filters(){
remove_filter( 'style_loader_src', 'add_file_ver_to_css_js');
}子テーマのstyle.cssをmaincssというハンドル名で改めて読み込ませる
diverでは、子テーマ側では初期状態で親テーマ側のstyle.cssを読み込むという記述しかされておらず、自身のstyle.cssを読み込んでいる記述が見当たりません。
これはなぜかというと、親テーマの「diver/lib/functions/load-script.php」というファイルの 13行目 で、現在有効なテーマのstyle.cssを読み込む という処理がすでに記述されているためです。
wp_enqueue_style('maincss', get_stylesheet_uri());これによって、子テーマを有効にした場合、maincssというハンドル名で子テーマ側のstyle.cssが自動で読み込まれています。
なんでこんなコードなんだ笑
そのため、子テーマ側のfunctions.phpにて更新日のクエリを付与させて改めて読み込むため、maincssというハンドル名で上書きしてあげます。
それが完成コード13行目
wp_enqueue_style( 'maincss', $s_dire_uri.'/style.css', array('parent-style'), $date_query );この部分でやっていることです。parent-styleの後に読み込むように依存関係も指定してあげるように注意しましょう。
コメント