WordPress主題制作全過程（十）：制作comments.php

來源于：

http://www.shouce.ren/post/view/id/3305

新建comments.php，復制以下代碼，粘貼到comments.php：

?<!– Comment’s List –>
? ??<h3>Comments</h3>
? ??<div?class="hr dotted clearfix">&nbsp;</div>
? ??<ol?class="commentlist">
? ? ? ??<li?class="comment">
? ? ? ? ? ??<div?class="gravatar">?<img?alt=""?src=’images/gravatar.png’?height=’48′?width=’48′?/>?<a?class="comment-reply-link"?href=&quot;>Reply</a>?</div>
? ? ? ? ? ??<div?class="comment_content">
? ? ? ? ? ? ? ??<div?class="clearfix">?<cite?class="author_name"><a?href="">Joe Bloggs</a></cite>
? ? ? ? ? ? ? ? ? ??<div?class="comment-meta commentmetadata">January 6, 2010 at 6:26 am</div>
? ? ? ? ? ? ? ??</div>
? ? ? ? ? ? ? ??<div?class="comment_text">
? ? ? ? ? ? ? ? ? ??<p>Donec leo. Aliquam risus elit, luctus vel, interdum vitae, malesuada eget, elit. Nulla vitae ipsum. Donec ligula ante, bibendum sit amet, elementum quis, viverra eu, ante. Fusce tincidunt. Mauris pellentesque, arcu eget feugiat accumsan, ipsum mi molestie orci, ut pulvinar sapien lorem nec dui.</p>
? ? ? ? ? ? ? ??</div>
? ? ? ? ? ??</div>
? ? ? ??</li>
? ??</ol>
? ??<div?class="hr clearfix">&nbsp;</div>
? ??<!– Comment Form –>
? ??<form?id="comment_form"?action=""?method="post">
? ? ? ??<h3>Add a comment</h3>
? ? ? ??<div?class="hr dotted clearfix">&nbsp;</div>
? ? ? ??<ul>
? ? ? ? ? ??<li?class="clearfix">
? ? ? ? ? ? ? ??<label?for="name">Your Name</label>
? ? ? ? ? ? ? ??<input?id="name"?name="name"?type="text"?/>
? ? ? ? ? ??</li>
? ? ? ? ? ??<li?class="clearfix">
? ? ? ? ? ? ? ??<label?for="email">Your Email</label>
? ? ? ? ? ? ? ??<input?id="email"?name="email"?type="text"?/>
? ? ? ? ? ??</li>
? ? ? ? ? ??<li?class="clearfix">
? ? ? ? ? ? ? ??<label?for="email">Your Website</label>
? ? ? ? ? ? ? ??<input?id="website"?name="website"?type="text"?/>
? ? ? ? ? ??</li>
? ? ? ? ? ??<li?class="clearfix">
? ? ? ? ? ? ? ??<label?for="message">Comment</label>
? ? ? ? ? ? ? ??<textarea?id="message"?name="message"?rows="3"?cols="40"></textarea>
? ? ? ? ? ??</li>
? ? ? ? ? ??<li?class="clearfix">
? ? ? ? ? ??<!– Add Comment Button –>
? ? ? ? ? ??<a?type="submit"?class="button medium black right">Add comment</a>?</li>
? ? ? ??</ul>
? ??</form>

在single.php需要顯示評論的位置添加以下代碼：

<?php?comments_template();??>

以上語句的作用就是將comments.php里的所有內容導入到single.php中，與直接在single.php寫comments.php中的代碼效果是一樣的。

為了安全起見，不讓惡意用戶直接打開評論文件，請在comments.php頭部添加以下代碼：

<?php
? ??if?(isset($_SERVER['SCRIPT_FILENAME'])?&&?'comments.php'?==?basename($_SERVER['SCRIPT_FILENAME']))
? ? ? ??die?('Please do not load this page directly. Thanks!');
?>

因為WordPress的輸出評論函數wp_list_comments()輸出的評論代碼與我們主題的評論代碼不一樣的，我們得自定義我們的評論列表，將comments.php中的以下代碼刪除（以下代碼用于列出文章的所有評論）：

