wordpress主题制作教程(十一):评论模板comments.php

前面我们制作了文章单页模板,我们可以发现单页模板的代码跟index.php差不多,不过今天我们让它们的差别大一点,我们给文章模板加入评论表单,让访客可以发表评论。

首先在主题文件夹下面新建一个文件comments.php,然后打开single.php文件,将里面的评论代码剪切出来,粘贴到comments.php文件中,要剪切的代码如下:

  1. <!– Comment’s List –>   
  2.    <h3>Comments</h3>   
  3.    <div class="hr dotted clearfix">&nbsp;</div>   
  4.    <ol class="commentlist">   
  5.        <li class="comment">   
  6.            <div class="gravatar"> <img alt="" src=’images/gravatar.png’ height=’48′ width=’48′ /> <a class="comment-reply-link" href=&quot;>Reply</a> </div>   
  7.            <div class="comment_content">   
  8.                <div class="clearfix"> <cite class="author_name"><a href="">Joe Bloggs</a></cite>   
  9.                    <div class="comment-meta commentmetadata">January 6, 2010 at 6:26 am</div>   
  10.                </div>   
  11.                <div class="comment_text">   
  12.                    <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>   
  13.                </div>   
  14.            </div>   
  15.        </li>   
  16.    </ol>   
  17.    <div class="hr clearfix">&nbsp;</div>   
  18.    <!– Comment Form –>   
  19.    <form id="comment_form" action="" method="post">   
  20.        <h3>Add a comment</h3>   
  21.        <div class="hr dotted clearfix">&nbsp;</div>   
  22.        <ul>   
  23.            <li class="clearfix">   
  24.                <label for="name">Your Name</label>   
  25.                <input id="name" name="name" type="text" />   
  26.            </li>   
  27.            <li class="clearfix">   
  28.                <label for="email">Your Email</label>   
  29.                <input id="email" name="email" type="text" />   
  30.            </li>   
  31.            <li class="clearfix">   
  32.                <label for="email">Your Website</label>   
  33.                <input id="website" name="website" type="text" />   
  34.            </li>   
  35.            <li class="clearfix">   
  36.                <label for="message">Comment</label>   
  37.                <textarea id="message" name="message" rows="3" cols="40"></textarea>   
  38.            </li>   
  39.            <li class="clearfix">   
  40.            <!– Add Comment Button –>   
  41.            <a type="submit" class="button medium black right">Add comment</a> </li>   
  42.        </ul>   
  43.    </form>  

然后在single.php文件原来的位置添加代码:

  1. <?php comments_template(); ?>  

comments_template()函数默认的就是加载主题文件夹下面的comments.php文件,这个函数也是可以带参数的,以便让你可以加载别的文件,比如某些页面你需要加载一个不一样的评论表单,你就需要使用comments_template()带上参数,这里不细说。
为了防止某些恶意用户直接打开评论文件,我们在comments.php的头部添加代码:

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

修改评论列表

wordpress有自动输出评论列表的函数wp_list_comments(),所以我们将原来的评论列表代码删除,换上这个函数,但是我们还需要加一些判断功能,比如评论需要密码才能查看、评论已经关闭、还没有评论这几个情况都要有不同的输出,所以将原来的评论代码:

  1. <li class="comment">   
  2.     <div class="gravatar"> <img alt="" src=’images/gravatar.png’ height=’48′ width=’48′ /> <a class="comment-reply-link" href=&quot;>Reply</a> </div>   
  3.     <div class="comment_content">   
  4.         <div class="clearfix"> <cite class="author_name"><a href="">Joe Bloggs</a></cite>   
  5.             <div class="comment-meta commentmetadata">January 6, 2010 at 6:26 am</div>   
  6.         </div>   
  7.         <div class="comment_text">   
  8.         <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>   
  9.         </div>   
  10.     </div>   
  11. </li>  

