ข้ามไปยังเนื้อหาหลัก
เวลาอ่าน 9 นาที (1808 คำ)

สร้างแกลเลอรี่ที่สวยงามด้วยตัวจัดการแกลเลอรี่ที่ดีที่สุดสำหรับ DIVI

สร้างแกลเลอรี่ที่สวยงามด้วยตัวจัดการแกลเลอรี่ที่ดีที่สุดสำหรับ DIVI_20210609-071125_1

เรื่องจริงก็คือ การใช้แกลเลอรี่เป็นหนึ่งในวิธีที่ดีที่สุดในการแสดงเนื้อหาบนเว็บไซต์ เนื่องจากดูเป็นมืออาชีพมากกว่าแค่การเพิ่มรูปภาพ แต่ก็เป็นเรื่องจริงเช่นกันว่าการสร้างแกลเลอรี่และเพิ่มสไตล์อาจเป็นงานที่น่าเบื่อเหมือนกับการเพิ่มองค์ประกอบลงในหน้าเว็บและทำให้เหมาะสมกับเว็บไซต์ของคุณ.

DIVI เป็นสิ่งที่เราใช้ในกรณีเหล่านี้ เนื่องจากเป็นตัวสร้างหน้าเว็บที่รู้จักกันดีพร้อมเครื่องมือที่สมบูรณ์แบบ แต่ก็อาจมีข้อจำกัดเมื่อเพิ่มรูปภาพ และนี่คือที่ที่ WP Media Folder ช่วยคุณ

WP Media Folder และตัวจัดการแกลเลอรีช่วยให้คุณสามารถจัดการและเพิ่มแกลเลอรีได้โดยตรงจาก DIVI ในบทช่วยสอนนี้เราจะมาดูกันว่ามันง่ายแค่ไหน ;)

สำหรับโพสต์นี้ เราจะใช้ DIVI, WP Media Folder, WP Media Folder ส่วนเสริม, และ WP Media Folder ส่วนเสริมแกลเลอรี.

เชื่อมต่อ WordPress และอัลบั้ม Google Photos เพื่อสร้างแกลเลอรี่ที่น่าทึ่ง

หัวข้อหนึ่งจากโพสต์นี้คือการสร้างแกลเลอรีโดยใช้รูปภาพที่นำเข้าจากบัญชี Google Photos ของคุณโดยตรง เพื่อให้คุณสามารถอัปโหลดรูปภาพจากโทรศัพท์ของคุณไปยัง Google Photos และใช้งานบนไซต์ WordPress ของคุณได้อย่างง่ายดาย.

มาเริ่มด้วยการเชื่อมต่อกันเลย.

ก่อนอื่นเราต้องมี Google Dev APP สำหรับการนี้ ไปที่: https://console.developers.google.com/project และสร้างโครงการใหม่.

เพิ่มชื่อให้กับโปรเจ็กต์ คุณสามารถเพิ่มชื่ออะไรก็ได้ตามต้องการ.

ตอนนี้ รอซักครู่เพื่อให้โปรเจคถูกสร้างขึ้น.

หากเป็นครั้งแรกที่คุณใช้Photos Library API นี้ คุณจะต้องเปิดใช้งาน ในการเปิดใช้งาน ให้ไปที่MarketPlace ที่เมนูด้านซ้าย

ตอนนี้ ในช่องค้นหา พิมพ์ Photos Library API และค้นหา

คลิกที่มัน แล้วคลิกที่ เปิดใช้งาน.

ตอนนี้เปิดใช้งานแล้ว คลิกที่ "API และบริการ" ในเมนูด้านซ้าย ในแผงนี้ ไปที่ ข้อมูลรับรอง.

ตอนนี้คุณมาอยู่ที่นี่แล้ว ที่แผงด้านบน ไปที่ + สร้างข้อมูลรับรอง > รหัสไคลเอ็นต์ OAuth หากถูกถาม ให้เพิ่มชื่อลงในหน้าจอขอความยินยอม OAuth ของคุณ

ตอนนี้ ตั้งค่าโปรดตามตัวอย่างต่อไปนี้:

  • เลือก "แอปพลิเคชันเว็บ" และเพิ่มชื่อที่คุณเลือก.
  • Authorized JavaScript ต้นกำเนิด: https://your-domain.com (แทนที่ด้วยชื่อโดเมนของคุณ โดยไม่มีเครื่องหมายทับที่ส่วนท้าย).
  • URI การเปลี่ยนเส้นทางที่ได้รับอนุญาต: https://your-domain.com/wp-admin/options-general.php?page=option-folder&task=wpmf&function=wpmf_google_photo_authenticated
