Products
GG网络技术分享 2025-03-18 16:07 2
对于我们中的许多人来说，我们第一次为 WordPress 编码是在我们编写第一个主题时。
毕竟，每个 WordPress 网站都需要一个主题，如果您想要定制的东西，那么自己编写代码是有意义的。
当我在 2010 年开始使用 WordPress 时，我以前从未使用过内容管理系统 (CMS)。 但是我编写了大量的 HTML 和 CSS，无论是在使用 HTML 作为 CMS 一部分的内容的大型网站中，还是在我从头开始构建的小型客户端网站中。
我花了数周时间权衡可用于客户网站的不同 CMS 的优缺点（请记住，这是在 WordPress 成为今天的主导力量之前）并出于两个原因决定使用 WordPress。 第一个是我们都参与的令人敬畏的用户和开发人员社区。 第二个事实是，有了一些 HTML 经验，创建 WordPress 主题并不难。
继续阅读，或使用以下链接跳转：
在这三篇文章中，我将引导您完成从静态 HTML 创建自己的 WordPress 主题的过程。 我们将从一个 HTML 文件和一个 CSS 样式表开始，并将它们转换为一个 WordPress 主题，其中包含所有的花里胡哨。
这些帖子将按顺序完成整个过程：
在这篇文章中，我将创建一个文件—— 索引.php. 这将基于 索引.html 我的静态站点中的文件，但我将删除内容并将其替换为模板标签和循环。
所以让我们开始吧！
要学习本系列，您需要一些工具：
确保您在开发站点而不是实时站点上进行这项工作——您不希望世界看到您的主题，直到它准备好。
起始站点只有两个文件——我们的 索引.html 和 样式.css. 我故意让事情变得简单，并使用了我网站的精简版。 这是它的外观：
你可以找到里面的内容 索引.html 和 样式.css Github 上的文件——我不打算在这里展示代码，因为有很多！
注意：这是一组基本代码，旨在帮助您创建自己的主题。 如果您想将它用于实时站点，您可能必须为其添加额外的样式等。 它不会通过主题目录要求。 请仅将其用于学习，而不是为实时站点提供动力。
要创建您的主题，您需要在 WordPress 安装中为其创建一个文件夹。 使用您的代码编辑器或文件管理器，转到 wp-内容/主题 并创建一个新文件夹。 给它任何你想要的名字。 我要打电话给我的 wpmudev-主题-第 1 部分.
复制你的 索引.html 和 样式.css 文件到该文件夹。 他们还不会做任何事情，但他们很快就会做。
现在你有一个文件夹，里面有两个文件。 你开始了！
现在，WordPress 不知道你有一个主题。 任何主题只需要两个文件： 索引.php 和 样式.css. 正如您将在阅读本系列文章时看到的那样，您通常需要的不止这些，但主题只需要两个即可。
让我们首先将注释掉的文本添加到您的样式表中。 打开你的 style.css 文件并添加以下内容：
这为 WordPress 提供了识别这是主题样式表所需的信息。 随意编辑详细信息，添加您自己的名称和 URL，并根据需要更改主题名称。
接下来要做的是更改您的文件名 索引.html 文件到 索引.php. 您现在有两个文件可以让您的主题正常工作。
但是您还没有添加任何 PHP。 为此，我们需要添加一些模板标签和一个循环。 让我们这样做。
模板标签是您在主题模板文件中使用的特殊 WordPress 功能。 它可以做各种各样的事情中的任何一种——查看提供的模板标签范围，查看 codex。
在这里，我们将为两件事添加模板标签：
现在，如果您在激活新主题的情况下打开您的网站，您会注意到您的任何样式都没有加载。 这是我的样子：
不要惊慌！ 你只需要添加一个样式表调用到 head 索引文件的部分。
注意：在本系列的第三部分中，我将向您展示如何将其移至主题函数文件，这是最佳实践。 现在我们只使用两个文件：样式表和 index.php 文件，所以我们将坚持使用它们。）
打开你的 索引.php 文件。 找到这一行：
编辑它，而不是调用静态文件，它使用 PHP 加载主题样式表：
这使用 bloginfo() 模板标签，一个有用的标签，可以从数据库中获取有关您网站的各种信息。 在这种情况下，它会获取主题的 url，然后访问该文件夹中名为 样式.css.
现在刷新您的主页。 您会发现样式已加载。 这是我现在的页面：
您会注意到它看起来与您的旧静态站点完全一样。 但这并不意味着我们已经完成了——还差得很远！ 内容是从静态内容中拉出来的 索引.php 文件，我们将通过添加一个循环来纠正它。 但首先让我们添加更多模板标签。
能够让 WordPress 为您的帖子和您的文章自动生成 CSS 类和 ID 非常有用 <body> 元素。 这意味着您以后可以使用这些类进行样式设置、定位特定的帖子类型、类别等。
打开你的 索引.php 文件。 寻找开口 <body> 标签。 收盘后，它将坐在自己的线上 </head> 标签。
编辑它，使它看起来像这样：
这使用 body_class() 模板标签，它将检测您的网站访问者在任何给定时间都在哪种页面上，并基于此生成 CSS 类。
如果您刷新页面并检查代码，您会发现 WordPress 自动为您添加了一些 CSS 类：
这些将根据您在站点中所在的页面以及所显示的内容类型而有所不同。 您可以使用它来将 CSS 定位到某些内容类型，例如单个帖子、某些类别或您想要的任何内容。
编辑该行，使其如下所示：
这使用了两个模板标签：
the_ID() 标签获取帖子 ID 并使用它为帖子提供唯一 ID。post_class() 标签的工作方式与 body_class() 标记，将类列表添加到与文章类型相对应的文章元素。 请注意，现在这将无法正常工作，因为您没有从数据库中获取帖子 - 但是当我们接下来添加循环时，它会。现在来看看有趣的。 现在，您的页面内容是硬编码的。您希望通过对数据库的调用来填充它，以便在您所在的任何页面上都显示正确的内容。
在你的 索引.php 文件，找到里面的代码 <article> 标签（您已经添加了 ID 并使用模板标签关闭的标签）。
编辑该代码，使其如下所示：
那里有很多代码——如果你想了解发生了什么，请查看我们解释循环的帖子。
现在，如果您刷新主页，您会看到一些非常不同的内容——您的帖子。 如果这是全新的 WordPress 安装，您将看到安装 WordPress 时添加的默认帖子：
我们系列的第一部分的最后一步是在我们的代码中添加几个重要的钩子。 这些被放置在 head 部分和页脚，它们对于许多插件的工作至关重要。
在你的 head 部分，在结束前添加 </head> 标签：
现在向下移动到 index.php 文件的末尾。 收盘前 </body> 标记，添加 wp_footer() 钩：
这为您网站中每个页面的顶部和底部添加了一个特殊的钩子 - 这些对于您的主题和您的网站正常工作至关重要，所以不要跳过它们。
现在保存您的文件。
您现在有了 WordPress 主题的开始。 然而，仍有工作要做。 在本系列的下一部分中，我将引导您完成将主题拆分为多个模板文件的过程。 您将为页眉、侧边栏和页脚创建单独的文件，为循环创建一个包含文件，并为每个页面和档案创建一个单独的文件。
标签：Demand feedback