WordPress 5.0 相關問題

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

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

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

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

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

升級後舊文章怎麼辦

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

msCZWYEA9HNYLh Wfv Sy714jHyPwlU9JXjUG16pZmSR1IZH4lWUNNzAxR57ERa8Rho4 z0awbhLaQpLJaZ46RCF6jCTW JWEs65El2Rgm2bLEVX3n9xzWTwU6StedaPnFJB5E8y E4tpJuVdFy2BwbX8RjBLQ9em SQ6FcDYyagMQFU42CcHwMIeF8URp7Z3IF8sD8EfbMZvjkLqCdXkx3tKWenSS5ukYzvZ4wMncRcc4nMlw4qMXNoArVgneW yOgSnrCnasE4PJjWveKNGzc4NbCh5k61r9DY qIzK24Sers9pchfUP4PalhnWfwzzvnF3X1R4s5mDuw0ljdFH ig7MQzcaATPAl6YQCi10F1PYFShoYMDN558frGjYQKmk5wqcfFavXUCnseNXcT2VLkdgf2n8dOp5KXX4wsGNiXfVjRpZDSODCGiXjiJoQpru4IE7ybpRVuOR39m2 Ua8cNC17T2l5ZPKg98M6ljm JxIbLRwxjAxGnJiGWfOSOjFrXWDQZOXrvPOtb0F0Dg0Sg9y4X8BBMN0QqHV49TZKtRQEsQ5BNdcfHlmPHHOcA8x7D Bu EcVPfEU5RiYW0TchlDLJ9ECRnOdX5er0FUM a Ox5SroL0pSUCTvX7 pEcPcmaSxBXLwS4ZVXKgtgeAt=w407 h487 no WordPress 5.0 相關問題
Classic 區塊可以放置原始的文章內容
I3qHVEScYGCGiEmSedoo2XXlkxa8cVR9Qro5DknyjaWeBi4qCWo4ESi2od7JHg2O6Hj8z LBMiA D3camuWnCGDEqJntVHlUO NwPx66e sp2i1JGREg8ei4zMwy UHm2tbOfGG9m5X wihFcav32y8odnLJ7HGUKq38LBYNb3apfTh1 c7JvT4tu7SN tcXbi09kfal9ZdH7jzj zGrnwudNkwgpORvL1kB6q6M2ojcpUQDxx VC9AiLG 3v74am v0 gx6QcrtwoZ6478gawIGxOJpuXyGSu6f1WLY6NGdtaSayDPdVWcKtX0J73YZAaX0n4XlEXVxhZTW d82COu9 roRB9mS5rrICPrQIhgvp9UPi8KxFVwQ1eQbbd7fg2EHpVMwejOjtc5F1JtWaeEnps3mAv fHvHW95t0RYzWYrp9xQVn3L4XxpZkXTQ07zr8sxmSKR6ub9O5KI 7enY8upm9jpCGBhwDSq5bUHiEewG52XNiJAmGHcU2FhQ7DlOL6bJ0Af1HU troh964ZqB Is 5AXsAEbc024WnQOM6uQQDEumFD44NUmz6G3qou1JKU On8N t0zd S1 BencT3gMYFDHbzc0NEImhyuL1MHsr3cPvoq VD k6VJVgJIxSCS3YNKGrWS3o8JOXyp8=w637 h287 no WordPress 5.0 相關問題
舊的文章會自動通通放在一個 Classic 區塊中
0onqj I8Dx9HNHPZRrRy7e9Zkqb4o7EBS4Xw2ZpsdW0VWiPyLnbBk 7efiMLj8jU6UYo0ifSxn9py1oHhE cfsqf apVwdPmRF8UXmlhimONS7Gl0xISJRA8Q1UfpQh7lJV3dRCjd4C3l2YV7FF detVBKw7n0hIkDghpoPRmVUtF63wd2CmtKA1enG 0uSZfZj99qaMelCmsV6OrbbWSb CBs4XCVT8aQxeqYjQ Ln6bQQX5prV7bCWsfPc1Xvd44nDQ6VdcAqYQ4vfLlJ5O9jrzaP0 ngYmaiRasM qjqPKG2KS5fhj6SXh0VGzrOAtTzwxXv2VXhdhynNfHVF0xlEBWODzGGUVN7 GveQ0wM3HNgibMSLonMwFphOiU uoizgN3ktiAHWvT8YtzCKxUjDw4E0f1XnUSXd0D3CKq2o5t6G1VVzMhaHDUa BLh8vMq0xJiaSojlWRkAuBo6rohDQG0sXDzmKXtHjXo3z20iePYOSm WMK5O9HC28ObC4jAaxqPbDD4CFytB zDI3TnQqWg5X sjLuEojBq4v6UY1 DmwjNKWN6np44dUV3x7Vxk9JRnJGQxCLmvTJ10QhhSn2hWGfsFoWHqN8OxYcrmSF687xt8N6gLq7THbEIIc7pVf bqMRB4VMs1VUGTOZe=w635 h344 no WordPress 5.0 相關問題
點選編輯後,果然出現舊版編輯器的功能選單呢!

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

