作者： Next

欢迎来到本课程，我们将探索如何使用自定义 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 上的开发者主题手册，你会在经典主题和主题基础模块中找到许多章节，以便更好地理解经典主题的结构和开发方式。

欢迎来到本课程，我们将深入探讨如何扩展已注册的区块，并创建区块设置的替代版本。

什么是区块变体？

区块变体是一种替代区块，你可以使用区块变体 API 将其添加到主题中。你将使用创建变体时所依据区块的已有属性。

你不需要构建过程，因为你可以选择从 functions.php 中加载自定义的 JavaScript 文件，同时传递一些依赖项。

你可以选择将区块变体放置在插件中或主题文件中。

如果你还没有机会查看《WordPress 初学者开发者学习路径》，请务必查看关于《开发 WordPress 插件》的模块。

区块变体与区块样式的对比

区块变体和区块样式有什么区别？

区块变体和区块样式的主要区别在于，区块样式会向区块应用一个 CSS 类，以便以替代方式进行样式设置。

让我们以 Twenty Twenty-Four 主题为例来看一下。

它们有一个带星号的区块样式。你会看到 CSS 类是 style asterisks。

这可以应用于标题，但这不是段落区块可用的区块样式，仅适用于标题区块。

如果你点击插入器并向下滚动，你会看到区块变体的示例。这些是 WordPress 核心自带的，其中每个嵌入都是一个区块变体。

要查看完整代码，你可以在 GitHub 上查看。

如果你想了解更多关于区块变体和区块样式之间的区别，可以参考一个很棒的在线工作坊。

添加 JavaScript

现在，让我们将 JavaScript 文件添加到你的主题中。

你可以将 JavaScript 文件命名为 block-variations，并将其放置在 assets 下的 JS 子文件夹中。

注册区块变体

现在，让我们注册区块变体。

你可以使用 functions.php 文件，打开你的 PHP，使用 enqueue_block_editor_assets 动作钩子，并使用 wp_enqueue_script 函数。

你在这里看到，block-variations.js 文件被调用，并附带了一个依赖项数组。

<?php
function my_theme_enqueue_block_editor_assets() {
    wp_enqueue_script(
        'my-theme-block-variations',
        get_template_directory_uri() . '/assets/js/block-variations.js',
        array( 'wp-blocks', 'wp-dom-ready', 'wp-i18n' ),
        wp_get_theme()->get( 'Version' ),
        true
    );
}
add_action( 'enqueue_block_editor_assets', 'my_theme_enqueue_block_editor_assets' );
?>

后续步骤

你可以通过参考区块编辑器手册来了解更多关于变体的信息，或者查看主题手册。最后，WordPress.org 的 WordPress 开发者博客上有一篇很棒的博文。

欢迎来到本课程，我们将一起学习如何创建和使用区块样式变体。

什么是区块样式变体，以及如何将其包含在你的主题中？

这里有一个使用 Twenty Twenty-Four 主题的示例。

如果我们在这里选择 H2，可以看到 带星号 样式已被应用，其中包含一个额外的 CSS 类 .style-asterisk。

注册区块样式变体

现在让我们看看如何使用 PHP 注册区块样式。

如果我们查看 Twenty Twenty-Four 主题的 functions.php 文件并向下滚动，会看到 register block style 函数，这里正在通过一些样式修改核心区块标题的区块样式。

接下来，让我们看看如何使用 theme.json 自定义核心 WordPress 区块样式。

如果你查看 Twenty Twenty-Four 主题的 theme.json 文件，向下滚动到大约第 506 行，会看到添加了一个 variations 属性，以便提供圆角图片的选项。

我们可以进入站点编辑器查看实际效果。

点击一张图片，进入样式面板，可以看到“圆角”作为一个选项出现。

后续步骤

如果你想了解更多关于样式的知识，可以查阅区块编辑器手册，或者通过访问 WordPress.org 上的主题手册，随时了解区块样式变体的相关内容。

欢迎来到本课程，我们将探索如何在不使用 theme.json 文件的情况下创建区块样式表。

什么是区块样式表，何时使用它？

你始终可以选择在 theme.json 中编写 CSS。

