古騰堡 Gutenberg

Gutenberg 區塊 不夠多嗎？想增加更多的內容區塊嗎？Ultimate Addons for Gutenberg 外掛幫助你延伸 Gutenberg 編輯器，增加更多元的內容！整體來說，帶路姬蠻推薦這個外掛的喔！至少是大公司出的，比較不會有安全上的疑慮，也比較少 bug..帶路姬很快的試用了一下，覺得這些內容區塊都還蠻實用的，而且不會讓網站變慢喔…

古騰堡不好用嗎？和你的編輯器和外掛有衝突嗎？WordPress5.0起，預設的編輯器就是 Gutenberg 古騰堡了！不論你是因為不習慣、不喜歡、還是有相容性的問題，WordPress 開發團隊很貼心的準備了「Classic Editor 傳統編輯器」的外掛，讓大家可以還原你的編輯器到升級前的狀態喔！…

WordPress 5.0 即將換掉現有的傳統內容編輯器了！要改成 Gutenberg 古騰堡編輯器了！目前 WordPress 5.0 已經在最後測試階段。帶路姬也已經下載測試版來玩玩看。順便測試了一下，如果真的有需要時，是否可以改回原本的傳統編輯器呢？

WordCamp Taipei 2018: Gutenberg 帶來了什麼改變？ 這次帶路姬很榮幸，能在 WordCamp Taipei 2018 中，與大家分享「Gutenberg 編輯器帶來了什麼改變？」。我就利用這篇文章，把我所蒐集到的資訊，一次統整給大家。 正式進入詳細介紹之前，要提醒大家，2018/12/6 WordPress 5.0 已經正式發佈了，Gutenberg 編輯器也正式預設在新的 WordPress 裡囉！如果你的佈景主題與外掛還沒有和 WordPress 5.0 相容，請不要隨便更新你的 WordPress 版本喔！ 要更新到 WordPress 5.0 之前，請切記一定要先備份好你的網站！如果不小心升級後，網站壞掉了，至少可以輕鬆還原! 帶路姬推薦的 A2 主機和 Cloudways 都有很幫變得備份與還原功能喔！ 手把手帶你把網站搬到 A2 Hosting 主機 手把手帶你把網站搬到 Cloudways 主機 接下來，我們就快來看看， Gutenberg 編輯器，到底會對我們的網站，帶來什麼改變呢？ WordPress 5.0 預設搭載 Gutenberg 編輯器 Gutenberg 編輯器的快速展示影片 WordPress 很好用啊，為什麼要換編輯器？ Gutenberg 的精髓：區塊的概念 (Block) Gutenberg 可以插入什麼區塊呢？ Gutenberg 的三大特色：隨著情境而出現的設定區 Gutenberg 的三大特色：可以增加「重複使用的區塊」 Gutenberg 的三大特色：手機上也可以輕鬆使用 Gutenberg 與其他編輯器相容嗎？ Gutenberg 出現後，市場上會有什麼變化呢？ 升級到 WordPress 5.0，原本的文章會變怎麼樣？ 一定要使用 Gutenberg 編輯器嗎？ 升級到 WordPress 5.0 前要注意什麼嗎？ WordPress 5.0 什麼時候公佈呢？ 新的編輯器為什麼叫 Gutenberg？ Gutenberg 支援快捷鍵嗎？ Gutenberg 支援自定義內容類型嗎 (Custom Post Type)？ 原本的 Shortcode 短代碼還是一樣可以用嗎？                                                Gutenberg 會支援多個欄位嗎？ Gutenberg 會支援子區塊嗎？             …

