WordPressにコメントを設置する簡単な方法
WordPressにコメントを設置する簡単な手順をメモしておきます。
エンジニア速報は Twitter の@commteで配信しています。
Sponsored Link
管理画面ログイン状態だと、メール・ウェブサイト欄が非表示になっているので、シークレットモードかログアウト状態で確認。
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] カテゴリページや検索結果の表示を調整
スポンサード リンク
関連記事
- WordPressプラグインの自動更新通知メールを停止させる
- WordPress:pre_get_postsを用いてカテゴリページや検索結果の表示を調整する
- WordPress:タイトルを自在にカスタマイズする方法
- プラグインを使わずにWordPressで関連記事を出す方法
- WordPressプラグイン「MW WP Form」の使い方と住所自動入力(郵便番号で動かない場合)
- WordPressでカスタムポストを追加するシンプルな方法
- WordPress管理画面のユーザーページに項目を追加する
- よく使うWordPressのif文(条件分岐)まとめ
- WordPressでパンくずリストを出す方法
- WordPressテーマ作成の時に覚えておくと便利なテンプレートタグ
Leave a Comment