Opinion

Wordpress Drop Down Menu dengan WP Menu Creator

ebagai seorang developer web yang menggunakan Wordpress (selain Joomla) sebagai backend, tentu Anda pernah berkeinginan menambahkan atau memperindah tampilan website calon atau pelanggan Anda menggunakan menu navigasi dropdown dibawah header secara horisontal. Yang ketika Anda arahkan mouse Anda ke menu navigasi, maka akan memunculkan beberapa rangkaian sub menu dibawahnya dan ketika Anda jauhkan mouse Anda maka menu tersebut akan kembali ke semula.  Seperti yang ditampilkan oleh gambar dibawah ini, tampaknya indah dan menarik, bukan?

Wordpress Drop Down Menu

Menu yang ditampilkan diatas murni menggunakan CSS (Cascading Style Sheet) dan WP Menu Creator plugin dari UltimateIDX. Menu diatas tidak hanya terbatas pada kategori, halaman atau blogroll, seperti pada  Suckerfish Drop Down Menu plugin, namun tautan link apa saja bisa Anda masukkan kedalamnya. Disini saya mencoba untuk berkreasi menggunakan Default template-nya Wordpress 2.7. Untuk setiap template memerlukan perlakuan khusus, dikarenakan setiap template menggunakan CSS desain yang berbeda. Jadi, jangan harap untuk CSS menu di Default template dapat di gunakan di template lain. Namun jangan khawatir, saya akan mencoba membuat kategori gallery khusus untuk CSS menu per template yang menggunakan WP Menu Creator plugin, link-nya bisa Anda dapatkan di akhir dari artikel ini. Termasuk instruksi cara menggunakannya yang saya jadikan satu didalam format terkompresi.

Sebelumnya tanpa maksud berlama-lama, saya anjurkan Anda terlebih dahulu memahami dasar-dasar internet, PHP, HTML, CSS, URL dan Wordpress agar tidak mengalami kebingungan tiada henti. Kemudian menu ini hanya bisa ditambahkan jika Anda mempunyai kontrol langsung ke file template dan hosting. Penyedia jasa blog gratis wordpress tidak menyediakan fasilitas ini, kecuali Anda adalah pelanggan berbayar. Langsung saja berikut adalah langkah-langkahnya :

1.   Download WP Menu Creator plugin, ekstrak di lokal, upload, lalu aktifkan pluginnya.

2.   Download file CSS menu dan file javascript pendukung dari template yang sesuai dengan template Anda. Bisa Anda lihat di sini. Ekstrak zip file tersebut sehingga nantinya akan muncul folder “menu-css”. Upload  atau tempatkanlah folder “menu-css” kedalam folder yang sama dengan template Anda. File pendukung menu.js yang dikutsertakan hanya untuk menampilkan CSS menu di IE (Internet Explorer).

3.   Dari Dashboard, arahkan kursor mouse ke Tools lalu klik dan pilih WP Menu Menu Manager.

4.   Pada isian “Add New Menu” di box “Menu Title” isikan, contoh nama menunya “Top Navigation.” Lalu klik tombol Create Menu.

5.   Sehingga akan muncul seperti dibawah ini dan catat atau ingat nomor ID yang muncul pada sebelah kiri.  Klik link judul “Top Navigation”.

6. Pada isian “Top Navigation”, isikan di kotak “Title” misalnya “Home”, kemudian pada “Type” pilih “External Link”, pada “Value” isikan full path URL yang ingin Anda tuju misalnya “http://www.domainAnda.com/”. Disini karena saya menggunakan localhost, maka saya isikan “http://localhost/blog” sebagai penanda “Home”. Pada “Parent” dan “Order“, karena ini adalah menu yang pertama, isikan saja dengan angka “0″. Jika sudah klik tombol “Create Menu Item”.

Sehingga akan muncul seperti dibawah ini.

7.  Setelah itu buatlah menu kedua, misalnya saya ingin menambahkan menu “Apa aja deh” yang dibawahnya nanti akan saya tambahkan sub menu dari 2 link target yang berbeda. Pada isian “Top Navigation”, isikan di kotak “Title” misalnya “Apa aja deh”, kemudian pada “Type” pilih “External Link”, pada “Value” isikan dengan “javascript: void(0);” karena kita akan membuat link ini tidak dapat diklik (sebagai root menu). Biarkan isian “Parent” dikosongkan sedangkan pada “Order” isikan dengan angka “0″. Jika sudah klik tombol “Create Menu Item”. Dan perhatikan “ID” disebelah kiri “Link Name“. “ID” yang muncul tersebut adalah ID Parent menu atau ID induk dari sub menu dibawahnya.

