Programming, Tutorial Series, wordpress

Membangun Theme – Navigasi

Post ini adalah rangkaian dari Membuat Theme WordPress Untuk Newbie – Tutorial Series 🙂

DAFTAR TUTORIAL SERIES

  1. Perispan & Instalasi WordPress
  2. Membangun Theme – style.css dan index.php
  3. Membangun Theme – header.php dan footer.php
  4. Membangun Theme – Navigasi

Oke, kita lanjut ke bagian berikutnya, yaitu membuat Navigasi (Custom Navigation) di WordPress. Membuat dan mengelola navigasi di WordPress menjadi sangat mudah, karena kita hanya perlu sedikit code dan navigasi bisa ganti sesuka hati dari Dashboard.

Sebelum memulai, di file ada sedikit perubahan. Saya menambahkan CSS Framework Bootstrap unutk membantu styling, jadi kita tidak repot membangun CSS dari awal. Nanti kita akan bahas lebih mendetail di tutorial series berikutnya 🙂

Prosesnya melibatkan file functions.php. Pertama kita perlu memberitahu WordPress bahwa kita memiliki fitur navigasi di theme yang kita buat. Di folder utama theme, buat file functions.php.

Menambahkan Fitur Navigasi: functions.php

Jadi, kita buka file functions.php lalu kita tambahkan code berikut:

<?php
// Enable Nav Menu /////////////////////////////////////////////////////////////////////////////
add_theme_support( 'menus' );
if (function_exists('register_nav_menus')) {
    register_nav_menus(array(
        'top_menu' => 'Header Navigation'
    ));
}
?>

Penjelasan code di atas kira-kira seperti ini:

  • Pertama, kita beritahu WordPress bahwa kita ingin menambahkan Menu Navigasi ke theme kita. Kita lakukan dengan fungsi add_theme_support(). Tambahkan parameter ‘menus’ untuk melengkapinya.
  • Kedua, kita cek apakah fungsi register_nav_menus() ada dan dapat digunakan. Langkah ini sebenarnya bisa dilewatkan, dan langsung ke line berikutnya. Logikanya, jika fungsi ini tak ada (mungkin ada perubahan kedepannya pada fungsi-fungsi WordPress), tidak akan ada error message yang terjadi. Main ‘aman’ dan ‘bersih’ boleh saja kan? 😀
  • Ketiga, barulah kita eksekusi fungsi register_nav_menus() untuk menambahkan navigasi ke theme kita. Fungsi ini sebenarnya digunakan untuk menambahkan LEBIH DARI SATU menu. Fungsi untuk menambahkan HANYA satu navigasi adalah register_nav_menu(). Perbedaanya ada di parameter. Jika di register_nav_menus() parameter yang digunakan adalah array key-value yaitu slug dari navigasi dan deskripsi dari navigasi, di register_nav_menu() kita hanya perlu satu key-value. Contoh di atas, ‘top_menu’ adalah slug, dan ‘Header Navigation’ adalah deskripsi dari navigasi.

Tampilkan navigasi di Theme: header.php

Beres register navigasi, sekarang kita bisa panggil navigasi tadi di theme kita. Karena ini adalah navigasi utama, maka kita akan tempatkan di header.php. Fungsi ini bisa kita panggil sesuai keinginan di template pada theme kita. Semisal, kita bisa panggil di footer.php jika kita memiliki Footer Navigation. Buka header.php, dan tambahkan line berikut:

<ul class="nav">
  <?php
    wp_nav_menu(array(
     'theme_location' => 'top_menu',
     'container' => false,
     'menu_class' => 'nav',
     'fallback_cb' => 'wp_page_menu'
    );
  ?>
</ul>

Navigasi yang telah dibuat kita panggil di theme dengan wp_nav_menu(). Parameter yang digunakan sebenarnya sudah cukup menjelaskan, tapi akan saya bahas sedikit.

  • theme_location, merupakan nama slug yang kita berikan saat register tadi.
  • container, menentukan tag html yang akan dibuat sebelum dan sesudah navigasi, Kita set false karena sebelumnya kita sudah mengapit fungsi ini dengan UL.
  • menu_class, class css yang kita gunakan untuk menu navigasi
  • fallback_cb, jika custom navigation tidak ditemukan, maka menu default dari wordpress akan digunakan.

Sudah? Nah, langkah terakhir adalah membuat sebuah Menu bari dari Dashboard. Masuk ke menu Appeareance – Menus. Buat sebuah menu baru, tambahkan beberapa link, dan voila! Kita sudah membuat menu dinamis di WordPress. Kasi selamat ke diri sendiri dulu! Tambahin tepuk tangan! :3

Navigasi kita cukupkan di sini dulu. Kalau ada yang dirasa perlu dibahas lagi, sila komentar di bawah :). Berikutnya, kita akan lanjut membuat custom template untuk Page yang kita buat. Ketemu lagi di Membangun Template: single.php

File untuk bagian ini bisa didownload di sini atau di sini. Panduan Download di sini.

Iklan
Standar

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s