如何在 WordPress 主題中使用本地託管的 Google 字體(WordPress移除global-styles-inline-css和duotone svg)
文章目錄
如何在 WordPress 主題中使用本地託管的 Google 字體
前面我們介紹 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.geekzu.org/css2?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 目錄下，然後在上面函數開頭，加入載入這段腳本的代碼：
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.geekzu.org/css2?family=Literata&display=swap' )
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );
這樣就可以在本地託管 Google 網路字體了。
WordPress移除global-styles-inline-css和duotone svg
WordPress 5.9 版本後對塊編輯器做了深度的升級，所以導致只使用經典編輯器的情況下又出現了許多的冗餘代碼，頭部內聯樣式 global-styles-inline-css 和底部 duotone svg 圖標的代碼對於很多主題來說其實都不大兼容。
wp自學筆記我是絕對不能夠忍受頁面前端出現沒有仍和功能的代碼。經過一番折騰，現在將成果分享一下。
移除頂部內聯樣式 global-styles-inline-css
將以下代碼複製添加到當前 WordPress 主題的 functions.php 文件中即可
|
1 2 3 4 5 6 7 8 |
add_action(\'wp_enqueue_scripts\', \'tiezhu_remove_styles_inline\'); function tiezhu_remove_styles_inline(){ wp_deregister_style( \'global-styles\' ); wp_dequeue_style( \'global-styles\' ); wp_dequeue_style( \'wp-block-library\' ); wp_dequeue_style( \'wp-block-library-theme\' ); wp_dequeue_style( \'wc-block-style\' ); } |
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途！
3. 分享目的僅供大家學習和交流，請不要用於商業用途！
4. 本站資源售價只是贊助，收取費用僅維持本站的日常運營所需！
5. 本站所有資源來源於站長上傳和網路，如有侵權請郵件聯繫站長！
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源，都不包含技術服務請大家諒解！
9. 如果你也有好源碼或者教程，可以到審核區發布，分享有金幣獎勵和額外收入!
10.如果您購買了某個產品，而我們還沒來得及更新，請聯繫站長或留言催更，謝謝理解 !
GG資源網 » 如何在 WordPress 主題中使用本地託管的 Google 字體(WordPress移除global-styles-inline-css和duotone svg)
