WordPressのコメントでカスタムフィールドを自作で実装する方法を徹底解説(サンプルコード付き)

みなさんこんにちは！エンジニアの高澤です！

今回は、WordPressのコメントでカスタムフィールドを自作で実装する方法を徹底解説したいと思います。

コメントとは、WordPressにデフォルトで搭載している機能で、記事ページにコメントができる機能のことを言いますが、当記事ではこのコメントに独自のカスタムフィールドを追加して、ユーザーがコメント時に入力する項目を独自に追加することが可能となる実装方法を解説しております。

カスタムフィールドを独自に実装できるだけで幅広く色々なことが柔軟に実装できるので、ぜひ当記事をお仕事などでご活用いただけましたら幸いです。

コメントとは

コメントとは、記事（投稿）に対して読者が自由に意見や感想、質問などを書き込める仕組みのことを言います。このコメント機能はWordPressにデフォルトで搭載している機能になります。

例えば下図のようなイメージです。

上図のように、通常、投稿ページの下部にコメントの機能としてコメントフォームが表示され、読者は名前・メールアドレス・コメント内容を入力して投稿できます。

投稿されたコメントは、管理者が承認・返信できるようになっており、読者とのコミュニケーションやサイトの活性化に役立ちます。

WordPressでは、このコメント機能に対して通知機能など柔軟にカスタマイズできたり、プラグインなどを利用してスパム対策を導入するなど、さまざまなカスタマイズが可能です。

また、当記事で解説するように独自の入力項目（カスタムフィールド）を追加したり、CSSなどでデザインを調整したりすることで、サイトに合ったコメント機能を実装できます。

コメント機能について詳しく知りたい方、またテーマにおいて自作で実装する方法について以下の記事で徹底解説しておりますので、よろしければご活用ください。

カスタムフィールドとは

今回はコメントにカスタムフィールドを実装するという内容になるため、そもそもこのカスタムフィールドとはなんなのか？ついて事前に確認しておきましょう。

カスタムフィールドとは、投稿ページや固定ページ、ユーザー、コメントなどに独自のデータを追加する仕組みのことを言います。

例えば、WordPressでは通常、投稿ページや固定ページにタイトルや本文、カテゴリーなどあらかじめ決まったデータを入力したり設定することができますが、他にも独自にデータを追加して入力したり設定したりできるようにしたい場合があります。

今回はコメントのカスタムフィールドを実装しますが、例えばWordPressで商品比較サイトや飲食店紹介サイトなどを作っているとして、そのサイトの各商品ページや飲食店ページのコメントに対して評価機能（最大5つの星で評価する機能）をカスタムフィールドで実装したりすることが可能です。

ちなみに当記事で実装する内容のイメージとしては下図のような感じです。

まず実装前のデフォルトの状態だと、下図のように「コメント」「名前」「メール」「サイト」「データ保存チェックボックス」の4点になるかと思います。

今回の解説通りにカスタムフィールドを自作することによって、下図のように入力欄などを追加することが可能です。（ここでの例ではニックネームの入力欄を追加しております）

一見シンプルなテキストフィールドになりますが、応用が効くようにするために意図してテキストデータを保存できるように構成致しましたので、もしセレクトボックスにしたいなどがありましたらPHPコードをカスタマイズしていただければ可能ですので、よろしければお試しください。

もしカスタムフィールドについてより詳しく知りたい方は、以下の記事をご確認いただけましたら幸いです。

コメントのカスタムフィールド実装方法

それでは早速、コメントのカスタムフィールドの実装方法を解説いたします。

実装としては以下を行いたいと思います。

• コメントフォームにカスタムフィールドを追加
• コメント投稿時にカスタムフィールドを保存
• コメント表示時にカスタムフィールドを出力

そして、上記それぞれを実装しているソースコードが以下になります。以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
// コメントフォームにカスタムフィールド（ニックネーム）を追加
function add_custom_comment_field($fields) {
    $fields['nickname'] = '<p class="comment-form-nickname">
        <label for="nickname">ニックネーム</label>
        <input id="nickname" name="nickname" type="text" value="' . esc_attr( isset($_POST['nickname']) ? $_POST['nickname'] : '' ) . '" />
    </p>';
    return $fields;
}
add_filter('comment_form_default_fields', 'add_custom_comment_field');

// コメント投稿時にカスタムフィールドを保存
function save_custom_comment_field($comment_id) {
    if (isset($_POST['nickname'])) {
        $nickname = sanitize_text_field($_POST['nickname']);
        add_comment_meta($comment_id, 'nickname', $nickname);
    }
}
add_action('comment_post', 'save_custom_comment_field');

// コメント表示時にカスタムフィールドを出力（任意）
function display_custom_comment_field($comment_text, $comment) {
    $nickname = get_comment_meta($comment->comment_ID, 'nickname', true);
    if ($nickname) {
        $comment_text .= '<p class="comment-nickname"><strong>ニックネーム:</strong> ' . esc_html($nickname) . '</p>';
    }
    return $comment_text;
}
add_filter('comment_text', 'display_custom_comment_field', 10, 2);

上記コードは、WordPressのコメントフォームに「ニックネーム」フィールドを追加し、その値をコメントと一緒に保存・表示する機能を実装しています。

まず、comment_form_default_fieldsフックを使って入力欄を追加し、投稿時にはcomment_postフックで値を保存します。最後に、comment_textフックで保存されたニックネームをコメント欄に表示することで、ページの読者が入力したニックネームを確認できるようにしています。

ペーストが完了したら、ご自身のサイトの記事ページをご確認ください。

すると、元々は下図のようにデフォルトの項目として「コメント」「名前」「メール」「サイト」「データを保存するチェックボックス」の4つのみでしたが…

下図のように「ニックネーム」という項目名で独自のテキストを入力できるUIが追加されていることを確認できるかと思います。

試しにそれぞれの項目に文字を入力してください。そして、入力が完了したら、「コメントを送信」ボタンをクリックしてください。

すると下図のように、コメントの出力結果として入力したそれぞれの文字データが表示されていることと思います。

これでコメントのカスタムフィールドの実装は完了です。お疲れ様でした！

使用するフックについて

実装ができたら、次は使用するフックについてもまとめておきたいと思います。

コメントのカスタムフィールドを実装する際に使用するフックは基本的に以下のフックになるかと思います。先ほどのコードでは以下のフックを使用いたしました。

• comment_form_default_fieldsフック
• comment_postフック
• comment_textフック

どれもコメントのカスタムフィールドを扱う際に重要なフックになりますので、しっかりここでご確認いただき、理解しておきましょう。

それでは、それぞれ解説いたします。

comment_form_default_fieldsフック

comment_form_default_fieldsフックは、WordPressのコメントフォームのデフォルト入力項目（名前、メール、URLなど）を変更・追加するために使います。

配列形式で渡される各入力欄を編集・追加することで、カスタムフィールドの挿入が可能です。

comment_postフック

comment_postフックは、コメントがデータベースに保存された直後に発火します。

コメントIDが渡されるため、add_comment_meta()関数などを使ってコメントに付随するメタ情報（カスタムフィールド）を保存するのに適しています。

comment_textフック

comment_textフックは、コメント本文が画面に出力される前に呼び出されます。

このフックを使うことで、保存されたカスタムフィールドの情報をコメント本文に付け加えて表示することが可能になります。

使用する関数について

コメントのカスタムフィールド周りの処理には、コメントのカスタムフィールドを扱うための専用のテンプレートタグ（WordPressで用意された関数）が用意されております。

その主なテンプレートタグが以下の2点になります。
いずれもコメントのカスタムフィールドを処理する際は必須と言っても過言ではないくらい重要なテンプレートタグになりますので、ここでしっかりとおさえておきましょう。

• add_comment_meta()関数
• get_comment_meta()関数

それぞれ解説いたします。

add_comment_meta()関数

add_comment_meta()関数は、コメントに対してカスタムフィールドのデータ（追加情報）を保存する関数です。

add_comment_meta( $comment_id, $meta_key, $meta_value ) の形式で使用し、指定したコメントIDにキーと値のペアでデータを追加します。

get_comment_meta()関数

get_comment_meta()関数は、特定のコメントに紐づけられたカスタムフィールドのデータを取得する関数です。

get_comment_meta( $comment_id, $meta_key, true ) のように使用し、保存されたカスタムフィールドのデータを取得して表示する場合などに利用できます。

まとめ

今回は、WordPressのコメント機能にカスタムフィールドを自作で追加する方法について解説しました

コメントに独自の入力項目を加えることで、より柔軟で多様な情報収集や表示が可能になります。

特に飲食店のページや商品ページなどを作る場合は、口コミやレビューなどで必要になるであろう評価機能（最大5つの星で評価する機能）をカスタムフィールドで実装したりすることなどが可能になります。

カスタマイズ性の高い実装が求められる場面でも活用できる内容ですので、ぜひ今後の制作やお仕事に役立てていただければ幸いです。