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

最新推荐文章于 2025-03-25 23:38:27 发布

cj96248

最新推荐文章于 2025-03-25 23:38:27 发布

阅读量7.5k

点赞数 3

分类专栏： Wordpress 文章标签： wordpress 主题制作

本文链接：https://blog.csdn.net/jiangchao858/article/details/102826901

版权

Wordpress 专栏收录该内容

4 篇文章

订阅专栏

写在前面

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

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

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

我想到了下面几点：

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

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

在这里插入图片描述

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

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

准备工作

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

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

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

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

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

主题必要文件准备

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

-- wordpress            根目录
|---- wp-admin          后台管理
|---- wp-content        
    |-------- plugins   插件目录
    |-------- themes    主题目录
|---- wp-includes
|---- index.php         导向页

对于新开发的插件，放在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控制台，可以看到新加的模板。

点击启用主题，然后访问一下Wordpress首页地址，我的在本地，直接访问http://localhost/

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

内容回顾

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

新建了一个目录 mapull
新建了文件 style.css，并加了注释
新建了文件 index.php，并加了简单的html代码