当前位置：小鱼网 > 了解WordPress主题开发的核心概念

了解WordPress主题开发的核心概念

作者 : King 本文共6003个字，预计阅读时间需要16分钟 发布时间： 2025-05-11 共20人阅读

了解WordPress主题开发的核心概念

WordPress 主题在塑造网站的外观和功能方面起着至关重要的作用。它们定义了内容的显示方式，并分享各种设计选项来创建独特的网站。多年来，WordPress 主题有了长足的发展，从我们现在所说的经典主题开始。

经典主题在很长一段时间内都是标准主题，依赖于 PHP 模板，需要一定的编码知识才能进行定制。这些主题分享了极大的灵活性，但对于那些网络开发新手来说可能具有挑战性。后来，WordPress 5.9 的发布标志着一个重大转变，即引入了区块主题。

WordPress 经典主题与区块主题

经典主题是 WordPress 主题的传统类型。它们通过使用 PHP 编写的模板文件、CSS 来设计风格，并使用 JavaScript 来增加功能，从而定义网站的整体外观和感觉。这些高度可定制的主题多年来一直是 WordPress 网站的支柱。

另一方面，区块主题是一种较新的 WordPress 主题类型，知识兔用于支持全站编辑（FSE）功能。与传统主题不同，它们使用区块来构建网站的所有部分，包括页眉、页脚和内容区域。这使得在 WordPress 编辑器中直接设计和定制网站的方式更加直观。

经典主题和区块主题的主要区别在于

  1. 自定义– 经典主题需要 PHP 和一定的编码技能，而块状主题使用可视化编辑器，更易于自定义。
  2. 灵活性– 经典主题为开发人员分享了更多灵活性，而区块主题则注重易用性和可访问性。
  3. 编辑– 经典主题可通过主题文件和 WordPress 定制器进行编辑。块主题则可以完全通过区块编辑器进行编辑。

选择开发哪种类型的主题

在经典主题和区块主题之间做出选择取决于你的需求和技术水平。如果知识兔你是一名开发人员，希望获得最大的灵活性，那么经典主题可能是你的首选。但是，如果知识兔您更喜欢用户友好和可视化的建站方式，区块主题则是一个不错的选择。

这两类主题各有所长，适合不同类型的用户和项目。了解这两种主题的核心区别有助于您做出明智的决定，知识兔选择最适合您网站需求的主题。

本文旨在帮助你理解并掌握经典主题和区块主题的核心概念，知识兔让你能够有效地创建和定制 WordPress 主题。

了解主题结构

无论是经典主题还是区块主题，了解它们的结构都是有效定制 WordPress 网站的关键。

在探索每个主题的结构之前，你应该知道所有 WordPress 主题都存储在 WordPress 安装的wp-content/themes目录中，每个主题都有自己的文件夹。

经典主题结构

经典主题由几个关键文件和目录组成，知识兔用于创建网站的外观和功能。其中两个主要文件是

  1. style.css– 这是定义主题视觉样式的主要样式表。它的顶部包含主题的元数据（如名称、作者和版本），后面是主题样式的 CSS 规则。
  2. index.php– 这是用于在主页上显示内容的主要模板文件。它是其他模板文件可能丢失时的备用文件。

除此以外，还有其他几个重要文件可以实现模块化设计，确保网站的不同部分可以轻松定制和维护。虽然这些文件是可选的，但它们被视为标准文件：

  • header.php– 该文件包含主题的标题部分，包括网站标题、徽标和导航菜单。它位于每个页面的顶部，确保页面标题的一致性。
  • footer.php– 该文件包含主题的页脚部分，通常包括版权信息和页脚导航。它位于每个页面的底部，为整个网站分享一致的页脚。
  • functions.php– 该文件用于为主题添加自定义功能。它可以注册菜单、调用样式和脚本，并添加主题支持功能，如帖子缩略图和自定义背景。从本质上讲，它是主题自定义和增强功能的控制中心。
  • page.php、single.php、archive. php 等 – 这些模板文件定义了不同类型内容的结构，如页面、单篇文章和存档。

注：您可以参考这篇详细的文章，逐步了解如何创建经典 WordPress 主题。

区块主题结构

区块主题由几个关键文件和目录组成，这些文件和目录专门用于区块和 FSE 功能。主要文件和文件夹有

  1. theme.json– 该文件对于配置主题的设置、样式和自定义功能至关重要。它为区块定义了全局样式和设置，分享了一种集中管理主题外观和行为的方式。它取代了大量的自定义 PHP 代码，知识兔可以轻松配置颜色、排版、间距等。
  2. style.css– 虽然大部分样式都在theme.json 中处理，但与经典主题类似， style.css 仍用于声明主题的元数据，如主题名称、作者、版本和描述。
  3. templates/– 该目录包含定义网站不同部分布局的 HTML 文件。这些文件包括主页的 index.html、单篇文章的single.html、页面的page.html 等模板。每个文件都使用块构建。
  4. parts/– 该目录包含模板中可重复使用的部分，如页眉和页脚。这些部分可以包含在多个模板中，确保整个网站的一致性。

