WordPress(디바이 테마)의 Discourse 댓글 섹션 포맷팅

Hey @newspring, 확인해 보니 두 가지 문제가 있습니다.

스타일링

먼저, 위에서 제안했듯이 Divi 테마는 자체 커스텀 댓글 요소를 사용하고 있으며, 해당 요소에만 스타일을 제공하고 있습니다. 이로 인해 Discourse가 사용하는 표준 댓글 요소에는 스타일이 적용되지 않습니다. 또한 Divi는 자체 커스텀 댓글 요소를 찾게 되어 표준 댓글 요소에 스타일을 적용할 수 없습니다.

결국, 기본적으로 Divi 테마와 함께 사용할 수 있는 것은 Divi 댓글 블록뿐입니다. Discourse의 댓글 블록이나 기타 비-Divi 댓글 블록을 사용하는 경우 직접 스타일을 적용해야 합니다. Twenty Nineteen과 같은 표준 WordPress 테마를 적용해 보시면 제가 말씀드린 내용을 이해하실 수 있습니다. 해당 테마에서 제공되는 CSS에 의해 Discourse 댓글이 스타일링되어 정상적으로 보입니다.

하지만 걱정 마세요! 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 댓글을 사용하려는 경우 이를 비활성화하는 것이 좋습니다. 아래에서 이에 대한 더 자세한 설명을 확인하실 수 있습니다.