วิธีสร้างตัวเลื่อนรูปภาพที่ตอบสนองใน WordPress

คุณกำลังมองหาแนวทางที่สมบูรณ์ในการสร้าง Responsive Image Slider ใน WordPress หรือไม่? หากคุณกำลังมองหาดังนั้นฉันจะบอกว่าคุณมาถูกที่แล้ว เนื่องจากฉันได้เตรียมบทความนี้ที่มีคำแนะนำทีละขั้นตอนในการสร้างตัวเลื่อนรูปภาพที่ตอบสนองอย่างสมบูรณ์ใน WordPress

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

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

สรุปบทความโดยย่อ

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

• การเลือกปลั๊กอินที่ดีที่สุด
• การติดตั้งและเปิดใช้งานปลั๊กอิน WordPress Carousel
• อินเทอร์เฟซการตั้งค่าปลั๊กอิน WP Carousel
• สร้างตัวเลื่อนรูปภาพแรกของคุณ
• การปรับแต่งภาพ Slider
• การเผยแพร่ Image Slider
• ขยายตัวเลือกการปรับแต่ง

การเลือกปลั๊กอินที่ดีที่สุด

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

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

อย่าอารมณ์เสียเกี่ยวกับปลั๊กอินที่ดีที่สุด เพราะฉันได้ค้นคว้าในเว็บแล้วและพบสิ่งที่ดีที่สุดสำหรับคุณ ดังนั้น ตรวจสอบปลั๊กอิน Image Slider ที่ดีที่สุดและนั่นคือ WordPress Carousel – Responsive Image Slider สำหรับ WordPress

ดาวน์โหลดเดี๋ยวนี้

การติดตั้งและเปิดใช้งานปลั๊กอิน WordPress Carousel

การติดตั้งและเปิดใช้งานปลั๊กอินจะเหมือนกันสำหรับปลั๊กอิน WordPress แต่ละตัว นี่เป็นวิธีที่ง่ายที่สุด และฉันหวังว่าคุณจะรู้จักมันดี อย่างไรก็ตาม หากคุณไม่ทราบวิธีดำเนินการ คุณสามารถปฏิบัติตาม คำแนะนำในการติดตั้งและเปิดใช้งาน เพื่อรับขั้นตอนการติดตั้งและเปิดใช้งานโดยละเอียด ดังนั้น ฉันหวังว่าคุณจะทำขั้นตอนนี้ให้เสร็จได้ด้วยตัวเอง

อินเทอร์เฟซการตั้งค่าปลั๊กอิน WP Carousel

เมื่อคุณติดตั้งและเปิดใช้งานปลั๊กอิน WordPress Carousel เสร็จแล้ว คุณจะเห็นเมนูผู้ดูแลระบบใหม่ที่เรียกว่า WP Carousel ภายใต้เมนูนี้ คุณจะพบตัวเลือกต่างๆ ครั้งแรก อินเทอร์เฟซทั้งหมดดูเหมือนภาพหน้าจอต่อไปนี้

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

ประเภทม้าหมุน

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

ส่วนบนนี้ช่วยให้คุณเลือกประเภทภาพหมุนที่ต้องการได้ ภาพหมุนมีทั้งหมดห้าประเภท เช่น รูปภาพ โพสต์ ผลิตภัณฑ์ของ Woo เนื้อหา และวิดีโอ คุณสามารถเลือกประเภทม้าหมุนได้ตามที่คุณต้องการ แต่ประเภทภาพหมุนของเนื้อหาและวิดีโอจะใช้ได้เฉพาะกับปลั๊กอินรุ่นพรีเมียมเท่านั้น

การตั้งค่าตัวสร้างรหัสย่อ

ส่วนตรงกลางของปลั๊กอินนี้มีตัวเลือกการตั้งค่าการปรับแต่ง ปลั๊กอิน WordPress Carousel สามารถปรับแต่งได้อย่างมากด้วยตัวเลือกการปรับแต่งที่หลากหลาย การปรับแต่งมีสี่ประเภท ได้แก่ การตั้งค่าทั่วไป การตั้งค่าภาพหมุน การตั้งค่าลักษณะ และการตั้งค่าการพิมพ์ อย่างไรก็ตาม พื้นที่การปรับแต่งดูเหมือนภาพหน้าจอต่อไปนี้-

รหัสย่อและฟังก์ชัน PHP

พื้นที่รหัสย่อจะสร้างรหัสย่อสำหรับตัวเลื่อนทุกตัว และพื้นที่แม่แบบจะแสดงรหัสเพื่อแสดงตัวเลื่อนตัวเดียวในแม่แบบใดๆ อย่างไรก็ตาม ส่วนนี้ดูเหมือนภาพหน้าจอต่อไปนี้-

