วิธีสร้างปุ่มเลื่อนกลับไปด้านบนใน WordPress

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

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

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

ปุ่ม Back-to-Top

ไม่เป็นความลับที่เนื้อหาแบบยาวกำลังได้รับความนิยมเพิ่มขึ้นบนเว็บ เรื่องนี้สมเหตุสมผล เนื่องจากเนื้อหาแบบยาวมีโอกาสมากขึ้นในการถ่ายทอดข้อมูลโดยละเอียด แสดงรูปภาพมากขึ้น และเพิ่ม Search Engine Optimization (SEO) อย่างไรก็ตาม เพียงแค่สร้างเนื้อหาที่ยาวและละเลย UX ก็อาจทำให้ผู้อ่านของคุณผิดหวัง

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

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

การเพิ่มปุ่มเลื่อนกลับไปด้านบนด้วย HTML

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

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

ขั้นตอนที่ 1

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

เมื่อคุณเพิ่มข้อมูลประจำตัวของไซต์ของคุณแล้ว ให้ไปที่ wp-content > themes > yourtheme > js (ธีมของคุณคือธีมที่คุณเลือกสำหรับไซต์ของคุณ):

ในโฟลเดอร์นี้ เราจะต้องสร้างไฟล์สคริปต์ที่จะกำหนดลักษณะการทำงานของปุ่มบนไซต์ของคุณ

ขั้นตอนที่ 2

ถัดไป คุณจะต้องสร้างไฟล์ใหม่ที่ชื่อ topbutton.js ภายในโฟลเดอร์ js ของคุณ ในการดำเนินการนี้ใน FileZilla ให้คลิกขวาที่จตุภาคขวาล่างและเลือก Create new file เมื่อไฟล์เปิดขึ้นในโปรแกรมแก้ไขข้อความที่คุณชื่นชอบ ให้วางโค้ดต่อไปนี้:

 jQuery(เอกสาร).พร้อม(ฟังก์ชัน($){
    วาร์ออฟเซ็ต = 100;
    ความเร็ววาร์ป = 250;
    ระยะเวลา var = 500;
        $(หน้าต่าง).เลื่อน(ฟังก์ชั่น(){
            ถ้า ($(นี้).scrollTop() < ออฟเซ็ต) {
                      $('.topbutton') .fadeOut(ระยะเวลา);
            } อื่น {
                      $('.topbutton') .fadeIn(duration); $('.topbutton') .fadeIn(ระยะเวลา);
            }
        });
     $('.topbutton').on('คลิก', function(){
            $('html, body').animate({scrollTop:0}, ความเร็ว);
            คืนค่าเท็จ;
            });
});

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

เมื่อคุณพอใจกับการตั้งค่าปุ่มแล้ว ให้บันทึกไฟล์และไปยังขั้นตอนต่อไป

ขั้นตอนที่ #3

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

คุณจะต้องวาง URL นี้ลงใน ไฟล์ style.css ของคุณเพื่อใช้ในไซต์ของคุณ ซึ่งจะนำเราไปสู่ขั้นตอนต่อไป

ขั้นตอนที่ #4

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

 .topbutton {
     ความสูง:50px;
     ความกว้าง:50px;
     ตำแหน่ง:คงที่;
     ขวา:5px;
     ด้านล่าง:5px;
     ดัชนี Z:1;
     background-image:url("http://example.com/wp-content/uploads/2015/01/topbutton.png");
     พื้นหลังซ้ำ:ไม่ซ้ำ;
     แสดง:ไม่มี;
}

อย่าลืมแทนที่ URL ลิงก์รูปภาพในข้อมูลโค้ดนี้ด้วย URL ที่คุณคัดลอกไว้ในขั้นตอนก่อนหน้า จากนั้นเลือก อัปเดตไฟล์ ซึ่งจะตั้งค่าปุ่มของคุณให้ปรากฏ

ขั้นตอนที่ #5

ตอนนี้คุณจะต้องบอก WordPress ว่าคุณต้องการใช้ไฟล์ JavaScript ที่คุณสร้างขึ้น ที่เหลืออยู่ในหน้า Editor ให้เปิดแท็บ Theme Functions (functions.php) :

ถัดไป วางสคริปต์ enqueue ต่อไปนี้:

 ฟังก์ชั่น my_scripts_method () {
     wp_enqueue_script(
           'สคริปต์ที่กำหนดเอง',
           get_stylesheet_directory_uri() . '/js/topbutton.js',
           อาร์เรย์ ( 'jquery' )
     );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

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

ขั้นตอนที่ #6

สุดท้าย ในการเพิ่มปุ่มของคุณที่ส่วนท้ายของหน้าเว็บ ให้ไปที่ไฟล์ Theme Footer (footer.php) ภายในหน้าจอ Editor แล้ววางข้อมูลโค้ดต่อไปนี้ (ควรวางไว้ก่อนแท็ก div ปิดเพื่อให้แน่ใจว่ามีระยะห่างที่เหมาะสม):

 <a href="#" class="topbutton"></a>

เลือก อัปเดตไฟล์ และคุณพร้อมแล้ว! ตอนนี้ปุ่มเมนูแบบ Back-to-top ของคุณควรแสดงบนหน้าเว็บไซต์ WordPress ของคุณ

การเพิ่มปุ่มเลื่อนกลับไปด้านบนด้วย Plugin

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

ด้านบน

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

ยิ่งไปกว่านั้น คุณยังสามารถตั้งค่าให้ปุ่มปรากฏบนเพจของคุณ ลดความยุ่งเหยิง และเพิ่ม UX ได้อีกด้วย

WPด้านหน้าเลื่อนด้านบน

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

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

เลื่อนหน้าไปที่ id

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

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

รองรับ WordPress ที่เชื่อถือได้และราคาไม่แพงด้วย WP Engine

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

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