コメント欄をカスタマイズする方法

WordPressのコメント欄は、デフォルト設定のままでも十分に機能しますが、メールアドレスやサイトなどの入力が必要なため、コメント投稿を躊躇させることがあります。この記事では、ブログを読んだ人が気軽にコメントできるようにするためのカスタマイズ方法を紹介します。

WordPressのコメント機能について

WordPressのコメント機能は、ブログやウェブサイトの訪問者との対話を促進し、コミュニティを形成するための強力なツールです。このコメントセクションは、読者が意見や質問を投稿できる場を提供するだけでなく、SEO（検索エンジン最適化）にも多くの利点があります。

SEOの利点

• コンテンツの充実
  • コメントは追加のコンテンツとして検索エンジンに認識されます。質の高いコメントが多く投稿されると、ページ全体の情報量が増え、検索エンジンでの評価が向上する可能性があります。
• キーワードの自然な追加
  • 訪問者がコメント内で使う言葉やフレーズは、記事内に含まれていない新しいキーワードを自然に追加することになります。これにより、検索クエリに対する露出が広がります。
• エンゲージメントの向上
  • アクティブなコメントセクションは、訪問者が長時間サイトに滞在することを促します。滞在時間が長いことは、検索エンジンにとってポジティブなシグナルとなり、ランキング向上につながる可能性があります。

使い勝手の向上

• ユーザーエンゲージメントの促進:
  • コメントセクションは、訪問者が記事やコンテンツに対してフィードバックを提供する場です。これにより、読者のエンゲージメントが高まり、リピーターが増える可能性があります。
• コミュニティ形成:
  • 記事に対するコメントのやり取りは、サイト内にコミュニティを形成し、訪問者同士が交流する場を提供します。これにより、サイトの価値が高まり、ユーザーベースが強化されます。
• フィードバックの取得:
  • 訪問者のコメントを通じて、コンテンツの改善点や新しいアイデアを得ることができます。これにより、サイト運営者は読者のニーズや関心をより深く理解し、質の高いコンテンツを提供することが可能になります。

カスタマイズの重要性

コメントセクションをカスタマイズすることで、SEO効果を最大化し、使い勝手を向上させることができます。たとえば、コメント欄のデザインや配置を工夫することで、訪問者がコメントを投稿しやすくなり、エンゲージメントが高まります。また、不要なフィールドを非表示にすることで、ユーザーの利便性を向上させることができます。

カスタマイズ方法

この記事では、WordPressのコメント欄をカスタマイズする方法について説明します。以下の変更を行います

1. コメント欄のタイトルを変更
2. 「メールアドレスが公開されることはありません。」を非表示
3. メールフォームとサイトフォームを非表示
4. フィールドの並び順を名前、コメントに変更
5. タイトルにFont Awesomeのアイコンを追加

まず、完成形のコードを示します。その後、各手順を詳しく説明します。

// コメントフォームのデフォルト設定をカスタマイズ
function custom_comment_form_defaults($defaults) {
    // メールアドレスのメッセージを削除
    $defaults['comment_notes_before'] = '';

    // コメントフォームのタイトル変更（Font Awesomeのアイコンを追加）
    $defaults['title_reply'] = '<i class="fas fa-comments"></i> コメントお待ちしています';

    // 送信ボタンのラベル変更
    $defaults['label_submit'] = 'コメントを送信';

    return $defaults;
}
add_filter('comment_form_defaults', 'custom_comment_form_defaults');

// コメントフォームのフィールド順序をカスタマイズ
function custom_comment_form_fields($fields) {
    // 名前フィールドを保持
    $author = $fields['author'];

    // フィールドからメールとサイトを削除
    unset($fields['email']);
    unset($fields['url']);
    
    // 新しい順番にフィールドを追加（名前とコメント）
    $fields = array(
        'author' => $author,
        'comment' => $fields['comment'],
    );

    return $fields;
}
add_filter('comment_form_fields', 'custom_comment_form_fields');

この方法はfunctions.phpを編集します。サイトの機能に大きく影響するため、作業前に必ずバックアップを取り、子テーマを使用して変更を加えることを強く推奨します。

それでは、手順の説明です。

// コメントフォームのデフォルト設定をカスタマイズ
function custom_comment_form_defaults($defaults) {
    // コメントフォームのタイトル変更
    $defaults['title_reply'] = 'コメントお待ちしています';

    return $defaults;
}
add_filter('comment_form_defaults', 'custom_comment_form_defaults');

// コメントフォームのデフォルト設定をカスタマイズ
function custom_comment_form_defaults($defaults) {
    // メールアドレスのメッセージを削除
    $defaults['comment_notes_before'] = '';

    // コメントフォームのタイトル変更
    $defaults['title_reply'] = 'コメントお待ちしています';

    return $defaults;
}
add_filter('comment_form_defaults', 'custom_comment_form_defaults');

// コメントフォームのフィールド順序をカスタマイズ
function custom_comment_form_fields($fields) {
    // 名前フィールドを保持
    $author = $fields['author'];

    // フィールドからメールとサイトを削除
    unset($fields['email']);
    unset($fields['url']);

    // 新しい順番にフィールドを追加（名前とコメント）
    $fields = array(
        'author' => $author,
        'comment' => $fields['comment'],
    );

    return $fields;
}
add_filter('comment_form_fields', 'custom_comment_form_fields');

// Font Awesomeを読み込む
function load_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('wp_enqueue_scripts', 'load_font_awesome');

// コメントフォームのデフォルト設定をカスタマイズ
function custom_comment_form_defaults($defaults) {
    // メールアドレスのメッセージを削除
    $defaults['comment_notes_before'] = '';

    // コメントフォームのタイトル変更（Font Awesomeのアイコンを追加）
    $defaults['title_reply'] = '<i class="fas fa-comments"></i>
    コメントお待ちしています';

    return $defaults;
}
add_filter('comment_form_defaults', 'custom_comment_form_defaults');

以上がコメント欄のカスタマイズ方法になります。
ここまでの修正でコメント欄はこんな感じになっています。

+α　見た目をカスタマイズ

最後にCSSで見た目を調整します。

/* 項目すべてに必須を指定 */
#commentform label::before {
  position: relative;
  content: "必須";
  font-size: 13px;
  background: #e96c46;
  color: #f4f3f9;
  padding: 2px 6px;
  border-radius: 3px;
  bottom: 2px;
  margin-right: 5px;
  font-weight: 500;
}

/* サイトだけ任意に変更 */
#commentform .comment-form-url label::before {
  content: "任意";
  background: #f4f3f9;
}

/* デフォルトの※マークを非表示 */
.required{
  display:none;
}

/* コメント送信ボタンマウスホバー時 */
#commentform .submit {
  background: #79a6d9;
}
#commentform .submit:hover {
  background: #e96c46;
}

.comment-body {
	border-bottom: 1px dashed #bbb;
	padding-bottom: 15px;
	margin-bottom: 15px;
}

完成したコメント欄がこちらになります。
コメント一覧にも少し手を加えて、各コメント毎に点線を入れています。

デザインについては、お好みで調整してください。
ご質問などあれば、新しくなったコメントにどうぞ。

まとめ

この記事では、WordPressのコメント欄をカスタマイズする方法について説明しました。各手順を実行することで、コメント欄のタイトル、フィールドの表示・非表示、フィールドの並び順、そしてタイトルにFont Awesomeのアイコンを追加することができます。