コメント

コメントはどのブログにとっても重要な部分であり、欠くことのできないパーツの一つだ。これによってだれでもフィードバックを送ることができるし、別々のウェブサイトやユーザーを一つのコミュニティとして共有することもできる。

私たちのテーマでは単体の投稿記事のときにだけコメントを表示するようにしていて、その機能はcomments.phpファイルが受け持っている。このファイルの中をのぞいてみると大量のPHPとHTMLが詰まっている：

<?php // Do not delete these lines
if (‘comments.php’ == basename($_SERVER[‘SCRIPT_FILENAME’]))die (‘Please do not load this page directly. Thanks!’);if (!empty($post->post_password)) { // if there’s a password

if ($_COOKIE[‘wp-postpass_’ . COOKIEHASH] != $post->post_password) { // and it doesn’t match the cookie

?>

<p class=“nocomments”><?php _e(“This post is password protected. Enter the password to view comments.”); ?><p>
<?php
return;

}
}

/* This variable is for alternating comment background */

$oddcomment = ‘alt’;
?>

<!– You can start editing here. –>

<?php if ($comments) : ?>

<h3 id=“comments”><?php comments_number(‘No Responses’, ‘One Response’, ‘% Responses’ );?> to “<?php the_title(); ?>”</h3>

<ol class=“commentlist”>

<?php foreach ($comments as $comment) : ?>

<li class=“<?php echo $oddcomment; ?>” id=“comment-<?php comment_ID() ?>”>
<cite><?php comment_author_link() ?></cite> Says:

<?php if ($comment->comment_approved == ‘0′) : ?>

<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br />

<small class=“commentmetadata”><a xhref=“#comment-<?php comment_ID() ?>” title=“”><?php comment_date(‘F jS, Y’) ?> at <?php comment_time() ?></a> <?php edit_comment_link(‘e’,‘’,‘’); ?></small>

<?php comment_text() ?>

</li>

<?php /* Changes every other comment to a different class */

if (‘alt’ == $oddcomment) $oddcomment = ‘’;
else $oddcomment = ‘alt’;

?>

<?php endforeach; /* end for each comment */ ?>

</ol>

<?php else : // this is displayed if there are no comments so far ?>

<?php if (‘open’ == $post-> comment_status) : ?>

<!– If comments are open, but there are no comments. –>

<?php else : // comments are closed ?>

<!– If comments are closed. –>
<p class=“nocomments”>Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>

<?php if (‘open’ == $post-> comment_status) : ?>

<h3 id=“respond”>Leave a Reply</h3>

<?php if ( get_option(‘comment_registration’) && !$user_ID ) : ?>

<p>You must be <a xhref=“<?php echo get_option(’siteurl’); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>”>logged in</a> to post a comment.</p>
<?php else : ?>

<form action=“<?php echo get_option(’siteurl’); ?>/wp-comments-post.php” method=“post” id=“commentform”>

<?php if ( $user_ID ) : ?>

<p>Logged in as <a xhref=“<?php echo get_option(’siteurl’); ?>/wp-admin/profile.php”><?php echo $user_identity; ?></a>. <a xhref=“<?php echo get_option(’siteurl’); ?>/wp-login.php?action=logout” title=“<?php _e(’Log out of this account’) ?>”>Logout »</a></p>

<?php else : ?>

<p><input type=“text” name=“author” id=“author” value=“<?php echo $comment_author; ?>” size=“22″ tabindex=“1″ />

<label for=“author”><small>Name <?php if ($req) _e(‘(required)’); ?></small></label></p>

<p><input type=“text” name=“email” id=“email” value=“<?php echo $comment_author_email; ?>” size=“22″ tabindex=“2″ />

<label for=“email”><small>Mail (will not be published) <?php if ($req) _e(‘(required)’); ?></small></label></p>

<p><input type=“text” name=“url” id=“url” value=“<?php echo $comment_author_url; ?>” size=“22″ tabindex=“3″ />

<label for=“url”><small>Website</small></label></p>

<?php endif; ?>

<!–<p><small><strong>XHTML:</strong> You can use these tags: <?php echo allowed_tags(); ?></small></p>–>

<p><textarea name=“comment” id=“comment” cols=“100%” rows=“10″ tabindex=“4″></textarea></p>

<p><input name=“submit” type=“submit” id=“submit” tabindex=“5″ value=“Submit Comment” />

