ผมได้มีโอกาสเรียนคอร์ส Web For Impact Batch 05 กับ Ad’Toy จาก Datarockie ซึ่งผมชอบแนวคิดที่ว่า เราควรที่จะมีเว็บไซต์เป็นของตัวเองไว้สำหรับเป็นบ้านที่แท้จริงเพื่อการแชร์ไอเดีย หรือเก็บบางสิ่งบางอย่างที่เรามองว่าเป็นทรัพย์สินของเรา ที่ไม่ใช่การไปอาศัยอยู่ใต้ชายคาของใคร อาทิ เช่น Facebook Page, Medium Blog, และ อื่นๆ อีกมากมาย

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

แนวคิดนี้ทำให้ผมตั้งสินใจสมัคร Paid Plan ของ WordPress เพื่อมาแชร์ไอเดียหรือสิ่งที่ผมได้เรียนรู้ในชีวิตประจำวัน (หยุดเขียนไปตั้ง 1 เดือนแหนะ แซดเวอร์ งานยุ่งไม่ไหว​)

จากการลองผิดลองถูกมา 3-4 โพสต์ ผมเลยอยากที่จะมาแชร์ 20 blocks ที่ผมคิดว่าจำเป็นสำหรับการรังสรรค์งานออกมาจากที่แอดทอยแนะนำในคอร์สและที่ผมลองหาดูเอง

ก่อนที่จะเข้าถึงเนื้อหาผมอยากจะบอกก่อนว่าในเนื้อหาที่จะพูดถึงแค่ประเภท block นะครับจะไม่ได้เจาะลึกว่าแต่ละ block มี toolbar ให้ใช้อะไรบ้างในส่วนนี้ท่านสามารถอ่านต่อได้ผ่านการคลิกตรงนี้ได้เลยครับ

Table of Content

---

• Basic Content Blocks
• Interactive & Layout Blocks
• Advanced & Specialty Blocks
• Workflow ในการวางโครงสร้าง Content

Basic Content Blocks

1. Paragraph Blocks

block ที่ใช้งานแทบจะเรียกว่าทุกๆ จุดของหน้าpost เพื่อการเขียนเนื้อหาบทความของทุกคน

2. Heading Blocks

block สำหรับการขึ้นหัวข้อใหม่ หรือว่า เนื้อหาพาร์ทใหม่ การใช้ heading block นั้นมีส่วนช่วยให้ผู้ใช้งานอ่านหรือเลือกหัวข้อได้ง่ายขึ้น และยังเป็นผลดีต่อเว็บไซต์ อีกด้วย ( search engines )

Shortcut: Heading block สามารถเพิ่มได้หลายวิธี เช่น พิมพ์​ # หรือ /h{1-6}

3. List Blocks

List blocks ใช้สำหรับการแสดงรายการ เพื่อจัดการ content ให้เป็นระเบียบยิ่งขึ้น โดยสามารถใช้สร้าง bulleted point หรือ numbered list ก็ได้

Shortcut: เราสามารถพิม์ /list หรือ พิมพ์ – เพื่อสร้าง bulleted point กับ พิมพ์ตัวเลขเพื่อสร้าง numbered list

4. Quote Blocks

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

Shortcut: /quote หรือ > เพื่อเรียกใช้งาน

5. Image Blocks

blocks สำหรับเพิ่มรูปภาพลงบนหน้าเว็บไซต์ของเราเพื่อใช้เป็นภาพประกอบบทความ แต่ก็มีข้อควรระวังนั้นคือเราควรเลือกใช้ภาพนามสกุล .webp เพื่อให้มีขนาดเล็กและโหลดเร็วซึ่งเป็นผลดีต่อเว็บไซต์

Shortcut: สามารถพิมพ์ /image

6. Gallery Blocks

block สำหรับใช้โชว์รูปภาพเหมือน Image Block แต่จุดแตกต่างกับ Image block ก็คือ gallery block สามารถโชว์ภาพได้มากกว่า 1 ภาพ เหมาะสำหรับใช้กับเว็บไซต์ อาหาร หรือ เว็บไซต์ช่างภาพที่ต้องการโชว์รูปซึ่งเป็นผลงานของเว็บไซต์ เราสามารถปรับจำนวน แถว และ หลัก ของ Gallery Block ได้ว่าอยากได้เท่าไหร่เพื่อให้เหมาะกับการแสดงผลบนหน้าเว็บไซต์

Shortcut: /gallery เพื่อใช้งานได้

ข้อควรระวัง

การใช้งาน Gallery Block มีประโยชน์อย่างมากในการจัดชุดภาพขนาดใหญ่ แต่ก็ควรระวังหากไฟล์ภาพมีขนาดใหญ่เกินไปซึ่งสามารถส่งผลต่อการโหลดภาพ แนะนำว่าภาพควรจะเป็นนามสกุล .webp เพื่อให้ได้ขนาดที่เล็กและโหลดเร็วเป็นผลดีต่อเว็บไซต์

7. Video Blocks

ใช้สำหรับการอัพโหลด วีดิโอ ใน หน้า page หรือ post เพื่อใช้สำหรับประกอบบทความหรือโฆษณา แต่ในการใช้ Video Block นั้นผู้ใช้งานต้องอัพเกรดเป็นเวอร์ชั่น Premium จึงจะสามารถใช้งาน block ดังกล่าวได้

Shortcut: /video

ใช้งาน เราจะมีตัวเลือก 3 options ได้แก่ Upload, Media Library, Insert from URL