切換編輯器

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

WFtp Qda 2PIRZnS8WMYGL1WhTCrwcdjU3jkvkF MoQNIRfXhWqunlbf2nXSrWb5BZtZhyAEQam4fZawaO6L7AXFbn7RYu0878AquWdIL6F6oo4r4vZXxdeLb2ENd1mrM7UqMxh U62EIFElKyrOpXyWpYF u4K5YiBPGREGDrQKtNS4C7RPL6zip2V2vwgC3RPoCEx20jJqXKHj2OY6ByWejz2FkNCK iiYolHZOZOOfWyfAGlxKPo6wAZVyfl6BkmMTQ6 x5o 2p6gRmZDKjrbYQHR DqKwgXD8R0CdAIlPFAleOz52PqZovdyb7GBJIPEzgrAUtamK0Jyuo5SlO3FpbQ K534WtQEc5f eTZHGGsgajr0pcVGmrnX0pmg7OEPVsv6pcsmp6vuC3dVo6a06v3XgMt6fIyGffCXXzWOgu7Qk5JRwuf1vhzSPUqNXGMRICuIn mFaq3LnOwYn0DseplnjCNTnWzgzZkikhSY1CvlIoDtfvnK6OVcLwSoNnEBV2beM roXxKE6hB2dtfm6mzYpnsZ duQqTglZJJKreZcOAKTXHXr6qdp7jhZIpucJvC3okWSYBlvjLKSYKqcBnRJ23cogdcCgRMeI7Anb1C9A6HCHTECkb4Qe ylLPVmbnUsk4sjGtW27QW6bkQv=w635 h481 no WordPress 5.0 相關問題
文章部份多出預設編輯器(藍色)以及要用哪種編輯器開啟(紅色)

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

遇到的問題

SyntaxHighlighter Evolved 外掛

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

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

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

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

wuNMDUde0rT7Od5oVd74ziWkDjbTn0uL4 Ft0cr0GaMEHCWEB2kD2CSnBqmRXlXfv3jrG PqYS5OPMHXxhoWCjkOCHvLPKq7hkL2FC1gGCnAi IjzXq19oXOGYXhrVAkYJ3zo38hbuJJFLIyq1bEn2RJUVYAhy7gTOBeBpjGrB86onwa4Trmh1gJu9qFLNMRGk5Kef PxPJn8XlS2 9Qrn1htwdStzp62NBMWFnnnoU ghgCgqu5 IbtvH 2IFZepRR0bT5OXxt Bsw MJNIyZC8C45UAZxSa2efpZdNWw9 vUNO07iVH mDLL6HbM jgudwvC6YQbKHiFgfFymGrdnp0NMZkV0LkA2EjDxmW26obx8NUTgsD6aw70RUDiR31PIVx80aUAdTnzoFB7zRRLNYhqeVUCQgjEtuCKF5i7nuB6P0ai5c6nxsjX 7joHV1L6k fcC5xEjiOF TH3R wHsu 9p1PgnCVrLkP3NYuTa6Vtb4vuR2TdxyQ1zt0rtRQBQKc kcDnYfF6AfdM7ftjh7 fnU4vpYxSo4BqglC9wIP Sm2Vd576kep40I8lqxXfxMUCDcacZYWfApv7yg9oOCtL56XZNVhA6mzHjzvM7Z5QUMcSuqSGU09gpLbmFGb0OSUB vTAxxZT7gmOI=w623 h441 no WordPress 5.0 相關問題
外掛用法相同,差別是加入到 code 區塊中

