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

前面跟大家介紹了《WordPress主題製作全過程（九）：製作single.php#》，本文繼續跟大家介紹如何製作comments.php，下面一起來看看吧~

今天我們來製作評論主題的評論模組。在主題目錄Aurelius下新建comments.php，在single.php剪下以下程式碼，貼上到comments.php：

<!– Comment’s List –>
<h3>Comments</h3>
<div class="hr dotted clearfix"> </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=">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"> </div>
<!– Comment Form –>
<form id="comment_form" action="" method="post">
<h3>Add a comment</h3>
<div class="hr dotted clearfix"> </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[&#39;SCRIPT_FILENAME&#39;]) && &#39;comments.php&#39; == basename($_SERVER[&#39;SCRIPT_FILENAME&#39;]))
die (&#39;Please do not load this page directly. Thanks!&#39;);
?>

因為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=">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>

改成：

<?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(&#39;type=comment&callback=aurelius_comment&#39;);
        }
    ?>

以上程式碼的意思大致上也可以看得出來了，就是一大堆如果...就....，如果以上條件都不滿足就列出所有評論。現在將主題資料夾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(&#39;get_avatar&#39;) && get_option(&#39;show_avatars&#39;)) { echo get_avatar($comment, 48); } ?>
 <?php comment_reply_link(array_merge( $args, array(&#39;reply_text&#39; => '回复','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(&#39;Y-m-d H:i&#39;); ?></div>
   <?php edit_comment_link(&#39;修改&#39;); ?>
</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"> </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(&#39;comment_registration&#39;) && !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(&#39;siteurl&#39;); ?>/wp-comments-post.php" method="post">
    <h3>发表评论</h3>
    <div class="hr dotted clearfix"> </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(&#39;siteurl&#39;); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="退出登录">退出 »</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[&#39;commentform&#39;].submit()" class="button medium black right">发表评论</a> </li>
    </ul>
    <?php comment_id_fields(); ?>
    <?php do_action(&#39;comment_form&#39;, $post->ID); ?>
</form>
<?php endif; ?>

函數名稱函數功能判斷使用者是否登入部落格登入位址用於取得評論者部落格位址$comment_author讀取cookie，如果該用戶之前已經發表過評論則自動幫助用戶填寫用戶名$ comment_author_email讀取cookie，如果該用戶之前已經發表過評論則自動幫助用戶填寫Email$comment_author_url#讀取cookie，如果該使用者先前已發表評論則自動幫助使用者填寫部落格位址do_action('comment_form', $post->ID);此函數為某一些外掛程式預留wp_logout_url退出登入的連結

is_user_logged_in
wp_login_url
get_comment_author_link

推薦學習：《

WordPress教程》

以上是WordPress主題製作全過程（十）：製作comments.php的詳細內容。更多資訊請關注PHP中文網其他相關文章！