替换成:

  1. <?php    
  2.    if (!emptyempty($post->post_password) && $_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {    
  3.        // if there's a password   
  4.        // and it doesn't match the cookie   
  5.    ?>   
  6.    <li class="decmt-box">   
  7.        <p><a href="#addcomment">请输入密码再查看评论内容.</a></p>   
  8.    </li>   
  9.    <?php    
  10.        } else if ( !comments_open() ) {   
  11.    ?>   
  12.    <li class="decmt-box">   
  13.        <p><a href="#addcomment">评论功能已经关闭!</a></p>   
  14.    </li>   
  15.    <?php    
  16.        } else if ( !have_comments() ) {    
  17.    ?>   
  18.    <li class="decmt-box">   
  19.        <p><a href="#addcomment">还没有任何评论,你来说两句吧</a></p>   
  20.    </li>   
  21.    <?php    
  22.        } else {   
  23.            wp_list_comments('type=comment&callback=aurelius_comment');   
  24.        }   
  25.    ?>  

上面的wp_list_comments函数中我们家里两个参数,其中type=comment意思只输出评论,除了评论还有pings\trackback\ pingback等等什么的,callback=aurelius_comment意思是调用一个自定义的函数函数aurelius_comment来显示评论。
自定义的函数我们需要添加在主题的functions.php文件中,所以请在functions.php中的“?>”前面加上下面的代码,如果你的functions.php文件中已经存在了下面的代码,就不要再添加了:

  1. function aurelius_comment($comment$args$depth)    
  2. {   
  3.    $GLOBALS['comment'] = $comment; ?>   
  4.    <li class="comment" id="li-comment-<?php comment_ID(); ?>">   
  5.         <div class="gravatar"> <?php if (function_exists('get_avatar') && get_option('show_avatars')) { echo get_avatar($comment, 48); } ?>   
  6.  <?php comment_reply_link(array_merge$argsarray('reply_text' => '回复','depth' => $depth, 'max_depth' => $args['max_depth']))) ?> </div>   
  7.         <div class="comment_content" id="comment-<?php comment_ID(); ?>">      
  8.             <div class="clearfix">   
  9.                     <?php printf(__('<cite class="author_name">%s</cite>'), get_comment_author_link()); ?>   
  10.                     <div class="comment-meta commentmetadata">发表于:<?php echo get_comment_time('Y-m-d H:i'); ?></div>   
  11.                     &nbsp;&nbsp;&nbsp;<?php edit_comment_link('修改'); ?>   
  12.             </div>   
  13.   
  14.             <div class="comment_text">   
  15.                 <?php if ($comment->comment_approved == '0') : ?>   
  16.                     <em>你的评论正在审核,稍后会显示出来!</em><br />   
  17.         <?php endif; ?>   
  18.         <?php comment_text(); ?>   
  19.             </div>   
  20.         </div>   
  21.     </li>   
  22. <?php } ?>  

上面的自定义函数中用到的几个函数的说明如下:

  1. <?php      
  2. get_avatar($id_or_email,$size,$default$alt);      
  3. //$id_or_email这个参数必须,可以使一个用户ID、一个email,或者直接一个comment对象,上面代码就是直接将评论对象作为参数      
  4. //$size,这个参数就是头像大小,默认是96,上面代码设为32      
  5. //$default 一个图片地址,就是用户没有头像是显示的图片,默认是后台设置的那个      
  6. //$alt 就是图片的$alt信息了,我觉得alt信息应该用评论者名字    
  7. ?>    
  1. <?php comment_reply_link();   
  2. //回复链接   
  3. ?>  
  1. <?php   
  2. get_comment_author_link();   
  3. //获取评论者的链接   
  4. ?>  
  1. <?php   
  2. get_comment_time();   
  3. //获取评论时间   
  4. edit_comment_link();   
  5. //编辑评论的链接   
  6. comment_text();   
  7. //输出评论内容   
  8. ?>  

添加了上面的代码评论已经能正确显示了,接下来添加提交评论的表单。
评论表单
将原来comments.php中的评论表单代码删除:

  1. <!– Comment Form –>   
  2. <form id="comment_form" action="" method="post">   
  3.     <h3>Add a comment</h3>   
  4.     <div class="hr dotted clearfix">&nbsp;</div>   
  5.     <ul>   
  6.         <li class="clearfix">   
  7.             <label for="name">Your Name</label>   
  8.             <input id="name" name="name" type="text" />   
  9.         </li>   
  10.         <li class="clearfix">   
  11.             <label for="email">Your Email</label>   
  12.             <input id="email" name="email" type="text" />   
  13.         </li>   
  14.         <li class="clearfix">   
  15.             <label for="email">Your Website</label>   
  16.             <input id="website" name="website" type="text" />   
  17.         </li>   
  18.         <li class="clearfix">   
  19.             <label for="message">Comment</label>   
  20.             <textarea id="message" name="message" rows="3" cols="40"></textarea>   
  21.         </li>   
  22.         <li class="clearfix">   
  23.             <!– Add Comment Button –>   
  24.             <a type="submit" class="button medium black right">Add comment</a> </li>   
  25.     </ul>   
  26. </form>  

实际上你不需要再手动输入每个表单项了,新版的wordprss提供了一个非常方便的函数:comment_form(),添加代码如下:

  1. <?php if ( comments_open() ) : ?>   
  2.   
  3.   
  4. <?php if ( get_option('comment_registration') && !$user_ID ) : ?>   
  5. <p><?php printf(__('你需要先 <a href="%s">登录</a> 才能发表评论.'), get_option('siteurl')."/wp-login.php?redirect_to=".urlencode(get_permalink()));?></p>   
  6. <?php else : ?>   
  7.   
  8. <?php $defaults = array
  9.     'comment_notes_before' => '',   
  10.     'label_submit'         => __( '提交评论' ),   
  11.     'comment_notes_after' =>''  
  12. );   
  13. comment_form($defaults);    
  14.  endif;   
  15. else :  ?>   
  16. <p><?php _e('对不起评论已经关闭.'); ?></p>   
  17. <?php endif; ?>  

可以看到上面的代码中也添加了判断,看是否允许评论,是否需要登录才能评论。
你完全可以通过comment_form()函数的各个参数再配合css输出一个个性化的表单,这在以后的教程中讲。

