HTML 转 WordPress 主题教程：步骤 1 – 将 HTML 转换为 PHP

fabiha01

在这 3 篇系列文章中，我们将介绍创建您自己的 WordPress 主题的过程 - 从单个 HTML 文件和 CSS 样式表开始，然后将它们转换为具有所有花哨功能的 WordPress 主题。
HTML WordPress 主题 03 1500@2x
对于我们许多人来说，我们第一次为 WordPress 编码的经历是当我们编写我们的第一个主题时。

毕竟，每个 WordPress 网站都需要一个主题，如果您想要定制一些主题，那么自己编写代码是有意义的。

2010年我刚开始使用WordPress时，从未使用过内容管理系统（CMS）。但我编写过大量的HTML和CSS代码，这些代码或用于大型网站（这些网站使用HTML作为CMS的一部分来处理内容），或用于我从头开始构建的小型客户网站。

我花了数周的时间权衡了各种 CMS 的利弊，这些 CMS 可以用于客户网站（记住，这还是在 WordPress 成为如今的主导力量之前创建的），最终选择 WordPress 有两个原因。首先，我们都是 WordPress 用户和开发者社区的一员，盗取这一点。其次，只要有一些 HTML 经验，创建 WordPress 主题并不难。

继续阅读，或通过以下链接跳转：

你需要什么
起始代码
设置主题
添加模板标签
调用样式表
创建自动生成的类和 ID
添加循环
添加钩子
在本系列的三篇文章中，我将带您逐步了解如何从静态 HTML 开始创建自己的 WordPress 主题。我们首先整理一个 HTML 文件和一个 CSS 样式表，然后将它们转换成一个包含创建所有必要功能的 WordPress 主题。

这些帖子将按照以下顺序完成整个过程：

创建您的index.php文件，添加模板标签和循环。
创建额外的模板文件和模板部分，例如页眉、侧边栏和页脚文件。
添加功能，包括小部件和导航菜单，并设置功能文件。
在这篇文章中，我将创建一个单独的文件——index.php。它将基于我静态网站的index.html文件，德国商业传真列表 但我会删除其中的内容，并用模板标签和循环替换它。

那么让我们开始吧！

你需要什么
要跟随本系列，您需要一些工具：

WordPress 的开发安装，最好在您的本地机器上。
代码编辑器。
静态站点 – 如果您没有正在使用的站点，您可以下载我正在使用的文件。
确保在开发站点而不是实时站点上完成这项工作——您不希望全世界在您的主题准备好之前看到它。

起始代码
初始网站只有两个文件——index.html和style.css 。我刻意保持简洁，并使用了精简版的网站。网站看起来如下：

我们的起始主页
您可以在Github上找到index.html和style.css文件的内容- 我不会在这里展示代码，因为代码太多了！

注意：这是一组基本代码，旨在帮助您创建自己的主题。如果您想将其用于实际网站，则可能需要添加额外的样式等。它不符合主题目录要求。请仅将其用于学习，请勿用于实际网站。

设置主题
要创建主题，您需要在 WordPress 安装目录中创建一个文件夹。使用代码编辑器或文件管理器，前往wp-content/themes并创建一个新文件夹。您可以随意命名它。我将命名为 wpmudev-theme-part1。

将index.html和style.css文件复制到该文件夹​​。它们现在还不会执行任何操作，但很快就会生效。

现在，您的文件夹里有两个文件。您已经可以开始了！

目前，WordPress 还不知道您有一个主题。任何主题只需要两个文件：index.php和style.css。正如您在学习本系列文章时所看到的，您通常需要更多文件，但主题只需两个文件即可正常运行。

首先，在样式表中添加注释掉的文本。打开 style.css 文件并添加以下内容：


/*
主题名称：WPMU DEV 基本主题
主题 URI：https://github.com/rachelmccolli ... pment-Series-Files/
描述：主题与从静态 HTML 创建 WordPress 主题的一系列帖子相伴。
作者：Rachel McCollin
作者 URI：https://rachelmccollin.com/
版本：1.0
许可证：GNU 通用公共许可证 v2 或更高版本
许可证 URI：http://www.gnu.org/licenses/gpl-2.0.html
*/
查看原始样式注释 css 由GitHub ❤ 托管
这为 WordPress 提供了所需的信息，使其能够识别这是主题样式表。您可以随意编辑详细信息，添加您自己的名称和 URL，并根据需要更改主题名称。

接下来要做的是将index.html文件的文件名更改为index.php。现在，您有了两个可以使主题正常运行的文件。

但是你还没有添加任何 PHP 代码。为此，我们需要添加一些模板标签和一个循环。我们开始吧。

添加模板标签
模板标签是 WordPress 的一个特殊功能，可用于主题模板文件。它可以执行各种各样的操作——要了解 WordPress 提供的各种模板标签，请查看 Codex。