WordPressブロックエディター（Gutenberg）の背景色をカスタマイズする方法

WordPressのGutenbergエディターの背景色を、サイトのブランディングカラーに合わせて変更し、サイト文化をアピールしたい。詳しいチュートリアルはこちら！

なぜWordPressのブロックエディタの背景色を変更する必要があるのですか？

背景色を変えたい理由はたくさんあります。しかし、ほとんどの場合ワードプレスのテーマすべて、本番サイトと同じブロックエディタの背景色を使用しています。アストラそしてオーシャンWPそしてジェネレートプレスその他

しかし、WordPressテーマが同じ色を使用していない場合、エディタ内の投稿の外観は、ユーザーがライブサイトで見るものと同じではありません。

また、好みに応じて変更することもできる。

例えば、デフォルトでは、ブロックエディターの背景は真っ白です。ユーザーによっては、白い画面を長時間見つめるのは少しストレスがかかると感じるかもしれません。眼精疲労は多くの人にとって不快であり、デフォルトの白い背景は目に快適ではありません。

WordPressエディタの背景色を変更する方法

これは、被写体のfunctions.phpファイルWordPressエディタの背景色を変更するカスタムコードを追加します。

ただし、次のような修正が必要である。functions.phpファイルコードのわずかなエラーでも、ウェブサイトをアクセス不能にする可能性がある。

そのため、多くのチュートリアルではダブルPCコードプラグインの理由現在市販されているWordPressスニペットプラグインの中で最も優れており、WordPressサイトにカスタムコードを追加する最も簡単で安全な方法です。

まず、WPCodeプラグインをインストールし、有効化します。

有効化したら、WordPressの管理サイドバーからアクセスしてください。コード・スニペット」＋「コード・スニペットの追加」ページ。

ここから「」をクリックしてください。カスタムコードの追加（新しいコードスニペット）"オプションの下にある。コードスニペットの使用「ボタン

これは"カスタムコードスニペットの作成"ページに、コード・スニペットの名前を入力することができる。これは、コードを識別するのに役立つものであれば何でもかまいません。

次に、画面右上のドロップダウンメニューから"PHPスニペット「としてコードタイプ".

その後、以下のコードをコピーして" "内に貼り付けます。コードプレビュー"ボックス：

add_action( 'admin_footer', function() { )
    ?>
    <style
        .editor-styles-wrapper {
            background-color: #bee0ec；
        }
    </style
    <?php
}).

完了したら、先ほど貼り付けたPHPコード・スニペットの中から次のコードを探してください：

	background-color: #bee0ec；

次に、背景色オプションの隣に、希望する色の16進コードを追加する必要があります。16進コードを使いたくない場合は、基本的な色名、例えば"fig.反動的「または青".

注：ここに追加する色名は英語でなければならない。

その後、下にスクロールして"スティック「セクションで"自動挿入「オプション

次に、ドロップダウンメニューから、コード・スニペットの"プレースメント"ために"管理者のみ".

その後、ページのトップに戻り、"不活発「スイッチは"機能".

最後に、"コードスニペットの保存" ボタンをクリックして変更を保存します。

管理サイドバーからブロックエディターにアクセスできるようになりました。

PHPコード・スニペットを追加すると、このようにブロック・エディターが表示されます。

ウェブサイトのフロントエンドの背景色を変更したい場合は、WordPressダッシュボードのアピアランスのカスタマイズ画面で変更。

テーマカスタマイザーが起動します。カラーモードとダークモード" タブをクリックします。注：カスタマイザーは使用するテーマによって異なる場合があります。

サイドバーに新しいパネルが開くので、そこで"色の選択「オプション

カラーピッカーが画面に表示されますので、お好みの背景色を選択してください。選択したら、一番上の"ポスト「ボタン

また、テーマカスタマイザーからテキストカラー、ハイライトカラー、ボタンカラーなどを変更することも可能です。ただし
ブロックテーマを使用する場合、これらの変更はフルサイトエディターで行う必要があります。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み