こんにちは、yutaです。
現在、WordPressのオリジナルテーマを自作する練習をしているのですが、safariにだけCSSが反映されない(PCもiPhoneも。)現象が起きたので、色々調べて最終的に解決しました。今回は、解決した際に行ったことをまとめます。
目次
1. safariのキャッシュを削除する
2. CSSの読み込ませ方を変える
1. Safariのキャッシュを削除する
1つ目はSafariのキャッシュを削除する方法です。手順は以下。
- Safariの「環境設定」から「詳細」タブへ移動して「メニューバーに”開発”メニューを表示」のチェックボックスにチェックを入れます。
- Safariのメニューバーに”開発”メニューが表示されるのでそれを開いて、「キャッシュを空にする」をクリックすればキャッシュが削除されます。
WordPressのテーマ編集で、読み込ませているCSSファイル(style.css)の中身を確認して最新の状態になっているのにSafariに反映されない場合は、キャッシュが問題の可能性が高いのです。
2. CSSの読み込ませ方を変える
2つ目は、phpファイルのコードを書き換えて、CSSの読み込ませ方を変える方法です。僕の場合は、最初はこちらの方法で解決したんですが、その後またCSSが反映されなくなったので1つ目のキャッシュ削除を行ったら反映されるようになりました。
・変更前のCSSの読み込ませ方
header.phpに以下のコードを記述
<link rel=”stylesheet” href=”<?php echo get_stylesheet_uri(); ?>”>
・変更後のCSSの読み込ませ方
まず変更前に記述していた上記コードをheader.phpから削除
function.phpに以下のコードを記述
function my_queue_styles(){
wp_enqueue_style(‘Airbnb_CopyForPractice’, get_stylesheet_uri());
}
add_action(‘wp_enqueue_scripts’, ‘my_queue_styles’);
最後に、更新したheader.phpとfunction.phpをサーバーにアップロード
2019/03/13 追記 : 上記方法でもCSSがリアルタイムに反映されないことがあるので、MAMPという「ローカルPCにWordPress環境を構築できる無料ソフト」を導入して、そこで開発した物を最終的にサーバーにアップロードするという手順が確実かなと思います。
