WordPress主题制作课程#11：制作文章评论文件comments.php

2016-7-14 WordPress教程 2463

wordpress主题的每篇文章或单页面都有访客或用户评论留言功能，上一课程已经把Aurelius主题文章页面的内容部分完成，请看WordPress主题制作课程#10：制作文章内容页文件single.php，现在继续来制作主题文章页面的评论列表和评论框部分。

制作comments.php文件：

在主题文件夹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文件的以上代码替换为：

1	<?php comments_template(); ?>

作用是在single.php文件中导入comments.php的所有内容，与把comments.php文件中的代码直接放在single.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() 输出的评论部分HTML代码和主题的评论部分HTML代码不同，因此需要自定义评论列表，在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; ?>