オリジナルのtheme（テーマ）を作る19：コメントフォームを追加する
index.phpにコメントフォームを組み込むテンプレートタグを追加します。
<?php comments_template(); ?>追加する場所は、pagerの下、左のカラムの一番下の部分です。
<div class="row"><div class="col-md-9"><?php if(have_posts()): while(have_posts()): the_post(); ?><article><h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2><time><?php the_date('Y/m/d (D)'); ?><?php the_time(); ?></time><div class="well well-lg"><div class="categorybtn"><?php the_category(); ?></div><!--//categorybtn --><?php the_content(); ?></div><!--//well well-lg --></article><!--//article --><?php if(is_single()): ?><nav><ul class="pager"><li class="previous"><?php if (get_previous_post()):?><?php previous_post_link('%link','%title',TRUE); ?><?php endif; ?></li><li class="next"><?php if (get_next_post()):?><?php next_post_link('%link','%title',TRUE); ?><?php endif; ?></li></ul><!--//pager --></nav><!--//nav --><?php endif; ?><?php endwhile; endif; ?><?php if(is_home() or is_archive()): ?><nav><ul class="pager"><li class="previous"><?php next_posts_link('<i class="fa fa-angle-left"></i> Older'); ?></li><li class="next"><?php previous_posts_link('Newer <i class="fa fa-angle-right"></i>'); ?></li></ul><!--//pager --></nav><!--//nav --><?php endif; ?><?php comments_template(); ?></div><!--//col --><div class="col-md-3"><ul class="list-group"><?php dynamic_sidebar('right_sidebar'); ?></ul></div><!--//col --></div><!--//row -->
次に、空のcomments.phpを用意して、FTPでアップロードします。
外観－テーマの編集画面から、comments.phpを開いて以下の記述をします。
<div id="comments"><?php comment_form(); ?></div>
とりあえずこれだけでコメントフォーム自体は表示されます。
comments.php
<?php/*** Template Name: comments page**/// Do not delete these linesif (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))die ('Please do not load this page directly. Thanks!');if ( post_password_required() ) { ?><p class="nocomments"><?php _e('This post is password protected. Enter the password to view comments.'); ?></p><?phpreturn;}?><!-- You can start editing here. --><div id="comments" class="panel panel-default"><?php if ( have_comments() ) : ?><div class="panel-heading one"><?phpif ( 1 == get_comments_number() ) {/* translators: %s: post title */printf( __( 'One response to %s' ), '“' . get_the_title() . '”' );} else {/* translators: 1: number of comments, 2: post title */printf( _n( '%1$s response to %2$s', '%1$s responses to %2$s', get_comments_number() ),number_format_i18n( get_comments_number() ), '“' . get_the_title() . '”' );}?></div><!--//panel-heading --><div class="panel-body"><ul class="media-list"><?php wp_list_comments(); ?></ul><nav><ul class="pager"><li class="previous"><?php previous_comments_link() ?></li><li class="next"><?php next_comments_link() ?></li></ul></nav></div><!--//panel-body --><?php else : // this is displayed if there are no comments so far ?><?php if ( comments_open() ) : ?><!-- If comments are open, but there are no comments. --><?php else : // comments are closed ?><!-- If comments are closed. --><div class="panel-body"><p class="nocomments"><?php _e('Comments are closed.'); ?></p></div><!--//panel-body --><?php endif; ?><?php endif; ?><?php if ( comments_open() ) : ?><div id="respond" class="panel-footer"><h4><?php comment_form_title( __('Leave a Reply'), __('Leave a Reply to %s' ) ); ?></h4><div id="cancel-comment-reply"><small><?php cancel_comment_reply_link() ?></small></div><?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?><p><?php printf(__('You must be <a href="%s">logged in</a> to post a comment.'), wp_login_url( get_permalink() )); ?></p><?php else : ?><form action="<?php echo site_url(); ?>/wp-comments-post.php" method="post" id="commentform" class="form-horizontal"><?php if ( is_user_logged_in() ) : ?><p><?php /* translators: %s: user profile link */printf( __( 'Logged in as %s.' ), sprintf( '<a href="%1$s">%2$s</a>', get_edit_user_link(), $user_identity ) ); ?><a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="<?php esc_attr_e( 'Log out of this account' ); ?>"><?php _e( 'Log out »' ); ?></a></p><?php else : ?><div class="form-group"><label for="author" class="col-sm-3 control-label"><small><?php _e('Name'); ?><?php if ($req) _e('(required)'); ?></small></label><div class="col-sm-9"><input type="text" class="form-control" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> /></div></div><!--//form-group --><div class="form-group"><label for="email" class="col-sm-3 control-label"><small><?php _e('Mail (will not be published)'); ?><?php if ($req) _e('(required)'); ?></small></label><div class="col-sm-9"><input type="text" class="form-control" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> /></div></div><!--//form-group --><div class="form-group"><label for="url" class="col-sm-3 control-label"><small><?php _e('Website'); ?></small></label><div class="col-sm-9"><input type="text" class="form-control" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" tabindex="3" /></div></div><!--//form-group --><?php endif; ?><div class="form-group"><label for="comment" class="col-sm-3 control-label"><small><?php _e('Comment'); ?></small></label><div class="col-sm-9"><textarea class="form-control" name="comment" id="comment" rows="10" tabindex="4"></textarea></div></div><!--//form-group --><div class="form-group"><div class="col-sm-offset-3 col-sm-9"><input name="submit" class="btn btn-warning" type="submit" id="submit" tabindex="5" value="<?php esc_attr_e('Submit Comment'); ?>" /></div></div><!--//form-group --><?php comment_id_fields(); ?><?php/** This filter is documented in wp-includes/comment-template.php */do_action( 'comment_form', $post->ID );?></form><?php endif; // If registration required and not logged in ?></div><!--//panel-footer --><?php endif; // if you delete this the sky will fall on your head ?></div><!--//panel panel-default -->
コメントがあれば出力します
<?php if(have_comments()): ?> ～ <?php endif; ?>
コメントを出力します
<?php wp_list_comments(); ?>
一応、bootstrapになっています。
が、このままでは見た目がオカシイので（笑）ちょっとcssをいじらなければ・・(^_^;)
ということで以下にcssを。
style.css
/*---------------------*/#comments {color: #222;}.panel {margin-bottom: 20px;background-color: #fff;border: none;border-radius: 0;box-shadow: none;}/*---------------------*/.form-control {border-radius: 0;box-shadow: none;-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}.form-control:focus {border-color: #F90;outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,204,0,.6);box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,204,0,.6);}.btn {white-space: nowrap;border: none;border-radius: 0;}/*------------------------*/.media-list .children {list-style: none;padding-top: 15px;border-top: 1px dotted #DDD;}.media-list>li {overflow: hidden;zoom: 1;margin-bottom: 20px;border-bottom: 1px solid #DDD;}.media-list li .vcard {display: table-cell;vertical-align: top;padding-right: 20px;float: left;}.media-list li .vcard img {display: block;width: 64px;height: 64px;border-radius: 4px;}.media-list li p {display: table-cell;vertical-align: top;width: 10000px;overflow: hidden;zoom: 1;}.comment-body {position: relative;overflow: hidden;zoom: 1;padding-bottom: 15px;}.comment-meta {display: inline-block;position: absolute;font-size: 11px;bottom: 10px;right: 0;}.reply {display: inline-block;position: absolute;font-size: 0.857em;top: 0;right: 0;}.fn, .says {font-size: 0.857em;font-style: normal;}.media-list li a:hover,article .well a:hover {color: #AAA;}
ちょっとまだ不十分かな？(^_^;)