(แทนที่ด้วยชื่อโดเมนของคุณ)

โปรดทราบว่าทาง Google ได้เปลี่ยนนโยบายของพวกเขาแล้ว คุณจึงจำเป็นต้องกรอกโดเมนที่ได้รับอนุญาตที่ แท็บหน้าจอการยินยอม OAuth > แก้ไขแอป.

ในส่วนโดเมนที่ได้รับอนุญาต คลิกที่ +เพิ่มโดเมน และเพิ่มโดเมนของคุณ

เพิ่มลงใน การยืนยันโดเมน ส่วนนี้ด้วย.

เรียบร้อย! คุณจะได้รับ ID และ Secret เพื่อเพิ่มในการกำหนดค่าของ WP Media Folder:)

ตอนนี้ มาเชื่อมต่อบัญชี Google Photos ของคุณกับไซต์ WordPress ของคุณ โดยไปที่ การตั้งค่า > WP Media Folder > คลาวน์ > แท็บ Google Photo.

คุณสามารถใช้โหมดอัตโนมัติซึ่งเป็นวิธีที่ง่ายที่สุด โดยคุณจะต้องเข้าสู่ระบบบัญชี Google ของคุณเท่านั้น สำหรับสิ่งนี้ให้เลือก อัตโนมัติ ใน "โหมดการเชื่อมต่อ" จากนั้น เชื่อมต่อ Google Photos.

ป๊อปอัปจะปรากฏขึ้น คลิกที่ ยอมรับ.

ขั้นตอนสุดท้ายคือการเข้าสู่บัญชี Google ของคุณ อนุญาตสิทธิ์ และดำเนินการเชื่อมต่อให้เสร็จสิ้น.

นั่นคือทั้งหมด ง่ายและรวดเร็วจริงๆ ไม่ใช่หรือ? :)

จาก Google Photos ไปยัง WordPress Divi Gallery

เช่นเดียวกับชื่อหัวข้อ จาก Google Photos ไปยัง WordPress Divi Gallery ตอนนี้ Google Photos เชื่อมต่อแล้ว เราสามารถดำเนินการสร้างแกลเลอรี่จากอัลบั้มในบัญชีของเราได้.

ก่อนอื่นเราจะสร้างแกลเลอรีใหม่จากตัวจัดการ.

ไปที่ สื่อ > แกลเลอรี่โฟลเดอร์สื่อ.

ที่นี่ เราจะสามารถสร้างแกลเลอรีที่หลากหลายสำหรับรูปภาพจากไซต์ WordPress ของเรา คอมพิวเตอร์ของเรา หรือ (ในกรณีนี้) จาก Google Photos.

คลิกที่ +เพิ่มแกลเลอรีใหม่.

การดำเนินการนี้จะเปิดป๊อปอัปที่คุณสามารถพิมพ์ชื่อแกลเลอรี เลือกธีม และสิ่งอื่นๆ เช่น ถ้าคุณต้องการเพิ่มเป็นแกลเลอรีหลักหรืออาจเป็นแกลเลอรีย่อย.

เลือกตัวเลือกทั้งหมดของคุณ แต่อย่ากังวลเพราะคุณสามารถแก้ไขได้หลังจากสร้างแกลเลอรีแล้ว มันไม่เหมือนกับสิ่งที่เราจะไม่สามารถเปลี่ยนแปลงได้ ;)

บนหน้าจอนี้ คุณมี 3 ตัวเลือกในการเพิ่มรูปภาพไปยังแกลเลอรีของคุณ คุณสามารถเพิ่มรูปภาพจาก WordPress (ไลบรารีสื่อของคุณ) จากคอมพิวเตอร์ของคุณ และจาก Google Photos.

สำหรับบทช่วยสอนนี้ เราจะเลือก Google Photos แต่คุณสามารถเลือกสิ่งที่คุณต้องการ

หากคุณเลือกGoogle Photos คุณจะเห็นอัลบั้มและรูปภาพทั้งหมดจากบัญชีที่คุณเชื่อมต่อกับไซต์ของคุณก่อนหน้านี้

