WP3.0対応のコメントテンプレートタグを簡単に設置する

Comments

今まで私のサイトでもコメント欄は設けていなかったんですが今回設置するに当たりWordPress3.0対応のコメントを設置した方法を紹介します。コメントを設置するにはcomments.phpとコメント用のfunctions.php、comments.phpに対するスタイルシートなどが必要になります。phpの中身を見ても難しくて作るのも大変なのでWordPress3.0からデフォルト入っているTwenty Ten 1.1 テンプレートの中身を使い設置してみました。又ところどころに”twentyten”と言う文字が含まれていますがそれは全て削除して使っています。

comments.phpの設置

Twenty Ten 1.1 テンプレートの中身のcomments.phpをそのままコピーするだけでも使えるんですが私のサイトの場合コメントのタイトル部分の所だけを少し変えて設置しました。13行目ぐらいにあるテンプレートタグ

<h3 id="comments-title"><?php printf( _n( 'One Response to %2$s', '%1$s Responses to %2$s', get_comments_number(), 'twentyten' ),
number_format_i18n( get_comments_number() ), '<em>' . get_the_title() . '</em>' );?></h3>
の部分を下記の通りに修正して使っています。
<h3 id="comments"><?php printf(__('&#8220;%s&#8221の', 'kubrick'), the_title('', '', false)); ?><?php comments_number(__('コメント (No )', 'kubrick'), __('コメント (One)', 'kubrick'), __('コメント (%)', 'kubrick'));?></h3>

修正後のcomments.php

<div id="comments">
<?php if ( post_password_required() ) : ?>
				<p class="nopassword"><?php _e( 'This post is password protected. Enter the password to view any comments.' ); ?></p>
			</div><!-- #comments -->
<?php
		/* Stop the rest of comments.php from being processed,
		 * but don't kill the script entirely -- we still have
		 * to fully load the template.
		 */
		return;
	endif;
?>

<?php
	// You can start editing here -- including this comment!
?>

<?php if ( have_comments() ) : ?>
			<h3 id="comments"><?php printf(__('&#8220;%s&#8221の', 'kubrick'), the_title('', '', false)); ?><?php comments_number(__('コメント (No )', 'kubrick'), __('コメント (One)', 'kubrick'), __('コメント (%)', 'kubrick'));?></h3>


<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?>
			<div class="navigation">
				<div class="nav-previous"><?php previous_comments_link( __( '<span class="meta-nav">&larr;</span> Older Comments') ); ?></div>
				<div class="nav-next"><?php next_comments_link( __( 'Newer Comments <span class="meta-nav">&rarr;</span>') ); ?></div>
			</div> <!-- .navigation -->
<?php endif; // check for comment navigation ?>

			<ol class="commentlist">
				<?php
					/* Loop through and list the comments. Tell wp_list_comments()
					 * to use comment() to format the comments.
					 * If you want to overload this in a child theme then you can
					 * define comment() and that will be used instead.
					 * See comment() /functions.php for more.
					 */
					wp_list_comments( array( 'callback' => 'comment' ) );
				?>
			</ol>

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?>
			<div class="navigation">
				<div class="nav-previous"><?php previous_comments_link( __( '<span class="meta-nav">&larr;</span> Older Comments') ); ?></div>
				<div class="nav-next"><?php next_comments_link( __( 'Newer Comments <span class="meta-nav">&rarr;</span>' ) ); ?></div>
			</div><!-- .navigation -->
<?php endif; // check for comment navigation ?>

<?php else : // or, if we don't have comments:

	/* If there are no comments and comments are closed,
	 * let's leave a little note, shall we?
	 */
	if ( ! comments_open() ) :
?>
	<p class="nocomments"><?php _e( 'Comments are closed.'); ?></p>
<?php endif; // end ! comments_open() ?>

<?php endif; // end have_comments() ?>

<?php comment_form(); ?>

</div><!-- #comments -->

functions.phpの設置

