↓ 快轉到主要內容

修復 WordPress 中 Kirki Webfontloader MIME 類型錯誤

·701 字·2 分鐘
Y Cheung
作者
Y Cheung
Blogger, Programer & Traveler.
目錄

最近 Y Cheung 在 WordPress 後臺的發現有一個無法載入 kirki js 文件導致的錯誤,發生頻率很高,每個後臺管理頁面都會加載這個 js 文件但每次都找不到這個文件。

錯誤訊息
#

error cause by Kirki
You can see 404 error clearly.
1Refused to execute script from 'webfontloader.js' because its MIME type 
2('text/html') is not executable, and strict MIME type checking is enabled.

初步調查
#

乍看之下,這像是伺服器 MIME 類型設定錯誤,但真正的原因更簡單 — webfontloader.js 這個檔案根本不存在於伺服器上,所以伺服器回傳了一個 HTML 404 頁面,瀏覽器拒絕將其作為 JavaScript 執行。

關鍵線索
#

錯誤出現在每個後台頁面,Y Cheung 知道所使用的佈景主題使用了 Kirki,而目前 Kirki 外掛已更新至 v5.2.3 .

根本原因
#

深入研究 Kirki 5.2.3 的原始碼後,在以下路徑找到關鍵檔案:

1kirki/customizer/packages/modules/webfonts/src/Webfonts/Async.php

發現以下程式碼:

1if (self::$load || $wp_customize || is_customize_preview()) {
2    wp_enqueue_script('webfont-loader', URL::get_from_path(dirname(__DIR__) . '/assets/scripts/vendor-typekit/webfontloader.js'), [], '3.0.28', true);
3}

Kirki 5.2.3 刪除了 webfontloader.js,但沒有移除載入它的程式碼,估計可能不小心刪的?不清楚。5.2.2版本這個文件都還在的。這是 Kirki 本身的一個 Bug。系統預期在以下路徑找到該檔案:

1/kirki/customizer/packages/modules/webfonts/src/assets/scripts/vendor-typekit/webfontloader.js

但該檔案在外掛中已不復存在。

我們不能直接註解掉那行程式碼,因爲 webfont_loader_script() 中的內嵌腳本依賴於 webfont-loader 這個控制代碼:

1wp_add_inline_script('webfont-loader', 'WebFont.load({google:{families:[...]}})', 'after');

如果移除載入程式碼,Google 字體在前台也會無聲地失效。

修復方式
#

webfontloader.js 其實就是 Google/Typekit 的 Web Font Loader 函式庫。解決方案是在 Kirki 預期的路徑重新建立這個遺失的檔案:

1mkdir -p /wp-content/plugins/kirki/customizer/packages/modules/webfonts/src/assets/scripts/vendor-typekit/
2
3curl -o /wp-content/plugins/kirki/customizer/packages/modules/webfonts/src/assets/scripts/vendor-typekit/webfontloader.js \
4https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js

你也可以用 Github 上的 Webfontloader 檔案。

這樣就修復好啦,不會再出現礙眼的error啦。其實平常 Y Cheung 在後臺操作的時候也不會無端端的就去看 console 有什麽錯誤,主要是最近的 spam bot 太多,一個特徵是狂爬一些不存在的路徑,於是 Y Cheung 就開始觀察 404 的log,結果抓到一堆自己家裏的 IP , 才開始找原因,才有動力來修復,啊哈哈哈。本來想找插件官方修復的,但是 WordPress 支持論壇上我看都沒相關人員在理大家的提的 issue ,就算了,誰讓咱們是免費用戶,沒人權呢。

相關文章

Highslide Image WP插件完成

·237 字·1 分鐘
Y Cheung的玩樂博客要搬家啦,用了N多年的插件原作者一直不更新,嗚嗚嗚,只好自己重新寫一個喇! Highslide Image - Wordpress插件 我的思路是: 編輯器上添加一個按鈕——彈出窗口——供填寫圖片URL及描述的表單——插入代碼至編輯器中——前台樣式化效果顯示。

修復wp_redirect跳轉被瀏覽器緩存

·295 字·1 分鐘
Wordpress中某個下載頁面匿名用戶只能在提交表單後訪問,方法是在頁面加載的時候檢查表單提交成功的標記是否存在,不存在就跳轉去表單頁面,這裡使用了 wp_redirect() 方法。

Wordpress 主題顯示預估閱讀時間

·422 字·1 分鐘
突然發現Y CHUENG寫的遊記太長了,有的遊記居然有好些人看了15分鐘,於是想在頁面靠前的地方顯示預估閱讀時間,讓讀者有個文太長的心理準備😂 如何計算文章閱讀時長 # 這個預估閱讀時間的計算很粗暴,就是文章字數/平均閱讀速度。Y CHEUNG 抓的平均閱讀速度是500。一般人大約是200~500左右,隨意哈。雖然 PHP 內建有計算字數的函數 str_word_count ,但是中文用這個不好使,得出的數字不對,還是用正則匹配後計算啦。

Wordpress主题添加ogp协议meta标签

·459 字·1 分鐘
OGP(The Open Graph protocol)协议是一种新的HTTP头部标记,即Open Graph Protocol,即这种协议可以让网页成为一个“富媒体对象”。由于现在社交类网站大行其道,在HTML头部添加引用此类协议标注有助于被社交网站识别。