Elementorのフォント設定が機能しない？Gutenbergのコンフリクトを解決する

WordPressでウェブサイトを構築する際、多くの人がページデザインツールとしてElementorを選択し、投稿コンテンツにも使用している。グーテンベルク編集者です。Elementorで設定したフォントスタイルが、Gutenbergで作成した段落や見出しと同期されないという、もどかしい問題に遭遇したことがある方も多いでしょう。これはよくあることです。 GutenbergとElementor ケースをうまく適応させること。

げんいん

この問題は通常、以下のような状況で発生する：

Gutenbergは別のCSSスタイルシートを使用し、そちらが優先されます。
テーマやプラグインはグーテンベルク Elementorの設定を上書きする追加のスタイリングサポートを提供します。
Elementorのグローバルスタイルは、Elementorによってレンダリングされる領域でのみ効果を発揮しますが、投稿本文は通常WordPressテーマの制御下でレンダリングされます。

治療

1.Elementorを使って記事全体のスタイルをコントロールする。

投稿ページがElementorテンプレートを使用して作成されている場合、Elementorに「投稿コンテンツ」ウィジェットを追加し、そのスタイル設定でフォントを調整してみてください。これはグーテンベルグ・コンテンツを発表した。

操作手順：

Elementor > テンプレート > テーマビルダー.

追加 "シングル・ピース" テンプレート（シングルポスト）。

Elementorエディタを開き、"Post Content "ウィジェットを見つける。

投稿テンプレートにドラッグする。

スタイル設定で、フォント、サイズ、行の高さなどの「組版」オプションを調整する。

保存を更新し、フロントエンドページを更新する。

2.カスタムCSSの追加

テーマのデフォルトの投稿レイアウトを使用している場合は、ElementorのフォントスタイルをGutenbergの段落と見出し要素に適用するCSSを追加することをお勧めします。

.entry-content p、
.entry-content h1, .
.entry-content h2, .
.entry-content h3, .
.entry-content h4, .
.entry-content h5, .entry-content h7, .entry-content h8, .entry-content h9
.entry-content h6 {
  font-family: var(--e-global-typography-text-font-family); font-weight: var(--e-global-typography-text-font-family)
  font-weight: var(--e-global-typography-text-font-weight)；
  font-size: var(--e-global-typography-text-font-size)；
}

このコードでは、すでにグローバルフォント変数。これらの変数が存在するかどうかは、サイト設定 > タイポグラフィで確認できます。

3.テーマにGutenbergスタイルが注入されているか確認する。

いくつかのトピック（例えばアストラそしてブロックシー)は、フロントエンドでGutenbergのエディタスタイルを積極的に読み込み、ページの視覚的な一貫性に影響を与えます。Gutenbergスタイルの読み込みをオフにするオプションがあるかどうかは、テーマの設定で確認できます。手順

ページを更新して wp-block-library.css または同様の名前のファイルがロードされる
ブラウザのデベロッパー・ツールを開いてください（右上の F12 もしかしたら Ctrl+Shift+I)
ネットワーク」タブに切り替える。

該当する設定が見つからない場合は、以下のコードでこれらのスタイルを無効にしてみてください：

add_action( 'wp_enqueue_scripts', function() { )
  wp_dequeue_style( 'wp-block-library' )；
}, 100 );

上記のコードを子テーマの functions.php ドキュメンテーション

短い

GutenbergとElementor スタイルの衝突の問題は、「誰がフロントエンドのアウトプットをコントロールするか」の問題である。もしエレメンタあなたがグローバルなスタイルを制御したい場合は、記事の内容もElementorの管轄に入るように;そうでなければ、手動で強化するためにCSSを使用する必要があります。統一前と後のフォントをテストすることを忘れないでください、ちょうどエディタで効果を見ていない、フロントエンドのページのパフォーマンスが最も重要である。

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