วิธีสร้างเมนูการนำทางที่ตอบสนองใน WordPress

เผยแพร่แล้ว: 2021-07-22

เส้นทางสู่การสร้างเมนูการนำทางที่ตอบสนองใน WordPress นั้นเปิดกว้าง มีหลายวิธีในการทำเช่นนี้ด้วยความยืดหยุ่นที่นำเสนอโดย WordPress

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

ตอบสนองการนำทางใน wp

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

คุณจะต้องเข้าถึงไฟล์ธีม WordPress ต่อไปนี้:

  • functions.php
  • header.php
  • footer.php
  • Style.css

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

แอปพัฒนาในพื้นที่ฟรีของเรา Local จะช่วยให้คุณลดความซับซ้อนของเวิร์กโฟลว์และทดลองกับไซต์ของคุณได้อย่างปลอดภัย ลองวันนี้!
แล็ปท็อปบนโต๊ะพร้อมโคมไฟแสดงหน้าแรกของเว็บไซต์ของบริษัทที่ชื่อ "Sharp Minds" ที่อ่านว่า "Creative Minds พลังคำพูด"

เราจะใช้ bigSlide.js ซึ่งเป็นปลั๊กอิน jQuery ขนาดเล็กสำหรับสร้างแผงสไลด์นอกหน้าจอ บนเว็บไซต์ของปลั๊กอิน มันถูกอธิบายว่าเป็น "ปลั๊กอิน jQuery ขนาดเล็ก (~1kb บีบอัด) สำหรับการสร้างการนำทางแผงสไลด์นอกหน้าจอ" ซึ่งสอดคล้องกับเป้าหมายการนำทางที่ตอบสนองแบบลีนและปานกลางของเรา

ลงไปทำงานกันเถอะ

1. ดาวน์โหลด bigSlide.js เวอร์ชันบีบอัดล่าสุด คัดลอกไฟล์ไปยังโฟลเดอร์ /js ของธีมของคุณ

2. เปิด functions.php ในโปรแกรมแก้ไขโค้ดที่คุณต้องการ ค้นหา wp_enqueue_script คุณน่าจะเห็นหลายอินสแตนซ์ เนื่องจาก wp_enqueue_script เป็นวิธีมาตรฐานในการเพิ่มสคริปต์ลงใน WordPress

3. หลังจากอินสแตนซ์สุดท้ายของ wp_enqueue_script ให้เพิ่มตัวอย่างต่อไปนี้และบันทึก

 wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true );

4. เปิด header.php และเพิ่มคลาส push ชไปที่ div แรกหลังแท็ก body ส่วนนี้มักจะมีลักษณะดังนี้:

 <body <?php body_class(); ?>><div class="hfeed site">.

ดังนั้นหลังจากเพิ่มคุณควรลงท้ายด้วย:

 <div class="hfeed site push">.

5. ในขณะที่ยังอยู่ใน header.php ค้นหา site-navigation นี่จะเป็นคลาสหรือรหัสขึ้นอยู่กับธีมของคุณ ในธีม WordPress ส่วนใหญ่ ควรมีลักษณะดังนี้:

 <nav class="site-navigation primary-navigation" role="navigation"> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?> </nav>

6. เพิ่มตัวอย่างต่อไปนี้ก่อน </nav> คุณควรลงเอยด้วยสิ่งนี้:

 &amp;amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;a href="#responsive-menu" class="menu-link"&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;#9776;&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;amp;gt;

ที่นี่เรากำลังสร้างไอคอนแฮมเบอร์เกอร์ที่จะใช้เพื่อเรียกเมนูมือถือ

สกรีนช็อตของเว็บไซต์ "Sharp Words" พร้อมเมนูแฮมเบอร์เกอร์ทางด้านขวา

7. เปิด footer.php และค้นหา <?php wp_footer(); ?> <?php wp_footer(); ?> . หลังบรรทัดนี้ ให้เพิ่มข้อมูลโค้ดต่อไปนี้:

 &amp;amp;amp;amp;amp;amp;amp;lt;div class="panel mobile-menu"&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array('theme_location' =&amp;amp;amp;amp;amp;amp;amp;gt; 'primary',) );?&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;amp;amp;gt; jQuery('.menu-link').bigSlide({ menu: '.mobile-menu', speed: 300, side:"right", easyClose:true});&amp;amp;amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;amp;amp;gt;

โดยพื้นฐานแล้ว เรากำลังสร้างเมนูการนำทางที่ซ้ำกันที่ซ่อนอยู่ที่ส่วนท้าย

8. สุดท้าย เปิด style.css และหลังบรรทัดสุดท้าย เพิ่มข้อมูลโค้ดต่อไปนี้:

 .panel{ position: fixed; right: -15.625em; width: 15.625em; background:#222;} .push{position:relative;} .menu-link{display:none;color:#fff;background:#333;border-radius:4px;padding:2px 12px;float:right;} .mobile-menu a{display:block;color:#fff;padding:10px 15px;} .mobile-menu a:hover{background-color:#555;} .mobile-menu li{border-bottom:1px #444 solid;} @media only screen and (max-width:900px) { #primary-menu{display:none;} .mobile-menu #primary-menu{display:block;} .menu-link{display:inline-block;} }

ฉันใช้ชุดสีเข้มที่นี่ แต่อย่าลังเลที่จะเปลี่ยนสีเพื่อให้เหมาะกับความต้องการของคุณ

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

สุดท้าย พื้นฐานก็เหมือนเดิม เหตุผลก็คือบนหน้าจอขนาด 900px หรือต่ำกว่า คุณจะต้องซ่อนการนำทางหลักที่เป็นค่าเริ่มต้นและแสดงไอคอนแฮมเบอร์เกอร์แทน

เมื่อคลิกหรือแตะไอคอนแฮมเบอร์เกอร์ เมนูที่เราทำซ้ำที่ส่วนท้ายจะเปิดขึ้นเป็นแอปที่คล้ายกับแผงด้านข้าง

ตอบสนองการนำทางเมนูมือถือสไลด์

หากคุณติดขัดโปรดแสดงความคิดเห็นด้านล่าง ฉันยินดีเป็นอย่างยิ่งที่จะช่วย มีความสุขในการเข้ารหัส!