以下是一个针对 WordPress 核心画廊区块的示例。然而，如果你的 CSS 变得过于冗长，区块样式表就是解决方案。

现在，让我们看看 WordPress 目录中的几个区块主题。

• 第一个主题名为 Ronny，由 ThemeinWP 创建。
• 第二个主题名为 Charity Vibes，由 Iconic Themes 创建。

你始终可以选择将 CSS 放在 style.css 中。

但对于大型项目，你可能需要考虑按区块拆分样式表，并将其放入诸如 assets 之类的文件夹中。这样可以提高网站性能，也让大型项目更易于管理。

在 Ronny 主题中，他们选择将区块样式表放在 ‘assets/styles’ 中；而在 Charity Vibes 中，他们选择将样式表放在 ‘assets/css’ 中，并命名为 blocks.css 文件。

由此可见，你在命名文件和文件夹时是有选择余地的。

创建自定义区块样式表

现在，让我们看看如何创建自定义区块样式表。

需要注意一些命名约定。

区块样式表的类名是 .wp-block-{命名空间}-{别名}，对于核心区块，你会使用类 .wp-block-{别名}，而区块样式表文件则命名为 core-{别名}.css。

要注册区块样式表，你需要使用 wp_enqueue_block_style 函数。

第一个参数传入区块名称，第二个参数传入一个参数数组。你可以使用 functions.php 来注册区块样式表。

以下是一个针对 WordPress 核心图片区块的示例，这是让你的样式在页面头部区域以内联方式显示所需的最低要求。

add_action( 'init', 'themeslug_enqueue_block_styles' );

function themeslug_enqueue_block_styles() {
    wp_enqueue_block_style( 'core/image', array(
        'handle' => 'themeslug-block-image',
        'src'    => get_theme_file_uri( "assets/blocks/core-image.css" ),
        'path'   => get_theme_file_path( "assets/blocks/core-image.css" )
    ) );
}

下一步

你可以参考 WordPress.org 上的主题手册，了解更多关于区块样式表的信息。

欢迎阅读本指南，了解如何在主题中包含 CSS、JavaScript、图片和字体。

加载样式和脚本

如何在主题中加载样式和脚本？

嗯，这与开发 WordPress 插件时加载 CSS 或 JavaScript 的方式非常相似。请务必查看WordPress 初学者开发者学习路径中的加载 CSS 或 JavaScript 课程。

基本上，要在主题中加载或包含 CSS 或 JavaScript 文件，您需要使用 WP enqueue scripts 动作钩子。

包含 CSS

让我们从在主题中包含 CSS 开始，无论是使用样式表还是内联样式。例如，在 Twenty Twenty-Two 主题中，我们看到在 functions.php 文件中，他们通过使用 WP enqueue scripts 动作钩子来加载样式。

这里我们特别看到 get_template_directory_uri 函数，它与 style.css 文件拼接后，基本上可以使 CSS 样式在前端可用。如果您需要添加内联 CSS，WordPress 提供了 wp_add_inline_style 函数。

包含 JavaScript

现在让我们看看如何在主题中包含 JavaScript，无论是使用外部文件还是内联 JavaScript。这里有一个 Twenty Twenty-One 主题中的示例。

我们加载了几个 JavaScript 文件。我们使用了 WP enqueue scripts 动作钩子，这些文件位于 ‘assets/js’ 文件夹中。与添加内联 CSS 类似，您可以使用 wp_add_inline_script 函数添加内联 JavaScript。

包含图片

如何在主题中包含图片？

我们假设您不是在构建块主题。使用一个您可以选择使用的代码示例。将您的图片文件放在 ‘assets/img’ 文件夹中，并使用 get_parent_theme_file_uri 函数，该函数将获取您主题的 URL。

<img src="<?php echo esc_url( get_parent_theme_file_uri( 'assets/img/your-image.jpg' ) ); ?>" alt="">

包含字体

现在让我们看看如何使用 theme.json 在主题中包含字体。

