文本是《wordpress主题完整开发系列(共30篇)》专题的第 16 篇。阅读本文前,建议先阅读前面的文章:
- 1.S9社区专题之wordpress主题完整开发系列
- 2.如何轻松学会主题开发:实用案例分享
- 3.深入解析如何优化网页加载速度 – 最佳实践:优化 CSS 和 JavaScript 文件
- 4.让你的WordPress主题更强大!优化functions.php
- 5.如何使用条件标签函数打造智能化网站
- 6.定制专属您网站需求的文章类型和分类法
- 7.让你的网站更高效:如何利用模板循环技术来提升用户体验
- 8.从入门到精通:掌握模版文件继承规则
- 9.想要制作网站?了解模板文件吧!
- 10.如何避免模版文件包含漏洞?学习防御技巧
- 11.引领主题基础-打造精彩文章
- 12.打造高效开发环境,从设置开始
- 13.从零开始制作主题:主题开发入门
- 14.「必知!SEO优化中如何巧妙运用模板标签」
- 15.教你轻松制作自己的WordPress主题之制作page.php
今天我们来制作评论主题的评论模块。在主题目录Aurelius下新建comments.php,在single.php剪切以下代码,粘贴到comments.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!– 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原位置添加代码:
1 |
<?php comments_template(); ?> |
以上语句的作用就是将comments.php里的所有内容导入到single.php中,与直接在single.php写comments.php中的代码效果是一样的。
为了安全起见,不让恶意用户直接打开评论文件,请在comments.php头部添加以下代码:
1 2 3 4 |
<?php |
因为WordPress的输出评论函数wp_list_comments()输出的评论代码与我们主题的评论代码不一样的,我们得自定义我们的评论列表,将comments.php中的以下代码删除(以下代码用于列出文章的所有评论):
1 2 3 4 5 6 7 8 9 10 11 |
<li class=“comment”> |
改成:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?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已经有以下代码则不用再添加:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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> </li> <?php } ?> |
以上代码所用到的WordPress函数及相应的说明:
函数名称 | 函数功能 |
get_avatar($comment, 48) |
获取评论者的gravatar头像,尺寸为48 * 48 |
comment_reply_link() | 回复留言的链接 |
get_comment_author_link | 用于获取评论者博客地址 |
get_comment_time | 获取评论发布时间 |
edit_comment_link | 管理员修改评论的链接 |
comment_text() | 输出评论内容 |
好,现在在你的文章页面底部就可以正常地显示评论了!现在我们继续来制作提交评论的表单,将以下代码删除(也就是评论表单的代码):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!– Comment Form |
改成:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<?php |
函数名称 | 函数功能 |
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主题完整开发系列(共30篇)》专题的第 16 篇。请继续阅读该专题下面的文章:
- 17.\”WordPress主题制作全过程:如何制作一个完美的single.php页面\”
- 18.《详解WordPress主题制作(八):从零开始制作自己的index.php页面》
- 19.《最全面的WordPress主题制作教程(7):制作sidebar.php》
- 20.《从零开始学WordPress主题制作(六):打造独一无二的footer》
- 21.学习WordPress主题制作(五):打造独一无二的header.php文件
- 22.WordPress主题制作全记录(四):实践篇,零基础开始小试牛刀
- 23.《打造个性化WordPress主题(三):HTML静态模板制作详解》
- 24.打造个性博客,从WordPress主题制作开始——主题文件构成
- 25.全面解析WordPress主题制作流程(一):基础准备
- 26.如何优化WordPress主题首页模板?探究front-page.php、home.php、page.php、index.php的调用顺序
- 27.\”掌握WordPress函数load-{$variable} action的技巧\”
- 28.WordPress SEO技巧:如何设置最佳Keywords和Description
- 29.如何在WordPress中限制搜索结果- 排除或指定特定文章、页面和分类
- 30.解决 WordPress Gravatar 头像无法访问的方法-轻松解决头像加载问题