หากคุณใช้WordPress 5.0 ขึ้นไป นอกเสียจากว่าคุณจะเคยชินกับการใช้งานจริง คุณจะเคยได้ยินเกี่ยวกับการ อัปเดต Gutenbergที่รวมเข้ากับWordPressในเดือนธันวาคม 2018^{(December 2018)}อย่าง ไม่ต้องสงสัย

ดังนั้น หากคุณใช้ WP เวอร์ชันล่าสุด แสดงว่าคุณกำลังใช้Gutenberg อยู่แล้ว หรือใช้ตัวแก้ไขแบบคลาสสิกต่อไปโดยติดตั้งปลั๊กอินWordPress Classic Editor^{( WordPress Classic Editor plugin)}

ทำไมต้องกูเทนเบิร์ก?^{(Why Gutenberg?)}

ผู้ใช้ WP หลายคนยังไม่พร้อมที่จะกระโดด ขึ้นไป บนเกวียน Gutenberg^{(on the Gutenberg wagon)}แต่บางคนก็พร้อมแล้ว รวมถึงเว็บไซต์นี้ด้วย

สาเหตุบางประการที่คุณอาจต้องการใช้Gutenbergเป็นเพราะ:

• เป็นอนาคตสำหรับนักพัฒนา WP
• มอบประสบการณ์การใช้งานที่ดียิ่งขึ้น
• มีความยืดหยุ่นมากกว่าตัวแก้ไขดั้งเดิมของ WP ( TinyMCE )
• จะเป็นการเปิดตลาดใหม่สำหรับนักพัฒนา

อะไรคือความแตกต่างระหว่าง WordPress และ Gutenberg?^{(What Are The Differences Between WordPress & Gutenberg?)}

WP's Classic Editorเป็นโปรแกรมแก้ไขข้อความและดูเหมือนMicrosoft Wordมาก มีช่องแก้ไขเดียวตามที่เห็นในภาพหน้าจอด้านล่าง

Gutenbergเป็นตัวแก้ไขแบบบล็อกที่มีลักษณะดังนี้:

มีหลายบล็อกสำหรับเนื้อหาประเภทต่างๆ ที่มีตัวเลือกการจัดรูปแบบของตัวเอง บล็อกเช่น:

• ปุ่ม
• ภาพ
• ตาราง
• ฝัง
• รายการ
• แกลลอรี่
• เครื่องเสียง
• คำคม
• หัวเรื่อง
• รหัส
• กลอน
• HTML ที่กำหนดเอง

นอกจากนี้ ธีมและปลั๊กอินยังมีบล็อกและวิดเจ็ตให้คุณใช้ในโพสต์และเพจ WP มากขึ้น

เพจหรือโพสต์ที่มีอยู่ได้รับผลกระทบอย่างไร?^{(How Are Existing Pages Or Posts Affected?)}

หลังจากอัปเกรดและใช้Gutenbergแล้ว หน้าและโพสต์ที่มีอยู่ของคุณควรแสดงต่อไปอย่างถูกต้อง 

อย่างไรก็ตาม คุณควรตรวจสอบรหัสย่อของคุณและตรวจสอบให้แน่ใจว่าปลั๊กอินที่คุณอาจใช้อยู่นั้นใช้งานได้

เมื่อคุณแก้ไขเพจหรือโพสต์ที่มีอยู่ เพจนั้นจะเปิดขึ้นโดยอัตโนมัติในบล็อกคลาสสิกใหม่ของตัวแก้ไขGutenberg

คุณพร้อมที่จะเปลี่ยนหรือไม่?

ใช้ไซต์การแสดงละคร^{(Use a Staging Site)}

สิ่งสุดท้ายที่คุณต้องการทำคือทำลายไซต์ที่มีอยู่ วิธีที่จะหลีกเลี่ยงสิ่งนี้คือเปิดใช้งานGutenbergบนไซต์แสดง^{(a staging site)}ละคร นี่คือการจำลองเว็บไซต์ของคุณซึ่งคุณสามารถทดสอบสิ่งต่าง ๆ ได้โดยไม่สร้างความเสียหายให้กับเว็บไซต์ที่ใช้งานจริงของคุณ