<li?class="comment">
? ??<div?class="gravatar">?<img?alt=""?src=’images/gravatar.png’?height=’48′?width=’48′?/>?<a?class="comment-reply-link"?href=&quot;>Reply</a>?</div>
? ??<div?class="comment_content">
? ? ? ??<div?class="clearfix">?<cite?class="author_name"><a?href="">Joe Bloggs</a></cite>
? ? ? ? ? ??<div?class="comment-meta commentmetadata">January 6, 2010 at 6:26 am</div>
? ? ? ??</div>
? ? ? ??<div?class="comment_text">
? ? ? ??<p>Donec leo. Aliquam risus elit, luctus vel, interdum vitae, malesuada eget, elit. Nulla vitae ipsum. Donec ligul? a ante, bibendum sit amet, elementum quis, viverra eu, ante. Fusce tincidunt. Mauris pellentesque, arcu eget feugiat accumsan, ipsum mi molestie orci, ut pulvinar sapien lorem nec dui.</p>
? ? ? ??</div>
? ??</div>
</li>

改成：

?<?php?
? ??if?(!empty($post->post_password)?&&?$_COOKIE['wp-postpass_'?.?COOKIEHASH]?!=?$post->post_password)?{?
? ? ? ??// if there's a password
? ? ? ??// and it doesn't match the cookie
? ???>
? ? <li class="decmt-box">
? ? ? ? <p><a href="#addcomment">請輸入密碼再查看評論內容.</a></p>
? ? </li>
? ??<?php?
? ? ? ??}?else?if?(?!comments_open()?)?{
? ???>
? ? <li class="decmt-box">
? ? ? ? <p><a href="#addcomment">評論功能已經關閉!</a></p>
? ? </li>
? ??<?php?
? ? ? ??}?else?if?(?!have_comments()?)?{?
? ???>
? ? <li class="decmt-box">
? ? ? ? <p><a href="#addcomment">還沒有任何評論，你來說兩句吧</a></p>
? ? </li>
? ??<?php?
? ? ? ??}?else?{
? ? ? ? ? ? wp_list_comments('type=comment&callback=aurelius_comment');
? ? ? ??}
? ???>

以上代碼的意思大致也可以看得出來了，就是一大堆? 如果…就…. ，如果以上條件都不滿足就列出所有評論。

在functions.php中添加以下代碼：

function aurelius_comment($comment, $args, $depth)?
{
? ?$GLOBALS['comment'] = $comment; ?>
? ?<li class="comment" id="li-comment-<?php?comment_ID();??>">
? ? ? ? <div class="gravatar">?<?php?if?(function_exists('get_avatar')?&&?get_option('show_avatars'))?{?echo?get_avatar($comment,?48);?}??>
?<?php?comment_reply_link(array_merge(?$args,?array('reply_text'?=>?'回復','depth'?=>?$depth,?'max_depth'?=>?$args['max_depth'])))??>?</div>
? ? ? ? <div class="comment_content" id="comment-<?php?comment_ID();??>"> ??
? ? ? ? ? ? <div class="clearfix">
? ? ? ? ? ? ? ? ? ??<?php?printf(__('<cite class="author_name">%s</cite>'),?get_comment_author_link());??>
? ? ? ? ? ? ? ? ? ? <div class="comment-meta commentmetadata">發表于：<?php?echo?get_comment_time('Y-m-d H:i');??></div>
? ? ? ? ? ? ? ? ? ? &nbsp;&nbsp;&nbsp;<?php?edit_comment_link('修改');??>
? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="comment_text">
? ? ? ? ? ? ? ??<?php?if?($comment->comment_approved?==?'0')?:??>
? ? ? ? ? ? ? ? ? ? <em>你的評論正在審核，稍后會顯示出來！</em><br />
? ? ? ??<?php?endif;??>
? ? ? ??<?php?comment_text();??>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </li>
<?php?}??>

以上代碼所用到的WordPress函數及相應的說明：

?好，現在在你的文章頁面底部就可以正常地顯示評論了！現在我們繼續來制作提交評論的表單，將以下代碼刪除（也就是評論表單的代碼）：

