此篇教程写给想个性化Wordpress主题又苦于不知如何入手而到处求人的童鞋。
刚接触Wordpress童鞋,可能都对丰富多彩、数量众多的Wordpress主题非常感兴趣,在成千上万各式各样的主题中苦苦寻觅自己中意的,但最终会发现几乎没有一款主题能完全符合自己的心意,怎么办?只能自己动手改,但又苦于对网页制作一无所知,只能望洋兴叹,或是到处求人,往往又四处碰壁。这里简单介绍一下Wordpress模版修改的基本知识和所需的工具及技巧,希望为新手起到抛砖引玉的作用。
其实修改和制作主题并没有想像中的那么复杂,当然你要作出一款惊世骇俗的Wordpress主题除外。
先说说修改Wordpress模版所需掌握的知识。Wordpress函数大部分都可以在WP官方Codex找到,也可以说是固定的,并不需深入学习,知道某句函数从哪开始到哪结束就可以,已免修改主题时造成错误。关键是掌握DIV+CSS,网上教程很多,对于修改Wordpress模板粗略学一下原理就够了,也就是那么几句属性写法,因为我也还在学习,这里就不现丑教大家了,自己找个教程看看吧。
一套完整的WordPress模版应至少包括如下文件:
- style.css : 样式表文件
- index.php : 首页模板
- archive.php : 文章归档/分类目录模板
- 404.php : 404 模板
- comments.php : 留言/回复模板
- footer.php : 底部模板
- header.php : 顶部模板
- sidebar.php : 侧栏模板
- page.php : 页面模板
- single.php : 文章页面模板
- functions.php : 模板函数
- search.php : 搜索结果模板
当然,有些主题可能不止这些文件,比如我的HotNews Pro主题模板文件有上百个,但以上文件是每套模板所必备的。
知道上面模板的作用可以让你知道当前页面应该修改哪个对应的模板。
下面是这篇的重点:工欲善其事,必先利其器!
可能很多人一想到网页制作工具,就会联想到"网页三剑客"中的Dreamweaver(简称DW)号称所见即所得,那是指当初流行用Table表格制作网页,而现如今是DIV+CSS时代了,所见即所得的优势再也没有了,这个DW几乎已无用武之地(个人认为)。另外国外原来常用的网页制作工具是Adobe GoLive,由于中文版推出较晚,才造成DW在国内流行,DIV+CSS网页制作大型软件也是首推Adobe GoLive,不过该软件目前已停止开发,可惜。今天推荐的工具并不是这两个售价高昂,体积庞大软件.修改和制作Wordpress主题根本无需使用什么专业软件,不过也不像某些人吹嘘的那样用系统自带的记事本就能写主题。
首先,你需要搭建一个本地PHP测试环境,方便修改模版,当然你也可以在Wordpress后台主题编辑页面中修改,临时用一下还可以,不适合修改较多的情况。如何搭建本地测试环境网上教程很多,这里就不详细说了,推荐使用Wamp或者phpStudy,自己搜索一下。
必备工具软件:
■ 文本编辑器
EmEditor(收费软件)、EditPlus(收费软件)、Notepad++(免费)
前两款是收费软件,后者是免费的功能也非常不错,适合新手使用,绝不能用系统自带的记事本编辑模版文件,特别是中文模版,否则会造成模板借位,中文模版编码为:UTF-8 无BOM。
■ 火狐浏览器(Mozilla Firefox)
有的人会问,为什么要用火狐,系统自带的IE一样可以浏览网站?当然不是完全用火狐去浏览网站,而是利用火狐强大的扩展能力,为我们仙人指路。
当我们要修改某部分样式及结构时,都会直接打开Wordpress主题模板文件或在后台编辑主题,密密麻麻的代码,就是主题作者自己看了也会头晕眼花,所以会经常在关键部位加上一些注释,
php中注释一般为:<!-- XXX -->
css中为:/** XXX **/
但一些注释可能只有作者自己知道是什么。因此,很难在打开的模板文件中找到准备修改的部分,这时我们就会用到火狐的扩展:Firebug,下载地址
IE浏览器也有类似的插件,但功能上无法与火狐的扩展相比,一些浏览器本身就集成了该功能比如Opera,功能貌似同样的强大。
具体操作方法
如果你已安装火狐并已添加Firebug扩展,可以继续往下看如何具体修改Wordpress主题。
■ 修改页面元素的文字大小
以修改HotNews Pro主题CMS布局,最新文章标题文字大小为例:
鼠标停在最新文章标题上,右键调出菜单选择“使用Firebug”查看元素(如图)
之后默认会在火狐浏览器底部调出Firebug窗口,左侧显示的是当前网页元素的HTML结构,右侧是当前元素选择器的样式属性和所在的文件及行数(如图),在style.css文件的第277行。
用上面介绍的文本编辑软件,打开主题style.css文件在277行找到:
- #post h3 {
- font-size: 13px;
- font-weight: bold;
- }
修改其中的数字13,为自己认为合适的大小即可。
如果当前元素选择器的样式中没有控制字体大小的 font-size: 13px; 属性,而是使用的全局字号设定,可以为其单独加上这个 font-size: 13px; 属性
看了上面的一个实例,是不是很简单,修改主题样式,关键是要找到所需修改元素选择器名称及样式属性的位置。
本人在修改主题模版时也用同样的方法,没有Firebug扩展的仙人指路,就是修改自己作的模板也决不是一件易事。
■ 如何确定某个网页元素(模块)的整段代码,便于调整位置。
以HotNews Pro主题导航菜单移动到LOGO下面为例:
首先,用上面的方法确定导航菜单最外层的选择器名称为:top
然后,用Notepad++文本编辑器,打开主题顶部模板header.php,搜索查找top位置,并用鼠标点击该选择器,会发现Notepad++已为我们明确标示了该段代码开始和结束的位置(如图):
下面的就简单了,用同样的方法找到导航菜单下面元素最外层的选择器结束的位置将代码移动至此即可。
以上就是修改模板的基本方法和步骤,所谓的高手基本都这么折腾模版,如果你花一两天时间学一下DIV+CSS相信会更得心应手。
另一个比较不错的扩展是:Web Developer,这里就不介绍了,请自行研究。
这里要提醒大家:制作一款主题不容易,作者为此付出了无数的不眠日夜和汗水,请大家尊重作者的辛苦劳动,修改主题模版请保留作者版权链接,不要做让大家BS的无耻之人。
后记:这篇日志其实是去年年初写的,竟然忘记发布了,今天进后台清理才发现,重新修改发布,希望对你有所帮助。