ไซต์ทดสอบประกอบด้วยธีมปลั๊กอินตัวเลือก และเนื้อหาของคุณ บริษัทโฮสติ้งของคุณอาจเสนอไซต์การจัดเตรียม หากไม่เป็นเช่นนั้น คุณสามารถใช้ปลั๊กอินWordPress Staging^{( WordPress Staging plugin)}

หลังจากที่ไซต์การแสดงละครของคุณเริ่มทำงานแล้ว ให้ติดตั้งและเปิดใช้งานปลั๊กอิน Gutenberg^{( Gutenberg plugin)}และเริ่มการทดสอบ หรือติดตั้ง WordPress ใหม่เอี่ยมบนคอมพิวเตอร์ของคุณและทดสอบที่นั่น

ตรวจสอบปลั๊กอินของคุณ^{(Check Your Plugins)}

ผู้ใช้ WordPress คุ้นเคยกับสิ่งที่เกิดขึ้นเมื่อปลั๊กอินไม่เล่นด้วยกันได้ดี บางครั้งก็เกิดจากการทำงานหรือรหัสที่ขัดแย้งกัน นี่เป็นเวลาที่ยอดเยี่ยมในการดูว่าคุณกำลังใช้ปลั๊กอินทั้งหมดที่คุณติดตั้งไว้หรือไม่ หากคุณไม่ใช่ ให้ลบออก

คุณยังต้องการดูว่ามีการใช้ปลั๊กอินใดเมื่อคุณแก้ไขเนื้อหาในWordPress ปลั๊กอินเฉพาะ เช่นAkismetแบบ ฟอร์ม การติดต่อ 7 ^{(Contact Form 7)}Google Sitemap GeneratorและWP Super Cacheไม่มีส่วนเกี่ยวข้องกับโปรแกรมแก้ไข และจะไม่ได้รับผลกระทบจากการใช้Gutenberg

ในทางกลับกัน ปลั๊กอินใดๆ ที่เพิ่มฟังก์ชันการทำงานหรือเปลี่ยนรูปลักษณ์ของตัวแก้ไข WP classic อาจเข้ากันไม่ได้กับGutenberg โดยเฉพาะอย่างยิ่ง ปลั๊กอินที่สร้างรหัสย่อ เพิ่มสไตล์ที่กำหนดเอง หรือไม่ได้อัปเดตเมื่อเร็วๆ นี้ มักจะขัดแย้งกันและก่อให้เกิดปัญหา

Gutenbergเคยมีฐานข้อมูลความเข้ากันได้ของปลั๊กอิน ที่ใช้งานอยู่ ^{(Plugin Compatibility)}อย่างไรก็ตาม มันถูกปิดตัวลงเนื่องจากไม่ได้รับการดูแลอย่างแข็งขันอีกต่อไป

คุณสามารถตรวจสอบข้อมูลสุดท้ายและดาวน์โหลดฐานข้อมูล^{( download the database)}เป็นไฟล์CSV หากไม่มีการเข้าถึงฐานข้อมูลความเข้ากันได้ของปลั๊กอิน คุณจะต้องทดสอบแต่ละปลั๊กอินที่คุณใช้ด้วยตนเอง

ลองสร้างโพสต์ใหม่บนเว็บไซต์ทดสอบของคุณ คุณจะเห็นว่าคุณอยู่ใน โปรแกรมแก้ไข Gutenbergและจะดูแตกต่างไปจากคุณ เมื่อคุณเริ่มพิมพ์ คุณจะสร้างบล็อกย่อหน้าโดยอัตโนมัติ คุณไม่จำเป็นต้องเพิ่มบล็อกใหม่เมื่อคุณเพิ่มย่อหน้าใหม่ เพียงแค่^(Just)กด Enter หรือปุ่มย้อนกลับ

