分类： 区块主题功能

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

什么是区块变体？

区块变体是一种替代区块，你可以使用区块变体 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 上的主题手册，了解更多关于添加自定义功能的内容。