ผมได้มีโอกาสเรียนคอร์ส 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 ได้เลยครับ
PATRAWI 