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

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

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

คุณใช้ปลั๊กอินสไลด์โชว์อะไร? บอกเราในความคิดเห็นด้านล่าง

Meta Slider - ตัวเลื่อนสำหรับ WordPress

เมตาสไลเดอร์เป็นแถบเลื่อน WordPress ที่ได้รับความนิยมมากที่สุดโดยมียอดดาวน์โหลดมากกว่า 2 ล้านครั้ง
มีแถบเลื่อน jQuery สี่ตัว - Nivo Slider (ตอบสนอง, เอฟเฟกต์การเปลี่ยนแปลง 16 แบบ, สี่ธีม), Coin Slider (เอฟเฟกต์การเปลี่ยนแปลงสี่แบบ), Flex Slider 2 (ตอบสนอง, เอฟเฟกต์การเปลี่ยนแปลงสองแบบ, โหมดหมุนแบบหมุน), สไลด์ตอบสนอง (ตอบสนอง, เอฟเฟกต์จางเท่านั้น) .
การสร้างสไลด์โชว์ใหม่เป็นเรื่องง่าย - เพิ่มรูปภาพ เลือกแถบเลื่อนที่คุณต้องการใช้ จากนั้นปลั๊กอินจะพ่นรหัสย่อที่คุณสามารถเพิ่มได้ทุกที่บนเว็บไซต์ของคุณ
นอกจากนี้ยังมีปลั๊กอินเวอร์ชันโปรหากคุณต้องการจ่ายเงินสำหรับคุณสมบัติเพิ่มเติม

แถบเลื่อนแบบง่าย

ด้วยการดาวน์โหลดเกือบ 650,000 ครั้ง การค่อยๆ เปลี่ยน Slider Lite– ปลั๊กอินตัวเลื่อนยอดนิยมอันดับสอง

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

สไลเดอร์เรียบ

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

ว้าวสไลเดอร์

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

vSlider ตัวเลื่อนหลายภาพสำหรับ WordPress

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

SlideDeck 2 Lite ตัวเลื่อนเนื้อหาที่ตอบสนอง

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

EasyRotator สำหรับ WordPress – ปลั๊กอินตัวเลื่อน

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

ตัวเลื่อน WordPress ที่ตอบสนอง – Soliloquy Lite

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

ไซโคลนสไลเดอร์ 2

ไซโคลนสไลเดอร์ 2นำตัวเลื่อนกลับไปสู่พื้นฐาน ให้การติดตั้งที่ง่ายดาย แสดงแถบเลื่อนรูปภาพที่เรียบง่าย และมีคุณสมบัติต่างๆ เช่น การหน่วงเวลา ขนาด และการหยุดชั่วคราวเมื่อเลื่อนเมาส์
ปลั๊กอินรองรับรูปภาพ, YouTube, Vimeo, HTML ที่กำหนดเองและแถบเลื่อนที่โดดเด่น คุณสามารถลากสไลด์ของคุณเพื่อเปลี่ยนลำดับได้ โดยแถบเลื่อนเป็นแบบโต้ตอบได้
ปลั๊กอินนี้มีเวอร์ชันโปรด้วย

แถบเลื่อนที่ตอบสนอง

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

สไลเดอร์อัจฉริยะ 3

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

ตัวเลื่อนยอดนิยมและดีที่สุด
และมีผู้ชนะสองคน: เมตาสไลเดอร์และ สไลเดอร์อัจฉริยะ 3.

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

vSlider ตัวเลื่อนหลายภาพ,SlideDeck 2 Liteและ โซลิโลควีไลท์– นอกจากนี้ยังมีปลั๊กอินตัวเลื่อนที่ยอดเยี่ยมหากไซต์ของคุณมีรูปภาพมากเกินไปและคุณต้องการสร้างตัวเลื่อนจำนวนมาก ธีมทั้งสามนี้มุ่งเป้าไปที่มืออาชีพเพื่อดึงดูดลูกค้า - เพิ่มยอดขาย - พร้อมผลิตภัณฑ์ฟรี