本篇教程之前的几篇教程是

本篇教程之后的几篇教程是

没有找到你要找的内容?你可以通过搜索你要找的内容,或者给我们留言。

已有19条评论

  1. www.m9uc.com奇迹sf一条龙私服开区0v5t1e

    风云雄霸天下服务端天之炼狱一条龙大话西游服务端精灵复兴私服务端传奇世界服务端刀剑服务端十二之天服务端新天骄服务端卧龙吟服务端真封神服务端惊天动地服务端红月服务端魔力宝贝服务端飞飞务服务端劲舞团服务端热血江湖服务端倚天I服务端网页游戏服务端天堂2服务端大话西游服务端凡人修真服务端大话西游服务端页游服务端问道服务端跑跑卡丁车服务端英雄远征服务端幻灵游侠私服务端洪荒神话私服务端完美世界服务端烈焰服务端洛汗服务端新魔界服务端绝对女神私服务端永恒之塔服务端传奇服务端密传-服务端QQ西游私服务端天堂1私服务端千年服务端蜀门服务端征途服务端机战服务端神泣服务端醉西游服务端天堂I服务端挑战OL服务端剑侠情缘-

  2. www.7egm.com私服一条龙服务开区制作服务端4j9z6c

    十二之天2服务端墨湘外传服务龙ol服务端凡人修真服务端传奇服务端洛汗S服务端洪荒神话服务端弹弹堂服务端九阴真经服务端墨香服务端飞飞OL服务端密传服务端神将三国服务端QQ西游服务端英雄远征服务端传奇私服版本购买传奇SF专用登陆器红月私服一条龙决战私服一条龙战神姿态商业winlinux服务端石器时代私服一条龙倚天2私服一条龙破天一剑私服一条龙骑士私服一条龙盘龙新天上碑5转商业服务端蜀门最新207|1296|308修改版本一键完整服务端新魔界私服一条龙机战私服一条龙传奇1.9xx神龙合击仿盛大火龙服务端真爱魔兽版rf商业64位核战风暴台湾S服务端我们的团队:第一时间技术部设计与程序每天受理新加入的客

  3. yzc88.com
    yzc88.com : 回复

    你好,这篇文章内容本人觉得极度有意思,请问博主可以让我复制吗?我会保存原文出处的链接和你的姓名!

  4. 伟德国际1946
    伟德国际1946 : 回复

    嘿,敢问小编能够让我转走这篇文章吗?我会备注原文出处链接的以及作者。

  5. yzc363
    yzc363 : 回复

    楼主很厉害,文笔不错,值得学习

  6. 。。
    。。 : 回复

    浓浓浓缩

  7. 断影
    断影 : 回复

    可以提供下贵站的评论样式吗? 显示的样式 谢谢

  8. sadas
    sadas : 回复

    sadsad

  9. zs
    zs : 回复

    哈哈

  10. zs
    zs : 回复

    不错

  11. domi
    domi : 回复

    刚开始接触模板制作,感觉楼主写的很棒,谢谢分享。我也要反复多看几遍!

  12. 时间碎片
    时间碎片 : 回复

    非常不错的代码和教程,一定要学习到底

  13. Norine
    Norine : 回复

    I have been exploring for a little for any high quality articles
    or blog posts in this sort of area . Exploring in Yahoo I eventually
    stumbled upon this web site. Studying this info So i am satisfied to exhibit that I’ve a very excellent uncanny feeling I discovered
    exactly what I needed. I most indubitably will make certain to don?t overlook this website and give it a glance regularly.

  14. 虫子
    虫子 : 回复

    阿树大神,在您的教程中的”修改评论列表“ 位置修改部分的代码框,这里的”if (!emptyempty()“ 目测应该是”if (!empty()“ 应该是您打重复了,好多初学者直接复制您的那段代码…对WP不熟悉自己也找不出错误…您有时间改一下吧↖(^ω^)↗。非常感谢大神您分享的教程~\(≧▽≦)/~

    • 呆呆
      呆呆 回复虫子: 回复

      谢啦!我就是初学者 哈哈

  15. yalon
    yalon : 回复

    如何在列表页调用文章的第一条评论!

    • 阿树工作室
      阿树工作室 回复yalon: 回复

      列表页指的是?

      不过如果你需要获取文章的第一条评论,可以试试get_comments函数,例如:

      <?php
      $args = array(
      	'post_id' => 1, //文章ID
      	'number' => 1, //返回1条
      	'status' => 'approve' //返回已经批准的评论
      	//更多参数请参考wordpress.org
      ); 
      $comments = get_comments($args);
      //输出评论
      foreach( $comments as $comment) :
      	echo($comment->comment_author . 'said:' . $comment->comment_content);
      endforeach
      ?>

      • yalon
        yalon 回复阿树工作室: 回复

        在分类页面中或在首页!每篇文章下显示第一条评论!

        • 阿树工作室
          阿树工作室 回复yalon: 回复

          那就使用get_comments函数就好了。。就上面的代码

发表评论