WordPress主题开发 Web字体加载器以本地化加载提速

之前因为我们“大局域网”的原因 WordPress默认在线加载的 Google fonts字体会使网站后台变得非常慢和卡顿,所以很多 WordPress主题为了速度都屏蔽阻止了 Google字体加载。能不能 WordPress本地化加载字体提速呢?

目前很多 WordPress主题都采用了第三方 Web字体,但是这种第三方字体对于网站的加载速度的影响还是比较大的。

WordPress主题审核团队一直以来也是不允许在主题中加载第三方或 CDN的脚本和样式文件的,但是此前对于 Google字体是唯一放行的例外。不过现在他们已经发布了一个Web字体加载器(Webfonts Loader),可供主题开发作者用来为主题集成 Web字体本地化加载的功能。

1602761640-0097a739d08c67c

也就是说,通过 Webfonts Loader加载的 Web字体,会自动将字体文件下载到用户网站的服务器主机中,然后从本地加载不再需要 CDN调用外链的字体。

随着 Webfonts Loader的到来,以后只要 WordPress主题中用到第三方 Web字体(不仅限于 Google字体),都需要采用这个加载器实现本地化调用。

Webfonts Loader 项目地址:https://github.com/WPTT/webfont-loader

下载网络字体(例如Google字体),并将其托管在WordPress网站本地(下载到 /wp-content/fonts 目录)。这样可以提高性能减少对多个顶级域的请求。

Web字体加载器 Webfonts Loader用法

目前 WordPress主题通常使用以下 wp_enqueue_style 功能来用脚本文件:

  1. function my_theme_enqueue_assets() {
  2. // Load the theme stylesheet.
  3. wp_enqueue_style(
  4. ‘my-theme’,
  5. get_stylesheet_directory_uri() . ‘/style.css’,
  6. array(),
  7. ‘1.0’
  8. );
  9. // Load the webfont.
  10. wp_enqueue_style(
  11. ‘literata’,
  12. ‘https://fonts.googleapis.com/css2?family=Literata&display=swap’,
  13. array(),
  14. ‘1.0’
  15. );
  16. }
  17. add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_assets’ );

如果要本地服务器托管 Web字体,您首先需要从该项目地址下载 wptt-webfont-loader.php文件并将其复制到主题中。完成此操作后,以上代码可以改变为以下代码:

  1. function my_theme_enqueue_assets() {
  2. // Include the file.
  3. require_once get_theme_file_path( ‘inc/wptt-webfont-loader.php’ );
  4. // Load the theme stylesheet.
  5. wp_enqueue_style(
  6. ‘my-theme’,
  7. get_stylesheet_directory_uri() . ‘/style.css’,
  8. array(),
  9. ‘1.0’
  10. );
  11. // Load the webfont.
  12. wp_add_inline_style(
  13. ‘my-theme’,
  14. wptt_get_webfont_styles( ‘https://fonts.googleapis.com/css2?family=Literata&display=swap’ )
  15. );
  16. }
  17. add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_assets’ );

还想要支持IE

默认情况下,wptt_get_webfont_styles将下载 .woff2文件。但是,如果需要支持IE,则需要使用 .woff文件。为此,您可以在 wptt_get_webfont_styles 函数中,将 woff作为第二个参数传递:

wptt_get_webfont_styles( 'https://fonts.googleapis.com/css2?family=Literata&display=swap', 'woff' );

 

总结

Web字体加载器 Webfonts Loader的使用,为所有主题开发者提供了对 Web字体处理的标准方式,但是这个需要主题开发者进行集成实现。

当然如果你是 WordPress使用者,并且当前主题还没有集成这个功能,那你也可以使用 OMGF | Host Google Fonts Locally 或 Self-Hosted Google Fonts 插件来实现类似 Google字体的本地化加载提速功能。

免责声明:本资源来源于互联网,安全性未知,使用前请自行甄别;本资源来源于互联网,如有侵权请及时联系我们,我们将在72小时内删除侵权内容;本资源存储在云盘,如发现链接失效,请 点此反馈 我们会第一时间更新。
吾爱分享者资源 » WordPress主题开发 Web字体加载器以本地化加载提速

发表评论