2013年7月6日 17点49分 51F
我发现我使用的主题都是用PHP编写的,要做修改还真有点难度,如果是HTML写的话,就好办多了。今天修改了一上午的主题,结果,都失败了,哎~~~
2013年9月16日 17点41分 B1
@ lenovo ultrabook reviews 是啊,怎么样才能吧php的弄成html的呢?
2016年10月16日 12点55分 B2
@ 366博客 要想弄好网站,php还是得学习一下。要不然就显得太被动了。。。
2013年9月16日 17点40分 52F
大哥,求求你救救小的吧,我的用别人的模板,有些些文件不出现{Rcloud: 文章归档页面模板 (archives.php)}这种的内容,怎么修改呢 ,我都整一个月了、
2013年9月25日 21点32分 53F
鸟哥,好东西,转走了!谢谢!
2013年9月26日 17点39分 54F
鸟哥,请教啊,我在调用category_description()获取描述的时候,总是显示不出来,但是分类目录是正常的。[img]http://slienter.com/wp-content/uploads/2013/09/categorydeserro.png[/img]
2013年9月27日 23点26分 55F
好文,收藏 了
2014年3月4日 00点06分 B1
@ 亿推 http://discountordeal.com
这个主题.
2013年10月2日 11点47分 56F
很好的文章,感谢老大分享~~
2013年10月11日 09点47分 57F
谢谢博主的用心,说实话,博主的这个主题影响了很多人,我换了很多主题,最后还是在用这个!
而本人也就是初中生,没专业的学过编程,只是会一些基本的电脑知识,但是我比较喜欢学习,啥都喜欢专研,但是基础太差,都没有深入!
我也喜欢折腾主题,看了你的这篇文章,给了我很多信心,希望我也能用你的主题捣鼓一下,呵呵!
对了,关于主题收费的问题,我觉得博主完全可以做的,我就买过一个40块的主题,但是没用多久,就换回你这个了,个人觉得主题的价格要是不要超过50块的话,效果应该不错吧!
2013年10月18日 09点45分 58F
几天没来又更新了啊
2013年10月20日 10点55分 59F
赞一下 学习啦
2013年10月20日 10点55分 60F
谢谢博主的用心,说实话,博主的这个主题影响了很多人,我换了很多主题,最后还是在用这个!
而本人也就是初中生,没专业的学过编程,只是会一些基本的电脑知识,但是我比较喜欢学习,啥都喜欢专研,但是基础太差,都没有深入!
2013年10月20日 10点56分 61F
谢谢博主的用心,说实话xuexila 学习啦
2013年10月27日 21点17分 62F
鸟哥、问下导航栏下面时间那一段怎么删掉?
2013年11月2日 19点07分 63F
主题设计美观大方,非常感谢博主分享这么好的主题,辛苦了
2013年11月4日 12点38分 64F
鸟哥近来可好?
2013年11月4日 20点52分 B1
@ aunsen 老A又复活了?
2013年11月10日 21点18分 65F
知更鸟哥,你网站的LOGO的文字是用什么软件设计的?
2013年12月7日 20点40分 66F
这个不错,谢谢博主分享。
2014年3月19日 22点11分 67F
对WordPress主题有深入了解。
2014年3月24日 12点14分 68F
鸟哥的这篇文章对于我们这些新手有很大的帮助
2014年4月26日 07点49分 69F
楼主啊,我安装你的主题的时候,后台不是有个,blog与CMS的切换吗,默认的blog,当我切换到CMS的时候会出错,
提示:[img]http://www.wpbaike.net/bbs/data/attachment/forum/201404/25/222824wlsnrrtccd0dorss.jpg.thumb.jpg[/img]
我是在本地搭建的,
2014年4月27日 10点43分 B1
@ 厦门SEO 可以下载最新版或者看这个
https://zmingcx.com/local-test-hotnewspro2-7-error-solution.html
2014年6月22日 23点38分 70F
谢谢分享
2014年7月4日 09点32分 71F
目前,公司需要建个网站,您的作品都挺好的,不知道您目前有没有时间?
2014年8月11日 12点59分 72F
博主,为什么我使用了你的模板,文章详细页面右侧怎么是不显示了?我看了代码调用右侧模块是没有问题的,读取的数据是空白的,不清楚是哪里出错了。
2014年8月16日 13点00分 73F
这个,很不错你,支持起来
2014年9月19日 12点27分 74F
很实用的教程,学习了
2014年9月19日 17点32分 75F
鸟哥,我刚用上你的主题Ality,找了好久都没找到你发布公告的方式,可否告知一下,我有CSS的功底,只是不太想折腾代码,如果需要写一些代码的话,但说无妨。
2014年9月19日 18点03分 B1
@ 采用了Ality主题 在https://zmingcx.com/wordpress-theme-ality.html上找到了
2014年9月24日 13点09分 76F
请问如何给首页的文章摘要也添加连接,如文章标题那样点击就可以访问了。第一次用楼主移动网站的时候,一直点击摘要去访问一直无反应,还以为这是bug呢,后来才知道,必须点击文章标题和图片才能访问文章
2014年9月24日 13点44分 77F
请问阅读次数后面的views如何去掉?
2014年9月24日 14点32分 B1
@ 小乖兽 插件设置中删掉
2014年12月18日 17点48分 78F
学习学习
2015年6月21日 09点54分 79F
不错的主题,清新自然。
2015年8月17日 02点48分 80F
鸟哥,这样的模板修改适合自适应主题修改吗?我是只新手,首页都是瀑流框架,想添加几个像您首页下方的几个CMS的分类栏目,不知道如何修改,是不是非常难?
2015年8月17日 02点51分 B1
@ 大菠菜 还有您这个搜索框怎么弄的,想改成您的博客右上方的搜索框。
2015年8月18日 16点51分 B2
@ 大菠菜 模板修改不分什么类型的主题的,都适用。还有就是那个搜索框的功能,三两语不好说清楚的,建议还是直接下载ality主题来研究比较好。这个主题也有这个搜索框的
2015年9月5日 17点30分 81F
一直在关注着博主的博客,希望多多分享原创汉化主题~
2015年9月5日 21点01分 B1
@ 中国智能科技新媒体 汉化盗版主题?
2015年11月16日 13点34分 82F
知更鸟哥,如果明明就没有修改什么,可是网站突然就故障了,可是又没有办法登入账号修改,那该怎么办呢?求答案. 具体情况请点击www.allstarglobal.ca 紧急情况
2016年1月13日 22点26分 83F
我的firebug怎么装不上
2016年1月30日 20点43分 84F
修改样式可以,怎么修改元素呢?web-developer是个api文件啊
2016年3月8日 22点58分 85F
不错
2016年3月25日 11点30分 86F
没太深入研究,直接买了一个使用了;看来需要好好学习下。
2016年3月27日 11点39分 87F
不错,不错,但是我看不懂,本人初中狗一枚QAQ
[img]http://www.92wmc.cn/wp-content/uploads/6fce041872c9c930453c0126b879707d.jpg[/img]
2016年7月20日 22点26分 88F
不错,值得观看!
2016年9月22日 22点30分 89F
主题的小工具在哪里修改!!
2017年8月8日 19点16分 90F
不错,谢谢。
2018年12月5日 22点35分 91F
这个文章好!我竟然才发现!