在本教程中，我们将讨论如何开始主题开发。然后，我们将带您逐步完成创建全新自定义主题的过程。
如果你想把某件事做对，你可能必须自己做。虽然有很多WordPress主题可用，但要找到一个具有您需要的外观和功能的主题可能很困难。事实上，您可能会尝试创建自己的主题。然而，主题开发的入门似乎势不可挡——尤其是对于初学者而言。
幸运的是，为WordPress创建自定义主题是一个相对简单的过程。它也不需要太多的技术知识或Web开发经验。此外，构建您自己的主题非常值得付出努力，因为您可以让您的网站看起来和运行得恰到好处。
WordPress主题开发简介
您希望您的网站看起来很棒并拥有您需要的所有功能，因此您可以查看WordPress主题目录或者我们提供的WordPress原创主题。不幸的是，您看到的任何东西都不能满足您的所有要求，而且您不想在您的愿景上妥协。也许您想要一些独特的东西来让您的网站脱颖而出，或者您只是不想将钱花在高级主题上。
此时，您可能会开始考虑创建自己的主题。幸运的是，为WordPress开发主题并不是您想象的那么复杂。由于该平台固有的用户友好性和众多可用工具，几乎任何人都可以创建自定义主题。
我们将带您完成创建第一个主题的过程。要开始，您需要做两件事：
- 您自己的WordPress 网站
- 一个优质的服务器
您还将受益于拥有本地临时环境的经验，因为您将使用一个环境来创建您的主题。对CSS和PHP有一些了解也会有所帮助（如果没有必要）。
最后，您需要拥有一个重要的工具，它可以使创建主题的过程变得更加容易：入门主题。
什么是入门主题
入门主题是一个基本的WordPress主题，您可以使用它来创建自己的主题。使用starter使您能够建立在一个可靠的框架上，而不必担心从头开始编写主题所涉及的复杂性。它还将通过向您展示主题的基本结构及其所有部分如何协同工作，帮助您了解WordPress的工作原理。
有很多优秀的入门主题在那里，其中包括下划线，UnderStrap和Bones（仅举几例）。
我们将在下面的示例中使用下划线。对于初学者来说，这是一个不错的选择，因为它只包含基础知识。另外，这个入门主题是由Automattic开发的，从长远来看，这使得它更有可能是安全的、兼容的并且得到很好的支持。
如何开发您的第一个WordPress主题
随着准备工作的进行，您终于可以开始创建您的第一个主题了。正如我们提到的，我们将在本演练中使用入门主题。
但是，如果您想尝试在没有模板的情况下自己创建所有内容，您应该随意这样做。请记住，这将需要更多的编码能力和对Web开发的理解。
Step 1：设置本地环境
您需要做的第一件事是创建本地开发环境。这实际上是您安装在计算机上的服务器，您可以使用它来开发和管理本地WordPress站点。本地站点是开发主题的安全方式，而不会以任何方式影响您的实时站点。
有很多方法可以创建本地环境，但本次示例我们将使用DesktopServer。这是一种免费安装本地版本WordPress的快速、简单的方法，并且与Mac和Windows兼容。要开始使用，请选择DesktopServer的免费版本，完成注册过程，然后下载安装程序。
下载安装程序后，您可以运行它。
安装完成后，您可以打开该程序，系统会要求您配置新的本地环境。这是一个简单的过程，您将在几分钟内准备好您的本地WordPress站点。安装后，您的新网站的外观和工作方式将与实时WordPress网站完全相同。
Step 2：下载并安装您的入门主题
与大多数入门主题一样，Underscores非常容易上手。事实上，您需要做的就是访问网站并命名您的主题。
如果需要，您还可以单击Advanced Options以进一步自定义基本主题。在这里您可以填写更多信息，例如作者姓名，并提供主题描述。
还有_sassify！选项，这会将Syntactically Awesome StyleSheets (SASS)文件添加到您的主题。SASS是一种CSS预处理语言，它使您能够使用变量、嵌套、数学运算符等。
当您做出选择后，您可以单击Generate，这将下载一个包含您的入门主题的.zip文件。这是您将围绕它开发自己的主题的核心，因此请将其安装在您的本地站点上。安装主题后，您可以预览站点以查看其外观。注：这只是一套最最最基础的主题，还需要您对其深加工！
Step 3：了解WordPress在幕后的工作原理
在自定义主题之前，您需要了解其组件的用途以及它们如何组合在一起。首先，让我们讨论模板文件，它们是 WordPress 主题的主要构建块。这些文件决定了您网站上内容的布局和外观。例如，header.php用于创建标题，而comments.php允许您显示评论。
WordPress通过浏览模板层次结构来确定在每个页面上使用哪些模板文件。这是每次加载您网站上的页面时WordPress查找匹配模板文件的顺序。例如，如果您访问URL地址http://example.com/post/this-post，WordPress将按以下顺序查找以下模板文件：
由于所有主题都需要index.php文件，因此如果找不到其他文件，则默认使用该文件。Underscores已经包含了最常见的模板文件，它们开箱即用。但是，如果您想了解它们如何协同工作，您可以尝试编辑它们。
您需要掌握的另一个重要元素是Loop。这是WordPress用来显示内容的代码，因此在许多方面，它是您网站的跳动心脏。它出现在所有显示文章内容的模板文件中，例如index.php或sidebar.php。
循环是一个复杂的主题，如果您想更好地掌握WordPress如何显示文章内容，我们建议您阅读更多相关内容。幸运的是，由于Underscores，Loop已经集成到您的主题中，因此现在无需担心。
Step 4：配置您的主题
很容易认为主题纯粹是为了装饰目的，但它们实际上对您网站的功能产生了巨大的影响。让我们看看如何进行一些基本的自定义。
使用“钩子”添加功能
钩子是插入到模板文件中的代码片段，它使您能够在站点的不同区域运行PHP操作、插入样式并显示其他信息。大多数钩子直接在WordPress核心中实现，但有些钩子对主题开发人员也很有用。
让我们来看看一些最常见的钩子以及它们的用途：
- wp_head() — 添加到header.php中的
元素，并启用网站加载后立即运行的样式、脚本和其他信息。 - wp_footer() — 在
标签之前添加到footer.php。这通常用于插入Google Analytics代码。 - wp_meta() — 这通常出现在sidebar.php中，以包含其他脚本（例如标签云）。
- comment_form() — 在文件结束
标签之前直接添加到comments.php 以显示评论数据。
这些将已包含在您的Underscores主题中。但是，我们仍然建议您访问Hooks数据库以查看所有可用的钩子并了解有关它们的更多信息。
使用CSS添加样式
层叠样式表 (CSS)定义了您网站上所有内容的外观。在WordPress中，这是使用style.css文件完成的。您已经将这个文件包含在您的主题中，但目前它只包含基本的默认样式。
如果您想快速了解CSS的工作原理，可以在此处编辑任何样式并保存文件以查看效果。例如，您可以找到以下代码（通常在第 485 行）：
a {color: royalblue;}
这控制未访问的超链接的颜色，默认情况下显示为宝蓝色：
让我们看看如果我们尝试通过用以下代码替换它来改变它会发生什么：
a {color: red;}
保存文件，然后立即查看您的本地站点。正如您所料，所有未访问的链接现在将显示为鲜红色：
您可能会注意到顶部的访问链接没有改变颜色。那是因为它实际上由样式表中的下一部分控制：
a:visited {color: purple;}
这是一个非常基本的示例，说明编辑style.css将如何影响您网站的外观。CSS 是一个庞大的主题，如果您想了解有关创建网页设计的更多信息，我们建议您进一步探索。有很多关于CSS主题的资源供初学者使用。
Step 5：导出主题并将其上传到您的网站
当您完成对主题的修改后，是时候确保它正常工作了。您可以通过测试主题来确保这一点。为了快速确保您的主题在大多数情况下都能正常运行，您可以使用Theme Unit Test数据。这是一组您可以上传到您的网站的虚拟数据，其中包含许多不同的样式和内容变体。它将使您能够了解您的主题如何处理不可预测的数据。
当您彻底测试了您的主题并确信它符合要求的标准时，现在剩下的就是导出它。最简单的方法就是找到网站在本地计算机上的安装位置，最有可能在默认文档目录中名为网站的文件夹中。打开网站的文件夹并访问/wp-content/themes/，您将在其中找到您的主题。
您现在可以使用压缩工具（例如WinRAR）来创建基于文件夹的.zip文件。只需右键单击文件夹，然后选择可以压缩它的选项，例如压缩“文件夹”。
当文件夹被压缩后，它就可以上传并安装在任何WordPress站点上，就像您在开始时安装Underscores主题一样。如果您对结果感到特别满意，您甚至可以将您的主题提交到WordPress主题目录。
小结
从头开始创建自定义WordPress主题是一项不小的壮举。然而，这个过程可能并不像您之前想象的那么困难。通过将过程分解为多个阶段并使用Codex文档站点上的信息，几乎任何人都可以创建新主题。
当然，上述的主题开发教程只是一个基础、入门教程，要开发一个功能完善、前端交互一流的WordPress主题，并不是一蹴而就的事情。你可能需要对PHP、WordPress、CSS、JavaScript等代码知识有非常深入的了解和学习。
原文地址：https://www.wbolt.com/developing-a-wp-theme.html
