!
也想出现在这里? 联系我们
广告位

WordPress主Web字体加载器本地化Web字体加载

现在,很多 WordPress 主题都采用了第三方 Web 字体,比如非常受欢迎的 Google 网页字体,但是这种第三方字体,对于网站的加载速度的影响是比较大的,此外还可能对用户隐私造成影响。WordPress 主题审核团队一直以来也是不允许在主题中加载第三方或 CDN 的脚本和样式文件的,但是此前对于 Google 字体是唯一放行的例外。不过现在他们E Q N l u已经发布了一个 Web 字体加载器(Webfonts Loader),可* 0 a供主题作者用来为主题集成 Web 字体本地化加载的功能。

也就是说,通过 Webfonts Loader 加载的 Web 字体,会自动将字体文件下载到用户的主机空间中,然后从本地加载,不再需要 CDN 调用外链的字体i ^ \。随# % { ! 1 `着 Webfonts Loader 的到来,以后只要主- h D |题中用到第三方 Web 字体(不仅限于 Google 字体),都需要采用这个加载器实现本地` ) Q F g h g +化调用。

Webfonts Loader

项目地g - O址:https://L D ( c 4 ugithub.com/WPTT/webfon5 W 9 l T Jt-loader

下载网络字体(例如 GoX B / V z ~ 7 j 9ogle 字体),并将其托管在 WordPress 网站本地(下载到 /wpZ a o-content/fonts 目录)。这样可以提高性能(减少对多个顶级域的请求)并增强隐私保护。由于字体是在站点上本地托管的,无需 ping 通到第三方服务器F m K # % T ; ` @获取 Web 字体,无法进行跟踪。

使用方法

Wob k t i 6 DrdPress 主题通常使用以下 wp_enqueue_style 功能来排队脚本文件:

  1. function my_theme8 P I __enqueue_assets() 3 I & v x C } R3;
  2. // Load the themx J - J f _ ce stylesheet.
  3. wp_enqueue_style(
  4. 'my-theme',
  5. get_stylesheet_directory_uri(; ; u) . '/style.css',
  6. array(),
  7. '1.0'
  8. );
  9. // Load t0 O ? 6 3 0he webfont.
  10. wp_enqueue_style&5 W [ o 2 A 3 3 w#040;
  11. 'literata'R a - D m X v V O,
  12. 'https:/C F 9 % ?/fonts.googleapis.com/css2?family=Literata&display=sR s @ X 9 W wwap',
  13. arrayy i I * y P(),
  14. '1.0'
  15. );
  16. }
  17. add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

要本地托管 Web 字体,您首先需X u = A要从该存储库下载 wptu ) / T T J bt-webfont-loader.php 文件并将其复制到主题中。完成此操作后,以上代码可以转换为以下代码:

  1. function my_theme_ene 3 A e : M y bqueue_as! r _ lsets() {
  2. // In[ a 2clude the file.
  3. require_once get_theme_file_path( 'inc/wptt-webfont-loader.u ? 0 : Y & 8 jphp' );
  4. // LoaE H ! B 4d the theme stylesheet.
  5. wp_enqueue_stP $ @ nyleP ` Z 2 ) O c0;
  6. 'my-them/ g e s & ` oe',
  7. get_stylesheet_directory_uri() . '/style.css',
  8. array(),5 # 9 B A o ? ^ t
  9. '16 3 t \ @ 8 % f z.0'
  10. );
  11. // Load the webfont.
  12. wp_add_inline_style(
  13. 'my-theme',
  14. wptt_get_webfon6 \ zt_styles( 'https://fonts.googleapis.com/css2?family=Literata&display=swap' )
  15. );
  16. }
  17. add_action( 'wp_enqueue_scriptW J = v 7 Ys', 'my_theme_enqueue_assets' );

支持 IE

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

  1. wptt_get_webfo+ E / 3 [ Bnt_styles( 'https://fonts.googleapis.com/css2?family=Literata&display=swap', 'woff' F % m # | n g 2 R041;;

总结

Webfonts Loader 的到来,为所有主题开发者提供了对 WA v R %eb 字体的标准处理方式,但是这个- 6 O Z j \ X u a需要主题开发者进行集成实现。如果你是一般用户,并且主题没有集成这个功能,那你可以使用 OMGF\ C f | Host Google Fonts Locally 或 Self-Ho* E ^ s : / Isted Google Fonts 插件来实现 Google 字体本地化加载。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress前端后台添加文章浏览次数

2022-9-24 3:48:38

WordPress教程

巧妙使用 WordPress 搜索支持自定义字段数据

2022-9-25 3:48:19

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索