สร้างตัวเลื่อนรูปภาพแรกของคุณ

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

ขั้นตอนที่ 1: ประเภทม้าหมุน

จากบริเวณด้านบน ให้เลือก Carousel Type ตามความต้องการของคุณและตั้งค่าที่จำเป็นให้เสร็จสิ้น สมมติว่าคุณเลือก Image Carousel Type ดังนั้นให้เพิ่มรูปภาพตามที่คุณต้องการ

ขั้นตอนที่ 2: การปรับแต่ง Image Slider

ใน Customization Area ให้ปรับแต่งการตั้งค่าตามที่คุณต้องการ คุณสามารถปรับแต่งแถบเลื่อนของคุณโดยไปที่แท็บการปรับแต่งต่างๆ มีตัวเลือกมากมายสำหรับการปรับแต่งที่ยืดหยุ่นเพื่อสร้างตัวเลื่อนที่ยอดเยี่ยมสำหรับเว็บไซต์ของคุณ

วีดีโอสอน

คุณสามารถข้ามการอ่านบทความทั้งหมดและรับคำแนะนำสั้น ๆ และรวดเร็วในการดูวิดีโอต่อไปนี้ -

ขั้นตอนที่ 3: เผยแพร่ Image Slider

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

ฉันได้ติดตามบทความนี้และสร้างตัวเลื่อนรูปภาพต่อไปนี้ด้วย ปลั๊กอิน WordPress Carousel

ต้องการคุณสมบัติและฟังก์ชันเพิ่มเติมหรือไม่? ขยายตัวเลือกการปรับแต่ง

ฉันหวังว่าคุณจะสังเกตเห็นว่าปลั๊กอิน WordPress Carousel มีข้อ จำกัด มากมายเช่นเนื้อหาและประเภทภาพหมุนวิดีโอไม่พร้อมใช้งาน นอกจากนี้ ตัวเลือกการปรับแต่งหลายตัวยังไม่มีให้บริการในเวอร์ชันนี้ เป็นเพราะการใช้ปลั๊กอิน เวอร์ชันพรีเมียม นี้ ด้วยเหตุนี้ คุณจึงต้องเผชิญกับข้อจำกัดหลายประการ

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

รองรับเนื้อหาทุกประเภท: คุณสามารถสไลด์อะไรก็ได้ที่คุณต้องการ เช่น รูปภาพ, โพสต์, สินค้า, เนื้อหา, วิดีโอ, ข้อความ, HTML, รหัสย่อ ฯลฯ

ดูการสาธิตของภาพหมุนเนื้อหาซึ่งมีให้ในเวอร์ชันพรีเมียมเท่านั้น สาธิตสด

โพสต์จากอนุกรมวิธานที่แตกต่างกัน: คุณสามารถแสดงจาก หลายหมวดหมู่ แท็ก รูปแบบ หรือประเภทได้อย่างง่ายดาย

ภาพหมุนไม่จำกัด: เพิ่มภาพหมุนไม่จำกัดและแสดงในทุกที่ที่คุณต้องการ

ไลท์บ็อกซ์สำหรับรูปภาพ: ฟังก์ชันไลท์บ็อกซ์พร้อมใช้งานสำหรับรูปภาพตัวเลื่อนแต่ละรูป ส่งผลให้ผู้ใช้สามารถเลื่อนดูรูปภาพทีละภาพได้อย่างง่ายดาย

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

ตำแหน่งเนื้อหา: ตำแหน่ง เนื้อหารูปภาพที่แตกต่างกัน เช่น ด้านล่าง ด้านขวา และโอเวอร์ เลย์

เอฟเฟกต์สำหรับรูปภาพ: คุณสามารถใช้เอฟเฟกต์ต่างๆ กับรูปภาพได้ เช่น เอฟเฟกต์ GrayScale , ซูมเข้าหรือออก, จาง ฯลฯ

ภาพรวม WordPress Carousel Pro

การพิมพ์ขั้นสูง: มีตัวเลือกการพิมพ์ขั้นสูงให้เลือก นอกจากนี้ ยังให้ความยืดหยุ่นอย่างสมบูรณ์แก่คุณในการปรับแต่งรูปแบบตัวอักษรตามความต้องการของคุณ

ภาพหมุน: คุณสามารถสร้างภาพหมุนที่มีเนื้อหาและคำอธิบาย ตำแหน่งเนื้อหาต่างๆ เช่น ด้านล่าง ด้านขวา และโอเวอร์เลย์ก็มีให้เช่นกัน

