コメント機能を使うには、投稿（single.php）や固定ページ（page.php）からコメントテンプレート（comments.php）を読み込む。
仕様
<?php comments_template( $file, $separate_comments ); ?>| パラメータ | 初期値 | 説明 |
| $file | /comments.php | テンプレートのファイル名 |
| $separate_comments | false | コメントとトラックバックを分ける場合はtrue |
テンプレートを指定する場合
<?php comments_template( '/short-comments.php' ); ?> コメントとトラックバックを分ける場合
<?php comments_template( '', true ); ?> コメントテンプレート (comments.php) のサンプル
コメント関連のタグがない場合、Theme Checkプラグインでエラーになります。
そのため、コメント機能を使わない場合でも、タグは埋め込みつつディスカッション設定からOFFにします。
暫定的なエラー対策に使えるcomments.php最小構成とCSSのサンプルがこちらになります。
詳細な説明やカスタム方法は近日中に・・・
<?php
if ( post_password_required() ) {
return;
}
?>
<article class="discussion">
<?php if( pings_open() ): ?>
<div class="trackback">
<h3 class="discussion-title">Track Back URL</h3>
<p><?php trackback_url(); ?></p>
</div>
<?php endif; ?>
<?php if( have_comments() ): ?>
<div class="comments">
<h3 class="discussion-title">Comments</h3>
<div class="comments-list">
<?php wp_list_comments(); ?>
</div>
<?php the_comments_pagination(); ?>
</div>
<?php endif; ?>
<?php comment_form(); ?>
</article>/* ****************************************************************************
Discussion
* ************************************************************************** */
.discussion {
margin: 2em 0;
font-size: 1.4rem;
}
.trackback {
margin: 2em 0;
}
.comments {
margin: 2em 0;
}
.discussion-title {
margin-bottom: 1em;
font-size: 2.0rem;
}
.comments-pagination {
margin: 2em 0 3em;
}
.no-comments {
margin: 2em 0;
color: #f00;
font-size: 1.4rem;
font-style: italic;
}
/* ----------------------------------------------------------------------------
Comments Form
---------------------------------------------------------------------------- */
.required {
color: #f00;
}
.comment-respond {}
.comment-reply-title {
margin: 2em 0 1em;
font-size: 2.0rem;
}
.comment-form {}
.comment-form label {
display: block;
margin: 12px 0 8px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="url"] {
width: 100%;
}
.comment-form-comment {}
.comment-form-author {}
.comment-form-email {}
.comment-form-url {}
.form-submit {
text-align: right;
}
/* Message
---------------------------------------------------------------------------- */
.must-log-in {}
.comment-notes {
margin: 1em 0;
}
.comment-form-cookies-consent {}
.comment-form-cookies-consent input[type="checkbox"] + label {
display: inline-block;
}
.logged-in-as {
margin: 1em 0;
}
/* ----------------------------------------------------------------------------
Comments List
---------------------------------------------------------------------------- */
.comments-list,
.comments-list .children {
list-style: none;
}
.comments-list .children {
margin-left: 24px;
padding-left: 24px;
}
.comments-list .comment {
margin: 1em 0;
}
.comments-list li:before {
display: none;
}
/* ----------------------------------------------------------------------------
Comments Body
---------------------------------------------------------------------------- */
.comment-body {
padding: 24px;
border: 1px solid #ccc;
}
.comment-meta {
margin-bottom: 1.5em;
}
.comment-author {
position: relative;
z-index: 2;
margin-bottom: 0.4em;
font-size: 16px;
}
.comment-author .avatar {
width: 50px;
height: 50px;
}
.comment-author .says {
display: none;
}
.comment-metadata {
color: #767676;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.comment-metadata a {
color: #767676;
}
.comment-metadata a.comment-edit-link {
margin-left: 1em;
color: #222;
}
.comment-awaiting-moderation {
color: #f00;
}
.comment-body {
margin-bottom: 1em;
}
.comment-reply-link {
position: relative;
font-weight: 800;
}
.comment-reply-link .icon {
position: absolute;
top: 0;
width: 1em;
height: 1em;
color: #222;
}
.children .comment-author .avatar {
width: 30px;
height: 30px;
}
.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
padding: 2px;
border: 1px solid #333;
}
/* ----------------------------------------------------------------------------
Comments Pagination
---------------------------------------------------------------------------- */
.comments-pagination {
margin: 8px auto;
}
.comments-pagination .nav-links {
text-align: center;
}
.comments-pagination .nav-links .page-numbers,
.comments-pagination .nav-links .current {
display: inline-block;
width: 30px;
height: 30px;
margin: 8px 4px;
border: 1px solid #005bac;
border-radius: 50%;
font-size: 1.4rem;
text-decoration: none;
line-height: 30px;
}
.comments-pagination .nav-links .current {
border: 1px solid #005bac;
border-radius: 50%;
background: #005bac;
color: #fff;
}
.comments-pagination .nav-links .dots {
margin: 8px 0;
border: 0;
font-weight: bold;
}
.comments-pagination .nav-links a.page-numbers:hover {
border-color: #f00;
background: #f00;
color: #fff;
transition: all .3s;
}
.comments-pagination .nav-links a.prev.page-numbers,
.comments-pagination .nav-links a.next.page-numbers {
width: auto;
padding-right: 6px;
padding-left: 6px;
border: 0;
border-bottom: 1px solid #005bac;
border-radius: 0;
background: transparent;
}
.comments-pagination .nav-links a.prev.page-numbers:hover ,
.comments-pagination .nav-links a.next.page-numbers:hover {
border-color: #f00;
background: #f00;
color: #fff;
}reply用のJSを読み込む
このスクリプトを読み込むことで、返信を押した箇所にフォームが移動してきます。
読み込まない場合、返信を押した際にフォームまでスクロールします。
読み込まない場合、Theme Checkプラグインでエラーになります。
wp_enqueue_script( 'comment-reply' );