关于如何创建 2021 年 WordPress 主题的 17 个教程

我们 Colorlib 知道关于创建独特且成功的 WordPress 主题的一两件事，我们自己的定制主题库已经包含 8 个主题，我们正在全天候工作以增加这一数量，同时兼顾客户支持和反馈管理等问题在这一切的中间。 WordPress 多次强调 Colorlib 主题，Adobe 等世界领先品牌正在使用 Colorlib 主题来设计他们的博客。

我们为这些成就感到非常自豪。 然而，我们手头满满的工作，而不是编写我们自己的关于如何创建 WordPress 主题的教程，我们想分享一些我们从一系列 WordPress 开发人员那里发现的鼓舞人心的教程，其中一些你肯定会拥有之前听说过。 但是，我们确实提供了有关如何创建自己的 WordPress 网站的详尽教程。

WordPress

就开发人员而言，WordPress 主题格局在过去几年中发生了巨大变化。 虽然它本身是一个 PHP 平台，但 WordPress 样式涉及大量使用现代网页设计中的 HTML5 和 CSS3 元素，除了 WordPress 样式需要对 WordPress 如何解释样式的具体了解之外，您会找到更多相关信息，其中包括WordPress Codex 主题开发页面上的其他重要元素。

它不再只是容器，而是容器可以支持的功能类型：响应式设计、社交媒体小部件、内容优化等。 从头开始创建一个 WordPress 主题是可行的，对于那些对网页设计有简明理解的人来说，最好的结果将是可能的 - 无论如何，创建自己的 WP 主题有很多乐趣，享受这个过程，你可能会为自己开发一项技能，这可能成为您一直在寻找的第二份工作。

作为 WordPress 开发人员和用户，我们了解本质上称为 WordPress Skeleton 和 WordPress Boilerplate 主题的内容。 这些是模板的预构建原始版本，您可以使用自己的代码进一步设置样式。 完成教程后，我们还将列出其中的一些。 如果您自己是开发人员，我们很乐意包含您自己的任何与制作 WordPress 主题相关的教程，请发表评论或使用电子邮件与我们联系。

您可以直接访问这篇文章的所有三个部分：

WP 主题教程
WordPress 样板主题
视频教程：创建 WP 主题

WordPress 可视化页面构建器的增长

Visual Composer 是 WordPress 使用最广泛的页面构建器，销售量已经达到 135,000，天知道还有多少自定义主题将 Visual Composer 集成到他们的代码库中。 在过去十年中，创建自己的网页设计的格局确实发生了变化，更多的初级用户能够使用页面构建器来创建自己独特的网站设计。

但是，页面构建器能否胜过使用编程语言从头开始创建自定义 WordPress 主题的艺术？ 如果您想使用 Visual Composer，您仍然需要一个主题来使用； 虽然它支持所有 WordPress 主题。 查看使用 Visual Composer 的网站，很明显，可以提供自定义工作的开发人员之间的竞争非常激烈，并且只是为 WP 用户提供了一个简单的替代方案，可以随心所欲地创建。

不难注意到创建自己的 WordPress 主题的好处。 您可以在用于支持网站的平台中体验真实的编程环境，无论如何学习 WordPress 语法并不是那么糟糕。 从头开始的主题意味着您可以从网格布局的一开始就考虑到性能和可用性来构建它。 对定制 WP 主题的需求不会很快消失，所以适合自己，如果编程是你喜欢做或想要练习的事情，没有比直接陷入泥沼并开始学习更好的选择玩以下教程。

如何从头开始制作 WordPress 主题？

快速教程有助于理解您正在构建的内容的结构，这也可以让您了解您正在使用的当前主题。 花在学习基础知识上的时间越多，就越容易注意到主题的特定功能是如何工作的。 您将在本教程中学习如何创建由页眉、页脚、内容区域和侧边栏组成的基本 WordPress 主题结构。 按照作者的建议，最好在本地启用的服务器上练习。 最终结果是一个基本的 WordPress 主题大纲，您可以通过沉浸在我们的列表或网络中的其他教程中来开始构建。

从头开始创建一个简单的 WordPress 主题

您将在本教程集的最后一部分找到更多来自 YouTube 的视频教程，不过现在，我们想提一下 SitePoint 的 5 分钟快速教程，介绍如何为 WordPress 主题创建自己的基础。 您最终会得到一个非常简单的主题骨架，并更好地理解如何开始使用 CSS 来设置单个元素的样式。

初学者指南：如何创建 WordPress 主题

