コメントを入れ子方式に対応させました

先日、たまたま見たサイトでWordPress 2.7からコメントが入れ子方式に対応したことを知りました。さほどコメントのない私のサイトですが、それでも入れ子方式のコメント欄にはあこがれてしまいます。ということで早速対応させてみようと試みることにしました。

WordPress自体の設定は『設定』メニューの『ディスカッション』メニューの中にあるコメントを入れ子方式にする旨のチェックを付けて設定を保存するだけです。…が、それだけでは無理です。というのも使用しているテーマがコメントの入れ子方式に対応していないとメニューで設定しても表示は変わらないのです。

ということで早速使っているテーマの中にあるcomments.phpというファイルがコメントとピンバックの表示を担っているのですが、そのファイルの中のコメント表示ループの箇所へ差し替える形でwp_list_comments()関数を入れてしまえば終了です。…と書けば簡単なのですが、実はそれだけではダメだったんですよ……(-_-;;

というのもwp_list_comments関数はあらかじめ設定されているデザインでコメントとピンバックを記述してくれます。デフォルトのデザインで十分という人はこれでOKなんですが、私が使っているデザインでは確実にデザインが崩れてしまいました。そこでwp_list_comments関数の引数のひとつ、callbackを使用します。この引数はあらかじめコメントやピンバックをHTMLタグも含めて表示するために設けた独自の関数を呼び出すように指示する引数です。これを設定してやるわけですが、独自の関数は使用しているテーマファイルのうちfunctions.phpファイルに記述しておけばいいです。

さらにこのページの場合、コメント部分とピンバック部分で分けて表示しています。これもwp_list_comments関数関数の引数でコメントだけを吐き出すのかピンバックだけを吐き出すのかを設定できます。引数はtypeで設定させるだけで終了です。（その他のwp_list_comments関数にかんする詳しい内容はWordPress Codex日本語版ドキュメントをご覧ください）

このページのデザインは『wp.vicuna.CMS』を利用させてもらっています。このデザインはデザインを設定するPHPファイルは共通で、デザインに応じてCSSファイルや画像ファイルを差し替えるという少し変わった構造をしています。この手法のため大まかなデザインはそのまま、1カラムにしたり2カラムにしたりと設定を変えるだけで変更することが出来るようになっています。

実はコメントの入れ子方式に対応したvicunaの新しいバージョンが出ているか調べたのですが、出ている様子は今のところ見られず。そこで独自で力業的に設定してやることにしました。

まずテーマフォルダの中にあるfunctions.phpファイルへ次のようにコメントを表示する独自関数を書き出しました。記述するのはファイルの末尾でOKです。

function vicuna_comments($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>

   			<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
				<div class="comment_ID" id="comment<?php comment_ID() ?>">
					<span class="name"><?php comment_author_link() ?></span>
					<span class="date"><?php comment_date(__('y-m-d (D) G:i', 'vicuna')) ?></span>
					<?php edit_comment_link(__('Edit', 'vicuna'), '<span class="admin">', '</span>'); ?>

					<span class="reply">
						<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
					</span>

				</div>
				<div class="comment_text">
<?php			comment_text() ?>

				</div>
<?php
}

ここで注意しないといけないのは、ここでで設定されているコードの中には必ず<li>を入れておく必要があり、またこの終了タグである</li>は付加されることです。ちなみに個々に出ているHTMLコードは出来るだけ下のCSSファイルを使用できるようにしましたが、つじつまが合わなかったため、一部独自のコードになってしまっています。（これもWordPress Codex日本語版ドキュメント参照）

またcomment_reply_link関数はコメントへ返信するためのリンクを作るコードです。

つぎにテーマフォルダ内のcomments.phpの35行目から次のように改変しました。

<?php		if ($commentCount > 0) :
			vicuna_edit_comments_link(__('Edit this comments.', 'vicuna'), '<p class="admin">', '</p>'); ?>
<!-- // Add Start-->
<?php			if( function_exists( 'wp_list_comments' ) && get_option('thread_comments') ){		// Add ?>
				<ol class="log">
<?php					wp_list_comments( array( 'type' => 'comment', 'callback' => 'vicuna_comments' ) );		// Add ?>
				</ol>
<?php			}else{		// Add ?>
<!-- // Add End -->
				<dl class="log">
<?php			foreach ($commentArray as $comment) : ?>
				<dt id="comment<?php comment_ID() ?>"><span class="name"><?php comment_author_link() ?></span> <span class="date"><?php comment_date(__('y-m-d (D) G:i', 'vicuna')) ?></span> <?php edit_comment_link(__('Edit', 'vicuna'), '<span class="admin">', '</span>'); ?></dt>
				<dd>
<?php			comment_text() ?>
				</dd>
<?php			endforeach; ?>

				</dl>
<?php			}		// Add ?>

<?php		endif;

			if ('open' == $post->comment_status) : ?>

このコードの中のforeachからendoforeachがテーマファイル元々のコメント表示部分です。またwp_list_comments関数のすぐ上のif文はwp_list_comments関数に対応していない場合を想定した条件分けでが基本ですが、私の場合はそれだけでなく入れ子方式の設定のチェックを外したときも条件に入れてあります。

またcomments.phpファイルへはこれだけでなく、コメント記入欄に関する記述も変更する必要があります。それが46行目からで内容はこちら。

			if ('open' == $post->comment_status) : ?>
<div id="respond"></div> <!-- // Add -->

				<form class="post" method="post" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" id="commentsForm" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
					<fieldset>
					<legend><?php
					if( function_exists( 'comment_form_title') && get_option('thread_comments')):
						comment_form_title( __('Comment Form', 'vicuna'), __('Comment Form for %s', 'vicuna') );
					else :
						_e('Comment Form', 'vicuna');
					endif;
?></legend>
<?php				if( function_exists( 'cancel_comment_reply_link' ) && get_option('thread_comments') ){		// Add ?>
<!-- // Add Start -->
					<div id="cancel-comment-reply">
						<small><?php cancel_comment_reply_link()		// Add ?></small>
					</div>
<!-- // Add End -->
<?php				}		// Add ?>

					<div>
<?php
		// Add Start
					if( function_exists ( 'comment_id_fields' ) && get_option('thread_comments') ):
						comment_id_fields();
					else :
		// Add End
?>
						<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<?php				endif;		// Add ?>
					</div>

					<dl id="name-email">
<?php		if ( $user_ID ) : ?>
						<dt><?php _e('Logged in', 'vicuna'); ?></dt>
						<dd><?php echo $user_identity; ?> (<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="<?php _e('Log out of this account', 'vicuna'); ?>"><?php _e('Logout', 'vicuna'); ?></a>)</dd>
<?php		else : ?>
						<dt><label for="comment-author"><?php _e('Name', 'vicuna'); if ($req) echo " (". __('required', 'vicuna') .")"; ?></label></dt>
						<dd><input type="text" class="inputField" id="comment-author" name="author" size="20" value="" /></dd>
						<dt><label for="comment-email"><?php _e('Mail address', 'vicuna'); ?> (<?php _e('will not be published', 'vicuna'); ?>)<?php if ($req) echo " (". __('required', 'vicuna'). ")"; ?></label></dt>
						<dd><input type="text" class="inputField" size="20" id="comment-email" name="email" value="" /></dd>
<?php		endif; ?>
					</dl>
					<dl>
<?php		if ( !$user_ID ) : ?>
						<dt><label for="comment-url"><abbr title="Uniform Resource Identifer">URI</abbr></label></dt>
						<dd><input type="text" class="inputField" id="comment-url" name="url" size="20" value="http://" /></dd>
						<dt><?php _e('Remember personal info', 'vicuna'); ?></dt>
						<dd><input type="radio" class="radio" id="bakecookie" name="bakecookie" /> <label for="bakecookie"><?php _e('Yes', 'vicuna'); ?></label><input type="radio" class="radio" id="forget" name="bakecookie" onclick="forgetMe(this.form)" onkeypress="forgetMe(this.form)" value="<?php _e('Forget Info', 'vicuna'); ?>" /> <label for="forget"><?php _e('No', 'vicuna'); ?></label></dd>
<?php		endif; ?>
						<dt><label for="comment-text"><?php _e('Comment', 'vicuna'); ?><?php if ( allowed_tags() ) : ?><span><?php _e('You can use some <abbr title="Hyper Text Markup Language">HTML</abbr> tags for decorating.', 'vicuna'); ?></span><?php else : ?><span><?php _e('You cannot use <abbr title="Hyper Text Markup Language">HTML</abbr> tags', 'vicuna'); ?></span><?php endif; ?></label></dt>
						<dd><textarea id="comment-text" name="comment" rows="8" cols="50" onfocus="if (this.value == '<?php _e('Add Your Comment', 'vicuna'); ?>') this.value = '';" onblur="if (this.value == '') this.value = '<?php _e('Add Your Comment', 'vicuna'); ?>';"><?php _e('Add Your Comment', 'vicuna'); ?></textarea></dd>
					</dl>
					<div class="action">
						<input type="submit" class="submit post" id="comment-post" name="post" value="<?php _e('Post', 'vicuna'); ?>" />
					</div>
<?php do_action('comment_form', $post->ID);		// Add ?>
					</fieldset>

このコードの中の<div id="respond">はコメント横の『返信』リンクをクリックした際に飛んでくるためです。またcomment_form_title関数はコメントの状態（コメントへの返信かどうか）によって記入欄の題を変更してくれる関数、cancel_comment_reply_link関数はコメント返信をキャンセルする機能を持たせるリンクを作る関数です。さらにcomment_id_fieldsは隠しデータとしてコメントのIDとどのどのコメントIDへの返信かをHTMLコードとして埋め込んでおいてくれる関数です。

これでテーマフォルダ内のPHPへの変更は終了。でもこれだけではデザインは崩れてしまうので、使用しているvicunaのテーマファイル内にあるCSSファイルに変更したHTMLコードに応じたスタイルを設定して終了です。具体的に私の場合は3-context.cssに記述しておくことにしました。

…という具合に設定して現在に至ります。今のところさほどデザインに問題は出ていません。自分自身の技量からしたら十分かなっといったところ。…まぁ、vicunaさんがコメントの入れ子構造に対応するまでの応急処置ですが。

vicunaを使用していてコメントを入れ子構造に改編したいという方は参考にしてみてください。（説明がへたくそなのでわかりにくいこと必死ですが……）

関連記事：

関連記事は今のところありません