เนื่องจากคุณกำลังพยายามดูว่าปลั๊กอินปัจจุบันของคุณจะใช้งานได้หรือไม่ ให้ลองสร้างวิธีที่คุณใช้แต่ละอันใหม่และดูว่ายังใช้งานได้หรือไม่

หากไม่เป็นเช่นนั้น ให้มองหาฟังก์ชันเดียวกันใน บล็อก Gutenberg เริ่มต้น เพิ่มบล็อกนั้น และเพิ่มเนื้อหาของคุณ

ตรวจสอบให้แน่ใจว่าได้เก็บรายการของปลั๊กอินที่ทำงานไม่ถูกต้อง เพื่อให้คุณสามารถลบออกได้เมื่อใช้งานจริง กับ Gutenberg

จะเกิดอะไรขึ้นถ้าไม่มีการบล็อกเริ่มต้นสำหรับฟังก์ชันที่คุณต้องการ^{(What If There Is No Default Block For The Functionality You Need?)}

ตรวจสอบบล็อกทั้งหมดเพื่อดูว่าฟังก์ชันที่คุณต้องการอยู่ในบล็อกอื่นหรือไม่ หากคุณไม่พบสิ่งที่จะใช้งานได้ คุณสามารถติดต่อผู้เขียนปลั๊กอินและถามพวกเขาว่าพวกเขากำลังวางแผนที่จะอัปเดตเพื่อให้เข้ากันได้กับGutenbergหรือไม่

หากไม่สำเร็จ ให้ลองค้นหาปลั๊กอิน Gutenberg^{( Gutenberg plugin)}ที่ตรงกับความต้องการของคุณ ลบปลั๊กอินที่ใช้งานไม่ได้จากไซต์การแสดงละครของคุณ

กำลังถ่ายทอดสด^{(Going Live)}

ก่อนที่คุณจะดำเนินการใดๆ กับไซต์ที่ใช้งานจริงของคุณ ให้สำรองข้อมูลไซต์ทั้งหมดของคุณโดยสมบูรณ์ ในกรณีที่คุณพลาดบางสิ่งบางอย่างไปเมื่อตรวจสอบความเข้ากันได้หรือเกิดข้อผิดพลาดอื่นขึ้น

เป็นไปได้ที่จะทำการเปลี่ยนแปลงที่จำเป็นทั้งหมดบนไซต์ทดสอบของคุณและส่งไปยังไซต์จริงของคุณ อย่างไรก็ตาม สิ่งนี้ต้องการความรู้ด้านเทคนิค ดังนั้น เว้นแต่คุณจะเป็นนักพัฒนาซอฟต์แวร์หรือมีคนที่เหมาะกับคุณ ควรทำการเปลี่ยนแปลงด้วยตนเองจะดีกว่า  

เริ่มต้นด้วยการลบปลั๊กอินที่ใช้งานไม่ได้และเพิ่มปลั๊กอินใหม่ที่คุณพบว่าแทนที่ หากปลั๊กอินเก่ากำลังประมวลผลข้อมูลสำหรับโพสต์และเพจที่มีอยู่ และไม่ทำลายปลั๊กอินใหม่ คุณสามารถปล่อยให้ติดตั้งได้

คุณต้องการแปลงโพสต์และหน้าเก่าของคุณเป็น Gutenberg Blocks หรือไม่?^{(Do You Want To Convert Your Old Posts & Pages To Gutenberg Blocks?)}

เปิดแต่ละหน้าและโพส ต์จาก Classic Block Menu คลิก^(Click)จุดสามจุดเพื่อดูตัว^{(view options)}เลือก เลือกจากเมนูแบบเลื่อนลงแปลงเป็น^{(Convert to Blocks)}บล็อก

หลังจากที่ WP แปลงเนื้อหาของคุณเป็น ระบบบล็อก Gutenbergแล้ว คุณควรตรวจสอบแต่ละบล็อก ใช้บล็อกการนำทาง^{(Use Block Navigation)} (จากไอคอน) เพื่อดูทุกส่วนของโพสต์หรือหน้าของคุณ