区块样板虽然不是必须的，但在开发高级主题时也很重要。模式是预定义的区块布局，知识兔可以插入到页面和帖子中，为创建复杂的设计分享了一种快速方法。

有了区块主题，你就可以决定不手动创建主题结构。您可以使用创建区块主题插件简化设置过程，该插件可分享所有必要的文件和细节。

创建区块主题插件

创建区块主题插件

填写完详细信息后，就会在wp-content/themes目录中创建一个新的主题文件夹，新主题会出现在 WordPress 管理后台的外观>主题下。您可以在 style.css 元描述设置中添加更多主题细节。

WordPress 主题的模板层次结构

模板层次结构决定了 WordPress 使用哪种模板文件来显示不同类型的内容。经典主题和块主题遵循类似的层次结构，但使用的文件类型不同：经典主题使用 PHP 文件，而区块主题使用 HTML 文件。

模板层次结构遵循特定的顺序来决定使用哪个模板文件。如果知识兔 WordPress 找不到特定的模板文件，它就会移动到层次结构中的下一个。

例如，当 WordPress 需要显示一篇博客文章时，它会首先查找文章类型的特定模板，如 single-{post-type}.php 或 single-{post-type}.html。如果知识兔该文件不存在，它会检查通用的 single.php 或 single.html。如果知识兔这两个文件都不存在，WordPress 将返回到最通用的模板 index.php 或 index.html。

同样的过程也适用于其他类型的内容。对于静态页面，WordPress 会首先检查分配给该页面的任何自定义模板。如果知识兔没有，WordPress 会根据页面的标题（如 page-about.php 或page-about.html）或 ID（page-42.php 或page-42.html ）寻找模板。如果知识兔没有这些特定模板，WordPress 就会使用一般的 page.php 或 page.html。如果知识兔连这个也没有，WordPress 就会使用 index.php 或 index.html。

创建模板

在 WordPress 中创建模板可以让您自定义网站上不同类型内容的显示方式。无论您使用的是经典主题还是区块主题，创建过程都包括设置必要的文件，并根据您的需要进行配置。

让我们为这两种主题设置一个页面模板。

经典主题页面模板

经典主题使用 PHP 创建页面模板。具体操作如下

  1. 创建模板文件– 使用文本编辑器在主题目录下创建一个新的 PHP 文件，并将其命名为page.php。
  2. 添加模板代码– 编写必要的 PHP 代码，以定义页面模板的结构和内容。这通常包括 WordPress 模板标签，知识兔用于显示页面内容。
  3. 包含页眉和页脚 – 通过添加 get_header() 和 get_footer() 函数，确保模板包含页眉和页脚。这将使页面布局与网站其他部分保持一致。

以下是 page.php 的示例：

在本例中，模板包括页眉，显示页面标题和内容，然后知识兔包括页脚。

注：确保已声明 header.php 和 footer.php 模板。在过往的指南中了解更多关于它们如何工作的信息。

区块主题页面模板

在块主题中，知识兔可以通过 WordPress 网站编辑器或在模板目录中创建 page.html 文件来创建页面模板。

创建该文件后，您可以通过导航到网站编辑器（WordPress 面板中的外观>编辑器）来设计布局。

使用区块编辑器添加和排列区块，设计页面布局。您可以为页面标题、特色图片和内容添加区块。根据您的设计偏好自定义每个区块。

使用区块编辑器自定义页面模板

使用区块编辑器自定义页面模板

对布局满意后，保存模板。WordPress 会在您的主题目录中自动生成相应的 HTML 文件。

设计主题风格

为 WordPress 主题设计风格是定义网站视觉外观的关键一步。经典主题和块主题都分享了强大的自定义样式方法，但它们的方法有所不同。

经典主题的样式

在经典主题中，样式通常使用 CSS 进行处理。下面介绍如何为经典主题设计样式：

经典主题的主要样式表是 style.css 文件。该文件包含定义主题外观的所有 CSS 规则。它也是你声明主题元数据的地方，例如主题名称、作者、版本和描述。

为确保正确加载 CSS，需要在 functions.php 文件中使用 wp_enqueue_style() 函数调用样式表。

function my_theme_enqueue_styles() {wp_enqueue_style('my-theme-style', get_stylesheet_uri());}add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

这一步对于保持 WordPress 的正确标准和确保正确应用样式至关重要。

此外，您还可以直接在style.css文件中添加自定义 CSS，或为主题的不同部分创建单独的 CSS 文件。自定义 CSS 也可以使用