WordPressのコメント欄にオリジナルの入力欄を追加する方法！管理画面への追加まで(プラグインなし)

2021年1月28日WordPressカスタマイズ・基礎知識

コメントフォーム オリジナル 入力項目 追加 方法 解説

WordPressのコメント欄に、新しいコメントメタ（コメントのカスタムフィールド）を作ってオリジナルの入力欄を追加し、自由に入力＆送信してもらって保存する方法を紹介します。

レビュー評価を★で保存したり、相手の年齢や職業などのプロフィールを教えてもらったり、ユーザー属性を保存したり…使い方は自由自在です。

コメントフォームに入力欄を追加

追加できる入力欄は、POST送信できるものならなんでもOKです。

通常のフォーム項目、text,textarea,checkbox,radio,select…などなどなでもOK。今回はtextとradioの方法のみ紹介します。

functions.phpでコメントフォーム表示のフックを使い、入力項目を追加します。

//コメントフォームにオリジナルの入力項目を追加
function add_custom_comment_field($defaults) {
    if (is_post_type_archive('post') || get_post_type() === 'post' || strstr($url,'post')==true){
      //投稿タイプがpostだったら
  $add_content = '';
  //入力項目を追加する
  $add_content .= '
<div class="post-review">
  <p><label>職業<input type="text" name="post-review-1" id="post-review-1"></label></p>
  <label>感想</label>
    <div class="post-review-2">
    　<input type="radio" name="post-review-2" id="post-review2-1" value="2">
    <label for="post-review2-1" class="review-2-answer"><span class="answer-icon"><i class="fas fa-grin-squint"></i></span><span>参考になる</span></label>
    　<input type="radio" name="post-review-2" id="post-review2-2" value="1">
    <label for="post-review2-2" class="review-2-answer"><span class="answer-icon"><i class="fas fa-smile"></i></span><span>まあ参考になる</span></label>
    　<input type="radio" name="post-review-2" id="post-review2-4" value="-1">
    <label for="post-review2-4" class="review-2-answer"><span class="answer-icon"><i class="fas fa-frown-open"></i></span><span>少し参考になる</span></label>
    　<input type="radio" name="post-review-2" id="post-review2-5" value="-2">
    <label for="post-review2-5" class="review-2-answer"><span class="answer-icon"><i class="fas fa-dizzy"></i></span><span>参考にならない</span></label>
    <input type="radio" name="post-review-2" id="post-review2-6" class="no-answer" value="">
    <label for="post-review2-6" class="no-answer"><span>未回答</span></label>
    </div>
  </div>
  ';
  return $add_content . $defaults;
}else{
  return $defaults;
}
}
add_action('comment_form_field_comment', 'add_custom_comment_field' );

$add_content = ' ここにHTMLフォームコード '; という仕組みです。

先に非公開ページなどでHTMLコードを作ってCSSも作成し、見栄えを確認してからHTMLコードをこの中に入れるのが良いでしょう。

フォーム部分のHTMLを自分のサイトに合わせて作成したいけど、普段フォームはContactForm7で作っていてHTMLは書けない…という方もいるでしょう。

その場合は、ContactForm7でいつものようにコメント欄に追加したいフォーム部分を作って、そのとき入力した部分全体を<div class="post-review">～</div>で囲っておきます。

※必須項目にはせずシンプルにつくります。実際にはContactForm7のフォームとしては使いません。

非表示ページなどでそのフォームを表示し、Chromeのデベロッパーツールで要素を調査します。

フォームを選択してElementsでHTMLコードを表示し、自分が追加した全体を囲っている<div class="post-review">を見つけてすべてのフォーム項目を囲っていることを確認したら、<div>の上で右クリックしてCopyします。

<form～からコピーしてしまわないように注意しましょう！！<div style="display:hidden"></div>の後に<div class="post-review">があるはずです。その中身のHTMLのみ使います。

Copy項目の2番目にあるCopy Elementを選択したら、テキストエディタなどにペーストしてみましょう。

そうすると、ContactForm7で出力してくれたフォームのHTMLが取得できます。

無駄なHTMLコードも多いですが、普段からContactForm7を使っていてCSSもそちらで設定している方は、コンタクトフォームと同じようなデザインのコメントフォームが作れます。

$defaultsが通常の入力欄の出力です。

通常の入力欄の後に項目を追加したい場合は、順番を入れ替えてください。

return $add_content . $defaults; →　return $defaults . $add_content;

前後に挟みたい場合は、$add_content_2 とかを作って$add_contentの後に同じ要に並べ、

return $add_content . $defaults . $add_content_2;

にすればOKですね。

追加したフォーム項目のCSS

フォームのCSSは別にここで紹介する必要もないとは思いますが、一応置いときます。

/* コメントフォーム */
h3.comment-reply-title{
	margin-bottom:.1em;
}
input[name=post-review-2]{
	display:none;
}
div.post-review-2{
	font-size:0;
}
label.review-2-answer{
	display:inline-block;
	padding:4px 10px 4px 0px;
	font-size:14px;
	margin-right:5px;
}
label.no-answer{
	display:none;
}
label.review-2-answer span{
	display:table-cell;
	vertical-align:middle;
	padding-left:3px;
}
span.answer-icon{
	display:table-cell;
	font-size:1.4em;
}
input[name=post-review-2]:checked+label.review-2-answer{
	color:#ff6798;
}

コメントのカスタムフィールドを保存する

フォームが送信されただけでは、コメント情報に値が保存されません。

コメントが投稿されたときと、編集されたときに保存するように設定します。

functions.php
//カスタムフィールドの値をコメントに追加して保存
function save_custom_comment_field($comment_id) {
  if(!$comment = get_comment($comment_id)) return false;
  //post-review-1の値の保存
  $custom_key_1 = 'post-review-1';
  $review_1 = esc_attr($_POST[$custom_key_1]);
  if('' == get_comment_meta($comment_id, $custom_key_1)) {
    add_comment_meta($comment_id, $custom_key_1, $review_1, true);
  } else if($review_1 != get_comment_meta( $comment_id, $custom_key_1)) {
    update_comment_meta($comment_id, $custom_key_1, $review_1);
  } else if('' == $review_1) {
    delete_comment_meta($comment_id, $custom_key_1);
  }
  //post-review-2の値の保存
  $custom_key_2 = 'post-review-2';
  $review_2 = esc_attr($_POST[$custom_key_2]);
  if('' == get_comment_meta($comment_id, $custom_key_2)) {
    add_comment_meta($comment_id, $custom_key_2, $review_2, true);
  } else if($review_2 != get_comment_meta( $comment_id, $custom_key_2)) {
    update_comment_meta($comment_id, $custom_key_2, $review_2);
  } else if('' == $review_2) {
    delete_comment_meta($comment_id, $custom_key_2);
  }
//
  return false;
}
add_action('comment_post', 'save_custom_comment_field');
add_action('edit_comment', 'save_custom_comment_field');

解説）

  //post-review-2の値の保存
  $custom_key_2 = '★post-review-2';
  ☆$review_2 = esc_attr($_POST[$custom_key_2]);
  if('' == get_comment_meta($comment_id, $custom_key_2)) {
    add_comment_meta($comment_id, $custom_key_2, $review_2, true);
  } else if($review_2 != get_comment_meta( $comment_id, $custom_key_2)) {
    update_comment_meta($comment_id, $custom_key_2, $review_2);
  } else if('' == $review_2) {
    delete_comment_meta($comment_id, $custom_key_2);
  }

★でフォームの入力項目の名前を設定します。<input name="これ"…です。

☆チェックボックスや複数選択の項目などで、値が配列で保存されている場合（一つの名前のフォーム項目に保存する値が複数ある）は、

$review_1 = esc_attr($_POST[$custom_key_1]);　→　$review_1 = $_POST[$custom_key_1];　に変更してください。

入力項目を増やすときは、上記コードをコピーして★部分を書き換えて//で区切ってあるところより前に追加します。

管理画面のコメント一覧に追加した項目を表示する

保存自体がされていても、管理画面などで確認できないと意味がないですよね。

管理画面のコメント一覧に、行を追加して入力項目の中身を出力します。

functions.php 行の追加＆値の表示をまとめて

//管理画面のコメント一覧に追加項目を表示
function manage_comment_columns($columns) {
    $columns['post-review-1'] = "職業";
    $columns['post-review-2'] = "感想";
    return $columns;
}
//管理画面のコメント一覧でカスタムフィールドの値を表示
function add_comment_columns($column_name, $comment_id) {
    if( $column_name == 'post-review-1' ) {
        $review_1 = get_comment_meta( $comment_id, 'post-review-1', true );
        echo attribute_escape($review_1);
    }
    if( $column_name == 'post-review-2' ) {
        $review_2 = get_comment_meta( $comment_id, 'post-review-2', true );
        echo attribute_escape($review_2);
    }
}
add_filter( 'manage_edit-comments_columns', 'manage_comment_columns' );
add_action( 'manage_comments_custom_column', 'add_comment_columns',null, 2);

解説）

//管理画面のコメント一覧に追加項目を表示
function manage_comment_columns($columns) {
    $columns['★post-review-1'] = "☆職業";
    $columns['★post-review-2'] = "☆感想";
    return $columns;
}
//管理画面のコメント一覧でカスタムフィールドの値を表示
function add_comment_columns($column_name, $comment_id) {
    if( $column_name == '★post-review-1' ) { //ここから
        $review_1 = get_comment_meta( $comment_id, '★post-review-1', true );
        echo attribute_escape($review_1);
    }//ここまでが1つの入力項目
    if( $column_name == '★post-review-2' ) {
        $review_2 = get_comment_meta( $comment_id, '★post-review-2', true );
        echo attribute_escape($review_2);
    }
}
add_filter( 'manage_edit-comments_columns', 'manage_comment_columns' );
add_action( 'manage_comments_custom_column', 'add_comment_columns',null, 2);

★のところに追加項目の名前（name属性＝コメントメタの名前）、☆のところに表示用テキストを入力します。

入力項目が3つ以上ある場合は、ここからここまでと区切ったところをコピーして増やしてください。

チェックボックスなどの複数選択可の項目では、上記コードでは表示できません。

ここからここまでと区切ったところのセットをこっちに入れ替えてください。

  if($column_name == 'post-review-3'){
    $review_post = get_comment_meta( $post_id, 'post-review-3', false );
    if($review_post){
      foreach($review_post as $key => $value):
        echo attribute_escape($value) . "<br>";
      endforeach;
    }
  }

こちらのコードは面倒くさかったので動作確認しておりません。動作しなかった場合は教えていただけると助かります。

コメント一覧でオリジナルの入力項目を表示する

管理者が確認できればOKではなく、ページ内のコメント一覧でもオリジナルの入力項目を追加する場合は、ちょっと面倒臭いことをします。

親テーマからcomment.phpをダウンロードして、wp_list_commentsと書いてある部分(コメント一覧出力の関数)を探し、入力項目を追加するための関数を読み込む設定をします。

例）Lightningのcomment.php

					</div><!-- .nav-links -->
				</nav><!-- #comment-nav-above -->
			<?php endif; // check for comment navigation ?>

			<div class="comment-wrap">

			<ol class="comment-list"> //これがコメント一覧のリスト
				<?php
					wp_list_comments( //ここがコメント一覧取得の関数
						array(
							'style'      => 'ol',
							'short_ping' => true,
						)
					);
				?>
			</ol><!-- .comment-list --> //これがコメント一覧の終了タグ
comment.phpを編集

					wp_list_comments( //ここがコメント一覧取得の関数
						array(
							'style'      => 'ol',
							'short_ping' => true,
							'end-callback' => 'add_customize_comments', //入力項目を追加する部分の関数
						)
					);

そしたら、functions.phpに関数を登録しておきます。

//コメント一覧にカスタムフィールド表示を追加
function add_customize_comments($comment, $args, $depth) {
  $GLOBALS['comment'] = $comment;
  $review_1 = esc_attr(get_comment_meta($comment->comment_ID, 'post-review-1', true ));
  $review_2 = esc_attr(get_comment_meta($comment->comment_ID, 'post-review-2', true ));
  if($review_1 || $review_2){
  ?>
  <ul class="comment-review">
    <li><span class="review-title">職業</span>
      <?php echo '<span class="comment-type">'. $review_1 . '</span>'; ?></li>
    <li><span class="review-title">感想</span>
      <?php
      if($review_2 == 2){ echo '<span class="review-show"><span class="answer-icon"><i class="fas fa-grin-squint"></i></span><span class="answer-txt">参考になる</span></span>';
      }elseif($review_2 == 1){ echo '<span class="review-show"><span class="answer-icon"><i class="fas fa-smile"></i></span><span class="answer-txt">まあ参考になる</span></span>';
      }elseif($review_2 == -1){ echo '<span class="review-show"><span class="answer-icon"><i class="fas fa-frown-open"></i></span><span class="answer-txt">少し参考になる</span></span>';
      }elseif($review_2 == -2){ echo '<span class="review-show"><span class="answer-icon"><i class="fas fa-dizzy"></i></span><span class="answer-txt">参考にならない</span></span>';
      } ?></li>
    </ul>
  <?php } ?>
  </li>
<?php
}

解説）

今回はリスト形式にして<ul class="comment-review">～</ul>がオリジナルの入力項目を表示している部分のHTMLです。

入力されてなかったら表示覧自体を表示しない場合は、<li>～</li>の外側にPHPで条件分岐を書きます。

<?php if($review_1 !== ""){ ?>
    <li><span class="review-title">職業</span>
      <?php echo '<span class="comment-type">'. $review_1 . '</span>'; ?></li>
<?php } ?>

今回の2つ目はラジオボタンだったので、選択した部分を出力するために値で条件分岐しています。

      if($review_2 == 2){ //このコメントの回答が2だったら
 　　　　　echo '<span class="review-show"><span class="answer-icon"><i class="fas fa-grin-squint"></i></span><span class="answer-txt">参考になる</span></span>'; //2の内容を出力
      }

チェックボックスではこんな感じです。

 $review_2 = esc_attr(get_comment_meta($comment->comment_ID, 'post-review-2', true )); //これを
 $review_2 = get_comment_meta($comment->comment_ID, 'post-review-2', false ); //これに書き換え

　if($review_2 == 2){ //ここを
  if(array_search( 2 ,$review_2 ) !== false){ //こう書き換え

これも動作確認してませんので、解説も雑ですみません。

こっちの準備ができて更新してから、comment.phpを子テーマにアップロードします。

さやに相談してみる
さやアイコン
さや

さやに相談してみる

自分では解決しない…けど専門業者に頼むのはちょっと…
自分で進めたいけどサポートが欲しい！というとき
お気軽にご相談ください！

さやっとウェブ制作サポート

記事内容のカスタマイズ代行、さらにご希望に合わせたカスタマイズ、ご希望の機能やデザインの制作、コンテンツ作成のお手伝いまでウェブ制作全般にご対応！

ご利用ガイド

WordPressカスタマイズ・基礎知識コメント

Posted by さや