最新 WordPress 主題製作之新手教程系列 （十）

導讀：製作 comments php 今天我們來製作評論主題的評論模塊。在主題目錄 Aurelius 下新建 comments php，在 single php 剪切以下代碼，粘貼到 comments p

今天我們來製作評論主題的評論模塊。在主題目錄 Aurelius 下新建 comments.php，在 single.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 原位置添加代碼：

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

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

     因為 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』);
}
?>

  以上代碼的意思大致也可以看得出來了，就是一大堆 如果…就….，如果以上條件都不滿足就列出所有評論。現在將主題文件夾 Aurelius 中的 functions.php 中的 ?> ，改成以下代碼，如果你之前從本博客下載到的 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>
<?php } ?>

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

函數名稱	函數功能
get _avatar($comment, 48)	獲取評論者的 gravatar 頭像，尺寸為 48 * 48
comment_reply_link()	回覆留言的鏈接
get_comment_author_link	用於獲取評論者博客地址
get_comment_time	獲取評論發佈時間
edit_comment_link	管理員修改評論的鏈接
comment_text()	輸出評論內容

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

<!– 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; ?>

函數名稱	函數功能
is_user_logged_in	判斷用户是否登錄
wp_login_url	博客登錄地址
get_comment_author_link	用於獲取評論者博客地址
$comment_author	讀取 cookie，如果該用户之前已經發表過評論則自動幫助用户填寫用户名
$comment_author_email	讀取 cookie，如果該用户之前已經發表過評論則自動幫助用户填寫 Email
$comment_author_url	讀取 cookie，如果該用户之前已經發表過評論則自動幫助用户填寫博客地址
do_action(『comment_form』, $post->ID);	該函數為某些插件預留
wp_logout_url	退出登錄的鏈接

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