wordpress获取home_真香，30天做一套wordpress主题（第1天）：基础框架搭建

最新推荐文章于 2021-07-29 08:07:41 发布

Xenophon Tony

最新推荐文章于 2021-07-29 08:07:41 发布

阅读量196

点赞数

文章标签： wordpress获取home

本文链接：https://blog.csdn.net/weixin_29838739/article/details/112372872

版权

欢迎来到《真香，30天做一套wordpress主题》系列文章，我们的目标是(没有蛀牙！)建立一套全新的wordpress主题，花上30天的时间闭关修炼，如果你看到的第一篇文章不是《基础框架搭建》，建议你关注我们(数字江湖异志录)，从该系列的第一篇开始阅读。

我们将尽量保持文章的循序渐进和通俗易懂，请确保自己已经掌握了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~

理论基础

这里我们假定你已经知晓了以下基础知识，这些基础知识对理解文章内容是至关重要的：

1. HTML/CSS/JS基础

2. PHP基础

3. 如何使用Wordpress

4. 如何搭建web环境

如果你已经知晓了以上基础知识，恭喜你，本系列的任何文章内容对你而言都没有什么难度。

产品设定

当我准备制作一款wordpress主题的时候，我在脑海里浮现出几个关键字，然后迫不及待地把它们写了下来，而这些将上贯穿我们整个制作过程的核心产品/技术设定：

1. 纯AMP主题(极致速度体验)

2. 移动端/PC端响应式布局(Flex布局)

3. Pure CSS design(无图设计)

4. 极简&科技风格(简约但不简单)

5. 传统blog style(还是那个配方还是那个味道)

6. SEO优化(自带SEO光环)

7. 无插件依赖(Plugin free)

Wordpress主题基础结构

我们先来看一张图了解一下wordpress主题的基础页面结构：

(图片来源：wphierarchy.com)

这张图很清晰的表达了整个wordpress主题的层级结构，看上去有点复杂，但我们其实不需要制作所有的页面，只需要关注最后的两层就可以了，我们可以看到，其实整个wordpress主题的关键文件只需要一个index.php就够了，但我们实际不会这样做，因为把所有的页面内容都写到一个文件里实在是太耦合了，所以我们关注到上一个层级，并确定了以下几个需要制作的主题页面：

1. home.php 首页

2. 404.php 404未找到页面

3. search.php 搜索页面

4. singular.php 文章页面

5. archive.php 存档页面

总共5个页面，这样看是不是还挺简单的呢？

开始搭建

我们给这款主题取名叫FreeGeek，找到wordpress文件夹下，按如下路径建立FreeGeek文件夹。

/wp-content/themes/FreeGeek

我们需要建立的第一个文件是style.css，这个文件主要是对主题进行描述(通过注释)。

/*Theme Name: FreeGeekText Domain: FreeGeekVersion: 1.0Requires at least: 4.7Requires PHP: 5.2.4Description: Some descriptionTags: blog, two-column, amp, purecssAuthor: the Inline-flex teamAuthor URI: Theme URI: License: GNU license*/

啥？为什么就是一些注释？没错，就这些就够了，至于为什么要选择从一个style.css文件里读取配置信息，这个就得去问wordpress官方团队了(我估计这应该是有历史渊源的)。

然后我们建立一个index.php文件，内容为空，作为最顶层的一级，index.php文件是必不可少的。

这样我们就可以在后台主题列表里看到我们的FreeGeek主题了，虽然还什么都没有。