8.  Sekarang kita buat sebuah sub menu baru dibawah menu “Apa aja deh” tadi. Seperti biasa, isikan pada kotak “Title” misalnya kita ingin menampilkan arsip dari kategori “Artikel” dengan alamat URL permalink “http://www.domainAnda.com/category/artikel”, maka kita isi dengan “Kumpulan Artikel”. Lalu pada “Type” pilih “External Link”, pada “Value” isikan dengan “http://www.domainAnda.com/category/artikel” sesuai dengan URL permalink yang kita miliki. Pada isian “Parent” isikan dengan “ID” dari item “Apa aja deh” tadi sedangkan pada “Order” isikan dengan angka “0″. Jika sudah klik tombol “Create Menu Item”.

9. Selanjutnya kita akan membuat sub menu kedua. Lakukan seperti pada langkah nomor 8 diatas, ganti “Title” dan “Value” sesuai dengan menu yang Anda inginkan, sedangkan pada “Parent” tetap isikan dengan “ID” item milik “Apa aja deh”, sama seperti isian ID menu pada nomor 8 diatas. Kecuali pada “Order“, isikan dengan angka “1″. Jika sudah klik tombol “Create Menu Item”.

10. Lakukan hal tersebut diatas jika ingin menambahkan menu baru. Jika tidak ada lagi menu yang kita buat, sekarang kita sudah menyelesaikan tahap pembuatan menu dari sisi Plugin atau menu Administrasi.  Sekarang saatnya kita tampilkan menu dropdown tersebut dari template kita. Pertama, catat nomor “ID” yang muncul ketika Anda melakukan langkah nomor 5. Misalnya ID yang didapat adalah angka “1″.

11. Buka file header template Anda, misalnya, karena disini saya menggunakan contoh menggunakan Default template bawaan asli Wordpress, maka file tersebut bernama “header.php”. Pastikan Anda sudah melakukan seperti pada langkah nomor 2. Disini kita akan menambahkan 2 kode baru kedalamnya, yaitu memanggil file CSS pendukung dari folder “menu-css” dan memanggil fungsi dari WP Menu Creator plugin dengan syntax : <?php displayMenu(ItemID, Level); ?>.  Sebagai contoh pada file header.php, cari dan tambahkan dibawah :

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />


dengan :

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>
/menu-css/menu-blue-belt.css" type="text/css" media="screen" />

Kemudian, tambahkan dibawah :

<h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>

dengan :

<div id="wrapper">
<div id="nav">
<ul>
<?php displayMenu(1,2); ?>
</ul>
</div>
</div>

12. Buka file “functions.php” dan didalam kode PHP tambahkan lalu simpan, dengan :

wp_enqueue_script('jquery');
wp_enqueue_script('menu', get_bloginfo('template_directory').'/menu-css/menu.js', 'jquery', '1.0');


13. Selesai sudah, kita telah berhasil membuat dropdown menu menggunakan CSS dan WP Menu Creator plugin. Jika masih mengalami kebingungan, silahkan download CSS Default templatenya disini. Ketika artikel ini dibuat, saya baru membuat 2 buah CSS drop down menu untuk 2 buah template yang bisa Anda lihat disini dan telah di coba di browser IE6, Mozilla Firefox, Opera dan Netscape Navigator dengan sukses.

Selamat mencoba.

Update :

Karena kesalahan konfigurasi mengakibatkan link dan category di blog ini tidak dapat ditampilkan, namun sekarang sudah diperbaiki, maaf atas ketidaknyamanan ini.

Oh ya, silahkan teman-teman request nama template Wordpress apa yang ingin dibuatkan CSS drop down menunya. Jika template tersebut tidak terdapat di internet, silahkan upload ke penyedia jasa uploading file, kemudian pastekan link nya di comment blog saya dibawah ini. Tapi, saya tidak bisa janji untuk bisa dengan cepat menyelesaikan atau janji untuk membuatnya, karena saya juga bekerja. Terima kasih ya sudah berkunjung.

© 2009 :: Mujie on the Net ::.