WordPress 主题教程 #16:留言模板

我爱水煮鱼
我爱水煮鱼
»
专题:WordPress 主题教程
» WordPress 主题教程 http://blog.wpjam.com/m16:留言模板

WordPress 主题教程 http://blog.wpjam.com/m16:留言模板

Denis 留言: 63 浏览:29067

文章目录[隐藏]

  • 第1步:创建 comments.php
  • 第2步:样式化留言
  • 第3步:在 single.php 添加留言模板
  • 第4步:验证代码
  • 评论模板的进一步解释

WPJAM TOC

这篇教程是在 WordPress 2.7 之前撰写的,而 WordPress 2.7 之后支持了 Thread Comments,这里有让你的主题实现 WordPress 2.7 的 Thread Comments 的方法。但是还是建议你查看下这篇教程。

留言模板是从零开始创建 WordPress 主题系列教程的最后一篇。这篇将涉及到博客一个比较重要的东西;评论模板

你应该知道:

  • 没有快速的方式在 comments.php 建立评论模板
  • 大部分的 WordPress 设计者使用来自 WordPress 默认主题(Kubrick)默认评论模板根据
  • 一些设计者会修改默认的评论模板去适合他们自己的需求。
  • 你将使用我的对默认评论模板的修改版本。

第1步:创建 comments.php

  • 创建一个新文件:comments.php
  • 把我的 comments.txt 文件中的内容复制到 comments.php
  • 保存 comments.php 文件。

第2步:样式化留言

  • 把我的 comments-template-css 文件中的内容拷贝到你的 style.css 文件中。
  • 复制到 style.css 的底部或者刚好 http://blog.wpjam.com/mfooter 的上面。

第3步:在 single.php 添加留言模板

single.php 文件中,entry DIV 的下面,输入以下代码:


<div class="comments-template">
<?php comments_template(); ?>
</div>

comments-template.gif

comments_template() 这个函数是用来从 comments.php 文件调用评论模板。 comments.php 文件然后就会根据它的模板(或者代码)去显示评论列表。列表中的每个条目是一条评论。

如果想让人们可以在静态页面也可以留言,同样可以把 comments_template() 函数用到 page.php 文件。

第4步:验证代码

第四步是验证你的代码,然而可以不进行第四步的,因为你在使用的是我已经整理过的默认主题评论模板的修改版。我已经替你验证过代码了。

验证:

  • 查看 > 页面源代码
  • 拷贝所有源代码
  • 然后到 validator。
  • 把你的代码粘贴到 Direct Input 框中。
  • 点击 Check

以后的参考(当你创建你自己的主题和评论模板),下面是需要验证的页面:

  • 主页 &http://blog.wpjam.com/m8212; Home page
  • 存档页面 &http://blog.wpjam.com/m8212; Archive pages
  • 类别页面 &http://blog.wpjam.com/m8212; Category pages (如果你自定义了类别页面)
  • 搜索结果页面 &http://blog.wpjam.com/m8212; Search result pages
  • 静态页面 &http://blog.wpjam.com/m8212; Pages (如:About)
  • 单一日志页面 &http://blog.wpjam.com/m8212; Single post view page
  • 单一日志没有留言 &http://blog.wpjam.com/m8212; Single post with no comments
  • 单一日志有留言 &http://blog.wpjam.com/m8212; Single post with comments
  • 单一日志含有必须登录信息 &http://blog.wpjam.com/m8212; Single post with must login message
  • 单一日志没有必须登录信息 &http://blog.wpjam.com/m8212; Single post with no login required message
  • 密码保护的单一日志并有留言 &http://blog.wpjam.com/m8212; Password protected single post with comments

评论模板的进一步解释

  • 评论模板从根本上说是一个有序列表(OL),不是无序的,尽管它们基本上同样方式工作。 无序列表是以圆点列表组织的。有序列表则是以数字列表组织的(每个条目都有一个数字,从1开始)。
  • single.php 文件中,你用 comments-template DIV 围住comments_template()。现在你的评论模板在一个 DIV 标签中的一个有序列表中。

