在学习了上一节的WordPress主题基础之后,在本章节我们将学习主题制作的基本流程以及一些小功能。

基本流程:

1.创建主题文件夹

2.创建主题模板文件

3.模板文件引入css

小功能:显示作者,时间,评论数量等

主题制作基本流程

创建一个主题,首先我们需要的是一个存放所有主题文件的文件夹。

创建主题文件夹

1.创建一个名字的唯一目录,在wp-content/themes/ 目录下,通过 FileZilla.上传到服务器

2.将你的html/css模型文件和图像文件复制到这个文件夹中

3.再次将index.html重命名为index.php,因为php页面比html页面更加适用,并且能够加入各种函数

4.在css文件最开始的地方添加备注

添加方法如下:

5.保存样式表文件

6.在wordpress后台中选择刚刚创建的主题

创建主题模板文件

  • 上传你的模板文件图像和index.html还有css样式表文件到主题目录
  • 在样式表中添加一些符合w3c规范的代码
  • 将index.html重命名为index.php
  • 为模板标签添加php代码,特别是bloginfo标签,它能够显示文章的内容。
  • 主题内容出现,说明html和css正确显示,然后你可以拆分主题的模板文件,例如头部文件,脚部文件,侧边栏文件,php文件等等。
  • 将主题设计分离为不同的模块,你就可以为主题显示不同的需求,例如不同的主页面布局和不同的内部页面布局,以及使用模板标签和api。

创建完成后我们需要反复测试验证各种页面

  • 编辑html/css/javascript/php文件
  • 在浏览器上检查查看效果
  • 反复上述步骤直至达到效果

 

模板文件引入css

为了在网站页面中显示我们需要的css样式,我们需要在模板文件中引入css文件。

1.首先,找到代码

2.将上述代码改为

Media=”all”:显示媒介

rel=”stylesheet”:描述了当前页与href所指定文档的关系,stylesheet为样式表

type=”text/css”:文档类型,css文件

Href=”style.css”:文档位置

 

小功能

显示作者,时间

代码显示

the_author();(显示作者函数)

the_time();(显示时间函数)

效果显示:

显示评论数量

原代码:

评论数是固定的,只是个静态数字

新代码:

the_permalink();显示评论跳转链接

comments_number(‘0’, ‘1’, ‘%’);显示评论数量

可以输出评论数量,不是静态。

原效果

现效果

<< wordpress主题制作开发实战教程3.1(1)- 主题基础wordpress主题制作开发实战教程3.7 – 在模板文件中分解代码 >>

发表评论

您的电邮不会被公布 必填字段标记为*

提交评论