สร้าง WordPress Gallery รูปภาพแบบง่ายๆ ในเว็บไซต์ :)

สร้าง Wordpress Gallery รูปภาพแบบง่ายๆ ในเว็บไซต์ :)
https://www.youtube.com/embed/HDhKeRrh-HM?feature=oembed&autoplay=1
ช่วยแชร์ให้เพื่อน... สนับสนุนผู้เขียนครับ :)

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

ติดตั้ง Plugin WordPress Gallery

ให้เราไปที่ เมนู Plugins แล้วเลือก Add New หรือ เพิ่ม Plugin ได้เลยครับ จากนั้น ค้นหาคำว่า Envira Gallery ครับ Plugin ตัวนี้ ถือว่า เป็น WordPress Gallery Plugin ที่ยอดฮิตมากๆครับ มีคนติดตั้งไปแล้ว เป็นแสนคนครับ

จากนั้น ให้เราคลิกไปที่ Install Now แล้วทำการ Activate Plugin ตามลำดับ

เริ่มสร้าง WordPress Gallery กันเลย

ให้เราไปที่ Envira Gallery ก่อนครับ แล้วไปที่เมนูย่อย Envira Gallery กันก่อน ในหน้านี้จะเป็น หน้าจอแสดง Gallery ทั้งหมด ที่เราเคยสร้างไว้ครับ ซึ่งตอนนี้ยังไม่มีอะไรครับ

ให้เราเริ่มสร้าง Gallery โดยคลิกไปที่ Add New กันได้เลย จากนั้นก็ตั้งชื่อ Gallery ตามสะดวกเลยครับ

อัพโหลดรูปภาพขึ้น WordPress Gallery

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

ลองอัพโหลดดูครับเบื้องต้น จากนั้นกด Publish 1 ทีครับ โดยที่ยังไม่ต้องไปตั้งค่าอะไรครับ 😃

จากนั้นเราจะลองเอา Gallery ไปใส่ในหน้าของเรากันครับ

การใส่ WordPress Gallery ไปยังหน้า

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

ในกรณีนี้ ผมจะเลือกไปที่หน้า หรือว่า Page ก่อนครับ แล้วไปที่หน้าเกี่ยวกับเราก็แล้วกันครับ

พอเปิด ขึ้นมาแล้วให้เราไปที่ WordPress Editor ก่อนครับ แล้วก็ Enter ลงมา 1 ที จากนั้น ให้เรา คลิกไปที่ Add Gallery ก็จะมีตัว Example Gallery ที่เราสร้างไว้ให้เลือกครับ ส่วนด้านขวาครับ ก็จะมี ให้เราเลือกว่า จะแสดง Gallery Title หรือไม่ เราเลือกที่ ไม่แสดงก่อนครับ แล้ว คลิก Insert ลงไปเลยครับ จากนั้นกด Update หน้านี้ 1 ครั้งครับ แล้วลองไปดูที่หน้าเว็บไซต์ของเรากันครับ

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

และเมื่อเราคลิกที่รูปภาพ ก็จะเปิดเป็น หน้าต่าง ซึ่งเราเรียกว่า Lightbox อัตโนมัติเลยครับ

ปรับแต่ง WordPress Gallery

ต่อมาเราจะมาดู การปรับแต่ง Gallery ของเราบ้างครับ ให้เรากลับไปที่ระบบหลังบ้านของเราครับ

ให้เราไปที่ Envira Gallery ครับ แล้วก็ไปที่ Gallery ที่เราต้องการจะแก้ไขครับ

เรียงลำดับ Gallery ใหม่

การแก้ไขอันแรกที่ผมจะสอนคือ การเรียงลำดับครับ วิธีการก็คือ ให้เราคลิก แล้วก็ลากช้าๆ ไปที่ตำแหน่งใหม่ได้เลย

แล้วสมมุติว่าเราอยากจะลบรูปสัก 1 รูปล่ะทำอย่างไร ให้เราคลิกไปที่ ถังขยะได้เลยครับ

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

ใส่ Caption ให้ WordPress Gallery

ต่อมาครับ อยากใส่ Caption ให้กับรูป ทำอย่างไรครับ ให้เราไปที่ ดินสอครับ แล้วก็ใส่ไปที่ Title ได้เลย จากนั้นกด Save Meta Data 1 ทีครับ

แก้ไขรูปถัดไปให้กดลูกศรครับ แล้วก็แก้ไข แล้วอย่าลืมกด Save ด้วยนะครับ