ดังที่คุณเห็นในภาพหน้าจอด้านบน ย่อหน้า รูปภาพ รายการและหัวเรื่องทุกย่อหน้าอยู่ในบล็อกของตัวเองแล้ว การแปลงหน้าและโพสต์ที่มี อยู่เป็นระบบ Gutenberg ใหม่ นั้นรวดเร็วและง่ายดาย

อาจใช้เวลาหลายชั่วโมงในการทดสอบปลั๊กอินและค้นหาปลั๊กอินใหม่ แต่คุณต้องทำเช่นนี้เพียงครั้งเดียว ตรวจสอบให้แน่ใจว่าได้ทำตามขั้นตอนที่แนะนำข้างต้นเพื่อย้ายไปยังGutenbergโดยไม่เจ็บปวดและปราศจากข้อผิดพลาด

How To Transition From The Classic WordPress Editor To Gutenberg

If you use WordPress 5.0 and higher, unless you haνe been living under a rock, you will have υndoubtedly heard оf the Gutenberg update which was merged into WordPress in December 2018.

So if you are using the latest version of WP, you are either already using Gutenberg or have continued using the classic editor by installing the WordPress Classic Editor plugin.

Why Gutenberg?

Many WP users are not ready to jump on the Gutenberg wagon, but some are, including this website.

A few of the reasons why you might want to use Gutenberg are because it:

• Is the future for WP developers.
• Provides a better user experience.
• Is more flexible that WP’s original editor (TinyMCE).
• Will provide a new market for developers.

What Are The Differences Between WordPress & Gutenberg?

WP’s Classic Editor is a text editor and looks very much like Microsoft Word. It has a single editing field as seen in the screenshot below.

Gutenberg is a block-based editor that looks like this:

There are multiple blocks for different types of content that include their own formatting options. Blocks such as:

• Button
• Image
• Table
• Embeds
• List
• Gallery
• Audio
• Quotes
• Heading
• Code
• Verse
• Custom HTML

Also, themes and plugins offer more blocks and widgets for you to use in your WP posts and pages.

How Are Existing Pages Or Posts Affected?

After upgrading and using Gutenberg, your existing pages and posts should continue to display correctly. 

However, you should check your shortcodes and make sure that the plugins you might be using are working.

When you edit an existing page or post, it will automatically open in a single new Gutenberg editor classic block.

Are you ready to make the switch?

Use a Staging Site

The last thing you want to do is break your existing site. The way to avoid this is to activate Gutenberg on a staging site. This is an exact replica of your website where you can test things out without doing any damage to your live site.

Test sites include your theme, plugins, options, and content. Your hosting company might offer staging sites. If they don’t, you can use the WordPress Staging plugin.

After your staging site is up and running, install and activate the Gutenberg plugin and start testing. Or install a brand new instance of WordPress on your computer and test on there.

Check Your Plugins

WordPress users are familiar with what happens when plugins don’t play nice together. Sometimes it’s due to the functionality or conflicting code. This is an excellent time to see if you are using all the plugins you have installed. If you aren’t, remove them.

You also want to see which plugins are being used when you are editing content in WordPress. Specific plugins such as Akismet, Contact Form 7, Google Sitemap Generator, and WP Super Cache have nothing to do with the editor and will not be affected by using Gutenberg.

On the other hand, any plugin that adds functionality or changes the way the WP classic editor looks might not be compatible with Gutenberg. In particular, plugins that generated shortcodes, adds custom styles, or haven’t been updated recently, usually conflict and cause problems.

Gutenberg used to have an active Plugin Compatibility database. However, it has been shut down because it is no longer actively maintained.

You can review the final data and download the database as a CSV file. Without access to an active plugin compatibility database, you are going to have to manually test each plugin you use.