นอกจากนี้ยังมีตัวเลือกแสดงหรือซ่อนคำอธิบายภาพและคำอธิบาย ฟังก์ชันไลท์บ็อกซ์สำหรับรูปภาพ การโหลดแบบ Lazy Loading อัจฉริยะ เอฟเฟกต์ GrayScale การครอบตัด และตัวเลือกอื่นๆ รวมอยู่ด้วย

Product Carousel: เป็นวิธีที่ง่ายที่สุดในการแสดงผลิตภัณฑ์ WooCommerce เป็นภาพหมุน นอกจากนี้ คุณยังสามารถกรองผลิตภัณฑ์ตามตัวเลือกต่างๆ และแสดงภาพหมุนได้ทุกที่ที่คุณต้องการ

ภาพหมุนเนื้อหา: แสดงเนื้อหาประเภทใดก็ได้ในวงล้อตามเว็บไซต์ของคุณ

ภาพหมุนวิดีโอ: คุณสามารถแสดงภาพหมุนของวิดีโอได้อย่างง่ายดายพร้อมไอคอน คำบรรยายวิดีโอและคำอธิบาย ภาพขนาดย่อที่กำหนดเอง และคุณสมบัติอื่น ๆ อีกมากมาย นอกจากนี้ยังมีตัวเลือกการปรับแต่งต่างๆ เช่น โหมดภาพหมุน เปิดหรือปิดการเล่นอัตโนมัติ การแบ่งหน้า หยุดเมื่อโฮเวอร์ วนซ้ำไม่สิ้นสุด ฯลฯ เพื่อสร้างวิดีโอแบบหมุนที่ยอดเยี่ยม

ไม่จำกัดสีและรูปแบบ: คุณสามารถปรับแต่งสีและสไตล์ของภาพหมุนเพื่อให้เป็นมืออาชีพและสะดุดตามากขึ้น มีตัวเลือกการจัดแต่งทรงผมขั้นสูงมากกว่า 100 แบบ รวมถึงตำแหน่งการนำทางต่างๆ มากกว่า 8 ตำแหน่ง

การควบคุมภาพหมุน: รองรับการควบคุมแถบเลื่อนต่างๆ เช่น เปิดหรือปิดการเล่นอัตโนมัติ การแบ่งหน้า หยุดเมื่อโฮเวอร์ วนซ้ำไม่รู้จบ โหมดภาพหมุน ฯลฯ รวมการควบคุมม้าหมุนประมาณ 15+ รายการ

Duplicate Carousel: คุณสามารถทำซ้ำหรือโคลนม้าหมุนได้อย่างง่ายดาย ส่งผลให้เวลาและพลังงานของคุณลดลง

ความกว้างของตัวแปร: ตอนนี้คุณสามารถตั้งค่าความกว้างของตัวแปรสำหรับภาพหมุนได้ มันง่ายมาก

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

ตัวเลือกปลั๊กอินขั้นสูง: ตัวเลือก สคริปต์ Enqueue หรือ Dequeue เพื่อหลีกเลี่ยงข้อขัดแย้ง นอกจากนี้ ฟิลด์ CSS ที่กำหนดเองเพื่อแทนที่สไตล์

รองรับ หลายภาษา: รองรับหลายภาษาด้วย WPML, Polylang, qTranslate-x, GTranslate, Google LT, WPGlobus เป็นต้น

Page Builders Ready: พร้อมด้วย Gutenberg, WPBakery, Elementor, BeaverBuilder, SiteOrgin, Divi builder, LayersWP, MotoPress, CornerStone, Themify Builder และอีกมากมาย

รองรับ Multisite: รองรับเครือข่าย Multisite

ความเข้ากันได้และ SEO Friendly: ปลั๊กอินนี้เข้ากันได้กับธีมใด ๆ และภาพหมุนเป็นมิตรกับ SEO

การสนับสนุนที่ รวดเร็วและเป็นมิตร: ระบบสนับสนุนนั้นเร็วมาก นอกจากนี้ยังมีเอกสารออนไลน์และวิดีโอสอนการใช้งานมากมาย

แล้วตอนนี้คุณกำลังคิดอะไรอยู่? ฉันหวังว่าคุณจะสนใจที่จะลองใช้ปลั๊กอินเวอร์ชันพรีเมียมนี้ ดังนั้น เพียงตรวจสอบ WordPress Carousel Pro เพื่อรับคุณสมบัติที่ยอดเยี่ยมเพิ่มเติม

รับ Pro ทันที สาธิตสด