WordPress主题制作快速入门

这个教程我将教大家如何自定义自己的WordPress主题,尽管WordPress官方网站 已经提供给我们非常好的关于WordPress制作的文档, 但我发现这对一个初学者来说仍然不是很懂。
在这个教程里,我将介绍WordPress主题的结构基础然后教你如何将一个静态HTML模板变成一个主题。
不需要任何PHP基础,但你需要懂photoshop和css来创建我们的主题!
1、博客界面

在开始之前,我们看一下WordPress默认的主题,观察它的组织结构. 注意一下元素(头部, 文章标题, 搜索表单,导航, 页脚, 等等.).

默认首页 (index.php)

默认日志单页文件 (single.php)
2. Photoshop模板

基于从默认主题获取的信息,设计及的photoshop模板。

这里我们用到以前提到过的 GlossyBlue, 一款免费的WordPress主题,作为例子。 点击下载文件 以便参考!


3、 HTML + CSS

PSD设计完成之后,为每页创建html+css的静态模板。

你可以使用GlossyBlue HTML 文件跟随本教程,解压zip文件看一下index.html、single.html、and page.html。

在教程结尾,我会使用这些HTML文件,并转换成它们的主题。


何为创建HTML主题的第一步?

为了使开发过程变得简单,我通常为每一个我需要的模板创建HTML文件。 在所有浏览器测试,同时验证HTML和CSS,然后开始复制粘贴WordPress代码。

一般来说,我不必担心在HTML和CSS主题制作过程出现的错误。
4、 如何制作WordPress主题作品

如果,你进入默认的主题文件夹 (wp-content/themes/default),你会看到许多PHP文件(称为模板文件) 和一个style.css 文件。当你浏览首页的时候, 事实上是由WordPress 使用若干模板文件组合而成的 (index.php << header.php, sidebar.php,and footer.php)。

更多详情, 浏览网站架构和模板层次在WordPress官方站点.
5. 复制模板文件

复制GlossyBlue HTML 文件进 wp-content/themes 文件夹,然后,进入默认模板主题文件夹,复制 comments.php 和searchform.php文件进glossyblue文件夹。


6. Style.css

进入默认模板主题文件夹,打开style.css文件。在顶部复制commented部分的样式代码 粘贴进GlossyBlue style.css 文件,根据你的意愿更改主题名称和作者信息。


7. 分割文件

现在,你需要了解如何将文件分成几个独立的小文件:sidebar.php,footer.php,header.php。

下面这张图显示了简化版的首页文件和切割标记:


8、Header.php

打开index.html 文件,从顶部一直剪切到 <!–/header –>末尾,粘贴到新的 PHP 文件, 保存为header.php。


转到 default theme 文件夹,打开header.php。

复制替换一下php代码标签(模板标签):<title>,<link> 样式标签;<h1>,和 <div class=description>。

导航目录 (wp_list_pages)

替换 <li>标签 在 <ul id=nav> 和 <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?>

参考: wp_list_pages.

Leave a comment

You must be logged in to post a comment.