คุณสามารถนำเข้าอัลบั้มทั้งหมดโดยคลิกที่ นำเข้าอัลบั้ม หรือเลือกหลายภาพและคลิกที่ นำที่เลือก.

ตัวอย่างเช่น ที่นี่เราจะเลือก 5 ภาพและนำเข้าเฉพาะภาพเหล่านี้เท่านั้น.

มันง่ายเหมือนการคลิกที่ภาพที่คุณต้องการ จากนั้นคลิกตามที่อธิบายไว้ก่อนหน้านี้ ที่ นำเข้าที่เลือก.

ตอนนี้คุณได้เพิ่มภาพลงในแกลเลอรีแล้ว คุณจะเห็นภาพเหล่านั้นในตัวจัดการ ในหน้าจอแรกนี้คุณมีตัวเลือกในการจัดเรียงภาพเหล่านั้น ตั้งค่าภาพเป็นหน้าปกของแกลเลอรี และยังสามารถแก้ไขภาพได้ด้วย.

คุณจะสังเกตเห็นแท็บอื่นที่เรียกว่า การตั้งค่าการแสดงผลและ Shortcode.

ในส่วนนี้ คุณจะมีตัวเลือกในการแก้ไขการตั้งค่ามากขึ้นจากแกลเลอรี เช่น ธีมที่คุณต้องการใช้ จำนวนคอลัมน์ ขนาดภาพ การดำเนินการเมื่อคลิก และขนาดไลท์บ็อกซ์ หากคุณเลือกไลท์บ็อกซ์เป็นตัวเลือกเมื่อคลิก.

นอกจากนี้ยังมี shortcode สำหรับแกลเลอรีนั้นในกรณีที่คุณต้องการใช้งาน ;)

คุณยังมีตัวเลือกเหล่านี้ใน Divi ดังนั้นไม่ต้องกังวลว่าจะต้องเข้ามาใหม่ทุกครั้งที่คุณต้องการแก้ไขบางอย่างในแกลเลอรี.

ตอนนี้คุณได้สร้างแกลเลอรีเสร็จแล้ว คลิกที่บันทึกและไปที่หน้า/โพสต์ที่คุณต้องการแก้ไข และคลิกที่ ใช้ Divi Builder คุณสามารถใช้งานได้ทั้งในส่วนหน้าและหลังโดยไม่มีปัญหา;)

เลือกคอลัมน์ตามที่คุณทำตามปกติ จากนั้นมองหา WPMF Gallery Addon โมดูล

ในป๊อปอัปถัดไป คุณจะเห็นตัวเลือกในการเพิ่มแกลเลอรีที่สร้างไว้แล้ว และยังมีตัวเลือกอื่นๆ ทั้งหมดที่คุณเห็นในแท็บแสดงผล จากตัวจัดการแกลเลอรี เพื่อให้คุณสามารถแก้ไขแกลเลอรีได้อย่างง่ายดาย.

เราจะเลือกแกลเลอรีที่เราสร้างไว้ก่อนหน้านี้.

แกลเลอรีจะปรากฏขึ้นและคุณจะสามารถแก้ไขการตั้งค่าการแสดงผลทั้งหมดได้ด้วยการแสดงตัวอย่างสด ดังนั้นทุกการเปลี่ยนแปลงจะปรากฏโดยอัตโนมัติ.

เครื่องมือที่ดีที่สุดเมื่อคุณต้องการตรวจสอบว่าสิ่งต่างๆ เป็นไปอย่างไรโดยไม่ต้องคลิกที่ตัวอย่างหรือโหลดหน้าใหม่ทุกครั้งที่มีการเปลี่ยนแปลง.

ตอนนี้คุณสามารถสร้างหน้าเว็บของคุณให้เสร็จสิ้นและเผยแพร่โดยไม่ต้องกังวลว่าจะไม่สามารถทราบได้ว่าแกลเลอรีจะมีลักษณะอย่างไรในส่วนหน้า.

เครื่องมือที่ยอดเยี่ยมจริงๆ ไม่ใช่หรือ

สร้างแกลเลอรี่จากคลาวน์โดยตรงไปยัง Divi

