2020.03.30

WordPressのコメント欄にカスタムフィールド項目を追加する方法

こんにちは、webエンジニアのゾノ( @ozonosho )です。

さて、今回は記事ではWordPressのコメント欄にカスタムフィールド項目を追加する方法を紹介したいと思います。

先に実装例を見せると、たとえば僕の運営するサイト『未来地図』では、下図のようにコメント欄に入力項目や選択項目(セレクトボックス)を追加しています。

WordPressでは投稿系(記事や固定ページなど)のデータ管理方法とコメント系のデータ管理方法が異なるため、カスタムフィールドを追加するのに若干苦労しました。

WordPressのコメント欄にカスタムフィールド項目を追加する方法

実装手順は下記の3ステップになります。

  1. コメント入力欄に入力項目や選択項目を追加する
  2. 追加した項目をカスタムフィールドとしてコメント投稿時に保存する
  3. コメント表示テンプレートにカスタムフィールドを出力する

それぞれ見ていきましょう。

①コメント入力欄に入力項目や選択項目を追加する

まずは、先ほど紹介したコメント欄イメージのうち「ニックネーム(入力項目)」「あなたについて(選択項目)」の2つを追加するコードをfunctions.phpに書いてみます。

アクションフック「comment_form_field_comment」を利用すると、コメント入力欄を表示するタイミングで処理や情報を加えることができます。

入力欄や選択欄といった情報は、通常のHTMLでinput項目やselect項目を追加してあげるだけです。name属性の値をカスタムフィールドのキーとするので忘れずに設定してあげてください。

今回はデフォルトのコメント入力欄の前に「ニックネーム(key:comment-nickname)」「あなたについて(key:comment-role)」の2つの項目を追加しました。

②追加した項目をカスタムフィールドとしてコメント投稿時に保存する

コメント入力欄に項目を追加できたら、次は、追加した項目をコメント投稿時に保存する処理を実装していきます。

WordPressにはコメント用のメタ情報(カスタムフィールド)を扱うための関数があるので、それらを使いましょう。下記のようなコードをfunctions.phpに追加してください。

先ほどコメント入力欄を作るときに設定した各項目のname属性の値をkeyにして、カスタムフィールドの値を保存・更新しています。

アクションフック「comment_post」「edit_comment」を利用するとコメントの投稿時・編集時に処理を実行できるので、コメントの更新にあわせてこの処理を走らせてあげればOKです。

③コメント表示テンプレートにカスタムフィールドを出力する

コメント入力欄への項目追加と、追加した項目の保存までが完成したので、最後は保存した項目の値を出力してあげましょう。

まずは、WordPressのコメント表示用関数「wp_list_comments」を利用して、各コメントの表示テンプレートを自作します。下記のようなコードをfunctions.phpに追加してください。

項目やHTML構造などは自由に変えて利用してください。

表示用の自作テンプレートができたら、最後に「comments.php」内で関数「wp_list_comments」を利用してこのテンプレートを呼び出してあげればOKです。

関数「wp_list_comments」を利用してコメント一覧の表示テンプレートを変える方法は、こちらの記事『WordPressでコメント一覧の表示テンプレートを自作した内容に変更する方法』で紹介しているので、ぜひ参考にしてみてください。

おわりに

以上、今回の記事ではWordPressのコメント欄にカスタムフィールド項目を追加する方法を紹介させていただきました。

当サイトではWordpressのカスタマイズ制作依頼を請け負っています。運営中のサイトで何かお困りのことがある方は、下記の記事を参照のうえ気軽にご相談ください。

どんな機能・要望でもOK!『Wordpressのカスタマイズ制作』はじめました。

こんにちは、webエンジニアのゾノ( @ozonosho )です。 このたびWordpressのカスタマイズ制作をはじめました。......

→この記事を読む
チャレンジを応援する無料オンラインコミュニティ運営中!

生きづらさを抱える人のチャレンジを応援する無料オンラインコミュニティ『Cree』をスタートしました。ただいま参加者100名突破!お互いの目標を共有したり、就労・就職のサポートするサービスを無料で提供しています。

オンラインコミュニティの詳細はこちら

ゾノについて

お仕事のご相談はこちら