当你你的日志是密码保护的,你的评论同样是密码保护的:

password-protected.gif

这个修改版的留言模板有一个 H2 子标题显示 Password Protected。默认的留言模板是没有的。

下面展示了哪些东西组成了你的留言列表:

comments-template-core.gif

简单整理下就是:

comments-template-simple.gif

comment_text() 函数就是用来调用每条留言的。

我不会解释留言模板的 CSS 代码的意思。不像 comments.php 文件中的代码,你可以随便测试你的 CSS 代码而不会弄坏留言模板。自己去测试回比我的解释对你更有好处。

今天没有课程回顾,你已经完成了 WordPress 主题制作教程

原文:link

标签:WordPress 主题 WordPress 教程

专题WordPress 主题教程

  • WordPress 主题教程:从零开始制作 WordPress 主题
  • WordPress 主题教程 http://blog.wpjam.com/m1:介绍
  • WordPress 主题教程 http://blog.wpjam.com/m2:模板文件和模板
  • WordPress 主题教程 http://blog.wpjam.com/m3:开始 Index.php
  • WordPress 主题教程 http://blog.wpjam.com/m4a:Header 模板
  • WordPress 主题教程 http://blog.wpjam.com/m4b:Header 模板 2
  • WordPress 主题教程 http://blog.wpjam.com/m5:主循环
  • WordPress 主题教程 http://blog.wpjam.com/m5b:日志内容
  • WordPress 主题教程 http://blog.wpjam.com/m5c:日志元数据
  • WordPress 主题教程 http://blog.wpjam.com/m5d:Else,日志 ID,链接标题
  • WordPress 主题教程 http://blog.wpjam.com/m5e:日志导航链接
  • WordPress 主题教程 http://blog.wpjam.com/m6:侧边栏
  • WordPress 主题教程 http://blog.wpjam.com/m6b:页面链接列表
  • WordPress 主题教程 http://blog.wpjam.com/m6c:存档和链接列表
  • WordPress 主题教程 http://blog.wpjam.com/m6d:搜索框和日历
  • WordPress 主题教程 http://blog.wpjam.com/m6e:窗体化侧边栏
  • WordPress 主题教程 http://blog.wpjam.com/m7:底部
  • WordPress 主题教程 http://blog.wpjam.com/m8:验证 XHTML
  • WordPress 主题教程 http://blog.wpjam.com/m9:Style.css 和 CSS 介绍
  • WordPress 主题教程 http://blog.wpjam.com/m10:十六进制颜色代码和样式化链接
  • WordPress 主题教程 http://blog.wpjam.com/m11:宽度和布局
  • WordPress 主题教程 http://blog.wpjam.com/m12:日志样式化和其他杂项
  • WordPress 主题教程 http://blog.wpjam.com/m13:样式化侧边栏
  • WordPress 主题教程 http://blog.wpjam.com/m14:底部和拆分 Index
  • WordPress 主题教程 http://blog.wpjam.com/m15:子模板文件
  • WordPress 主题教程 http://blog.wpjam.com/m16:留言模板
  • erdaoo 的 WP Theme 教程学习笔记
  • WordPress 主题教程电子书下载
Denis

作者:Denis | 我要投稿

原文链接:WordPress 主题教程 http://blog.wpjam.com/m16:留言模板

© 我爱水煮鱼,转载请留下原文链接。

本站长期承接 WordPress 项目,详情请 Email:&http://blog.wpjam.com/m100;en&http://blog.wpjam.com/m105;&http://blog.wpjam.com/m115;&http://blog.wpjam.com/m64;wpj&http://blog.wpjam.com/m97;m.com。

如有 WordPress 问题,请到 WPJAM 问答提问!

