Cara Membuat Menu Kustom dengan wp_nav_menu di WordPress

Menu merupakan salah satu elemen paling umum pada website. Di WordPress, Anda bisa membuat menu kustom dengan mudah dan memilih tampilannya sesuai tema saat ini. Namun untuk meletakkan menu di lokasi tertentu, Anda perlu mengedit file tema dan menambahkan fungsi wp_nav_menu.

Dengan memadukan fungsi wp_nav_menu dan register_nav_menu, Anda bisa membuat dan meletakkan menu di mana saja dengan mudah pada website Anda tanpa skill teknis tingkat lanjut. Lebih kerennya lagi, Anda bisa mengedit menu langsung dari dashboard WordPress.

Di artikel ini, kami akan membahas cara kerja fungsi wp_nav_menu WordPress. Kami juga akan menjelaskan argumen dan class yang bisa digunakan dengan wp_nav_menu, serta cara menggunakan fungsi ini dengan tema Anda.

Apa Itu Fungsi wp_nav_menu WordPress?

Jadi, wp_nav_menu adalah fungsi yang bisa Anda gunakan untuk menampilkan menu kustom pada website WordPress Anda.

Tidak seperti wp_page_menu yang berfungsi untuk menampilkan daftar halaman yang ada di website Anda saat ini, wp_nav_menu hanya bisa digunakan dengan menu kustom.

Anda bisa menambahkan fungsi ini pada file template tema untuk mengatur lokasi tampilan menu yang diinginkan di halaman Anda. Berikut contoh penulisannya tanpa parameter khusus:

wp_nav_menu( array $args = array() )

Agar kode bisa berfungsi, Anda perlu menentukan menu mana yang akan ditampilkan. Untuk lebih jelasnya, berikut tampilan fungsi contoh wp_nav_menu pada template halaman:

wp_nav_menu( array( 
    'theme_location' => 'custom-menu') );

Fungsi wp_nav_menu bisa menyertakan beberapa parameter. Dalam contoh di atas, kami menggunakan theme_location untuk menentukan nama menu kustom yang kami gunakan.

Kalau belum familiar dengan coding di website, cukup gunakan plugin menu WordPress. Beberapa tool tersebut memungkinkan Anda membuat dan menentukan lokasi menu kustom, sama seperti fungsi wp_nav_menu.

Anda juga bisa memanfaatkan beberapa page builder WordPress. Kalau sudah menggunakan salah satu tool ini, coba pastikan apakah tool yang Anda install menawarkan fungsi menu kustom.

Parameter wp_nav_menu dan Class CSS WordPress

Hampir semua fungsi WordPress menawarkan beragam parameter siap pakai untuk memodifikasi efeknya. Dengan wp_nav_menu, Anda bisa menggunakan parameter dan class CSS.

Kami akan menjelaskannya dari parameter lebih dulu. Yuk simak dan pahami di bawah ini.

Parameter wp_nav_menu

Anda bisa menyesuaikan fungsi wp_nav_menu menggunakan satu atau beberapa parameter. Opsi parameter yang tersedia antara lain:

• ‘menu’ – menunjukkan menu mana yang Anda gunakan. Anda bisa menentukan menu menggunakan ID, slug, nama, atau objek.
• ‘menu_class’ – mengonfigurasi class CSS untuk menu Anda. Secara default, fungsi ini akan menggunakan class menu.
• ‘menu_id’ – menunjukkan ID untuk menu. Nilai default atau ID adalah slug menu dengan tambahan angka atau urutan angka.
• ‘container’ – memilih jenis container yang akan digunakan untuk menu. Secara default, fungsi ini menggunakan container div.
• ‘container_class’ – menetapkan class CSS yang diterapkan langsung ke container menu. Secara default, class yang diterapkan untuk menu adalah menu-{menu slug}-container.
• ‘container_id’ – menetapkan ID untuk container menu. Sedangkan untuk ID menu, container akan menggunakan slug dengan urutan nomor secara default.
• ‘fallback_cb’ – apabila WordPress tidak bisa menemukan menu yang ignin Anda tampilkan, parameter ini akan menunjukkan elemen lain yang bisa ditampilkan sebagai pengganti.
• ‘theme_location’ – apabila Anda menyusun menu kustom dengan register_nav_menu, parameter ini akan menampilkannya.
• ‘items_wrap’ – secara default, menu akan ditampilkan dalam format unordered list (ul). Dengan parameter ini, Anda bisa mengonfigurasi bagaimana item menu disatukan.
• ‘item_spacing’ – sebagian besar menu menggunakan whitespace untuk memisahkan itemnya. Kalau ingin menonaktifkan whitespace tersebut, Anda bisa mengatur parameter ini ke discard.

