簡単な適用方法
「ダッシュボード > 外観 > カスタマイズ」を選択。
「追加CSS」を選択。
編集をしながら即座にCSSが適応されるので、画面を見ながらの編集が可能です。
編集したCSSを本番環境に適応させたい場合は、「公開」をクリックします。
style.cssを編集する方法
「ダッシュボード > 外観 > テーマエディタ」を選択。
style.cssを選択してCSSを編集して、更新することで本番環境に適応できます。
WordPressの子テーマのstyle.cssが反映されない問題
問題1. キャッシュが使用されている
ブラウザがキャッシュを保持しているので、ファイルを読み込んでいない可能性があります。
キャッシュが問題で反映されないのでしたら、いずれかで解決するはずです。
- スーパーリロード(command + Shift + R)
- シークレットウィンドウを使用する
- キャッシュを削除
問題2. ファイルが読み込まれていない
PHPファイルを編集する必要があります。
コードを間違えると、エラーが出たり、wordpressが動かなくなることもあります。
その場合はサーバーでファイルを直接編集して直す必要がありますので編集する際はお気をつけください。
せっかく編集したstyle.cssが読み込まれていない、
もしくは親テーマにより上書きされている可能性があります。
読み込みをするよう編集する必要があります。
「ダッシュボード > 外観 > テーマエディタ」からfunctions.phpを選択。
写真て追加したコードはこちらです。
add_action( 'after_setup_theme', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style'));
}上記を追加するとうまく読み込んでくれました。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );を使ってCSSを読み込ませているという記事もありましたが、 私のWordPressではうまく動いてくれなかったので
add_action( 'after_setup_theme', 'theme_enqueue_styles' );こちらを使用する方法に落ちつきました。
まだ正確には調べきれていないので良い方法なのかは不明です。
もしかするとCSSを2回読み込んでしまっている可能性もあり、
そうすると初期の読み込みが遅くなっているかもしれませんので、自己責任でお願いします。
もし、良い方法知っている方いらっしゃいましたら教えてくださいませ。
その他の解決方法
子のテーマの中で@importを使って外部ファイルのCSSをインポートする方法も思いつきましたが、
明らかに重複呼び出しになるため、今回はやめました。
調べるとページの読み込みスピードに問題になる可能性があるということで、非推奨になってました。
まとめ
個人的には、ダッシュボード > 外観 > カスタマイズ の追加CSSで編集をする。というので問題ないと思っています。
が、今回は記事を投稿する編集エディタ(ビジュアルエディタ)の部分にもCSSを適用したくて、
functions.phpで読み込み設定を加えて、直接style.cssを編集する方法を選びました。
記事を書きながらでもCSSが適用されていたら、完成後のイメージと近いので確認する作業も減るので
時間の短縮にも繋がると思います。
こちらがCSS読み込んだバージョンの編集エディタ画面です。
編集エディタでも見出しタグに自前のCSSが適応されています。
そしてなぜかテーマを変更したらマーカーの線の色が表示されなくなったので、
自前のCSSで追加してマーカー線を表示をしている状態です。
良きWordPressLifeを！
コメント