หากคุณต้องการแถบเลื่อนที่เรียบง่ายโดยไม่ต้องยุ่งยากมากนัก Cyclone Slider 2 เหมาะสำหรับคุณอย่างแน่นอน มันเป็นแถบเลื่อนที่ยอดเยี่ยมที่ปรับแต่งได้ง่ายและไม่ต้องกังวลกับการตั้งค่าและตัวเลือกมากมาย

แต่หากในภายหลังคุณต้องการตัวเลื่อนที่มีฟังก์ชันการทำงานมากขึ้นและความสามารถในการวางตัวเลื่อนหลายตัวบนไซต์ของคุณ คุณจะไม่สามารถผ่าน Meta Slider ได้

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

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

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

เอาล่ะ เรามาเริ่มกันเลยดีมั้ย?

เมตาสไลเดอร์

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

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

ให้ฉันแสดงวิธีการทำงานกับโปรแกรมให้คุณดู

การติดตั้ง

ดังนั้นคุณสามารถอ่านบทความโดยละเอียดเกี่ยวกับการใช้ WordPress ในบล็อกของฉันได้ ให้เราทบทวนสั้นๆ ว่าต้องทำอะไรในสถานการณ์เฉพาะ ไปที่ส่วนปลั๊กอินแล้วเลือกตัวเลือก "เพิ่มใหม่" จากรายการ ในแถบค้นหาที่มุมขวาบน ให้ป้อน: "Meta Slider" และ Enter ทันทีที่หน้าที่มีแอปพลิเคชันที่ต้องการเปิดขึ้นให้คลิก "ติดตั้ง"

อย่าลืมเปิดใช้งาน Meta Slider ผ่านแท็บ "ติดตั้ง" หรือในหน้าต่างที่เปิดขึ้นมาหลังการติดตั้ง

ด้วยเหตุนี้ หมวดหมู่ใหม่ควรปรากฏในแผงควบคุมทางด้านขวา คุณสามารถซื้อเวอร์ชัน Pro ได้ในราคา $19 หรือใช้เวอร์ชันฟรี ในความคิดของฉัน ฟังก์ชั่นของมันค่อนข้างเพียงพอ ดังนั้นจึงไม่จำเป็นต้องซื้อเลย

ความเป็นไปได้

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

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

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

คุณยังมีตัวเลือกการออกแบบ 4 แบบ ในวิดีโอด้านล่าง ฉันจะแสดงให้คุณเห็นว่าแต่ละอันมีลักษณะอย่างไร

เวอร์ชัน Pro มีตัวเลือกทั้งหมดสำหรับเอฟเฟ็กต์ นั่นคือวิธีที่สไลด์หนึ่งจะแทนที่อีกสไลด์หนึ่ง สำหรับวิธีการแสดงผลแต่ละวิธี เวอร์ชันฟรีมีคุณสมบัติที่จำกัด แต่ก็ยังมีอีกมาก คุณจะพบทางเลือกที่ดี

นอกจากรูปแบบการออกแบบหลัก 4 รูปแบบแล้ว คุณยังสามารถเลือกโทนสีจากหนึ่งในสี่สีได้อีกด้วย

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

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

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

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

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

ที่ด้านล่างสุดของแผงด้านขวาจะมีรหัสย่อสำหรับแทรกในโพสต์และสำหรับ นักพัฒนาขั้นสูงต้องการสิ่งนี้ และสำหรับผู้เริ่มต้น ฉันจะแสดงวิธีสร้างเอฟเฟกต์ที่มีสไตล์โดยใช้วิธีการง่ายๆ แต่จะเพิ่มเติมในภายหลัง

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

บูรณาการบล็อก

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

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

เลือกชื่อที่ต้องการจากรายการแล้วคลิก "แทรกสไลด์โชว์"