Shahid Siddique 在创建主题方面有很多先前的经验。 尽管他的教程将侧重于基础知识，但您也会对这个过程做更深入的了解。 他分享的代码片段更高级，让他能够创建更面向网格的主题基础，更易于构建。 所有 WordPress 主题都包含相同的文件，除非您正在构建需要集成到单个文件中的其他插件和小部件。

如何从头开始创建 WordPress 主题

创建主题布局并不像我们已经学到的那么困难。 更有趣的是您开始根据自己的要求设计主题样式的部分，这部分通常是最困难的部分，因为您必须开始使用设计模式和一般用户体验方面。 在本指导教程结束时，您将拥有一个盒装的 WP 主题布局，其在样式表中指定了背景颜色，如果您想自己更改颜色，则会提示您在哪里查看。

我们仍处于这些教程的早期阶段，因此请尽可能多地学习这些教程以掌握最基本的知识。 如果您一直计划参加 WP 主题课程，完成这些教程将使您更容易理解课程的结构，以及您自己创建现代主题还需要学习什么。 您还可以选择从网络下载任何免费的 WordPress 主题，并探索它们的代码以了解某个功能是如何实现的。

如何从头开始创建 WordPress 主题：第 1 部分

Deon Dazy 正在撰写一系列帖子，以从零开始创建 WordPress 主题。 尽管他仍在第 2 部分努力工作，但您可以开始探索他在第 1 部分中谈论的内容并将其应用于您正在构建的任何现有演示主题。 如果第 2 部分的发布时间过长，只需通过电子邮件与作者联系，让他知道您有兴趣了解更多信息。 我相信他会非常乐意与您合作。 完成此操作后，您将缩小基本的 WP 主题布局。

如何从头开始创建 WordPress 主题——权威指南

任何涉及创建自己的东西的项目总是会令人振奋。 您正在踏上更多了解 WordPress 和编程的旅程，最终您将能够完全维护自己的主题。 这是页面构建器无法给您的东西。

Soumil Roy 正在编写一份权威指南，用于理解 WordPress 主题以及如何从头开始构建它们。 到目前为止，他已经发布了两本教程，并且在我们发言时他正在做更多的工作。 两个因素已经很突出：主题将使用 Bootstrap 框架构建，本教程将包含有关如何在本地设置自己的 Web 服务器的指南。 如果您查看将要构建的最终版本，这很可能最终成为您需要的唯一教程系列。 迫不及待地等待接下来的部分。

使用 Bootstrap 和下划线逐步创建 WordPress 主题

下划线来自 WordPress Core 平台本身的实际开发人员，因此您绝对可以掌握。 这个骨架主题已经在数以千计的独特 WordPress 设计中得到使用，如果你想加入这个帮派，请跟进 Sigit Prasetya Nugroho 的教程，他的代码示例和见解可以更广泛地了解 Underscores 以及它是如何实现的用于制作几乎任何 WP 主题体验。 他的评论框中也提供了有用的建议，请看一看。

如何一步一步制作WordPress主题

我们喜欢 WordPress 开发人员和教程制作者付出额外的努力来真正展示创造真实事物所需的条件。 Saha Avijit 在解释如何创建一个在白色背景方案上使用蓝色文本的全功能 WordPress 主题时并不害羞。 完成本教程后，您将拥有一个组织良好的 WP 博客主题，可以随时发布。 集成了导航菜单，侧边栏将包含您喜欢的所有小部件，并且您将有一个很棒的样式表可以尝试。 在本教程的开头，宣传了一个视频，展示了如何创建自己的 localhost 服务器。 最终成为主题开发人员所需的所有基础知识。

从头开始创建自定义 WordPress 主题

到目前为止我们已经学到的大部分内容的简要回顾教程。 展示如何为一个主题构建一个基本的 WP 基础，该基础将完全准备好进行样式和自定义。

在 WordPress 中制作原创企业主题

企业主题是 WordPress 生态圈中下载/购买次数最多的主题之一。 你为什么会问？ 好吧，似乎企业在使用 WordPress 作为前端和后端平台来发布他们的商业网站并通过社区和内容管理它们方面取得了巨大的成功。 这里的教程系列来自 Baris Unver，他专注于教授新的 WP 开发人员如何为企业目的创建灵活而令人惊叹的 WordPress 主题。 第一个教程侧重于主页和关于页面，而他的第二个教程深入介绍了页面类型。 我们期待该系列中的更多内容，因此请密切关注它们。

主题框架的实际工作原理

