02-01 รู้จักกับ Block Editor ว่ามีอะไรบ้าง?

Block Editor ที่มากับเว็บไซต์ให้ใช้งานมีอะไรบ้าง

1. Text เป็น Block ที่เกี่ยวกับการแสดงผลข้อความทั้งหมด

2. Media – เป็น Block ที่ใช้งานกับ Media ทั้งหมด เช่น ภาพ เสียง วิดีโอ

3. Design – เป็น Block ที่ใช้จัดการด้าน Design ของ Block

4. Widgets – เป็น Block ที่ใช้เรียกการทำงานของโมดูลใน WordPress

5. Embeds – เป็น Block สำหรับฝัง Link ของ Social Media

Text – เป็น Block ที่เกี่ยวกับการแสดงผลข้อความทั้งหมด

Paragraph ถ้าแปลตรงตัวก็คือย่อหน้า ก็คือ Block ที่เอาไว้ใส่เนื้อหาข้อความ โดยถ้าเรากด Enter จะเป็นการสร้าง Block Paragraph ใหม่

Heading หัวข้อเรื่อง มีให้เลือกตั้งแต่ H1 ถึง H6

List สร้างรายการ มีให้เลือกทั้งแบบ Bullet และตัวเลข

Quote จะมีการสร้างกรอบขึ้นมาสำหรับใส่เนื้อหาที่ต้องการเน้นหรือให้เห็นเด่นชัดกว่าข้อความทั่วไป

Code สำหรับแทรกเนื้อหาที่เป็นภาษาโค้ดต่างๆเช่น HTML PHP ใช้กรณีต้องการทำบทความประเภทสื่อการสอน

Classic ใช้ใส่ Editor แบบเก่าลงไปในบทความ

Preformatted ใช้ใส่เนื้อหาข้อความเหมือนกับ Block Paragraph แต่จะแตกต่างกันตรงที่ Block Preformatted จะสามารถกด Enter เพื่อขึ้นบรรทัดใหม่ได้ แต่ Block Paragraph ถ้ากด Enter จะเป็นการสร้าง Block Paragraph ใหม่

Pullquote จะคล้ายกับ Quote แต่ข้อความในกรอบจะมีขนาดใหญ่กว่าและสามารถใส่สีข้อความและสีของเส้นกรอบบนล่างได้

Table ใช้สร้างตาราง

Verse สำหรับใส่เนื้อหาประเภทที่ต้องมีการเคาะวรรค เช่นกลอน เนื้อเพลง เป็นต้น ไม่ว่าเราจะเคาะวรรคตรงไหนก็ตาม เนื้อหาก็จะแสดงออกมาตามที่เราต้องการ

Media – เป็น Block ที่ใช้งานกับ Media ทั้งหมด เช่น ภาพ เสียง วิดีโอ

Image สำหรับใส่รูปภาพลงใน Post

Gallery สำหรับใส่รูปภาพมากกว่า 1 ภาพ ลงใน Post โดยจะแสดงในแบบแกลลอรี่

Audio สำหรับใส่ไฟล์เสียงเช่น mp3, wma, flac

Cover ใส่รูปภาพหรือวิดีโอ โดยจะแตกต่างจาก Block Image ตรงนี้สามารถใส่ข้อความลงไปบนภาพได้ด้วย

File สำหรับอัปโหลดไฟล์เพื่อให้ผู้ใช้ดาวน์โหลดไฟล์นั้นๆ โดยจะมีปุ่ม Download ให้

Media & Text สำหรับแทรกไฟล์สื่อภาพหรือวิดีโอโดยจะมีช่องให้ใส่ข้อความด้านข้าง

Video สำหรับใส่วิดีโอ ได้ทั้งแบบอัปโหลดลงเว็บหรือเป็น Link

Design – เป็น Block ที่ใช้จัดการด้าน Design ของ Block เช่น Columns ใช้แบ่งส่วนของ Block ออกเป็นหลายๆ Columns

Buttons ใช้สำหรับใส่ปุ่ม โดยสามารถพิมพ์ชื่อปุ่มและใส่ URL Link ได้

Columns สำหรับแบ่ง Block ออกเป็นหลายคอลัมน์ โดยแบ่งได้มากสุด 3 คอลัมน์

Group ใช้สำหรับตั้ง Group เพื่อรวม Block หลาย Block เข้าเป็น Group เดียวกัน

More สำหรับใส่ข้อความ Read More ที่บทความ สามารถแก้ไขคำว่า Read More เป็นคำอื่นๆได้

*โดยข้อความ Read More จะไม่แสดงในหน้า Single Post แต่จะแสดงในหน้า Blog Homepage ของ WordPress

Page Break ใช้สำหรับแบ่งบทความออกเป็นหลายๆหน้า

Separator สำหรับใส่เส้นคั่นแนวนอน หรือก็คือคำสั่ง HR ในภาษา HTML นั่นเอง

Spacer สำหรับใช้เพิ่มช่องว่างระหว่าง Block ในบทความ