พร้อม. ในกรณีของฉัน บนเว็บไซต์จะมีลักษณะเช่นนี้

หากต้องการวางบล็อกบนหน้าหลัก ให้ไปที่หมวด "รูปลักษณ์" - "วิดเจ็ต" ที่ด้านบนสุดคุณจะเห็น "Meta Slider"

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

ในเว็บไซต์ทดสอบของฉัน บล็อกทางด้านขวาจะมีลักษณะเช่นนี้

การออกแบบไซต์นี้เกี่ยวข้องกับการวางในพื้นที่เนื้อหาและส่วนท้ายซึ่งเป็นส่วนล่างของไซต์ ถ้าฉันต้องการเพิ่มบล็อกที่นี่ ฉันจะย้ายบล็อกไปยังตำแหน่งที่ถูกต้อง

การแสดงผลบนเว็บไซต์จะเปลี่ยนทันที

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

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

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

ฉันขอให้คุณประสบความสำเร็จและหากคุณชอบบทความนี้ สมัครรับจดหมายข่าว จนกว่าจะถึงครั้งต่อไป.

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

และแม้ว่าจะมีปลั๊กอินตัวเลื่อนอยู่มากมาย (สิ่งที่ฉันชอบในปัจจุบันคือ) แต่ก็ไม่มีปลั๊กอินสำหรับ FlexSlider ซึ่งเป็นตัวเลื่อนที่มี แป้นพิมพ์ลัดและใช้งานได้กับการเลื่อน หน้าจอสัมผัส.

ดาวน์โหลดแหล่งที่มา

ขั้นแรก ดาวน์โหลดซอร์สพร้อมโค้ดที่เราจำเป็นต้องใช้เร็วๆ นี้

ตัวเลื่อนจะมีลักษณะดังนี้:

ขั้นตอนที่ 1 การเตรียมการ

สิ่งแรกที่เราต้องทำคือ ติดตั้งปลั๊กอิน- สร้างโฟลเดอร์ /envato-flex-slider/และในนั้นมีไฟล์ชื่อ ' envato-flex-slider.php- ที่นี่เราจะเพิ่มข้อมูลและโค้ดที่จำเป็นทั้งหมดสำหรับปลั๊กอินของเรา โดยเริ่มจากบล็อกการประกาศปลั๊กอิน:

ฉันยังต้องการติดตั้งหลายรายการ ค่าคงที่สำหรับข้อมูลซึ่งฉันจะใช้บ่อยในปลั๊กอิน ด้านล่างการประกาศบล็อก แต่อยู่ก่อนแท็กปิด PHPฉันเพิ่มข้อมูลต่อไปนี้:

กำหนด("EFS_PATH", WP_PLUGIN_URL . "/" . Plugin_basename(dirname(__FILE__)) . "/"); กำหนด("EFS_NAME", "Envato FlexSlider"); กำหนด("EFS_VERSION", "1.0");

ฉันสร้างค่าคงที่สามค่า: เส้นทางไปยังปลั๊กอิน, ชื่อปลั๊กอินและ รุ่นปลั๊กอินซึ่งจำเป็นสำหรับการอัปเดตและเพื่อแจ้งไดเร็กทอรีปลั๊กอิน WordPress เกี่ยวกับการเปลี่ยนแปลงหากจำเป็น

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

ตอนนี้เราเตรียมการเสร็จแล้ว มาเพิ่มไฟล์และโค้ด FlexSlider กัน

ขั้นตอนที่ 2 เพิ่ม

ถึงเวลาเพิ่มส่วนสำคัญ: จาวาสคริปต์และ ซีเอสเอสสำหรับ Flex Slider เราจะทำสิ่งนี้โดยใช้ wp_enqueue_scriptและ wp_enqueue_style WordPress เองเพื่อหลีกเลี่ยงความขัดแย้ง คุณสามารถดาวน์โหลด FlexSlider ที่นี่- เราจะต้องมี 2 ไฟล์: jquery.flexslider-min.jsและ ในโฟลเดอร์ /ธีม/.

Wp_enqueue_script("flexslider", EFS_PATH."jquery.flexslider-min.js", array("jquery")); wp_enqueue_style("flexslider_css", EFS_PATH."flexslider.css");

ในทั้งสองบรรทัด เราจะตั้งชื่อสคริปต์ให้กับแต่ละสคริปต์ จากนั้นลิงก์ไฟล์ .js และ .css โปรดทราบว่าเรากำลังใช้ค่าคงที่ของเรา ESF_PATH- เราจำเป็นต้องใช้เส้นทางแบบเต็ม ไม่เช่นนั้นไฟล์จะลิงก์ไม่ถูกต้อง

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

สิ่งต่อไปที่เราต้องการทำคือเปิดใช้งาน JavaScript จริงซึ่งจะทำให้สคริปต์ทำงานได้ เราจะทำสิ่งนี้โดยใช้ฟังก์ชั่นของเราเองและ การกระทำ-ฟังก์ชั่นเวิร์ดเพรส

ฟังก์ชั่น efs_script() ( พิมพ์ " "; ) add_action("wp_head", "efs_script");

บรรทัดสำคัญที่นี่คือ add_action("wp_head", "efs_script");ซึ่งจะรันฟังก์ชันของเรา เลนส์เอฟเอฟ_สคริปต์()เมื่อ wp_head ถูกเรียก ฟังก์ชั่นของเราเพียงแค่ส่งออก Javascript ที่จำเป็นเพื่อให้ FlexSlide ทำงานได้

คุณอาจสังเกตเห็นว่าฉันใช้ ‘ เจคิวรี่’ แทนที่จะเป็นแบบดั้งเดิม ‘ $ ' ซึ่งมักใช้ในสคริปต์ JQuery ฉันทำเช่นนี้เพื่อให้สคริปต์ของเราไม่ขัดแย้งกับไลบรารี JavaScript อื่น ๆ เช่น ตามสคริปต์.

สุดท้ายเพียงคัดลอกโฟลเดอร์ /ธีม/ไปยังโฟลเดอร์ของคุณ /envato-flex-slider/.

ขั้นตอนที่ 3: รหัสย่อและแท็กเทมเพลต

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

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

