สอนทำปุ่ม “กลับสู่ด้านบน” ในเว็บไซต์ WordPress ทำได้อย่างไร ?

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

การที่คนดูเว็บไซต์ของเรา กดปุ่ม Back to top อาจจะแบ่งได้เป็น 2 กรณีครับ

กรณีที่ 1 คนดูต้องการดูอย่างอื่นเพิ่มเติมในเว็บไซต์เรา

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

กรณีที่ 2 คนดูของเราต้องการกลับขึ้นไปอ่าน ซ้ำอีกที

แปลว่าในครั้งแรก คนดูของเราทำการอ่านเว็บเราคร่าวๆ แล้วทีนี้ เขาเห็นว่า เว็บไซต์ของเรามีข้อมูลที่เขาต้องการ ด้งนั้น คนดูของเราจึงย้อนกลับไป อ่านข้อมูลในเว็บไซต์ของเราจากด้านบนอีกครั้งครับ

วีธีการทำปุ่ม กลับสู่ด้านบน ในเว็บไซต์ WordPress ไม่ยาก

ก่อนอื่น ให้เราติดตั้ง Plugin เล็กๆตัวหนึ่งที่ชื่อ Scroll Top ครับ หรือ ชื่อเต็มๆก็คือ WPFront Scroll Top ครับ

https://th.wordpress.org/plugins/wpfront-scroll-top/

หรือไปที่ Link นี้ได้เลยครับ เมื่อทำการติดตั้งเสร็จแล้ว อย่าลืม Activate เจ้า WPFront Scroll Top ด้วยนะครับ

ตั้งค่า WPFront Scroll Top

การตั้งค่า WPFront Scroll Top นั้นมีตัวเลือกการตั้งค่าที่หลากหลายมากครับ ค่าที่จำเป็นเราสามารถตั้งค่าได้ดังนี้ครับ

เปิดใช้งานด้วย Enable และ Javascript Async

ให้เราเปิดใช้งาน Scroll Top ด้วยการติ๊กที่ Enable และ Javascript Async แต่ถ้าปุ่มไม่โผล่ หรือ มันกลับสู่ด้านบนไม่ได้ เราต้องปิดตัว Javascript Async ครับ

Scroll Offset

ค่านี้เอาไว้บอกว่า ให้ Scroll ลงมากี่ Pixel แล้วปุ่ม Scroll Top ค่อยโผล่ครับ การตั้งค่าให้ใส่ตัวเลข มีหน่วยเป็น Pixel ครับ

Button Size & Opacity

ปรับขนาดความกว้างและความยาวของปุ่ม มีหน่วยเป็น Pixel ครับ และ Opacity คือความใสของปุ่ม มีหน่วยเป็น % ครับ เราสามารถตั้งค่าได้ตามต้องการ

Button Fade Duration & Scroll Duration

คำว่า Duration คือระยะเวลาครับ Button Fade Duration คือระยะเวลาก่อนที่ปุ่มจะหายไป และ Scroll Duration คือ ระยะเวลาการกลับสู่ด้านบนว่าเราจะให้กดแล้วใช้เวลาเท่าไรในการไปสู่ด้านบนสุด

Auto Hide & Auto Hide After

การทำ Auto Hide คือ ซ่อนปุ่มอัตโนมัติ และ ให้ซ่อน ภายในเวลาที่เรากำหนดได้ คือ Auto Hide After นั่นเอง

Hide on Small Devices & Small Device Max Width

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

Hide on Small Window & Small Window Max Width

ข้อนี้จะคล้ายกับ ข้อก่อนหน้านี้ แต่เปลี่ยนจาก อุปกรณ์เป็น หน้าต่างของ เว็บบราวเซอร์ที่มีขนาดเล็กนั่นเอง การตั้งค่าลักษณะเดียวกับ ข้อก่อนหน้านี้ทุกประการ

Hide on WP-ADMIN & Hide on iframes

เราสามารถซ่อนปุ่มนี้จากหน้าจอ Admin ได้ครับ โดยใช้ Hide on WP-ADMIN และ ถ้าเว็บเราถูกนำไปฝังใน เว็บอื่น เราไม่ต้องให้มันขึ้นปุ่ม Back to top ได้โดยการเลือก Options Hide on iframes ได้ครับ

Button Style

เราสามารถเลือกรูปแบบการแสดงผลของเจ้าปุ่ม Back to top หรือ  Scroll Top ได้ครับ แต่ที่ง่ายที่สุดในกรณีนี้ผมเลือกเป็น Image ครับ

Button Action

การตอบสนองของปุ่มว่า เราจะทำให้ปุ่มของเราทำอะไรครับ ตัวเลือกที่ผมใช้คือ Scroll To Top ก็คือ การกลับสู่ด้านบนนั่นเองครับ

Location

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

Filter

สำหรับ Filter คือการตั้งค่าว่า เราจะให้ปุ่มนี้ แสดงหรือไม่แสดงที่หน้าไหนบ้างครับ

Image Button

เราสามารถเลือกรูปหรืออัพโหลด รูปปุ่มของเราได้เลยครับ

Image ALT

คือตั้งชื่อปุ่มในกรณี Search Engine มาอ่านครับ

สรุป

Plugin WPFront Scroll Top ตัวนี้ใช้งานง่ายอย่างมากครับ แค่ติดตั้งแล้วใช้เวลาตั้งค่าไม่กี่นาทีก็สามารถ มีปุ่ม “กลับสู่ด้านบน” ได้อย่างไม่ยากครับ