คุณอาจคิดว่ามันเป็นเช่นนั้น แต่คำตอบคือไม่! คุณยังสามารถสร้างแกลเลอรีที่มีรูปภาพที่โฮสต์บนคลาวด์ คุณสามารถประหยัดพื้นที่จัดเก็บและใช้ Divi เพื่อวางแกลเลอรี ;)

เราจะใช้โฟลเดอร์ Google Drive สำหรับสิ่งนี้ แต่โปรดทราบว่าการผสานรวมคลาวด์อื่นๆ มีให้บริการด้วย WP Media Folder และ Addon (Dropbox, AWS, OneDrive).

ในการเชื่อมต่อ Google Drive กับไซต์ WordPress ของคุณ คุณสามารถทำตามคำแนะนำโดยละเอียด ที่นี่ กระบวนการนี้คล้ายกับการเชื่อมต่อ Google Photos คุณจึงไม่น่าจะมีปัญหา

หลังจากสร้าง/ซิงค์โฟลเดอร์ Google Drive แล้ว คุณสามารถไปที่หน้า/โพสต์ที่คุณต้องการแก้ไขและคลิกที่ ใช้ Divi Builder เพิ่มคอลัมน์ของคุณ และในโมดูล ให้มองหาชื่อ WPMF แกลเลอรี.

โมดูลนี้จะช่วยให้คุณสร้างแกลเลอรีได้โดยตรงใน Divi Builder ก่อนอื่นเรามาเพิ่มรูปภาพโดยคลิกที่ เพิ่มรูปภาพแกลเลอรี ในส่วน รูปภาพ ส่วน.

การดำเนินการนี้จะโหลดไลบรารีสื่อของคุณเป็นป๊อปอัป ค้นหาโฟลเดอร์ที่มีรูปภาพที่คุณต้องการเพิ่มภายในและคลิกที่โฟลเดอร์นั้น.

เราจะใช้โฟลเดอร์ Google Drive สำหรับกรณีนี้.

ตอนนี้ ในส่วนด้านขวา เลือกภาพทั้งหมดที่คุณต้องการเพิ่มโดยคลิกที่ภาพเหล่านั้น จากนั้นคลิกที่ เลือก.

การดำเนินการนี้จะโหลดภาพทั้งหมดในโมดูล Divi และคุณจะเห็นตัวเลือกทั้งหมดที่มีสำหรับการแก้ไขแกลเลอรี เช่น ธีม คอลัมน์ ขนาด การดำเนินการเมื่อคลิก ขอบ เส้นขอบ รัศมีขอบ และตัวเลือกในการเพิ่ม Blur ให้กับภาพ.

ส่วนที่ดีที่สุดคือ ทุกการเปลี่ยนแปลงที่คุณทำจะปรากฏในตัวอย่างโดยอัตโนมัติ ดังนั้นคุณจึงไม่ต้องโหลดหน้าซ้ำหรือบันทึกเทมเพลตในการเปลี่ยนแปลงแต่ละครั้ง.

อย่างที่คุณเห็น ปลั๊กอินเหล่านี้คือการรวมกันที่สมบูรณ์แบบ ;)

รับเว็บไซต์ WordPress ที่เป็นมืออาชีพมากที่สุดพร้อมการผสมผสานที่ดีที่สุด

เรามีเพียงแสดงคุณสมบัติบางอย่างที่มีอยู่ใน WP Media Folder มีคุณสมบัติอื่นๆ เช่น การโหลดสื่อของคุณไปยัง AWS, PDF Embedded และการเชื่อมต่อคลาวน์เพิ่มเติม เช่น OneDrive และ Dropbox แล้วคุณกำลังรออะไรอยู่เพื่อเริ่มใช้คุณสมบัติที่น่าทึ่งเหล่านี้ ไปที่ ที่นี่ และรับสมาชิกของคุณเอง :)

ติดตามข่าวสาร

เมื่อคุณสมัครสมาชิกบล็อก เราจะส่งอีเมลถึงคุณเมื่อมีการอัปเดตใหม่บนไซต์เพื่อให้คุณไม่พลาด.

โพสต์ที่เกี่ยวข้อง

 

ความคิดเห็น

ยังไม่มีความคิดเห็นใด ๆ คุณสามารถแสดงความคิดเห็นได้เป็นครั้งแรก
ลงทะเบียนแล้ว? เข้าสู่ระบบที่นี่
วันอาทิตย์, 22 กุมภาพันธ์ 2026

ภาพ Captcha