วิธีที่รวดเร็วในการสร้างแถบเลื่อนแบบกำหนดเองใน WordPress

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

วิธีง่ายๆ ในการสร้างแถบเลื่อนที่กำหนดเองใน WordPress

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

เพิ่มแถบเลื่อนที่กำหนดเองใน WordPress ด้วย Plugin

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

ก่อนอื่น คุณจะต้องติดตั้งและเปิดใช้งานปลั๊กอิน Advanced Scrollbar การดำเนินการนี้ง่ายพอ:

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

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

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

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

เพิ่มสีแถบเลื่อนที่กำหนดเองใน WordPress โดยใช้ CSS

ตามที่คุณสามารถสรุปได้จากคำบรรยาย วิธีนี้ใช้ CSS เพื่อจัดรูปแบบแถบเลื่อนของคุณ วิธีนี้พิสูจน์ตัวเองได้เร็วกว่าวิธีที่คุณใช้ jQuery อย่างไรก็ตาม สิ่งสำคัญที่ต้องกล่าวถึงคือ ใช้งานได้เฉพาะบนเบราว์เซอร์เดสก์ท็อปโดยใช้เอ็นจิ้นการเรนเดอร์ WebKit เช่น Google Chrome, Safari และ Opera น่าเสียดายที่มันจะไม่มีผลใดๆ กับเบราว์เซอร์มือถือหรือ Firefox และ Edge บนคอมพิวเตอร์เดสก์ท็อป จากที่กล่าวมา หากเป็นตัวเลือกที่คุณสนใจ นี่คือวิธีดำเนินการ

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

::-webkit-scrollbar {

-webkit-ลักษณะที่ปรากฏ: none ;

}

::-webkit-scrollbar {

ความกว้าง : 10px ;

}

::-webkit-scrollbar-track {

พื้นหลัง: #ffb400 ;

บอร์เกอร์ : 1px ของแข็ง #ccc ;

}

::-webkit-scrollbar-thumb {

พื้นหลัง: #cc00ff ;

บอร์เกอร์ : 1px แข็ง #eee ;

ความสูง : 100px ;

รัศมีเส้นขอบ: 5px ;

}

::-webkit-scrollbar-thumb: โฮเวอร์ {

พื้นหลัง: สีฟ้า ;

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

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