Try creating a new post on your test site. You will see that you are in the Gutenberg editor and it will look different to you. When you start typing, you are automatically creating a paragraph block. You don’t have to add a new block when you add a new paragraph. Just hit enter or the return key.

Since you are trying to see if your current plugins will work, try to recreate how you used each one and see if it still works.

If it doesn’t, look for the same functionality in the default Gutenberg block, add that block, and add your content.

Be sure to keep a list of the plugins that don’t work correctly so you can remove them when going live with Gutenberg.

What If There Is No Default Block For The Functionality You Need?

Check all the blocks to see if the functionality you need lives inside another block. If you can’t find something that will work, you can contact the plugin authors and ask them if they are planning to update it to be compatible with Gutenberg.

If all else fails, try to find a Gutenberg plugin that does what you need. Delete the plugins that don’t work from your staging site.

Going Live

Before you do ANYTHING to your live site, make a complete backup of your entire site in case you missed something when checking for compatibility or another error occurs.

It is possible to make all the necessary changes on your test site and push them to your live site. However, this requires some technical knowledge. So, unless you are a developer or have one that works for you, it is better to make the changes manually.  

Start by deleting the plugins that didn’t work and adding the new ones you found to replace them. If old plugins are processing data for existing posts and pages and do not break new ones, you can leave them installed.

Do You Want To Convert Your Old Posts & Pages To Gutenberg Blocks?

Open each page and post from the Classic Block Menu. Click the three dots to view options. Select from the drop-down menu Convert to Blocks.

After WP converts your content to the Gutenberg block system, you should review each block. Use Block Navigation (from icons) to see all the parts of your post or page.

As you can see in the above screenshot, every paragraph, image, list, and heading is now in its own block. Converting existing pages and posts to the new Gutenberg system is quick and easy.

It might take several hours to test your plugins and find new ones, but you only have to do this once. Make sure to follow the steps suggested above to make your move to Gutenberg painless and error-free.

Related posts

• บทช่วยสอน WordPress Gutenberg: วิธีใช้ตัวแก้ไขใหม่

• วิธีย้าย WordPress site จากโฮสต์หนึ่งไปยังอีก

• วิธีการติดตั้งและการตั้งค่าบน WordPress Microsoft Azure

• วิธีการรันอย่างรวดเร็ว WordPress บน Microsoft Azure

• วิธีการกำหนดค่า Privacy ใน WordPress และทำไมจึงเป็นสิ่งสำคัญ

• วิธีการติดตั้งธีมบน WordPress

• วิธีตั้งค่าเว็บไซต์ที่เหมือน Twitter ของคุณเองโดยใช้ธีม P2 ของ WordPress

• วิธีค้นหาการเข้าสู่ระบบผู้ดูแลระบบ WordPress ของคุณ

• วิธีสร้างบล็อก Wix ที่ดีพอๆ กับ WordPress

• วิธีการติดตั้งไซต์ทดสอบ WordPress บนคอมพิวเตอร์ของคุณ

• วิธีเพิ่มความเร็วไซต์ WordPress ใน 11 ขั้นตอน

• 7 เคล็ดลับ WordPress สำหรับเว็บไซต์ที่เป็นมิตรกับมือถือ

• รีวิวหนังสือ: สร้างเว็บไซต์ของคุณเอง: คู่มือการ์ตูนสำหรับ HTML, CSS และ Wordpress

• วิธีป้องกันหน้าด้วยรหัสผ่านบนเว็บไซต์ WordPress ของคุณ

• ผู้ใช้เปลี่ยนเส้นทางจาก 404 หน้า WordPress

• 11 สุดยอดปลั๊กอิน WordPress Podcast

• วิธีลบร่องรอยของปลั๊กอิน WordPress ทั้งหมด

• วิธีทำ WordPress Site Secure

• วิธีใช้ Lumen5 เพื่อเปลี่ยนโพสต์บล็อกของคุณให้เป็นวิดีโอ

• แสดงให้เห็นว่า WordPress HTTP Error เมื่ออัปโหลดรูปภาพ