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

การสร้าง แถบเลื่อนแบบกำหนดเอง ใน WordPress โดยไม่ต้องใช้ปลั๊กอินเป็นกระบวนการที่ค่อนข้างง่าย สิ่งที่คุณต้องมีคือความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript ในบทความนี้ เราจะแนะนำคุณตลอดขั้นตอนการสร้างแถบเลื่อนแบบกำหนดเองใน WordPress โดยไม่ต้องใช้ปลั๊กอิน ขั้นแรก คุณจะต้องสร้างไฟล์ใหม่ในธีม WordPress ของคุณ คุณสามารถตั้งชื่อไฟล์นี้ได้ตามต้องการ แต่เราจะตั้งชื่อไฟล์นี้ว่า "slider.php" สำหรับตัวอย่างนี้ ถัดไป คุณจะต้องคัดลอกและวางโค้ดต่อไปนี้ลงในไฟล์ใหม่ของคุณ: เมื่อคุณได้ตั้งค่าเฟรมเวิร์กพื้นฐานแล้ว ก็ถึงเวลาที่จะเริ่มเพิ่มเนื้อหาของคุณ คุณสามารถเพิ่มเนื้อหาอะไรก็ได้ที่คุณต้องการลงในแถบเลื่อนของคุณ แต่เราจะเพิ่มรูปภาพและคำบรรยายสำหรับตัวอย่างนี้ ในการเพิ่มรูปภาพ คุณจะต้องใช้รหัสต่อไปนี้: โดยที่ “URL ของรูปภาพ” คือ URL ของรูปภาพที่คุณต้องการเพิ่ม ในการเพิ่มคำอธิบายภาพ คุณจะต้องใช้รหัสต่อไปนี้ โดยที่ “CAPTION TEXT” คือข้อความที่คุณต้องการแสดงในคำอธิบายภาพ เมื่อคุณเพิ่มเนื้อหาทั้งหมดแล้ว คุณจะต้องบันทึกไฟล์และอัปโหลดไปยังไดเร็กทอรีธีม WordPress ของคุณ และนั่นแหล่ะ! ตอนนี้คุณได้สร้างตัวเลื่อนที่กำหนดเองใน WordPress ได้สำเร็จโดยไม่ต้องใช้ปลั๊กอิน

ฉันจะสร้าง Slider ใน WordPress ฟรีได้อย่างไร

มีสองสามวิธีในการสร้างตัวเลื่อนบน WordPress ฟรี วิธีหนึ่งคือการใช้ ปลั๊กอิน Meta Slider ปลั๊กอินนี้ใช้งานง่ายและมีคุณสมบัติมากมาย อีกวิธีหนึ่งคือการใช้ปลั๊กอิน Smart Slider 3 ปลั๊กอินนี้ยังใช้งานง่ายและมีคุณสมบัติมากมาย

แถบเลื่อนมีอยู่ในปลั๊กอิน WordPress มากกว่า 900 รายการในที่เก็บปลั๊กอินของ WordPress Meta Slider ตัวเลื่อนที่ได้รับความนิยมสูงสุดใน WordPress มีการดาวน์โหลดเกินหนึ่งล้านครั้งแล้ว Smart Slider 3 ที่มีการดาวน์โหลดมากกว่า 500,000 ครั้ง อยู่ในอันดับที่สองในบรรดาปลั๊กอินตัวเลื่อนที่ดาวน์โหลดมากที่สุดในที่เก็บ คุณมีตัวเลือกมากมายสำหรับการนำเสนอสไลด์ในเนื้อหาของคุณ ปลั๊กอินสไลด์โชว์ Soliloquy เป็นหนึ่งใน ปลั๊กอินสไลด์โชว์ WordPress ที่รู้จักกันดีที่สุด ตั้งค่าได้ง่าย และคุณไม่ต้องกังวลกับการตั้งค่า ตัวสร้างสไลด์แบบลากแล้ววางของปลั๊กอินช่วยให้คุณสามารถจัดเรียงลำดับการแสดงสไลด์โชว์ของคุณได้

ปลั๊กอิน Slide Anything ของ WordPress ช่วยให้คุณสร้างตัวเลื่อนและภาพหมุนที่ตอบสนองต่อการสัมผัสได้ มีคุณสมบัติหลายอย่าง เช่น การแตะและลาก การโหลดรูปภาพแบบ Lazy Loading ความสามารถในการวนรอบวงล้อและเพิ่มลิงก์ไปยังสไลด์ใดก็ได้ นอกเหนือจากรุ่น Pro ปลั๊กอินยังมีป๊อปอัปที่เป็นโมดอลและการแบ่งหน้ารูปขนาดย่อนอกเหนือจากรุ่น Pro ปลั๊กอิน Ultimate Responsive Image Slider (URI) สำหรับ WordPress ช่วยให้คุณสร้างเทมเพลตตัวเลื่อนรูปภาพที่ตอบสนองได้สำหรับเว็บไซต์ของคุณ ในเวอร์ชันฟรีของโปรแกรม คุณสามารถเพิ่มสไลด์รูปภาพจำนวนเท่าใดก็ได้ในสไลด์เดียว และคุณยังสามารถเผยแพร่ตัวเลื่อนจำนวนเท่าใดก็ได้ คุณสามารถเพิ่มเลย์เอาต์การออกแบบ เอฟเฟกต์การเปลี่ยน รูปแบบสี ฟอนต์ Google มากกว่า 500 แบบสำหรับชื่อและคำอธิบายสไลด์ ลิงก์ไปยังสไลด์ ไลท์บ็อกซ์ และตัวควบคุมตัวเลื่อนเพิ่มเติมสำหรับเวอร์ชันพรีเมียม เมื่อใช้ WP Slider โดย Supsystic คุณสามารถสร้างเอฟเฟกต์ตัวเลื่อนจากรูปภาพและวิดีโอที่คุณอัปโหลดไปยังบัญชีโซเชียลมีเดียหรือบนอุปกรณ์ของคุณได้อย่างง่ายดายและรวดเร็ว

