สร้างปุ่ม (Button) ในบทความอย่างไร

add button

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

วิธีสร้างปุ่ม (Button)

1. คลิกที่ปุ่ม Add block ดังรูป

image 5

2. จากนั้นพิมพ์คำว่า button ในช่อง “Search for a block” ดังรูป
** สำหรับท่านที่ใช้เว็บรูปแบบภาษาไทย ให้พิมพ์ว่า ปุ่ม ในช่อง “ค้นหาบล็อก” ค่ะ

image 6

3. ระบบจะแสดงบล็อกชื่อ button ขึ้นมา ให้คลิกที่ บล็อก button ดังรูป

image 7

4. บล็อก button จะมีหน้าตาดังรูปด้านล่างค่ะ
โดยตัวบล็อกจะมีช่อง 2 ช่อง ได้แก่

  • ช่องกรอกข้อความในปุ่ม เช่น อ่านต่อ, ดูทั้งหมด เป็นต้น
  • ช่องกรอกลิงก์ โดยกรอกลิงก์ที่ต้องการให้แสดงหลังจากมีการคลิกที่ปุ่ม เช่น ในหน้าข่าวสาร เมื่อคลิกที่ปุ่ม “ดูข่าวทั้งหมด” ก็จะแสดงลิงก์หน้าข่าวทั้งหมด เป็นต้น
image 8

5. ในที่นี้ จะทดลองสร้างปุ่ม ชื่อปุ่ม “ดูข่าวทั้งหมด” ดังรูปด้านล่าง

image 9

6. สามารถกำหนดสีปุ่ม และสีข้อความ ได้ที่แถบ Color Settings ดังรูป
ในที่นี้ กำหนดให้ ปุ่มเป็นสีฟ้า และ ข้อความเป็นสีขาว

image 10

7. กำหนดรูปแบบปุ่มได้ที่แถบ Styles ดังรูป
ในที่นี้ กำหนดให้ ปุ่มเป็นแบบ Fill

image 11

8. สามารถกำหนดความโค้งของหัวมุมของปุ่มได้ที่แถบ Border Settings ดังรูป
ในที่นี้ กำหนดค่าความโค้งเป็น 8

image 12

9. กำหนดการแสดงผลหลังจากคลิกปุ่มได้ที่แถบ Link settings โดยหากต้องการให้คลิกปุ่มแล้วเปิดแท็บใหม่ ให้เราคลิกที่ปุมหน้าข้อความ “Open in new tab” ดังรูป
ตัวอย่างในที่นี้ กำหนดให้คลิกแล้วเปิดในหน้าเดิม ดังรูป

image 13