电脑技术学习

简单易学的wordpress模板制作教程

dn001

一、模板制作常用软件:
1.1 图像处理软件 PhotoShop(简称PS): 下载 | 教程
1.2 网页制作软件 Dreamweaver(简称DW):下载 | 教程

二、需要掌握的语言:
2.1 XHTML:简介 | 教程
2.2 CSS:简介 | 教程
2.3 英语:仅普通模板制作的话,不需要掌握太多的PHP语言,能看懂单词是什么意思就可以了。

三、开发环境:
建议安装Apache HTTP Server,在本机环境下调试模板,这样,每一次改动都可以即时的反馈出来。

四、入门阶段:从修改别人的模板开始
4.1 选择要修改的模板
如果想做自己的主题,建议初学者先选择一个结构类似的主题(三栏?两栏?右边栏?左边栏?),在他的基础上进行改动,参考对方代码的同时,巩固自己之前学过的知识。等积累了一定的经验并熟悉PHP语言后,再自行创建模板。
本文以两栏结构的 Sunshine 主题为例。
4.2 设计自己的主题
假如博主不喜欢黄色为主色调,我们需要做的是比照“模仿作品,先用PS设计出自己需要的风格。

wordpress模板制作教程 | 图例01

4.3 制作模板
在设计的过程中,我们了解到更改这个主题,其实只需要更改几个图片,并调整sidebar.php到右侧就可以了。

wordpress模板制作教程 | 图例02

先从好改的地方下手,将Sunshine案例中的侧边栏sidebar.php从左侧换到右侧:
用DW(也可以用windows的记事本)打开style.css,搜索“#sidebar

wordpress模板制作教程 | 图例03

通过之前对CSS语言的学习,可以了解到,搜索结果中的#sidebar内的float:left是控制侧边栏左浮动的,我们将其更改为float:right,并用同样的方法查找 #main,将他的右浮动属性更改为float:left,这样,侧边栏就换到了右侧,主内容区换到了左侧。
注意:不同的主题作者,可能会应用不同的名称来定义“侧边栏、“主内容区,如果之前学过XHTML,可以在.php文件中查找对应元素的标签。

下面开始图片的改动:打开header.php文件,查找到头部调用的图是img/header.jpg,然后用自己设计的头部通栏图替换掉该文件。

wordpress模板制作教程 | 图例04

用同样的方法替换掉img文件夹下的“top_bg.jpg(从style.css文件中,我们可以知道这张图片的作用是给页面平铺背景图)“title_bg.jpg等文件。
在图片替换的过程中,导航条的替换稍微有些难度:

wordpress模板制作教程 | 图例05

导航条一共分为3个部分,“背景nav.gif“当前所在的页面nav_hover.gif和“分隔线nav_img.gif,细心将这些图片替换完成后,一个主题基本上就修改完成了。点此查看修改后的主题
注意:在图片替换的过程中,可以发现,有些图片的宽度只有1像素,这是为了提高页面加载速度用CSS平铺背景的方法来做的优化处理。建议大家同样的背景图,切的越小越好。而有些图片宽度比较大,例如nav_hover.gif,这样做的目的是,当字数很多的时候,可以自适应大小,正常显示。

五、进阶:原创并优化主题
5.1 了解每个页面是做什么的
Header 模板文件:通常在这个文件中包含你博客的标题(title)和描述(description)。而且它们通常在整个博客中保持一致。

wordpress模板制作教程 | 图例06

Index 模板文件:这个模板文件包含你的日志的标题,内容(每篇日志的文本和图片)和日志的元数据 (指的是每篇日志的信息,包括谁是作者,什么时候发表,在那个分类下,有多少留言等等)。Index.php的改变,取决于你在博客的那个页面。

wordpress模板制作教程 | 图例07

Sidebar 模板文件:这个模板文件控制你的页面链接列表,类别链接列表,存档链接列表,blogroll 列表和其他widget。

wordpress模板制作教程 | 图例08

Footer 模板文件:像 header.php 模板文件一样,footer 通常不会因为页面的改变而改变,你可以在这里放置任何东西,但是通常是版权信息。(为提升页面加载速度,我会把统计代码等载入比较费时间的东西放在这个文件中最后载入)

footer-template

5.2 常用模板标签及调用方法:WordPress Template Tags

写在最后的话:

你能做什么,取决于自己学到了多少。对知识掌握的越多、越牢固,能实现的功能也就越多。这不仅仅是在玩BLOG,学到精通,这些知识足以改变自己的生活。精通设计,可以做“网页设计工程师、“交互设计师、“UI设计师;精通XHTML+CSS,可以做“页面重构工程师、“前端开发工程师;精通插件制作,可以去做PHP程序员。在Google有一句话,It’s best to do one thing really, really well.把一件事做到极致,都会有所收获。希望此文能对您有所帮助。

标签: