Wordpress運用のアレグレットワークス
現役フロントエンジニアによるWordpressカスタマイズ備忘録

今回やりたいこと

  • 固定ページにコメント欄を表示させる
  • 入力項目は「名前、メールアドレス、コメントタイトル、コメント内容」で、タイトル以外は必須にする
  • WPにログインしている人のみ、返信できるようにする

手順

  1. テーマ内にcomments.phpを設置し、内容を記述
  2. functions.phpに「タイトル追加」「コメント投稿時に保存」「コメント出力」の記述をする
  3. page.php内の任意の箇所に<?php comments_template(); ?>を記述し、呼び出す

comments.phpの内容

<?php if ( have_comments() ) : ?> // コメントがあれば一覧を表示
  <div class="title">最近のコメント</div>
  <ul>
    <?php wp_list_comments('callback=mytheme_comments'); ?> // functions.phpで設定した内容を出力(後述)
  </ul>
<?php endif; ?>
<div class="box">
  <div class="title">コメントする ※記入欄は全て必須です。</div>
  <div class="wrap">
    <?php
      $comments_args = array(
        'fields' => array(
          'author' => '<p class="comment-form-author">' . '<label for="author">名前' . ( $req ? '' : '' ) . '</label> ' .
            '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
          'email' => '<p class="comment-form-email"><label for="email">メールアドレス(非公開)' . ( $req ? '' : '' ) . '</label> ' .
            '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
          'url' => '', // urlは入力させない
        ),
        'title_reply' => '',
        'label_submit' => 'コメントを送信',
      );
       
      comment_form($comments_args);
    ?>
  </div>
</div>

functions.phpの内容

// コメント欄にタイトル入力欄を追加
function add_custom_comment_field($defaults) {
  $add_content = '';
  //入力項目を追加する
  $add_content .= '
    <label for="comment-title">タイトル</label>
    <input id="comment-title" name="comment-title" type="text" value="">';
  return $add_content . $defaults;
}
add_action('comment_form_field_comment', 'add_custom_comment_field' );

// コメント投稿時に保存
function save_custom_comment_field($comment_id) {
  if(!$comment = get_comment($comment_id)) return false;
  //comment-titleの値の保存
  $custom_key_title = 'comment-title';
  $title = esc_attr($_POST[$custom_key_title]);
  if('' == get_comment_meta($comment_id, $custom_key_title)) {
    add_comment_meta($comment_id, $custom_key_title, $title, true);
  } else if($title != get_comment_meta( $comment_id, $custom_key_title)) {
    update_comment_meta($comment_id, $custom_key_title, $title);
  } else if('' == $title) {
    delete_comment_meta($comment_id, $custom_key_title);
  }
  return false;
}
add_action('comment_post', 'save_custom_comment_field');
add_action('edit_comment', 'save_custom_comment_field');

// コメント一覧に出力
function mytheme_comments($comment, $args, $depth) {
  $GLOBALS['comment'] = $comment;
  $user = get_userdata($comment->user_id);
  $title = esc_attr(get_comment_meta($comment->comment_ID, 'comment-title', true ));
  ?>
  <li>
    <div class="comment-title"><?php echo $title; ?></div>
    <div class="comment-header">
      <span><?php comment_author(); ?></span> <small><?php echo get_comment_date(); ?></small>
    </div>
    <div class="comment-content">
      <?php comment_text(); ?>
    </div>
    <?php if( is_user_logged_in() ) : ?> // wpにログインしている人のみ返信欄を表示させる
      <div class="reply">
        <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => 3))); ?>
      </div>
    <?php endif; ?>
  </li>
<?php
}

Wordpressに関するご相談は、
アレグレットワークスへ

お問合せ・お見積り