你可能也喜欢

  • WordPress 主题教程电子书下载 WordPress 主题教程电子书下载
  • WordPress 主题教程 http://blog.wpjam.com/m15:子模板文件 WordPress 主题教程 http://blog.wpjam.com/m15:子模板文件
  • WordPress 主题教程 http://blog.wpjam.com/m14:底部和拆分 Index WordPress 主题教程 http://blog.wpjam.com/m14:底部和拆分 Index
  • WordPress 主题教程 http://blog.wpjam.com/m13:样式化侧边栏 WordPress 主题教程 http://blog.wpjam.com/m13:样式化侧边栏
  • WordPress 主题教程 http://blog.wpjam.com/m12:日志样式化和其他杂项 WordPress 主题教程 http://blog.wpjam.com/m12:日志样式化和其他杂项
  1. chenchen on said:

    給一個太陽~~~滅活活~~~

  2. 世纪大厦 on said:

    第1遍看完,睡觉去咯,明天继续第2遍;这东西就跟学Pro/E & Auto CAD一样,多看几遍,跟着写写画画,就能记住了,不能死记硬背,不然太累^_^

    给鱼兄一缸水,你就好好游吧,别煮了~~~~

  3. 果子 on said:

    呼,看完了,辛苦辛苦
    实在想每一篇都赞一下,可是这么多
    一次性都赞了吧,赞赞赞赞赞
    orz

  4. sengming on said:

    如何把页页面里的英文转成中文(如: No Comments变成评论)

    • zealer on said:

      修改评论模板啊.该成中文就OK了

  5. 黑色饼干 on said:

    哈哈,看完了,做出来的theme特丑!ohoh

  6. 努力中的人 on said:

    终于看完了&http://blog.wpjam.com/m8230;现在研究图片配合方法~

  7. bill on said:

    哈哈,利用了两天上班中间空余的时候把教程看了一次,学了不少东西,谢谢猪兄……如果还有进一步的教程会更好,比如如何用CSS向博客上放图片……

  8. neohsiao on said:

    请问这个留言模板如果字数太多没换行会超出框架,会撑破框架,怎么处理? :roll:

  9. JxmoonBlog on said:

    非常感谢雪山飞猪的翻译
    译的非常的好。

  10. 二手科学家 on said:

    照着翻译改了下Comments, :cool:

  11. xgo on said:

    多谢! :razz: :razz:

  12. mingelz on said:

    看完了,受益匪浅……谢谢博主~ :smile:

  13. ray on said:

    谢谢楼主翻译。

  14. 杰克花园 on said:

    很好, 很强大, 呵呵, 多谢了

  15. 盗盗 on said:

    俺也终于看完了第一遍,本暑假的目的是通过Wordpress对PHP开始有初步的进阶。感谢Denis为中文WP事业的辛劳耕耘~~~哈哈~

    • Denis on said:

      haha, 谢谢盗盗阅读我的翻译,如有问题能够指出,不限感激!

  16. kafeier on said:

    看完了.学完了.
    有一个问题:所有index.php.single.php,page.php&http://blog.wpjam.com/m8230;等等页面都没有说到怎么调用style.css.
    而且也说到了要复制index.php内容到其它页面.但里面也没有定义调用 css.
    我把所有的代码都复制下来.但分栏却不成.只有一栏.
    想向你请教一下.怎么联系你.我的q:7733397
    谢谢

  17. woody on said:

    我看了一半了,作者和楼主都做了很棒的工作,再次表示感谢。请问还有后续吗?还会翻译吗?

  18. Death August on said:

    终于看完了第一遍!吁~~~足足看了一下午,眼都花了,不过非常有收获!心里很满足!O(∩_∩)O哈哈~
    脑子稍微有点儿乱了,明天再仔细的研究一下细节!
    谢谢Denis!

  19. Junghae on said:

    请问下 :grin: sidebar里调用最近评论的函数是什么呀???

  20. aimzz on said:

    functions.php 这个文件怎么写啊
    有什么用处

    我做的是左中右三栏,有两个sidebar,怎么调用呢?
    出现Fatal error: Call to undefined function get_left_sidebar() in错误

    不喜欢用sadbox的方法
    多谢指教 :razz:

  21. aimzz on said:

    对了我使用

    也可以调用,
    但不知道和有什么区别? :twisted:

  22. aimzz on said:

    include (TEMPLATEPATH . &http://blog.wpjam.com/m8216;/sidebar2.php可以调用
    和get_sidebar2() 有和区别

  23. fooldy on said:

    太好了,真是谢谢博主,让我全方位的了解了一把wordpress框架。
    我要开始构建自己的blog了~!

  24. 张玉凤 on said:

    还是不会做出好看的blog来啊,像图片什么的啊!
    实在难学好啊! 有时间教我一下啊! QQ:1033108078 598981745 这俩个都行!谢谢了啊! :razz:

  25. 小雨 on said:

    很有用最近正在学习! :neutral:

  26. 凌紫枫 on said:

    粗略的跟着做了一遍,收藏了慢慢回顾,嘿嘿 :cool:

  27. Twitter on said:

    一步步跟着做下来了!到最后整体显示都很正常 和教程得差不多, 但最最最最可恶的问题出现了,我的后台进不去了,提示我N多错误 进不去后台了 晕丫丫

  28. DeepBlue on said:

    很好,谢谢博主,可惜没有教如何调用图片,和汉化(我试了下把有些字改成了中文,但发现显示错误,不知道怎么回事)。各位大虾,谁能告诉我。

    我的QQ:529155318

    Email:529155318@qq.com

  29. 江月何年 on said:

    呼……用了2天,全部看完了……
    照着一步一步做了下去。
    收获很大。
    谢谢Denis对wp在中国的发展做出的贡献……
    很大的贡献!
    顺便建议后来者,看此教程要结合别的经典主题对照来看,会学到更多更实用的东西。这些东西只是基础,离做出一个可以流行的主题还差很远!
    现在要找插图片的方法了……
    最后,再谢谢原文作者和小鱼一次!

  30. ZhuobinLI on said:

    很感谢博客主人啊!!!
    刚刚开始了解WordPress,看了这个,了解到怎么去做主题了~
    谢谢~!感谢! :razz:

  31. a691662 on said:

    一天的时间 看完了 留个名
    还是有错 不过很精彩 翻译得也不错
    代码还没背熟 不过比指针之类的c简单多了 估计很快就可以熟练

  32. 柒柒肆壹 on said:

    感谢 自己时间研究了一下很有帮助

  33. wpzone on said:

    我觉得博主可以出一本关于wordpress的书了

    • Denis on said:

      出电子书可以!

  34. 缝衣针 on said:

    到这里完全结束了,感谢LZ的教程,真的很有用。

  35. lolo爱你 on said:

    我想问下,我查看到源文件,文章的内容中文字的都是乱码
    需要改什么参数???

    • Denis on said:

      编码设置为 utf-8

  36. czp568 on said:

    请问下博主
    这个仲么解决啊~!
    http://www.indetime.com/wp-content/uploads/2011/02/00.jpg
    我按部就班的按照你这教程弄了一简单主题。
    话说这教程对于新手来说相当有用。
    在这说声感谢 :grin:

  37. 我爱打折狂 on said:

    正在制作自己的第一个模板。
    感觉收获很多,非常感谢
    http://www.haodiansou.com留个链接哈

  38. 我爱打折狂 on said:

    正在制作自己的第一个模板。
    感觉收获很多,非常感谢
    http://www.haodiansou.com

  39. lan丫头 on said:

    感谢博主的分享。。。 :oops:

  40. on said:

    如何在后台管理 外观 加入主题,以及一些关于主题的设置。

    • on said:

      感谢博主的分享。

  41. 中特 on said:

    看了两天,也联系了两天,终于搞定了一个简陋的主题!
    谢谢Denis!
    :mrgreen:

  42. 牛人 on said:

    comments.txt 失效了 :(

  43. 犀利哥 on said:

    里面稍微有些错误,比如符号之类的,其他的,很好了

  44. ai死的魔 on said:

    内容不错,我花了整整一天大概地跑了一遍,只是有点点问题<?php bloginfo(&http://blog.wpjam.com/m8216;name&http://blog.wpjam.com/m8217;) ?> <?php bloginfo(&http://blog.wpjam.com/m8216;descripiton&http://blog.wpjam.com/m8217;);?>这两句咋显示的内容是一样的啊

    • 苑俊波 on said:

      兄弟,你出现这个问题了吗?最后为什么侧栏还是在正文的下面呢,而不是和正常主题一样和正文并列在侧栏。

  45. 苑俊波 on said:

    博主您好,我按照您提供的教程做了一遍,很好很强大!但是最后为什么侧栏还是在正文的下面呢,而不是和正常主题一样和正文并列在侧栏。谢谢您了。

  46. 潜行者M on said:

    所有index.php.single.php,page.php&http://blog.wpjam.com/m8230;等等页面都没有说到怎么调用style.css.这些文件之所以没有调用css,是因为他们调用了header.php而在header.php中,调用了css文件.

  47. 凯斯 on said:

    你哈

  48. 张鑫 on said:

    谢谢,看完了,受益匪浅!!!!!!!!!!!!!!!

  49. 张鹏 on said:

    求助啊,我查看源文件时出现乱码,我将所有文件的保存格式全部改为了utf-8,刷新网页之后发现全部靠左对齐了(已经到了屏幕的最左边),这可怎么办呀,我已经记不清原来的文件哪些是安ANSI格式保存,哪些是安utf-8保存了。还有就是,改文件的编码格式对网页有这么大的影响吗,求助啊!鱼大!

  50. 非常网虫 on said:

    啊,太感谢了,这样的的教程对新手来说如获至宝啊!!!感谢博主的奉献!

  51. 东方简明 on said:

    很有意思!

  52. 陈晟 on said:

    看了两天,学到很多啊,虽然来的有点晚,不过谢谢博主分享哈

  53. 陈晟 on said:

    看了两天,学到很多啊,虽然来的有点晚,不过谢谢博主分享哈

  54. 冰沙 on said:

    求制作

  55. 冰沙 on said:

    求制作

  56. Suniven on said:

    都2013了才学这个会不会有点晚了?不过,看完啦,谢谢水煮鱼!!

  57. sunny on said:

    comments.txt不能打开啊!

热门文章

易多云 主机91 七牛云存储

快速链接

  • RSS 订阅 / 邮件订阅 / 新浪微博
  • 联系 Denis / 广告投放
  • WordPress 建站专家
  • WPJAM 应用商城

推荐阅读

  • WordPress 主题教程:从零开始制作 WordPress 主题 WordPress 主题教程:从零开始制作 WordPress 主题
  • 使用 WP_Query 而不是 query_posts 自定义 WordPress 主循环 使用 WP_Query 而不是 query_posts 自定义 WordPress 主循环
  • WordPress 主循环和全局变量 WordPress 主循环和全局变量
  • 加速 WordPress 站点的五个基本技巧 加速 WordPress 站点的五个基本技巧
  • 我爱水煮鱼使用的 WordPress 插件 我爱水煮鱼使用的 WordPress 插件

主机推荐

  • 使用最简洁的美国域名注册商Name.com使用最简洁的美国域名注册商
    Name.com
  • 最佳美国虚拟主机推荐Bluehost最佳美国虚拟主机推荐
    Bluehost
  • 针对 WordPress 的香港主机主机91针对 WordPress 的香港主机
    主机91
  • 最专业美国 VPS 主机(mt) Media Temple最专业美国 VPS 主机
    (mt) Media Temple

随意打赏

提交建议
微信扫一扫,分享给好友吧。