杨思为 | 我们一家

WordPress模板开发—模板制作教程（1）

接触WordPress很长时间了，一直都是在使用别人制作好的免费模板（感谢那些无私的WordPress模板开发者！），心底一直期望自己能够早日学会WordPress模板开发方法，假期里因为要给宝贝儿子杨思为改版他的博客，所以自己狠下心去读了一些WordPress模板开发制作的文献，掌握了WordPress模板开发方法。今天又由于某些原因，决定静下心来写WordPress模板开发方法的系列教程，希望对喜欢的WordPress爱好者有所帮助：）

我希望这篇WordPress模板开发制作教程能使那些即使没有任何PHP开发经验的WordPress爱好者都能够开发出自己的模板。如果您掌握以下的知识，将会使您能够更好的理解本教程，这些知识包括：

1、基本的HTML知识

2、DIV+CSS布局

3、PHP程序设计

4、基本的网站管理技术，例如使用ftp上传网页，会安装软件。

呵呵，当然，如果您对这些都不了解，我想只要通过您的努力，亲自动手按照本教程来练习，我想您也是可以学会WordPress模板开发制作技术的。下边就开始我们的WordPress模板开发制作之旅吧！

WordPress模板开发——模板制作准备工作

1、安装WordPress运行环境

要进行WordPress模板开发，首先最基本的一点就是要有WordPress运行的环境，在这里像大家推荐XAMPP，XAMPP是一款将Apache、MySQL、PHP、FileZilla集成在一起的软件，通过安装该软件就可以一步到位的把WordPress运行环境搭建起来，避免了单独安装Apache、MySQL、PHP等软件的烦恼。

XAMPP官方网站是：http://www.xampp.org；

XAMPP可以在各种流行的操作系统下安装，包括xampp for Linux、xampp for Windows、xampp for MAC os x、 xampp for Solaris等主流操作系统。

本教程是在Windows 操作系统下进行演示的，其它操作系统上该软件的安装可以参考xampp官方文档，本教程不做进一步说明。

XAMPP下载地址：http://www.apachefriends.org/download.php?xampp-win32-1.6.7-installer.exe

在2008年9月8日，XAMPP最新的版本是1.6.7，下载保存到本地硬盘中，双击xammp-win32-1.6.7-installer.exe，按照提示完成安装，一直都按照默认的进行，不需要做任何设置。默认条件下xampp将会安装在C盘根目录下，也就是c:/xampp下，如果您更改了该目录，那么下边中涉及到xampp的安装目录都更改为您所设置的目录。

安装完成以后，打开浏览器，在浏览器地址栏中输入：http://localhost/，如果出现了XAMPP的相关信息，那么说明已经安装成功了（呵呵，这里偷个懒，暂时就不截图了）。

2008年10月13日更新：Windows下Xampp的安装方法

2、安装WordPress博客

WordPress官方网站：http://wordpress.org

WordPress官方下载地址：http://wordpress.org/download/

下载最新版本，解压，将解压后的文件夹wordpress里的内容全部拷贝到：

c:/xampp/htdocs/

备注：记得将c:/xampp安装目录修改为您真实的xampp安装目录

如果提示是否覆盖，选择覆盖所有！OK，距离激动人心的WordPress模板开发制作就差一小步了。

在浏览器的地址栏中输入：http://localhost/phpMyAdmin/

进入到phpMyAdmin管理界面中，创建WordPress的数据库，例如创建数据库“wordpress”，整理选择“utf8_general_ci”，如下图所示：

安装wordPress

点击上图中“创建”，完成wordpress数据库的创建。然后在IE地址栏中输入：

http://localhost/

此时，根据操作，完成WordPress博客系统的安装，对初学者来说，可能需要注意的地方就是在填写数据库配置这一步骤，如果您是完全根据以上教程来操作的（也就是xampp都是采用默认设置），那么在WordPress安装配置这一步骤中，只需将数据库的用户名写成“root”即可。

详细的WordPress安装教程在这里就不再细说了，其实之前不打算在本教程中写如何安装WordPress博客部分的内容，因为该教程的是面向已经拥有WordPress博客的用户：）这部分我将会在今后的WordPress初学者教程中详细描述。

