Cara Membuat Menu + Dropdown Sub Menu di WordPress

Melanjutkan SUB-BAB Panduan sebelumnya, kali ini Anda akan belajar cara membuat menu sekaligus menyusun Dropdown Sub Menu di WordPress.

Saya yakin Anda pernah menemukan berbagai macam jenis dan bentuk menu navigasi dari website-website yang ada di internet.

Ada yang menggunakan menu tunggal, ada juga yang menggunakan 2 menu (utama dan secondary), bahkan ada juga yang menggunakan Sub Menu dengan Dropdown hingga Mega Menu.

Sebelum membuat menu yang lebih kompleks seperti Mega Menu, Saya sarankan pahami dahulu apa saja yang sebaiknya ada di menu navigasi. Kemudian pelajari cara membuat Menu dan Sub Menu sebagai pemahaman dasar.

Panduan ini akan menjelaskan tahap demi tahap pembuatan menu… Sudah siap ? Mari kita mulai…

Tips Dalam Optimasi Menu Website

Website yang teroptimasi dengan baik selalu memiliki menu yang TEPAT untuk memudahkan pengunjung melihat seluruh isi website.

Semakin jelas menu website Anda, maka semakin besar kemungkinan pengunjung untuk melihat konten lain yang ada di Website Anda. Bahkan semakin besar pula kemungkinan calon konsumen untuk menghubungi Anda.

Umumnya item-item yang ada di menu website berupa link menuju halaman-halaman terpenting saja seperti:

1. Homepage: Halaman beranda Website Anda. Misalnya https://mjurnal.com/
2. Blog: Halaman arsip post terbaru jika Anda menggunakan Custom Homepage.
3. Kontak: Halaman yang berisi informasi bagaimana cara menghubungi Anda.
4. About: Halaman yang menjelaskan tentang website Anda.
5. Layanan / Produk: Halaman yang berisi daftar Layanan dan Jasa / Produk Anda.
6. Kategori Post: Halaman kategori postingan website Anda (biasanya untuk website blog).
7. Dan Halaman Penting lainnya seperti halaman promosi, affiliasi dll.

Note: Tidak ada aturan pasti dalam memilih item-item menu. Semua tergantung keputusan Anda dan juga tergantung jenis website Anda.

Namun ada 1 yang perlu Saya tekankan:

MENU HARUS BERISI HALAMAN TERPENTING YANG SINGKAT DAN DESKRIPTIF SERTA MAMPU MENJANGKAU SELURUH ISI SITUS ANDA

rolan mardani

Cara Membuat Menu WordPress

Note: Website demo (ID Blog) yang Saya jadikan patokan menggunakan Theme Astra. Lokasi Penempatan Menu setiap theme bisa saja berbeda-beda. Ini bukan masalah, hanya perlu disesuaikan saja.

Untuk membuat menu di WordPress, silahkan ikuti tahap-tahap berikut:

1. Login Dashboard Admin.
   Silahkan login ke dashboard Admin website WordPress Anda.
   
2. Buat Menu Pertama Anda.
   Jika ini pertama kalinya Anda membuat menu, pilih Tampilan > Menu.
   
   Kemudian isi Kolom Nama Menu. Misalnya “Menu Utama”.
3. Tentukan Penempatan Menu.
   Pada bagian pengaturan menu, pilih penempatan menu. Note: Theme Astra menyediakan 5 Penempatan Menu. Nanti akan Saya jelaskan dibawah.
   
   Saat ini, cukup centang Menu Utama saja. Kemudian klik Buat Menu untuk melanjutkan.
4. Pilih Item Menu.
   Pada bagian Laman, silahkan centang Halaman yang ingin Anda tambahkan ke dalam Menu. Misalnya Saya menambahkan Homepage, Blog, dan Kontak. (Pastikan Anda Sudah membuat halaman tersebut).
   
   Kemudian Klik Tambahkan ke Menu.
