Wordpress (Diviテーマ) におけるDiscourseコメントセクションのフォーマット

サポート WordPress
1

WordPress ウェブサイトを Discourse フォーラムと統合しました。
ブログにコメントセクションを追加したところ、Divi で行った変更がそのセクションの書式に反映されません。その結果、「Notable Replies」や「Participants」などの一部のテキストが非常に大きくなってしまいました。
書式の問題を修正する方法はありますか？

image
image939×403 15.3 KB

2

こんにちは :slight_smile:

Discourse プラグインのコメントは、通常の WordPress コメントと同じ要素を使用しているため、ほとんどの WordPress テーマではそのまま動作します。ただし、Divi のようなページビルダーは、標準的なテーマよりも WordPress の要素やスタイル構造を大幅に上書きするため、Discourse かどうかに関わらず、カスタマイズによってこのような問題が発生することがあります。

これは Discourse WordPress プラグインというよりも、Divi とお子様テーマに関する問題です。もしサイトへのリンクを教えていただければ、基本的な修正のための CSS を提案できます。

「いいね！」 2
3

こんにちは、アングスさん。

通常、Divi は書式の変更機能を保持します。しかし、この場合はテキストの一部のみがフォントの変更に対応しています。

ご協力いただけますと幸いです。
ウェブサイトはこちらです：https://about.openfoodnetwork.ca/tech-enabling-on-line-food-distribution

4

@newspring さん、確認しました。2 つの問題があります。

スタイリング

まず、前述の通り、Divi テーマは独自のコメント要素を使用しており、その独自の要素に対してのみスタイルを提供しています。つまり、Discourse が使用する標準的なコメント要素にはスタイルが適用されていません。また、Divi は独自のコメント要素を探しているため、これらの要素にスタイルを適用することもできません。

つまり、Divi のコメントブロックをそのまま使うには Divi テーマを使用する必要があります。Discourse や他の非 Divi のコメントブロックを使用する場合は、自分でスタイルを適用する必要があります。標準的な WordPress テーマ（例：Twenty Nineteen）を適用すると、Discourse のコメントがそのテーマが提供する CSS でスタイルされ、通常通り表示されることを確認できます。

しかし、ご安心ください！CSS は比較的簡単です。より自然に見えるようにするための簡単な方法の一例を以下に示します。この CSS を Divi または他のテーマに追加して読み込ませることができます。

CSS 
.comment-meta,
.comment-metadata,
.comment-author,
.comment-content,
.comment-author img {
  display: flex;
  align-items: center;
  margin-right: 10px;
  font-size: 1rem !important;
}

.comment::marker {
  content: '';
}

.comment-body {
  margin-bottom: 10px;
}

.et_pb_comments_0 {
  background-color: white; 
}

結果は以下のようになります。

Screen Shot 2020-11-16 at 1.53.59 PM
Screen Shot 2020-11-16 at 1.53.59 PM2298×650 170 KB

「Conitinue the discusson at..」や「Participants」が青や黄色になっている理由は、Divi を介して直接これらの要素にスタイルを適用してしまったためだと思われます。これらの色を変更したい場合は、Divi でのカスタムスタイル設定を削除してください。

Discourse と WordPress のコメントの競合

また、WordPress のコメント機能が有効なままになっているため、投稿の下部に別のコメント作成欄が表示されています。Discourse のコメントを使用したい場合は、これを無効にするのが良いでしょう。詳しい説明は以下のリンクをご覧ください。

「いいね！」 4
5

DiviのサポートでCSSの調整を行いました。これにより、Discourseへのコメントが適切にフォーマットされるようになりました（色は、どのCSS要素がどのテキストに対応しているかを示すためです）。
あなたのコメントから、すでにDiscourseからのコメントを表示している場合、WordPressサイトに投稿されたコメントをDiscourseに表示することはできないと理解しましたが、これで正しいでしょうか？

「いいね！」 1
6

素晴らしい、解決できてよかったですね。

完全に意味を把握できているか確信はありませんが、もし「古い WordPress のコメントを Discourse へインポートして、Discourse の投稿として表示させることができるか」という意味であれば、そのような自動化されたプロセスは存在しません。

そのようなインポート作業は、技術的な側面に精通した人が手動で行う必要があります。注意点として、これにはすべての WordPress のコメント投稿者が Discourse にユーザーアカウントを持っていることを確認するなどの作業が含まれます。不可能ではありませんが、カスタム作業が必要となります。

以下の手順をお勧めします：

  1. Discourse プラグインの「Comments」設定にある「Show Existing WP Comments」オプションを使用して、既存の WordPress コメントを表示し続けます。

  2. 上記でリンクした投稿の手順に従い、新しい WordPress コメントを無効にします。

  3. Discourse でのコメント機能を有効にします。

その結果、既存の WordPress コメントは WordPress 上で表示され、新しいコメントは Discourse で投稿可能になり、それらの新しいコメントも WordPress 上で表示されるようになります。

「いいね！」 2