[教學] 自訂WordPress編輯器 一鍵強調內文文字

449

目前新版的Wordpress默認使用區域編輯器(Block Editor)，
對文字格式的修改很有限

使用側欄的色彩修改文字顏色，只能整個區執統一修改；
若要單獨設定某些字詞，便需要編輯HTML程式碼去進行更多元化的文字編輯

儘管懂得使用coding，
但每次highlight文字都要連番操作也很不方便

尤其希望每次highlight出來的效果都一樣，
就要每次翻查上一次使用了甚麼參數(e.g. 顏色、間距…)

這個時候自訂全站通用的CSS語法便很有用

首先想好想要呈現的highlight效果：
即背景顏色、文字顏色、padding、font weight等
(假如不知道相關參數的語法，
可以先使用傳統編輯器做出效果，再轉用編輯HTML程式碼去複製)

安裝外掛Advanced Editor Tools

WordPress後台 -> 外觀 -> 自訂 -> Custom CSS

把下列語法複製到Custom CSS (橙色部份修改為自訂效果)

返回文章編輯的區塊編輯器便會出現了Mark，
Highlight了想要強調的文字後按一下，就會變成黃色背景。
(但這只是在後台的顯示方式，前台會以先前設定的效果顯示)

若果覺得只有一個highlight效果不夠用，
可以於Custom CSS貼上更多不同語法 (橙色部份修改為自訂效果)，
把.mark改成.自訂名稱 (名稱要使用英文)

想要highlight文字時，
轉用編輯HTML程式碼，使用下列語法就可以
(記得橙色部份要換成自訂名稱)

前文highlight後理

因為span class這組code每次使用都要輸入，
所以自訂名稱記得不要改太長喔~

補充：

Advanced Editor Tools這個外掛，
除了有一鍵Mark的功能外，還可以自訂編輯器

於設定直接把想要的功能拖拉到編輯器中