คู่มือสำหรับนักพัฒนา เพิ่มการเลื่อนแบบเรียบไปที่เอฟเฟกต์บน WordPress โดยใช้ JQuery
เผยแพร่แล้ว: 2022-06-03เราทุกคนต่างชื่นชอบ WordPress ในเรื่องความราบรื่นและความจริงที่ว่ามันทำให้สิ่งต่าง ๆ ง่ายขึ้นเมื่อใช้ระบบจัดการเนื้อหาที่มีประสิทธิภาพ
ไม่ใช่การพูดเกินจริง แต่การพัฒนาเว็บที่ง่ายและเข้าถึงได้ถือเป็นพรสำหรับผู้ดูแลเว็บใหม่ WordPress มีคุณสมบัติมากมายที่ช่วยให้เจ้าของเว็บไซต์ต่างๆ สามารถมอบอินเทอร์เฟซที่ลื่นไหลและโต้ตอบกับผู้ใช้ได้
ผู้ที่ยังใหม่กับ WordPress สามารถตรวจสอบบทช่วยสอนของ WordPress เกี่ยวกับแหล่งข้อมูลต่างๆ เช่น The Blog Starter ซึ่งมีคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีเริ่มต้นและจัดการบล็อกของคุณ
หากคุณมุ่งเน้นเฉพาะเนื้อหาบนเว็บไซต์ของคุณ เราอยากจะบอกคุณว่าเว็บไซต์ที่ตอบสนองและดึงดูดสายตามีความสำคัญพอๆ กับเนื้อหา
หากคุณมีเว็บไซต์อยู่แล้วและไม่รู้ว่าจะเริ่มต้นจากตรงไหน ให้ใช้เวลาและลงทุน 30 นาทีทุกวันเพื่อคิดเกี่ยวกับรูปลักษณ์และอินเทอร์เฟซของเว็บไซต์ของคุณ ไว้วางใจเราเพราะคุณจะค่อยๆ ค้นหาองค์ประกอบที่คุณต้องการแก้ไข เมื่อคุณเพิ่มพลังให้เว็บไซต์ของคุณด้วยความพยายามด้านภาพที่ยอดเยี่ยม อัตราการสนทนาจะเพิ่มขึ้น
และถ้าคุณเป็นคนที่ลงทุนอยู่แล้วในการมอบประสบการณ์การเยี่ยมชมเว็บไซต์ของคุณที่ราบรื่นให้กับผู้ใช้ รุ่งโรจน์ถึงคุณ! เรามีบทช่วยสอนดีๆ เตรียมไว้สำหรับทุกคนที่ต้องการเปลี่ยนแปลงเว็บไซต์และปรับปรุงประสิทธิภาพการมองเห็นโดยรวมของเว็บไซต์
ในบล็อกโพสต์นี้ ให้เราแนะนำคุณเกี่ยวกับการเพิ่ม Smooth Scroll ให้กับเอฟเฟกต์อันดับต้นๆ ใน WordPress ด้วยความช่วยเหลือของ jQuery
ทำไมต้องใช้ Smooth Scroll?
โดยปกติ เมื่อเว็บไซต์มีบทความยาวๆ และผู้ใช้กำลังอ่านบทความ พวกเขาอาจรู้สึกหงุดหงิดที่จะไปถึงจุดสิ้นสุดของหน้าเว็บ
ดังนั้น หากเว็บไซต์ของคุณสามารถเลื่อนขึ้นไปด้านบนได้อย่างราบรื่นในคลิกเดียว ผู้อ่านจะพบว่าเว็บไซต์ของคุณราบรื่นและราบรื่นอย่างยิ่ง
ดังนั้น หากคุณเป็นเจ้าของเว็บไซต์หรือนักการตลาดดิจิทัล คุณต้องเป็นนักฉวยโอกาสและทำทุกวิถีทางเพื่อดึงดูดผู้ชมทั่วไปให้มาที่เว็บไซต์ของคุณมากขึ้น
วิธีเพิ่ม Smooth Scroll to Top Effect ใน WordPress
หากต้องการเพิ่มการเลื่อนอย่างราบรื่นให้กับ To Effect ใน WordPress คุณสามารถใช้วิธีใดก็ได้ด้านล่างนี้:
1. การใช้โค้ดที่เขียนด้วย jQuery
2. การใช้ปลั๊กอิน
เรามักจะชอบเขียนโค้ดมากกว่าปลั๊กอินเพราะจะไม่ทำให้เกิดอาการสะอึกหากทำอย่างถูกวิธี ปลั๊กอินบางครั้งสามารถลดความเร็วในการโหลดของเว็บไซต์ได้ แต่การเข้ารหัสสามารถช่วยให้คุณเพิ่มการปรับแต่งบางอย่างได้โดยไม่ส่งผลต่อความเร็วตั้งแต่แรก โดยเฉพาะอย่างยิ่ง ในบทช่วยสอนนี้ เราจะอธิบายขั้นตอนการเข้ารหัส
จะเพิ่ม Smooth Scroll to Top Effect ใน WordPress ด้วยการเข้ารหัสได้อย่างไร?
ในการเพิ่มเอฟเฟกต์บนหน้าเว็บไซต์ WordPress ของคุณอย่างราบรื่นโดยใช้การเข้ารหัส คุณต้องปฏิบัติตามสี่ขั้นตอนเหล่านี้:
- สร้างไฟล์ “Smoothscrolleffect.js”
- แนบฟังก์ชัน “Smoothscrolleffect.js” กับธีมของคุณ
- เพิ่มไอคอนในธีม
- การเชื่อมโยงเอฟเฟกต์กับหน้าเว็บ
เมื่อคุณทำ 4 ขั้นตอนเหล่านี้เสร็จแล้ว คุณก็พร้อมที่จะรับผู้อ่านเพิ่มขึ้น หากคุณเป็นโปรแกรมเมอร์ คุณสามารถสร้างสคริปต์ของคุณเองได้ตามความต้องการของคุณ
สำหรับผู้ที่ไม่ใช่โปรแกรมเมอร์ เราได้อธิบายแต่ละขั้นตอนอย่างละเอียดและเพิ่มโค้ดที่จำเป็น ดังนั้น คุณเพียงแค่ต้องอ่านขั้นตอนและดำเนินการตามนั้น
ขั้นตอนที่ 1: สร้างไฟล์ “Smoothscrolleffect.js”
นี่คือไฟล์ที่สำคัญที่สุดที่คุณจะสร้างขึ้นสำหรับขั้นตอนนี้ หากคุณล้มเหลวในการดำเนินการขั้นตอนนี้อย่างมีประสิทธิภาพ คุณอาจไม่สามารถเลื่อนได้อย่างสมบูรณ์
ในขั้นตอนนี้ เราจะสร้างไฟล์ “.js” (jQuery) ซึ่งมีฟังก์ชันที่จะเพิ่มการเลื่อนแบบเรียบไปที่เอฟเฟกต์ยอดนิยม ทำตามขั้นตอนเพื่อสร้างไฟล์ “.js” และอัปโหลดไปยังไดเรกทอรีของเว็บไซต์
- สร้างไฟล์แผ่นจดบันทึกใหม่ในระบบของคุณ
- คัดลอกรหัสต่อไปนี้:
jQuery(เอกสาร).พร้อม(ฟังก์ชัน($){
$(หน้าต่าง).เลื่อน(ฟังก์ชั่น(){
ถ้า ($((นี้).scrollTop() < 200) {
$('#smoothup') .fadeOut(); $('#smoothup') .fadeOut();
} อื่น {
$('#smoothup') .fadeIn(); $('#smoothup') .fadeIn(); $('#smoothup').
}
});
$('#smoothup').on('คลิก', function(){
$('html, body').animate({scrollTop:0}, 'เร็ว');
คืนค่าเท็จ;
});
});
- วางรหัสลงในไฟล์แผ่นจดบันทึก
- บันทึกด้วยชื่อใดก็ได้ แต่ต้องแน่ใจว่านามสกุลเป็น “.js”
- เข้าสู่ระบบ cPanel ของเว็บไซต์ของคุณ
- ไปที่ไดเร็กทอรีของเว็บไซต์ “/js/”
หมายเหตุ: หากเว็บไซต์ของคุณไม่มีไดเร็กทอรี js คุณต้องสร้างไดเร็กทอรีขึ้นมา
- อัปโหลดไฟล์ “.js” ที่คุณสร้างไว้บนระบบของคุณในไดเรกทอรี
ขั้นตอนที่ 2: แนบการเลื่อนแบบเรียบเข้ากับธีม
ในขั้นตอนข้างต้น เราได้สร้างไฟล์ (ด้วยฟังก์ชันการเลื่อนแบบเรียบ) ในไดเร็กทอรีของเว็บไซต์ และในขั้นตอนนี้ เราจะเชื่อมโยงฟังก์ชันการเลื่อนแบบเรียบกับธีมของเรา โดยทำตามขั้นตอนต่อไปนี้:
ไปที่ตัวแก้ไขธีมของคุณในแดชบอร์ดผู้ดูแลระบบ WordPress เปิด function.php เพื่อแก้ไข และวางโค้ดต่อไปนี้ลงไป
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', อาร์เรย์ ( 'jquery' ), ”, จริง );
กด "บันทึกการเปลี่ยนแปลง"
ขั้นตอนที่ 3 เพิ่มไอคอนให้กับธีม
เห็นได้ชัดว่าคุณต้องการเพิ่มไอคอนในเว็บไซต์ของคุณซึ่งคุณสามารถเสนอให้ผู้อ่านเลื่อนไปที่ด้านบนได้ นอกจากนั้น คุณต้องทำให้มีการโต้ตอบและตอบสนองมากขึ้น คุณสามารถทำได้ด้วยความช่วยเหลือของ CSS ดังต่อไปนี้:
- ไปที่ stylesheet.css ของธีมของคุณในเครื่องมือแก้ไขธีม
- คัดลอกรหัสต่อไปนี้
#สมูทอัพ{
ความสูง: 40px;
ความกว้าง: 40px;
ตำแหน่ง:คงที่;
ด้านล่าง:50px;
ขวา:100px;
ข้อความเยื้อง:-9999px;
จอแสดงผล:ไม่มี;
พื้นหลัง:url(“http://www.example.com/wp-content/uploads/2013/07/top_icon.png”);
-webkit-transition-duration: 0.4 วินาที;
-moz-การเปลี่ยนแปลง-duration: 0.4s; ระยะเวลาการเปลี่ยนภาพ:0.4s;
}
#smoothup: โฮเวอร์ {
-webkit-transform: หมุน (360deg) }
พื้นหลัง: url(”) ไม่ซ้ำ;
}
- วางลงในสไตล์ชีตของธีมของคุณ
- กด "บันทึกการเปลี่ยนแปลง"
ที่นี่คุณสามารถเปลี่ยนไอคอนได้ตามความต้องการของคุณ เราใช้ข้อมูลอ้างอิง ในการเปลี่ยนรูปภาพ คุณสามารถอัปโหลดไปยังเว็บไซต์ของคุณและวางลงในช่อง พื้นหลัง: URL ในโค้ดด้านบนได้
ขั้นตอนที่ 4: เชื่อมโยงการเลื่อนแบบเรียบกับหน้าเว็บ
ตอนนี้เราได้สร้างไฟล์ “.js” แล้ว และอัปโหลดไปยังไดเร็กทอรีของเว็บไซต์ แนบไปกับธีม และสร้างไอคอนสำหรับเอฟเฟกต์ ถึงเวลาสำหรับขั้นตอนสุดท้าย ตอนนี้เราจะเชื่อมโยงเอฟเฟกต์การเลื่อนที่ราบรื่นกับหน้าเว็บทั้งหมดของเว็บไซต์ ทำตามขั้นตอน:
- เปิด footer.php ในตัวแก้ไขธีม
- คัดลอกรหัสต่อไปนี้:
- <a href=”#top” id=”smoothup” title=”กลับไปด้านบน”></a>
- วางลงในหน้า footer.php
- กด "บันทึกการเปลี่ยนแปลง"
ขอแสดงความยินดี! คุณได้เพิ่มเอฟเฟกต์การเลื่อนบนสุดที่ราบรื่นให้กับเว็บไซต์ WordPress ของคุณสำเร็จโดยใช้ jQuery
บทสรุป
เราหวังว่าบทช่วยสอนข้างต้นจะช่วยให้คุณเพิ่มเอฟเฟกต์ 'การเลื่อนไปที่ด้านบนอย่างราบรื่น' ใน WordPress โดยใช้ JQuery และดึงดูดผู้ใช้ของคุณด้วยประสบการณ์การนำทางเว็บไซต์ที่ยอดเยี่ยม
หากคุณประสบปัญหาใด ๆ ในการดำเนินการตามขั้นตอนที่กล่าวถึงข้างต้น โปรดแจ้งให้เราทราบโดยแสดงความคิดเห็นด้านล่าง
