カテゴリー
メモ:PC設定

WordPress:追加CSS に記述しても反映されないときの対処

WordPress では、追加CSS に CSS を記述することでテーマをカスタマイズすることができます。でも、記述した CSS の文法に誤りがないのに 追加CSS に記述した内容がうまく反映されないことがあります。style.css を使って対処してみます


CSS が正しくても、うまく反映しないこともある

CSS の適用には優先順位があります

  • WordPress ではいろいろな CSS がいろいろなタイミングで複雑に読み込まれます。追加CSS への記述がうまく反映しない場合は、別の CSS 設定ファイルに記述してみるとうまくいくことがあります
  • ここでは style.css に記述してそれを反映させてみます

整形済みブロックの折り返しを設定してみる

ためしに、整形済みブロックの折り返し設定を変更してみるんですね

  • 整形済みブロックで、長いテキストでも自動的に折り返ししない(または折り返しする)ように設定してみます
  • wp-block-preformatted に white-space:pre; を指定すると整形済みブロック内のテキストは折り返しされなくなります(横スクロールで表示する)。white-space:pre-wrap; で折り返しするようになります

style.css に CSS を追加

style.css に CSS を書き込みます

  • 追加CSS のかわりに style.css に CSS を記述してみます
  • Webブラウザ上で WordPress サイトにアクセス
  • 「外観 > テーマエディタ」で style.css を開いて、一番最後に次の記述を追加して保存します
.wp-block-preformatted { white-space:pre; }

style.css が WordPress で利用されるように設定

style.css を読み込みます

  • style.css が利用されるように functions.php に読み込みの命令を記述します
  • 「外観 > テーマエディタ」で functions.php を開いて、一番最後に次の記述を追加して保存します
/* style.css の読み込み */
function theme_name_scripts() {
     wp_enqueue_style( 'style-name', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts');

これで完了。動作チェックしてみてくださいね

変更内容をバックアップ

バックアップも忘れずに!

  • style.css や functions.php はテーマの更新時に上書きされてしまいます
  • 追加(変更)内容はどこかにメモ(あるいはファイルそのものをバックアップ)しておきます
  • 子テーマを使って管理することもできます