零科技 · 軟體、電腦技巧與網站架設的實用筆記

[WordPress] 使用 Gutenberg 古騰堡編輯器一定要安裝的外掛程式

網站架設›WordPress閱讀約 3 分鐘
這篇文章撰寫於 6 年前。軟體介面與設定步驟可能已經改變,請搭配官方文件確認。
目錄
  1. Stackable
  2. Atomic Blocks
  3. Gutenberg Blocks
  4. Gutenberg Post Blocks
  5. Code Syntax Block
  6. TinyMCE Advanced
  7. 結語

Gutenberg 這款編輯器是自從 WordPress 5.0 版本開始就是預設的文章編輯器,我本身開始在玩 WordPress 的時候就差不多是 5.0 版本之後的事,所以對於一般的傳統編輯器相比,Gutenberg 新版編輯器相對比較有吸引力,很喜歡嘗試新事物的我來說,任何新技術以及新的方法我都會勇於嘗試。而我試用了幾周之後我覺得雖然本身編輯器還有很多的兼容性以及排版問題,但對於 WordPress 官方的預設編輯器來講,相信開發者會一直改善下去,讓 Gutenberg 改變部落客的生態吧!

從開站到現在我一直都是使用 Gutenberg 來撰寫我的文章,Gutenberg 裡面就有預設很多的樣板以及工具,但我覺得不夠!我想要更多工具以及現成的樣板,今天就來介紹可以完美兼容 Gutenberg 的外掛,讓你的文章更豐富以及更彈性吧!

Stackable

超過 24 種特色區塊,超多的區塊微調參數,就算樣板你有一點不滿意也可以利用微調來達到自己喜歡的樣式。高度相容 Gutenberg 編輯器,沒有 CSS 觀念也可以簡單快速的製作出精美的網頁。

廣告

Atomic Blocks

基本上跟 Stackable 是差不多類型的插件,雖然兩者有重複的功能,但也是有一些是 Atomic Blocks 才有的區塊。

Gutenberg Blocks

同上,更多不同的區塊,在這邊就介紹三種。當然區塊的外掛還有很多,大家可以到 WordPress 外掛上面去搜尋。比較特殊的是裡面還有針對 SEO 做優化的外掛,有興趣可以裝來試試看。

同上,更多不同的區塊,在這邊就介紹三種

Gutenberg Post Blocks

這個外掛雖然也是有蠻多的區塊,但它比較注重於「文章的布局」,如果想要更多的布局設置,Gutenberg Post Blocks 可能適合你。

這個外掛雖然也是有蠻多的區塊,但它比較注重於「文章的布局」,如果想要更多的布局設置,Gutenberg Post Blocks 可能適合你

Code Syntax Block

如果你的文章中有包含程式碼需要有區塊 Highlight 功能的話,Code Syntax Block 可以與 Gutenberg 完美兼容,只需要在原生的 Code 區塊就可以看到有多一些程式碼的選擇。詳細教學可以看這邊:

延伸閱讀:[WordPress] 176 種程式語言高亮標色 讓程式碼更容易閱讀(支援Gutenberg)

TinyMCE Advanced

如果你是習慣使用傳統編輯器的人,正在轉型使用 Gutenberg 卻覺得有些地方想要使用傳統編輯器來編輯的話非常推薦可以安裝 TinyMCE Advanced ,他可以讓傳統編輯器與 Gutenberg 完美的結合,讓你可以享受 Gutenberg 的便利性的同時也可以用傳統編輯器來完成你的作業。

結語

Gutenberg 讓我們對於部落格的撰寫方式整體改觀了,可以讓剛入門或是不怎麼了解程式碼的使用者來說更加親切了。對於內建沒有支援的區塊可以透過許多的外掛來做輔助,讓你的編寫效率提高以及網頁品質更高,雖然整體優化還有一長段路要走,但有興趣的還是可以來體驗一下 Gutenberg 的特性吧

廣告