分类： 经典主题

欢迎来到本课程，我们将探讨如何将经典主题转换为混合主题或完整的区块主题。

转换经典主题

开始将经典主题转换为区块主题需要什么？

如果你选择不添加 theme.json（你将在上一课中学到），你需要查看使用 functions.php 文件添加主题支持的各种选项。

在 WordPress 仪表盘中快速说明一下，最终用户在外观设置中无法访问站点编辑器时，就会知道他们正在使用的是经典主题还是混合主题。

混合主题与区块主题

现在让我们看看混合主题和区块主题之间的区别。

首先来看一个经典主题。

这里的经典主题是 Twenty Twenty，如果我们打开一个示例页面，可以看到最终用户可以在排版设置下使用多个区块设置。

他们还可以通过选择自定义颜色或主题提供的颜色之一来更改文本和背景的颜色。

通过点击“插入器”，最终用户可以选择区块、模板和媒体。

在模板下，他们可以访问主题自带的模板。

同样在小工具中，最终用户可以使用区块来构建他们的小工具。

混合主题本质上仍然是经典主题，但主题作者选择为区块模板部分等功能添加主题支持。

转换经典主题的步骤

现在让我们看看将经典主题转换为区块主题的步骤。

第一步是查看设置和样式。

你可以通过简单地在主题中添加 theme.json 来弥合经典主题和区块主题之间的差距。

你可以在本模块的上一课中了解更多相关信息。或者你也可以选择在 functions.php 中为区块添加主题支持。

下一步是查看编辑体验。

WordPress 核心为最终用户提供了许多选项，但这可能会让人不知所措。

我们刚刚看到，即使在模板下，也会向最终用户提供模板目录中可用的模板选项。你可以选择移除这些，只包含你希望最终用户为你的主题使用的模板。

这里的目标是开始减少样式表中的 CSS 数量，转而使用 theme.json。

这里有一篇很棒的博客文章可以启发你。它提供了 15 种方法来策划 WordPress 编辑体验。这篇文章可在 WordPress 开发者博客上找到，它首先介绍了如何使用 theme.json 来实现。但还有很多方法可以通过 JavaScript 或 PHP 来实现。

下一步是开始使用区块编辑器（现在简称为编辑器）来构建你的页面。你还没有访问站点编辑器的权限，因此无法使用站点编辑器开发 HTML 模板，但你可以使用编辑器构建页面。

最后一步是将站点编辑器添加到你的主题中，并开始使用站点编辑器构建所有模板，这基本上意味着你将不再使用 PHP 模板，而是用 HTML 模板替换它们。

你不需要将经典主题转换为区块主题。你可以在混合主题阶段停下来，并根据预算做出决定。

如果你有兴趣将经典主题转换为混合主题，你可能希望首先在 functions.php 中添加对区块模板部分的支持。

请查看 Learn WordPress 上提供的相关教程，了解如何操作。

欢迎来到本课程，我们将探索如何使用自定义 API 为经典主题添加选项。

什么是自定义器？

这里我们查看的是 Twenty Twenty-Four 主题。

当前激活的主题是什么？当我们将鼠标悬停在外观上时，我们看到可以访问站点编辑器。让我们进入主题，然后安装一个经典主题。

点击添加新主题，选择 Twenty Twenty-One 主题。安装并点击启用。

我们看到那里出现了几个新菜单。但是，我们不再看到编辑器选项，因为经典主题无法访问站点编辑器。

现在用户可以点击自定义来打开自定义器。在这里，用户可以进行全站范围的更改，例如更改颜色，并且还有一个深色模式选项。

这就是我们接下来要查看的内容。

使用自定义器

现在让我们看看自定义器在 Twenty Twenty-One 主题中是如何使用的。

当用户点击颜色和深色模式时，他们现在可以选择点击颜色选择器来更改背景颜色。

让我们查看代码，了解这是如何实现的。

如果我们打开 functions.php 文件，我们会看到刚才看到的默认颜色是使用 add_theme_support() 在这里指定的。这里还有编辑器调色板。这样用户就可以从调色板中选择颜色。

让我们再次查看前端，看看这在自定义器中是如何为用户整合的。

在这里，他们点击颜色选择器，然后看到那个调色板。请注意，他们也可以输入十六进制颜色代码，并且可以在这里滚动并选择他们喜欢的颜色。

注册主题选项

让我们看看如何使用自定义器注册主题选项。

这一切都始于 WP_Customize_Manager 类，它将帮助你创建自定义器中的那些控件。请注意下面更多信息下的注释，说明$wp_customize 对象如何作为此类的一个实例使用，并且这是你在主题中看到此类的主要用途。

<?php
// 示例代码：使用 $wp_customize 添加设置和控件
$wp_customize->add_setting( 'example_setting', array(
    'default' => '#000000',
    'sanitize_callback' => 'sanitize_hex_color',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'example_control', array(
    'label'    => __( '示例颜色', 'textdomain' ),
    'section'  => 'colors',
    'settings' => 'example_setting',
) ) );
?>

这里我们查看的是 Twenty Twenty-One 主题中调用 WP_Customize_Manager 来创建该对象$wp_customize 的类。如果我们向下滚动一点，我们可以看到这个类是如何编写的，以便与我们刚才在 functions.php 文件中看到的内容联系起来。

我们定义了背景颜色，这里有控件注册，并且使用 get_theme_support() 调用调色板，最后我们使用一个数组来构建调色板。

然后，所有内容在底部整合，添加了背景颜色的控件，这覆盖了 WordPress 自带的默认背景颜色控件。

有关更多详细信息，强烈建议开发者研究核心自定义器代码。这是所有包含“customize”一词的核心文件，你可以在 WordPress 安装文件夹 ‘wp-includes/customize’ 中找到它们。

