>wordpressで・・・

wordpressでcssが反映されない時の対処方法

wordpressでcssを弄っていると、その内容が反映されない時があります。というより、対処していなければ大抵反映されないのではないでしょうか。まず一般的な方法でいえばブラウザのキャッシュを削除するといったことを思い浮かべるでしょう。できればブラウザを閉じたときにキャッシュを削除する設定にしておけば、とりあえず一旦ブラウザを閉じれば解決するかも知れません。

[ 目次 ]

wordpressでcssが反映されない原因は？
wordpressのcssを強制的に反映させる
1. wordpressのヘッダーテンプレート
wordpressテーマの「functions.php」
wordpressの各ハンドル名を出力
まとめ

wordpressでcssが反映されない原因は？

ブラウザのキャッシュもそうですが、サーバ側が原因の場合もあります。リロードすれば更新される場合もありますが、それが出来ないケースもあります。

また、サーバ側の「.htaccess」でExpiresDefaultを設定しているとブラウザによっては何度リロードしてもキャッシュばかりが返されることもあるかも知れません。仕様も良く変わるため、実際のところはこちらの希望通りにはなかなかならないようです。

ExpiresDefault "access plus 1 seconds"

</filesMatch>

ExpiresDefaultを指定していれば、それを削除してしまう手もありますが、それでは読み込み速度が低下します。上記のsecondsを一秒に設定する方法もありますが現実的ではありません。そもそも設定ファイルを弄るというのは、リスクが伴いますよね。また、最近のレンタルサーバはExpiresDefaultを簡単に設定できるようになっているため、意識していない人も多いのではないでしょうか。

nginxとapacheが併用されているサーバもあり、nginxではキャッシュ関連で何かあるかも知れません。筆者の環境では保存したはずのデータがロールバックされたこともあります。実際にはwordpress自体の問題かも知れませんが、しばらくしたら直ったので、それ以上調べるには至りませんでした。

wordpressのcssを強制的に反映させる

wordpressのcssを強制反映させるには、URLを変えてしまうのが最も簡単です。しかし、URLを頻繁に変えるというのはキャッシュなどによってcssへアクセスできないという現象も発生させることがあるため現実的ではありません。そこで、パラメータを使います。wordpressのcssのURLの末尾には、「?ver=1.0」などというパラメータがついています。こうするとバージョンが変わっても普通にアクセスできるという訳です。

ただ、wordpressはそのままだと、これを自由に変更できません。

バージョン変更には二つの方法があります。一つはヘッダーテンプレート（header.php）を利用する。二つ目は「functions.php」で設定するという方法です。もちろんプラグイン化すればどのテーマでも使えるようになります。

wordpressのヘッダーテンプレート

まず、time.phpというファイルを作って、そこに適当な数字を入れます。そして、テーマ内にアップロードします。ファイル名は適当で構いませんが、コード内でこのファイルを呼び出している部分において名称を統一しなければなりません。

echo "1.0.0";

次にテーマのヘッダーテンプレートに下記のコードを入力します。template-nameは利用されているテンプレートの名前です。URLの呼び出し方については他の方法もあると思いますが、筆者の場合は同一サーバの他のドメインから呼びだすこともあるため、$_SERVER['DOCUMENT_ROOT']内とtemplate-nameの部分に変数を当てて使っています。そのため、一部修正した下記のようなコードになっている次第です。入力する位置はどこでも構いませんが、後述するlinkタグより上にして下さい。

ob_start();

require_once $_SERVER['DOCUMENT_ROOT'].'/wp-content/themes/template-name/time.php';

$_POST["ver"]=ob_get_clean();

そして、ヘッダーテンプレートのheadタグ内に下記のlinkタグを挿入します。これで「time.php」で数字を適当に追加や書き換えるだけでcssの変更が強制的に行われます。

wordpressテーマの「functions.php」

こちらの方法は少し癖があります。まず、style_loader_srcフックですが、これの第三パラメータを９にします。wordpressのアクションフックは何も指定しなければ10となります。下のwp_print_stylesフックより先に読み込ませることでワードプレスのcssへデフォルトで追加されるバージョン情報を削除し、上書きすることができます。

そして、wp_dequeue_styleとwp_enqueue_styleですが、両者は似ていますが違います。「wp_」の後に続く文字がそれぞれ「d」と「e」になっています。たった一文字違いですが、処理は異なります。

wp_dequeue_styleフックでは、引数にハンドル名を入れます。ハンドル名とはcssのlinkタグの「id」の名称から後部の「-css」を抜いた部分です。ワードプレスの現在の仕組みでは一応そうなっていますが、ハンドル名を引っ張り出すコードも後述します。

話を戻しますが、wp_enqueue_styleの第一引数にこれまたハンドル名を入れます。ただし、wp_dequeue_styleのハンドル名と被ってはいけません。下の例では「css-ワードプレス」の部分です。更にややこしいのですが、第二引数にある「version」の部分は「ver」と入力してはいけません。これはstyle_loader_srcフックで「ver」を削除しているためです。使うとどうなるかといえば、「？」以降のパラメータの部分が丸ごと消えます。

add_action( 'style_loader_src', function($src){$ver_wordpress=remove_query_arg('ver', $src);return $ver_wordpress;},9);

add_action('wp_print_styles', function (){

ob_start();

get_template_part('time');

$wordpress_time=ob_get_clean();

wp_dequeue_style('twentynineteen-style');

wp_enqueue_style('css-wordpress', get_stylesheet_uri().'?version='.$wordpress_time);

});

wordpressの各ハンドル名を出力

このコードはワードプレスにログインしているユーザのみで動きます。つまり、ワードプレスにログインしていないユーザには読み込まれないコードですので安心して下さい。is_user_logged_in()関数で条件分岐しているため、ログインユーザにしかブログ上に表示されません。「functions.php」に記述すると動作します。ただし、functionsファイルはバックアップ後、いつでもFTPなどでアップロードできる状態にしてから触ってください。何らかの理由で誤記入が混じってしまうと、ワードプレスの管理画面やブログがきちんと表示されないリスクがあるためです。

// css

add_action('wp_print_styles', function (){

if(is_user_logged_in()){

global $wp_styles;

$handle_style_w=[];

foreach($wp_styles->queue as $key => $val){

$handle_style_w[$wp_styles->registered[$val]->handle]=$wp_styles->registered[$val]->src;

}

echo '<pre>';

print_r($handle_style_w);

echo '</pre>';

}

});

// javascript

add_action('wp_enqueue_scripts', function (){

if(is_user_logged_in()){

global $wp_scripts;

$handle_script_w=[];

foreach($wp_scripts->queue as $key => $val){

$handle_script_w[$wp_scripts->registered[$val]->handle]=$wp_scripts->registered[$val]->src;

}

echo '<pre>';

print_r($handle_script_w);