WordPress 5.0 相關問題

黃小蛙 — Sun, 09 Dec 2018 04:21:03 +0000

WordPress 升級到 5.0 之後，除了加入了區塊(Block)的概念外，的確也遇到了一些問題，不過小蛙遇到的這些問題不大，些微修改一下就可以修正，這裡記錄小蛙升級後遇到的問題。

首先讓小蛙當初最擔心而遲遲不升級的原因為

原本編排好的 css 跑掉，或是舊文章跑版
外掛停擺
升級失敗後續處理的麻煩

相信這也是很多人遲遲不升級的原因，有些私人開發的外掛後續沒有辦法維護，往往造成升級之後這些好用功能的外掛不動了，常見功能的外掛還能找替代外掛，有些比較特殊功能的外掛就真的沒辦法了。

但是前一陣子發生一件事情讓小蛙不得不進行升級，很多軟體升級不外乎更好的使用者體驗、更好的效能、更多的功能，但最重要的是安全性，小蛙身邊就有一個 WordPress 的例子，該專案用很舊版本的 WordPress 開發，但後續沒人維護，因此一直維持舊版本運作著，孰不知該版本之前就已經有安全性問題而建議更新，就這樣當了箭靶，當在網路上的伺服器一暴露出自己的漏洞之後，排山倒海的攻擊隨即而來。

升級後舊文章怎麼辦

WordPress 不是笨蛋，自然也考慮到這個問題，Gutenberg 雖然以區塊為主，但是有一種區塊的類型叫做「Classic」，這個區塊就是保留傳統編輯器的內容，點一下會發現是以前熟悉的編輯器介面，而 WordPress 5.0 會將舊文章通通放進一個 Classic Block 裡面，當然前台也就能正常呈現囉！

Classic 區塊可以放置原始的文章內容

舊的文章會自動通通放在一個 Classic 區塊中

點選編輯後，果然出現舊版編輯器的功能選單呢！

不得不說 WordPress 這次的 Gutenberg 感覺真的不錯！

切換編輯器

如果，如果真的真的很不喜歡 Gutenberg 編輯器的話，還是可以安裝 Classic Editor (傳統編輯器) 這個外掛來切換回傳統編輯器，安裝完之後會發現文章或其他可編輯的頁面都變成這樣

文章部份多出預設編輯器(藍色)以及要用哪種編輯器開啟(紅色)

這麼一來就可以很方便地隨時切換 Gutenberg 跟傳統編輯器了。

遇到的問題

SyntaxHighlighter Evolved 外掛

小蛙對這個外掛有做 css 上的修改，升上 WordPress 5.0 之後，發生兩個問題，
不過有可能是小蛙自己把 css 改壞造成的

嵌入的 code 除了原始的黑背景之外，外面還更多了一塊 pre tag 的灰底
如果插入在一般 Paragraph 或是 Classic 區塊中，特殊字元會被跳脫

