WordPress Anchor Link: วิธีเพิ่ม Smooth Page Scroll

สวัสดีชาวเน็ต!

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

นอกจากนี้ ฉันจะเปิดเผยวิธี เข้าถึงสมอจากหน้าอื่น

1. เราจะเพิ่มรหัสที่กำหนดเองใน HTML และใช้ # ในลิงก์เพื่อบอก WordPress ว่าลิงก์นี้อยู่ในหน้าเดียวกัน

2. เพื่อให้การเลื่อนเป็นไปอย่างราบรื่น เราจะใช้หน้าปลั๊กอิน WordPress เลื่อนไปที่ id

หลังจากบทช่วยสอนนี้ คุณจะได้รับหนึ่งในรอยสักเหล่านี้...

เพื่อให้ สาวๆสามารถเชื่อมโยงถึงคุณได้จากทุกที่

ฉันยังได้ทำวิดีโอเกี่ยวกับการเพิ่มลิงก์สมอใน WordPress:

สารบัญ:

ตั้งค่า Simple WordPress Anchor Link โดยไม่ต้องใช้ปลั๊กอิน

วิธีเชื่อมโยงไปยังลิงค์สมอจากหน้าอื่น

ปลั๊กอิน Anchor Link พร้อม Smooth Page Scroll

ตั้งค่า Simple WordPress Anchor Link โดยไม่ต้องใช้ปลั๊กอิน

เอาล่ะ วิธีที่ง่ายที่สุดในการเพิ่มลิงก์สมอบน WordPress ของคุณ ไม่ต้องมีปลั๊กอินใดๆ

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

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

มาเริ่มกันเลย. เพียงให้แน่ใจว่าคุณลงชื่อเข้าใช้ WordPress และค้นหาโพสต์ที่คุณต้องการเพิ่มลิงก์ Anchor

ไปที่ข้อความที่คุณต้องการสร้างเป็น ลิงก์สมอ

มาแปลงข้อความนี้เป็นลิงค์โดยคลิกที่นี่

ถัดไป ตั้งชื่อลิงก์ แต่คุณต้องใส่ เครื่องหมาย # ข้างหน้า

“อย่าใช้อักขระพิเศษใดๆ หากคุณต้องการแยกคำ คุณสามารถใช้ยัติภังค์"

รหัสสามารถเป็นอะไรก็ได้ แต่ฉันแนะนำให้ใช้สิ่งที่ สั้น แต่สื่อความหมาย

เพราะในภายหลัง คุณจะเห็นลิงก์เหล่านี้ใน Google Analytics เนื่องจาก Google สามารถเชื่อมโยงไปยังส่วนต่างๆ ของไซต์ของคุณได้

ตัวอย่างเช่น ฉันจะใช้ #anchor-link-info

และบันทึกการตั้งค่าลิงค์

อ้อ แน่ใจว่าคุณใช้แฮชแท็กอย่างถูกวิธี คุณจะได้ไม่จบลงแบบนี้

ตอนนี้ถ้าเราจะไปที่เว็บไซต์และพยายามคลิกที่ลิงค์ใหม่ จะไม่มีอะไรเกิดขึ้น ยกเว้นว่าจะมี #anchor-link-info ใน URL

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

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

ฉันมักจะเชื่อมโยงไปยังส่วนหัวในข้อความเช่นนี้

ถัดไป คุณต้องสลับ โหมดจากภาพเป็นข้อความ โดย สามารถทำได้ที่มุมบนสุดของฟิลด์โพสต์

จากนั้นค้นหาส่วนหัวในมุมมองข้อความ (ควรเน้นไว้)

ตอนนี้คุณจะเห็นส่วนหัวล้อมรอบ <h2></h2> นี่เป็นเพียงโค้ด HTML สำหรับส่วนหัว 2 (โครงสร้างคล้ายกับใน Microsoft Word)

ต่อไป ให้เว้นวรรคระหว่าง “h2” กับ “>” และเพิ่มสิ่งต่อไปนี้:

id=”#anchor-link-info”

ดังนั้นคุณควรมี:

<h2 id=”#anchor-link-info”> แทนที่จะเป็น <h2>

“เพียงแค่แทนที่ anchor-link-info ด้วย anchor id ของคุณเอง ”

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

จากนั้น บันทึกโพสต์ และไปดูบนเว็บไซต์

เมื่อคุณคลิกลิงก์ คุณควรไปที่แท็กสมอ

ฉันรู้ดีว่าม้วนกระดาษนี้กะทันหันมาก แต่การตั้งค่าและทำงานได้ดีนั้นง่ายมาก

หากคุณ ต้องการให้มันราบรื่น เราต้องใช้จาวาสคริปต์หรือ ใช้ปลั๊กอิน

ฉันจะแสดงวิธีดำเนินการนี้โดยใช้ปลั๊กอินด้านล่าง

วิธีเชื่อมโยงไปยังลิงค์สมอจากหน้าอื่น

หากต้องการเชื่อมโยงไปยังสมอจากหน้าอื่น คุณเพียงแค่เพิ่ม #your-anchor-name ที่ส่วน ท้ายของ URL โพสต์ของคุณ (เนื่องจากคุณได้ตั้งค่า anchor บนโพสต์ของคุณ ตามที่เราได้ทำข้างต้น)