Ada beberapa parameter wp_nav_menu lain yang tidak kami sebutkan, termasuk opsi untuk menambahkan teks ke menu. Namun, parameter yang disebutkan di atas merupakan elemen utama yang akan Anda gunakan saat menambahkan menu kustom pada tema.

Berikut adalah contoh fungsi yang menggunakan beberapa parameter:

<?php
wp_nav_menu( array( 
    'theme_location' => 'custom-menu', 
    'container_class' => 'menu-class'
    'fallback_cb' => ‘wp_page_menu’ ) ); 
?>

Meskipun jumlah parameter yang tersedia tampak banyak sekali, biasanya Anda hanya perlu menggunakan parameter theme_location dan container_class. Jadi, Anda tidak perlu cemas harus menghafalkan semuanya.

Class CSS wp_nav_menu

Saat Anda menggunakan wp_nav_menu, fungsi ini akan otomatis menerapkan berbagai class CSS pada setiap item menu yang ditampilkan.

Di bawah ini adalah class CSS wp_nav_menu yang paling penting:

• .menu-item – class ini diterapkan otomatis pada setiap item menu.
• .menu-item-has-children – hanya diterapkan pada item menu yang memiliki sub-item.
• .menu-item-object-{object} – diterapkan pada setiap item menu. Placeholder object bisa berupa post_type atau taksonomi.
• .menu-item-object-category – item menu ini berkaitan dengan kategori WordPress tertentu.
• .menu-item-object-tag – item menu yang berkaitan dengan tag WordPress.
• .menu-item-object-page – item menu di dalam halaman statis.
• .menu-item-object-{custom} – item yang berkaitan dengan tipe postingan kustom.
• .menu-item-type-{type} – diterapkan pada setiap item menu. Placeholder type bisa berupa post_type atau taksonomi.
• .menu-item-type-post_type – item yang berkaitan dengan post_type apa pun.
• .menu-item-type-taxonomy – item yang berkaitan dengan taksonomi apa pun.

Di atas, bisa dilihat bahwa class CSS wp_nav_menu memiliki banyak bagian yang sama. Karena opsinya yang beragam, Anda bisa memilih secara spesifik CSS mana yang akan digunakan untuk mengatur gaya menu kustom.

Anda juga bisa menggunakan class CSS custom WordPress dengan parameter wp_nav_menu. Cara ini bisa menjadi alternatif apabila tidak ada class siap pakai yang bisa digunakan untuk mengatur menu atau item tertentu sesuai keinginan Anda.

Cara Membuat dan Mengatur Menu Dengan wp_nav_menu WordPress

Setelah memahami cara kerja wp_nav_menu, sekarang kami akan menjelaskan cara menggunakannya pada tema Anda. Anda bisa mengikuti langkah-langkah ini, dimulai dari wp_nav_register.

Langkah 1: Buat Menu Kustom dengan Fungsi wp_nav_register

Seperti yang tadi disebutkan, Anda tidak bisa membuat menu kustom dengan wp_nav_menu dan hanya bisa mengatur posisi menu kustom dengannya. Jadi, Anda perlu membuat menu secara manual agar bisa menggunakan fungsi tersebut.

Dengan wp_nav_register, Anda bisa membuat atau “menyusun” menu bagi tema tertentu. Untuk menggunakannya, Anda perlu mengedit file functions.php pada tema.

Sebaiknya buat child theme dulu sebelum memulai agar perubahan yang Anda lakukan pada kode tema tidak ikut hilang ketika tema diupdate. Jangan lupa lakukan full backup juga pada website sebelum mengubah file-file penting.

Setelah membuat child theme dan backup website, akses file functions.php tema WordPress Anda. Cara yang paling mudah adalah dengan membuka Appearance → Theme File Editor di dashboard.

Theme editor akan membuka tema yang saat ini aktif, dan Anda bisa memilih file functions.php pada menu di sebelah kanan.

Atau Anda juga bisa mengakses file functions.php menggunakan FTP (File Transfer Protocol). Kami merekomendasikan cara ini kalau Anda menggunakan editor teks khusus. Namun, hanya ada satu snippet kode yang perlu ditambahkan, jadi editor kode bawaan WordPress saja sudah cukup.

