WordPressブロックエディターをフロントエンドデザインのようにするようにする-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

WordPressブロックエディターをフロントエンドデザインのようにするようにする

Jennifer Aniston

Apr 01, 2025 am 04:45 AM

WordPressブロックエディターの登場をフロントエンドデザインと一致させます！

WordPressブロックエディターをフロントエンドデザインのようにするようにする

WordPressユーザーとして、記事の編集のために2つのタブを同時に開く必要があることがよくありますか？ 1つのタブに新しいGutenbergブロックエディターが表示され、もう1つのタブは記事のフロントエンド効果をプレビューして、最終レンダリングが間違っていないことを確認しますか？

WordPressのテーマスタイルは、Webサイトのフロントエンドにのみ影響し、バックエンドエディターは通常、フロントエンドとは大きく異なります。しかし、これは変更できません！カスタムStyleSheetを使用すると、WordPressエディターのミラーをフロントエンドの外観にほぼ完璧にすることができます。

これには2つの簡単な手順のみが必要です。

テーマのfunctions.phpファイルにPHPコードの数行を追加して、エディターにカスタムスタイルシートを読み込むように通知します。
このカスタムスタイルシートを作成して構成します。

始めましょう！

ステップ1： functions.phpファイルを変更します

自己開発のWordPressテーマを使用している場合は、メインテーマを変更する前にサブテーマを作成することを強くお勧めします。

テーマのfunctions.phpファイル（通常はテーマフォルダーのルートディレクトリにある）を開き、ファイルの最後に次のコードを追加します。

 // Gutenberg Custom StyleSheet add_theme_support（ 'editor-styles'）;
add_editor_style（ 'editor-style.css'）; //パスがStyleSheetファイルを正しく指していることを確認してください

ログイン後にコピー

このコードは、Gutenbergと連携するためにカスタムスタイルシートを使用してサポートし、StyleSheetファイル（ editor-style.css ）の場所を指定することをWordPressに伝えます。

ステップ2：CSSスタイルを書きます

次に、CSSライティングプロセスを入力します。

さまざまなWordPressテーマのため、すべてのテーマに合わせて機能するスタイルシートを書くことは不可能です。次の例は、私のウェブサイトで使用されているトピックに基づいており、ウェブサイトのスタイルシートを構築する方法を理解するのに役立つことを願っています。記事の最後に、すぐに始めるのに役立つテンプレートが提供されます。

editor-style.cssという名前の新しいファイルを作成し、テーマ（または子テーマディレクトリ）のルートディレクトリに配置します。

ブロックエディターのCSSスタイルは、標準のCSSとはわずかに異なります。たとえば、次のコードでは、記事にテキストサイズを正しく適用できません。

 H2 {
  フォントサイズ：1.75em;
}

ログイン後にコピー

スタイルを正しく設定するには、ブロックエディターのブロックを見つける必要があります。これはつまり<h2></h2>.rich-text.block-editor-rich-text__editableクラスを使用して要素をスコープする必要があります。

 H2.Rich-Text.Block-Editor-Rich-Text__edable {
  フォントサイズ：1.75em;
}

ログイン後にコピー

このパターンに従って、一般的なブロックエディター要素をスタイリングするベースCSSファイルを作成しました。 Githubからファイルを取得し、テーマに合わせてスタイルを置き換えることができます。

ここでは、スタイルシートビルドプロセスを詳細に拡張することはありませんが、テンプレートは明確なアイデアを提供するはずです。良い出発点は、フロントエンドのスタイルシートから要素をコピーすることですが、ブロックエディターウィンドウに適用するために、いくつかの要素クラスを変更する必要がある場合があります。

疑わしい場合は、ブラウザ開発者ツールを使用して要素を確認し、対応するクラス名を決定します。上記のリンクのテンプレートは、ほとんどの要素をカバーする必要があります。

エフェクトディスプレイ

まず、カスタムスタイルシートなしでWordPressエディターを見てみましょう。

次に、私のテストWebサイトのフロントエンドを比較してください。

2つの違いは重要ですよね？私のテストサイトでは、多くの勾配、カスタムフォント、ボタンスタイル、参照ブロックを使用しています。コンテナは単純な正方形ではありません。

好むと好まざるとにかかわらず、これはデフォルトのGutenberg Editor UIとの大きな違いであることに同意するでしょう。これが、記事をプレビューするために個別にタブページを開く必要がある理由です。

それでは、カスタムスタイルをロードして、効果を確認しましょう。

見て！編集者UIは、私のウェブサイトのフロントエンドとほぼ同じように見えます。コンテンツ幅、フォント、色、さまざまな要素は、フロントエンドと一致しています。私は記事のタイトルと同じ美しい背景さえ持っています！

これは、別のタブでプレビューする必要がなくなりました。かっこいいですか？

WordPressエディタをフロントエンドの外観と一致させることで、効率を大幅に改善できます。私にとっては、記事を編集するときにフロントエンド効果を表示するためにタブを頻繁に切り替えて、私の思考を中断するので、これを避けることを好みます。

上記の手順があなたが同じ効果を達成するのに役立つことを願っています！

以上がWordPressブロックエディターをフロントエンドデザインのようにするようにするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。