第一點大概調整一下，就可以正常呈現了，第二點如果不放在 code 裡面，是像 > 會變跳脫成「& gt;」，& 會變成「& amp;」，(Preformated 區塊也許也可以，但小蛙沒有測試，不確定行不行。

使用方式跟之前沒什麼兩樣，差別只在改把 shortcodes 插入到 code 區塊即可。

外掛用法相同，差別是加入到 code 區塊中

Gutenberg 編輯器被區塊擋住

小蛙剛升級進入編輯器的時候就發現怪怪的，舊版的時候這些區塊是在編輯器下方，升級上來之後這些原本被放在下方的區塊就會擋住原本的編輯器畫面，小蛙一度以為是 bug 想要放棄 Gutenberg 了，後來想想這些區塊也許可以拖曳，試了一下果然可以拖曳到右邊的功能表裏面放，拉過去之後就一切正常囉！

不過 Gutenberg 對小蛙來說有一個小小的問題，對有些人來說可能不是問題，就是編輯的區塊只能在最下方，但小蛙的比較習慣讓輸入的區塊在編輯器的中間部份，因此就要先在下方按出很多區塊，之後文章編輯完再把它們刪掉。

編輯的區塊在螢幕最下方，不能再往下捲動

可以先多插入幾個空白區塊，之後再刪除

Content Blocks (Custom Post Widget) 外掛

這個外掛本來是用來做上一篇提到的「Reusable Blocks」用的，Gutenberg 已經內建這個功能了，但因為某些特殊原因，小蛙還不能將這個外掛除役，進入要編輯的時候就發現 Gutenberg 沒有辦法正常進入編輯此外掛的內容。透過上面提到的切換編輯器，使用傳統編輯器來編輯這個外掛內容就可以正常使用了。

先記錄到這邊，後續發現問題再更新上來。

WordPress 5.0 系列：

這篇文章 WordPress 5.0 相關問題最早出現於記下來。

WordPress 5.0 區塊基本使用

黃小蛙 — Sat, 08 Dec 2018 12:19:11 +0000

接續上篇來寫 WordPress 5.0 使用心得，雖然升級上沒有發生任何問題，一下子就完成更新了，但是仔細看每篇文章，還是可以發現一些問題，這邊記錄一下使用心得跟小蛙更新後遇到的問題跟解決方案。

所有元素區塊(Block)化

更新之後首先最大的改變就是編輯器換成 Gutenberg，這個編輯器跟原本的編輯器概念上完全不太相同，小蛙一開始使用覺得有點麻煩 …

最大的變動就是這個 Gutenberg 編輯器了

以前的編輯器是使用一系列編排下來的方式，而 Gutenberg 整個改成以「區塊(Block)」為基本單位，一篇文章是由很多很多個區塊組合而成的，例如：閱讀更多、文章段落、圖片、列表 … 等，如果都是寫文章的話，感覺上不會有太大的差別，只要寫到分段，按下 Enter 就自動會切換到下一個段落。

操作區塊

新增

其他元素的話就不再是透過”格式”的轉換，而是加入一個”該格式的區塊”，小蛙這邊舉個例子好了，假設現在要插入一個列表功能，先點選左上角的+符號

加入清單「區塊」

接著可以看到多了一個區塊跟一個點，上方則會出現該區塊中的工具列，右方也會切換到該區塊中可以設定的屬性。

小蛙一開始還在想，如果是有特殊 class 的元件要怎麼辦，上面這張圖很清楚，右方直接就可以提供設定該區塊物件綁定的 class。

直接在編輯器中輸入文字，該區塊就會自動設定成 Paragraph 也就是段落，如果這時候要插入段落以外的元素，只要點區塊旁邊的 + 或是左上角的 + 就可以選取其他元素。

調整位置

如果發現中間少了一段或位置錯了，不用剪下貼上什麼的，只要拖著區塊旁邊的這個東西，就可調整位置或新增區塊，這一點小蛙真的覺得很方便。

點選上方的 Add block 可以插入一個段落或元素

左邊可以拖拉段落到正確的位置

刪除

上方最右邊的 … 工具列點下來有很多功能，只要停在要刪除的區塊中，點選「Remove Block」就可以刪除區塊了。

這個 … 工具列裡面有很多很有用的東西

Duplicate 可以快速複製一塊一模一樣內容跟設定的區塊
Insert Before, Insert After 可以在上方或下方新增一個新區塊
Edit as HTML 是讓該區塊以 HTML 的方式編輯
Add to Reusable Blocks 將該區塊儲存成可重複使用的區塊

第四點是一個非常方便的功能，如果有一些「系列文的連結」或是多篇文章中固定要呈現的內容，就可以透過這個功能來實現，以後如果內容有修改，只要修改這個區塊，所有包含這個區塊的文章都會跟著更改，真的非常方便喔！

在還沒有出現這個功能之前，小蛙是透過 Content Blocks (Custom Post Widget) 這個套件來做到這件事，現在 WordPress 5.0 的 Gutenberg 直接就包含了這個功能了，實在是太方便了！

接下來大概還會再記錄遇到的一些問題跟使用心得。