「WordPress」投稿されたコメントを折りたたんで表示したい！comment.php

comment.php ファイルの修正

当サイトは記事ページについては現状テーマ「Cocoon」で運用中。

親テーマ内の Cocoon: comments.php (lib/comments.php)の <div class=”comment-content”> ～</div>内を変更。

<?php
$comment_content = get_comment_text();
$comment_id = get_comment_ID();

echo '<div class="comment-content">';
if (mb_strlen($comment_content) > 100) {
$short_content = mb_substr($comment_content, 0, 100) . '...';
echo '<div class="short-content-' . $comment_id . '">' . wpautop(esc_html($short_content)) . '</div>';
echo '<a href="#" class="read-more-link" data-comment-id="' . $comment_id . '">[全文を表示する]</a>';
echo '<div class="full-content-' . $comment_id . ' full-content" style="display: none;">' . wpautop(esc_html($comment_content)) . '</div>';
} else {
echo '<div class="full-content-' . $comment_id . ' full-content">' . wpautop(esc_html($comment_content)) . '</div>';
}
echo '</div>';
?>

custom-comment.js ファイルを作成

親テーマ内の/js/へ。フォルダに、custom-comment.js という名前のファイルを作成し、そこに以下の JavaScript コードを追加します。

document.addEventListener("DOMContentLoaded", function() {
var readMoreLinks = document.querySelectorAll('.read-more-link');

readMoreLinks.forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
var commentID = this.getAttribute('data-comment-id');
var fullContent = document.querySelector('.full-content-' + commentID);
fullContent.style.display = 'block';
this.style.display = 'none';
});
});
});

functions.php ファイル内に JavaScript を追加

テーマのフォルダ内にある functions.php ファイルを開き、以下のコードを追加

function custom_comment_script() {
wp_enqueue_script('custom-comment-script', get_template_directory_uri() . '/js/custom-comment.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'custom_comment_script');

上記のコードでは、/js/custom-comment.js の部分に JavaScript ファイルのパスを指定しています。このファイルを作成してスクリプトを配置します。

結果

上記の修正により、コメントが100文字を超える場合、最初に短縮表示され、それに続いて「全文を表示する」リンクが表示されます。

リンクをクリックすると、コメントの全文がそのままの場所で展開されるようになりました。

なお、こちらのカスタマイズは当環境にて検証済みですが、コメント内要素に追加されるプラグイン（wp ulikeやcommnet image）を使用している場合は別途カスタマイズが必要となります。