Secara default wordpress sudah meneyediakan lokasi dan tata letak menu yang telah ditentukan sebelumnya. Tapi bagaimana jika Anda ingin menambahkan sebuah lokasi dan tata letak menu yang baru apakah bisa? Tentu saja bisa, Anda dapat membuat kustom menu dengan mudah dan dapat menampilaknnya dimana saja di tema wordpress.
Mengapa harus kustom? dibeberapa kasus Anda ingin membuat sebuah landingpage atau halaman lainnya yang tentunya menu navigasi akan berbeda dengan menu yang ada pada website Anda. Pada artikel ini saya akan menjelaskan bagaimana cara kustom menu navigasi di WordPress.
Cara membuat kustom menu navigasi
Hal pertama yang harus Anda lakukan adalah mendaftarkan menu navigasi baru dengan menambahkan kode dibawah ini kedalam file function.php atau file kustom function pada tema Anda.
function wpp_custom_menu() {
register_nav_menu('wpp-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpp_custom_menu' );
Sekarang untuk membuktikan apakah kode Anda masukkan diatas bekerja silahkan masuk pada Dashboard » Appearance » Menus dan coba buat menu atau edit menu yang sudah ada. Anda akan melihat ” My Custom Menu ” di pilihan lokasi tema. Lihat gambar dibawah ini:
Jika Anda ingin menambahkan kustom menu lebi banyak dapat menggunakan kode dibawah ini, caranya sama seperti diatas.
function wpp_custom_menu() {
register_nav_menus(
array(
'wpp-custom-menu' => __( 'My Custom Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'wpp_custom_menu' );
Menampilkan Kustom Menu di WordPress
Selanjutnya, jika Anda berhasil melakukan langkah diatas maka langkah berikutnya adalah menampilkan kustom menu yang tadi dibuat. Biasanya kustom menu navigasi ditempatkan pada footer dan sidebar, kadangkala juga pada header. Berikut cara menampilkan kustom menu di wordpress.
Tambahkan kode ini di file template tema dimana Anda ingin meletakkan, di footer, header ataupun sidebar. Anda juga dapat menggabungkan kode dibawah ini menjadi sebuah shortcode dan dapat menggunakannya juga di dalam konten.
<?php
wp_nav_menu( array(
'theme_location' => 'wpp-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>
** Jika Anda ingin merubah kode diatas cukup rubah bagian ” wpp-custom-menu ” sesuai dengan penamaan yang Anda ingikan.
Sebagai contoh saya membuat sebuah kustom menu seperti gambar dibawah ini:
Anda juga dapat menambahkan style sesuai dengan tema Anda. Cukup mudah bukan? Jika Anda mengalami kesulitan atau pertanyaan, dapat mengajukannya pada kolom komentar dibawah ini. Semoga bermanfaat dan terimakasih.
