ในบทความนี้จะพูดถึงวิธีจัดรูปและ text ให้อยู่บรรทัดเดียวกันในบทความ ของ WordPress 5.0 Gutenberg ค่ะ สำหรับท่านที่เพิ่งเข้ามาอ่านบทความนี้ และยังไม่คุ้นเคยกับการใช้งาน WordPress เวอร์ชั่น 5.0 ขึ้นไป มลขอแนะนำให้ท่านอ่านบทความ การสร้างบทความสำหรับผู้เริ่มต้นใช้ WordPress นี้ก่อนค่ะ

ใน WordPress เวอร์ชั่น 5.0 ขึ้นไปนั้น เราสามารถทำให้รูปภาพและ text อยู่บรรทัดเดียวกันได้ง่ายๆ ด้วยการใช้บล็อกที่ชื่อว่า Media & Text ( ไฟล์สื่อและข้อความ ) ค่ะ

การใช้บล็อก Media & Text

1. คลิกเลือก Add block แล้วเลือก Layout Element ( ส่วนของเค้าโครง ) ดังรูป

2. คลิกเลือก Media & Text ( ไฟล์สื่อและข้อความ ) ดังรูป

3. เมื่อคลิกแล้ว เราจะเห็นหน้าตาบล็อก ดังรูปด้านล่างค่ะ
จะเห็นว่า ด้านซ้ายจะเอาไว้ใส่รูปภาพ ส่วนด้านขวาจะเป็น Content หรือ ข้อความ

4. ช่อง Content ที่ด้านขวา เราสามารถพิมพ์ข้อความได้เลยค่ะ ซึ่งระบบดั้งเดิมจะเป็นบล็อก Paragraph
นอกจากบล็อก Paragraph แล้ว เราสามารถเปลี่ยนเป็นบล็อกอื่นๆ ได้อีกค่ะ เช่น Heading, Group, List และอื่นๆ โดยคลิกที่ปุ่มรูปลูกศร ดังรูป

5. จากข้อ 4. เมื่อคลิกแล้วจะเป็น ดังรูปด้านล่างค่ะ
ในที่นี้ มลคลิกเลือก Heading เพื่อสร้างหัวข้อ ดังรูป

6. ในการเขียนบทความนั้น เรามักจะเขียนหัวข้อ และตามด้วยเนื้อหา หรือ content ของบทความ ในที่นี้ มลจึงเพิ่มเนื้อหาลงไปด้วย ดังรูปด้านล่าง

7. หลังจากนั้น เรามาใส่รูปภาพกันค่ะ โดยคลิกที่ปุ่ม Upload หรือ ปุ่ม Media Library ค่ะ
ปล. หากใครกำลัง งง ว่า จะคลิกปุ่มไหนดี? มลขอแนะนำให้อ่าน วิธีใส่รูปในบทความของ WordPress ก่อนค่ะ เพื่อทำความเข้าใจการใช้งานปุ่มต่างๆ ที่ใช้ใส่รูปภาพค่ะ^^

7. หลังจากนั้น เรามาใส่รูปภาพกันค่ะ โดยคลิกที่ปุ่ม Upload หรือ ปุ่ม Media Library ค่ะ
ปล. หากใครกำลัง งง ว่า จะคลิกปุ่มไหนดี? มลขอแนะนำให้อ่าน วิธีใส่รูปในบทความของ WordPress ก่อนค่ะ เพื่อทำความเข้าใจการใช้งานปุ่มต่างๆ ที่ใช้ใส่รูปภาพค่ะ^^

8. หลังจากใส่รูปภาพเรียบร้อยแล้ว จะแสดงผลดังรูปด้านล่างค่ะ

9. ทีนี้ เราลองไปดูการแสดงผลที่หน้าบ้านกันค่ะ โดยคลิกที่ปุ่ม Preview (ดูก่อน) ดังรูปด้านล่าง

10. ที่หน้าบ้าน จะแสดงผลดังรูปค่ะ

การตั้งค่าตำแหน่งข้อความ

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

1. คลิกที่รูปภาพเพื่อให้ระบบแสดงแถบตั้งค่า ดังรูปด้านล่างค่ะ

2. คลิกที่ปุ่ม Change vertical alignment เพื่อเปลี่ยนการจัดตำแหน่งของข้อความ ดังรูปด้านล่าง

3. จากนั้นเราจะเห็นการจัดตำแหน่งข้อความ 3 แบบ ดังรูปด้านล่างค่ะ

ได้แก่

• Vertically Align Top คือ จัดตำแหน่งแนวด้านบน หากคลิกเลือกข้อนี้ ข้อความจะอยู่ที่ตำแหน่งด้านบนของรูปภาพ ซึ่งจะแสดงผลดังรูปด้านล่างค่ะ

• Vertically Align Middle คือ จัดตำแหน่งแนวกึ่งกลาง หากคลิกเลือกข้อนี้ ข้อความจะอยู่ที่ตำแหน่งกึ่งกลางของรูปภาพ ซึ่งจะแสดงผลดังรูปด้านล่างค่ะ

• Vertically Align Bottom คือ จัดตำแหน่งแนวด้านล่าง หากคลิกเลือกข้อนี้ ข้อความจะอยู่ที่ตำแหน่งด้านล่างของรูปภาพ ซึ่งจะแสดงผลดังรูปด้านล่างค่ะ

การตั้งค่าตำแหน่งรูปภาพ

จากการแสดงผลที่หน้าบ้าน จะเห็นว่า รูปภาพอยู่ทางด้านซ้าย แต่ถ้าหากเราต้องการให้ตำแหน่งรูปภาพอยู่ทางด้านขวา ก็ให้คลิกที่รูปภาพ แล้วคลิกเลือก ปุ่ม Show media on right ดังรูปค่ะ

เมื่อคลิกแล้ว เราจะเห็นการเปลี่ยนตำแหน่งของรูปภาพ ดังรูปด้านล่าง

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