オリジナルの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 lines
if (!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>
<?php
return;
}
?>
<!-- You can start editing here. -->
<div id="comments" class="panel panel-default">
<?php if ( have_comments() ) : ?>
<div class="panel-heading one">
<?php
if ( 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;
}ちょっとまだ不十分かな？(^_^;)
