วิธีเพิ่มแถบเลื่อนในหน้าแรกของ WordPress โดยไม่ต้องใช้ปลั๊กอิน

เผยแพร่แล้ว: 2022-09-15

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

ขั้นตอนด้านล่างจะแนะนำวิธีการเพิ่มตัวเลื่อนในหน้า WordPress ของคุณ ในบทความนี้ เราจะเรียนรู้วิธีเพิ่มแถบเลื่อนในหน้าแรกของเว็บไซต์ WordPress เมื่อคุณใช้แถบเลื่อน คุณสามารถสร้างสไลด์โชว์ได้อย่างง่ายดายโดยไม่ต้องป้อนข้อมูลใดๆ พวกเขายังสามารถตอบสนองต่อการป้อนข้อมูลของผู้ใช้ เช่น การคลิกหรือการปัด ซึ่งทำให้คุณสามารถดูสไลด์ถัดไปหรือสไลด์ก่อนหน้าได้ ปลั๊กอิน Meta Slider นั้นใช้งานได้ฟรีและเป็นที่นิยมอย่างมาก โดยมีการดาวน์โหลดมากกว่า 1.1 ล้านครั้งและคะแนน 4.5 จาก 5 ดาวจากผู้ใช้ เวอร์ชันฟรีประกอบด้วยสไตล์ที่แตกต่างกันสี่แบบ ตลอดจนการตั้งค่าและตัวเลือกที่มีประโยชน์มากมาย ช่วยให้คุณเพิ่มตัวเลื่อนที่ตอบสนองต่อ SEO ที่เป็นมิตรกับโพสต์และเพจของคุณได้ คุณยังสามารถระบุขนาด เอฟเฟกต์ การนำทาง และอื่นๆ ได้อีกด้วย

นอกจากนี้ยังมีตัวเลือกการตั้งค่าขั้นสูงที่ด้านขวาของหน้า หากต้องการใช้รหัสย่อ Meta Slider ในฟังก์ชันที่กำหนดเอง ให้เพิ่มเบ็ดส่วนหัวของ Genesis ที่มีแท็กเงื่อนไขของหน้าแรก เนื่องจากเนื้อหาสไลด์โชว์ของคุณมีขนาดใหญ่กว่าขนาดของตัวเลื่อน ผู้เยี่ยมชมของคุณจึงสามารถเข้าถึงได้ง่าย เวอร์ชันพรีเมียมของ Meta Slider ซึ่งเป็นแพ็กเสริมสำหรับเวอร์ชันฟรี มีคุณสมบัติพิเศษที่มีให้ในเวอร์ชันฟรี คุณสามารถอัปโหลดวิดีโอไปยัง YouTube หรือ Vimeo (ผ่านแถบเลื่อนของคุณ) และเพิ่มเนื้อหา HTML ที่กำหนดเองได้ ร้านค้าออนไลน์ที่ขับเคลื่อนด้วย WooCommerce ยังสามารถใช้เพื่อแสดงรายการจากพอร์ตโฟลิโอของคุณ เช่นเดียวกับรายการจากพอร์ตของคุณเอง ไม่จำเป็นต้องใช้เวลาหรือเงินกับราคาของ Meta Slider Pro เพราะคุณสามารถเลือกคุณสมบัติที่คุณต้องการใช้ตามจำนวนเว็บไซต์ที่คุณตั้งใจจะใช้ปลั๊กอินได้อย่างง่ายดาย มีข้อเสนอโปรเริ่มต้นที่ 39 เซ็นต์ (2 ไซต์) และสูงถึง 319 เซ็นต์ (ไม่จำกัดไซต์) นอกจากนี้ MetaSlider Pro ยังมาพร้อมกับช่วงทดลองใช้งาน 30 วัน ซึ่งคุณสามารถทดลองใช้ได้ฟรี

ฉันจะเพิ่มแถบเลื่อนแบบกำหนดเองใน WordPress ได้อย่างไร

เครดิต: codeinhouse.com

มีสองสามวิธีในการเพิ่มแถบเลื่อนแบบกำหนดเองใน WordPress วิธีหนึ่งคือการใช้ปลั๊กอิน เช่น Slider Revolution หรือ Master Slider อีกวิธีหนึ่งคือการใช้ประเภทโพสต์แบบกำหนดเองที่มีการจัดหมวดหมู่แบบกำหนดเอง

ตัวเลื่อนในปลั๊กอิน WordPress

เครดิต: lambertgroupproductions.com

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

ปลั๊กอิน Slider คืออะไร?

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

ตัวเลื่อน WordPress Carousel พร้อมข้อความที่ไม่มีปลั๊กอิน