后续步骤

你可以参考 WordPress.org 上提供的主题手册，了解更多关于使用自定义 API 添加主题选项的信息。

欢迎来到本课程，我们将深入探讨 WordPress 用于在页面上输出文章的机制。

循环如何在主题中使用？

这一切都源于使用主题的模板文件在页面中显示文章的需求。

例如，这里我们查看的是一个作品集主题的存档页面模板文件。循环从 WordPress 数据库中提取每篇文章的数据，并将相应的信息插入到每个模板标签的位置，例如文章的标题和摘要。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_excerpt(); ?>
<?php endwhile; endif; ?>

循环中的任何 HTML 或 PHP 代码都会为每篇文章进行处理。简单来说，循环名副其实。它逐一循环遍历为当前页面检索到的每篇文章，并执行主题中指定的操作。

循环可以显示什么？

现在让我们来看一些循环可以显示的示例。

这里我们查看的是 Twenty Seventeen 主题的演示站点，这是一个经典主题，他们使用循环来显示博客文章。这是一个博客首页，对于每篇文章，我们可以看到元数据、文章标题、特色图像和摘要。

使用循环的其他示例包括在单篇文章中列出评论，以及从自定义文章类型和自定义字段中提取数据，这是我们接下来要探讨的内容。

自定义文章类型和自定义字段

在下一个示例中，我们将查看一个具有自定义文章类型 portfolio 的作品集主题，我们将使用循环来显示作品集文章，并包含一个自定义字段。

那么，让我们开始吧。

这里我们查看的是作品集文章。每篇文章都有一个文章标题、一个项目简介和一个特色图像。

让我们在 WordPress 仪表盘中查看其中一篇文章。

在这篇文章中，右侧我们看到技能和工具的分类，底部我们看到项目简介自定义字段。

现在让我们看看这是如何实现的。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php if ( has_excerpt() ) : ?>
        <?php the_excerpt(); ?>
    <?php endif; ?>
    <?php if ( get_post_meta( $post->ID, 'catmom_textarea', true ) ) : ?>
        <p><?php echo get_post_meta( $post->ID, 'catmom_textarea', true ); ?></p>
    <?php endif; ?>
    <?php the_post_thumbnail(); ?>
<?php endwhile; endif; ?>

因此，我们通过验证是否存在任何作品集文章来启动循环，如果存在，那么首先显示的是标题，并且使用 the_permalink() 模板标签使 the_title() 可点击，因此它是一个链接。

接下来是一个 if 语句，它验证我们是否有摘要。模板标签 the_excerpt() 用于显示摘要。

接下来是自定义字段，名为 catmom_textarea。我们稍后会看看这是如何实现的，但这里的这个 if 语句验证项目信息是否存在。如果该字段中有数据，它将在此处显示。

最后在底部，我们看到使用 the_post_thumbnail() 模板标签来显示文章的特色图像。

创建了一个插件来创建自定义字段，它实际上被称为元框。这个元框就是项目简介，你可以看到使用 ID，我们得到了 catmom_textarea 字段，我们在刚才查看的 PHP 代码中引用了它。

后续步骤

要了解更多关于循环的信息，请参考 WordPress.org 上提供的主题手册。

欢迎来到本课，我们将深入探讨经典主题是如何构建的。

经典主题与区块主题

经典主题和区块主题有什么区别？

如果你还没有看过，请务必查看《面向开发者的主题简介》课程，你可以在《WordPress 开发者入门学习路径》中找到它。

早在 2018 年 12 月，WordPress 5.0 发布了 Gutenberg，那时我们首次看到了文章区块编辑的概念。现在，快进到 2023 年 8 月，WordPress 6.3 真正起飞，感兴趣的用户开始看到全站编辑的强大功能。

这里我们正在查看当前的默认主题 Twenty Twenty-Four，如果快速浏览一下，我们会发现我们可以管理和创建新模板。我们可以创建模板并管理模板部件。

这一切都得益于全站编辑。

如果我们比较传统的经典主题和区块主题，主要区别在于三个主要类别：文件结构、通过设置进行的最终用户自定义以及样式。

经典主题和区块主题之间的一个显著区别是最终用户如何对其网站进行全站更改。用户界面发生了巨大变化。

这里我们以经典主题 Twenty Twenty-One 为例，左侧是自定义器，用户可以修改颜色，另一个非常经典主题的部分是添加小工具的能力。

有一个术语叫做混合主题。

经典主题本质上是一个正在向完整区块主题过渡的经典主题。因此，经典主题不必是区块主题，也能利用 theme.json 文件提供的某些灵活性。

因此，经典主题有能力为区块编辑器和区块内容提供配置和样式选项，这是通过主题支持来实现的，你可以将这些包含在 functions.php 文件中，或者考虑添加 theme.json。

经典主题文件

现在让我们更仔细地看看经典主题中常见的文件。

这里我们有经典主题 Twenty Twenty-One，你可以看到有 CSS 文件、图片、JavaScript 文件、更多 CSS 文件。这些都在 assets 文件夹中，然后我们有 PHP 函数和 PHP 模板。

组织主题文件

现在让我们看看如何组织你的主题文件。

实际上，在经典主题中，文件结构的组织方式相当灵活。这里我们有一个 Twenty Seventeen 主题组织方式的例子，它和我们刚才看到的 Twenty Twenty-One 主题有一些相似之处。

所以基本上，我们有用 PHP 编写的模板，然后有 CSS 和 JavaScript 文件。

下一步

要了解更多关于经典主题的信息，你可以参考 WordPress.org 上的开发者主题手册，你会在经典主题和主题基础模块中找到许多章节，以便更好地理解经典主题的结构和开发方式。