Memasukkan WordPress Menu ke Navbar Bootstrap

Farid Surya August 24, 2021

Pada posting sebelumnya saya sudah membahas tentang cara membuat template Wordpress sendiri. Pada tulisan ini saya akan membahas tentang bagaimana cara untuk memasukkan menu Wordpress kedalam navbar bootstrap.

Apa itu Bootstrap?

Untuk membuat sebuah halaman web dibutuhkan beberapa komponen utama diantara adalah:

HTML
CSS
Javascript

Bootstrap adalah framework untuk desain User Interface (UI). Oleh sebab itu kita tidak perlu membuat sendiri CSS dan Javascript untuk membuat tampilan sebuah web. Kita tinggal memanggil class yang sudah dibuat oleh Bootsrap kedalam dokumen HTML yang kita buat.

Bootstrap memiliki komponen khusus untuk navigasi yang bernama navbar. Kita dapat menggunakan komponen ini untuk membuat navigasi dalam template Wordpress kita.

Apa itu Menu Wordpress?

Salah satu komponen dalam Wordpress adalah menu. Menu berfungsi untuk melakukan navigasi halaman web. Menu dalam Wordpress dapat digunakan untuk:

Menampilkan Page
Menampilkan Post
Menampilkan Custom Post Type
Menampilkan Post dalam kategori tertentu
Menampilkan arsip post
Mengarahkan ke halaman dengan URL yang ditentukan

Pemetaan menu Wordpress berdasarkan lokasi dalam template

Assigned Menu merupakan daftar menu yang tersimpan dalam database sedangkan Theme Location adalah lokasi menu di template yang kita buat. Lokasi menu tersebut tidak tersimpan dalam database tapi ditentukan lewat file functions.php.

Menentukan Lokasi Menu

Submenu Menus pada administrator tidak akan muncul jika kita belum melakukan registrasi lokasi menu pada file functions.php. Oleh sebab itu buatlah file dengan nama functions.php pada folder template yang sudah kamu buat sehingga struktur file menjadi seperti berikut ini:

index.php
header.php
footer.php
functions.php

Kemudian, isi file functions.php dengan kode berikut:

<?php
function templateku_setup()
{
    register_nav_menus(
        array(
            'navbar' => esc_html__( 'Primary', 'shd-wpstarter' ),
        )
    );
}
add_action( 'after_setup_theme', 'templateku_setup' );
?>

Nah, sekarang submenu Menu pada administrator sudah muncul. Coba refresh halaman administrator kamu. Ingat key menu yang sudah kita buat adalah navbar.

Menampilkan Menu pada Navbar Bootstrap

Sebenarnya ada dua metode untuk menampilkan menu pada navbar bootstrap yaitu menggunakan library dan membuatnya sendiri. Untuk kali ini, saya pakai metode yang gampang dulu ya! Pakai library. Library yang digunakan adalah Menu Walker. Jadi kita tinggal pasang array pada header.php untuk memanggil menu yang sudah kita buat di administrator.

Pertama unduh dulu file libarynya disini kemudian letakkan file tersebut pada folder template kamu. Struktur file jadi begini:

index.php
header.php
footer.php
functions.php
class-wp-bootstrap-navwalker.php

Selanjutnya modifikasi file pada functions.php menjadi seperti berikut ini:

<?php
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
function templateku_setup()
{
    //registrasi menu
    register_nav_menus(
        array(
            'navbar' => esc_html__( 'Primary', 'shd-wpstarter' ),
        )
    ); 
}
add_action( 'after_setup_theme', 'templateku_setup' );
?>

Selanjutnya kita modifikasi file header.php untuk menampilkan menu pada navbar.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <?php
    wp_nav_menu( array(
        'theme_location'    => 'navbar',
        'depth'             => 2,
        'container'         => 'div',
        'container_class'   => 'collapse navbar-collapse',
        'container_id'      => 'navbarSupportedContent',
        'menu_class'        => 'navbar-nav mr-auto',
        'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
        'walker'            => new WP_Bootstrap_Navwalker(),
    ) );
    ?>
    </nav>

Pastikan kode pada index.php adalah seperti berikut ini:

<?php echo get_header();?>

<h1>Template Pertama Saya</h1>

<?php echo get_footer();?>

Sedangkan kode pada footer.php adalah seperti berikut ini:

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Ini adalah tampilan setelah kita menerapkan semua kode diatas:

Tampilan pada halaman web template pertama kamu

Agar navbar menu dapat terisi maka kamu perlu mengatur daftar menu pada administrator Wordpress. Pastikan setting menu location:

Dan pastikan juga daftar menu sudah diatur:

Sehingga tampilan pada halaman web adalah seperti ini:

Navbar menu sudah terisi setelah kita melakukan pengaturan menu pada administrator

Menu Wordpress berhasil diterapkan pada template pertamamu! Nantikan seri mastering Wordpress berikutnya ya. Share ke media sosial kamu kalau ini bermanfaat.

Memasukkan WordPress Menu ke Navbar Bootstrap

Our Services

Products