Gutenberg เอดิเตอร์ตัวใหม่จาก WordPress

WordPress and Digital marketing

สอน wordpress ใช้ Gutenberg

เวลาคุณเขียนโพสต์หรือเพจ คุณมีทางเลือกสองอย่างคือใช้เอดิเตอร์ที่มากับ WordPress กับเลือกใช้ layout editor ดีๆสักตัว อย่างเช่น King Composer, Live Composer หรือ Elementor เอดิเตอร์มาตรฐานที่มากับ WordPress จัดเลย์เอาท์ได้ยาก แนว composer ถึงแม้จะสร้างลูกเล่นได้มากมายแต่ก็ดูรุงรังและบางครั้งก็อืดเวลาจะสร้างหรือแก้ไขโพสต์หรือเพจ

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

หน้าตา Gutenberg

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

สอน wordpress การใช้ gutenberg
หน้าตาของ Gutenberg

จะเห็นว่าดูสะอาดตากว่าเอดิเตอร์ตัวเดิม ถ้าคุณมีเอดิเตอร์ตัวอื่นๆอยู่ด้วยก็ยังใช้ได้ ปกติผมใช้ King Composer ร่วมกับ Elementor ตัวแรกยังใช้ได้ (หมายถึงสวิทช์ไปได้) ส่วน elementor สวิทช์ไม่ไป

มีเลย์เอาท์แบบบนลงล่างเรียกว่า block

หลักการของเอดิเตอร์ตัวนี้คือมอง paragraph เป็น block เวลาจะสร้าง block ให้กดเครื่องหมาย + ที่มุมซ้ายบน แต่ละ block เราอาจใส่ข้อความซึ่งถือเป็น paragraph หรือ หัวข้อย่อย หรือรูปภาพ ถ้าต้องการใส่ element อื่นก็ให้กดเครื่องหมาย + ที่ด้านซ้ายของแต่ละบรรทัด แล้วเลือก element ที่ต้องการ เวลากด enter มันจะสร้าง block ขึ้นมาให้หนึ่งอันโดยอัตโนมัติ

ถ้าเป็น intro ก็พิมพ์เนื้อหาหลังเครื่องหมาย + (ด้านซ้าย)ได้เลย ซึ่งจะถือเป็น block ที่เป็น paragraph โดยอัตโนมัติ เขียนเสร็จก็กด enter ก็จะเกิด block ใหม่ แล้วก็เขียนต่อไปอีกหนึ่งย่อหน้าหรือ paragraph

เวลาเขียนโพส์ตตามหลัก SEO ก็ควรจะเขียนเป็นชั้นๆคือมีหัวข้อใหญ่แล้วก็หัวข้อย่อย จาก H1, H2, H3 ไปเรื่อยๆ H1 สงวนไว้สำหรับ title อยู่แล้ว ถ้า content ของเรามีหัวข้อย่อยก็ควรเริ่มต้นด้วย H2 ถ้าภายใน H2 มีหัวข้อย่อยก็ควรจะเป็น H3 ไล่ลงไปอย่างนี้เรื่อยๆ เมื่อต้องการเขียนหัวข้อก็ให้กด Add Heading

คลิกเลือกระดับของ H แล้วพิมพ์หัวข้อได้เลย

ส่วนปุ่มสองปุ่มที่ถัดจาก H ก็สำหรับใส่รูปและ shortcode ลงไปใน block ตามลำดับ

องค์ประกอบอื่นๆ

สังเกตว่าที่ด้านซ้ายชองแต่ละ block จะมีเครื่องหมายขึ้นลงใช้สำหรับเลื่อน block นั้นๆขึ้นบนหรือลงล่าง นี่เป็นสาเหตุที่เขาออกแบบให้จัด paragraph, image, header หรือ element ใดๆเป็น block จะได้สะดวกในการเลื่อน

ลองเอาเมาส์วางที่ขอบของ block จะเห็นเครื่องหมาย + ปรากฏตรงกลางใช้สำหรับแทรก block เข้าไป สะดวกไหมครับ

นอกจากที่แถบขวาบนจะมีปุ่ม H, image, shortcode อำนวยความสะดวกเวลาเขียนโพสต์แล้ว (เพราะเรามักจะวนเวียนกับสามสิ่งนี้เวลาเขียน) ถ้าเราต้องการให้ block นั้นบรรจุ element อื่นๆก็กดเครื่องหมายบวกด้านซ้าย ซึ่งก็จะขึ้น element  อื่นๆให้เลือก

ก็จะมีตัวอื่นๆให้เลือก ที่น่าสนใจคือ Columns (ยังเป็น beta) เอาไว้ใช้จัดเป็นคอลัมภ์เหมือนกับ composer ทั่วไป ตัวนี้จัดได้สองคอลัมภ์

แล้วก็กด + เพิ่ม element ลงไปในในแต่ละคอลัมภ์ ตัวอย่างก็ตามนี้

นี่เป็นข้อความทางขวา

นี่เป็นข้อความทางขวา

นี่เป็นข้อความทางขวา

ผมลองดูแล้วจัดภายในแต่ละคอลัมภ์ใส่ element จัดสองคอลัมภ์นี้ซ้อนลงไปได้อีก แต่ไม่ค่อย work เท่าไหร่ แนะนำให้ใช้แค่สองคอลัมภ์ดีกว่า เพราะยังเป็น beta อยู่ คุณอาจจะถามว่าแล้วมันจะสู่ composer ได้อย่างไง คำตอบคือมันสู้ไม่ได้ครับ อย่างที่ผมบอกตอนแรกว่ามันอยู่ตรงกลางระหว่างเอดิเตอร์มาตรฐานของ WordPress กับ composer เหมาะสำหรับคนที่เห็นว่า composer รกรุงรัง แต่เอดิเตอร์เดิมของ WordPress ก็พื้นๆไป ถ้าคุณรู้สึกอย่างนั้น (คล้ายผม) ตัวนี้ก็ work ผมเอามาใช้บางโพส์ตแต่ composer ก็ยังใช้อยู่

ก่อนจบก็มีสามจุดมุมขวาบน

อันนี้ก็สำหรับลบ block เป็นหลัก อื่นๆก็คงพอเดาออกนะครับ Block Settings ก็สำหรับองค์ประกอบอื่นๆที่มีอยู่ในเอดิเตอร์แบบเดิม เขาเอามารวมไว้ตรงนี้

อ้อเกือบลืม ถ้าต้องการเปลี่ยน slug ต้องไปทำที่ Posts->All Posts หรือ Pages->All Pages แล้วกด Quick Edit ที่โพสต์(หรือเพจ)ที่เป็น Gutenberg แล้วกด Update ในเวอร์ชั่นใหม่ถ้าต้องการแก้ slug ก็คลิกที่ไตเติ้ลแล้วใส่ slug ใหม่ได้เลย

ใช้ดีหรือไม่ใช้ดีก็ตามแต่สะดวกครับ แต่มาแน่ๆในเวอร์ชัน 5 ใครที่เขียนโพสต์บ่อยๆและต้องการความสะดวกมากกว่าลูกเล่นก็น่าลองเล่นดูครับ