Gutenberg 編輯器被區塊擋住

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

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

atBnDS2MRa8usHywMJg0YEf qwsQGp8mpy9dn0PKS7mlhlKGu9q3Qfikh0JwtFasQvDFc QWmgYhKSsNIC ZZ9CmXW8GVbTcU 17M 3mk6 sFsMV TMBtDdQPHS688R3lpHh86xKkVHVTakGBh KB GJ0IpVMBEkyos5X4A ircgAxex EsY02guVKjqq4v7B vrDHaJLOMQ1ygWPpRkctSJ7jqHZnP5S4rBimXruiOE8ShoS5STBnbGFLHOpmb5fTdrKNRtfo c2 JM3Uz83sMyt21xXbyUoJdhern3IJNVz1y2eQWF DZG 1WKJBVgyPKLksXr8VH RHOoYtGhdvpHNfkApigkYgUBGivXRuDyso epdXURAjnNhRKr9BtAIpinMWuGDCO47XMBEHPnohOV2RK0XYZmAevJIBULVuS0W42XycOurHxJ3kRpHZ0CUatNQF hFEzAcafr1lsKZvIZf8fdsE9ly0Bfql 5GrrdbLIXQXhx7lAsm4zW c029wcP3PE tBAqeUVzFBpe BR9aUK Jvm5HUIyiE227FpIuxpNbrqO6ZP0DlmyEXOpl98NbKaPSY NpR3SQzV3nc9kAvk3RDpfrtlxMkwd1iUC T1vwnPEErdN7VVCFB ZPdO5xA8EPiRvH yYEMWuGT1=w629 h300 no WordPress 5.0 相關問題
編輯的區塊在螢幕最下方,不能再往下捲動
No3YY1B0je5fZi2Q4PLX3lThGopIN67lBqAr571CmBqKVwH 19i1PPlS1sNVrNlGjX3oemuHm14eeZX3FAzeoHxC4l7s7lDwXiou 06EBe9nhNODDp7hc9OIjmTRbPuejglJUrKDo9x3MA2uxxSAUx0nwmWpd BfkuYkLuMQU8yFflpgh6oIAOk1fKalImSTckHpbi VxRzsil8f8yQVSvWcrFvOq IwffYalAEOZxbGQT7 gyp s80hA7IjfuuU5cAcy vNgHK 6u90ADkM3pGngdD753EFbpMtN0LzOhQyt4VcfTgS NaEEppw7EEHWN38YXf FSRlY2NaZ1ZV2rYMjBu69xi KRS6k0bJsnRutJExBKKw5ld5sfaANPvr6DU7Nt1MOQkLPXL vP4LlVsukN1Nf75f9X19bjXweApahRNkrSGwJgdEwoopxNJIqEPy070L7h31yFEd1dTetO3Lrjq5xYV9vtifMV2Vp kRxupoOS04v0ka8TlS31ybus2GlZMJPB pKGaCYfTtnJFNI JoXr iukyorvYYGeKR0Mg XC rrK5RgLXam8OJsMZwiIBM1SRPgkpTWYxoMA6Pq5UVtvXgBae08xbM5MAPsQ4ezeLR BE9o1TKKhe4J1PM0mru2X6IKo2gOtWsI8yD=w654 h637 no WordPress 5.0 相關問題
可以先多插入幾個空白區塊,之後再刪除

Content Blocks (Custom Post Widget) 外掛

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

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

WordPress 5.0 系列:

    發佈留言

    發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

    這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料