解決 WordPress Astra 主題修改後台編輯器樣式問題

使用 Astra 主題今天遇到了一個很怪的問題,在編輯文章的時候,不知道怎麼搞的,後台文字編輯器的標題及內文,全部都變成白色的,這給客戶肯定被打槍阿!! 花了很多時間找這個問題,並解決它了,如果你也正遇到這個問題這也許對你會有幫助

後臺編輯器的標題及內文一片白

除錯開始

透過 Chrome 開發者工具,找到一串修改後台編輯器樣式的行內樣式 (inline style),就是這一串樣是在搞鬼,由 style 標籤上的 id ,「astra-block-editor-styles-inline-css」看得出來是 Astra 給的行內樣式,不過 Astra 又為什麼要給這個行內樣式呢? 找了一下資料,不知道WP 從哪一版開始,後台編輯器可以設定樣式,用以貼近前端的使用情境,到編輯器設定中,在外觀這個頁籤裡,就有一個「使用佈景主題樣式」的選項,但我試著關閉它,回到編輯器,仍然不起作用,後台文字編輯器仍然是一片白,顯然 Astra 有給予樣式但並沒有依照這個選項來判斷,是否覆蓋後台文字編輯器樣式

但是這樣式又是由哪邊得到的呢?
最後在主題選項中找到設定顏色的地方,為了展示效果,我把文字顏色跟標題顏色,用比較明顯的顏色表示,標題都使用紅色,文字都使用綠色,接著回到編輯器如下圖

結果編輯器的標題就顯示紅色,內文就顯示綠色,這樣就合理了,為什麼 Astra 要特別去覆蓋後台文字編輯器樣式了,主要是為了可以方便使用者模擬前端樣式編輯文章

但問題又來了
那為何我的編輯器是一片白呢?

為何我的編輯器會一片白呢?

上面的功能算是蠻貼心的功能,但僅適用於明亮背景下,而我匯入 Astra 的預置主題為深色背景如下圖,主題中的文字、標題色彩都為明亮色系(接近白色),所以我後台的文字編輯器的樣式才會都呈現白色,但如果為了文字編輯而去修改主題顏色,假設我把標題改成黑色,雖然後端編輯器的標題就會恢復到正常的黑色,但我前端標題也跟著變成黑色,這還蠻尷尬的,不知道在開發這功能的時候有沒有想過這種情況?

解決方法

終於找到問題也知道其中原理就輕鬆多了,我的解決策略是移除覆蓋後台文字編輯器的行內樣式,讓標題、內文回復到 WordPress 預設樣式就可以了,這其實也是最原始的文章寫作方式,並不影響發布功能,且使用者也不會感到不習慣,在發文時只要專注內容及圖文編排就好,太多顏色有時反而是一種干擾

實作解決方法

可以參考官方提供的方案:How to Remove Inline CSS from Astra?

function astra_force_remove_style() {
    add_filter( 'print_styles_array', function($styles) {
        // Set styles to remove.
        $styles_to_remove = array('astra-block-editor-styles');
        if(is_array($styles) AND count($styles) > 0){
            foreach($styles AS $key => $code){
                if(in_array($code, $styles_to_remove)){
                    unset($styles[$key]);
                }
            }
        }
        return $styles;
    }); 
}
add_action('admin_init', 'astra_force_remove_style', 99);

但我看了看了一下主題檔案,其實除了秀出「astra-block-editor-styles-inline-css」這個行內樣式外,也另外載入了一個id是「astra-block-editor-styles-css」的CSS檔案,我看主題這個CSS檔案看起來像是給區塊編輯器使用的,而使用上面這個法,將會移除「astra-block-editor-styles-inline-css」及「astra-block-editor-styles-css」這兩段CSS

後來我找到一個 Hook 可以很輕鬆的移除覆蓋後台文字編輯器的文字樣式的方法,並保留給區塊編輯器的相關樣式,經我測試是有效的,只要在主題目錄中的 functions.php 中加入下面這一段即可

add_filter( 'astra_block_editor_dynamic_css', '__return_false');

驗證結果,後台的文字編輯器樣式已經改為 WordPress 預設樣式了,而且不影響 Astra 主題設定的顏色,若您有相同問題可以試試看喔,如果有更好更簡單的解決方法,也請您不要吝嗇指導:)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料