创建您自己的 WordPress 主题

已发表: 2021-12-21

在之前的文章中，我们研究了如何自定义 WordPress 网站、创建自己的子主题或模板。

今天，我们将看看如何构建自己的 WordPress 主题。我们走吧！

为什么要建立自己的 WordPress 主题？

WordPress 提供了多种方式来自定义您的网站。那么，为什么您会觉得有必要创建自己的主题？在某些情况下，现成的主题可能不适合您的品牌设计或具有您需要的功能。自定义主题可以解决此问题，并为您提供所需的站点样式以及所需的所有功能，而无需依赖第三方主题。

创建主题之前的要求

为了能够在下面的示例中复制以下步骤，我们需要在本地或您管理的服务器空间上进行 WordPress 安装设置并准备就绪。不要在实时站点上尝试此操作。而是创建一个测试环境。

还需要具备 CSS、PHP 和 HTML 的工作知识和理解。

创建主题

我们将主题命名为“我的第一个主题”。第一步是为在管理区域中可见的主题创建必要的文件。为此，我们将创建一个 style.css 和 index.php 文件。

我们为我们的主题创建一个子文件夹，在我们命名为“my-first-theme”的 wp-content/themes/ 文件夹下，并将这两个文件添加到该文件夹中。

此时，主题应该在管理区域中作为选项可见。

如果其中任何一个文件丢失，您将收到一条消息，警告主题已损坏。例如，如果 index.php 丢失，您将看到如下内容：

在 style.css 文件中，我们将添加一些注释，告诉 WordPress 我们的主题。最重要的信息是将其列在下面的名称。除此之外，您可以说出作者是谁或提供作者 URI，以便用户可以访问网站以了解有关您的主题的更多信息。给出要在管理主题模式弹出窗口中显示的描述和安装版本。

 /* Theme Name: My First Theme Author: Dev Loper Author URI: https://my-first-theme.com Description: This is my theme's description Version: 1.0 */

注意：您也可以定义您的许可证。如果您希望您的主题在 WordPress 上发布，您的主题必须与 GPL 兼容。

如果您需要显示徽标图像，请在 style.css 和 index.php 文件所在的同一空间中插入 screenshot.png 文件。

现在，如果您在主题的管理屏幕中激活您的主题，您应该会看到如下内容：

如果您单击“主题详细信息”，您应该会看到：

主题文件

现在是时候在 index.php 文件中编写一些代码了。作为测试，使用您喜欢的编辑器打开文件并插入任何类型的 HTML 元素，例如

<h1>My First Theme's Content</h1>

保存文件并访问前端。您应该只看到标题“我的第一个主题的内容”

此时，您必须决定您的主题将采用何种布局。

主题布局

从这里出发的路线是无限的。我们强烈建议您花时间研究 WordPress 主题的工作原理。更重要的是，在继续构建自己的主题之前，请确保您完全了解模板层次结构。

简而言之，WordPress 所做的就是提供一种根据内容类型调用不同 php 文件的方法。这是通过查询完成的。查询检查当前查看的页面是否有帖子或者是搜索结果页面或任何其他类型的内容，并输出相应的代码。

一个经典的例子是通过为每个文件创建单独的文件来分隔页眉和页脚。要查看如何自己执行此操作的非常简化的示例，请将这段代码插入 index.php 文件中。

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

此代码使用 wp_head() 和 wp_footer() 构建的 WordPress 函数，提供默认内容布局，其中包括带有徽标、标题和菜单的标题、查询将显示正确内容的主体和包含站点信息的页脚。

如果我们想拆分此代码并使用单独的 header.php 和 footer.php 文件，那么您应该在主题文件夹下创建文件。

并像这样拆分代码：

索引.php

 <?php get_header(); ?> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <?php get_footer();

头文件.php

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header>

页脚.php

 <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

就是这样！您已经创建了您的第一个主题！

入门主题

我们在上面查看了如何手动创建主题......应该创建哪些文件以及您可以包含哪些代码。如果您已经熟悉这一点，则可以通过在几秒钟内下载 WordPress 入门主题来节省一些时间。例如尝试下划线，您可以在其中提供名称并立即下载主题 zip 文件。

太棒了，对吧？

结论

当您作为开发人员需要更大的灵活性时，自定义 WordPress 主题是一个很好的解决方案。创建主题似乎是一个令人生畏的过程。希望正如本文所表明的那样，它实际上很容易做到。关键是在开始编码之前不要着急。退后一步，研究满足您要求的主题结构，然后继续努力。