functions.phpもTwenty Ten 1.1 テンプレートの中身を全てこぴーしても大丈夫なんですが必要のないタグは削除して使ってます。削除した大まかな内容はカスタムヘッダー、ウィジェット、カスタム背景などは削除して使ってます。カスタムヘッダーとカスタム背景は別に必要ないし、ウィジェットに対してはfunctions.phpに元々設置していたためTwenty Ten 1.1 テンプレートのウィジェット関数は削除しました。全て必要な方は丸ごとコピーしてfunctions.phpを設置するだけで完了です。抜粋して使っているコードは下記の通りです。

<?php
if ( ! function_exists('comment') ) :
function comment( $comment, $args, $depth ) {
	$GLOBALS['comment'] = $comment;
	switch ( $comment->comment_type ) :
		case '' :
	?>
	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
		<div id="comment-<?php comment_ID(); ?>">
		<div class="comment-author vcard">
			<?php echo get_avatar( $comment, 40 ); ?>
			<?php printf( __( '%s <span class="says">says:</span>'), sprintf( '<cite class="fn">%s</cite>', get_comment_author_link() ) ); ?>
		</div><!-- .comment-author .vcard -->
		<?php if ( $comment->comment_approved == '0' ) : ?>
			<em><?php _e( 'Your comment is awaiting moderation.' ); ?></em>
			<br />
		<?php endif; ?>

		<div class="comment-meta commentmetadata"><a href="<?php echo esc_url( 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><!-- .comment-meta .commentmetadata -->

		<div class="comment-body"><?php comment_text(); ?></div>

		<div class="reply">
			<?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
		</div><!-- .reply -->
	</div><!-- #comment-##  -->

<?php
			break;
		case 'pingback'  :
		case 'trackback' :
	?>
	<li class="post pingback">
		<p><?php _e( 'Pingback:'); ?> <?php comment_author_link(); ?><?php edit_comment_link( __('(Edit)'), ' ' ); ?></p>
	<?php
			break;
	endswitch;
}
endif;
?>

私の場合はこれだけを抜粋してfunctions.phpに設置しました。ただし関数を設置する場合は自己責任でお願いします。関数を設置する前に必ずfunctions.phpバックアップをして設置するようにしましょう。関数タグに関しては空白行や現在使っている関数とのからみでもサイトが表示されなくなりますのでご注意ください。ちなみにいくつかのサイトで設置してみたんですが全く同じ関数を使っていても空白行などが違うだけで設置が困難なサイトもありました。

返信コメント用のscriptタグ設置

ヘッダー部分にscriptタグを埋め込んで返信コメントがスムーズに出来るようにします。<?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>を <?php wp_head(); ?>の上に埋め込むだけです。
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> 
<?php wp_head(); ?>

コメント用のスタイルシート

Twenty Ten 1.1 テンプレートのfunctions.phpとcomments.phpタグをコピーして持ってきていますのでスタイルシートもTwenty Ten 1.1 テンプレートのcomments用のスタイルシートをコピーして使えます。細かいデザインはお好みで変えてみて下さい。