Widgets – เป็น Block ที่ใช้เรียกการทำงานของโมดูลใน WordPress เช่น Custom HTML สำหรับทำให้ Block ใช้ภาษา HTML ได้

Shortcode สำหรับใส่ Shortcode ในบทความ (การลง Plugin ที่สามารถใช้ Shortcode ก็จะได้ Shortcode ของ Plugin นั้นมาด้วย เช่น Contact From 7 เป็นต้น)

Archives สำหรับใส่คลังบทความ โดยจะโชว์ List เป็นเดือนและปีที่ลงบทความไว้

Calendar ใช้ใส่ปฏิทินลงในบทความ

Categories สำหรับแสดงหมวดหมู่ของบทความทั้งหมดของเว็บ

Custom HTML ใช้เขียน Code HTML ลงในบทความ โดย Code HTML ที่เขียนลงไปก็จะแปลจากภาษา HTML เช่น 123 เมื่อแสดงผลออกมาที่หน้าเว็บก็จะเป็นคำว่า 123 ตัวหนา

Latest Comments สำหรับแสดงความคิดเห็นล่าสุด (ถ้ามีการเปิดให้แสดงความเห็นได้)

Latest Posts สำหรับใช้แสดงบทความล่าสุดที่ลง โดยจะแสดงเป็นหัวข้อและสามารถเลือกได้ว่าจะแสดงจำนวนที่บทความ

RSS สำหรับดึง RSS Feed จากเว็บอื่นมาแสดง

Social Icons สำหรับใส่ Social Icons

Tag Cloud สำหรับใช้แสดง Tag ทั้งหมดที่มีของเว็บ

Search สำหรับใส่ช่องและปุ่มค้นหา โดยสามารถแก้ไข Placeholder ได้

Embeds – เป็น Block สำหรับฝัง Link ของ Social Media ต่างๆ เช่น Youtube, Twitter, Vimeo, Amazon Kindle ส่วนการแสดงผล นั้นก็แล้วแต่เนื้อหาของ Social นั้นๆ เช่น Youtube ก็จะเป็น Content ด้าน Video

การ Add Block

เมื่อเราคลิก All New เพื่อสร้างหน้า Page หรือ Post ใหม่นั้น ตัว WordPress Block Editor จะสร้าง Block Paragraph จำนวน 1 Block ให้โดยอัตโนมัติ การจะเพิ่ม Block ใหม่นั้นถ้าเป็นการเพิ่ม Block แรกถัดจาก Block Paragraph แรกที่ระบบสร้างให้นั้น ให้คลิกที่ไอคอนรูป + สีน้ำเงินที่บริเวณมุมซ้ายบน

ต่อมาเมื่อจะเพิ่ม Block อีก สามารถเพิ่มได้จากสองจุดคือ ไอคอนรูป + สีน้ำเงินที่บริเวณมุมซ้ายบนและไอคอนรูป + สีดำที่ใต้ Block ล่าสุด

เมื่อคลิกปุ่ม Add Block แล้ว หน้าจอก็จะขึ้น Popup แสดง Block ทั้งหมดที่มีสามารถกดที่ชื่อ Block นั้นๆ หรือจะพิมพ์ชื่อค้นหาจากช่อง Search ก็ได้

การ Delete Block

ให้เลือกที่ Block ที่ต้องการลบ แล้วคลิกที่บริเวณ จุดสามจุด แล้วเลือก Remove Block

การตั้งค่า Block

แต่ละ Block นั้นจะมีการตั้งค่าที่ไม่เหมือนกัน ปรับเปลี่ยนไปตามประเภทของ Block

แท็บเมนูด้านบนของ Block จะใช้ตั้งค่าเลื่อนตำแหน่ง Block ขึ้นลง ถ้าเป็น Block ประเภท Text ก็จะสามารถใส่ตัวหนา เอียง ลิงก์ จัดตำแหน่ง Align Text

แท็บเมนูด้านขวาของ Block ตรงนี้จะเป็นส่วนที่ใช้ตั้งค่าหลักๆของ Block นั้นๆ เช่นถ้า Block ประเภท Text ก็จะปรับขนาด Font รวมถึงใส่สีให้ข้อความ พื้นหลังของ Block ได้

Reusable Blocks – คือการบันทึก Block ที่เราใช้บ่อยๆ เป็น Template เอาไว้ เพื่อความสะดวกในการเลือกใช้ซ้ำ จะไม่ได้ต้องตั้งค่าซ้ำๆอีก วิธีการทำได้โดยการคลิกที่ จุดสามจุดของ Block ที่ต้องการและเลือกที่ Add to Reusable Blocks และเราสามารถตั้งชื่อ Reusable block ได้จากที่แท็บเมนูด้านขวาของ Block จากนั้นคลิกที่ปุ่ม Publish แล้วติ๊กถูกเฉพาะ Reusable block ที่ตั้งชื่อไว้