เอาล่ะครับ ตอนนี้เราไปกด Update แล้วดูการเปลี่ยนแปลงกันก่อนครับ

ที่หน้าบ้านของเรา เมื่อเรากด Refresh แล้วจะเห็นว่า เมื่อ เอา mouse ของเราไปวางที่รูปก็จะเห็น Caption ครับ และเมื่อคลิกขึ้นมา ก็จะเห็น Caption อยู่ด้านล่างครับ

ส่วนรูปภาพที่เราลบไปก็หายไปแล้วครับ เพิ่มมาเป็นรูปผมยินยิ้มอยู่นี่เองครับ 😃

ปรับแต่ง Config ของ Envira Gallery

  • Column เราสามารถเลือกได้ว่า ให้แสดง กี่ Column
  • Lazy Loading คือ โหลดทีหลัง หน้าของเราโหลดเสร็จ ทำให้หน้าเราโหลดเร็วขึ้นโดยรวม
  • Lazy Loading Delay คือ หน่วงเวลาการโหลดเท่าไร 500 ms คือ ครึ่งวินาที
  • Gallery Theme ถ้าเป็น version free มีตัวเดียวครับ
  • Column Gutter Width คือ ระยะห่างระหว่าง Column
  • Margin Below Each Image คือ ระยะห่างระหว่างใต้รูปครับ
  • Image Size ถ้าเป็น Default ก็จะใช้ขนาดสูงสุด ตาม Image Dimension ด้านล่างครับ แต่ถ้าเราเลือกขนาดก็จะเป็นไปตามที่เราเลือกครับ
  • สุดท้ายครับ Crop Image คือเลือกให้ Crop รูปตามขนาดที่ตั้งไว้เลยนั่นเองครับ แต่ผมจะไม่ Crop ครับ เพราะต้องการให้รูปได้มิติที่เป็นต้นฉบับนั่นเองครับ

ปรับแต่ง Light Box ของ WordPress Gallery

  • เราสามารถเลือกได้ครับว่าจะใช้ Light Box หรือไม่
  • Theme Version Free จะไม่มีให้เลือกครับ
  • ขนาดของรูป เราสามารถเลือกได้ครับ ถ้า default จะเป็นแบบดั้งเดิม
  • Caption Position คือตำแหน่งของ Caption เราสามารถเปลี่ยนได้ครับ

เมื่อเราปรับแต่งเสร็จแล้ว เราก็มาลองดูที่หน้าบ้านกันครับ ตอนนี้หลายคนอาจจะจำไม่ได้แล้วครับว่าเราเปลี่ยนอะไรไปบ้าง สิ่งที่เราแก้คือ  Column ครับ แล้วเราก็แก้ ตำแหน่งของ Caption ใน Light Box ครับ เดี๋ยวเรามาลองดูกันได้เลย

ให้เรากด Refresh 1 ครั้งครับ จะพบว่า ตอนนี้ Gallery ของเราเป็น 2 Column เรียบร้อยแล้วครับ และ เมื่อเรากดที่รูปครับ เดิม Caption ที่อยู่ด้านล่าง ก็จะมาอยู่ในกรอบเรียบร้อยแล้วครับ

สรุป

ตอนนี้เราก็สามารถสร้าง Gallery รูปแบบง่ายๆกันได้แล้วนะครับ แถมฟรีอีกต่างหาก ซึ่งผมคิดว่า Version Free ก็ดีมากแล้วครับ แต่ถ้าใครต้องการ Advance กว่านี้อาจจะลองดู Premium Version หรือ Plugin ตัวอื่นได้ครับ ลักษณะการใช้งาน ก็จะคล้ายๆกันครับ สามารถนำ Concept เดียวกันไปใช้ได้ครับ

ดูหัวข้ออื่นๆใน เทคนิค WordPress ได้ที่นี่


ช่วยแชร์ให้เพื่อน... สนับสนุนผู้เขียนครับ :)
ประชาสัมพันธ์
คอร์สเรียนออนไลน์
ทำ Blog ง่ายๆ ใครก็ทำได้

Blog คือ เครื่องมือที่ใช้สร้างโอกาส 

และ สร้างตัวตนได้ ทุกยุคทุกสมัย 

ราคาปกติ 3,990 บาท
Early Bird 1,990 บาท
(สำหรับ 50 ท่านแรก)

พลากร สอนสร้างเว็บ

รับเทคนิค ความรู้ ข่าวสาร การทำเว็บไซต์

จาก พลากร สอนสร้างเว็บ

เฉพาะ สมาชิกเท่านั้น

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *