WordPress主题制作全过程（十）：制作comments.php

日期： 标签：WordPress教程，主题制作
如需帮忙改代码，或者WordPress二次开发、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['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=">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>
					   <?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"> </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"> </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="退出登录">退出 »</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制作完毕！最后本次修改后的主题文件下载：

下载此文件

WordPress主题制作全过程完整列表：

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：
原文出处：露兜即刻 https://www.ludou.org/create-wordpress-themes-comments.html
露兜
作者：露兜 » kaapass@outlook.com  QQ 825533758

业余编程爱好者。

153 条留言

点此留言
1 2 3 80
  1. 我爱我

    <script>
    $(".background img").hide();
    $(".background img").eq(4).show();
    $(".ctrl a").mousemove(function(){
    $(".ctrl a").removeClass("current")
    $(this).addClass("current")

    $(".ctrl a").index(this);
    $(".background img").hide();
    $(".background img").eq($(".ctrl a").index(this)).show();
    })

    </script>

    怎么能让这种功能显示出来啊？

    回复
  2. 小牛

    非常好的文章，之前做了html+css的静态网站。现在想通过学习wordpress做一个动态升级。谢谢博主。

    回复
  3. xioce xioce

    非常好

    回复
  4. David

    如果嫌麻烦，直接用标准评论函数 comment_form() ，省时省力。配合css还是很好看的。

    回复
    • 露兜

      @David 当时出这个教程的时候，这个函数还没出来。

      回复
      • nikk

        @露兜 哈哈，老博客了，对我入门很有帮助

        回复
  5. 课间十分钟 课间十分钟

    在做评论的时候出现Warning: Cannot modify header information时什么回事

    回复
  6. abby

    请问想实现 点击回复时 在下方出现评论框 应该怎么做

    回复
  7. 欧频优艺 欧频优艺

    按教程做出了一款主题，大家看看怎样，免费提供下载：http://openue.com/openbox

    回复
    • 露兜

      @欧频优艺 你这主题。。。
      下载解压出来一大坨，不知道去哪找主题文件。主题文件要放到一个文件夹中，压缩文件夹提供下载

      回复
  8. Nell

    function.php文件要怎么做哦？

    回复
  9. 山野愚人居 山野愚人居

    ajax提交评论怎么实现呢？

    回复
  10. 大挖酱 大挖酱

    管用，感谢分享

    回复
  11. deajax deajax

    博主您好！我是在是没办法了，来来回回调了一整天，实在是不知道哪里做错了，只要加了function那一段，退出登录和再登录都有问题，我也不知道哪里出问题了，删了function那一段就好了。拜托拜托 教教我

    回复
    • 露兜

      @deajax 退出登录和再登录都有问题，具体是什么问题？有什么错误提示，还是。。。

      回复
      • deajax deajax

        @露兜 没有提示，就是页面空白，登录不了，也登出不了，我下午找到了另外一篇文档，上面是把function里的那段话写到comments.php里，代替wp_list_comments()，我试了一下好了。对您对回复再次表示感谢！谢谢！！

        回复
        • 露兜

          @deajax 那就是你复制代码出现错误了，但是你的php不显示错误显示。请在php.ini中将display_errors改成on

          回复
  12. Aerry Aerry

    请问一下，评论文件里哪个php是调用function里评论框架的？

    回复
    • leo

      @Aerry 评论的答复模板怎么写。在提问上插入答复呢

      回复
      • 露兜

        @leo 百度/谷歌：WordPress 嵌套 评论

        回复
  13. 友谊

    博主
    回复
    是不是要写JS才能回复？

    回复
  14. Elay

    很不错的教程，受教了

    回复
  15. keoy

    太强大了 8年后的我前来补课 小前端一枚。。。

    回复
  16. vince

    不知道为什么，之前未审核的评论发布后评论块可以看到“正在等待审核”，现在发完评论底部没有未审核评论的显示了。

    回复
  17. oemsun oemsun

    functions.php 最后的li标签没有关闭！！！

    回复
  18. {author[1]} {author[1]}

    functions.php 最后的li标签没有关闭！！！

    回复
    • 露兜

      @{author[1]} 参考：
      https://www.ludou.org/create-wordpress-themes-comments.html/comment-page-2#comment-13063

      回复
1 2 3

发表留言