兩天前才在 WordCamp 跟大家分享 Gutenberg 編輯器的最新動向，今天馬上來了大消息！果然是瞬息萬變啊… 就在昨晚，Elementor 公佈了他們與 Gutenberg 整合的新方式，現在可以把 Elementor 的樣板，直接以區塊的方式插入到 Gutenberg 編輯器裡了喔！ 他的操作方式非常簡單：1. 請先到 WordPress 外掛庫，安裝啟用「Elementor Blocks for Gutenberg」。2. 在 Gutenberg 裡面，直接選擇「＋」-> Elementor Block 3. 選擇你要加入哪一個樣板，還可以直接看得到預覽喔！ 之後，如果你想編輯樣板，可以直接點選「Edit Template with Elementor」的按鈕就可以了。 帶路姬對 Elementor 的做法的分析 如果在 WordCamp 演講中所說，其實我是很喜歡 Gutenberg 的，也很看好他未來一系列的計畫與轉變，雖然短時間內，使用者會有點不適應，但是，他的立意是好的，他其實不過就是在做 Elementor 之類的編輯器之前已經在做的事，如果 Elementor, WPBakery Page Builder 這類的編輯器都可以這麼受歡迎，表示「所見即所得」的需求與方向是正確的。 Elementor 選擇了配合 Gutenberg，讓大家使用 Gutenberg 來寫作，但是可以利用 Elementor「樣板」的功能來製作「客製化區塊」，造就了雙贏的局面，真的是非常聰明之舉！如此一來，使用者不用再被逼著二選一！ 在演講中，我有提到，有越來越多的「Block Package 區塊包」外掛的出現，就是為了能夠延伸 Gutenberg 沒有包含到的。Elementor 充分利用自己的優勢，讓大家自由搭配他們的各種內容元素，作成各式各樣的區塊，就不用在另外安裝一大堆其他的區塊包了。 帶路姬對 WPBakery Page Builder 的做法的分析 相較之下，我其實就比較沒有這麼喜歡 WPBakery Page Builder 的做法，他們的預設立場是，希望已經在用 WPBakery Page Builder 的人，就繼續使用，但是可以把 Gutenberg 編輯器視為一個元素，加到他們的編輯器裡。 乍看之下，好像是滿足了他們現有的客戶，但是，長期來看，如果 Gutenberg 越來越普遍時，尤其是 WordPress 5.0 發布後，Gutenberg 就必須是預設的編輯器時，所有的新手一定會學習 Gutenberg ，到時候使用 WPBakery Page Builder 的人會越來越少，學一個編輯器就夠了？誰想學兩個類似的呢？ 以上是我自己的個人感想。看到 Elementor 的消息，太興奮了！不小心話多了！?有空我再來整理一下上週日 WordCamp 的演講稿與簡報，分享給大家。 你喜歡帶路姬的教學與文章嗎？可以買杯咖啡來鼓勵我繼續分享喔！ 帶路姬也會不定期在粉絲頁發佈資訊喔！歡迎追蹤按讚粉絲頁。 你也在學習 WordPress 的途中嗎？歡迎來帶路姬的社團與大家交流。

讓我們來測試看看崁入 Facebook 的貼文的效果吧！ 只要貼入 Facebook 貼文的連結，Gutenberg 就會自動幫你崁入貼文成上面的樣子喔！ 你們可以按讚看看，還可以分享看看！可以直接互動真的很方便！ 而且，Gutenberg 不是只能崁入 Facebook，他總共能崁入35種不同的多媒體與社群資訊！ 我越用越喜歡啊… 離不開它了！謝謝 WordPress 的開發團隊！大家辛苦了～ ❤️

這是一篇完全用 Gutenberg 編輯器所寫的文章，以下是我在研究 Gutenberg 編輯器的過程當中，所蒐集到的一些資訊。雖然都是英文的，不過還是整理紀錄起來。10/21 的 WordCamp，我再跟大家分享我的心得喔！ Gutenberg 與其他編輯器的相容性 Beaver Builder https://kb.wpbeaverbuilder.com/article/588-how-beaver-builder-works-with-gutenberg Elementor https://elementor.com/blog/upcoming-elementor-v2/ Divi Builder https://www.elegantthemes.com/blog/theme-releases/divi-feature-update-introducing-initial-gutenberg-support Avada – Fusion Builder https://theme-fusion.com/documentation/avada/wordpress/avada-and-gutenberg-important-info-on-publishing-your-content/ WPBakery Page Builder https://visualcomposer.io/help/content-elements-structure/gutenberg-element/ 延伸Gutenberg：更多第三方的Blocks外掛 Advanced Gutenberg: https://tw.wordpress.org/plugins/advanced-gutenberg/ Atomic Blocks: https://tw.wordpress.org/plugins/atomic-blocks/ Stackable: https://tw.wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/ Bokez: https://tw.wordpress.org/plugins/bokez-awesome-gutenberg-blocks/ Editor Blocks for Gutenberg: https://tw.wordpress.org/plugins/editor-blocks/ Advanced Gutenberg Blocks: https://tw.wordpress.org/plugins/advanced-gutenberg-blocks/ Gutenberg 與其他外掛的相容性 Yoast SEO https://yoast.com/how-we-designed-yoast-seo-for-gutenberg/ https://yoast.com/yoast-seo-8-0-introducing-the-yoast-seo-gutenberg-sidebar-a-revamped-meta-box/ Gutenberg 的官方文件 Gutenberg 的設計理念 Gutenberg 的開發過程 Gutenberg 的常見問題 其他相關文章 WordPress 的歷史 (from WP Beginner) Matt Mullenweg discusses the past, present and future of Gutenberg Gutenberg and The Customizer Are The Future Of WordPress

WordPress 5.0 即將預設搭載Gutenberg 編輯器！Gutenberg 到底可以做些什麼？做出來是什麼樣子呢？快來預覽看看吧！