コメント欄のコメントリストと入力フォームを逆に表示する方法

はじめに

以下の質問に回答します。

コメントエリア内のコメントリストとコメントフォームの順序を変更したい

お世話になっております。 コメントエリア内のコメントリストとコメントフォームの順序を添付図のとおり、変更したいと考えております。 Cocoonの親テーマの「comments.php」を触ってみたのですが、うまくいきませんでした。 ご存知の方...

wp-cocoon.com

完成イメージ

実装方法

add_filter('cocoon_part__tmp/single-contents', function ($content) {
  // コメント入力フォームを取得
  preg_match('/<aside class="comment-form-wrap">.*?<\/aside>/s', $content, $matches);
  $comment_form_aside = $matches[0] ?? '';

  if (!$comment_form_aside) {
    return $content;
  }

  // 元のコメント入力フォームを削除
  $content = str_replace($comment_form_aside, '', $content);

  // 見出しの直後に挿入
  return preg_replace(
    '/(<h2 id="comments" class="comment-title">.*?<\/h2>)/s',
    '$1' . "\n" . $comment_form_aside,
    $content
  );
});

jQuery(function ($) {
  $('.comment-title').after($('.comment-form-wrap'));
});

CSSで実装する場合

以下のコードをstyle.cssに追加します。

.comment-area {
  display: flex;
  flex-direction: column-reverse;
}

この方法は、表示順を逆転させるだけなので、HTML構造自体は変わりません。
そのため、図1に示すように、見出しの順序も逆になり、例えば「H3 コメントをどうぞ」が「H2 コメント」よりも上に表示されるようになります。

さいごに

今回紹介した方法を使えば、コメント入力フォームをリストより上に移動でき、ユーザーの入力促進につなげることができます。
PHPでの実現が最も確実ですが、簡易的に変更したい場合はJavaScriptやCSSでも対応可能です。