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

本贴最后更新于 4354 天前,其中的信息可能已经物是人非

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

首先在主题文件夹下面新建一个文件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文件原来的位置添加代码:

<?php comments_template(); ?>  

comments_template()函数默认的就是加载主题文件夹下面的comments.php文件,这个函数也是可以带参数的,以便让你可以加载别的文件,比如某些页面你需要加载一个不一样的评论表单,你就需要使用comments_template()带上参数,这里不细说。
为了防止某些恶意用户直接打开评论文件,我们在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(),所以我们将原来的评论列表代码删除,换上这个函数,但是我们还需要加一些判断功能,比如评论需要密码才能查看、评论已经关闭、还没有评论这几个情况都要有不同的输出,所以将原来的评论代码:

 
<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 (!emptyempty($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');   
       }   
   ?>  

上面的wp_list_comments函数中我们家里两个参数,其中type=comment意思只输出评论,除了评论还有pings\trackback\ pingback等等什么的,callback=aurelius_comment意思是调用一个自定义的函数函数aurelius_comment来显示评论。
自定义的函数我们需要添加在主题的functions.php文件中,所以请在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>
        &lt;div class=&quot;comment_text&quot;&gt;   
            &lt;?php if ($comment-&gt;comment_approved == '0') : ?&gt;   
                &lt;em&gt;你的评论正在审核,稍后会显示出来!&lt;/em&gt;&lt;br /&gt;   
    &lt;?php endif; ?&gt;   
    &lt;?php comment_text(); ?&gt;   
        &lt;/div&gt;   
    &lt;/div&gt;   
&lt;/li&gt;   

<?php } ?>

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

 
<?php      
get_avatar($id_or_email,$size,$default, $alt);      
//$id_or_email这个参数必须,可以使一个用户ID、一个email,或者直接一个comment对象,上面代码就是直接将评论对象作为参数      
//$size,这个参数就是头像大小,默认是96,上面代码设为32      
//$default 一个图片地址,就是用户没有头像是显示的图片,默认是后台设置的那个      
//$alt 就是图片的$alt信息了,我觉得alt信息应该用评论者名字    
?>

<?php comment_reply_link();
//回复链接
?>

<?php
get_comment_author_link();
//获取评论者的链接
?>

<?php
get_comment_time();
//获取评论时间
edit_comment_link();
//编辑评论的链接
comment_text();
//输出评论内容
?>

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

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

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

 
<?php if ( comments_open() ) : ?>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p><?php printf(__('你需要先 <a href="%s">登录</a> 才能发表评论.'), get_option('siteurl')."/wp-login.php?redirect_to=".urlencode(get_permalink()));?></p>
<?php else : ?>

<?php $defaults = array(
'comment_notes_before' => '',
'label_submit' => __( '提交评论' ),
'comment_notes_after' =>''
);
comment_form($defaults);
endif;
else : ?>
<p><?php _e('对不起评论已经关闭.'); ?></p>
<?php endif; ?>

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

  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 223 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • someone

    elseif ($co_number == 1)在线编辑 functions.php 改了首页的评论为中文,不知道为什么一会又自动改回去了。

  • someone

    你如果用的是 bae 的话是不能在线编辑的 ,你可以在 bae 版本控制哪里编辑,或者 svn 下来修改然后上传上去

推荐标签 标签

  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    223 引用 • 474 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 635 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 209 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    132 引用 • 1114 回帖 • 125 关注
  • 招聘

    哪里都缺人,哪里都不缺人。

    190 引用 • 1057 回帖
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 726 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    288 引用 • 4485 回帖 • 663 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 446 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 913 回帖 • 250 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖 • 2 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 2 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1706 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 76 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 559 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    90 引用 • 561 回帖 • 1 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 748 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 401 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖 • 2 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 548 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 75 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 1 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 159 关注