WordPress5.9にしたら知らないglobal-styles-inline-cssが追加されて知らないカラーになったので解決方法

「WordPress5.9にバージョンアップしたら背景色設定のカラーが変わっている？」

「設定した覚えのない色になっている？」

「明日納期だ色が変わっている」

あなたは、そんなことを悩んでないだろうか？

実際にWordPress5.9にバージョンアップすると、
あたらしブロックシステムが実装されWordPressをブロック形式でデザインできる様になる。

その影響もあって、スタイルシートが勝手に追加されて知らない色が表示されるようになった。

さっそく、そのスタイルを削除する方法を解説。

global-styles-inline-cssが追加されている

head内にglobal-styles-inline-css というスタイルがオーバーライドされていました。

この設定には theme.jsonを使っていくつか変更できる様になっているのだけれど、まだ仕様がよくわからないのでいったん非表示化して、いつも通りの色に戻したい。

詳しくはここ
https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/themes/theme-json/
※なぜかリンク中途半端にしか貼れない
※おそらく5.9系のバグかも

global-styles-inline-css を削除

削除する方法は簡単 function.php に下の行を足せばオーケー。

// global-styles-inline-css を削除
function remove_global_styles_inline_css() {
	wp_dequeue_style( 'global-styles' );
}
add_action( 'wp_enqueue_scripts', 'remove_global_styles_inline_css' );

これで不要なglobal-styles-inline-css

<style id='global-styles-inline-css' type='text/css'>
body{--wp--preset--color--black: #000000;～省略～
</style>

をhead内から簡単に削除することができます。

global-styles-inline-css削除まとめ

WordPressがバージョンアップされて新機能の追加は嬉しい。

しかし、後日覚えるとして今じゃないので、バージョンアップしつつ元のカラーに戻したい時などに対応可能な方法です。

ついにデザイナーでもこれから【theme.json】ファイルを使うようになりますね。

あなたは以下のことで悩んでないだろうか？

「HTML・CSSから学習したい」
「ワードプレスの勉強で使いこなせなくて困っている」
「近い将来に向けてスキルアップし収入を増やしたい人」
「エンジニアとして働きたい、転職したい」
「WordPresの学習方法がわからない」

そんなお悩みなら
あなたのお役に立てます。

WPHack講座を今すぐ確認