管理 WordPress 块主题中的字体

字体是任何网站设计的决定性特征。 这包括 WordPress 主题，主题开发人员通常会在其中集成诸如 谷歌字体 进入“经典”基于 PHP 主题的 WordPress Customizer 设置。 WordPress 块主题并非如此。 虽然将 Google 字体集成到经典主题中已得到充分记录，但目前没有任何可用于块主题的内容 WordPress 主题手册.

这就是我们要在本文中看到的内容。 块主题确实可以使用 Google 字体，但注册它们的过程与您以前在经典主题中所做的过程有很大不同。

我们已经知道的

正如我所说，就开始而言，我们几乎没有什么可继续的。 Twenty-Twenty-Two 主题是第一个基于块的默认 WordPress 主题，它演示了我们如何将下载的字体文件用作主题中的资产。 但它非常笨重，因为它涉及几个步骤：(1) 将文件注册到 functions.php 文件 (2) 定义捆绑字体 ，在 theme.json 文件.

不过，自从二十二十二发布以来，这个过程变得更简单了。 现在可以在不注册的情况下定义捆绑字体，如 二十二十三主题. 但是，这个过程仍然需要我们手动下载字体文件并将它们捆绑到主题中。 这是一种障碍，有点违背了在快速 CDN 上提供的简单、嵌入式、托管字体的目的。

什么是新的

如果您还不知道， 古腾堡计划 是一个实验性插件，其中为 WordPress 块和站点编辑器开发的功能可供早期使用和测试。 在最近的 主题塑造者文章, 古腾堡项目首席架构师 马蒂亚斯文图拉 讨论如何使用 创建块主题 插件。

这个短 学习 WordPress 的视频 很好地概述了 Create Block Theme 插件及其工作原理。 但最重要的是，它按照罐子上所说的那样做：它创建了块主题。 但它是通过在 WordPress UI 中提供控件来实现的，这些控件允许您创建整个主题、子主题或主题样式变体，而无需编写任何代码或不必接触模板文件。

我试过了！ 因为创建块主题是 由 WordPress.org 编写和维护 团队，我想说这是我们将 Google 字体集成到主题中的最佳方向。 也就是说，绝对值得注意的是该插件正在积极开发中。 这意味着事情可能会很快改变。

在了解这一切的工作原理之前，让我们先简单回顾一下将 Google 字体添加到经典 WordPress 主题的“传统”过程。

它过去是如何完成的

这篇 2014 年的 ThemeShaper 文章 提供了一个很好的例子，说明我们过去是如何在经典的 PHP 主题中做到这一点的，就像 Ibad Ur Rehman 撰写的这篇较新的 Cloudways 文章.

为了刷新我们的记忆，这里有一个默认的例子 二十七主题 显示 Google 字体如何在 functions.php 文件中。

function twentyseventeen_fonts_url() { $fonts_url = ''; /** * Translators: If there are characters in your language that are not * supported by Libre Franklin, translate this to 'off'. Do not translate * into your own language. */ $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' ); if ( 'off' !== $libre_franklin ) { $font_families = array(); $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i'; $query_args = array( 'family' => urlencode( implode( '|', $font_families ) ), 'subset' => urlencode( 'latin,latin-ext' ), ); $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' ); } return esc_url_raw( $fonts_url );
}

然后谷歌字体预先连接到这样的主题：

function twentyseventeen_resource_hints( $urls, $relation_type ) { if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) { $urls[] = array( 'href' => 'https://fonts.gstatic.com', 'crossorigin', ); } return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

传统方式有什么问题

太好了，对吧？ 然而，有一个障碍。 2022 年 XNUMX 月，一个 德国地方法院处以罚款 网站所有者违反欧洲的 GDPR要求. 问题？ 在网站上排队使用 Google 字体会暴露访问者的 IP 地址，从而危及用户隐私。 CSS-Tricks 前段时间介绍了这一点。

创建块主题 插件满足 GDPR 隐私要求，因为它利用 Google Fonts API 仅作为本地供应商的代理。 这些字体在同一网站上而不是在 Google 的服务器上提供给用户，从而保护隐私。 WP Tavern 讨论了德国法院的裁决，并包含指向自托管 Google 字体指南的链接。

如何在块主题中使用谷歌字体

这将我们带到了今天将 Google 字体与 WordPress 块主题一起使用的“现代”方式。 首先，让我们建立一个本地测试站点。 我用飞轮的 本地品牌 用于本地开发的应用程序。 您可以使用它或您喜欢的任何东西，然后使用 主题测试数据插件 由 WordPress 主题团队处理虚拟内容。 而且，当然，你会想要 创建块主题 插件也在那里。

您是否安装并激活了这些插件？ 如果是这样，请导航至 外观 → 管理主题字体 从 WordPress 管理菜单。

“管理主题字体”屏幕显示主题中已定义的任何字体的列表 theme.json 文件。 屏幕顶部还有两个选项：

• 添加谷歌字体。 此选项将 Google 字体直接添加到来自 Google 字体 API 的主题中。
• 添加本地字体。 此选项将下载的字体文件添加到主题中。

我正在使用 WordPress 的一个完全空白的主题，名为 空主题. 欢迎您使用自己的主题，但我想指出，我已将 Emptytheme 重命名为“EMPTY-BLANK”并对其进行了修改，因此根本没有预定义的字体和样式。

我想我会分享我的主题文件结构的截图和 theme.json 文件以显示实际上没有任何样式或配置正在进行。

让我们点击“添加谷歌字体”按钮。 它会将我们带到一个新页面，其中包含从当前字体中选择任何可用字体的选项 谷歌 F接口.

对于这个演示，我选择了 国际米兰 从选项菜单中，并从预览屏幕中选择 300、常规和 900 权重：

保存选择后，我选择的 Inter 字体样式会自动下载并存储在主题的 assets/fonts 文件夹：

还要注意这些选择是如何自动写入 theme.json 该屏幕截图中的文件。 Create Block Theme 插件甚至添加了字体文件的路径。

{ "version": 2, "settings": { "appearanceTools": true, "layout": { "contentSize": "840px", "wideSize": "1100px" }, "typography": { "fontFamilies": [ { "fontFamily": "Inter", "slug": "inter", "fontFace": [ { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "300", "src": [ "file:./assets/fonts/inter_300.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "900", "src": [ "file:./assets/fonts/inter_900.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./assets/fonts/inter_regular.ttf" ] } ] } ] } }
}

如果我们转到 Create Block Theme 的主屏幕并单击 管理主题字体 再次按下按钮，我们将在预览面板中看到 Inter 的 300、400（常规）和 900 重量变体。

A 演示文本预览框 在顶部甚至允许您使用字体大小选择滑块预览句子、标题和段落中的选定字体。 您可以在 这个 GitHub 视频.

所选字体也可在站点编辑器中使用 全球风格 (外观 → 编者)，特别是在“设计”面板中。

从这里，导航到 模板 → Index 然后点击蓝色 编辑 按钮编辑 index.html 模板。 我们想打开 全球风格 设置，表示为位于屏幕右上角的对比图标。 当我们点击 文本 设置并打开 字体 菜单 活版印刷 部分......我们看到国际米兰！

同样的事情，但使用本地字体

我们不妨考虑将本地字体添加到主题中，因为 Create Block Theme 插件提供了该选项。 好处是您可以使用您喜欢的任何字体服务中的任何字体文件。

如果没有插件，我们将不得不获取我们的字体文件，将它们放在主题文件夹中的某个位置，然后求助于传统的 PHP 路由，将它们排入 functions.php 文件。 但是我们可以让 WordPress 通过将字体文件上传到 添加本地字体 使用创建块主题界面的屏幕。 选择要上传的文件后，字体定义框会自动填充。

即使我们可以使用任何 .ttf, .woff或 .woff2 文件，我只是下载了 从 Google Fonts 打开 Sans 字体文件 对于这个练习。 我抢了两个重量变化，常规和 800。

相同的自动魔法文件管理和 theme.json 当我们上传字体文件（一次一个完成）时，我们看到的 Google 字体选项更新再次发生。 查看字体在我的主题文件夹中的位置以及它们是如何添加到 theme.json:

删除字体

该插件还允许我们从 WordPress 管理员的块主题中删除字体文件。 让我们删除我们在上一节中安装的一个 Open Sans 变体，看看它是如何工作的。

点击 删除 链接会触发警告，让您确认删除。 我们会点击 OK 继续。

让我们打开我们的主题文件夹并检查 theme.json 文件。 果然，我们在插件屏幕上删除的 Open Sans 800 文件从主题文件夹中删除了字体文件，而对它的引用早就不见了 theme.json.

正在进行的工作正在进行中

正在谈论将这个“字体管理器”功能添加到 WordPress 核心 而不是需要一个单独的插件。

特征的初始迭代 在回购中可用，它使用的方法与我们在本文中使用的方法完全相同。 它应该是 符合GDPR， 也。 特点是 计划登陆 WordPress 6.3 今年晚些时候发布。

结束了

在处理 WordPress 块主题中的字体时，Create Block Theme 插件显着增强了用户体验。 该插件允许我们在遵守 GDPR 要求的同时添加或删除任何字体。

我们看到了如何选择 Google 字体或上传本地字体文件自动将字体放置在主题文件夹中并将其注册到 theme.json 文件。 我们还看到了字体如何成为站点编辑器中全局样式设置中的一个可用选项。 如果我们需要删除字体？ 该插件也完全负责这一点——无需触及主题文件或代码。

谢谢阅读！ 如果您有任何意见或建议，请在评论中分享。 我很想知道您如何看待 WordPress 字体管理的这个可能方向。

额外的资源

我依靠大量研究来撰写这篇文章，并认为我应该分享我用来为您提供更多背景信息的文章和资源。

WordPress字体管理

GitHub问题

欧洲 GDPR 要求

• SEO 支持的内容和 PR 分发。 今天得到放大。
• 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 访问这里。
• Sumber: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/