Wordpress navigation menu
Animasi sidebar menu. (Ilustrasi dari Freepik)

Wordpress navigation menu

Pada bagian ini, melanjutkan coding cara membuat theme wordpress sub bagian WordPress Navigation Menu. Sebelum lanjut ke tahap coding, pastikan daftar menu sudah dibuat terlebih dahulu melalui wp-admin Dashboard.

Untuk nama menu bebas sesuai keinginan, atau boleh juga menamai menu mengikuti tutorial ini: ‘main-menu’.

Core system WP menyediakan banyak sekali sintak untuk menampilkan menu navigasi di beranda utama CMS WordPress.

Mulai dari nempel sintag yang sederhana hingga custom function walker_nav_menu() yang lumayan ribet dengan mengetik puluhan baris code.

Disini, kita coba explorasi dua buah sintak saja dari sekian banyak tag-tag untuk menampilkan menu WordPress, yaitu tag standar dan tag custom.

Dua function tersebut, menghasilkan output yang berbeda-beda,alangkah baiknya untuk melihat dulu apa saja data input-output yang dikandung dari masing-masing sintak.

Mari kita ‘bedah sesar’ satu persatu kandungan datanya.

Fungsi wp_nav_menu()

Cukup panggil saja code tersebut, tampa perlu di echo, hasil print out code tersebut menghasilkan list menu lengkap dengan atribut HTML.

// Call function
<?php wp_nav_menu(); ?>

Hasil render HTML:

<div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menu">
        <li id="menu-item-1" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1">
            <a href="http://localhost/pehthemepress/" aria-current="page">Home</a>
        </li>
        <li id="menu-item-2" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2">
            <a href="http://localhost/pehthemepress/category/books/">Books</a>
        </li>
        <li id="menu-item-3" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3">
            <a href="http://localhost/pehthemepress/category/business/">Business</a>
        </li>
        <li id="menu-item-4" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4">
            <a href="http://localhost/pehthemepress/category/cars/">Cars</a>
        </li>
        <li id="menu-item-5" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5">
            <a href="http://localhost/pehthemepress/category/diy/">DIY</a>
        </li>
    </ul>
</div>

Fungsi wp_get_nav_menu_items()

Untuk mengeluarkan jeroan data wp_get_nav_menu_items() wajib insert satu parameter $menu berdasarkan nama menu yang sudah dibuat sebelumnya di dalam DashboardThemeMenu.

Input parameter boleh nama menu, slug menu atau id menu.

<?php
	// Melihat isi print out wp_get_nav_menu_items() dengan parameter 'main-menu'
	var_dump(wp_get_nav_menu_items('main-menu'));
?>

Hasil print out mengeluarkan data mentah dalam bentuk array seperti berikut:

array (size=2)
  0 => 
    object(WP_Post)[886]
      public 'ID' => int 7
      public 'post_author' => string '1' (length=1)
      public 'post_date' => string '2021-09-26 09:25:13' (length=19)
      public 'post_date_gmt' => string '2021-09-26 09:25:13' (length=19)
      public 'post_content' => string '' (length=0)
      public 'post_title' => string 'Home' (length=4)
      public 'post_excerpt' => string '' (length=0)
      public 'post_status' => string 'publish' (length=7)
      public 'comment_status' => string 'closed' (length=6)
      public 'ping_status' => string 'closed' (length=6)
      public 'post_password' => string '' (length=0)
      public 'post_name' => string 'home' (length=4)
      public 'to_ping' => string '' (length=0)
      public 'pinged' => string '' (length=0)
      public 'post_modified' => string '2021-09-26 09:25:13' (length=19)
      public 'post_modified_gmt' => string '2021-09-26 09:25:13' (length=19)
      public 'post_content_filtered' => string '' (length=0)
      public 'post_parent' => int 0
      public 'guid' => string 'http://localhost/pehtheme-wp/?p=7' (length=33)
      public 'menu_order' => int 1
      public 'post_type' => string 'nav_menu_item' (length=13)
      public 'post_mime_type' => string '' (length=0)
      public 'comment_count' => string '0' (length=1)
      public 'filter' => string 'raw' (length=3)
      public 'db_id' => int 7
      public 'menu_item_parent' => string '0' (length=1)
      public 'object_id' => string '7' (length=1)
      public 'object' => string 'custom' (length=6)
      public 'type' => string 'custom' (length=6)
      public 'type_label' => string 'Custom Link' (length=11)
      public 'title' => string 'Home' (length=4)
      public 'url' => string 'http://localhost/pehtheme-wp/' (length=29)
      public 'target' => string '' (length=0)
      public 'attr_title' => string '' (length=0)
      public 'description' => string '' (length=0)
      public 'classes' => 
        array (size=1)
          0 => string '' (length=0)
      public 'xfn' => string '' (length=0)
  1 => 
    object(WP_Post)[889]
      public 'ID' => int 8
      ...
      ...