มีหลายวิธีในการสร้างแถบเลื่อน WordPress แบบหมุนพร้อมข้อความโดยไม่ต้องใช้ปลั๊กอิน วิธีหนึ่งคือการใช้วิดเจ็ต HTML ที่กำหนดเอง วิดเจ็ตนี้ช่วยให้คุณเพิ่มโค้ด HTML ที่กำหนดเองลงในแถบด้านข้างได้ ในการใช้วิดเจ็ตนี้ เพียงลากลงในแถบด้านข้างของคุณแล้ววางโค้ดต่อไปนี้ลงในวิดเจ็ต: สไลด์แรก นี่คือสไลด์แรกของภาพหมุน สไลด์ที่สอง นี่คือสไลด์ที่สองของภาพหมุน สไลด์ที่สาม นี่คือสไลด์ที่สามของภาพหมุน ในการจัดรูปแบบภาพหมุน คุณสามารถเพิ่มโค้ด CSS ต่อไปนี้ในไฟล์ style.css ของธีมของคุณ: #my-carousel { margin: 20px 0; } #my-carousel .item { text-align: center; ล้น: ซ่อน; } #my-carousel .item img { ระยะขอบ: 0 อัตโนมัติ; } โค้ดด้านบนจะสร้างตัวเลื่อนแบบวงล้อพื้นฐานที่มีสามสไลด์ คุณสามารถเพิ่ม สไลด์เพิ่มเติม ได้โดยการคัดลอกโค้ดสำหรับสไลด์แรก จากนั้นเปลี่ยนแหล่งที่มาของรูปภาพและข้อความ

รหัสตัวเลื่อนที่กำหนดเองใน WordPress

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

ฉันจะเพิ่มตัวเลื่อนในโค้ด WordPress ของฉันได้อย่างไร

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

ตัวเลื่อนผลิตภัณฑ์ Woocommerce โดยไม่ต้องใช้ปลั๊กอิน

มีสองสามวิธีในการสร้าง ตัวเลื่อนผลิตภัณฑ์ WooCommerce โดยไม่ต้องใช้ปลั๊กอิน วิธีหนึ่งคือการใช้รหัสย่อในตัวของ WooCommerce อีกวิธีหนึ่งคือการใช้ปลั๊กอินตารางผลิตภัณฑ์ WooCommerce และสุดท้าย คุณสามารถใช้ปลั๊กอินของบริษัทอื่น เช่น WPBakery Page Builder

Product Slider สำหรับ WooCommerce ให้ ภาพหมุนตัวเลื่อนผลิตภัณฑ์ ที่ดูเป็นมืออาชีพที่ให้คุณแทรกผลิตภัณฑ์ WooCommerce ของคุณได้อย่างรวดเร็วและง่ายดาย ด้วยเครื่องมือสร้างรหัสย่อในตัว คุณสามารถปรับเปลี่ยนรูปลักษณ์และฟังก์ชันของตัวเลื่อนผลิตภัณฑ์ได้อย่างง่ายดาย หน้านี้จะนำคุณไปสู่ขั้นตอนการติดตั้งปลั๊กอินและทำให้มันทำงาน Product Slider สำหรับ WooCommerce ใช้งานได้กับธีม WooCommerce ใด ๆ ตราบใดที่ธีมนั้นได้รับการพัฒนาตามมาตรฐานของ WordPress และแนวทางของ WooCommerce ต้องคัดลอกและวางโค้ด PHP ลงในไฟล์เทมเพลตก่อนจึงจะรวมโค้ดได้ หากคุณกำลังมีปัญหากับปลั๊กอินของเรา ขั้นแรกให้ทำตามขั้นตอนด้านล่างเพื่อแก้ไขปัญหา คุณสามารถใช้ Product Slider สำหรับซอฟต์แวร์โอเพ่นซอร์สของ WooCommerce

ปลั๊กอินนี้เผยแพร่ต่อสาธารณะโดยผู้ร่วมให้ข้อมูลที่หลากหลาย ฉันสามารถระบุได้อย่างมั่นใจว่าแถบเลื่อนนี้ดีที่สุดที่ฉันเคยใช้ ส่งบทวิจารณ์แล้ว 196 รายการ หอการค้าระหว่างประเทศขององค์การการค้าโลกจะจัดการประชุมครบรอบ 25 ปีในวันที่ 2 กันยายน พ.ศ. 2565 ระหว่างวันที่ 7 กรกฎาคมถึง 21 กรกฎาคม พ.ศ. 2564 ระยะเวลาตั้งแต่วันที่ 25 ธันวาคม 2564 ถึง 25 ธันวาคม 2566 วันที่ 2.3.3 – 19 สิงหาคม 2564 และ 2. 2.8 – 27 มกราคม 2564

การเพิ่มตัวเลื่อนผลิตภัณฑ์ใน Woocommerce

ง่ายเหมือนการเพิ่ม Product Slider ลงในไซต์ WooCommerce ของคุณ กระบวนการนี้ง่ายพอๆ กับการลงชื่อเข้าใช้แดชบอร์ด WordPress เลือกเมนูปลั๊กอิน แล้วคลิกเพิ่มใหม่ โดยการพิมพ์ “Product Slider for WooCommerce” ในช่องค้นหา คุณจะพบ ShapedPlugin หากคุณพบ ให้คลิก "ติดตั้งทันที" แล้วคลิก "เปิดใช้งาน" เมื่อติดตั้งแล้ว คุณสามารถเปลี่ยนแถบเลื่อนใน WooCommerce ได้อย่างง่ายดาย คุณสามารถแก้ไขตัวเลื่อนได้โดยไปที่ WooCommerce > Product Slider แล้วเลือกตัวเลื่อนที่คุณต้องการแก้ไข เปลี่ยนตัวเลือกที่คุณต้องการและบันทึกเป็นแถบเลื่อน