<!– Comment Form –>
<form?id="comment_form"?action=""?method="post">
? ??<h3>Add a comment</h3>
? ??<div?class="hr dotted clearfix">&nbsp;</div>
? ??<ul>
? ? ? ??<li?class="clearfix">
? ? ? ? ? ??<label?for="name">Your Name</label>
? ? ? ? ? ??<input?id="name"?name="name"?type="text"?/>
? ? ? ??</li>
? ? ? ??<li?class="clearfix">
? ? ? ? ? ??<label?for="email">Your Email</label>
? ? ? ? ? ??<input?id="email"?name="email"?type="text"?/>
? ? ? ??</li>
? ? ? ??<li?class="clearfix">
? ? ? ? ? ??<label?for="email">Your Website</label>
? ? ? ? ? ??<input?id="website"?name="website"?type="text"?/>
? ? ? ??</li>
? ? ? ??<li?class="clearfix">
? ? ? ? ? ??<label?for="message">Comment</label>
? ? ? ? ? ??<textarea?id="message"?name="message"?rows="3"?cols="40"></textarea>
? ? ? ??</li>
? ? ? ??<li?class="clearfix">
? ? ? ? ? ??<!– Add Comment Button –>
? ? ? ? ? ??<a?type="submit"?class="button medium black right">Add comment</a>?</li>
? ??</ul>
</form>

改成：

<?php?
if?(?!comments_open()?)?:
// If registration required and not logged in.
elseif?(?get_option('comment_registration')?&&?!is_user_logged_in()?)?:?
?>
<p>你必須 <a href="<?php?echo?wp_login_url(?get_permalink()?);??>">登錄</a> 才能發表評論.</p>
<?php?else??:??>
<!-- Comment Form -->
<form id="commentform" name="commentform" action="<?php?echo?get_option('siteurl');??>/wp-comments-post.php" method="post">
? ? <h3>發表評論</h3>
? ? <div class="hr dotted clearfix">&nbsp;</div>
? ? <ul>
? ? ? ??<?php?if?(?!is_user_logged_in()?)?:??>
? ? ? ? <li class="clearfix">
? ? ? ? ? ? <label for="name">昵稱</label>
? ? ? ? ? ? <input type="text" name="author" id="author" value="<?php?echo?$comment_author;??>" size="23" tabindex="1" />
? ? ? ? </li>
? ? ? ? <li class="clearfix">
? ? ? ? ? ? <label for="email">電子郵件</label>
? ? ? ? ? ? <input type="text" name="email" id="email" value="<?php?echo?$comment_author_email;??>" size="23" tabindex="2" />
? ? ? ? </li>
? ? ? ? <li class="clearfix">
? ? ? ? ? ? <label for="email">網址(選填)</label>
? ? ? ? ? ? <input type="text" name="url" id="url" value="<?php?echo?$comment_author_url;??>" size="23" tabindex="3" />
? ? ? ? </li>
? ? ? ??<?php?else?:??>
? ? ? ? <li class="clearfix">您已登錄:<a href="<?php?echo?get_option('siteurl');??>/wp-admin/profile.php"><?php?echo?$user_identity;??></a>. <a href="<?php?echo?wp_logout_url(get_permalink());??>" title="退出登錄">退出 &raquo;</a></li>
? ? ? ??<?php?endif;??>
? ? ? ? <li class="clearfix">
? ? ? ? ? ? <label for="message">評論內容</label>
? ? ? ? ? ? <textarea id="message comment" name="comment" tabindex="4" rows="3" cols="40"></textarea>
? ? ? ? </li>
? ? ? ? <li class="clearfix">
? ? ? ? ? ? <!-- Add Comment Button -->
? ? ? ? ? ? <a href="javascript:void(0);" onClick="Javascript:document.forms['commentform'].submit()" class="button medium black right">發表評論</a> </li>
? ? </ul>
? ??<?php?comment_id_fields();??>
? ??<?php?do_action('comment_form',?$post->ID);??>
</form>
<?php?endif;??>

好了，評論模板comments.php制作完畢！

類似下面這樣：

再自己美化美化即可。