您可以通过使用 theme.json 在主题中包含字体。以下是 Twenty Twenty-Two 主题中如何实现此操作的示例。您可以看到字体文件已添加到 assets/fonts 文件夹中。然后在 theme.json 中的 settings.typography.fontFamilies 下，我们看到在 fontFace 中如何引用该文件，以生成一个可在样式中使用的变量。

这就是该变量的样子，您只需将 slug 替换为您在设置中设置的那个即可。

var(--wp--preset--font-family--source-serif-pro)

这是一个在文章标题中使用 Source Serif Pro 字体的示例。

"styles": {
    "blocks": {
        "core/post-title": {
            "typography": {
                "fontFamily": "var(--wp--preset--font-family--source-serif-pro)"
            }
        }
    }
}

后续步骤

如果您想查看本课程中提到的函数，请查看 WordPress.org 上提供的参考文档。您还可以查看主题手册，了解更多关于如何包含资源的信息。

欢迎来到本课程，我们将深入探讨主题的函数文件（functions.php），以及如何利用它来添加你自己的功能。

functions.php 文件

WordPress 主题的 functions.php 文件有什么作用？

通过添加可选的 functions.php 文件（在《初学者 WordPress 开发者学习路径》中介绍过），可以为你的主题添加功能或特性。请务必查看关于《主题结构》的课程。

我们可以选择添加 functions.php 文件，以便利用 WordPress 钩子系统在不修改核心文件的情况下扩展 WordPress。要了解更多关于 WordPress 钩子的信息，可以参考《初学者开发者学习路径》中的相关模块。

与插件类似，你应该始终将代码挂载到钩子上，以便在加载过程的适当时间点执行其功能。例如，你可以通过使用 after_setup_theme 动作钩子和 add_theme_support 函数，在主题被 WordPress 初始化后添加各种主题支持功能。

以下是默认的 Twenty Twenty-Four 主题中包含的 functions.php 文件内容。其中的 register_block_pattern_category 函数为我们注册了页面的模式分类。

请注意，WordPress 核心已经提供了许多模式分类。只是这个特定的模式分类并未提供，因此主题为我们实现了它。当执行 init 钩子时，将运行 Twenty Twenty-Four 模式分类函数。

使用插件

如何判断何时使用插件而不是 functions.php 文件？

既然你可以为主题添加类似插件的功能，那么明智地使用这种能力就很重要。如果你计划分发你的主题，最好将代码放在插件中，而不是依赖 functions.php 文件。这样，如果网站所有者决定更换主题，他们的网站也不会崩溃。

如果你计划将主题提交到 WordPress.org 主题目录，请务必遵循那里的指南。

常见用途

让我们看看使用 functions.php 文件扩展 WordPress 功能的一些常见用途。

对于经典主题，你可以使用 functions.php 文件来添加块主题样式。如果你查看 Twenty Twenty-One 主题，你会看到一个示例，他们为这个经典主题添加了对块样式的主题支持。

// Add support for Block Styles.
add_theme_support( 'wp-block-styles' );

你还可以使用 functions.php 文件加载脚本和样式，我们将在下一节关于包含资源的课程中介绍这一点。不过，要查看示例，你可以参考 Twenty Twenty-Two 主题。

最后，你可以选择使用 functions.php 文件包含其他 PHP 文件。你可以再次参考 Twenty Twenty-Two 主题的示例，你会发现它使用了位于 inc 文件夹中的 block-patterns.php 文件。

// Add block patterns
require get_template_directory() . '/inc/block-patterns.php';

这是通过添加 require、get_template_directory 并拼接文件路径来实现的。

下一步

你可以通过参考 WordPress.org 上的主题手册，了解更多关于添加自定义功能的内容。

欢迎来到本课程，我们将探索如何创建模板部件并将其添加到你的主题中。

什么是模板部件，它们如何工作？

模板部件（如页眉和页脚）是可重复使用的小型内容区块，可以添加到主题中你选择的模板里。模板部件保存在主题的 parts 文件夹中，我们通过模板部件块来加载它们。

例如，在 Twenty Twenty-Four 主题中，我们有 404 模板，我们可以在这里查看页眉的模板部件块。slug 属性是模板部件文件的名称，这里为 header，接下来是 area，它指定模板部件在页面布局中出现的位置，然后我们有 tag name，它创建包装容器元素，这里会是 header 标签。