<input type=“hidden” name=“comment_post_ID” value=“<?php echo $id; ?>” />
</p>
<?php do_action(‘comment_form’, $post->ID); ?>

</form>

<?php endif; // If registration required and not logged in ?>

<?php endif; // if you delete this the sky will fall on your head ?>

これは主に３つに分けることができる：

• 直接リンクとパスワードの保護
• コメント
• コメントの送信

では順番に見ていこう。

直接リンクとパスワードの保護

この部分ではcomments.phpファイルへの直接アクセスを防ぎ、正しいパスワードが入力されているか確認して投稿記事を保護する。

<?php // Do not delete these lines
if (‘comments.php’ == basename($_SERVER[‘SCRIPT_FILENAME’]))die (‘Please do not load this page directly. Thanks!’);if (!empty($post->post_password)) { // if there’s a password

if ($_COOKIE[‘wp-postpass_’ . COOKIEHASH] != $post->post_password) { // and it doesn’t match the cookie

?>

<p class=“nocomments”><?php _e(“This post is password protected. Enter the password to view comments.”); ?><p>
<?php
return;

}
}

/* This variable is for alternating comment background */

$oddcomment = ‘alt’;
?>

また、ここではこの行を削除してはならないことが記述されている。これは警告で絶対的なルールだ。

この一番上の箇所では、このファイルへ直接アクセスさせないようにしている：

if (‘comments.php’ == basename($_SERVER[‘SCRIPT_FILENAME’]))
die (‘Please do not load this page directly. Thanks!’);

これが実際に機能していることはブラウザでこのcomments.phpのURLを直接開いてみれば分かるだろう（こちらでお試し可）。上記のコードでは単にこのファイルを直接読込まないようにとの文字列が出力され、続いて「die」が実行される。PHPでは、「die」は実行中のスクリプトを停止させる。

実際には、このファイルに直接アクセスしても内密の情報は得られないのでこの保護機能は必要ない。ループは実行されていないし、WordPressはどんな情報も読込んでいないからだ。おそらくKubrickかWordPressの以前のバージョンの遺物だろう。

次の箇所ではパスワードをチェックしている：

if (!empty($post->post_password))
{
// if there’s a password
if ($_COOKIE[‘wp-postpass_’ . COOKIEHASH] != $post->post_password){
// and it doesn’t match the cookie
?><p class=“nocomments”><?php _e(“This post is password protected. Enter the password to view comments.”); ?><p>

<?php
return;
}
}

ここでは基本的に、該当の投稿記事にパスワードが設定されているかどうかをチェックしている。パスワードが設定されていれば次にパスワードcookieがあるかどうか、パスワードが一致するかどうかをチェックする。このワスワードcookieは、ユーザーが該当の投稿記事にログインしている場合にのみセットされ、WordPressによって別の箇所で処理される。この箇所の大部分はそのままにしておいた方がいいが、パスワードが入力されていないときに表示されるテキストは変更しても構わない。

コメント

いよいよ重要な箇所にきた – コメントそのものだ。まずコメントを簡単に確認して、次にコメントの数を表示する：

<?php if ($comments) : ?>
<h3 id=“comments”><?php comments_number(‘No Responses’, ‘One Response’, ‘% Responses’ );?> to “<?php the_title(); ?>”</h3>

comments_number関数はコメントの数を返し、条件によって「コメントなし」「コメント１つ」「コメント２つ以上」の３つの文字列のどれかを表示させる。ここでは普通の言葉を扱っている。

次の箇所が大半を占めている：

<ol class=“commentlist”><?php foreach ($comments as $comment) : ?><li class=“<?php echo $oddcomment; ?>” id=“comment-<?php comment_ID() ?>”>
<cite><?php comment_author_link() ?></cite> Says:

<?php if ($comment->comment_approved == ‘0′) : ?>

<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br />

<small class=“commentmetadata”><a xhref=“#comment-<?php comment_ID() ?>” title=“”><?php comment_date(‘F jS, Y’) ?> at <?php comment_time() ?></a> <?php edit_comment_link(‘e’,‘’,‘’); ?></small>

<?php comment_text() ?>

</li>

<?php /* Changes every other comment to a different class */

if (‘alt’ == $oddcomment) $oddcomment = ‘’;
else $oddcomment = ‘alt’;

?>

<?php endforeach; /* end for each comment */ ?>
</ol>

