如何开发自己的 WordPress 主题(新手指南)

草蛋 2023-01-24 20:27:57 1

如何开发自己的 WordPress 主题(新手指南)

如果你想以某种方式完成某件事——好吧,你可能只需要自己做。当然,虽然有很多很棒的WordPress 主题可用,但对于某些人来说,找到一个满足您特定要求的主题可能会很困难。为了解决这个问题,您可能想创建自己的自定义 WordPress 主题。

幸运的是,为 WordPress 创建自定义主题是一个相对简单的过程。令人惊讶的是,它不需要大量的技术知识或网络开发经验。另外,构建您自己的主题非常值得,因为您可以让您的网站看起来完全符合您的要求。

WordPress主题开发简介

您希望您的网站看起来很棒并拥有您需要的所有功能,因此您查看WordPress 主题目录:

WordPress主题目录

不幸的是,您看到的任何东西都不能满足您的要求,并且您不想在您的愿景上妥协。也许您想要一些独特的东西来让您的网站脱颖而出,但又不想把钱花在高级主题上。

此时,您可以考虑创建自己的主题。幸运的是,为 WordPress 开发主题并不像您想象的那么复杂。由于该平台的用户友好界面和众多可用工具,几乎任何人都可以创建自定义主题。

我们将带您完成创建第一个主题的过程。要开始,您需要两件事:

  • 您自己的WordPress 网站
  • 优质的托管计划

您还将受益于本地暂存环境的经验,因为您将使用一个来创建您的主题。对CSS和PHP有一定的了解也会有所帮助(如果不是必需的话)。

最后,还有一个您需要的重要工具,它将使该过程变得更加容易:入门主题。

什么是入门主题(以及为什么要使用一个)

入门主题是一个基本的 WordPress 主题,您可以以此为基础创建自己的主题。这使您能够构建一个可靠的框架,而不必担心从头开始编写主题的复杂性。它还将通过向您展示主题的基本结构及其所有部分如何协同工作来帮助您了解 WordPress 的工作原理。

那里有很多优秀的入门主题,包括Underscores、UnderStrap和Bones(仅举几例)。

我们将在教程中使用下划线。对于初学者来说,这是一个不错的选择,因为它只包含基础知识。此外,这个入门主题是由 Automattic(WordPress.com 背后的团队)开发的,这意味着从长远来看,它更有可能是安全、兼容和得到良好支持的。

如何开发您的第一个 WordPress 主题(5 个步骤)

准备工作完成后,您终于可以开始创建您的第一个主题了。正如我们之前提到的,我们将在本演练中使用入门主题。

但是,如果您想尝试在没有模板的情况下自己创建所有内容,那么您可以随意这样做。请记住,这种方法需要更多的编码能力。

第 1 步:设置本地环境

您需要做的第一件事是创建本地开发环境。这实际上是您安装在计算机上的服务器,您可以使用它来开发和管理本地 WordPress 站点。本地站点是开发主题的安全方式,不会以任何方式影响您的实时站点。

您可以通过多种方式创建本地环境,但我们将使用Local。这是免费安装 WordPress 本地版本的快速简便方法,并且与 Mac 和 Windows 兼容:

本地 WordPress 开发工具

首先,选择 Local 的免费版本,选择您的平台,添加您的详细信息,然后下载安装程序。安装完成后,您可以在计算机上打开该程序。

在这里,系统会要求您配置新的本地环境:

WordPress 初始设置屏幕

这是一个简单的过程,您将在几分钟内准备好本地 WordPress 站点。设置完成后,您的新站点的外观和工作方式将与实时 WordPress 网站完全一样。

第 2 步:下载并安装您的入门主题

与大多数入门主题一样,Underscores非常容易上手。事实上,您需要做的就是访问该网站并为您的主题命名:

下划线自定义WordPress主题开发

如果需要,您可以单击“高级选项”以进一步自定义基本主题:

下划线自定义WordPress主题开发

在这里你可以填写更多的信息,比如作者的名字,并给主题一个描述:

下划线自定义WordPress主题开发

还有_sassify!选项,这会将 Syntactically Awesome StyleSheets (SASS) 文件添加到您的主题中。SASS 是一种 CSS 预处理语言,它使您能够使用变量、嵌套、数学运算符等。

做出选择后,您可以单击Generate,这将下载包含您的入门主题的.zip文件。这是您将围绕其开发自己的主题的核心文件,因此您需要将其安装在您的本地站点上。

安装主题后,您可以预览站点以查看其外观。现在这是非常基本的,但不会长期如此!

第 3 步:了解 WordPress 主题的不同组件

在自定义主题之前,您需要了解其组件的用途以及它们如何组合在一起。

首先,让我们讨论模板文件,它们是 WordPress 主题的主要构建块。这些文件决定了您网站内容的布局和外观。

例如,header.php用于创建标题,而comments.php使您能够显示评论。

WordPress 通过遍历模板层次结构来确定在每个页面上使用哪些模板文件。这是每次加载您网站上的页面时 WordPress 查找匹配模板文件的顺序。

