ใส่รูป (Image) บทความใน WordPress 5.0 ต้องทำอย่างไร

image block feature image

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

ใน WordPress เวอร์ชั่น 5.0 ขึ้นไป เราสามารถใส่รูปภาพได้ง่ายๆ ด้วยการสร้าง image block ค่ะ โดยเลือก Add block แล้วเลือก Image ดังรูปค่ะ ( ปล. หากใครหาไม่เจอ ลองพิมพ์คำว่า Image ในช่อง Search for a block นะคะ )
click at image block

เมื่อคลิกเลือกแล้ว จะมีหน้าตาดังรูปด้านล่างค่ะ โดยระบบจะมีช่องทางในการใส่รูปให้ 3 ช่องทาง หรือ 3 ปุ่ม ได้แก่

  1. ปุ่ม Upload เป็นปุ่มที่เราจะคลิกเพื่ออัปโหลดรูป ในกรณีที่ รูปที่ต้องการใส่ยังไม่เคยมีในเว็บ หรือ Library ค่ะ
  2. ปุ่ม Media Library เป็นปุ่มที่เราจะคลิกเพื่อเลือกรูปจาก Library ในกรณีที่ มีรูปที่ต้องการในเว็บ หรือ Library อยู่แล้ว
  3. ปุ่ม Insert from URL เป็นปุ่มที่เราจะคลิกเพื่อใส่ลิงก์รูป ในกรณีที่ ต้องการใส่รูปด้วยลิงก์รูปของเว็บอื่นค่ะ
    image block

ในกรณีที่เราคลิกปุ่ม Media Library เพื่อหารูปที่เคยอัปโหลดไว้ในเว็บ แต่ปรากฎว่า หารูปไม่เจอ หรือ เราเผลอไปลบรูปตั้งแต่เมื่อไหร่ไม่รู้แล้วดันจำไม่ได้ เราก็ยังสามารถอัปโหลดรูปใหม่เข้าไปได้ค่ะ เพราะเมื่อคลิกปุ่ม Media Library แล้ว ระบบจะมีแท็บ 2 แท็บ (หน้าตาจะเหมือนกับ WordPress เวอร์ชั่นเก่าที่เราคุ้นเคยเลยค่ะ) ให้เราเลือกใช้งาน ดังรูปด้านล่างค่ะ
after click at Media Library button

สำหรับปุ่ม Insert from URL เมื่อคลิกที่ปุ่มแล้ว จะมีหน้าตาดังรูปด้านล่างค่ะ โดยเราสามารถเอาลิงก์รูปภาพมาใส่ในช่อง Paste or type URL” ได้เลยค่ะ จากนั้นคลิกที่ปุ่ม Apply ดังรูปค่ะ
after click at Insert from URL button

เช่น มลจะใส่รูปโลโก้ของ webnocode ด้วยลิงก์ https://webnocode.com/logo-home-webnocdoe.png ( ลิงก์นี้ เป็นการยกตัวอย่างนะคะ ) เมื่อใส่ลิงก์ และ คลิกปุ่ม Apply เสร็จแล้ว จะแสดงผลดังรูปด้านล่างค่ะ

after insert image url 2

ข้อควรจำ    ลิงก์ หรือ URL ของรูป จะต้องลงท้ายด้วย .jpg หรือ .png เท่านั้นนะคะ

เนื้อหาที่เกี่ยวข้อง