2026年5月20日

WordPressのコメントテンプレートをカスタマイズする方法

テーマ・デザイン

はじめに

WordPressのコメント機能は comments.php テンプレートと wp_list_comments()・comment_form() 関数で制御します。コールバック関数を使うことで、コメントのHTMLを完全にカスタマイズできます。

症状・原因

コメント一覧のデザインを変更したい
コメントフォームのフィールドをカスタマイズしたい
返信コメントをインデントして表示したい
アバター画像のサイズを変更したい

解決手順

ステップ1：comments.phpの基本構造

// comments.php
<?php if (post_password_required()) {
    echo '<p>パスワードで保護された投稿のコメントは表示できません。</p>';
    return;
} ?>

<div id="comments" class="comments-area">

    <?php if (have_comments()) : ?>
        <h2 class="comments-title">
            <?php printf('%d件のコメント', get_comments_number()); ?>
        </h2>

        <ol class="comment-list">
            <?php
            wp_list_comments([
                'callback'    => 'mytheme_comment',
                'style'       => 'ol',
                'short_ping'  => true,
                'avatar_size' => 56,
            ]);
            ?>
        </ol>

        <?php the_comments_pagination([
            'prev_text' => '&laquo; 古いコメント',
            'next_text' => '新しいコメント &raquo;',
        ]); ?>

    <?php endif; ?>

    <?php comment_form(mytheme_comment_form_args()); ?>

</div>

ステップ2：コメントのHTMLをカスタマイズする

// functions.php
function mytheme_comment(WP_Comment $comment, array $args, int $depth): void {
    $tag = 'li'; // コメントのタグ
    ?>
    <<?php echo $tag; ?> id="comment-<?php comment_ID(); ?>" <?php comment_class('comment-item', $comment); ?>>

        <article class="comment-body">

            <!-- アバター -->
            <div class="comment-avatar">
                <?php echo get_avatar($comment, $args['avatar_size'] ?? 56, '', '', ['class' => 'avatar']); ?>
            </div>

            <!-- メタ情報 -->
            <header class="comment-meta">
                <div class="comment-author">
                    <?php
                    $author_link = get_comment_author_link($comment);
                    echo '<span class="fn">' . $author_link . '</span>';
                    ?>
                    <?php if ($comment->user_id === get_the_author_meta('ID')) : ?>
                        <span class="post-author-badge">投稿者</span>
                    <?php endif; ?>
                </div>

                <time class="comment-date" datetime="<?php comment_time('c'); ?>">
                    <?php comment_date('Y年n月j日'); ?> <?php comment_time('H:i'); ?>
                </time>

                <?php if ('0' === $comment->comment_approved) : ?>
                    <p class="comment-awaiting-moderation">承認待ちです。</p>
                <?php endif; ?>
            </header>

            <!-- コメント本文 -->
            <div class="comment-content">
                <?php comment_text(); ?>
            </div>

            <!-- 返信リンク -->
            <footer class="comment-footer">
                <?php
                comment_reply_link(array_merge($args, [
                    'add_below' => 'comment',
                    'depth'     => $depth,
                    'max_depth' => $args['max_depth'] ?? 5,
                    'before'    => '<div class="reply">',
                    'after'     => '</div>',
                ]));
                ?>
            </footer>

        </article>
    <?php
    // </li> は wp_list_comments が自動で閉じる
}

ステップ3：コメントフォームをカスタマイズする

// functions.php
function mytheme_comment_form_args(): array {
    return [
        'title_reply'         => 'コメントを残す',
        'title_reply_to'      => '%s への返信',
        'cancel_reply_link'   => 'キャンセル',
        'label_submit'        => 'コメントを送信',
        'comment_notes_after' => '',
        'fields' => [
            'author' => sprintf(
                '<p class="comment-form-author"><label for="author">%s <span class="required">*</span></label>
                 <input id="author" name="author" type="text" size="30" maxlength="245" required /></p>',
                '名前'
            ),
            'email' => sprintf(
                '<p class="comment-form-email"><label for="email">%s <span class="required">*</span></label>
                 <input id="email" name="email" type="email" size="30" maxlength="100" required /></p>',
                'メールアドレス（公開されません）'
            ),
            'url' => '', // URLフィールドを削除
        ],
        'comment_field' => sprintf(
            '<p class="comment-form-comment"><label for="comment">%s <span class="required">*</span></label>
             <textarea id="comment" name="comment" cols="45" rows="6" required></textarea></p>',
            'コメント'
        ),
    ];
}

ステップ4：コメント数のカスタマイズ

// functions.php: コメントなし時のテキスト変更
function mytheme_comments_number(string $output, int $number): string {
    if ($number === 0) return 'コメントなし';
    if ($number === 1) return '1件のコメント';
    return sprintf('%d件のコメント', $number);
}
add_filter('comments_number', 'mytheme_comments_number', 10, 2);

// ページごとのコメント件数を設定
function mytheme_comments_per_page(): void {
    // 管理画面の設定を上書き
}

注意事項

wp_list_comments のコールバック関数では、

タグを出力しないでください。WordPressが自動で追加します

コメントフォームのフィールドをカスタマイズする場合、name 属性は変更しないでください（author・email・url は固定）
スパム対策にはAkismetプラグインの導入を推奨します。コメントフォームにhoneypotフィールドを追加するのも有効です

まとめ

wp_list_comments(['callback' => '関数名']) でコメントの出力HTMLを完全制御し、comment_form(args配列) でフォームのフィールド・ラベル・ボタンをカスタマイズします。URLフィールドの削除・投稿者バッジ・返信機能など、UXに合わせた実装が可能です。

Post Views: 17