見てみると、コメントが順序付きリストで構成され、各リスト項目がそれぞれのコメントになっていることがすぐ分かるだろう。ここで使用しているPHPコンストラクトはforeach構文だ：

<?php foreach ($comments as $comment) : ?>

最初の引数$ commentsはWordPressによって提供されたコメントの配列だ。このforeach構文は簡単に言い換えると、「$ comments配列内の各要素ごとに値を$commentに割り当てる」ということ。これにより各コメントを取り出して、その情報を変数$ commentに割り当てることができる。

<li class=“<?php echo $oddcomment; ?>” id=“comment-<?php comment_ID() ?>”>

これはコメントの始まりの部分で、クラスには変数$oddcommentが設定されている。これは奇妙に見えるかもしれないが、数行あとの次のコードで説明がつく：

<?php /* Changes every other comment to a different class */
if (‘alt’ == $oddcomment) $oddcomment = ‘’;else $oddcomment = ‘alt’;
?>

簡単に言えば、コメント一つおきに「alt」クラスを割当ててコメントのクラスを変更している。つまり、最初のコメントは「alt」クラスを持つが、２番目のコメントはこのクラスを持たなくて、３番目のコメントはまたこのクラスを持つ。これによりコメントを一つおきにスタイリングすることができて読みやすくなる。後でもう少し詳しく見ていこう。

また、コメントへの直リンクを可能にするリンクアンカーも設定されている。

残りのコードは単純だ：

<cite><?php comment_author_link() ?></cite> Says:
<?php if ($comment->comment_approved == ‘0′) : ?><em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br /><small class=“commentmetadata”><a xhref=“#comment-<?php comment_ID() ?>” title=“”><?php comment_date(‘F jS, Y’) ?> at <?php comment_time() ?></a> <?php edit_comment_link(‘e’,‘’,‘’); ?></small>

<?php comment_text() ?>

最初に投稿者名とURLが表示され、続いてコメント承認待ちのメッセージが表示される（承認されていれば何も表示されない）。次にコメントのメタデータ – ID番号、日付、そして管理者用に編集リンク – が表示される。最後の部分がコメント本体だ。このコードはすべて変更することができるし、情報の表示順を全く変えてしまうこともできる。このガイドでは「Says」 を 「says」（このほうがよりよい英語だ！）に変えるだけにする。

もしコメントが何も無ければ次のコードが実行される：

<?php else : // this is displayed if there are no comments so far ?><?php if (‘open’ == $post-> comment_status) : ?><!– If comments are open, but there are no comments. –>

<?php else : // comments are closed ?>

<!– If comments are closed. –>
<p class=“nocomments”>Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>

このテキストとスタイルは変更しても構わない。

コメントの送信

comments.phpの残りの部分は、訪問者がコメントを残すためのフォームを表示している。お望みならレイアウトを変更することもできる。言及しておいた方がいい箇所は：

<?php if ( $user_ID ) : ?><p>Logged in as <a xhref=“<?php echo get_option(’siteurl’); ?>/wp-admin/profile.php”><?php echo $user_identity; ?></a>. <a xhref=“<?php echo get_option(’siteurl’); ?>/wp-login.php?action=logout” title=“<?php _e(’Log out of this account’) ?>”>Logout »</a></p>

WordPress はログインしているユーザーを把握していて、特別な変数を通じてその把握状況を利用することができる。今回の場合その特別な変数とは$ user_ID と $user_identityで、それぞれログインしているかどうかとそのユーザーの表示名を知ることができる。

コメントのスタイリング

すでに見たようにコメントは順序付きのリスト構造になっていて、これがスタイリングする上で重要な要素となる。

ここでは簡単なブロックスタイルを施した：

ol.commentlist
{
width: 90%;
margin: 0 auto;}ol.commentlist li
{
margin-bottom: 1.5em;
border: 1px solid #c69835;

padding: 5px;
background-color: #f5de74;
}

ol.commentlist li.alt
{
background-color: #fdf6a7;

}

ol.commentlist a
{
color: #bd492a;
}

small.commentmetadata
{

font-size: 0.8em;
margin-bottom: 1em;
display: block;

}

幅を少し狭めて中央に置いた。コメントとコメントの間、そしてコメント内にもにスペースを入れた。コメントのメタデータにはさらにスペースを入れ、すべてを色つきブロック内に囲んだ。ブロックの色は前述したように「alt」をクラスを使用して一つごとに変えている。

では実物を見てみよう：