wordpress主题开发

06-12 1589阅读

科普一：wordpress 是一套用 php 这个语言写的CMS后台管理系统，即我们大家的 wordpress 网站后台是一样的，能体现我们网站外观不同的地方就在于wordpress主题（即皮肤），而这个主题的基本构成是 html+css+javascript，即我们常说的web静态网站，使用浏览器打开即可浏览网站的样式。

科普二：开发 wordpress 主题一般两种方式:

1. 代码方式：即静态 html+css+js 开发

优点：可控性强可实现定制化需求，灵活度高，网站性能好

缺点：需要懂代码，开发周期长

2. 网站构建工具，比如 Elementor

优点：在于不需要非常懂代码，通过拖拉拽的方式即可实现布局，对新手比较友好,拖拉后结果也是生成一些 html 比较臃肿的代码

缺点：不够灵活，网站性能不高，不能细粒度控制网站布局

如下为静态网站的基本结构

以下是网站首页截图

静态网站链接在这里：https://bc.waimaoxpt.com/index.html, 大家可以打开查看下源代码，可以看到这里是 html+css+js 做的静态网站，没有 wordpress 相关代码

说明: wordperss 网站查看源代码时一般可以在url 路径中看到wp-includes、wp-content 这样的关键字

下边我们就来一步步把这个静态网站改写成 wordpress 网站

科谱: wordpress 网站一般可称之为动态网站，因为这类网站一般是由某种编程语言写的，比如 php，并会操作数据库如 mysql, 并经由服务器软件 apache，nginx+php-fpm 等解析后再返回给终端用户的，用户看到的是最终解析的代码，虽然最终解析出来的代码也是 html+css+js, 类似 wordpress 的网站程序还有像Joomla, Drupal,国内的像帝国 CMS，typecho等.

我们首先来实现首页，我们分析首页的结构可以把首页 UI 分成 header 部分，content 部分，footer 部分（实际上网站都可以这样划分，当然也可以有更加细粒度的划分方式）

先在 wp-content 文件夹下建立 bc-furnace 文件夹存放主题文件（这个网站是卖热处理设备的，因此命名为 furnace）

1. 首先我们做一张 screenshot.png 图片以在 wordpress 后台区分自己的主题

2. 新建index.php，主题需要（内容留空）

3. front-page.php，这个页面在 wordpress 主题中表示首页，也可以叫 home.php，它们都表示首页

4. 新建style.css，以启用样式并描述主题

5. 新建header.php 表示网站头部

6. 新建footer.php 表示网站尾部

7. 新建function.php 这是 wordpress 核心功能文件，在这里写的逻辑代码可以 hook 到 wordpress 执行流程中，可以称之为 hook 函数

相关文件截图如下:

首先修改 style.css 如下，这里我们样式代码不放到 style.css 中去，因为一般商业网站样式文件不止一个，当然也可以合并到一个去。

注意: style.css中可以不写样式代码(css)，但上边的注释部分是必须的，它是关于这个主题的描述

现在我们来完善 header.php文件，即实现网站公共的头部，header.php 中一般会包括导航样式部分，一般需要引入网站的样式文件, 我们先把静态网站的 assets (资源文件) 拿过来使用，这里有 css（样式）,images(图片),fonts(字体文件),js(功能脚本文件) 四个文件夹如下图