สร้างเมนูคงที่เมื่อเลื่อนหน้า เมนูคงที่เมื่อเลื่อนหน้า วิธีแก้ไขเมนูด้านบนใน WordPress

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

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

On Scroll Header Effects ปลั๊กอิน jQuery อันทรงพลังสำหรับแถบนำทางแบบคงที่ คุณสามารถกำหนดเซกเมนต์บางส่วนบนเพจได้เมื่อทำการเลื่อน เมื่อถึงส่วนที่แผงจะเปลี่ยนและสามารถเปลี่ยนแปลงได้ทั้งหมด รูปร่าง. สามารถมีเซ็กเมนต์ดังกล่าวจำนวนเท่าใดก็ได้ในหนึ่งหน้า

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

สวัสดีผู้อ่านบล็อกไซต์ที่รัก นี่เป็นบันทึกสำหรับตัวเองมากกว่าเพื่อไม่ให้ลืมว่าฉันทำอะไรไปเมื่อต้องการคืนทุกอย่างกลับคืนมา ทุกอย่างเริ่มต้นเมื่อผู้อ่านคนหนึ่งแนะนำให้เขียนเกี่ยวกับปลั๊กอินสำหรับ WordPress ที่เรียกว่า Q2W3 Fix Widget (Sticky Widget) ซึ่งสามารถทำให้วิดเจ็ตใด ๆ ในแถบด้านข้างลอยหรือกล่าวอีกนัยหนึ่งคือแก้ไขแล้ว

เหล่านั้น. ขณะที่คุณเลื่อนหน้า คุณจะเห็นว่าส่วนหลักของแถบด้านข้างจะเพิ่มขึ้น แต่วิดเจ็ตที่อยู่ด้านล่างสุดจะยังคงอยู่ในพื้นที่ดูไม่ว่าคุณจะเลื่อนข้อความลงไปไกลแค่ไหนก็ตาม ฉันจะบอกทันทีว่าจะโพสต์อะไร การโฆษณาตามบริบทสิ่งนี้เป็นสิ่งต้องห้ามและสามารถถูกลงโทษได้ (ตามที่ปรากฏในความคิดเห็น - YAN อนุญาต แต่ Adsense ห้ามไม่ให้ทำเช่นนี้)

ปลั๊กอินนี้ใช้งานได้ดี แต่วิดเจ็ตในธีมของฉันถูกปิดใช้งาน ดังนั้นฉันจึงตัดสินใจ งานนี้โดยใช้โค้ด JavaScript สองสามบรรทัดที่ฉันพบบนอินเทอร์เน็ต

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

ทำไมต้องแก้เมนูแล้วทำแถบข้างลอย?

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

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

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

วิธีแก้ไขเมนูด้านบนใน WordPress

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

หากคุณจำได้ว่าในบทความเกี่ยวกับการเพิ่มประสิทธิภาพความเร็วในการโหลดหน้าเว็บคุณต้องพยายามรวม CSS และ JS ทั้งหมดเข้าด้วยกันเป็นอันเดียว (ในแง่ของสอง - อันหนึ่งสำหรับสไตล์และอีกอันสำหรับสคริปต์) ที่จริงแล้ว ฉันได้เพิ่มบรรทัดโค้ดที่ให้ไว้ด้านล่างลงในไฟล์ดังกล่าว แม้ว่าคุณสามารถเพิ่มได้โดยตรง รหัส HTMLล้อมรอบด้วยแท็กสคริปต์ ตัวอย่างเช่น สามารถทำได้ในเทมเพลต header.php ภายในแท็ก head

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

ในกรณีของฉัน โค้ดสำหรับแก้ไขเมนูด้านบนจะเป็นดังนี้:

$(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (บนสุด< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

ฉันขอเตือนคุณว่าคุณสามารถวางโค้ดส่วนนี้ลงใน:

  • ไฟล์ที่มีนามสกุล .js ที่อยู่ในโฟลเดอร์ที่มีธีมที่คุณใช้ (/wp-content/themes/theme) เหมาะสำหรับคุณเฉพาะในกรณีที่เขียนบรรทัดไว้ในไฟล์ header.php เพื่อโหลดพร้อมกับหน้าเว็บในเว็บไซต์ของคุณซึ่งอาจมีลักษณะดังนี้:
  • คุณสามารถใช้ไฟล์ header.php ได้เองโดยสรุป รหัสนี้ระหว่างแท็กเปิดและแท็กปิดและล้อมไว้ในแท็กสคริปต์ ตัวอย่างเช่น: $(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (สูงสุด< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • คุณยังสามารถเขียนโค้ดนี้ในแท็กสคริปต์ในตำแหน่งอื่นได้ สิ่งสำคัญคือมันโหลดอยู่ หน้าที่ถูกต้องบล็อก ตัวอย่างเช่น คุณสามารถทำได้ใน footer.php ก่อนแท็กปิดเนื้อหา

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

    ต่างจากโค้ดต้นฉบับ ฉันยังต้องเพิ่มความกว้าง: "100%" เพราะไม่เช่นนั้นขนาดเมนูจะลดความกว้างลง ซึ่งจะทำให้ภาพรวมเสีย

    เพื่อความชัดเจน ฉันจะให้โค้ด Html ที่สร้างเมนูด้านบนไว้ในของฉัน เทมเพลตเวิร์ดเพรสบล็อก (อยู่ในไฟล์ header.php ของฉันจาก ):

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