Scroll ke bagian akhir file, lalu tambahkan kode berikut:

function wpb_custom_new_menu() {
  register_nav_menu('custom-menu',__( 'Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Anda perlu memodifikasi slug custom-menu dan nama menu, yang akan digunakan sebagai kolom Custom Menu. Namun, Anda bisa memberi nama apa pun untuk menu kustom.

Simpan perubahan yang dibuat pada file functions.php. Sekarang saatnya mengedit item yang akan disertakan dalam menu baru Anda.

Langkah 2: Edit Menu WordPress Kustom Anda

Untuk mengedit menu kustom yang baru, buka Appearance → Menu. Cari bagian Menu Settings di bagian kanan bawah layar.

Bagian tersebut akan mencakup lokasi menu baru yang Anda masukkan pada langkah pertama (Custom Menu).

Untuk mengedit item apa saja yang akan ditampilkan di lokasi tersebut, pilih menu menggunakan opsi Select a menu to edit: atau buat yang baru.

Setelah itu, pilih elemen yang ingin Anda sertakan dalam menu menggunakan daftar di sebelah kiri dan urutkan di bagian Menu structure.

Setiap item menu akan menyertakan nama tampilan dan link. Apabila sudah puas dengan hasilnya, pastikan bahwa menu kustom baru Anda sudah aktif pada Menu Settings. Kalau sudah, simpan perubahan Anda.

Langkah 3: Gunakan Fungsi wp_nav_menu untuk Menampilkan Menu Baru

Pada tahap ini, Anda sudah punya menu siap pakai yang tadi dimasukkan ke tema website. Meski begitu, menu tidak akan muncul hingga Anda menerapkan fungsi wp_nav_menu untuk menentukan lokasinya.

Tambahkan fungsi wp_nav_menu dalam template halaman untuk meletakkan menu kustom. File template halaman yang bisa diakses akan bergantung pada tema yang Anda gunakan.

Buka Appearance → Theme File Editor untuk mengakses file ini di dashboard. Bagian Theme Files di sebelah kanan menampilkan daftar seluruh file yang bisa Anda edit dari layar ini.

Dalam contoh ini, kami memilih template tema yang berisi satu halaman. Berikut adalah kode yang perlu Anda tambahkan ke template:

<?php
wp_nav_menu( array( 
    'theme_location' => 'custom-menu', 
    'container_class' => 'menu-class'
    'fallback_cb' => ‘wp_page_menu’ ) ); 
?>

Sebelum menyimpan perubahan ke file template, jangan lupa untuk mengupdate placeholder dengan slug tema kustom dan parameter lain yang ingin Anda gunakan. Kami menyertakan parameter container_class dan fallback_cb dalam contoh ini.

Namun, Anda bisa menggunakan kode singkat seperti berikut:

<?php
wp_nav_menu( array( 
    'theme_location' => 'custom-menu' ) ); 
?>

Posisi kode akan menentukan lokasi menu di halaman. Kalau belum paham cara kerja penentuan posisi ini, Anda bisa mencoba lokasi yang berbeda dalam file template.

Sebaiknya jangan mengubah bagian kode lainnya saat mengedit file template, kecuali Anda memang paham fungsinya. Karena hanya menambahkan beberapa baris kode, Anda bisa menghapusnya kalau terjadi error.

Setelah mengedit, cek tampilan menu dengan mengunjungi salah satu halaman yang menggunakan template buatan Anda tadi. Kalau menu tidak muncul, mungkin ada error pada slug parameter theme_location. Kalau begini, coba buka dan cek kembali, ya.

Kesimpulan

Meskipun bisa membuat menu kustom dengan mudah di WordPress, Anda tidak bisa menentukan lokasinya.

Di sinilah fungsi wp_nav_menu, yang memungkinkan Anda bebas meletakkan menu kustom yang dibuat menggunakan register_nav_menu di bagian mana pun pada website Anda.

Berikut ringkasan cara menggunakan fungsi wp_nav_menu WordPress:

1. Buat menu kustom menggunakan fungsi register_nav_menu.
2. Edit menu WordPress kustom Anda.
3. Gunakan fungsi wp_nav_menu untuk menampilkan menu baru tersebut.

Punya pertanyaan terkait penggunaan fungsi wp_nav_menu di WordPress? Sampaikan melalui kolom komentar di bawah ini, ya!