Cara Custom Menu di WordPress dengan wp_nav_menu

Halaman menu adalah salah satu elemen penting pada website yang membantu pengunjung memahami struktur dan isi situs Anda dengan lebih mudah. Dalam artikel ini, kami akan membahas cara membuat custom menu di WordPress menggunakan fungsi wp_nav_menu, sehingga menu di website Anda menjadi lebih rapi dan berfungsi sesuai kebutuhan.

Mengenal fungsi wp_nav_menu

wp_nav_menu adalah sebuah fungsi di WordPress yang digunakan untuk menampilkan menu navigasi pada theme. Fungsi ini memungkinkan Anda menampilkan menu yang sudah dibuat di dashboard WordPress ke dalam tampilan website, seperti menu utama di header atau menu di sidebar.

Dengan wp_nav_menu, Anda bisa mengatur posisi, struktur, serta tampilan menu secara fleksibel sesuai kebutuhan Anda. Tidak hanya itu, Anda juga bisa mengombinasikan wp_nav_menu dengan CSS, agar menu pada website bisa tampil lebih menarik.

Berikut adalah contoh penggunaan wp_nav_menu sederhana di WordPress:

wp_nav_menu(array(
    'theme_location' => 'primary', // Lokasi menu yang sudah didaftarkan di functions.php
    'menu_class'     => 'menu-utama', // Kelas CSS untuk styling menu
));

Contoh script di atas akan menampilkan menu yang sudah Anda daftarkan dengan lokasi primary. Biasanya, lokasi menu ini didaftarkan terlebih dahulu di file functions.php tema Anda menggunakan fungsi register_nav_menus.

Custom Menu di WordPress dengan wp_nav_menu

Di panduan ini, kita akan belajar membuat custom menu di WordPress dengan menggunakan wp_nav_menu. Selain itu, kami juga akan membahas cara menyesuaikan tampilan menu dengan CSS dan memastikan menu tersebut responsif di berbagai perangkat.

Step 1. Buat Menu di WordPress

Sebelum menampilkan menu di tema WordPress, langkah pertama adalah membuat menu melalui Dashboard WordPress.

1. Login ke Dashboard WordPress anda.
2. Klik menu Appearance > Menus.

3. Buat menu baru di WordPress dengan mengisi kolom Manu Name, setelah itu klik tombol Create Menu. Dalam panduan ini, kami memberi nama manunya dengan “Main Navigation”.

4. Tambahkan halaman atau url yang akan Anda tambahkan sebagai menu pada website.

• Setelah menu dibuat, Anda bisa menambahkan item ke menu tersebut. Pilih item seperti halaman, kategori, atau link kustom.
• Centang item yang ingin Anda tambahkan, lalu klik Add to Menu.
• Untuk mengatur urutan item, cukup tarik dan lepaskan item-menu sesuai keinginan.
• Di bagian bawah halaman, Anda akan menemukan opsi Display Location. Pilih lokasi menu yang diinginkan, misalnya Primary Menu atau Secondary Menu
• Klik Save Menu untuk menyimpan pengaturan.

Dengan mengikuti langkah-langkah di atas, Anda berhasil membuat kustom menu di Dashboard WordPress.

BACA JUGA: 10 Template WordPress Terbaik untuk Company Profile

Step 2. Menampilkan menu di theme dengan wp_nav_menu

Setelah menu dibuat, langkah berikutnya adalah menampilkan menu tersebut di tema WordPress Anda menggunakan fungsi wp_nav_menu. Begini caranya:

1. Akses File Tema Anda
   Masuk ke Appearance > Theme Editor, lalu buka file tema yang sesuai, misalnya header.php atau footer.php, tergantung tempat Anda ingin menampilkan menu.
   
2. Tambahkan Kode wp_nav_menu()
   Tempatkan kode berikut di dalam file tema di lokasi yang diinginkan (misalnya di dalam tag <header> atau di bagian lain di tema Anda):
   