/* =Comments
-------------------------------------------------------------- */
#comments {
	clear: both;
}
#comments .navigation {
	padding: 0 0 18px 0;
}
h3#comments-title,
h3#reply-title {
	color: #000;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 0;
}
h3#comments-title {
	padding: 24px 0;
}
.commentlist {
	list-style: none;
	margin: 0;
}
.commentlist li.comment {
	border-bottom: 1px solid #e7e7e7;
	line-height: 24px;
	margin: 0 0 24px 0;
	padding: 0 0 0 56px;
	position: relative;
}
.commentlist li:last-child {
	border-bottom: none;
	margin-bottom: 0;
}
#comments .comment-body ul,
#comments .comment-body ol {
	margin-bottom: 18px;
}
#comments .comment-body p:last-child {
	margin-bottom: 6px;
}
#comments .comment-body blockquote p:last-child {
	margin-bottom: 24px;
}
.commentlist ol {
	list-style: decimal;
}
.commentlist .avatar {
	position: absolute;
	top: 4px;
	left: 0;
}
.comment-author {
}
.comment-author cite {
	color: #000;
	font-style: normal;
	font-weight: bold;
}
.comment-author .says {
	font-style: italic;
}
.comment-meta {
	font-size: 12px;
	margin: 0 0 18px 0;
}
.comment-meta a:link,
.comment-meta a:visited {
	color: #888;
	text-decoration: none;
}
.comment-meta a:active,
.comment-meta a:hover {
	color: #ff4b33;
}
.commentlist .even {
}
.commentlist .bypostauthor {
}
.reply {
	font-size: 12px;
	padding: 0 0 24px 0;
}
.reply a,
a.comment-edit-link {
	color: #888;
}
.reply a:hover,
a.comment-edit-link:hover {
	color: #ff4b33;
}
.commentlist .children {
	list-style: none;
	margin: 0;
}
.commentlist .children li {
	border: none;
	margin: 0;
}
.nopassword,
.nocomments {
	display: none;
}
#comments .pingback {
	border-bottom: 1px solid #e7e7e7;
	margin-bottom: 18px;
	padding-bottom: 18px;
}
.commentlist li.comment+li.pingback {
	margin-top: -6px;
}
#comments .pingback p {
	color: #888;
	display: block;
	font-size: 12px;
	line-height: 18px;
	margin: 0;
}
#comments .pingback .url {
	font-size: 13px;
	font-style: italic;
}

/* Comments form */
input[type=submit] {
	color: #333;
}
#respond {
	border-top: 1px solid #e7e7e7;
	margin: 24px 0;
	overflow: hidden;
	position: relative;
}
#respond p {
	margin: 0;
}
#respond .comment-notes {
	margin-bottom: 1em;
}
.form-allowed-tags {
	line-height: 1em;
}
.children #respond {
	margin: 0 48px 0 0;
}
h3#reply-title {
	margin: 18px 0;
}
#comments-list #respond {
	margin: 0 0 18px 0;
}
#comments-list ul #respond {
	margin: 0;
}
#cancel-comment-reply-link {
	font-size: 12px;
	font-weight: normal;
	line-height: 18px;
}
#respond .required {
	color: #ff4b33;
	font-weight: bold;
}
#respond label {
	color: #888;
	font-size: 12px;
}
#respond input {
	margin: 0 0 9px;
	width: 98%;
}
#respond textarea {
	width: 98%;
}
#respond .form-allowed-tags {
	color: #888;
	font-size: 12px;
	line-height: 18px;
}
#respond .form-allowed-tags code {
	font-size: 11px;
}
#respond .form-submit {
	margin: 12px 0;
}
#respond .form-submit input {
	font-size: 14px;
	width: auto;
}

コメントインフォメーションの設置

各記事に対してコメントできるようにコメントへのリンクをするタグをindex.phpとsingle.php埋め込みます。場所は通常記事の最後に設置して有ります。使うタグは<a href=”<?php comments_link(); ?>”>コメント <?php comments_number(‘ (0) ‘,’ (1) ‘, ‘(%) ‘); ?></a>でコメントインフォメーションが出来ます。私のサイトで使っている場所は下記の場所になりますので参考にしてください。

<?php the_content(); ?>
<!--記事タイトルと本文 --> 

<!-- 記事インフォメーション -->
<p class ="postinfo">
<?php the_date(); ?>
|
カテゴリー:<?php the_category(','); ?>
|
<a href="<?php comments_link(); ?>">コメント
<?php comments_number(' (0) ',' (1) ', '(%) '); ?></a>
</p>
<!-- 記事インフォメーション -->

中省略

<?php endwhile; endif; ?>
<!--記事タイトルと本文 --> 

コメントの表示

コメントを表示するためのタグを設置しないとコメントは表示されません。コメント表示で使っているタグは<?php comments_template(); ?>を使い表示させています。このタグをindex.phpとsingle.php内に埋め込みます。埋め込む場所は通常メインコンテンツ内の下の部分に埋め込みます。

これでコメントが使えるようになります又返信を繰り返す数などの設定はディスカッションの所で設定できますのでお好みで設定してみてください。

最終更新日: 2013年2月1日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

WP3.0対応のコメントテンプレートタグを簡単に設置するの関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*