2026年5月20日

WordPressのコメントフォームをカスタマイズする方法

テーマ・デザイン

はじめに

WordPressのコメントフォームは comment_form() 関数で出力され、引数でフィールドの変更や追加ができます。不要なフィールドを削除したり、プレースホルダーを変更したり、デザインをテーマに合わせてカスタマイズできます。

症状・原因

コメントフォームのデザインをテーマに合わせたい
「ウェブサイト」フィールドを削除したい
プレースホルダーテキストを日本語にしたい
スパムコメントを減らしたい

解決手順

ステップ1：`comment_form()` の基本カスタマイズ

// comments.php または single.php
comment_form([
    'title_reply'          => 'コメントを投稿する',
    'title_reply_to'       => '%sへの返信',
    'cancel_reply_link'    => 'キャンセル',
    'label_submit'         => '投稿する',
    'comment_notes_before' => '<p class="comment-notes">メールアドレスは公開されません。</p>',
    'comment_notes_after'  => '',
    'class_submit'         => 'btn-primary',
    'class_form'           => 'comment-form',
]);

ステップ2：フィールドをカスタマイズする

// functions.php — コメントフォームのフィールドを変更
add_filter('comment_form_default_fields', function(array $fields): array {

    // 「ウェブサイト」フィールドを削除
    unset($fields['url']);

    // 「名前」フィールドをカスタマイズ
    $fields['author'] = sprintf(
        '<p class="comment-form-author">
            <label for="author">%s <span class="required">*</span></label>
            <input id="author" name="author" type="text" placeholder="お名前" value="%s" size="30" maxlength="245" required>
        </p>',
        esc_html__('お名前', 'my-theme'),
        esc_attr(isset($_COOKIE['comment_author_' . COOKIEHASH]) ? $_COOKIE['comment_author_' . COOKIEHASH] : '')
    );

    // 「メールアドレス」フィールドをカスタマイズ
    $fields['email'] = sprintf(
        '<p class="comment-form-email">
            <label for="email">%s <span class="required">*</span></label>
            <input id="email" name="email" type="email" placeholder="メールアドレス（公開されません）" value="%s" size="30" maxlength="100" required>
        </p>',
        esc_html__('メールアドレス', 'my-theme'),
        esc_attr(isset($_COOKIE['comment_author_email_' . COOKIEHASH]) ? $_COOKIE['comment_author_email_' . COOKIEHASH] : '')
    );

    return $fields;
});

// コメントテキストエリアをカスタマイズ
add_filter('comment_form_defaults', function(array $defaults): array {
    $defaults['comment_field'] = '<p class="comment-form-comment">
        <label for="comment">コメント <span class="required">*</span></label>
        <textarea id="comment" name="comment" cols="45" rows="6" placeholder="コメントを入力してください..." required></textarea>
    </p>';
    return $defaults;
});

ステップ3：CSSでフォームをスタイリングする

/* コメントフォーム */
.comment-form p {
    margin-bottom: 16px;
}

.comment-form label {
    display: block;
    font-weight: bold;
    font-size: 0.875rem;
    margin-bottom: 4px;
    color: var(--text-color, #1d2327);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #c3c4c7);
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--color-bg, #fff);
    color: var(--text-color, #1d2327);
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--color-primary, #2271b1);
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15);
}

.comment-form .required {
    color: var(--color-danger, #d63638);
}

/* 送信ボタン */
.comment-form .submit {
    background: var(--color-primary, #2271b1);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.comment-form .submit:hover {
    background: var(--color-primary-dark, #1a568a);
}

ステップ4：スパム対策を強化する

# Akismet でスパムをフィルタリング
wp plugin install akismet --activate
wp option set akismet_api_key YOUR_API_KEY

# ハニーポットフィールドでボット対策
# → 次のコードをfunctions.phpに追加

// functions.php — ハニーポット（ボット対策）
add_action('comment_form', function(): void {
    echo '<p style="display:none !important" aria-hidden="true">
        <label for="website2">このフィールドは入力しないでください</label>
        <input type="text" id="website2" name="website2" tabindex="-1" autocomplete="off">
    </p>';
});

add_filter('preprocess_comment', function(array $comment): array {
    if (!empty($_POST['website2'])) {
        wp_die('スパムとして検出されました。');
    }
    return $comment;
});

ステップ5：コメントの表示設定を変更する

管理画面での設定:
設定 → ディスカッション
  → 「コメントの手動承認を必須にする」をON（推奨）
  → 「コメント投稿者がすでに承認済みコメントを持っている場合...」をON
  → 「コメントモデレーション」でスパムワードを設定

注意事項

comment_form_default_fields フィルターは wp アクション実行後に登録してください
コメントフォームを非表示にする場合は、管理画面の「設定→ディスカッション」でコメントを無効にするか、comments_open() で条件分岐するのが正しい方法です
GDPR対応として、コメントフォームに個人情報取り扱いの同意チェックボックスが必要な場合があります

まとめ

comment_form_default_fields フィルターでフィールドを追加・削除・変更し、comment_form_defaults でテキストエリアをカスタマイズします。ハニーポットとAkismetを組み合わせることでスパムを大幅に削減できます。

Post Views: 13