例如,如果您访问 URL http://example.com/post/this-post,WordPress 将按此顺序查找以下模板文件:

  1. 与 slug 匹配的文件,例如this-post
  2. 与帖子 ID 匹配的文件
  3. 通用的单个帖子文件,例如single.php
  4. 存档文件,例如archive.php
  5. index.php文件_

由于所有主题都需要index.php文件,如果找不到其他文件,它是默认选项。Underscores 包含最常见的模板文件,它们开箱即用。但是,如果您想了解它们如何协同工作,您可以尝试编辑它们。

您需要掌握的另一个重要元素是The Loop。WordPress 使用此代码来显示内容,因此在许多方面,它是您网站的核心。它出现在所有显示帖子内容的模板文件中,例如index.php或sidebar.php。

循环是一个复杂的主题,如果您想了解 WordPress 如何显示帖子内容,我们建议您阅读更多内容。幸运的是,多亏了 Underscores,Loop 已经集成到您的主题中,因此现在无需担心。

第 4 步:配置您的主题

人们很容易认为主题纯粹是为了装饰目的,但实际上它们对您网站的功能有着巨大的影响。让我们看看如何进行一些基本的自定义。

使用“挂钩”添加功能

挂钩是插入到模板文件中的代码片段,它使您能够在站点的不同区域运行 PHP 操作、插入样式并显示其他信息。大多数挂钩直接在 WordPress 核心软件中实现,但有些挂钩对主题开发人员也很有用。

让我们来看看一些最常见的钩子以及它们的用途:

  • wp_head() — 添加到header.php中的 <head> 元素。它启用在站点加载后立即运行的样式、脚本和其他信息。
  • wp_footer() — 添加到footer.php的 </body> 标签之前。这通常用于插入 Google Analytics 代码。
  • wp_meta() — 这通常出现在sidebar.php中以包含其他脚本(例如标签云)。
  • comment_form() — 直接添加到comments.php文件的结束 </div> 标记之前以显示评论数据。

这些钩子已经包含在您的 Underscores 主题中。但是,我们仍然建议访问Hooks 数据库以查看所有可用的 hooks 并了解更多信息。

使用 CSS 添加样式

级联样式表 (CSS)定义您网站上所有内容的外观。在 WordPress 中,这是使用style.css文件完成的。您已经将此文件包含在您的主题中,但目前,它仅包含基本的默认样式:

编辑新自定义 WordPress 主题的 CSS 样式表

如果您想快速了解 CSS 的工作原理,可以在此处编辑任何样式并保存文件以查看效果。例如,您可以找到以下代码(通常在第 485 行):

a {
color: royalblue;
}

此代码控制未访问的超链接的颜色,默认情况下显示为宝蓝色:

WordPress自定义主题测试站点

让我们看看如果我们尝试通过将其替换为以下代码来更改它会发生什么:

a {
color: red;
}

保存文件并检查您的本地站点。如您所料,所有未访问的链接现在都将显示为鲜红色:

测试自定义 WordPress 主题的示例页面

您可能会注意到顶部的已访问链接没有改变颜色。那是因为它实际上由样式表中的下一部分管理:

a:visited {
color: purple;
}

这是一个非常基本的示例,说明编辑style.css将如何影响您网站的外观。CSS 是一个庞大的主题,如果您想了解有关创建网页设计的更多信息,我们建议您进一步探索。有很多关于初学者主题的资源。

第 5 步:导出主题并将其上传到您的站点

修改完主题后,就该确保它正常工作了。为此,您可以使用主题单元测试数据。

这是一组可以上传到您网站的虚拟数据。它包含许多不同的样式和内容变体,它将使您能够了解您的主题如何应对不可预测的数据。

当您彻底测试您的主题并确信它符合要求的标准时,现在剩下的就是导出它。

首先,您需要在本地计算机上找到网站的位置。您可能会在默认文档目录中名为Websites的文件夹中找到它。

打开网站的文件夹并访问/wp-content/themes/,您将在其中找到您的主题:

FTP 客户端中的 WordPress wp-content 主题文件夹

您现在可以使用压缩工具(例如WinRAR )基于该文件夹创建一个.zip文件。只需右键单击该文件夹并选择使您能够对其进行压缩的选项,例如压缩“文件夹”:

压缩自定义 WordPress 主题以准备上传

当文件夹被压缩后,它就可以上传并安装在任何 WordPress 站点上,就像您在开始时安装 Underscores 主题一样。如果您对结果特别满意,您甚至可以将您的主题提交到WordPress 主题目录!

创建自定义 WordPress 主题

从头开始创建自定义 WordPress 主题绝非易事。但是,这个过程可能并不像您想象的那么困难。

回顾一下,以下是通过五个简单步骤开发 WordPress 主题的方法:

  1. 使用Local设置本地环境。
  2. 下载并安装入门主题,例如Underscores。
  3. 了解 WordPress 主题的不同组件。
  4. 配置您的主题。
  5. 导出主题并将其上传到您的站点。

通过遵循Codex 文档站点中的指南,您可以开发符合质量标准的主题。您甚至可以考虑将其提交到 WordPress 主题目录!

你可能喜欢的内容:

主题