ด้วยปลั๊กอินนี้ คุณยังสามารถสร้างตัวเลื่อนที่ตอบสนองได้อย่างเต็มที่ เปิดใช้งานการปัด และวนซ้ำไม่สิ้นสุด รวมถึงรหัสย่อที่กำหนดเอง ฟังก์ชันการลากและวางมีให้ใช้งานในระดับคุณลักษณะพรีเมียมเท่านั้น ซึ่งช่วยให้คุณเชื่อมต่อรหัสย่อกับบล็อกและสไลด์รหัสย่อของ Gutenberg Depicter ตัวเลื่อน WordPress ที่มีคุณสมบัติฟรีที่ยอดเยี่ยม เช่น ตัวเลื่อนโพสต์ ตัวเลื่อนวิดีโอ แอนิเมชั่นที่ราบรื่นสำหรับองค์ประกอบและสไลด์ทั้งหมด และอื่นๆ เป็น ตัวเลื่อน WordPress รุ่นต่อไป Meta Slider ได้รับการให้คะแนนจากผู้ใช้และดาวน์โหลดปลั๊กอินตัวเลื่อนมากที่สุดในชุมชน Smart Slider 3 ซึ่งเป็นปลั๊กอินตัวเลื่อน WordPress ที่ออกแบบมาสำหรับมืออาชีพ เป็นเครื่องมือที่เหมาะสำหรับผู้เริ่มต้น มีแถบเลื่อนหลายตัวที่สามารถใช้ได้ใน Meta, Flex และ Arconix เหนือสิ่งอื่นใด บนที่เก็บปลั๊กอิน คุณจะพบปลั๊กอินตัวเลื่อน WordPress เกือบ 1,000 ตัว ปลั๊กอินตัวเลื่อนเพิ่มเติมเหล่านี้ควรนำมาพิจารณาร่วมกับเนื้อหา หากคุณต้องการอะไรที่มีคำกัดมาก Genesis Responsive Slider เหมาะสำหรับคุณ

วิธีเพิ่ม Slider ใน WordPress Custom Theme

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

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

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

ในขั้นตอนที่ 3 คุณจะต้องสร้างเนื้อหาสำหรับสไลด์แต่ละประเภท ควรตั้งค่าแถบเลื่อนเพื่อให้มีลักษณะที่น่าดึงดูดยิ่งขึ้น คุณสามารถเปลี่ยนการนำทางในแถบเลื่อนของคุณ เช่น ลูกศร สัญลักษณ์แสดงหัวข้อย่อย และภาพตัวอย่างขนาดย่อ ในขั้นตอนที่ 5 หากคุณเปิด/ปิดองค์ประกอบเหล่านี้ คุณสามารถกำหนดสไตล์ได้ตามที่เห็นสมควร เราได้รวบรวมคำแนะนำทีละขั้นตอนสำหรับการเพิ่มตัวเลื่อนในไซต์ของคุณ Smart Slider 3 มีคุณสมบัติมากมาย รวมถึงความสามารถในการทำงานกับทั้งตัวแก้ไข Gutenberg และตัวแก้ไขแบบคลาสสิก การสร้างไซต์ประเภทนี้จะง่ายกว่ามากหากคุณใช้แถบเลื่อนเหล่านี้ เครื่องมืออื่นๆ ที่คุณสามารถใช้ปรับปรุงไซต์ของคุณ ได้แก่ กล่องไฟ พื้นหลังวิดีโอ และอื่นๆ

วิธีเพิ่มแกลเลอรีตัวเลื่อนใน WordPress

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

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

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

แกลลอรี่ Slider คืออะไร?

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

ทำไมภาพหมุนจึงยอดเยี่ยมสำหรับการแสดงภาพถ่ายหลายภาพ

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

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

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

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

ปลั๊กอินนี้สร้างโดยผู้ร่วมให้ข้อมูลจำนวนมาก ครึ่งแรกของปี 2022 ถูกกำหนดเป็น 26.0 มิถุนายน ถึง 11 สิงหาคม ตั้งแต่วันที่ 21 กรกฎาคม 2021 ถึง 22 กรกฎาคม 2022 จะมีเทศกาลสามวัน วันสุดท้ายของงานนี้คือ 27 มกราคม 2564 ระหว่างวันที่ 15 ตุลาคมถึง 21 ตุลาคม 2562 วันที่จัดงานนี้ วันที่สำหรับ 2.12.11 – 09 มีนาคม 2021 และ 2.12.11 – 19 มีนาคม 2021 จะถูกเพิ่มในภายหลัง

การเพิ่มและลบแถบเลื่อนออกจากหมวดหมู่ใน Woocommerce

คุณสามารถลบหรือเพิ่มตัวเลื่อนไปยังหมวดหมู่ได้โดยไปที่ WooCommerce > Product Slider และคลิกที่หมวดหมู่ที่คุณต้องการเปลี่ยน คุณควรเปลี่ยนตัวเลือกที่คุณต้องการบันทึกหมวดหมู่