Cara membuat menu navigasi responsif di WordPress
Diterbitkan: 2021-07-22Jalan untuk membuat menu navigasi responsif di WordPress tidak ada habisnya. Ada banyak cara untuk melakukan ini berkat fleksibilitas yang ditawarkan oleh WordPress.
Hari ini, saya akan menunjukkan cara membuat menu navigasi yang ramping dan responsif. Ramping karena kita akan mencapai semua ini di bawah 8 kilobyte, dan berarti karena ini akan menjadi menu navigasi yang sangat efisien. Kami hanya akan mencerminkan menu navigasi Anda saat ini sehingga Anda tidak perlu mempertahankan dua menu yang berbeda. Dengan membunuh dua burung dengan satu batu, kita akan membuat satu menu untuk mengatur semuanya.
Sebelum kita mulai, kami sarankan Anda memiliki beberapa pengetahuan dasar pengembangan front-end. (Kami hanya membutuhkan keakraban dan bukan kemahiran, jadi jangan panik.) Pengetahuan dasar HTML, CSS, jQuery, dan WordPress akan ideal. Ini adalah tutorial pemula hingga menengah, karena melibatkan modifikasi file tema WordPress.
Anda juga memerlukan akses ke file tema WordPress berikut:
-
functions.php -
header.php -
footer.php -
Style.css
Sebelum melakukan modifikasi apa pun, pastikan untuk menjalankan cadangan situs Anda, atau uji perubahan di lingkungan lokal terlebih dahulu. Anda selalu ingin memiliki cara untuk kembali ke file asli Anda.
Kita akan menggunakan bigSlide.js, plugin jQuery kecil untuk membuat panel slide di luar layar. Di situs web plugin, itu digambarkan sebagai "plugin jQuery kecil (~ 1kb terkompresi) untuk membuat navigasi panel slide di luar layar." Ini sejalan dengan tujuan navigasi responsif kami yang ramping dan rata-rata.
Mari kita turun untuk bekerja.
1. Unduh versi terkompresi dari bigSlide.js. Salin file ke folder /js tema Anda.
2. Buka functions.php di editor kode pilihan Anda. Cari wp_enqueue_script . Anda mungkin akan melihat banyak contoh, karena wp_enqueue_script adalah cara standar untuk menambahkan skrip ke WordPress.
3. Tepat setelah contoh terakhir wp_enqueue_script , tambahkan cuplikan berikut dan simpan.
wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true ); 4. Buka header.php , dan tambahkan push class ke div pertama tepat setelah tag body. Bagian ini biasanya terlihat seperti ini:
<body <?php body_class(); ?>><div class="hfeed site">.Jadi setelah menambahkan Anda harus berakhir dengan:
<div class="hfeed site push">. 5. Saat masih di dalam header.php cari site-navigation . Ini akan menjadi kelas atau id tergantung pada tema Anda. Di sebagian besar tema WordPress, seharusnya terlihat seperti ini:
&amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;gt; 6. Tambahkan cuplikan berikut tepat sebelum </nav> . Anda harus berakhir dengan ini:
&amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;a href="#responsive-menu" class="menu-link"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;#9776;&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;gt;Di sini kita membuat ikon hamburger yang akan digunakan untuk memicu menu ponsel.
7. Buka footer.php dan cari <?php wp_footer(); ?> <?php wp_footer(); ?> . Tepat setelah baris ini, tambahkan cuplikan berikut:
&amp;amp;amp;amp;amp;amp;lt;div class="panel mobile-menu"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array('theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary',) );?&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;script&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;lt;/script&amp;amp;amp;amp;amp;amp;gt;Pada dasarnya, kami membuat menu navigasi duplikat tersembunyi di footer.
8. Terakhir, buka style.css dan tepat setelah baris terakhir, tambahkan potongan kode berikut:
.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;} }Saya telah menggunakan skema warna gelap di sini, tetapi jangan ragu untuk mengubah warna sesuai dengan kebutuhan Anda.
Pendekatan ini akan bekerja pada hampir semua tema WordPress standar. Namun, karena kasus penggunaan dan tata letak header yang berbeda, Anda mungkin harus melakukan beberapa penyesuaian.
Pada akhirnya, dasar-dasarnya tetap sama. Alasannya adalah bahwa pada ukuran layar 900px atau lebih rendah, Anda akan menyembunyikan navigasi utama default dan menampilkan ikon hamburger sebagai gantinya.
Saat mengklik atau mengetuk ikon hamburger, menu yang kami duplikat di footer terbuka sebagai aplikasi seperti panel samping.
Jika Anda terjebak, silakan tinggalkan komentar di bawah. Saya akan dengan senang hati membantu. Selamat mengkode!