คุณเคยเรียกดูเว็บไซต์และพบว่าเมนูการนำทางจะปรากฏที่ด้านบนเสมอหรือไม่?
โดยหลักการแล้วเมนูการนำทางจะแสดงในลักษณะที่หายไปเมื่อเลื่อนหน้า เมนูการนำทางที่มองเห็นได้จะลอยอยู่เสมอและไม่ว่าผู้ใช้จะเลื่อนลงอย่างไร
ในบทช่วยสอนนี้เราจะแสดงวิธีสร้างเมนูลอยบนบล็อก WordPress ของคุณอย่างง่ายดาย
หากคุณยังไม่ได้สร้างเว็บไซต์หรือบล็อกบน WordPress เราขอเชิญคุณปรึกษาวิธีติดตั้งบล็อก WordPress ใน 7 ขั้นตอน วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ
ถ้าเสร็จแล้วเรามาดูสิ่งที่เรากังวลในวันนี้
วิธี 1: วิธีเพิ่มเมนูแบบลอยบน WordPress โดยใช้ปลั๊กอิน
วิธีนี้ง่ายกว่าและเร็วกว่า หากคุณยังไม่ได้ตั้งค่าเมนูนำทางคุณสามารถทำได้ เรียนรู้วิธีการทำ.
สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน " เมนูเหนียว (หรืออะไร!) เราเลื่อน " หากคุณไม่ทราบวิธีติดตั้งปลั๊กอินคุณ สามารถอ่านบทช่วยสอนของเรา.
หลังจากเปิดใช้งานคุณต้องไปที่ " การตั้งค่า»เมนูเหนียว เพื่อกำหนดค่าการตั้งค่าของปลั๊กอินนี้
ขั้นแรกคุณต้องป้อนรหัส CSS สำหรับเมนูการนำทางที่คุณต้องการลอย
คุณจะต้องใช้เครื่องมือ "ตรวจสอบ" ของเบราว์เซอร์เพื่อค้นหา CSS ที่ใช้
ไปที่เว็บไซต์ของคุณและเลื่อนเมาส์ไปที่เมนูนำทาง หลังจากนั้นคุณต้องคลิกขวาและเลือก "ตรวจสอบ"
ดำเนินการต่อไปโดยการค้นหา วิธีการกำหนดธีม WordPress ด้วยดินสอสีเหลือง
การดำเนินการนี้จะแบ่ง (ตามค่าเริ่มต้น) หน้าจอเบราว์เซอร์ของคุณและคุณจะสามารถดูซอร์สโค้ดของเมนูนำทางของคุณ คุณต้องค้นหาบรรทัดที่คล้ายกับสิ่งนี้:
ในตัวอย่างนี้ CSS ID ของเมนูนำทางของเราคือ " การใช้งานเว็บไซต์ '
ไปข้างหน้าและป้อนรหัส CSS ของเมนูในการตั้งค่าปลั๊กอินดังต่อไปนี้“ # site-navigation”
ตัวเลือกถัดไปในการตั้งค่าปลั๊กอินคือการกำหนดช่องว่างระหว่างด้านบนของหน้าจอและเมนูการนำทางแบบลอย คุณสามารถใช้การตั้งค่านี้ได้หากเมนูของคุณทับซ้อนกับรายการที่คุณไม่ต้องการซ่อน มิฉะนั้นให้เพิกเฉยต่อการตั้งค่านี้
หลังจากนั้นคุณต้องคลิกที่ช่องถัดจากตัวเลือก: "Check Bar Admin" สิ่งนี้ช่วยให้ปลั๊กอินสามารถเพิ่มพื้นที่บางส่วนสำหรับแถบเครื่องมือ WordPress ซึ่งเพิ่มสำหรับผู้ใช้ที่ล็อกอิน
ตัวเลือกถัดไปในหน้าการตั้งค่าช่วยให้คุณสามารถซ่อนเมนูการนำทางได้หากผู้ใช้เยี่ยมชมเว็บไซต์ของคุณโดยใช้หน้าจอขนาดเล็กเช่นอุปกรณ์เคลื่อนที่
คุณสามารถทดสอบว่าเมนูนี้แสดงบนอุปกรณ์มือถือและแท็บเล็ตอย่างไร หากคุณไม่ชอบคุณสามารถเพิ่ม 780px ในตัวเลือกนี้
ค้นพบด้วย วิธีการสร้างเมนูที่ตอบสนองสำหรับ WordPress มือถือ
อย่าลืมคลิกที่ " บันทึกการตั้งค่า เพื่อบันทึกการเปลี่ยนแปลงของคุณ
ตอนนี้คุณสามารถเยี่ยมชมเว็บไซต์ของคุณเพื่อดูเมนูการนำทางลอยของคุณในการดำเนินการ
วิธีที่ 2: วิธีเพิ่มเมนูนำทางด้วยตนเอง
วิธีนี้ต้องการการเพิ่มโค้ด CSS ที่กำหนดเองลงใน your ธีม WordPress.
ก่อนอื่นต้องไปที่ " ลักษณะที่ปรากฏ> ปรับแต่ง เพื่อเปิดใช้งาน WordPress Customizer
คลิกที่ CSS เพิ่มเติม ในบานหน้าต่างด้านซ้ายแล้วเพิ่มรหัส CSS นี้
# นำทางเว็บไซต์ {พื้นหลัง: # fff; ความสูง: 60px; ดัชนี z: 170; margin: 0 อัตโนมัติ; ขอบล่าง: 1px #dadada ของแข็ง ความกว้าง: 100%; ตำแหน่ง: ถาวร ด้านบน: 0; ซ้าย: 0; ขวา: 0; text-align: ศูนย์; }
แทนที่ " # Site Navigation โดยตัวระบุของเมนูนำทางของคุณและคลิกที่ปุ่ม« Enregistrer '
ตอนนี้คุณสามารถเยี่ยมชมเว็บไซต์ของคุณเพื่อดูเมนูการนำทางลอยของคุณในการดำเนินการ
หากปกติแล้วเมนูการนำทางของคุณจะปรากฏหลังส่วนหัวของเว็บไซต์โค้ด CSS นี้อาจทับซ้อนกับชื่อเว็บไซต์และส่วนหัว
สามารถปรับเปลี่ยนได้อย่างง่ายดายโดยเพิ่มระยะขอบบนพื้นที่ส่วนหัวของคุณโดยใช้รหัสต่อไปนี้:
.site การสร้างตราสินค้า {ขอบด้านบน: 60px; }
จบบทช่วยสอนของเราตอนนี้คุณจะสามารถสร้างหรือเพิ่มเมนูลอยบนเว็บไซต์ของคุณได้
หากคุณกำลังมองหาอื่นๆ ปลั๊กอิน WordPress ที่จะช่วยให้คุณจัดการเมนูต่างๆ ได้ดังนี้ ปลั๊กอิน WordPress พรีเมี่ยมที่ทุ่มเทให้กับงานนี้
1 เมนูฮีโร่
ปลั๊กอินนี้ช่วยให้คุณสร้างเมนู WordPress ที่กำหนดเองได้ในไม่กี่ขั้นตอนง่ายๆ โดยเฉพาะอย่างยิ่ง ช่วยให้คุณสร้างเมนู WordPress ที่หรูหราและเป็นมืออาชีพได้อย่างง่ายดายและเป็นธรรมชาติ จากเมนูเมกะที่มีคุณลักษณะหลากหลายที่ซับซ้อนที่สุด ไปจนถึงเมนูแบบเลื่อนลงที่ง่ายที่สุด WordPress ปลั๊กอิน HeroMenu ตั้งค่าเมนูประเภทใดก็ได้และเริ่มใช้งานได้ในไม่กี่นาที
ในแง่ของคุณสมบัติมันมีเหนือสิ่งอื่นใด: ทำงานได้อย่างสมบูรณ์แบบบนพีซีแท็บเล็ตและสมาร์ทโฟนเนื้อหาที่ปรับแต่งได้ง่าย CSS ที่กำหนดเองเพื่อเพิ่มสไตล์เมนูของคุณเองตัวออกแบบเมนูขนาดใหญ่เบราว์เซอร์ที่รองรับ , Opera, IE9 และอีกมากมาย
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
2 เมนูเนียน
เมนูเนียน ไม่ใช่แค่ปลั๊กอินเมนูสำหรับ WordPress สามารถใช้เพื่อสร้างเมนูหลายระดับได้อย่างไม่ จำกัด เช่นเดียวกับแถบด้านข้างที่มีเนื้อหาหลากหลายตัวเลือกสไตล์ที่หลากหลายและเอฟเฟกต์ภาพเคลื่อนไหว
แต่ละระดับเมนูสามารถปรับแต่งได้ด้วยสีพื้นหลังรูปภาพวิดีโอแบบอักษรที่กำหนดเองและอื่น ๆ ปลั๊กอินนี้ตอบสนองได้อย่างสมบูรณ์และมีภาพเคลื่อนไหวมากกว่า 45 รายการสำหรับรายการเมนู
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
3 เมนู Fly 8Degree
8Degree Fly Menu คือ WordPress ปลั๊กอิน ระดับพรีเมียมที่ให้คุณเพิ่มเมนูแคนวาสลงในเว็บไซต์ของคุณได้ เพื่อให้ดูเน้นข้อมูลของคุณในวิธีที่ง่าย ใช้คุณสมบัติเมนูเริ่มต้นของ WordPress เพื่อสร้างเมนู
คุณจะสามารถเพิ่มองค์ประกอบเพิ่มเติมให้กับรายการเมนูเริ่มต้นเช่นไอคอนคำขวัญเมนูส่วนหัวหลอกจัดกลุ่มและคำอธิบายแบบยาว นอกจากนี้ยังมาพร้อมกับโปรแกรมแก้ไขแบบ WYSIWYG เพื่อช่วยให้คุณเข้าใจคำอธิบายแบบยาวได้อย่างเป็นมิตรกับผู้ใช้ด้วยโปรแกรมแก้ไขนี้คุณยังสามารถใช้รหัสย่อ
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
แหล่งข้อมูลอื่น ๆ ที่แนะนำ
หากคุณต้องการเพิ่มเติมในการสร้างหรือปรับแต่งเมนูของบล็อกหรือเว็บไซต์ของคุณเราขอแนะนำให้คุณดูลิงก์ด้านล่าง
- วิธีการเพิ่มสไตล์ให้กับเมนูนำทางของคุณ
- วิธีการเพิ่มแอตทริบิวต์ชื่อในเมนู WordPress
- ปลั๊กอิน WordPress 8 เพื่อสร้าง megamenu ในบล็อกของคุณ
สรุป
ที่นี่! สำหรับบทช่วยสอนนี้ฉันหวังว่าจะช่วยให้คุณสามารถเพิ่มเมนูลอยในบล็อก WordPress ของคุณได้ เราขอเชิญคุณเข้าร่วม แบ่งปันบทความนี้กับเพื่อนของคุณบนเครือข่ายสังคมของคุณ.
หากคุณมีข้อเสนอแนะหรือข้อสังเกตใด ๆ พวกเขาจะได้รับการต้อนรับ และถ้าคุณยังใหม่กับ WordPress ปรึกษาเรื่องนี้ ทรัพยากร.
...
สวัสดี,
ก่อนอื่นขอขอบคุณสำหรับบทช่วยสอนนี้ซึ่งทำงานได้อย่างสมบูรณ์แบบ!
แต่ไม่ว่าฉันจะค้นหาเน็ตยากแค่ไหนฉันก็ไม่พบคำตอบสำหรับคำถามของฉัน:
ฉันจะทำอย่างไรเมื่อสร้างเมนูลอย (ใน CSS หรือด้วยส่วนขยายอะไรก็ได้) เพื่อให้ส่วนของฉันปรากฏหลังเมนูและไม่อยู่หลังเมนู
มันน่ารำคาญเป็นพิเศษในกรณีของฉันเพราะมันเป็นหน้าเดียวและรายการในเมนูของฉันจึงอ้างถึงส่วนต่างๆของหน้าซึ่งจะขึ้นทุกครั้งที่อยู่ด้านหลังเมนูของฉัน ...
มันพูดกับคุณเหรอ?
ขอบคุณล่วงหน้า!
ฉันสงสัยว่ามันเป็นไปได้ไหมที่จะทำให้สารบัญของเพจ "ติดหนึบ" ...
สวัสดี,
ยังไม่เคยทดสอบ ฉันไม่สามารถตอบคุณได้
สวัสดี; สวัสดี
ฉันลองใช้ธีมที่ดาวน์โหลดมา (วอลล์สตรีท) แต่ในขณะที่ทำตามคำแนะนำของคุณไม่มีอะไรเปลี่ยนแปลง…ฉันไม่รู้ว่ามีอะไรหายไป…
ชอบและหวังว่าจะได้ใช้ ...
Merci
ราอูล
สวัสดี
ลองปิดการใช้งานปลั๊กอิน WordPress อื่น ๆ ทั้งหมดแล้วดูการแสดงผลถัดไป
ขอขอบคุณสำหรับการกวดวิชาของคุณเป็นเรื่องง่ายเหมือนทั้งเป็นที่รู้!
สวัสดี,
ดีใจที่มีประโยชน์