[Gutenberg] – 如何替行內文字加上顏色和背景色

最近在使用 Notion,覺得 Notion 在編輯上真的蠻順手的,在整個撰寫文章的過程中,動作不太會被打斷。回到 WordPress 的古騰堡編輯器中就會發現有一些小地方還是做得不是那麼理想。

不過既然 WordPress 是開放原始碼的軟體,自然有辦法改善。這次我們要改善的就是幫文字區塊中的行內文字(inline text)加上顏色和背景顏色。

在預設的古騰堡編輯器中,段落區塊的內容是可以改變文字或背景顏色的,但是顏色的調整會套用在整個區塊內容中。調整的地方是在右側區塊資訊欄中的 [色彩設定],可以調整整個段落區塊的背景顏色和文字顏色。

段落區塊色彩設定

但有時候在寫文章時,會希望透過修改文字顏色或是背景顏色來強調部分行內文字內容,使用預設的古騰堡段落區塊就無法做到了,這時候就要安裝第三方的外掛來達到這樣的目的。

如果要修改部分行內文字顏色和背景色,有幾個外掛可以做到。

Advanced Rich Text Tools for Gutenberg

第一個外掛是 Advanced Rich Text Tools for Gutenberg,這個外掛是由 Automattic 的員工 Ella Van Durpe 所撰寫的,相信有一定的品質,另外這個外掛也已經由阿力獅提供了繁體中文的翻譯。

這個外掛除了可以針對行內文字設定顏色和背景顏色外,還提供了其他的功能,例如標示為程式碼片段、標示為上標和標示為下標等功能。不過標示行內文字顏色的功能跟預設的文字區塊顏色設定都是在右側的區塊資訊欄中進行設定,就撰寫來說感覺比較不是那麼直覺,而且因為這個功能是針對行內文字,放在整個區塊資訊欄中似乎比較不是那麼合理,但這個外掛的其他功能,像是上標和下標卻又是放在工具列中,這就有點摸不著開發者當初的設計邏輯了。

修改行內文字顏色和背景顏色

Gutenberg Page Building Toolkit – EditorsKit

另外一個外掛是 Gutenberg Page Building Toolkit – EditorsKit,或簡稱 EditorsKit。EditorsKit 是由 Jeffrey Carandang 所撰寫,Jeffrey 本身是 Phpbits Creative Studio 的創辦人,開發多個 WordPress 外掛,包含知名的 Widget Options 。另外他也是 CoBlocks 的共同創辦人,CoBlocks 已經於 2019年4月被 GoDaddy 收購

EditorsKit 在功能的設定設計上我覺得就比較符合我對文字編輯工具的想像,針對行內文字的相關設定都是在 Toolbar 中來進行設定,在編輯的過程中可以專注在整個編輯區域,不用再跳到右側的區塊資訊欄。

EditorsKit 除了文字格式外還提供了一些額外的功能:

  • 可修改標題的文字顏色和背景色
  • 針對桌機、平板、手機來顯示或隱藏區塊
  • 針對使用者登入或登出的狀態來顯示或隱藏區塊
  • 針對 Advanced Custom Fields(ACF) 欄位的值來顯示或隱藏區塊
  • 顯示區塊的導引線(Guide Line)
  • Markdown 語法支援

心得

以上,就是我針對行內文字顏色的外掛介紹,你可以選擇一個符合自己使用習慣的外掛,我個人的話會選擇 EditorsKit,因為他比較符合整體編輯的流程,且提供了許多額外的編輯功能,個人覺得也都相當實用。如果你有其他不錯的外掛,也歡迎在留言區留言推薦給大家。

WordPress 備份插件 – 使用 duplicator 備份網站

網站的備份是每個網站管理者必備的技能之一,今天我們要介紹一個簡單易用的備份插件:duplicator。duplicator 目前已經有超過100萬個網站安裝

duplicator 並不只是一個備份的插件,她還可以協助你搬移網站。安裝並啟用插件後,進入後台->Duplicator->Packages,Package 清單會列出你過去的備份記錄,點擊 Create New 來新增備份。

新增備份的過程會透過1、2、3步驟來引導你,相當的清楚。第一個階段是 setup,在這個階段你可以設定你的備份的名稱,可以設定一個方便辨識的名稱,通常是日期為開頭,讓你知道這是哪一天的備份。

Storage 可以設定備份好的檔案要儲存在哪裡,預設是網站下的 wp-snapshots 資料夾。進階版可以將備份檔上傳到第三方儲存服務,例如 Dropbox、Google Drive、AWS S3 等服務。

Storage

Archive 可以設定什麼資料要打包進你的備份檔,包括檔案和資料庫。在 Files 分頁你可以設定要排除的資料夾或檔案,如果要排除請先將 Enable File Filters 啟用。你可以排除資料夾(Directories),或是使用檔案副檔名(File extensions)以及特定檔案(Files)來過濾不要的資料

常見的一個資料夾是快取外掛的資料夾 cache,這個資料夾存放著快取的檔案,這類檔案都可以透過快取外掛重新產生,所以沒有必要打包進備份檔,避免增加檔案的大小。

資料庫(Database)的分頁可以設定你要打包的資料表(Table),一般不會特別去設定,畢竟我們希望的是完整的備份資料庫。如果你真的清楚你在做什麼,再進行這邊的設定。

若你的備份檔是希望安裝在另一台主機的話,Installer 這個設定可以幫你產生一個安裝檔,方便你安裝,這個設定不是必要的。即使不填的話,你在安裝的時候也可以手動輸入。

確定都設定好後,按下 Next 進入下一步。第二階段會根據你的設定掃描的的網站,掃描完成後會顯示掃描的結果。若是正常的會顯示 Good,代表你可以繼續完成打包的工作。若不正常會顯示紅色的 Fail。點開每個設定會顯示詳細的資訊或是錯誤訊息。

若掃描的結果都正常,請按下 Build 來進行打包。打包的時間會決定於網站的檔案和資料庫大小,若你使用虛擬主機,很有可能在這一個階段timeout,導致打包失敗,若失敗建議回到第一步驟,將不必要的檔案排除掉,再重新進行打包。

打包完成!你可以下載打包好的檔案(Archive),若你要將此備份檔安裝在其他主機,請一併下載 Installer 安裝檔。

下載下來備份檔,解壓縮後可以看到網站的整個目錄和檔案,其中還包含了備份的資料庫檔案 database.sql

以上,就完成了基本的備份。下一篇文章會跟大家說明,如何將此備份檔安裝的其他主機上。

參考資料:

How To Move Or Backup Your Website With The WordPress Duplicator Plugin

How To Use Duplicator WordPress Plugin to Migrate WordPress Hosting: DIY Guide

Duplicator: An Easy Way to Back Up, Copy, or Clone Your WordPress Content