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

2017/12/11

WordPressのfunctions.phpに書いておくと捗ること

WordPressのfunctions.phpに書いておくと捗ることをまとめておきます。 固定ページ判別。bodyに固定ページのスラッグ名を追加 bod

2013/06/17

すごい便利！WordPressでブログをリニューアルするときに役立つ３０

先日コムテブログをひっそりとリニューアルしたわけですが カスタマイズしたい部分を調べるだけで膨大な時間がかかってしまいました。 今回はWordPressでブログをリ

2019/02/25

プラグインを使わずにWordPressで関連記事を出す方法

SEOの効果を高めたり、ユーザビリティをよくするためのレコメンド機能をプラグイン無しで簡単に実装する方法。詳細ページ（single.php）で、カテゴリをもとにランダムで記

2013/04/30

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

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