ถึงแม้ว่า WordPress Block Editor หรือที่เรียกว่า Gutenberg จะมาพร้อมกับ Block พื้นฐานมากมาย ถ้าไม่เพียงพอก็ยังมีปลั๊กอินที่ใช้เพิ่ม Block Gutenberg ซึ่งมีค่ายผู้พัฒนาออกมาเยอะมาก มีทั้งแบบฟรีและไม่ฟรี อย่างไรก็ตามคุณอาจต้องการ Block ที่เฉพาะเจาะจงจริงๆ ที่อาจจะไม่มีให้เลือกทั้ง Block ของ WordPress เอง หรือจากปลั๊กอิน Block Gutenberg ก็ตาม
ในบทความนี้จะมาแนะนำการสร้าง Block Gutenberg ด้วยตัวเองสำหรับไว้ใช้งานใน WordPress Block Editor เพราะบางครั้งคุณอาจต้องการสร้าง Block ที่มีการใช้งานเฉพาะเจาะจงจริงๆ ซึ่ง Block ที่มีอยู่ใน WordPress หรือจากปลั๊กอินอาจไม่มีตัวเลือกที่เหมาะสมกับการใช้งานจริงๆ เพราะการสร้าง Block ขึ้นมาใช้เองนั้น สามารถเพิ่มคุณสมบัติและฟังก์ชั่นที่เหมาะสมกับการใช้งานกับเว็บไซต์ของเราโดยเฉพาะ
สำหรับปลั๊กอินที่จะมาใช้ในการสร้าง Block Gutenberg ก็คือ Genesis Custom Blocks จากผู้พัฒนา StudioPress ที่มีบริษัทแม่คือ WP Engine บริษัทเทคโนโลยี WordPress อันดับต้นๆของโลก ที่นอกจากจะผติสซอฟต์แวร์แล้วยังมีบริการอื่นๆอีกเช่น WordPress Hosting, WooCommerce Hosting และ Headless WordPress นอกจากนี้ก็ยังมีปลั๊กอิน Genesis Blocks ที่ได้เคยรีวิวไปแล้ว สามารถไปดูย้อนหลังได้ที่ -> เพิ่ม Gutenberg Block ด้วยปลั๊กอิน Genesis Blocks
คุณสมบัติเด่น
A Familiar Experience
ทำงานภายใต้ระบบของ WordPress ด้วย Interface ที่คุ้นเคยอยู่แล้ว
Block Fields
สร้าง Block จากรายการฟิลด์ที่มีอยู่ไปยัง Custom BLocks ของคุณ
Simple Templating
สร้าง Template ได้ง่ายด้วยการช่วยเหลือจากปลั๊กอิน Genesis Custom Blocks
Developer Friendly Functions
เป็นมิตรต่อนักพัฒนา ด้วย Editor ที่ใช้งานง่ายและยังมีฟังก์ชัั่นง่ายๆ ที่พร้อมแสดงผลและทำงานกับข้อมูลที่จัดเก็บผ่าน Custom
Block ของคุณ
โดยปลั๊กอิน Genesis Custom Blocks จะมีชุด Field ที่ใช้ในการสร้างฟังก์ชั่นการทำงานสำหรับ Custom Block มาให้ด้วยดังนี้
Currently available block fields
- Inner Blocks Field
- File Field
- Text Field
- Image Field
- URL Field
- Toggle Field
- Textarea Field
- Select Field
- Range Field
- Radio Field
- Number Field
- Multi-select Field
- Email Field
- Color Field
- Checkbox Field
ชุด Field ที่ให้มาเมื่อมีการสมัครสมาชิกและใช้งานร่วมกับ Genesis Blocks Pro
Genesis Custom Blocks Pro Features
- Repeater Field
- Taxonomy Field
- Post Field
- User Field
- Rich Text Field
- Classic Text Field
- Block Level Import/Export
- 24/7 Support
การติดตั้งปลั๊กอิน Genesis Custom Blocks
ที่หลังบ้าน WordPress ไปที่ Plugins -> Add New Plugin
ที่หน้า Add Plugins ให้ใส่คำว่า Genesis Custom Blocks ที่ช่อง Keyword
Install และ Activate ให้เรียบร้อย
อธิบายเมนูของปลั๊กอิน Genesis Custom Blocks
เมื่อ Install และ Activate เรียบร้อยแล้ว จะเข้าไปตั้งค่าต่างๆของ Genesis Custom Blocks ได้จาก -> Custom Blocks โดยมีเมนูหลักทั้งหมด 5 เมนู
All Blocks
เป็นหน้าที่แสดง Custom Blocks ทั้งหมดที่สร้างไว้ และสามารถเข้าไปแก้ไข Custom Blocks ได้จากที่นี่
Add New
เมื่อคลิกจะพาไปที่หน้าที่ใช้สร้าง Custom Blocks
Settings
เป็นหน้าที่ใช้เปิดใช้งาน analytics
Documentation
เมื่อคลิกที่ลิงก์จะพาไปหน้า Documentation ของ Genesis Custom Blocks
Genesis Pro
เป็นหน้าแสดงรายละเอียดของปลั๊กอิน Genesis Pro และ Field ที่เพิ่มขึ้นมาใช้งานร่วมกัน
อธิบายหน้า Add New ที่ใช้สร้าง Custom Block
ไปที่ Custom Blocks -> Add New เพื่อสร้าง Block ใหม่
ที่หน้า Add New ค่าเริ่มต้นจะของเมนูด้านบนจะเปฺ็น Builder จากน้ันให้พิมพ์ชื่อ Custom Block ที่ต้องการลงไปที่ Block title โดยชื่อนี้จะแสดงตอนที่เลือก Block ในหน้าสร้าง Post หรือ Page ด้วย Gutenberg จึงควรตั้งชื่อให้มีความหมายชัดเจน
ส่วนต่อมาเรียกว่า Block Settings อยู่ที่เมนูด้านขวา ใช้ในการกำหนดค่าของ Custom Block ที่สร้างขึ้น
1. Slug เป็นการตั้ง URL โดยปกติจะกรอกให้โดยอัตโนมัตินามชื่อ Block title ที่ตั้งไว้ โดยส่วนนี้จะมีความสำคํญในภายหลังเมื่อมีการสร้าง Block Template
2. Icon เป็นไอคอนที่แสดงเวลาเลือก Block ในหน้าสร้าง Post หรือ Page
3. Category สำหรับเลือกหมวดหมู่ของ Block เพื่อความเป็นระเบียบควรเลือกให้ตรงกับ Custom Block ที่สร้าง
4. Keywords ใช้ใส่ Keyword (สูงสุด 3 คำ) ทำให้ผู้ใช้สามารถค้นหาบล็อกของคุณได้ง่ายขึ้นในตัวเลือก Block ในหน้า WordPress Block Editor
5. Open block fields in a modal ติ๊กเลือกถ้าต้องการให้แสดง Custom block’s editor fields ในแบบ Modal (ภายในหน้าแก้ไข Post หรือ Page)
โดยตัวเลือกนี้มีประโยชน์หากคุณกำลังสร้าง Block ที่มี Editor Fields จำนวนมาก เนื่องจาก Modal ทำให้ผู้ใช้สามารถเพิ่มเนื้อหาลงใน Fleld ได้ง่ายขึ้น
6. Post Types ติ๊กถูกเพื่อให้ Block ที่สร้างนี้แสดงเป็นตัวเลือกเพื่อใช้งานในหน้าแก้ไข Post, Page หรืออื่นๆ เช่นในตัวอย่างมี Product เพราะมีการลงปลั๊กอิน WooCommere
ส่วนเพิ่ม Block Fields
Block Fields เป็นสิ่งที่จะแสดงเมื่อผู้ใช้เพิ่ม Block ที่คุณสร้างขึ้น เพื่อใช้งานในหน้า Post หรือ Page โดย Fleid สามารถกำหนดให้แตกตางกันตามที่สร้างได้ เช่น ถ้ากำลังสร้าง Button Block ก็สามารถใส่ Field สำหรับข้อความของปุ่มและ Url ได้
1. Field Location ใช้เลือกตำแหน่งที่ต้องการแสดง Field นี้ โดยมีตัวเลือก 2 ตัว
- Editor Fields แสดง Field ในหน้าแก้ไจของ Post หรือ Page
- Inspector Fields แสดง Field ในแถบ Block Inspector
2. Add Field ปุ่มคลิกเพื่อเพิ่ม Field ใหม่ให้กับ Block
ต่อมาเมื่อมีการเพิ่ม Field ใหม่ ก็สามารถไปกำหนดค่าต่างๆได้ที่ Tab Field ที่อยู่เมนูทางขวามือ
1. Field Label ใชัตั้งชื่อ Field ให้กับ Field โดยชื่อที่ตั้งจะแสดงถัดจาก Input Field เมื่อมีการเพิ่ม Block นี้ลงในหน้าแก้ไข Post หรือPage
2. Field Name (slug) เป็นการตั้ง URL โดยปกติจะกรอกให้โดยอัตโนมัตินามชื่อ Field Label ที่ตั้งไว้ แต่ก็สามารถแก้ไขได้เอง ส่วนนี้จะใช้ในโค้ด เวลามีการสร้าง Block Template
3. Field Type เลือกประเภทของ Field ซึ่งก็คือประเภทของ Input ที่จะแสดงต่อผู้ใช้เมื่อมีการเพิ่ม Block นี้ลงในหน้าแก้ไข Post หรือ Page
4. Field Location เลือกตำแหน่งที่จะแสดง Field
- Editor แสดง Field ในหน้าแก้ไจของ Post หรือ Page
- Inspector แสดง Field ในแถบ Block Inspector
5. Field Width เลือกว่าจะให้ Field มีความกว้างแค่ไหน
6. Help Text ใส่ข้อความแนะนำผู้ใช้ให้เข้าใจว่าควรป้อนข้อมูลใดลงใน Field เมื่อมีการเพิ่ม Block นี้ลงในหน้าแก้ไข Post หรือ Page
7. ตัวเลือกในข้อนี้จะแตกต่างกันไปขึ้นอยู่กับประเภทของ Field ที่เลือก เช่น กำลังเพิ่ม Field ข้อความเพื่อให้ตัวเลือกเพิ่มเติมที่แสดงในรูปภาพใช้กับ Field ข้อความนี้เท่านั้น ก็ไปกำหนดค่าที่ Default Value, Placeholder Text, and Character Limit
8. Delete ใช้ลบ Field ที่ไม่ต้องการ
9. Duplicate ใช้ Copy Field
รายละเอียดเกี่ยวกับการสร้าง Custom Blocks ด้วยปลั๊กอิน Genesis Custom Blocks นั้นค่อนข้างมาก เพราะจะมีส่วนที่เกี่ยวกับ Functions และ Filters ด้วย ซึ่งผู้ที่ต้องการสร้าง Custom Block ด้วยปลั๊กอิน Genesis Custom Blocks นั้นจะต้องมีความรู้และเคยใช้งาน HTML และ CSS มาก่อน โดยเฉพาะถ้าต้องการสร้าง Block Template ก็ควรมีความรู้ของภาษา PHP ด้วย รายละเอียดเพิ่มเติมสามารถเข้าไปดูได้ที่นี่ Get Started
ส่วนตัวอย่างการสร้าง Custom Block นั้น สามารถเข้าไปดูได้ที่หน้า Developer ของผู้พัฒนา -> Example Custom Block
สรุป
สำหรับผู้ที่ต้องการสร้าง Custom Blocks เอาไว้ใช้งานเอง ปลั๊กอิน Genesis Custom Blocks นอกจากจะใช้สร้าง Custom Blocks ยังสามารถสร้าง Block Template ได้ แถมยังใช้งานได้แบบฟรี แต่ว่าการสร้าง Custom Block ด้วยปลั๊กอิน Genesis Custom Blocks นั้นจะต้องมีความรู้และเคยใช้งาน HTML และ CSS มาก่อน ส่วนการสร้าง Block Template ก็ควรมีความรู้ของภาษา PHP เพื่อต้องมีการเขียน Function เพื่อทำงานร่วมกับ WordPress
Related Posts
