เคล็ดลับในการซ่อนเมนูมือถือใน WordPress

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

วิธีซ่อนเมนูมือถือใน WordPress

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

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

• ซ่อนเมนูมือถือใน WordPress ด้วยปลั๊กอิน
• ซ่อนเมนูมือถือด้วยโค้ด CSS

วิธีซ่อนเมนูมือถือใน WordPress ด้วยปลั๊กอิน

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

การสร้างเมนูมือถือใหม่

ขั้นตอนแรกคือไปที่ Appearance>Menus คุณจะสามารถสร้างเมนูใหม่ได้โดยคลิกที่ตัวเลือก "สร้างเมนูใหม่" ที่ด้านบน ตั้งชื่อเมนูใหม่ของคุณและยืนยันด้วยปุ่ม "สร้างเมนู" ที่มุมล่างขวาของหน้าจอ

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

ค้นหาและติดตั้งปลั๊กอิน

ขั้นตอนต่อไปคือการค้นหาและติดตั้งปลั๊กอิน มีปลั๊กอินมากมายที่สามารถช่วยคุณจัดการและปรับแต่งเมนู ได้ เมนูยอดนิยมบางส่วน ได้แก่ WP Mobile Menu, Max Mega Menu, Responsive Menu และอื่นๆ เพื่อเป็นการอธิบาย เรามาติดตั้งและเปิดใช้งาน WP Mobile Menu

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

แทนที่หรือซ่อนเมนู

หลังจากที่คุณเลือกสิ่งที่จะซ่อนแล้ว ให้กลับไปที่ Appearance>Menus เลือกจากเมนูแบบเลื่อนลงเมนูมือถือที่คุณสร้างไว้ก่อนหน้านี้และตั้งค่า "ตำแหน่งที่แสดง" ขณะนี้เมนูเดิมของคุณถูกซ่อนและแทนที่ด้วยเมนูที่คุณกำหนดเอง

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

วิธีซ่อนเมนูด้วยโค้ด CSS

อีกวิธีหนึ่งในการซ่อนเมนูมือถือต้องมีความรู้เกี่ยวกับโค้ด CSS และแนวทางปฏิบัติ ผู้ที่มักจะสร้างธีม WordPress แบบกำหนดเองย่อมรู้ดีว่าการปรับแต่งบางอย่างนั้นซับซ้อนเพียงใด และด้วยคะแนนเหล่านี้ จึงไม่เป็นวิธีที่แนะนำสำหรับผู้เริ่มต้นอย่างแน่นอน แต่ถึงอย่างไร…

ค้นหาชื่อเมนูของคุณ

ขั้นตอนแรกคือค้นหาเมนูที่คุณต้องการแก้ไข น่าจะเป็นวิธีที่ง่ายที่สุดคือการใช้เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ที่ผสานรวมเข้า ด้วยกัน ไปที่เว็บไซต์ของคุณที่คุณต้องการเปลี่ยนแปลงและเปิดเครื่องมือสำหรับนักพัฒนา หากคุณกำลังใช้ Google Chrome คุณสามารถทำได้ด้วย ปุ่มลัด Ctrl+Shift+I ที่ด้านบนของหน้าจอ คุณจะพบตัวเลือก Toggle Device Toolbar ซึ่งจะแสดงให้คุณเห็นว่าเว็บไซต์ของคุณมีลักษณะเป็นอย่างไรบนอุปกรณ์มือถือ คุณยังสามารถเปลี่ยนประเภทและความละเอียดต่างๆ ได้อีกด้วย

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

ซ่อนเมนูของคุณด้วยรหัสบรรทัดใหม่

หลังจากที่คุณได้ชื่อที่ถูกต้องแล้ว ให้ไปที่ Appearance>Customize แล้วเลือก “Additional CSS” โดยทั่วไป ค่านี้มักจะอยู่ที่ด้านล่างของแถบด้านข้างทางซ้าย คลิกมันและคุณจะได้รับหน้าจอถัดไป ที่นั่น คุณสามารถคลิกที่ด้านล่างของหน้าจอเพื่อเลือกมุมมองมือถือ และด้านบนนั้น คุณจะต้องป้อนรหัสเพื่อซ่อนเมนู:

รหัส: .menu-name {แสดง: none;}

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

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