3. Pastikan Anda mengganti ‘theme_location’ dengan nama lokasi yang sesuai, yang Anda tentukan saat membuat menu di Dashboard.
   
4. Simpan Perubahan
   Setelah menambahkan kode tersebut, simpan perubahan pada file tema Anda. Kemudian, muat ulang halaman situs Anda untuk melihat menu yang baru ditampilkan

Step 3. Menyesuaikan Tampilan Menu dengan CSS

Untuk membuat tampilan menu Anda lebih menarik, Anda bisa menyesuaikannya dengan menggunakan CSS. Berikut langkah-langkah untuk menambahkan kustomisasi tampilan:

1. Tambahkan Kelas CSS pada Menu
   Pada parameter menu_class dalam kode wp_nav_menu(), Anda dapat menambahkan kelas CSS kustom untuk menu. Misalnya:

2. Tambahkan CSS pada style.css
   Akses file style.css pada tema Anda, lalu tambahkan kode CSS untuk menyesuaikan tampilan menu. Berikut adalah contoh kode CSS untuk menu:

Penjelasan Kode CSS:

• .custom-menu: Menambahkan latar belakang gelap dan menyusun menu di tengah.
• .custom-menu li: Menyusun item menu secara horizontal dengan jarak antar item.
• .custom-menu li a: Memberikan warna putih pada teks dan padding untuk membuat link menu lebih besar.
• .custom-menu li a:hover: Memberikan efek perubahan warna latar belakang ketika item menu di-hover.

3. Kode di atas memberikan latar belakang gelap pada menu, dan saat item menu di-hover, warnanya berubah menjadi lebih terang.
4. Simpan perubahan dan cek hasilnya.

Setelah menambahkan CSS, simpan perubahan dan muat ulang situs Anda. Periksa hasil tampilan menu yang baru di browser.

Step 4. Membuat Menu Responsif di Perangkat Seluler

Agar menu Anda tetap nyaman dilihat di perangkat seluler, Anda perlu menambahkan responsivitas menggunakan media queries di CSS.

1. Tambahkan Media Query pada CSS
   Anda dapat menambahkan kode berikut pada file style.css untuk membuat menu responsif di perangkat dengan lebar layar lebih kecil dari 768px (perangkat seluler dan tablet):

Penjelasan kode:

• @media (max-width: 768px): Media query ini memastikan bahwa kode CSS di dalamnya hanya diterapkan ketika layar perangkat memiliki lebar 768px atau lebih kecil, yang merupakan ukuran tipikal untuk perangkat seluler atau tablet.
• .custom-menu: Mengatur menu menjadi blok dan meratakan teks ke kiri, agar menu ditampilkan secara vertikal.
• .custom-menu li: Mengubah tampilan item menu menjadi blok, agar item tampil satu per satu (vertikal) alih-alih sejajar secara horizontal.
• .custom-menu li a: Menambahkan padding dan memperbesar ukuran font agar lebih mudah dibaca dan diakses pada perangkat kecil.

2. Uji Tampilan pada Perangkat Seluler.
   Untuk memastikan menu bekerja dengan baik pada perangkat seluler, coba uji tampilan menu di perangkat atau dengan memperkecil ukuran jendela browser.

Penutup

Dengan menggunakan fungsi wp_nav_menu, Anda dapat membuat custom menu di WordPress dengan sangat mudah. Anda bisa membuat dan menampilkan menu melalui dashboard, menyesuaikan tampilannya menggunakan CSS, dan memastikan menu Anda responsif agar pengunjung website dapat mengaksesnya dengan nyaman di berbagai perangkat.

Dengan mengikuti langkah-langkah yang telah dijelaskan di atas, Anda dapat membuat custom menu di WordPress yang tidak hanya fungsional, tetapi juga estetik dan mudah di navigasi oleh pengunjung situs Anda.

Demikian artikel kami tentang cara membuat custom menu di WordPress dengan wp_nav_menu, semoga bermanfaat.