Wordpress 主题开发教程-从零开始制作主题

Bertha 。 2023-06-11 13:28 5阅读 0赞

## 写在前面 ##

Wordpress 经历过十几年的发展，5个大版本的迭代，已经相当成熟了。  
现如今，即使不懂任何的编程知识，通过主题与插件的支持，也能建立起一个不错的网站。  
但是，如果能了解一款主题是如何制作出来的，对于想修改主题，或者新开发一款主题的使用者来说，都会是一项不错的知识积累。

> 这里讨论的是如何使用代码编写一个主题，如果你想了解的是如何安装或使用主题，那么你将不会从这里获得任何有用的信息。

在编写一个主题之前，还要想一个问题，我为什么要自己开发一个主题？

我想到了下面几点：

*  可以学习编程，毕竟21世纪青年的自我奋进三件事——编程、健身、学英语
 *  脑洞有多大，网站就可以有多酷，不用拘泥于现有主题的功能
 *  可以吹牛，毕竟向别人炫耀自己的网站是一件很酷的事

虽说，自己写主题可以随意发挥，但是毕竟自己的审美没那么自信。于是，我们可以从模仿中前进，比如说可以仿照下面这个[网站][Link 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWFuZ2NoYW8uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]

> 这几节的目标就是做出一个类似上面页面的主题。

在开发的过程中，参考了众多资料，其中包括 `我在水煮鱼` 的教程，但是原版资料已经多年未更新，我不会按照原有的结构再写一遍，而是采用最新的 PHP 规范与最新的 wordpress 说明文档。按照我自己的思路，引导读者成功开发出一套 wordpress 主题。

## 准备工作 ##

在还没有清晰网站原型时，模仿现有的设计，是一个不错的选择。

在开始之前，需要确保几点：

*  对HTML比较熟悉
 *  对css有基本的认识
 *  对js有一定的了解
 *  对php有一定的认识

如果以上都无法满足，至少需要一个可以运行的wordpress环境。  
还要一个得心应手的编辑器。可以是记事本，最好能是比较高级的记事本，比如Sublime Text,Notepad++。  
我用的是PhpStorm,属于IDE了，如果不是专业编程人员，就不必要用这么重的武器。

我用的wordpress版本为`wordpress-5.2.5`，wordpress基本是向下兼容的，但是肯定会出现高版本的操作在低版本无法使用的情况。

## 主题必要文件准备 ##

如果之前没有关注过wordpress的项目结构，从现在开始，需要了解起来了。

对于新开发的插件，放在`wp-content/themes/themes`目录下就是了，wordpress 在升级时，不会更新 plugins 和themes 文件夹下的内容。  
首先，需要新建一个文件夹，你可以取一个酷一点的名字，我的就叫`mapull`了，记得名称**不要使用中文**。  
![MaPull][]

Wordpress的主题通常包含如下几个部分：

*  样式文件——控制页面的外观
 *  模板文件——控制数据呈现的形式
 *  函数文件——扩展主题的功能
 *  JavaScript文件——增加网站的交互性
 *  图片文件——背景，图标等

前3项是构成一款主题最基本的元素，接下来逐个击破。

### 样式文件 ###

`style.css`是wordpress默认的样式表文件名称，它以注释的形式列出主题的详细信息。任何两个主题不能存在相同的注释表述。  
下面是一个基本的主题描述：

`style.css`

/* Theme Name: Mapull Theme URI: https://www.mapull.com Author: mapull Description: 开发属于自己的 wordpress 主题，零基础也能自定义 wordpress 主题 Version: 1.0 */

这里最重要的几个信息：主题名称 `Mapull`, 版本号 1.0

虽说是个样式表，但是目前还不打算写任何样式代码，定义好主题信息后，就可以将`style.css`放一边了。

### 模板文件 ###

模板是一些PHP文件，他可以输出HTML代码呈献给浏览器，决定着主题的外观。  
最基本的模板文件可以是一个index.php文件，甚至于不用php代码，我们可以将下面这个html文本写到php文件中。

`index.php`

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模板文件</title>
    </head>
    <body>
    <h1>学习Wordpress模板</h1>
    </body>
    </html>

看不出任何的php语法，仅仅把html代码写到了php文件中而已。

## 启用模板 ##

在Wordpress控制台，可以看到新加的模板。  
![后台][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWFuZ2NoYW8uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]  
点击启用主题，然后访问一下Wordpress首页地址，我的在本地，直接访问`http://localhost/`

![首页成功][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWFuZ2NoYW8uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 2]  
看到上面的内容，说明主题的必要部分已经顺利完成，当然，这是静态的内容。  
接下来，需要把我们自己写的博客内容展现出来。

### 内容回顾 ###

现在看一下，这一节做了些什么：

*  新建了一个目录 mapull
 *  新建了文件 style.css，并加了注释
 *  新建了文件 index.php，并加了简单的html代码  
    ![目前的状态][20191030204941465.PNG]

[Link 1]: https://www.jianshu.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWFuZ2NoYW8uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20230531/9ae34346f1564e0a842cde50837ef351.png
[MaPull]: /images/20230531/b1a83cc8dc1d42d094c90f35e08f2a4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWFuZ2NoYW8uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]: /images/20230531/fa66960a0044483280bf7f5078205a0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWFuZ2NoYW8uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 2]: /images/20230531/b9a9f52df9bc4dcaa7bf9284c7f5e94f.png
[20191030204941465.PNG]: /images/20230531/9746f2e0ff744132a02ca0f9875743c4.png