wp主题制作教程-如何自制wordpress主题?

于是大家萌生了修改现有主题或自己动手从头制作一个主题的想法,但是问题又来了,如何制作呢?制作主题是需要编写代码的,很多网友根本没有接触过编程,大多数人看到代码就头大。汤菜博客着手编写一个WordPress主题制作的系列基础教程,将从头到尾手把手教大家如何制作一个完整的WordPress主题,希望对大家有所帮助。但是本人的能力也有限,这系列教程只能让你初步认识主题的制作过程,并不能让你完全地掌握WordPress主题的精髓。本系列教程适合以下人群阅读:懂一点点的HTML、CSS知识但不懂写PHP代码的朋友;自己动手编写过简单HTML代码的自己会设计网页界面,想了解怎么制作WordPress主题了解一点PHOTOSHOP或FIREWORKS的简单处理图片的朋友本系列教程不适合以下人群阅读:不打算动手编写代码,不想照着本教程一步一步地操作,只是想看看的朋友没有任何网页设计知识的朋友非常熟悉WordPress主题制作过程的朋友也没必要看啦阅读完本系列教程,你将收获:了解WordPress主题制作的大致步骤明白如何去修改WordPress主题,以及扩展主题的功能制作主题,必须配备以下工具:WordPress本地运行环境(或者在线网站空间),并且已安装好WordPress;配备各种浏览器, Internet Explorer、搜狗、Mozilla Firefox、Google Chrome、360、用于测试网页是否显示正常,因为你不知道看你网页的人是用的什么浏览器;一个文本编辑器用于编写代码,Dreamweaver、UltraEdit等,不推荐使用记事本,具体原因点此查看《不用记事本写网页代码的理由》图片处理软件: PhotoShop或FireworksWordPress主题制作全过程列表: 如何制作WordPress主题(二):主题文件结构

你可以参考

老外写的教程很细致,水煮鱼把他翻译了,也很详尽

后台不需要重新做.

不过wp的主题制作相对还是复杂些吧,我同意kris,最好还是懂点php.

你也可以下载sandbox,是老外写的空白wp模版,你在此基础上编写可以省很多事情.写写css文件和制图片就可以了.

在我们开始前还有一点事情需要你去做:

安装WordPress

下载并解压缩 Bootstrap

安装主题测试驱动插件*

* 如果你想在一个线上的网站上创建一个主题并且不想在你开发的过程中让人们看到新主题,你正好需这个插件。

一旦你准备好这些事情,打开你带有WordPress所有文件的目录并导航至wp-content > themes。

在你导航至那个文件夹后,创建一个叫“wpbootstrap”的新文件夹,在文件夹里面粘贴bootstrap文件夹。

在那个文件夹里面创建一个新文件叫。

现在我们将要把基本营销网站的源码拷贝并粘贴到里面。下面是你所要用到的源码。我们仅链接了代码的一个文本版本,因为它太长了不能嵌入在这里。

bootstrap-demo-source-code

现在我们有了一个静态的html页面,我们将要继续去创建一个主css页面。WordPress需要一个显示在页面顶部的特殊格式的注释,它使用这个注释来获得关于你这个主题的所有信息。

在你的页面所在文件夹中创建一个新文件并命名为,WordPress需要一个带有特定名称的CSS文件,所以我们不将其命名为其它任何名称否则我们的主题将不能工作。

创建完了文件,在文件头部添加注释:

/*

Theme Name: WP Bootstrap

Theme URI: http //teamtreehouse com/wordpress-bootstrap-theme-tutorial

Description: A demo theme built to accompany the Treehouse blog post <a href="http //teamtreehouse com/wordpress-bootstrap-theme-tutorial">How to Build a WordPress Theme with Bootstrap</a>.

Author: Zac Gordon

Author URI: http //teamtreehouse com/

Version: 1.0

Tags: responsive, white, bootstrap

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)

License URI: http //creativecommons org/licenses/by-sa/3.0/

This simple theme was built using the example Bootstrap theme "Basic marketing site" found on the Bootstrap web site http //twitter github com/bootstrap/examples/hero html

*/

在我们安装和开始构建我们新主题前,我们最后需要做的是上传一张将会在WordPress管理区显示我们主题的图片。这张图片需要为300*225像素并且要命名为“”,你可以用下面这张图片或做张你自己的。

你的文件夹结构现在看起来和下面的一样:

我们现在准备进入到控制面板安装我们的新主题。登录到控制面板并且到外观>主题。可应该可以看到“WP Bootstrap”做为主题中的一个被列出来。

点击WP Bootstrap主题下面的激活设置它为网站的当前主题。

注意: 如果你正在使用一个线上的网站并且不想让人们看到这个主题正在开发中,确保安装并激活 Theme Test Drive plugin。