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

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

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

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

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] カテゴリページや検索結果の表示を調整

2018/03/19

よく使うWordPressのif文（条件分岐）まとめ

よく使うWordPressのif（条件分岐 / Conditional Tag）。使用頻度が高いものを書いてます。 基本 条件成立時、上の条件でない時、

2019/03/25

WordPress：pre_get_postsを用いてカテゴリページや検索結果の表示を調整する

今回はアクションフックを使って、カテゴリページの表示件数や、検索結果で5年以内の記事を返すなど「表示の調整」を行う方法をご紹介します。例えば管理画面で投稿記事は10件に設定

2016/03/28

長文系のブログに便利なWordPressプラグインや小技

必須というわけではないけれど、長文になりがちなブログや記事中心のサイト構築を行うときに使える小技やプラグインを少しピップアップしました。 記事を分割する

2013/04/22

WordPressを高速化する使い方！CDNサービスやプラグインまとめ

mod_pagespeed、CSSスプライト、CDN、圧縮、プラグイン… 2013年、ページが軽いサイトが上位表示されてきました。 「検索で10位以内に入ってい