นี่คือวิธีการทำทีละขั้นตอน

1. หยิบ URL ของโพสต์

2. เปิดหน้าต่างเบราว์เซอร์ใหม่

3. และที่ส่วนท้ายของ URL ให้เพิ่มสมอ (พร้อมแฮชแท็ก)

ตัวอย่างเช่น: #anchor-link-info

4. กด Enter และหน้าจะเปิดขึ้นในส่วนด้านขวา

ตัวอย่างเช่น URL สำหรับส่วนนี้บนเว็บไซต์ของฉันคือ https://punchsalad.com/wordpress-tips/wordpress-anchor-link #anchor-link-from-other-page

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

ปลั๊กอิน Anchor Link พร้อม Smooth Page Scroll

จะทำ อย่างไรถ้าคุณต้องการเลื่อนหน้า WordPress ที่ราบรื่น เมื่อคุณคลิกที่ลิงค์สมอ? สำหรับสิ่งนี้ คุณต้องมี javascript

วิธีที่ง่ายที่สุดคือการติดตั้งปลั๊กอิน WordPress ที่เรียกว่า “เลื่อนหน้าไปที่ id”

โดยทำตามขั้นตอนเหล่านี้:

1. ไปที่ปลั๊กอินของคุณและเพิ่มใหม่

2. ในช่องค้นหาประเภทหน้าเลื่อน

3. ติดตั้งปลั๊กอิน

4. เปิดใช้งาน

ตอนนี้ ปลั๊กอินนี้มี การตั้งค่าต่างๆ มากมาย และคุณสามารถเล่นกับมันได้

การตั้งค่าอยู่ในแถบเมนูด้านซ้าย: การตั้งค่า > เลื่อนหน้าไปที่ ID

ฉันพบว่าปลั๊กอิน ใช้งานได้ดีตั้งแต่แกะกล่อง ดังนั้นฉันจะเก็บทุกอย่างไว้เป็นค่าเริ่มต้น

“สิ่งหนึ่งที่ต้องจำไว้คือ หากคุณใช้ การโหลดแบบ Lazy Loading ปลั๊กอินอาจไม่พบจุดที่ถูกต้องบนหน้า”

ต่อไป มาตั้งค่าการเชื่อมโยงจุดยึดกับปลั๊กอิน

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

อย่างที่คุณเห็น มีไอคอนใหม่ 2 ไอคอนถัดจากไอคอนแก้ไขข้อความมาตรฐาน

อย่างแรกคือ การตั้งค่าลิงค์ และอันที่มี ตาวัวเป็นสมอ หรือเป้าหมายของลิงค์

ขั้นแรก ให้เพิ่มลิงก์สมอโดยคลิกที่ไอคอนลิงก์

ป๊อปอัปจะปรากฏขึ้นและจะขอ URL

เพียง ใช้รหัสที่มี # เช่น #anchor-link-info

นอกจากนี้ คุณต้องรวมคลาสที่กำหนดเอง “ps2id” ซึ่งบอกให้ปลั๊กอินเลื่อน

และถ้าเราดูในมุมมองข้อความ คุณจะเห็นว่ามีการเพิ่มคลาส ps2id ใหม่

ทั้งหมดเป็นสิ่งที่ดี!

ถัดไป เลื่อนลงไปยังจุดที่คุณต้องการเพิ่มจุดยึด

จากนั้นวางเคอร์เซอร์ไว้หลัง ส่วนหัว ..

แล้ว คลิกที่ไอคอนเป้า

ในขณะเดียวกันให้เพิ่ม id เดียวกัน กับด้านบน แต่ ไม่มี # ดังนั้น “anchor-link-info”

คุณจะเห็นว่า ปลั๊กอินเพิ่มรหัสย่อ

ไม่เป็นไร จะไม่ปรากฏบนเว็บไซต์ อยู่ห่างออกไปเพียงเพื่อบอก WordPress ว่าจะวางสมอไว้ที่ใด

ถัดไป บันทึกการเปลี่ยนแปลงของคุณ

เรามาดูกันว่ามันมีลักษณะอย่างไรบนเว็บไซต์

เพียง รีเฟรชหน้า และ คลิกที่ลิงค์ ...

มันจะเลื่อนอย่างราบรื่นไปยังจุดยึดที่คุณเพิ่งตั้งไว้

อย่างที่คุณเห็น รหัสย่อไม่ปรากฏทุกที่ !

อัศจรรย์! ใช่มั้ย?

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

ตัวอย่างเช่น คุณจะเห็นว่ารหัสสำหรับบทความนี้คือ:

#simple-wordpress-anchor-link
#anchor-link-from-other-page
#anchor-link-plugin

และลิงก์จะอยู่ที่ด้านบนของหน้าใน "เนื้อหา" ทำให้ง่ายต่อการเลื่อนไปยังส่วนต่างๆ

ที่กล่าวว่าฉันต้อง ปิดการใช้งานปลั๊กอินการโหลดแบบ Lazy Loading เนื่องจากฉันมี WordPress แบบ Lazy Loading

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