コメント欄をアコーディオンで折りたたむ方法（投稿ページ限定）

この記事では、WordPress の投稿ページにだけ「コメント欄をアコーディオン（折りたたみ式）」で表示する方法を紹介します。固定ページやお知らせ、関連記事、カテゴリー一覧などには一切影響しません。

1 実装のポイント

• コメント欄全体を #comments で囲んでいるテーマが多いため、JavaScriptでそのブロックを開閉制御します。
• 投稿ページかどうかを is_single() で判定し、他ページには読み込ませないようにします。
• CSSとJSはシンプルなフェードアニメ付き。

2 functions.php にコードを追加

注意： 必ず子テーマの functions.php に追加してください。親テーマに直接追加するとアップデートで消える可能性があります。

// -------------------------------------------
// コメント欄アコーディオン（投稿ページ限定・jQuery版）
// -------------------------------------------
add_action('wp_footer', function() {
    if (!is_single()) return; // 投稿ページだけ

    ?>
    <script>
    jQuery(document).ready(function($){
      const commentArea = $('#comments');
      if (commentArea.length) {
        commentArea.hide(); // 初期は非表示

        const toggleBtn = $('<button id="comment-toggle-btn">💬 コメントを表示する</button>');
        commentArea.before(toggleBtn);

        toggleBtn.on('click', function(){
          commentArea.slideToggle(300);

          // アニメーション完了後に状態を確認してテキスト変更
          commentArea.promise().done(function() {
            const isVisible = commentArea.is(':visible');
            toggleBtn.text(isVisible ? 'コメントを隠す' : 'コメントを表示する');
          });
        });
      }
    });
    </script>
    <?php
});

3 汎用CSS

/* ---------------------------------------------------
 * コメント欄アコーディオン用スタイル
 * --------------------------------------------------- */

#comment-toggle-btn {                  /** 開閉ボタンの基本デザイン **/
  display: inline-block;               /** インラインボタン **/
  margin: 20px 0;                      /** 上下の余白 **/
  padding: 10px 20px;                  /** ボタン内の余白 **/
  background-color: #0073aa;           /** WordPressカラー **/
  color: #fff;                         /** 文字色白 **/
  border: none;                        /** 枠線なし **/
  border-radius: 5px;                  /** 角丸 **/
  cursor: pointer;                     /** カーソルをポインタに **/
  font-size: 15px;                     /** 文字サイズ **/
  transition: background-color 0.3s;   /** ホバー時アニメーション **/
}

#comment-toggle-btn:hover {            /** ホバー時の色変化 **/
  background-color: #005f8d;
}

#comments {                            /** コメント全体のブロック **/
  transition: all 0.4s ease;           /** スムーズな表示アニメーション **/
}
    

4 完成イメージ

5 代用プラグイン

プラグインで同様の機能を実現する場合は、次のようなものも検討できます。

• Accordion Blocks（ブロックエディタ用アコーディオン作成）
• Collapse-O-Matic（ショートコード式アコーディオン）

ただし、これらは固定ページや他投稿にも影響する場合があるため、テーマ側で上記のようにコードで制御するのが確実です。

6 まとめ

この実装により、コメント欄をアコーディオンで折りたたむことで、ページの見た目をスッキリさせられます。投稿ページ限定で動作するため、他のページには影響しません。軽量でシンプルなカスタマイズです。