什么是模板部件区域？

模板部件区域是一种组织相似模板部件的方式。

这里以 2024 主题为例，我们在站点编辑器中查看页面模板。我们看到，在右侧的设置中，如果进入模板选项卡，会发现页眉和页脚区域正在应用于页面。

我们还在左侧的概览中看到每个模板部件内容的视图。使用区域是它们与模式的一个显著区别，因为模式没有 area 属性。

将模板部件添加到你的主题

添加模板部件的方法之一是进入管理所有模板部件，然后点击添加新模板部件。为你的模板部件命名，选择其区域，然后点击创建。

让我们为我们的主题创建一个新的模板部件，开始操作。

我们将它命名为 header，并分配区域为 header，然后点击创建，接着插入一些内容。我们只需搜索站点标题块并插入它。然后我们将更改保存到数据库，接下来需要创建新的模板部件文件，并将代码复制到该文件中。

在代码编辑器中，我们复制代码，然后进入 parts 文件夹，创建新的 header 文件并粘贴我们的代码。

注册模板部件

接下来是注册我们的模板部件。

这是在 theme.json 中完成的，为了演示，我将展示在 Twenty Twenty-Four 主题中是如何操作的。我们只需将其复制到我们自己的主题中。为了节省时间，我们直接将其粘贴到我们的 theme.json 文件中。

我们转到 styles 下方，粘贴代码，现在需要添加闭合数组括号和一个逗号，然后删除多余的那个逗号。保存这些更改，现在我们可以将模板部件块添加到我们的模板中了。

再次参考 Twenty Twenty-Four 主题，查看 404 模板，我们将代码复制到我们自己的主题的 404 模板中。现在你需要对页脚重复完全相同的过程。

请记住，为了让你的工作流程更轻松，既然文件已就位，你可以直接安装 create block theme 插件，然后选择保存更改选项。

下一步

要了解更多关于模板部件的信息，你可以参考 WordPress.org 上的主题手册。

欢迎来到本课程，我们将深入探讨 WordPress 如何在浏览器中加载模板的细节。

WordPress 如何使用查询字符串？

当有人访问 WordPress 网站上的某个页面时，查询字符串会根据一些规则（我们将在本课程后面介绍）帮助确定应使用哪个模板。为了更好地理解查询字符串本身，让我们在 WordPress 仪表盘中看一个简单的例子。

普通固定链接结构使用带有问号、参数和值的查询字符串，该值是数据库中页面或文章的 ID。如果我们将固定链接结构从文章名称改为普通并保存更改，现在让我们看看一个实际可用的页面。我们有一个示例页面。

如果我们将鼠标悬停在此处的标题上，会在左下角看到 ID 为 2。如果我们进入前端，实际上可以输入查询字符串来查看示例页面是否会被调出。这里你输入一个斜杠，然后在问号后面加上 page ID 等于 2，它确实正确调出了页面。

WordPress 数据库

现在让我们看看数据库，了解 WordPress 如何处理查询字符串。WordPress 有一个名为 WP posts 的表和一个名为 post type 的字段。让我们看看数据。

我们想要 ID 为 2 的文章。那是我们的示例页面。所以我们打开它，如果向下滚动到底部，会看到文章类型是 page。这就是 WordPress 知道接下来要查找页面模板的方式。

模板层级图概述

WordPress.org 上提供了这个图表，帮助我们更好地理解当 WordPress 决定为最终用户访问的页面或文章使用哪个模板时所应用的规则。

黑色的是页面类型，然后是桃色的变量模板。接着是绿色的次要模板，蓝色的则是你的主要模板。

查询示例

现在让我们看一个所查询页面的示例。

如果我们访问网站的主域名（也称为首页），WordPress 会查找 front-page.html 模板。如果该模板不可用，它会继续查找 home.html 模板。

最后，如果那个也不可用，它会回退到最终的备用模板，即你的 index.html 模板。这解释了为什么 index.html 是你的主题必需的文件。

下一步

要了解更多关于模板层级的信息，你可以访问 WordPress.org 上的主题手册。