การเรียกใช้งาน Reusable Blocks ทำได้โดยคลิกที่ Add Block แล้วเลือกที่แท็บ Reusable ก็จะแสดง Reusable Blocks ที่เราบันทึกไว้

นอกจากนี้ยังสามารถดู Reusable Blocks ทั้งหมดที่เคยสร้างไว้ได้โดยคลิกที่ Manage all reusable blocks โดยเราสามารถแก้ไข ลบ Reusable Blocks ได้จากหน้านี้

แนะนำ Block ที่ใช้บ่อยๆ

โดยทั่วไปแล้วมีประมาณ 5 Block ที่เป็นพื้นฐานที่ไม่ว่าจะลงเนื้อหาแบบใดก็ล้วนต้องใช้ทั้งสิ้น

1. Paragraph เป็น Block สำหรับใส่เนื้อหาข้อความทั่วไป สามารถกำหนดตัวหนา เอียง ใส่ลิงค์ ใส่สีข้อความ พื้นหลัง และจัดตำแหน่ง ซ้าย กลาง ขวาได้

2. Heading เป็น Block สำหรับใส่หัวข้อ มีตั้งแต่ H1-H6 (ภาษา HTML) การตั้งค่างๆก็คล้ายกับ Paragraph Block แต่จะมีสิ่งที่เพิ่มเติมเข้ามาก็คือใส่ HTML anchor เพื่อเชื่อมโยงหัวข้อไปยังส่วนต่างๆของหน้าบทความได้

3. List เป็น Block สำหรับสร้างรายการโดยใส่ได้ทั้งแบบ Bullet และตัวเลข List Block นี้โดยปกติจะไม่มีการตั้งค่าใดๆเพิ่มเติม แต่ก็สามารถกำหนดตัวหนา เอียง ใส่ลิงค์ ใส่สีข้อความ พื้นหลัง ได้เหมือน Paragraph Block

4. Image ใช้แสดงรูปภาพ โดยเลือกได้ทั้งการอัปโหลดจากคอม เลือกจากคลังภาพในเว็บ หรือใส่ Link ภาพ สามารถำหนดขนาด Width Height ของภาพที่จะแสดงได้

5. Spacer สำหรับใช้เพิ่มช่องว่างระหว่าง Block สามารถกำหนดขนาด Height ของ Spacer ได้โดยมีค่าเป็น Pixels

แนะนำแถบไอคอนด้านบนของหน้า Add New

ด้านซ้ายบน

1. ปุ่ม Add Block
2. ไว้สลับโหมดของแท็บเมนูด้านบนของ Block มีสองโหมดคือ Edit คือแก้ไขได้, Select คือแก้ไขไม่ได้ โดยปกติค่าเริ่มต้นจะเป็น Edit
3. Undo เลิกทำคำสั่งล่าสุด และ Redo ทำซ้ำคำสั่งล่าสุด แต่คำสั่ง Redo ต้องมีการกด Undo ก่อนอย่างน้อย 1 ครั้ง ถึงจะกด Redo ได้ ซึ่งก็จะเป็นการย้อนคืนคำสั่ง Undo นั้นเอง
4. Details แสดงรายละเอียดว่าหน้านั้นๆมีกี่ Block
5. Live View โชว์ว่าหน้านั้นๆมี Block อะไรอยู่บ้าง จะแสดงในลักษณะเรียงกันลงมา

ด้านขวาบน

1. Save Draft ปุ่มเซฟเป็นบันทึกร่าง กรณียังไม่พร้อมจะเผยแพร่
2. Preview สำหรับดูหน้าตัวอย่าง
3. Publish กดเพื่อเผยแพร่ Post
4. Settings สำหรับแสดงหรือซ่อนเมนูตั้งค่าทางด้านขวาทั้งหมด
5. Options ตั้งค่าพื้นฐานของ Blog Editor รวมถึง Plugin ที่เกี่ยวข้องกับ Block Editor ที่มีการลงเอาไว้

นอกจากนี้ในส่วนของ Options (จุดสามจุด) ยังสามารถตั้งค่าอื่นๆที่น่าสนใจ เช่น

• เปิด-ปิด Fullscreen mode (ค่ามาตรฐานของ Block Editor คือเปิด)
• สลับโหมด Editor จาก Visual Editor เป็น Code Editor ได้

เมนูด้านขวาของ Post หรือ Page

Status & visibility : ตั้งค่าการแสดงผล สามารถการตั้งเวลาในการเผยแพร่ได้
Permalink : เป็น URL Slug ของ Post หรือ Page จะถัดจากชื่อโดเมน เช่น youdomain.com/…
Categories : หมวดหมู่ของ Post (ถ้าเป็น Page จะไม่มีหมวดหมู่)
Tags : แท็ก ของ Post (ถ้าเป็น Page จะไม่มีหมวดหมู่)
Featured image : ภาพหน้าปกของ Post
Excerpt : คำเกริ่นนำของ Post
Discussion : เปิดหรือปิดให้แสดงความเห็นใน Post ได้