Tutorial Bisnis Online

Custom Menu

Publish: 12 May 2012 03:51

Salah satu keunggulan dari WordPress sejak versi 3.1 adalah fasilitas custom menu dimana kita bisa mengatur menu yang muncul mengandung beberapa komponen yaitu: Pages, Categories dan Links. Sebelum adanya fasilitas ini, kita harus memasukkannya secara manual lewat file themes. Tapi Alhamdulillah sekarang tidak perlu lagi.

Tapi sayang tidak semua themes mendukung fungsi ini. Maklumlah karena ini adalah fungsi yang baru. Nah, di panduan ini kita akan coba menambahkan fasilitas ini di themes kita bila fungsi ini belum ada. Untuk mengeceknya, silahkan klik menu Appearance – Menus. Jika muncul peringatan seperti ini berarti themes anda masih belum mendukung custom menu

Meski begitu, jika themes anda tidak menyediakan menu di bagian atas dan menu-menunya hanya ada di samping sebagaimana themes default, maka anda tinggal membuat custom menunya saja dan nanti custom menu-nya tinggal diseret melalui menu Appearance – Widget

Mengelola Custom Menu

Sebagai awal, kita coba dulu saja custom menunya. Kita akan menggunakan themes Twenty Teen yang merupakan themes default WordPress.

Untuk mengelola Custom Menu, silahkan masuk menu Appearance – Menus. Pertama kita create menu dulu. Isikan saja nama sembarang disana. Contohnya mungkin Top Menu

Berikutnya kita pasang menu-menunya. Lihat bagian sebelah kiri. Pilih nama menunya lalu save.

Sekarang kita tinggal menyusun menunya.

Untuk memasukkan link ke web lain atau halaman lain di blog anda, isikan URL dan tulisan yang ingin dimunculkan  pada box Custom Links lalu klik tombol Add to Menu

Untuk menambah page dan category, anda cukup memberi centang item yang ingin anda munculkan lalu klik Add to Menu

 

Semua item yang ingin dimasukkan akan langsung muncul di bagian Menu dalam contoh ini Top Menu

 

Anda bahkan bisa mengubah urutan dari menu-menu tersebut dengan menggeser-gesernya seperti widget biasa. Setelah semua selesai, jangan lupa klik Save ya

Yuk, mari kita lihat seperti apa jadinya blog kita

Mengaktifkan Custom Menu pada Themes

Sekarang bagaimana kalau themes yang kita pakai tidak memiliki fasilitas custom menu? Maka kita perlu menambahkannya sendiri. Caranya cukup mudah kok. Dalam contoh ini saya ambil themes jadul dengan nama graytone yang dibuat oleh Jinsona Design

Seperti anda lihat pada gambar disamping kanan, disebelah atas title dan bawah terdapat 2 deret menu. Sebagai tantangan, kita akan mengubah keduanya menjadi custom menu sehingga bisa kita gonta-ganti sesuka hati di kemudian hari.

Yuk kita mulai! Kita akan banyak bergelut dengan kode-kode disini. Tapi insya Allah gampang aja kok. Bagi yang belum paham sama sekali tentang HTML dan PHP saya sarankan untuk melewatkan bab ini daripada anda makin puyeng. Nanti setelah punya sedikit kemampuan bolehlah dilanjut

Persiapkan Fungsi

Setiap themes biasanya punya file bernama functions.php. Jika tidak ada, silahkan buat yang baru ya. Dan secara kebetulan themes Graytone ternyata sudah memiliki file tersebut jadi langsung aja kita buka. Untuk melakukan editing themes, saya sarankan anda bekerja di localhost. Ini selain untuk mempercepat kerja, juga menghemat biaya

Pertama, kita masukkan kode ini di functions.php

register_nav_menus(array(

       ‘primary’ => __( ‘Primary Navigation’, ‘graytone’ ),

));

 

Sekarang simpan file functions.php anda. Hasil akhirnya akan nampak seperti ini:

Persiapkan Themes

Sekarang kita akan menyiapkan themes. Kalau dilihat dari gambarnya sih, biasanya menu seperti itu ada di bagian header.php karena dia harus muncul di semua halaman

Untuk mempermudah pencarian, biasanya menu di bagian atas menggunakan kode seperti ini:

wp_list_pages(....)

 

Titik-titik di belakangnya bisa jadi berbeda antara satu themes dengan themes yang lain. Kalau di Graytone kodenya seperti ini:

<?php

wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);

?>

 

Mari kita ganti dengan kode seperti ini:

<?php wp_nav_menu(); ?>

 

Dan karena fungsi ini sudah langsung memunculkan kode <ul> maka kode-kode ul kita hapus semua

Kode-kode yang saya highlight itu akan saya hapus semua karena nanti custom menu bisa menggantikan semuanya. Hasil akhirnya akan seperti ini:

Sekarang anda bisa mencoba melakukan pengelolaan custom menunya. Cobalah periksa themes anda dan mari kita lihat apakah anda bisa menambahkan fasilitas custom menu pada themes tersebut.

Tutorial Lainnya

• Custom Header
• Custom Background
• Theme Options
• Sidebar Widget