3、PHP代码编辑工具

在这里推荐使用EditPlus或者zend studio，我目前都是使用zend studio进行PHP代码编辑。对于初学者，建议下载一个破解版的EditPlus即可。

EditPlus下载地址：http://www.skycn.com/soft/3641.html

4、 CSS验证以及HTML验证工具

XHTML 验证工具：http://validator.w3.org/；检验您所编写的XHTML代码是否符合WEB标准，符合WEB标准的网页能够被更多的浏览器所阅读，也就能够为更多人提供服务：）

CSS验证工具：http://jigsaw.w3.org/css-validator/；检验您所编写的CSS样式表语法是否符合规范。

5、 DIV+CSS页面布局工具

使用firefox+ firebug进行DIV+CSS页面布局，firebug是firefox浏览器的一个插件，所以先安装Firefox，然后才能安装firebug。

firefox浏览器的下载地址：http://www.mozillaonline.com/

firebug插件的安装地址： https://addons.mozilla.org/zh-CN/firefox/addon/1843

WordPress模板制作—模板开发教程的内容安排

本教程将会以一个宝宝的WordPress模板制作来展开，在决定写这个教程以后发现，自己会和写出来教会别人真的是有很大差距，欢迎各位朋友多提建议和意见：）

WordPress模板制作简介
思为宝宝博客效果图
思为宝宝博客首页的制作
思为宝宝博客文章浏览页面的制作
思为宝宝博客单页面浏览页面的制作
WordPress模板文件及文件之间的关系
WordPress模板真实时刻
WordPress模板header.php制作
wordPress模板index.php制作
文章列表显示
文章具体信息的显示
文章评论模板的制作
侧栏（sidebar.php）的制作
显示单页面列表
显示博客最近更新列表
显示友情链接列表
显示管理选项列表
显示最近评论信息列表
地栏（footer.php）的制作
其它

WordPress模板制作教程各章节的内容将会陆续完善，真心希望对广大WordPress博客爱好者有所帮助：）

该文档最后更新时间：2008年9月9日剑锋博客

备注：由于最近工作比较忙，《WordPress插件制作开发教程》预计在九月底才能完全推出！

作者：思为爸爸分类：WordPress 标签：WordPress, WordPress模板制作, Wordpress模板开发时间：2008年9月8日 4,083次浏览

当前位置：首页>开发研究>WordPress>

上一篇：有感于中国互动出版网的服务！

下一篇：XAMPP是什么—xampp for windows又是什么?

评论 (8) 引用 (1) 欢迎评论引用

水之女

九月 11th, 2008于21:00 | #1

回复 | 引用

这样的思路很不错，期待教程早日完成:-)！
yangjf

九月 11th, 2008于22:39 | #2

回复 | 引用

唉，惭愧……这几天忙得又把WordPress模板制作开发教程的事情拉下了……

今晚还在为明天讲如何进行WordPress插件开发做准备，只好把这个事情暂时放一放，完全推出我想可能要到9月底了——好郁闷啊！
ymir

九月 19th, 2008于20:18 | #3

回复 | 引用

hehe ,杨老师，写的好详细啊
yangjf

九月 20th, 2008于23:02 | #4

回复 | 引用

写着写着发现想写好《WordPress模板制作开发教程》工作量好大啊，还在继续完善中，打算完全写完再发布了：）你怎么来到这里的？
ymir

九月 22nd, 2008于09:45 | #5

回复 | 引用

呵呵，我经常来的啊，这里面，有很多要学习的东西呢，:-)
ymir

九月 22nd, 2008于09:46 | #6

回复 | 引用

我经常来这里的，里面的内容那么丰富的……
510博客

十一月 11th, 2009于15:21 | #7

回复 | 引用

我目前见到的最好的教程！
yangjf

十一月 12th, 2009于15:19 | #8

回复 | 引用

惭愧……一年了都还没有更新过！！！

十月 29th, 2008于09:51 | #1

wp_options基本配置表—WordPress数据库研究#5 | 剑锋博客-关注WEB应用开发的IT博客

WordPress的其它文章

更多WordPress文章>>

最新文章

热评文章

热门文章

我们一家最新文章