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

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

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

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

WordPress本地化加载字体

也就是说,通过 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字体的本地化加载提速功能。

 

转载请注明链接地址:荐爱小站 » WordPress主题开发 Web字体加载器以本地化加载提速

赞 (1) 赏 !

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • 计算 (必填)

觉得文章有用就打赏一下吧,赠人玫瑰手有余香!

支付宝扫一扫打赏

微信扫一扫打赏