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

• 2

2013/06/13

WordPressインストール – レンタルサーバー、クラウド、ローカル編

Amazon EC2、CloudFlare、XAMPPやMAMP… クラウドやローカル、他のレンタルサーバーに WordPressをインストールしたくなったとき

2013/04/30

泣けるほどおしゃれ！無料のWordPressテーマまとめ

そろそろ、ブログのレイアウトでも変えてモチベーションをあげたい。有料でもダメなの多いし、そうだ！海外の「ソーシャルで評判の良かった」無料のWordPressテーマだけ集めよ

2013/05/13

WordPressインストール後の設定まとめ

ブログを書いて、継続的な収益を発生させたい WordPressインストール後、すぐに稼ぐことは可能か？ 「ブログ」だけで、家族を養うことはできるのか？ 100

2017/06/5

WordPressで多言語サイトを作る時に便利なプラグイン「bogo」の使い方

日本語と英語の切り替えができる多言語サイトを超簡単に作りたい時に便利な方法。あくまでも簡易的な方法となります。 Bogoインストール Contactfo