WordPress 主题框架实际上就是能够从单个位置创建自定义 WordPress 主题。 该框架提供了所有功能，并且可以使用子主题充分利用该功能。 您以前很可能听说过 Genesis、Canvas 和 WordSmith 等框架。 这些都是被数十万用户使用的非常著名的 WP 框架，但是 WP 框架究竟是如何工作的呢？ 这就是来自 Tutsplus+ 的 Rachel McCollin 试图开始的使命。 您将从一个深入的系列（已经 11 个帖子）中学习，该系列向您展示如何为主题创建自己的 WordPress 框架，以及您需要涵盖哪些方面来创建一个能够直接构建其他主题的独特框架从管理仪表板。

DRY WordPress 主题开发

代码重复不会对您正在构建的内容的性能产生任何好的结果，不用说，当所有代码不断重复时，开发人员打开您的主题并尝试理解它可能会让人不知所措。 Rachel McCollin 是一位 WordPress 开发专家，她分享了她关于 DRY（不要重复自己）方法的知识，以及如何掌握这种方法来创建通用的代码。 使用这种方法，编辑代码和添加新功能只需要完成一次，它允许其他开发人员在您已经构建的基础上进行构建，而不会造成不必要的挫折。 一篇充满“啊哈”时刻的好文章。

从头开始开发 WordPress 主题

了解 HTML5、CSS3 和 JavaScript 等编程语言对启动 WP 主题项目非常有帮助； 但如果您还不具备这些技能，请不要担心，因为只要有足够的练习和决心，成功就在眼前。 作者在这里所做的是，她采用现有的 Bootstrap 博客模板，并帮助您将该模板转换为可复制该设计的功能性 WordPress 主题。 这是一种更高级的方法，但对初学者仍然友好。 您将使用一系列帖子（目前有 2 个可用），这些帖子是关于 WP 基础架构如何工作以及如何学习成为 WP 主题忍者的深入教程。 所有代码也可供下载。

如何创建和自定义 WordPress 子主题

只需使用一点编程语言，您就可以对现有模板进行如此多的更改。 您也可以随时开始构建自己的模板。 子主题是原始主题的备份。 您可以对子主题进行任意数量的更改，而不必担心在实时生产 WordPress 安装上推出损坏的更改。 子主题虽然不一定比自定义硬主题更容易使用，但确实在构建 WP 主题的方式上提供了一些独特的曲折，以更好地支持您对完美设计的想法。 涵盖所有 WordPress 子主题的高级教程。

最佳实践：为什么以及如何在 WordPress 中创建子主题

子主题是继承和覆盖其父主题的样式和模板的主题。 就像人生一样，没有父母就没有孩子。 在 WordPress 中，没有父主题就不能存在子主题。 父主题是作为独立主题创建的任何主题。 WordPress 附带的每个默认主题（25、24 等）都是父主题。 它们不依赖于任何其他主题来工作和运行。 因此，如果您正在寻找更狭窄的儿童主题方法，请查看 Matt Cromwell 的 WP 儿童主题介绍指南。

如何在 Bootstrap 上构建 WordPress 响应式主题

即使您不打算构建任何 WordPress 主题，了解 Bootstrap 框架也会有所帮助。 Bootstrap 可提供流畅的前端开发体验，并为您全面介绍设计在浏览器中和 Web 上的工作方式。 值得一提的是，使用 Bootstrap 意味着您可以在您的设计中使用任何 Bootstrap 组件，从本质上将开发时间减少到几个小时，而不是几天。 如果您喜欢 Bootstrap 并且长期以来一直在考虑制作主题，那么您将很高兴阅读本教程，该教程展示了如何创建 Bootstrap 支持的新 WP 主题。

使用 REST API 和 Vue.js 创建 WordPress 主题

REST API 和 Vue.js； 听起来很复杂！ 它可能适用于那些之前没有开发经验的人。 所以，我们把最复杂的教程留到最后，这对于之前已经构建了主题的 WP 开发者来说会派上用场，并且需要一种新的方式来挑战自己。 我们相信，学习如何仅使用 REST 和 Vue 来制作主题将具有足够的挑战性。

用于创建自定义样式的 WordPress 主题样板

样板在许多不同的上下文中被不同地理解，特别是在 Web 开发和业务中。 就 WordPress 主题而言，样板是一个预先构建的 WordPress 主题基础，您可以在此基础上继续使用您正在使用的样板的预定义功能。 这通常被称为快速开发。 快速获得美丽的结果将需要更少的努力。 我们知道以下几个 WordPress 样板。 但是，我们鼓励您与我们分享在我们的研究过程中可能遗漏的任何其他人。 谢谢！

仅供参考：您可以应用所有这些教程中新学到的技能。 在使用以下样板模板时使用它们。 这是锻炼所学知识的好方法。 将它与遵循特定开发风格规则的代码库结合起来。

WordPress 样板

