วิธีเพิ่มปุ่ม Back To Top ให้กับเว็บไซต์ WordPress ของคุณ

การเพิ่มปุ่มย้อนกลับไปยัง เว็บไซต์ WordPress อาจเป็นวิธีที่ดีในการปรับปรุงประสบการณ์ผู้ใช้ในเว็บไซต์ของคุณ ปุ่มนี้ช่วยให้ผู้เยี่ยมชมเลื่อนกลับไปที่ด้านบนสุดของหน้าได้อย่างรวดเร็ว โดยไม่ต้องใช้แถบเลื่อนหรือปุ่มย้อนกลับของเบราว์เซอร์ คุณสามารถเพิ่มปุ่มกลับไปด้านบนลงในไซต์ WordPress ของคุณได้หลายวิธี คุณสามารถใช้ปลั๊กอิน WordPress หรือคุณสามารถเพิ่มโค้ดด้วยตัวเอง หากคุณต้องการเพิ่มปุ่มด้วยตัวเอง คุณจะต้องเพิ่มโค้ดต่อไปนี้ในไฟล์ functions.php ของธีม WordPress: function my_back_to_top_button() { echo '↑'; } add_action( 'wp_footer', 'my_back_to_top_button' ); รหัสนี้จะเพิ่มปุ่มกลับไปที่ด้านบนอย่างง่าย ๆ ให้กับไซต์ WordPress ของคุณ หากคุณต้องการจัดรูปแบบปุ่ม คุณสามารถเพิ่ม CSS ต่อไปนี้ในไฟล์ style.css ของธีมของคุณ: #back-to-top { position: fixed; ด้านล่าง: 20px; ขวา: 20px; แสดง: ไม่มี; ตกแต่งข้อความ: ไม่มี; พื้นหลัง: #333; สี: #ffff; ช่องว่างภายใน: 10px; -webkit-border-รัศมี: 3px; -moz-border-รัศมี: 3px; รัศมีเส้นขอบ: 3px; } #back-to-top: hover { พื้นหลัง: #222; } หากคุณใช้ปลั๊กอิน WordPress เพื่อเพิ่มปุ่มกลับไปด้านบน คุณจะต้องปฏิบัติตามคำแนะนำของผู้เขียนปลั๊กอิน

หากเนื้อหาของคุณยาว คุณอาจต้องการรวมปุ่ม "กลับไปด้านบน" เพียงกดปุ่มลูกศรที่ด้านขวาของหน้าเพื่อเลื่อนไปด้านบน ธีม WordPress ยอดนิยมส่วนใหญ่มีปุ่มด้านหน้าไปด้านบน WPFront Scroll Top เป็นวิธีที่ยอดเยี่ยมในการเพิ่มปุ่ม back-to-top ลงในไซต์ WordPress ของคุณ คุณสามารถเข้าถึงตัวเลือกการปรับแต่งที่หลากหลายในปลั๊กอิน ดังนั้นคุณสามารถทำทุกอย่างที่คุณต้องการ หากคุณต้องการซ่อนปุ่มโดยอัตโนมัติ ให้ทำเครื่องหมายที่ปุ่ม 'ซ่อนอัตโนมัติ' แล้วตั้งเวลา นอกจากนี้ คุณสามารถใช้เพื่อยกเว้นบางหน้า ดังนั้นให้เลือกตัวเลือกที่เหมาะกับคุณที่สุด

กลับไปด้านบน ปุ่ม WordPress ไม่มีปลั๊กอิน

มีสองสามวิธีในการสร้างปุ่ม "กลับไปด้านบน" สำหรับไซต์ WordPress ของคุณโดยไม่ต้องใช้ปลั๊กอิน วิธีหนึ่งคือเพียงแค่สร้างลิงก์ภายในเนื้อหาของคุณที่ชี้ไปที่ด้านบนของหน้า ตัวอย่างเช่น คุณสามารถเพิ่มลิงก์ที่ส่วนท้ายของแต่ละโพสต์ที่ระบุว่า "กลับไปด้านบน"
อีกวิธีหนึ่งในการสร้างปุ่ม "กลับไปด้านบน" คือการใช้โค้ดเล็กน้อย คุณสามารถเพิ่มโค้ดต่อไปนี้ลงในไฟล์ functions.php ของธีม WordPress ได้:
ฟังก์ชั่น my_back_to_top_button () {
echo 'กลับไปด้านบน';
}
add_action( 'wp_footer', 'my_back_to_top_button' );
โค้ดนี้จะเพิ่มลิงก์ไปยังส่วนท้ายของไซต์ของคุณ ซึ่งเมื่อคลิกแล้ว จะนำผู้ใช้กลับไปที่ด้านบนสุดของหน้า

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

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

กลับไปด้านบน ปุ่ม WordPress Elementor

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

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

กลับไปด้านบน ปุ่ม Codepen

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

ลบปุ่มเลื่อนไปที่ด้านบน WordPress

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

ฉันจะลบปุ่มใน WordPress ได้อย่างไร

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

ฉันจะวาง Scroll Back ไว้ที่ Elementor ปุ่มด้านบนได้อย่างไร

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

ฉันจะหยุด WordPress จากการเลื่อนได้อย่างไร

คุณสามารถปิดใช้งาน Infinite Scroll ได้โดยเลือกตัวเลือก "Infinite Scroll" ใน My Site > Settings Writing > Scroll นอกจากนี้ หากคุณเพิ่มวิดเจ็ตส่วนท้าย คุณจะไม่สามารถใช้ตัวเลือก Infinite Scroll ได้

ฉันจะข้ามไปที่ด้านบนของหน้าใน WordPress ได้อย่างไร

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

ปุ่มย้อนกลับของ WordPress ไปยังหน้าก่อนหน้า

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

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