Membuat Theme WordPress dengan Bootstrap Bagian 2 : Membuat Dropdown Menu dengan wp-bootstrap-navwalker
Pada Bagian 2 ini kita akan menggunakan fungsi wp bootstrap navwalker. Fungsi ini dpierlukan agar menu Dropdown bootstrap bisa berjalan dengan baik pada WordPress.
Terlebih dahulu silakan download wp-bootstrap-navwalker. Setelah di-extract, akan ditemukan file wp-bootstrap-navwalker.php. Copy file tersebut ke dalam folder wpbootstrap. Struktur file harusnya seperti ini:
wp-contents/themes/wpbootstrap/wp-bootstrap-navwalker.php
Membuat Theme Functions
Saatnya sekarang kita buat file functions.php dan letakan masih dalam folder theme wpbootstrap. Dalam file functions.php, pertama kali kita harus memanggil file wp-bootstrap-navwalker.php. Pastikan juga kode pemanggilan diawali dengan tag <?php. Perhatikan kode di bawah ini:
<?php
// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');
Langkah selanjutnya, kita buat fungsi untuk menambahkan bootstrap navigation ke dalam thema. Berikut kodenya:
// Add theme support to bootstrap navigation
function my_theme_setup()
{
register_nav_menus(array(
'primary' => __('Primary Menu')
));
}
add_action('after_setup_theme', 'my_theme_setup');
Penggunaan Bootstrap Navigation
Dalam manual instalasi pada wp-bootstrap-navwalker github dijelaskan pada bagian Usage untuk meng-update fungsi wp_nav_menu() pada header.php. Namun di sini saya ingin menggunakan metode lain,yaitu dengan cara menambahkan fungsi support theme melalui functions.php seperti langkah di atas. Berikut kode tersebut:
// Bootstrap navigation
function bootstrap_nav()
{
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
}
Kemudian, silakan buka file header.php. Perhatikan kode di bawah ini:
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">Press</a>
<a class="blog-nav-item" href="#">New hires</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>
Pada baris ke-4 sampai ke-8, kita ganti dengan kode pemanggilan fungsi bootstrap_nav() yang telah kita buat pada file functions.php. Sekarang kode navigasi pada header.php akan nampak seperti ini:
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<?php bootstrap_nav(); ?>
</nav>
</div>
</div>
Ketika kita buka browser dan me-refresh, pada bagian menu akan muncul “Add a menu”. Hal ini dikarenakan kita belum membuat menu apapun dalam admin panel (Dashboard). Silakan buat menu baru melalu Appearance/Menus dan create a new menu. Buat nama menu baru, kemudian tambahkan item menu yang ingin kita munculkan. Pada Menu Settings, checklist kotak
Merapihkan Style Menu
Menu navigasi bootstrap sudah berjalan dengan baik.Hanya saja tampilan menu kelihatan tidak tidak jelas pada warna menu. Mari kita perbaiki dengan menambahkan kode css pada file style.css seperti berikut:
.blog-masthead a{
color: #fff;
}
.blog-masthead a:hover{
color: #428bca;
}
Agar terlihat rapih, sebaiknya kode di atas diletakkan tepat setelah blok kode .blog-masthead.
/*
* Masthead for nav
*/
.blog-masthead {
background-color: #428bca;
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
.blog-masthead a{
color: #fff;
}
.blog-masthead a:hover{
color: #428bca;
}
Untuk mencoba apakah fungsi dropdown menu sudah berjalan dengan baik, silakan buat sub menu. Jika menu utama diklik dan muncul sub menu, berarti dropdown menu sudah berjalan dengan baik. Selamat!