• Upload: ใช้สำหรับการเลือก Video จากบนเครื่องของเรา
• Media Library: ใช้สำหรับการเลือก Video ที่อยู่บน WordPress
• Insert from URL: ใช้สำหรับการเลือกวีดิโอโดยการแปะ url ที่อยู่บนอินเทอร์เน็ตเพื่อใช้งาน
• การใช้ Video block นั้นเหมาะกับการที่เราจะดึงดูดความสนใจของผู้ใช้งาน แต่เราก็ต้องคำนึกถึงขนาดไฟล์และความเร็วอินเทอร์เน็ตของผู้ใช้งานไว้ด้วยเช่นกัน ไม่อย่างนั้นจะเป็นการไปลดประสบการณ์การใช้งานของผู้ใช้งานแทน

8. Table Blocks

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

Shortcut: /table

• หากต้องการสร้างตารางที่มีความซับซ้อนขึ้นเช่น สามารถ เรียงลำดับข้อมูล หรือแบ่งหน้าได้อาจจะมองเป็นการใช้ plugin เสริมอย่าง TablePress

9. File Block

block สำหรับวาง file ที่สามารถดาวน์โหลดได้ โดยไฟล์ดังกล่าวจะต้องเป็นนามสกุลที่ wordpress ซัพพอร์ทจึงจะสามารถอัพโหลดได้

Shortcut: /file

10. Audio Block

ใช้สำหรับการวางไฟล์ประเภทเสียงต่าง เช่น เพลง, พอดแคสท์, และอื่นๆ เพื่อประกอบบทความ

Shortcut: /audio

Interactive & Layout Blocks

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

11. Button Blocks

block สำหรับการสร้างปุ่ม เพื่อใช้ interact กับหน้าเว็บไซต์ โดยเราสามารถเพิ่มข้อความ ลิ้งค์ หรือตกแต่งได้ ตัวอย่างเช่น เราอยากให้เขาคลิ้กเพื่อออกไปหน้าเว็บไซต์อื่นๆ เป็นต้น

Shortcut: /button

12. Column Blocks

block สำหรับการจัดหน้า โดย block นี้สามารถเพิ่ม ข้อความ สื่อต่างๆ, และสามารถใส่ได้สูงสุด 6 columns ใน 1 แถว โดยเราสามารถเลือกได้ว่าจะเอากี่ column จากค่าเริ่มต้น

Shortcut: /columns

13. Cover Blocks

block สำหรับเพิ่มรูปภาพหรือวีดิโอที่สามารถเขียนข้อความบนภาพได้

Shortcut: /cover

14. Spacer Blocks

block สำหรับ เพิ่มช่องว่างระหว่าง block อื่นๆ ยกตัวอย่างเช่น หากคุณอยากได้ช่องว่างในแนวตั้ง ก็ใช้ vertical spacer และ ถ้าอยากได้ช่องว่างในแนวนอน ก็เรียก horizontal spacer

Shortcut: /spacer

15. Group Blocks

block สำหรับจับกลุ่ม block อื่นๆ เพื่อให้ง่ายต่อการจัดระเบียบ content บนหน้าโพสต์หรือเพจ โดยเราสามารถ ตั้งค่าพื้นหลัง, สี, ช่องว่าง ให้หลากหลายขึ้น

Shortcut: /group

16. Media & Text Blocks

block ที่เราสามารถวางไฟล์ภาพ หรือวีดิโอ พร้อมๆกับ ข้อความ ประกอบได้ ช่วยเพิ่มความชัดเจนให้กับวิดีโอที่จะสื่อได้ดียิ่งขึ้น เราสามารถตั้งค่าสีพื้นหลังและปรับตำแหน่งของข้อความ

Shortcut: /media

17. Embed Blocks

block ที่ให้คุณสามารถเพิ่มเนื้อหาจากแหล่งอื่นๆบนเว็บไซต์ของคุณได้ด้วยการวางลิ้งค์ใน block อย่างไรก็ตามเราต้องศึกษาเพิ่มเติมว่าเว็บไซต์ไหนบ้างที่อนุญาตให้เราสามารถเอาลิ้งค์จากเว็บเข้ามาแปะบนหน้าเว็บเราได้ เช่น YouTube, Spotify และ Twitter

Shortcut: /embed

Advanced & Specialty Blocks

18. Shortcode Blocks

block สำหรับใส่โค้ดไม่ว่าจะเป็น embed file หรือการสร้าง object บ้างอย่างที่ซับซ้อนได้

Shortcut: /shortcode

19. HTML Blocks

block ที่อนุญาตให้เราเขียน htmlได้โดยสามารถเขียน styling เองได้ตามใจ

Shortcut: /html

20. Query Loop Blocks

block ที่ใช้ในการลูป content บางอย่างที่มีลักษณะเป็นกลุ่ม เช่น โพสต์ของเราเป็นต้น โดยสามารถสร้าง template มาลองรับเพื่อให้ทุกอันแสดงผลเหมือนกัน

Shortcut: /query

Workflow ในการวางโครงสร้าง Content

สำหรับผมเวลาเอา content ที่เตรียมใน notion หรือ จาก notes ต่างๆ มาขึ้นใน wordpress ก็จะแบ่งตามนี้

• ใช้ heading block เพื่อแบ่งพาร์ท
• ใช้ paragraph block เพื่อเขียนเนื้อหา
• ใช้ image block หรือ video block เพื่อให้เห็นภาพมากขึ้นหรือเข้าใจง่ายขึ้น
• ใช้ spacer block เพื่อจัดหน้าให้ดูอ่านง่าย
• ใช้ code block ในการวาง code แทนการแคปหน้าจอ

จบกันไปแล้วนะครับสำหรับ 20 blocks ที่คุณควรรู้จักบน WordPress แล้วคุณละ ใช้ block ไหนบ่อยที่สุด หรือถ้าหากมีไอเดียหรือ block อะไรที่น่าสนใจสามารถแชร์กันได้ใต้ comments ได้เลยครับ

Reference

WordPress Documentation