ฟังก์ชั่น efs_get_slider())( //เราจะกรอกข้อมูลนี้ในภายหลัง ) /**เพิ่มรหัสย่อสำหรับตัวเลื่อน- เพื่อใช้ในโปรแกรมแก้ไข**/ ฟังก์ชั่น efs_insert_slider($atts, $content=null)( $slider= efs_get_slider ( ); return $slider; ) add_shortcode("ef_slider", "efs_insert_slider"); /**เพิ่มแท็กเทมเพลต- สำหรับใช้ในธีม**/ ฟังก์ชั่น efs_slider() ( print efs_get_slider(); )

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

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

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

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

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

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

ฟังก์ชั่น efs_register() ( $args = array("label" => __(CPT_NAME), "singular_label" => __(CPT_SINGLE), "public" => true, "show_ui" => true, "capability_type" => " post", "hierarchical" => false, "rewrite" => true, "supports" => array("title", "editor", "thumbnail")); register_post_type(CPT_TYPE , $args); ) add_action(" เริ่มต้น", "efs_register");

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

ทั้งหมด! สิ่งสุดท้ายที่เราต้องทำคือรวมไฟล์ใหม่ของเราด้วยการเพิ่ม need_once("slider-img-type.php");วี envato-flex-slider.php- ฉันเพิ่มไว้เหนือการเรียกสคริปต์ของเรา

ตอนนี้เรารู้วิธีฝังรูปภาพในตัวเลื่อนแล้ว กลับไปกรอกฟังก์ชันตัวเลื่อนทั่วไปของเรากัน

ขั้นตอนที่ 5 การสร้างสไลเดอร์

กลับไปที่โฆษณา เลนส์เอฟเอฟ_get_slider()และแทนที่ //เราจะกรอกข้อมูลนี้ในภายหลังดังต่อไปนี้:

"; $efs_query= "post_type=slider-image"; query_posts($efs_query); if (have_posts()) : while (have_posts()) : the_post(); $img= get_the_post_thumbnail($post->ID, "ใหญ่ "); $slider.="
• ".$img"
"; ในตอนท้าย; endif; wp_reset_query(); $slider.= "

"; return $slider;

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

หลังจากนี้เราสร้าง WordPress loop รวบรวมโพสต์ทั้งหมดเช่น เลื่อนภาพ(ประเภทโพสต์ที่เรากำหนดเอง) และแสดงรูปภาพในเวอร์ชันที่ใหญ่ขึ้น

หมายเหตุบางประการ

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

ขั้นตอนที่ 6 การทดสอบ

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

บทสรุป

นั่นคือทั้งหมดที่ แน่นอนว่ายังมีบางสิ่งที่สามารถปรับปรุงได้ในปลั๊กอิน ตัวอย่างเช่น การเพิ่มการรองรับตัวเลือกสำหรับการปรับแต่งขั้นสูงที่ FlexSlider สามารถนำเสนอได้ หรือการเพิ่มการรองรับสำหรับชื่อเรื่อง

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

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

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

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

1. ติดตั้งแถบเลื่อน WordPress และเพิ่มสื่อที่คุณต้องการใช้
2. ปรับแต่งแถบเลื่อนของคุณสำหรับ WordPress
3. วางแถบเลื่อนใหม่ในตำแหน่งที่คุณต้องการให้ปรากฏ

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

ทำไมคุณถึงต้องการตัวเลื่อนสำหรับ WordPress

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

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

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

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

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

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

วิธีสร้าง Slider สำหรับ WordPress (ใน 3 ขั้นตอน)

ในอีกไม่กี่ส่วนถัดไป เราจะแสดงวิธีสร้างแถบเลื่อนสำหรับ WordPress โดยใช้ Master Slider เราเลือกปลั๊กอินนี้เนื่องจากใช้งานง่าย มีคุณสมบัติเจ๋งๆ มากมาย และช่วยให้คุณสามารถติดตั้งแถบเลื่อนได้มากเท่าที่คุณต้องการ

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

ขั้นตอนที่ 1: ตั้งค่าตัวเลื่อน WordPress ของคุณและเพิ่มสื่อที่คุณต้องการใช้

เมื่อคุณเปิดใช้งานปลั๊กอินแล้ว มาสเตอร์สไลเดอร์คุณจะพบแท็บ Master Slider ใหม่ในแผงของคุณ คุณจะเห็นรายการแถบเลื่อน WordPress ทั้งหมดของคุณ (ซึ่งควรจะว่างเปล่าในขณะนี้) ไปข้างหน้าและกดปุ่ม สร้างแถบเลื่อนใหม่:

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

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

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

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

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

ขั้นตอนที่ 2: ปรับแต่ง WordPress Slider ของคุณ

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

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

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

แน่นอน คุณสามารถเลือกแผนการควบคุมใดก็ได้ที่คุณต้องการ จากนั้นคุณต้องไปที่แท็บ การตั้งค่าตัวเลื่อนซึ่งคุณสามารถปรับแต่งแถบเลื่อน WordPress ของคุณเพิ่มเติมได้

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

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

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

เราได้แสดงสกินเริ่มต้นในตัวอย่างของเราแล้ว แต่มีตัวเลือกดีๆ อื่นๆ ที่คุณสามารถเล่นได้ คุณสามารถเข้าสู่แถบเลื่อน WordPress ได้หากคุณชอบสิ่งนี้:

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

ขั้นตอนที่ 3: วางแถบเลื่อนใหม่ในตำแหน่งที่คุณต้องการให้ปรากฏ

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

หากต้องการค้นหารหัสย่อเหล่านี้ ให้ไปที่แท็บ มาสเตอร์สไลเดอร์ในแถบเครื่องมือและดูใต้คอลัมน์ รหัสย่อ:

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

หากคุณตรวจสอบเพจของคุณ มันควรมีลักษณะดังนี้ในอินเทอร์เฟซ:

โปรดจำไว้ว่าคุณสามารถสร้างแถบเลื่อนได้มากเท่าที่คุณต้องการโดยใช้ปลั๊กอิน Master Slider คุณยังสามารถลบสิ่งที่คุณไม่ต้องการใช้ในแท็บอีกต่อไปได้ มาสเตอร์สไลเดอร์โดยการกดปุ่ม ลบถัดจากรายการใดรายการหนึ่ง:

ตอนนี้คุณสามารถเริ่มสร้างแถบเลื่อน WordPress ที่ดีที่สุดสำหรับเว็บไซต์ของคุณได้แล้ว! ก่อนที่เราจะสรุป เรามาดูตัวเลือกปลั๊กอินอื่น ๆ กันก่อน

5 ปลั๊กอินตัวเลื่อน WordPress ที่ดีที่สุด

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

1.มาสเตอร์สไลเดอร์

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

คุณสมบัติที่สำคัญ:

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

ราคา: คุณสามารถทดลองใช้ Master Slider เวอร์ชันฟรีหรือเลือกเวอร์ชันพรีเมียมเต็มรูปแบบได้

2. สไลเดอร์อัจฉริยะ 3

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

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

คุณสมบัติที่สำคัญ:

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

ราคา: Smart Slider 3 นำเสนอเวอร์ชันพื้นฐานฟรีและระดับที่ต้องชำระเงินหลายระดับ

3.เมตาสไลเดอร์

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

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

คุณสมบัติที่สำคัญ:

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

ราคา: MetaSlider นั้นฟรีในไดเร็กทอรีปลั๊กอิน WordPress หรือคุณสามารถรับใบอนุญาตระดับพรีเมียมพร้อมคุณสมบัติเพิ่มเติมมากมาย

4. สไลเดอร์โดย WD

หากคุณเป็นคนที่ชอบปรับแต่งทุกรายละเอียดเล็กๆ น้อยๆ ของเว็บไซต์ของคุณ Slider by WD อาจเหมาะกับคุณ มันมีคุณสมบัติมากมายที่ทำให้แตกต่างจากปลั๊กอินตัวเลื่อนอื่น ๆ เช่น การรองรับหลายสไลด์ การออกแบบที่ตอบสนอง และอื่น ๆ

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

คุณสมบัติที่สำคัญ:

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

ราคา: Slider WD เวอร์ชันฟรีเป็นเครื่องมือที่เชื่อถือได้ แม้ว่าคุณจะสามารถอัปเกรดเป็นใบอนุญาตระดับพรีเมียมได้ก็ตาม

5. เลื่อนอะไรก็ได้

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

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

คุณสมบัติที่สำคัญ:

• ตั้งค่าแถบเลื่อนโดยใช้เนื้อหาประเภทใดก็ได้ที่คุณต้องการ
• เลือกจากเอฟเฟ็กต์การเปลี่ยนแปลงต่างๆ สำหรับสไลด์ของคุณ
• ใช้รหัสย่อในแถบเลื่อนของคุณ

ราคา:คุณสามารถทดลองใช้ Slide Anything Pro ได้ฟรี หรือเข้าถึงฟีเจอร์พิเศษบางอย่าง (เช่น ป๊อปอัป) ด้วยเวอร์ชันพรีเมียม

บทสรุป

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

คุณมีประสบการณ์ในการปรับแต่งแถบเลื่อน WordPress แล้วหรือยัง? บอกเราเกี่ยวกับเรื่องนี้ในส่วนความเห็นด้านล่าง!