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

@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; 
}

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

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

Discourse と WordPress のコメントの競合

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

「いいね!」 4