Setelah mengetahui isi data yang dikandung masing-masing sintak, langkah selanjutnya tinggal gunakan sesuai keinginan.

Mari kita coba satu-satu.

Display menu dengan sintag wp_nav_menu()

Dari hasil output yang dikeluarkan fungsi wp_na_menu() sudah dalam bentuk struktur komponen HTML yang utuh, maka developer fokus nulis style CSS-nya saja, done.

<div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menu">
        <li id="menu-item-1" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1">
            <a href="http://localhost/pehthemepress/" aria-current="page">Home</a>
        </li>
        <li id="menu-item-2" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2">
            <a href="http://localhost/pehthemepress/category/books/">Books</a>
        </li>
    </ul>
</div>

Kurang puas dengan dengan attribut class HTML yang disertakan dalam wp_nav_menu(), tinggal custom output dengan cara menambah parameter berikut:

<?php
wp_nav_menu ( array (
    'menu'              => '', // (int|string|WP_Term)
    'menu_class'        => '', // (string)
    'menu_id'           => '', // (string)
    'container'         => '', // (string)
    'container_class'   => '', // (string)
    'container_id'      => '', // (string)
    'fallback_cb'       => '', // (callable|bool)
    'before'            => '', // (string)
    'after'             => '', // (string)
    'link_before'       => '', // (string)
    'link_after'        => '', // (string)
    'echo'              => '', // (bool)
    'depth'             => '', // (int)
    'walker'            => '', // (object)
    'theme_location'    => '', // (string)
    'items_wrap'        => '', // (string)
    'item_spacing'      => ''  // (string)
) );
?>

Contohnya, kalau ingin mengganti class bawaan WordPress dengan class CSS milik sendiri atau class-class dari framework CSS, insert custom code berikut:

<?php
wp_nav_menu(array(
    'menu'              => 'main-menu',
    // Manage div class 
    'container_id'      => 'insert-own-container-div-id',
    'container_class'   => 'insert-own-container-div-class',
    // Manage ul class
    'menu_id'           => 'insert-own-ul-id',
    'menu_class'        => 'insert-own-ul-class'
));
?>

Maka hasil render HTML sebagai berikut:

<div id="insert-own-container-div-id" class="insert-own-container-div-class">
    <ul id="insert-own-ul-id" class="insert-own-ul-class">
        <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-7">
            <a href="http://localhost/pehtheme-wp/" aria-current="page">Home</a>
        </li>
        <li id="menu-item-8" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8">
            <a href="http://localhost/pehtheme-wp/index.php/category/books/">Books</a>
        </li>
    </ul>
</div>

Dari parameter 'container_id' => 'your-css-id', container_class' => 'your-css-clsss' untuk mengontrol elemen <div> sebagai pembungkus parent container. Sedangkan parameter 'menu_id' => 'own-css-id', 'menu_class => 'insert-your-class' value untuk mengatur element <ul>.

Pertanyaannya, bagaimana cara insert class lain ke dalam elemen <li> hasil render wp_nav_menu()?

Ternyata untuk menambah class lain ke dalam tag <li>, tidak semudah menambah parameter container sebelumnya, tapi butuh perlakuan khusus dengan cara injek ke dalam sistem. Caranya agak tricky memang, tapi begini cara proses kerjanya.

Pertama, WordPress membolehkan developer untuk melakukan tweaking terhadap data default CMS WordPress melalui jalur API atau WP Hook tampa harus merubah coding asli.

