前面我们介绍 WordPress 官方要求主题作者切换到本地托管字体,今天简单说说如何实现在本地托管的 Google 字体。

WordPress 主题的外部资源规则

一直以来,w.org/themes 上的存储托管主题,一直不允许使用第三方资源,包括第三方的图片,JavaScript 脚本文件,CSS 样式文件,网络字体以及其他资源。

但是这条规则的唯一的例外就是 Google 字体,因为当时没有可靠的方法来实现本地托管的网络字体,而排版又是主题设计中的一个重要组成部分。但是由于 GDPR 和隐私方面以及之前的案例的影响,Google 字体不再被视为本指南的例外。

如何本地托管的 Google 字体

WordPress 官方主题团队在很早之前就在 Github 发布了一段脚本教大家如何本地托管 Google 网络字体。

假如你原来是通过下面的代码加载样式和 Google 网络字体的:

function my_theme_enqueue_assets() { // 加载主题样式 wp_enqueue_style( my-theme, get_stylesheet_directory_uri() . /style.css, array(), 1.0 );    // 加载网络字体 wp_enqueue_style( literata, https://fonts.googleapis.com/css22?family=Literata&display=swap, array(), 1.0 );}add_action( wp_enqueue_scripts, my_theme_enqueue_assets );

下载 WordPress 官方主题团队提供的脚本,https://github.com/WPTT/webfont-loader,放到当前主题的 inc/webfont-loader 目录下,然后在上面函数开头,加入加载这段脚本的代码,并且在 Goole 远程字体地址上使用 wptt_get_webfont_styles 函数。

function my_theme_enqueue_assets() { // 加载处理文件 require_once get_theme_file_path( inc/wptt-webfont-loader.php ); // 加载主题样式 wp_enqueue_style( my-theme, get_stylesheet_directory_uri() . /style.css, array(), 1.0 ); // 加载网络字体 wp_add_inline_style( my-theme, wptt_get_webfont_styles( https://fonts.googleapis.com/css2?family=Literata&display=swap ) );}add_action( wp_enqueue_scriptsmy_theme_enqueue_assets );

这样就可以在本地托管 Google 网络字体了。

点击卡片关注「WordPress果酱」 

每天分享 WordPress 使用技巧 

1.使用本站下载的源码仅限于个人学习和非商业用途。
2.禁止将本站下载的源码用于搭建或支持任何违法、淫秽、暴力或侵犯他人合法权益的网站或应用。
3.使用本站下载的源码需遵守国家法律法规及相关规定,不得从事任何违法活动。
4.如若本站内容侵犯了原著者的合法权益,请联系我们进行处理。