WordPress 通常会被视为一个简单的博客平台。 它是初学者的内容平台。 但是，有多少人真正谈论在添加新主题、插件、小部件以及必须维护新 WP 更新的过程中发生的所有混淆。 此外，它使所有这些功能相互分离，让您专注于真正重要的事情。

用于 WordPress 的 HTML5 样板

WordPress 的 HTML5 Boilerplate 基于实际的 HTML5 Boilerplate 模板。 该模板采用现代 HTML5 语法，允许从一开始就制作移动响应和通用浏览器优化的网站。 布局有很大的改进空间，但就样板而言，这是需要探索的更多内容。

骨头

使用 HTML5 样板后端的用于 WordPress 的精彩轻量级样板。 它具有来自 WordPress 社区知名成员的附加功能。 生成器可用于启动您的 Bones 主题，以便您可以快速进行编码。

智者

Sage 样板是建立在一些真正现代的技术之上的：

• HTML5
• 引导程序
• SASS
• 与 Gulp 和 Bower 包管理器协同工作

这种安装最适合认真对待其 WordPress 平台并希望通过使用包管理器来优雅地扩展它的初创公司或企业。

基岩

Bedrock 是 Roots 开发人员的另一个伟大的样板。 它使用 Composer 来管理依赖项。 Bedrock 具有易于修改的配置文件，具有 WordPress 多站点支持，以及一些独特的安全功能，可让您的博客远离黑客之手。

WP React 样板

使用 Gregory Cornelius 的 WP React Boilerplate 为自己了解 React for WordPress 的潜力。

骨架 WordPress 主题

Skeleton 是一个完全响应式的 WordPress 主题。 它旨在允许开发人员和设计人员在现有核心之上构建新功能。

视频教程：创建 WordPress 主题

从教科书（包括博客文章和文章）中学习编程可能会让人不知所措。 您几乎每分钟都“被迫”查看教程详细信息。 这就是为什么视频教程也有巨大市场的原因。 我们发现有很多视频教程与从头开始创建 WordPress 主题相关。 因此，我们将尝试提及我们认为最独特的，或者通常所说的最好的。 我们很乐意在这个特定部分扩展更多的视频教程，如果你有一些隐藏的袖子，请按照我们的方式发送。

请单击视频图像以在新窗口中打开视频。

WordPress 101：从头开始创建主题

第一个视频教程来自 Alessandro Castellani。 他正在创建有用的“WordPress 入门”视频。 它可以帮助 WordPress 的新手通过他们使用的内容管理系统更加灵活。 第一个视频教程大约有 20 分钟长。 它解释了 WordPress 主题的许多方面。 以及向您介绍工具和必要的文件系统，您必须了解这些工具和必要的文件系统，才能开始创建自己的 WordPress 主题。 已经在该视频上留下了数百条评论，表明这是一个可靠的教程。

从头开始创建 WordPress 主题

第二个视频来自 JREAM，这是与数字管理相关的所有课程资源。 本教程稍长。 总共 30 分钟，并解释了如何实现最小的 WordPress 主题的结果，一旦您创建它，该主题将准备好进行内容发布。 再一次，一个易于观看的视频，您可以随时暂停或跳过。 检查评论以获取进一步参考或其他学习材料。

如何在 4 分钟内创建一个 WordPress 子主题

Katrinah 有许多与网站管理员相关的视频教程。 她是一个可爱的灵魂，她付出了很多努力来制作没有经验的用户能够理解的视频。 这只是她关于 WordPress 和 WordPress 主题的众多视频之一。 特别是，在这一篇中，她专注于 WordPress 子主题、如何创建它们，并帮助您了解它们的工作原理。 针对有意识的瑜伽社区，因为并非所有瑜伽士都有资金开始投资他们自己的自定义 WordPress 风格，所以为什么不建立自己的风格。

如何创建高级 WordPress 主题

这是 Alessandro Castellani 的另一个教程。 这是有关创建您自己的 WordPress 高级主题的丰富教程的完整播放列表。 您可能会将这些主题出售给某人。 在撰写本文时，播放列表中有 39 个教程。 这将是一个非常专注的项目，您需要以耐心和决心予以尊重。 很少看到有人做如此广泛的教程。 充分利用这一点，因为它是免费的，因为您可以。

从头开始创建自己的 WordPress 主题

我们希望我们能够全力以赴。 此外，为您提供与创建 WordPress 主题相关的任何内容的一站式资源。 此外，您需要开始使用的工具类型。 从博客教程到样板，再到累积内容超过 15 小时的视频教程。 您将不再需要参考其他资源来构建您的第一个 WordPress 主题。 欢迎对要添加到此帖子的额外内容提出建议。