【基础篇】3、设计制作你的 HTML 主题文件

这已经好多天没有写文章了,最近我的 wlan 账号出了一点问题,所以这些天我没怎么上网。今天宿舍网线终于扯上了,又有网可以上了。

新学期的食堂饭菜又贵了,一般贵个五毛或者一块,没有涨价的,质量下降了。今天中午吃的面,4 块的,量只有去年 3 块 5 的,加的料子根本没有多少,去年直接加 1/4 多。坑爹啊,再也不在那吃了。没钱吃饭了,吃饭就吃穷了。无语。好了,牢骚发完了,看文章

================================================

制作主题之前,你必须使用 HTML 和 CSS 来制作出一个模板,确定博客主题的整体风格。这样,需要你有一定的 HTML 和 CSS 基础。

在这里,为了教程演示,潜行者 m 制作了一个比较简单的小模板,结构简单、CSS 样式也不多,方便新手学习,下面简单说一下模板的结构以及重要的 CSS 样式,仅供新手学习。如果你有一定的 HTML 和 CSS 基础,可以略过这一部分。如何制作模板网页,如果新手的话,可以稍微看一下我的这篇文章 网页设计的一般步骤

模板文件结构

新建一个文件夹,命名为 “myTheme” 。在里面要添加至少两个文件,一个是 index.html 另一个是 style.css 。此外,为了之后的制作,我们还应当添加两个文件夹,分别是 /images 和 /js ,分别用来存放主题需要的图片和 Javascript 文件。

模板文件内容

我做了一个比较简单的模板,具体演示效果如下图

现在还没有添加任何的数据,只是一个大体的框架,在下面我将会添加数据,然后整体效果就会出来了。

这个文件在文章后面可以下载到。

为模板添加模拟数据

从上图大家就可以看到各个部分的功能等。下面,我要在模板中添加模拟数据,之后使用 CSS 对其进行外观定义。之后,我们就可以对照数据,添加 WordPress 相应的调用数据的函数,完成主体制作。

添加模拟数据,并且定义了外观 CSS 之后的模板文件如下图

在下图中,我对添加的数据作了一个说明

这样,我们的模板文件就算是做好了,对应数据以及相应的 CSS 都已经编写好了。你现在已经看到了一个简单的博客页面。根据前面说的 WordPress 的大体制作步骤,我们现在只需要使用相应的函数调用相应的数据就可以了。

其他问题



我是新手,不会做这种模板怎么办?

1. 制作主题等,需要一定的 Html 和 CSS 基础,如果你没有基础,请寻找相应资料,先学习一下 Html 和 CSS ,否则后面的学习会比较吃力。
2. 你也可以在网上下载 Html 模板或者下载我做好的教程模板,先不管如何去设计制作模板,先使用现有资源进一步学习。

本节课相关资源下载

myTheme 模板文件下载地址 : >>点击这里

之前的系列文章

  1. 开始执行的 wordpress 主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress 的主题机制