オリジナルのtheme(テーマ)を作る19:コメントフォームを追加する


Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

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' ),  '&#8220;' . get_the_title() . '&#8221;' );
		} 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() ),  '&#8220;' . get_the_title() . '&#8221;' );
		}
	?>
	</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 &raquo;' ); ?>
                </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;
}

ちょっとまだ不十分かな?(^_^;)

満開になりました


Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

桜が満開になりました。

とてもいいお天気でお花見日和だったので
散歩に出掛けて写真撮ってきました(^^)