5. Simpan Menu dan Cek.
   
   Silahkan klik Simpan Menu. Kemudian kunjungi halaman beranda website Anda (https://namadomain.com/). Kurang lebih tampilan menu akan seperti ini:

Mudah bukan ? Jika masih kurang menarik… Coba beberapa tahapan selanjutnya…

Tambahkan Kategori Ke Menu

Selain menambahkan halaman, Anda juga bisa menambahkan kategori ke dalam menu. Seperti Demo Site ID Blog, Saya juga menambahkan kategori ke dalam Menu Utama.

Untuk menambahkan kategori silahkan kembali ke dashboard admin WordPress, kemudian pilih Tampilan > Menu.

Perlebar bagian kategori, kemudian klik “Lihat Semua” untuk melihat semua daftar kategori yang sudah ada di Website Anda.

Selanjutnya centang kategori yang ingin ditambahkan kemudian klik Tambahkan ke Menu.

Terakhir, klik Simpan Menu. Kemudian untuk melihat perubahan kunjungi kembali beranda Website Anda. Kurang lebih tampilannya seperti ini:

Namun sepertinya masih kurang bagus… Sekarang coba kita sesuaikan urutan menu ini…

Sesuaikan Urutan Menu

Kembali lagi ke dashboard admin WordPress. Kemudian pilih Tampilan > Menu. Untuk memindahkan menu, cukup gunakan “Klik-Tahan-Tarik-Lepas”.

Ini Bahasa Indonesia loh… Paham dong yaa…

Misalnya, Saya mau mengubah urutan menu yang semula menjadi seperti ini:

Menu Awal	Penyesuaian Menu
Home	Home
Blog	Blog
Kontak	Blogging
Blogging	Komputer
Game	Smartphone
Komputer	Game
Smartphone	Kontak

Pertama, ubah urutan menu “Kontak” menjadi paling akhir. Caranya, Klik-Tahan menu kontak. Kemudian tarik sampai ke daftar terakhir (dibawah Kategori Smartphone) dan lepas klik seperti gambar berikut:

Selanjutnya pindahkan Kategori Game ke antara Smartphone dan Kontak. Jangan lupa klik Simpan Menu dan lihat perubahan menu menjadi seperti ini:

Tentunya mudah doong… Sekarang coba kita belajar cara membuat Sub Menu WordPress…

Cara Membuat Dropdown Sub Menu

Sub Menu merupakan sebuah menu turunan dari menu utama nya. Minimal Sub Menu terdiri dari 2 tingkatan yaitu Parent menu dan Child menu seperti ini:

Misalnya, Saya ingin menambahkan Sub Menu dari Kategori Smartphone yaitu Oppo, Samsung, dan Xiaomi.

Sebelumnya Kita menambahkan laman dan kategori sebagai item menu. Sekarang Saya tunjukkan cara menambahkan Link Custom (Tautan Tersuai) ke dalam menu.

Note: Sebetulnya proses membuat Sub Menu sama saja. Jadi item apapun yang akan Anda gunakan kedalam menu (Laman, Pos, Kategori, Tautan Tersuai, Format dll), prosesnya tetap sama.

Untuk menambahkan Sub Menu WordPress, silahkan ikuti tahap-tahap berikut:

1. Masuk ke Editor Menu.
   Dalam dashboard Admin WordPress, pilih Tampilan > Menu.
   
2. Pilih Item Sub Menu.
   Karena kita menggunakan tautan tersuai, maka perlebar bagian itu…
   
   Isi bagian URL dengan URL tujuan dari Sub Menu ini. Awali URL dengan https://. Kemudian bagian Teks Tautan isi dengan Teks yang akan tampil sebagai Sub Menu. Misalnya “Oppo”. Kemudian klik Tambahkan ke Menu.
3. Ubah Item Menu Menjadi Sub Menu.
   Caranya, klik-tahap Item “Oppo”, kemudian tarik ke bawah item Smartphone.
   
   Perhatikan: Posisi Sub Menu tidak boleh sejajar dengan parent menu. Ini menandakan item Oppo sebagai Sub Menu dari Smartphone. Jadi harus berjarak beberapa spasi. Mudah kok, coba saja.
4. Buat Item Sub Menu ke 2, 3 dst.
   Ulangi tahap 2 dan 3. Anda bebas memilih apakah menggunakan kategori atau laman. Buatlah kreasi yang cantik. Jika sudah jangan lupa klik Simpan Menu. Kemudian lihat perubahannya:
   

Sejauh ini sudah keren sih… Tapi Saya rasa masih kurang optimal untuk sebuah blog…

Menu ID Blog akan menuju ke Homepage. Saya rasa masih banyak pengunjung yang tidak tahu kalau menu itu akan menuju ke Homepage.

Begitu juga untuk Menu Blog. Mungkin ada baiknya kita mengubah nama Item menu ini tanpa mengubah link tujuannya… Tentu bisa doong…

Edit Menu

Masuk kembali ke dashboard Admin > Tampilan > Menu. Kemudian klik icon panah kebawah pada item menu yang akan diubah.

Silahkan ubah kolom “Lavel Navigasi” sesuai yang diinginkan. Jika sudah jangan lupa klik Simpan Menu dan lihat perubahannya:

Naah… sekarang sudah jauh lebih bagus…

Namun… tiba-tiba Saya merasa item menu “Kontak” tidak cocok di Menu Utama. Saya rasa lebih baik menu kontak ini berada di Footer.

Oke… Sekarang coba kita belajar cara menghapus Item menu.

Hapus Menu

Untuk menghapus item menu, klik icon panah kebawah pada item tersebut, kemudian klik Singkirkan.

Sementara jika Anda ingin menghapus menu ini (bukan itemnya, tapi menu utama ini secara keseluruhan), silahkan klik Hapus Menu.

Jika sudah, jangan lupa klik simpan menu dan cek hasilnya:

Sekarang item menu kontak sudah hilang. Sementara halaman itu juga penting.

Jangan dilema… Anda bisa membuat kembali menu yang baru. Penempatannya bisa dibagian footer. Untuk itu pahami dulu lokasi penempatan menu WordPress.

Pahami Lokasi Penempatan Menu

Seperti yang Saya sampaikan sebelumnya, setiap theme WordPress bisa memiliki penempatan menu yang berbeda-beda.

Ada yang menyediakan 2 penempatan (header dan footer). Ada juga yang lebih dari itu.

Untuk theme Astra, ada 5 penempatan yaitu:

1. Menu Utama: Yaitu menu yang pertama kali kita buat. Menu ini umumnya berada dibagian header dekat logo.
2. Secondary Menu: Pernah lihat Website Media Nasional, misalnya seperti ini:
   
   Itu ada 2 menu dibagian Header. Nah, secondary menu ini bisa Anda gunakan jika Anda membutuhkan 2 menu berbeda didalam header.
3. Off-Canvas Menu: Menu ini disebut juga dengan Mobile Menu atau sejenisnya. Mungkin theme lain menggunakan istilah itu. Jadi, Off-Canvas Menu ini akan ditampilkan pada perangkat tablet dan mobile sepertii ini:
   
   Note: Menu utama boleh saja sama dengan Off-Canvas Menu. Semua tergantung Anda.
4. Logged in Account Menu: Penempatan menu ini lebih sering digunakan untuk website yang menjual produk seperti toko online. Logged in Account Menu hanya akan muncul jika pengguna sudah login ke website Anda.
5. Menu Kaki: atau Footer Menu. Nah menu inilah yang akan tampil dibagian Footer Website Anda. Misalnya demo site ID Blog:
   

Selanjutnya tugas Anda, silahkan buat menu Footer dan tambahkan Halaman “Kontak, Privacy Policy, dan Terms”.

Caranya ulangi Cara Membuat Menu WordPress diatas. Anda hanya perlu mengubah penempatannya saja.

Note: Kalau sudah membuat Menu Footer, Utama, Off-Canvas dll. tapi menunya belum muncul ketika Anda mengunjungi Homepage, jangan panik. Itu karena belum ditampilkan saja.

Untuk theme astra (dan beberapa theme lainnya), Anda harus menyesuaikan bagian header dan footer. Selengkapnya bisa Anda pelajari pada SUB-BAB Header dan Footer.

Silahkan gunakan Pintasan Panduan berikut: