WordPressにコメントを設置する簡単な方法

• 作成：2017/11/6
• 更新：2019/03/12
• WordPress >

WordPressにコメントを設置する簡単な手順をメモしておきます。

エンジニア速報は Twitter の@commteで配信しています。

管理画面ログイン状態だと、メール・ウェブサイト欄が非表示になっているので、シークレットモードかログアウト状態で確認。

comments.php

comments.php ファイルを作る。wp_list_commentsはコールバック関数を追加。comment_formはhtmlなどを整形。

<div class="comment">
  <?php if(have_comments()): ?>
  <h4>コメント</h4>
  <ol class="commentlist">
  <?php wp_list_comments(array(
    'walker'            => null,    // HTML をカスタマイズ
    'max_depth'         => '',      // 返信コメントの階層の深さ
    'style'             => 'ol',    // div ul ol などで囲む
    'callback'          => 'mytheme_comment', // functions.php に関数を書く
    'end-callback'      => null,    // 各コメントの終了タグを出力するカスタム関数の名前
    'type'              => 'all',   // all、comment、trackback、pingbackなどを指定
    'reply_text'        => '返信',   // 返信用ボタンのテキスト
    'page'              => '',      // ページ分けした場合に表示対象とするページ
    'per_page'          => '',      // 1ページに表示するコメントの数
    'avatar_size'       => 48,      // 表示するアバターの大きさをピクセル数で指定
    'reverse_top_level' => null,    // true 最新のコメントを先頭 逆順 / false 一番古いコメント最初に表示
    'reverse_children'  => '',      // true にすると一番新しい子コメント（返信）が付いたコメントを先頭
    'format'            => 'html5', // テーマが 'HTML5' をサポートしないなら 'xhtml'
    'short_ping'        => false,   // short pingを使うかどうか。バージョン3.6以降
    'echo'              => true     // コメントリスト表示
  )); ?>
  </ol>
  <?php endif; ?>
  <?php comment_form(array(
    'label_submit' => 'コメントする',
    'comment_field' =>  '<div class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) .
    '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">' .
    '</textarea></div>',
    'fields' => apply_filters( 'comment_form_default_fields', array(
    'author' =>
    '<div class="comment-form-author">' .
    '<label for="author">' . __( '名前', 'domainreference' ) . '</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
    '" size="30"' . $aria_req . ' /></div>',
    'email' =>
    '<div class="comment-form-email"><label for="email">' . __( 'メールアドレス', 'domainreference' ) . '</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
    '" size="30"' . $aria_req . ' /></div>',
    'url' =>
    ''
    )
    ),
  )); ?>
</div>

single.php

任意の場所に以下を挿入。

<!-- コメント表示 -->
<?php comments_template(); ?>

functions.php

以下を挿入してウェブサイト・メールの入力欄を消し、コールバック関数を追加する。

参考:WordPress コメント入力欄をカスタマイズしてウェブサイト(URL)やメールアドレスを簡単に消す方法 | debate

// コメント ウェブサイトの入力欄を消す
add_filter('comment_form_default_fields', 'mytheme_remove_url');
function mytheme_remove_url($arg) {
$arg['url'] = '';
return $arg;
}

// コメント フォーム内のURLオートリンクを停止する
remove_filter('comment_text', 'make_clickable');

// コメント カスタマイズ コールバック関数
function mytheme_comment($comment, $args, $depth) {
    if ( 'div' === $args['style'] ) {
        $tag       = 'div';
        $add_below = 'comment';
    } else {
        $tag       = 'li';
        $add_below = 'div-comment';
    }
    ?>
    <<?php echo $tag ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ) ?> id="comment-<?php comment_ID() ?>">
    <?php if ( 'div' != $args['style'] ) : ?>
        <div id="div-comment-<?php comment_ID() ?>" class="comment-body">
    <?php endif; ?>

        <!-- 日付 -->
        <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>">
            <?php
            /* translators: 1: date, 2: time */
            printf( __('%1$s at %2$s'), get_comment_date(),  get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)' ), '  ', '' );
            ?>
        </div>

        <!-- アバター -->
        <div class="flex">
            <div class="comment-author vcard">
                <?php if ( $args['avatar_size'] != 0 ) echo get_avatar( $comment, $args['avatar_size'] ); ?>
            </div>
            <?php if ( $comment->comment_approved == '0' ) : ?>
                <em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em>
                <br />
            <?php endif; ?>
            <!-- 内容 -->
            <div class="comment-content">
                <?php printf( __( '<cite class="fn">%s</cite>' ), get_comment_author_link() ); ?>
                <?php comment_text(); ?>
            </div>
        </div>

        <!-- 返信ボタン -->
    <div class="reply">
        <?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
    </div>
    <?php if ( 'div' != $args['style'] ) : ?>
    </div>
    <?php endif; ?>
    <?php
    }

管理画面>ディスカッション から「コメントの投稿者の名前とメールアドレスの入力を必須にする 」のチェックを外す

Sass

// コメント
.comment {
  .flex {
    display: flex;
    .comment-author {
      flex: 1;
    }
    .comment-content {
      flex: 8;
      margin-left: 8px;
    }
  }
  .comment-form-author,
  .comment-form-email {
    margin-top: 16px;
  }
  ol.children {
    margin-left: 16px;
  }
  cite.fn {
    padding: 16px 0 0;
    display: block;
  }
  h4 {
    border-bottom: 2px solid #ddd;
    padding: 8px 0;
  }
  label {
    display: block;
  }
  input {
    padding: 8px;
  }
  textarea {
    width: 100%;
  }
  .form-submit {
    margin-left: auto;
  }
  .submit {
    padding: 8px;
    text-align: center;
    background-color: #ddd;
    color: #222;
    margin-left: auto;
  }
  ol {
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: comment-number;
    li {
      padding: 16px 0 16px 16px;
      border-bottom: 1px solid #ddd;
      position: relative;
      &:before {
        content: counter(comment-number);
        counter-increment: comment-number;
        position: absolute;
        top: 32px;
        left: -8px;
      }
      .vcard {
        margin: 16px 0 0;
        img {
          margin-left: 0;
        }
      }
      .reply {
        background-color: #ddd;
        width: 50px;
        text-align: center;
        margin-left: auto;
        border-radius: 2px;
        a {
          display: block;
          padding: 8px;
        }
      }
      .comment-body {
        margin: 16px 0;
      }
    }
  }
}

完成

参考

テンプレートタグ/wp list comments - WordPress Codex 日本語版

関数リファレンス/comment form - WordPress Codex 日本語版

WordPressカスタマイズに便利なテクニック一覧

• [開発環境] WordPressをコマンドでインストールする
• [開発環境] Vagrant+Virturlbox+VCCWの使い方
• [雛形] WordPressのif文（条件分岐）
• [雛形] 便利なテンプレートタグ
• [構築] functions.phpに書いておくべきこと
• [構築] パンくずリストを出す方法
• [構築] コメントを設置する簡単な方法
• [管理画面] プラグインの自動更新通知メールを停止させる
• [管理画面] 管理画面のユーザーページに項目を追加する
• [管理画面] カスタムポストを追加する
• [翻訳] 多言語サイトを作るプラグイン「bogo」の使い方
• [フォーム] 「MW WP Form」の使い方と住所自動入力
• [関連記事] プラグインを使わずにWordPressで関連記事を出す方法
• [SEO] タイトルのカスタマイズ
• [pre_get_posts] カテゴリページや検索結果の表示を調整