Anda disini: M Jurnal » WordPress » Cara Membuat Menu + Dropdown Sub Menu di WordPress

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.
    Login Dashboard Admin WordPress
  2. Buat Menu Pertama Anda.
    Jika ini pertama kalinya Anda membuat menu, pilih Tampilan > Menu.
    Cara membuat menu dan dropdown sub menu di website WordPress
    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.
    Tentukan penempatan posisi
    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).
    Pilih item menu
    Kemudian Klik Tambahkan ke Menu.
  5. Simpan Menu dan Cek.
    Simpan navigasi header wp
    Silahkan klik Simpan Menu. Kemudian kunjungi halaman beranda website Anda (https://namadomain.com/). Kurang lebih tampilan menu akan seperti ini:
Cek tampilan menu WordPress

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.

diskon-hosting

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

Cara menambahkan kategori ke menu header WordPress

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.

Simpan navigasi header wp

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

Menambahkan kategori ke menu navigasi WordPress

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 AwalPenyesuaian Menu
HomeHome
BlogBlog
KontakBlogging
BloggingKomputer
GameSmartphone
KomputerGame
SmartphoneKontak
Tabel: Menyesuaikan Urutan Menu

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:

Cara mengubah urutan menu website WordPress

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

Mengubah urutan item navigasi Website WP

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

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:

Contoh Dropdown Sub Menu di WordPress

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.
    Cara menambahkan custom link ke dalam navigasi WP
  2. Pilih Item Sub Menu.
    Karena kita menggunakan tautan tersuai, maka perlebar bagian itu…
    Cara menambahkan item Sub Menu WordPress
    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.
    Cara membuat dropdown Sub Menu di Website WordPress
    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:
    Cek tampilan navigasi header

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.

Cara edit label menu item dan sub menu di WordPress

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

Cara mengubah label item navigasi website

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.

Cara menghapus item menu website WordPress

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:

Cara membuat menu dan dropdown sub menu di WordPress

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:
    Contoh Menu Navigasi Website Media Nasional.
    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:
    Membuat mobile menu / Off-Canvas Menu WordPress.
    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:
    Contoh Footer menu WordPress

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:

Pintasan Panduan Desain dan Tampilan WordPress

SUB-BAB Sebelumnya: Membuat Link Satu Halaman.

  1. Template: 3 Cara install Tema WordPress dan mengganti tampilan website.
  2. Favicon & Logo: Cara menambahkan Logo dan Favicon (Icon) di WordPress.
  3. Menu: (Anda Disini).
  4. Header: Cara mengubah desain header theme WordPress + Contoh Real Website Demo.
  5. Content & Sidebar: Mengatur Area Konten dan Sidebar WordPress + 4 Tips Optimasi Sidebar.
  6. Footer: Cara mengubah desain footer theme WordPress (mengubah copyright, menambahkan menu footer, icon social dan mengatur section footer).
  7. Widget WordPress: Cara membuat dan mengatur Widget (di Header, Sidebar, dan Footer).

SUB-BAB Berikutnya: Plugin WordPress.


Komentar Paling Lambat di Balas Pukul 23:59.