2026年5月28日

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

カスタマイズ

はじめに

WordPressのコメントフォームは、デフォルトで一定のスタイルと機能を提供していますが、サイトのデザインや目的に合わせてカスタマイズしたい場合があります。この記事では、基本的な設定から高度なカスタマイズまで、さまざまな方法について解説します。

症状・背景

デザインの一貫性を保つためにコメントフォームもカスタマイズしたい
特定のフィールド（例：URLや役職）を追加または削除したい
コメントフォームのレイアウトや配置を変更したい
カスタムCSSやJavaScriptを使用して視覚的な効果を追加したい

手順・設定方法

ステップ1: テーマのfunctions.phpファイルにコードを追加

# WordPressテーマ内の「functions.php」ファイルを開きます。
nano theme_name/functions.php

# 以下のような関数を追加して、コメントフォームのフィールドやラベルをカスタマイズします。
function custom_comment_fields($fields) {
    $commenter = wp_get_current_commenter();
    $req      = get_option( 'require_name_email' );
    $aria_req = ( $req ? " aria-required='true'" : '' );

    $fields['author'] = '<p class="comment-form-author">' . '<label for="author">' .
        __( '名前' ) . '</label> ' .
        ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
        '" size="30"' . $aria_req . ' /></p>';
    $fields['email'] = '<p class="comment-form-email">' .
        '<label for="email">' . __( 'メールアドレス' ) . '</label> ' .
        ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) .
        '" size="30"' . $aria_req . '/></p>';
    $fields['url'] = '<p class="comment-form-url"><label for="url">' . __( 'ウェブサイト' ) . '</label>' .
        '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
        '" size="30" /></p>';
    return $fields;
}
add_filter('comment_form_default_fields', 'custom_comment_fields');

ステップ2: コメントフォームのCSSをカスタマイズ

# WordPressテーマ内の「style.css」ファイルを開きます。
nano theme_name/style.css

# 以下のようなCSSを追加して、コメントフォームのスタイルを変更します。
.comment-form-author input[type="text"],
.comment-form-email input[type="text"] {
    width: 100%;
    padding: 8px;
}

.comment-form-comment textarea {
    width: 100%;
    height: 200px;
}

ステップ3: カスタムフィールドを追加

# WordPressテーマ内の「functions.php」ファイルを開きます。
nano theme_name/functions.php

# 以下のような関数を追加して、カスタムフィールド（例：役職）を追加します。
function custom_fields($fields) {
    $commenter = wp_get_current_commenter();
    $req      = get_option( 'require_name_email' );
    $aria_req = ( $req ? " aria-required='true'" : '' );

    $fields['role'] = '<p class="comment-form-role"><label for="role">' . __( '役職' ) . '</label>' .
        '<input id="url" name="role" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
        '" size="30" /></p>';
    return $fields;
}
add_filter('comment_form_default_fields', 'custom_fields');

ステップ4: コメントフォームの表示位置を変更

# WordPressテーマ内の「functions.php」ファイルを開きます。
nano theme_name/functions.php

# 以下のような関数を追加して、コメントフォームの表示位置を変更します。例えば投稿ページの下部に移動させる場合：
function custom_comment_form($args) {
    $args['comment_field'] = '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>';
    return $args;
}
add_filter('comment_form', 'custom_comment_form');

注意事項

カスタマイズを行う前に必ずバックアップを取り、テスト環境で動作確認を行ってください。
テーマが更新された場合、カスタマイズした部分も上書きされてしまう可能性があります。テーマの更新後に再適用するか、子テーマを使用することをおすすめします。
安全なコーディングを心掛け、SQLインジェクションやXSSなどの攻撃からサイトを保護してください。
パフォーマンスに影響を与えないよう、不要なJavaScriptやCSSの追加は避けてください。

まとめ

1. 基本的なカスタマイズ: カスタムフィールドやラベルの変更

2. CSSによる視覚的な改善: コメントフォームのスタイルを調整

3. 高度な機能の追加: 特定のフィールドを追加または削除

4. セキュリティとパフォーマンス: 安全かつ効率的にカスタマイズするための注意点

5. 子テーマの使用: テーマの更新時にカスタマイズが上書きされないようにする

Post Views: 19