เพิ่ม Gutenberg Block ด้วยปลั๊กอิน Genesis Blocks

Genesis Blocks เป็นปลั๊กอินสำหรับเพิ่ม Block ให้กับ WordPress Block Editor หรือที่เรียกว่า Gutenberg ที่นอกจากเพิ่ม Block แล้ว ก็ยังจะมี Full Page Layouts ซึ่งก็คือหน้า Template ที่พร้อมใช้งานทั้งหน้า รวมถึงส่วน Section ที่พร้อมใช้งาน และยังรองรับ Google AMP (Accelerated Mobile Pages)

โดย Google AMP คือโครงการ Accelerated Mobile Pages (AMP) เป็นรูปแบบการเผยแพร่ที่สร้างโดย Google เพื่อเพิ่มประสิทธิภาพไซต์สำหรับผู้ใช้เว็บไซต์บนมือถือ หน้า AMP ได้รับการออกแบบมาเป็นพิเศษเพื่อให้ผู้ใช้ค้นหาของ Google สามารถโหลดหน้าเว็บไซต์ได้อย่างรวดเร็วโดยไม่ต้องใช้ข้อมูลที่ไม่เกี่ยวข้องใดๆ

Genesis Blocks เป็นปลั๊กอินจากผู้พัฒนา StudioPress ที่มีบริษัทแม่คือ WP Engine บริษัทเทคโนโลยี WordPress อันดับต้นๆของโลก ที่นอกจากจะผติสซอฟต์แวร์แล้วยังมีบริการอื่นๆอีกเช่น WordPress Hosting, WooCommerce Hosting และ Headless WordPress

โดยปลั๊กอิน Genesis Blocks ถือเป็นหนึ่งในปลั๊กอินเพิ่ม Block ให้กับ Gutenberg ที่ได้รับความนิยม มียอดดาวน์โหลดไปแล้วตั้งแต่เวอร์ชั่นแรกจนถึงปัจจุบันกว่า 1.2 ล้านครั้ง มีทั้ง Genesis Blocks เวอร์ชั่น Free และ Genesis Blocks เวอร์ชั่น Pro โดยมีราคาเดียวคือ $360 ต่อปี นอกจากนี้เมื่อซื้อ Genesis Blocks เวอร์ชั่น Pro จะสามารถเข้าถึงและสนับสนุน Genesis และธีมที่สร้างโดย StudioPress ทั้งหมดได้ ซึ่งไม่จำเป็นต้องใช้ Host ของ WP Engine ก็สามารถใช้ Genesis Blocks Pro ได้

Gutenberg Block ที่ Genesis Blocks เวอร์ชั่นฟรีให้มา

• Testimonial Block
• Profile Box Block
• Notice Block
• Drop Cap Block
• Spacer & Divider Block
• Call-To-Action Block
• Share Icons Block
• Post and Page Grid Block
• Container Block
• Pricing Block
• Newsletter Block
• Advanced Columns Block
• Section & Layout Block

และจะมี Full Page Layouts มาให้ 4 แบบ และ Sections อีก 8 แบบ

ส่วนใน Genesis Blocks Pro นั้นจะมี Gutenberg Block เพิ่มขึ้นมาให้อีก 2 Blocks รวมถึง Full Page Layouts มากกว่า 50 แบบ และ Sections Layout มากกว่า 130 แบบ

การติดตั้งปลั๊กอิน Genesis Blocks

ที่หลังบ้าน WordPress ไปที่ Plugins -> Add New Plugin

ที่หน้า Add Plugins ให้ใส่คำว่า Genesis Blocks ที่ช่อง Keyword

Install และ Activate ให้เรียบร้อย

อธิบายเมนูของปลั๊กอิน Genesis Blocks

เมื่อ Install และ Activate เรียบร้อยแล้ว จะเข้าไปตั้งค่าต่างๆของ Genesis Blocks ได้จาก -> Genesis Blocks โดยมีเมนูหลักทั้งหมด 3 เมนู

Getting Started

เป็นหน้าที่รวบรวมรายละเอียดทั้งหมดของปลั๊กอิน Genesis Blocks แบ่งออกเป็น 3 เมนูย่อย คือ

Genessis 101 – หน้าที่แสดง Gutenberg Block ทั้งหมดของ Genesis Blocks พร้อมลิงก์ Docs เพื่อเข้าไปดูสอนการใช้งานของแต่ละ Block

Collections

เป็นหน้าแนะนำส่วน Section และ Full Page Layout

Genesis Pro

เป็นหน้าแนะนำ Genesis Blocks เวอร์ชั่น Pro และมีลิงก์ที่จะพาไปยังหน้าซื้อปลั๊กอิน

Settings

เป็นหน้าสำหรับใส่ Mailchimp API Key เชื่อมต่อกับ Mailchimp account ที่ใช้ Newsletter Block เป็นต้วสร้างการสมัครจดหมายข่าวของเว็บไซต์

Migrate

เป็นหน้าแนะนำการย้ายข้อมูลจากปลั๊กอิน Atomic Blocks มาเป็น Genesis Blocks โดย ปลั๊กอิน Atomic Blocks เป็นของค่าย WP Engine ซึ่งได้ถูกยกเลิกการใช้งานไปตั้งแต่วันที่ 17 ธันวาคม 2023 และได้เปลี่ยนชื่อเป็น Genesis Blocks

Block และ Layouts ในหน้า WordPress Block Editor

เมื่อเข้าไปที่หน้า Add/Edit Post หรือ Page และคลิกที่ปุ่ม + เพื่อเปิด Left Menu ตรง Tab Blocks ก็จะแสดง Blocks ของปลั๊กอิน Genesis Blocks ที่พร้อมใช้งาน Block จะมีสีดำ

ที่แถบเครื่องมือด้านบนสุด ฝั่งขวา จะมีปุ่มที่เขียนว่า Layouts

เมื่อคลิกที่ปุ่ม Layouts จะเป็นการเปิด Popup ที่แสดง Layout Selector ของ Genesis Blocks ขึ้นมา โดยจะมีทั้ง Sections, Full Page Layouts

สรุป

Genesis Blocks ก็เป็นอีกหนึ่งปลั๊กอินที่ใช้เพิ่ม Block ให้กับ Gutenberg ที่ใช้งานง่ายและไม่หนักเครื่อง ถึงแม้ว่าจะให้ Block Gutenberg มาน้อยไปสักนิดเพียงแค่ 15 Blocks แต่ใน Genesis Blocks เวอร์ชั่น Pro ก็จะมีเพิ่มมาให้อีก 2 Block และยังมี Full Page Layouts มากกว่า 50 แบบ และ Sections Layout มากกว่า 130 แบบ จริงๆแล้วทาง Genesis ยังมีปลั๊กอินอีกตัวคือ Genesis Custom Blocks ซึ่งใช้สร้าง Block Gutenberg ขึ้นมาใช้เองได้ โดยปลั๊กอินตัวนี้ก็จะแนะนำในบทความถัดไป