Kemudian untuk merubah data dari core system, developer cukup menambah script yang telah disediakan ke dalam file function theme. Insert code berikut ke dalam file function.php WordPress theme;

function insert_class_to_li_wp_nav_menu( $classes, $item, $args, $depth) {
    if ( isset($args->insert_li_class) ) {
        $classes[] = $args->insert_li_class ;
    }
    return $classes;
}

add_filter( 'nav_menu_css_class', 'insert_class_to_li_wp_nav_menu', 10, 4);

Setelah proses add_filter(), baru panggil argumen yang terdaftar ke dalam parameter sintak wp_nav_menu().

<?php
wp_nav_menu( array (
	'menu' => 'main-menu',
	'container_id'      => 'insert-own-container-div-id',
	'container_class'   => 'insert-own-container-div-class',
	'menu_id'           => 'insert-own-ul-id',
	'menu_class'        => 'insert-own-ul-class',
	// Add class to li wp_nav_menu()
	'insert_li_class'   => 'insert-own-li-class'
));
?>

Maka hasil render file HTML, di dalam tag <li> sudah disertakan class insert-own-li-class.

Display menu dengan sintag wp_get_nav_menu_items()

Selanjutnya, sintag yang kedua wp_get_nav_menu_items() menghasilkan data mentah gabungan antara data menu dengan data posting yang disimpan dalam sebuah array.

Data array dalam sintag wp_get_nav_menu_items() tidak bisa langsung di echo, tapi harus di-extrak satu-persatu menjadi potongan data kecil-kecil, setelah itu tinggal tempel sesuka hati di dalam file template tema WordPress.

Langkah pertama, buat sebuah variabel baru untuk menampung data mentah.

<?php
	// Variable baru sebagai keranjang penampung
	$menu_items = wp_get_nav_menu_items('main-menu');
?>

Setelah itu, variabel yang sudah berisi list data menu, tinggal di-extrak dengan proses looping.

Karena nilai data dalam wp_get_nav_menu_items() banyak, maka cukup comot key title dan url sesuai kebutuhan untuk desain menu navigasi yang diperlukan hanya ‘nama menu’ dan ‘link’, yang lain abaikan saja.

Berikut contoh code-nya:

<?php
	// Looping
	foreach ( $menu_items as $key => $menu_item ) {
		
		// Tampung data output ke variabel baru supaya lebih ringkas
		// Bagian ini opsional  
		$title = $menu_item->title;
		$url = $menu_item->url;

		// Print out ke layar
		echo $title . '<br>';
		echo $url . '<br>';
	}
?>

Hasil output seperti berikut:

Home
http://localhost/pehthemepress/

Books
http://localhost/pehthemepress/categories/books

Nah, terakhir tinggal implementasi langsung ke dalam tema WordPress.

<nav id="horizontal-navbar" class="flex nowrap overflow-x">
    <ul class="list-reset">
        <?php foreach ( $menu_items as $key => $menu_item ) : ?>
            <li class="inline-block">
                <a href="<?php echo $menu_item->url; ?>">
                    <?php echo $menu_item->title; ?>
                </a>
            </li>
        <?php endforeach; ?>
    </ul>
</nav>

Ternyata cara kedua cukup simpel sekali.

Kesimpulan

Dari dua fungsi tersebut, mana yang lebih bagus untuk implementasi ke dalam desain Wordpress navigation menu?

Dua-duanya bagus, karena sama-sama sintak dari CMS WordPress.

Kalau mengikuti aturan standar code WordPress, maka cukup tempel fungsi <?php wp_nav_menu(); ?> selanjutnya oprek style CSS untuk poles desainnya.

Kalau saya pribadi lebih menyukai cara kedua, memakai fungsi wp_get_nav_menu_items() karena hasil kerjanya lebih simple dan bersih. Dan tidak perlu lagi mikirin custom output dengan menambah fungsi add_filter di file function.

Buat yang telah menemukan dan membaca tutorial ini, harap memberi komentar atau pendapatnya terhadap isi tulisan ini. Atensi apapun dari pembaca atau pencari solusi sangat dibutuhkan untuk tambah berkembangnya posting tutorial berikutnya. Terima kasih.

Comment

comments powered by Disqus