WordPress 主题在塑造网站的外观和功能方面起着至关重要的作用。它们定义了内容的显示方式，并提供各种设计选项来创建独特的网站。多年来，WordPress 主题有了长足的发展，从我们现在所说的经典主题开始。
经典主题在很长一段时间内都是标准主题，依赖于 PHP 模板，需要一定的编码知识才能进行定制。这些主题提供了极大的灵活性，但对于那些网络开发新手来说可能具有挑战性。后来，WordPress 5.9 的发布标志着一个重大转变，即引入了区块主题。
WordPress 经典主题与区块主题
经典主题是 WordPress 主题的传统类型。它们通过使用 PHP 编写的模板文件、CSS 来设计风格，并使用 JavaScript 来增加功能，从而定义网站的整体外观和感觉。这些高度可定制的主题多年来一直是 WordPress 网站的支柱。
另一方面，区块主题是一种较新的 WordPress 主题类型，用于支持全站编辑（FSE）功能。与传统主题不同，它们使用区块来构建网站的所有部分，包括页眉、页脚和内容区域。这使得在 WordPress 编辑器中直接设计和定制网站的方式更加直观。
经典主题和区块主题的主要区别在于
- 自定义– 经典主题需要 PHP 和一定的编码技能，而块状主题使用可视化编辑器，更易于自定义。
- 灵活性– 经典主题为开发人员提供了更多灵活性，而区块主题则注重易用性和可访问性。
- 编辑– 经典主题可通过主题文件和 WordPress 定制器进行编辑。块主题则可以完全通过区块编辑器进行编辑。
选择开发哪种类型的主题
在经典主题和区块主题之间做出选择取决于你的需求和技术水平。如果你是一名开发人员，希望获得最大的灵活性，那么经典主题可能是你的首选。但是，如果您更喜欢用户友好和可视化的建站方式，区块主题则是一个不错的选择。
这两类主题各有所长，适合不同类型的用户和项目。了解这两种主题的核心区别有助于您做出明智的决定，选择最适合您网站需求的主题。
本文旨在帮助你理解并掌握经典主题和区块主题的核心概念，让你能够有效地创建和定制 WordPress 主题。
了解主题结构
无论是经典主题还是区块主题，了解它们的结构都是有效定制 WordPress 网站的关键。
在探索每个主题的结构之前，你应该知道所有 WordPress 主题都存储在 WordPress 安装的wp-content/themes目录中，每个主题都有自己的文件夹。
经典主题结构
经典主题由几个关键文件和目录组成，用于创建网站的外观和功能。其中两个主要文件是
style.css– 这是定义主题视觉样式的主要样式表。它的顶部包含主题的元数据（如名称、作者和版本），后面是主题样式的 CSS 规则。index.php– 这是用于在主页上显示内容的主要模板文件。它是其他模板文件可能丢失时的备用文件。
除此以外，还有其他几个重要文件可以实现模块化设计，确保网站的不同部分可以轻松定制和维护。虽然这些文件是可选的，但它们被视为标准文件：
header.php– 该文件包含主题的标题部分，包括网站标题、徽标和导航菜单。它位于每个页面的顶部，确保页面标题的一致性。footer.php– 该文件包含主题的页脚部分，通常包括版权信息和页脚导航。它位于每个页面的底部，为整个网站提供一致的页脚。functions.php– 该文件用于为主题添加自定义功能。它可以注册菜单、调用样式和脚本，并添加主题支持功能，如帖子缩略图和自定义背景。从本质上讲，它是主题自定义和增强功能的控制中心。page.php、single.php、archive.php等 – 这些模板文件定义了不同类型内容的结构，如页面、单篇文章和存档。
注：您可以参考这篇详细的文章，逐步了解如何创建经典 WordPress 主题。
区块主题结构
区块主题由几个关键文件和目录组成，这些文件和目录专门用于区块和 FSE 功能。主要文件和文件夹有
theme.json– 该文件对于配置主题的设置、样式和自定义功能至关重要。它为区块定义了全局样式和设置，提供了一种集中管理主题外观和行为的方式。它取代了大量的自定义 PHP 代码，可以轻松配置颜色、排版、间距等。style.css– 虽然大部分样式都在theme.json中处理，但与经典主题类似，style.css仍用于声明主题的元数据，如主题名称、作者、版本和描述。templates/– 该目录包含定义网站不同部分布局的 HTML 文件。这些文件包括主页的 index.html、单篇文章的single.html、页面的page.html等模板。每个文件都使用块构建。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 创建页面模板。具体操作如下
- 创建模板文件– 使用文本编辑器在主题目录下创建一个新的 PHP 文件，并将其命名为
page.php。 - 添加模板代码– 编写必要的 PHP 代码，以定义页面模板的结构和内容。这通常包括 WordPress 模板标签，用于显示页面内容。
- 包含页眉和页脚 – 通过添加
get_header()和get_footer()函数，确保模板包含页眉和页脚。这将使页面布局与网站其他部分保持一致。
以下是 page.php 的示例：
<?php get_header(); ?> <main> <h1><?php the_title(); ?></h1> <div><?php the_content(); ?></div> </main> <?php get_footer(); ?>
在本例中，模板包括页眉，显示页面标题和内容，然后包括页脚。
注：确保已声明 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 也可以使用<style>标签嵌入到单个模板文件中，不过这种做法一般不太常见，只推荐用于特定的、孤立的样式。
对于更高级的样式，你可以使用 CSS 预处理器，如 SASS 或 LESS。通过这些工具，你可以编写更易于维护和模块化的 CSS，从而更轻松地管理和扩展主题样式。
样式化区块主题
区块主题样式主要通过 theme.json 文件和块编辑器来管理。
theme.json 文件是为主题配置全局样式和设置的中心位置。该文件允许你以结构化的 JSON 格式定义颜色、排版、间距和其他样式，提供了一种集中管理主题外观和行为的方法。在 theme.json 中定义的全局样式适用于整个网站，确保外观和感觉的一致性。
除了 theme.json，您还可以使用区块编辑器将自定义样式直接应用到区块中。区块编辑器可以让你实时看到变化，并直观地调整设计，而无需手动编写代码。这让整个过程更容易操作，尤其是对于那些喜欢可视化界面而非编码的人来说。
虽然 theme.json 文件可以处理大部分样式，但你仍然可以使用 CSS 进行更精细的控制。自定义 CSS 可以添加到 style.css 文件中，也可以使用区块编辑器直接添加到各个区块中。
theme.json 文件的一个示例可能包括调色板、排版和区块样式的设置，这样就可以轻松管理和自定义主题的设计。
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#0073aa"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#005177"
}
]
},
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "12px"
},
{
"name": "Normal",
"slug": "normal",
"size": "16px"
}
]
}
},
"styles": {
"color": {
"background": "#ffffff",
"text": "#333333"
},
"typography": {
"fontFamily": "Arial, sans-serif"
}
}
}
注：您可以查看专业定制 WordPress 区块主题指南中进一步了解 theme.json 的强大功能。
自定义主题
自定义 WordPress 主题可让您定制网站的外观和功能，以满足特定需求和偏好。经典主题和区块主题都提供了各种自定义方法，但它们的方法各不相同。
自定义经典主题
经典主题提供了几种自定义网站外观和感觉的方法：
- 主题定制器 – WordPress 主题定制器是一个易于使用的界面，让您可以在不接触任何代码的情况下更改主题的外观。您可以通过外观>自定义访问它。它提供修改网站标识、颜色、菜单、小工具等选项。在保存之前，可以实时预览更改。
- 自定义 CSS – 要进行更具体的样式修改，可以直接在主题定制器的额外的 CSS 部分添加自定义 CSS。这种方法非常适合在不编辑主题文件的情况下进行细微调整。
- 子主题 – 如果需要进行大量修改，建议使用创建子主题的方法。子主题继承了父主题的功能，允许你覆盖或添加新的样式和功能。这样可以确保在更新父主题时保留你的自定义设置。
- 主题文件 – 高级用户可以直接编辑主题文件，如
header.php、footer.php和functions.php，以进行更重要的更改。不过，这种方法需要对 PHP 和 WordPress 模板层次结构有很好的了解。 - 插件 – 有许多插件可以扩展主题的自定义功能。例如，页面生成器插件（如 Elementor）可让您无需编码即可创建复杂的布局。
自定义区块主题
由于强调 FSE，块状主题提供了一种更直观和用户友好的自定义方法：
- 网站编辑器 – WordPress 网站编辑器（外观>编辑器）是自定义块状主题的主要工具。它允许你使用可视化界面修改网站的各个方面，包括页眉、页脚、模板和单个区块。更改会立即应用，因此可以轻松查看调整对网站设计的影响。
- 全局样式 – 区块主题使用
theme.json文件定义全局样式。你可以在全局范围内自定义颜色、排版、间距等，确保网站的一致性。网站编辑器还可以让你直观地调整这些设置。 - 可重复使用的区块和样板 – 您可以创建可重复使用的区块和模式，以保持一致性并简化设计流程。可重复使用的区块可以保存并插入到任何文章或页面中，而区块样板则提供了预定义的布局，可以根据需要进行定制。
- 自定义模板 – 有了区块主题，你可以直接在网站编辑器中为不同类型的内容创建自定义模板。这样，您无需编写任何代码，就能定制特定页面或文章类型的布局和设计。
- 插件 – 与经典主题一样，块主题也可以使用插件进行扩展。许多插件旨在增强区块编辑器的功能，提供额外的区块、模式和自定义选项。
小结
定制 WordPress 主题可以让您的网站独一无二、功能强大。经典主题依靠主题定制器、自定义 CSS、子主题和直接文件编辑来实现灵活性。区块主题则使用站点编辑器和theme.json，以获得更直观的视觉效果。
这两种方法都提供了强大的工具，无论你喜欢编码还是可视化定制，都可以根据自己的需要定制网站。
评论留言