記事

ワードプレスでstyle.cssが反映されないとき

更新日:

ワードプレスが出力するstyle.cssへのリンクは、wp enqueue style関数で出力されます。

wp_enqueue_style関数で読み込むstyle.cssに固定のバージョン番号を引数で指定している場合、バージョン対応にキャッシュされているCSSが読み込まれるためキャッシュをクリアするかバージョン番号を変更しない限りstyle.cssをエディタで変更しても変更後のstyle.cssが読み込まれずに変更後のスタイルが適用されません。

<link rel='stylesheet' id='parent-style-css' href='https://******.info/wp-content/themes/******/style.css?ver=6.1' type='text/css' media='all' />

Crome拡張機能で、要素に適用されてstyle.cssのバージョンを確認できます。

HTML要素に適用されるstyle.cssバージョンの確認。

wp enqueue style関数

WordPress が生成したページに CSS スタイルファイルを安全に (キューへ) 追加します。

wp enqueue style関数構文

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

wp enqueue style関数パラメーター

$handle(文字列) (必須

スタイルシートのハンドルとして使われる名称。特別なケースとして、文字列に '?' という記号が含まれている場合、それより前の部分は登録されたハンドルとして参照され、それより後の部分はクエリストリングとして URL に追加される。初期値: なし

$src(文字列|真偽値) (オプション

スタイルシートの URL。例: http://example.com/css/mystyle.css
このパラメータは WordPress がこのスタイルを認識していない場合のみに必要。
ローカルのスタイルには URL を直接書き込むべきではない。
代わりに plugins_url (プラグイン向け) と get_template_directory_uri (テーマ向け) を使って適切な URL を取得する。リモートのアセットはプロトコルに影響されない URL で指定できる。例: //otherdomain.com/css/theirstyle.css初期値: 空文字列

$deps(array) (オプション

このスタイルシートが依存する他のスタイルシートのハンドル配列、つまり、このスタイルシートより前に読み込まれる必要があるスタイルシート。依存関係がない場合は空の配列を指定。初期値: array()

$ver(文字列|真偽値) (オプション

スタイルシートのバージョン番号を指定する文字列 (存在する場合) 。
このパラメータはキャッシングに関わらず正しいバージョンがクライアントに送信されるようにするために使う。したがって、バージョン番号があってそれがスタイルシートに意味を持つ場合は含めるべきである。初期値: false

$media(文字列|真偽値) (オプション

スタイルシートが定義されているメディアを指定する文字列。例: 'all'、'screen'、'handheld'、'print'。有効な CSS-media-types の全容についてはこちらの一覧を参照。初期値: 'all'

【参考】Codex関数リファレンス

お勧めサイト:style.cssが反映されない場合の対応方法の紹介

テーマファイルからcssのバージョン番号を読み込んでverとしている。
style.cssの更新日時をverとしている。
素肌にサスペンダー 個人的な備忘と日記

-記事

Copyright© WordPressの始め方 , 2022 All Rights Reserved.