目前新版的Wordpress默認使用區域編輯器(Block Editor),
對文字格式的修改很有限
使用側欄的色彩修改文字顏色,只能整個區執統一修改;
若要單獨設定某些字詞,便需要編輯HTML程式碼去進行更多元化的文字編輯
儘管懂得使用coding,
但每次highlight文字都要連番操作也很不方便
<span style=”background-color:#ffffff;color:fe6a9e;padding:1px;font-weight:bold;”>想要強調的文字</span>
尤其希望每次highlight出來的效果都一樣,
就要每次翻查上一次使用了甚麼參數(e.g. 顏色、間距…)
這個時候自訂全站通用的CSS語法便很有用
首先想好想要呈現的highlight效果:
即背景顏色、文字顏色、padding、font weight等
(假如不知道相關參數的語法,
可以先使用傳統編輯器做出效果,再轉用編輯HTML程式碼去複製)
安裝外掛Advanced Editor Tools
Wordpress後台 -> 外觀 -> 自訂 -> Custom CSS
把下列語法複製到Custom CSS (橙色部份修改為自訂效果)
.mark{background-color:#ffffff;color:fe6a9e;padding:1px;font-weight:bold}
返回文章編輯的區塊編輯器便會出現了Mark,
Highlight了想要強調的文字後按一下,就會變成黃色背景。
(但這只是在後台的顯示方式,前台會以先前設定的效果顯示)
若果覺得只有一個highlight效果不夠用,
可以於Custom CSS貼上更多不同語法 (橙色部份修改為自訂效果),
把.mark改成.自訂名稱 (名稱要使用英文)
.red_highlight{background-color:#ffffff;color:fe6a9e;padding:1px;font-weight:bold}
.highlighter{background-color:#ffffff;color:fe6a9e;padding:1px;font-weight:bold}
想要highlight文字時,
轉用編輯HTML程式碼,使用下列語法就可以
(記得橙色部份要換成自訂名稱)
前文<span class=”highlighter“>想要強調的文字</span>後理
前文highlight後理
因為span class這組code每次使用都要輸入,
所以自訂名稱記得不要改太長喔~
補充:
Advanced Editor Tools這個外掛,
除了有一鍵Mark的功能外,還可以自訂編輯器
於設定直接把想要的功能拖拉到編輯器中