Cara Membuat Menu Website Di Wordpress

Cara Membuat Menu di WordPress dan Submenu (Drop-Down) dengan Mudah

Menu merupakan salah satu elemen penting pada website yang membantu meningkatkan pengalaman pengguna. Untungnya, kalau menggunakan WordPress, tersedia beberapa cara membuat menu di WordPress yang bisa Anda ikuti dengan mudah.

Ada dua jenis menu yang bisa Anda tambahkan, yaitu menu utama dan sub-menu atau drop-down. Sub-menu ini bisa menghemat ruang, mempermudah navigasi, dan membuat tampilan website menjadi lebih rapi.

Artikel ini akan menjelaskan cara membuat menu di WordPress secara manual dan menggunakan plugin. Selain itu, kami akan menjelaskan cara membuat sub-menu atau drop-down menu. Yuk, simak langkah-langkahnya di bawah ini!

Langkah-langkah membuat menu di WordPress ini menggunakan fitur-fitur bawaan WordPress. Jadi, semua menu yang sudah dibuat akan tetap terlihat sama meskipun Anda mengganti tema atau menginstal plugin baru.

Namun, cara ini hanya berlaku untuk tema WordPress yang termasuk dalam kategori classic. Apabila menggunakan tema block dengan kemampuan Full Site Editing (FSE), Anda akan melihat opsi Editor di sidebar kiri WordPress, bukan Menu.

Langsung saja, ini cara membuat menu di WordPress:

Item yang didukung untuk menu mencakup halaman, postingan, dan kategori. Anda juga bisa menyisipkan custom link sebagai item menu untuk mengarahkan pengunjung ke landing page atau halaman penjualan Anda.

Setelah membuat menu utama, Anda mungkin perlu membuat submenu di WordPress. Submenu ini akan menjadi bagian dari menu utama, dalam bentuk drop-down yang ditampilkan di bawahnya.

Di bagian ini, kami akan menjelaskan cara membuat menu drop-down di WordPress secara manual, menggunakan Site Editor, dan dengan bantuan plugin Max Mega Menu.

Apakah Menu Drop-Down Membuat Website Lambat?

Ya, menu drop-down bisa memengaruhi kecepatan website, terutama kalau berisi skrip yang rumit atau gambar beresolusi tinggi. Namun, dengan coding yang dioptimalkan dan elemen desain yang ringan, pengaruhnya terhadap kecepatan bisa diminimalkan.

Faradilla, yang lebih akrab disapa Ninda, adalah Content Marketing Specialist di Hostinger. Ia suka mengikuti tren teknologi, digital marketing, dan belajar bahasa. Melalui tutorial Hostinger ini, Ninda ingin berbagi informasi dan membantu pembaca menyelesaikan masalah yang dialami. Kenali Ninda lebih dekat di LinkedIn.

Cara membuat menu di WordPress secara umum terbagi menjadi dua metode berbeda. Hal ini bergantung pada jenis tema WordPress apa yang Anda gunakan. Ke dua cara tersebut di jelaskan lengkap di tutorial WordPress ini.

Apa saja menu di website WordPress? Sebenarnya, jenis menu dan jumlahnya dapat Anda atur sesuai dengan kebutuhan website Anda. Contohnya seperti menu Home, Blog, About Us, dan yang semisal.

Untuk membuat menu tersebut, Anda tidak perlu install plugin di WordPress, layaknya ketika Anda membuat daftar isi di WordPress. Editor Gutenberg WordPress sudah menyediakan fiturnya.

Lantas, bagaimana cara menambahkan menu di WordPress? Apa saja yang perlu dipersiapkan sebelum menu dan sub menu pada website berbasis WordPress? Simak penjelasan lengkapnya berikut ini!

Contoh menu pada website yang dibuat dengan WordPress.

Sebelum membuat menu dan sub menu pada website WordPress Anda, ada beberapa tips yang perlu Anda ketahui. Tips ini nantinya dapat sangat membantu proses pembuatan menu.

Membuat header di WordPress sebelum membuat menu akan memudahkan Anda. Karena menu pada website WordPress ini nantinya memang terletak di header.

Meski tidak wajib, namun pembuatan header sangat disarankan dilakukan terlebih dahulu. Sehingga lokasi menu nantinya akan terlihat rapi. Selain itu, pengaturannya juga menjadi lebih mudah.

e. Pahami Tema WordPress yang Digunakan

Tema WordPress yang klasik dan yang terbaru memiliki metode pembuatan menu yang berbeda. Tema WordPress yang klasik adalah tema dengan nama Twenty Twenty-Two atau yang lebih lama.

Sedangkan tema WordPress terbaru adalah Twenty Twenty-Three. Apabila Anda menggunakan tema dari pihak ke tiga, Anda dapat mengamati bagian editor Apperance-nya untuk menentukan cara buat menu mana yang digunakan.

Perbedaan tampilan editor tema lama dan baru untuk membuat menu di website WordPress.

Catatan: Menu pada website WordPress hanya dapat dibuat apabila Anda sudah membuat halaman (pages) pada website. Jika belum, silakan buat halaman dengan cara klik Pages > klik Add New.

Cara membuat menu di WordPress ini kami bagi menjadi dua bagian. Bagian pertama untuk pembuatan menu di tema yang klasik. Bagian ke dua untuk pembuatan menu di tema yang terbaru.

Apabila Anda mengembangkan website dengan menggunakan tema bawaan dari WordPress Twenty Twenty-Two ke bawah, seperti Twenty Twenty-One dan Twenty Twenty, maka membuat menu adalah sebagai berikut:

Langkah untuk menambahkan beberapa menu baru pada tampilan website yang dibuat dengan WordPress dengan tema terbaru adalah sebagai berikut:

Demikian tutorial cara membuat menu di WordPress yang dibagi menjadi dua metode, yakni pembuatan menu pada tema klasik dan pembuatan menu untuk tema yang terbaru.

Oleh karena menu pada website terletak di header, ada baiknya Anda membuat membuat sticky header di WordPress agar pengguna website Anda jadi lebih mudah saat melakukan navigasi.

Apabila Anda memiliki pertanyaan, kendala, atau membutuhkan pengembang WordPress, silakan hubungi kami melalui Kontak Tonjoo, dan kami akan bantu menyelesaikannya!

Baca artikel terkait WordPress, WooCommerce, Plugin dan pengembangan website lainnya dari Moch. Nasikhun Amin di blog Tonjoo Studio.

Last Updated on September 12, 2023 by Nasikhun A.

Sering kali themes WordPress yang sudah kita install memiliki navigasi yang kurang sempurna, salah satunya pada bagian menu yang kurang lengkap.

Menu yang ada pada website berisi link-link yang mengarah pada halaman tertentu.

Setiap website pastinya memiliki jumlah menu yang berbeda-beda tergantung dari jenis websitenya.

Untuk letak menu biasanya berada pada header website, tetapi ada beberapa menu yang letaknya di footer.

Bagi anda yang belum puas dengan menu yang ada, cara membuat menu di WordPress sebenarnya cukup mudah.

Tetapi sebelum membuat menu, Anda perlu tahu kira-kira menu apa saja yang dibutuhkan oleh pengunjung website.

Dalam penambahan menu juga jangan terlalu banyak, karena akan terkesan kurang rapi.

Solusinya bagi Anda yang memiliki banyak menu bisa dibuat menjadi mega menu seperti yang ada pada kebanyakan marketplace atau bisa juga dengan sub kategori menu.

Nantinya menu yang dipasang model drop-down sehingga tidak terlalu memakan banyak tempat.

Agar load saat membuka mega menu lancar, Anda perlu menggunakan Hosting Indonesia yang cepat agar terhindar dari delay saat membuka menu.

Sebelum melanjutkan alangkah baiknya Anda mengetahui tips membuat menu navigasi agar website menjadi lebih terstruktur dan lebih  rapi.

Berikut pembahasannya:

1. Logo Untuk Halaman Utama

Biasanya untuk setiap logo website memiliki arah tautan link menuju ke halaman utama.

Fungsi ini nantinya akan membantu pengunjung website jika ingin kembali ke halaman utama dari website Anda.

Menurut penelitian otak manusia memiliki memori yang pendek maksimal hanya bisa mengingat 7 item saja.

Nah ini bisa diaplikasikan kepada jumlah menu yang ada pada website, maksimal gunakan 7 menu yang tampil pada bagian header atas.

Selain mudah diingat, website juga bisa terlihat rapi tidak terkesan penuh karena kebanyakan menu.

3. Gunakan Drop Down Menu

Agar tidak banyak menu berjejer kesamping, coba manfaatkan fitur drop down menu. Gabungkan menu-menu yang masih dalam satu kategori menjadi satu menu utama.

Untuk maksimal drop down menu yang disarankan berjumlah tiga saja, jika lebih dari tiga lebih baik menggunakan mega menu.

Nah yang terakhir menggunakan mega menu. Mega menu adalah versi lengkapnya dari drop down menu.

Menu ini cocok bagi website yang memiliki banyak menu seperti yang ada pada toko online, website perusahaan dan website besar lainnya.

Baca juga : Daftar Themes WordPress Terbaik

Jika Anda sudah tahu tentang tips membuat menu website yang baik, sekarang waktunya untuk menambahkan menu baru pada WordPress dengan mudah,

Jika belum tahu, silahkan ikuti langkah-langkahnya berikut ini sampai akhir ya:

Pastikan Anda sudah login pada akun WordPress, jika belum tahu cara login silahkan buka pada artikel cara login WordPress dengan mudah.

Ada 2 pilihan antara kategori atau halaman yang bisa Anda tambahkan untuk menjadi menu baru, bisa disesuaikan dengan kebutuhan website.

Untuk menambahkan kategori baru, silahkan klik pada ‘Post’ lalu ‘Category’, silahkan isikan kategori yang akan ditampilkan, kami mencontohkan dengan ‘Kategori Baru’ jika sudah silahkan pilih ‘Add New Category’.

Jika benar nantinya kategori yang sudah ditambahkan akan berada pada sebelah sampingnya.

Baca juga: Blogspot atau WordPress, Manakah yang Terbaik?

Untuk menambahkan halaman menjadi menu, caranya silahkan klik pada ‘Pages’ lalu ‘Add New’.

Beri judul sesuai yang Anda inginkan, kami mencontohkan dengan ‘Halaman Baru’ jika sudah silahkan klik “Publish“.

Jika keduanya sudah, silahkan buka pada menu ‘Appearance’ kemudian ‘Menus’, Anda akan dihadapkan dashboard Menus WordPress.

Anda bisa menambahkan Kategori dan Halaman menjadi menu.

Pastikan sebelumnya membuat ‘Menu Name’ baru, kami mencontohkan dengan nama ‘Header’ kemudian klik ‘Save Menu’.

Untuk memasukan ‘Pages’, silahkan klik pada menu ‘Pages’ kemudian berikan tanda centang pada halaman yang akan dimasukan menu, kemudian klik ‘Add to Menu’.

Untuk menambahkan ‘Categories’ menjadi menu, silahkan berikan tanda centang pada kategori yang ingin dimasukan menu, kemudian klik ‘Add to Menu’.

Jika semuanya sudah ditambahkan pada Menu Structure, silahkan pilih ‘Primary Menu’ untuk menampilkan menu pada bagian atas, kemudian klik ‘Save Menu’.

Baca juga: Cara Membuat Slider di WordPress dengan Cepat

Jika semuanya sudah silahkan cek pada alamat website apakah sudah berhasil atau belum, selain itu cek apakah link tujuan sudah benar sesuai yang Anda inginkan ataukah belum.

Demikian pembahasan mengenai cara membuat menu di WordPress dengan mudah, untuk Anda yang menggunakan themes WordPress berbayar, menu bisa terisi secara otomatis melalui kategori yang sudah dibuat.

Hosting Terbaik Untuk Website

Tetapi untuk themes versi gratis jarang ditemui seperti ini, Anda perlu menambahkan menu secara manual.

Untuk Anda yang ingin membuat menu diatas header, nampaknya perlu menambahkan function baru pada script coding themes.

Tersedia banyak tutorial yang membahas tentang ini atau Anda bisa menggunakan Jasa Pembuatan Website.

Jika Anda kendala dalam proses penambahan menu baru pada WordPress, silahkan tuliskan di kolom komentar dibawah.

Membuat Drop-Down Menggunakan Site Editor

Blok Navigation (Navigasi) di Site Editor menyediakan fitur drag-and-drop untuk membuat dan mengatur item menu yang memudahkan Anda membuat menu drop-down.

Perlu diperhatikan bahwa metode ini saat ini hanya kompatibel dengan tema blok, seperti Twenty Twenty-Two.

Berikut cara membuat menu drop-down menggunakan blok Navigation:

Selain dengan fitur WordPress sendiri, Anda juga bisa membuat submenu WordPress menggunakan plugin. Ada banyak plugin menu WordPress terbaik di direktori WordPress, jadi pilihlah yang paling cocok untuk Anda.

Di tutorial ini, kami akan menggunakan Max Mega Menu:

Menu dan submenu drop-down memiliki banyak manfaat untuk website WordPress Anda, khususnya dalam meningkatkan estetika dan fungsi website. Beberapa manfaat utamanya adalah:

Menu navigasi berisi elemen website yang akan dilihat pengunjung saat pertama kali membuka website Anda. Selain berpengaruh pada sistem navigasi situs secara keseluruhan, menu WordPress juga bisa memengaruhi pengalaman pengguna.

Sebaiknya buatlah area menu yang bisa membantu mempercepat pengunjung menemukan informasi yang mereka butuhkan.

Jadi, menu utama Anda harus mudah digunakan, serta memiliki visual yang menarik. Nah, simak tips berikut ini untuk membantu mengoptimalkan penggunaan menu dan submenu WordPress Anda demi pengalaman pengguna yang lebih baik.

Buat Menu yang Sederhana dan Intuitif

Buatlah menu drop-down dengan struktur yang jelas agar tidak menyulitkan pengunjung untuk mengaksesnya. Prioritaskan link yang paling penting, dan pastikan semuanya bisa dilihat dan diakses dengan mudah.

Selain itu, jangan gunakan terlalu banyak tingkat menu karena bisa mempersulit navigasi dan membingungkan pengunjung website.

Gunakan Label yang Jelas

Setiap item menu harus diberi label yang jelas dan akurat untuk menunjukkan konten atau halaman yang dituju. Hindari penggunaan istilah yang kurang umum, yang justru bisa membingungkan pengunjung terkait tujuan halaman Anda.

Pemberian label yang konsisten juga membantu menetapkan ekspektasi yang jelas dan menjaga konsistensi branding website Anda.

Selain itu, Anda bisa menyertakan label ARIA (accessible rich internet applications) untuk item menu guna meningkatkan aksesibilitas website bagi pengunjung yang menggunakan aplikasi pembaca layar dan membuat website Anda lebih inklusif.

Gunakan Visual yang Menarik

Salah satu cara terbaik agar menu WordPress Anda jadi lebih interaktif adalah dengan menambahkan ikon gambar pada item menu menggunakan plugin.

Misalnya, gunakan plugin Menu Image yang menyediakan berbagai ikon FontAwesome dan DashIcons. Anda bisa menambahkan elemen yang diinginkan ke menu WordPress pada berbagai posisi, atau memasukkannya sebagai animasi yang muncul dengan mengarahkan mouse.

Usahakan untuk tidak memenuhi area ini dengan ikon-ikon yang tidak penting karena ini bisa mengganggu keterbacaan menu dan mengalihkan perhatian pengguna dari menjelajahi situs WordPress Anda.

Seperti yang disebutkan di atas, Anda bisa menambahkan CSS class kustom ke menu baru di website Anda. Tambahkan custom CSS untuk mengatur gaya menu agar lebih sesuai dengan keinginan Anda.

Klik Appearance -> Customize dari dashboard WordPress dan gunakan fitur Additional CSS untuk menambahkan kode. Di contoh ini, kami mengubah warna font menu utama menjadi biru.

Gunakan tool inspect element di browser untuk menemukan selector CSS #ID tema Anda, yang akan Anda butuhkan untuk memilih elemen kustomisasi tertentu.

Untuk mengubah warna font, Anda bisa menggunakan kode berikut:

Cobalah gaya CSS lainnya atau gunakan kode siap pakai untuk melakukan proses desain dengan lebih cepat. Apabila perlu bantuan, Anda bisa membaca tutorial kami lainnya tentang cara membuat menu CSS drop-down sederhana.

Kalau menu Anda perlu banyak sekali submenu di bawahnya, Anda bisa membuat mega menu agar tampilannya lebih rapi. Berbeda dari drop-down standar, mega menu biasanya berisi lebih banyak link dan submenu.

Karena tipe menu ini menampilkan seluruh struktur website Anda, pengunjung bisa mengakses bagian terdalam website Anda dari menu utama. Mega menu cocok untuk website besar karena pengunjung bisa menjelajahi situs dengan lebih cepat.

Ada banyak plugin WordPress yang bisa membantu Anda membuat custom mega menu. Di artikel ini, kami menggunakan plugin Max Mega Menu. Beberapa plugin populer lainnya adalah QuadMenu dan Superfly.

Uji Menu Drop-Down di Berbagai Browser dan Perangkat

Penting untuk menguji menu dan submenu drop-down website Anda di berbagai browser dan perangkat untuk memastikan kompatibilitas dan fungsionalitas semua elemen interaktifnya.

Anda bisa memanfaatkan lingkungan staging untuk menguji menu dan menyempurnakannya dengan aman sebelum menerapkannya di website yang sudah online. Dengan demikian, Anda bisa menghindari down-time dan memastikan pengalaman pengguna yang lancar di semua platform.

Dalam hal ini, Anda bisa menggunakan fitur staging yang disediakan oleh provider hosting Anda. Contohnya, paket Managed WordPress hosting Business dan Cloud Startup dari Hostinger sudah dilengkapi dengan tool staging tanpa perlu menginstalnya lagi.

Di artikel ini, kami sudah menjelaskan cara membuat menu di WordPress beserta cara membuat submenu atau drop-down yang akan membantu meningkatkan navigasi dan pengalaman pengguna website Anda.

Menu adalah elemen yang sangat penting untuk menciptakan tampilan yang rapi pada website. Selain itu, Anda juga perlu membuat submenu untuk memudahkan akses website, yang akan turut membantu crawler mesin pencari melakukan indexing.

Semoga artikel ini menjawab semua pertanyaan Anda tentang cara membuat menu WordPress dan submenunya, ya. Selamat mencoba dan semoga berhasil!

Membuat Drop-Down secara Manual

Metode ini akan menggunakan fitur bawaan WordPress untuk membuat submenu drop-down. Salah satu keuntungan cara manual ini adalah menu drop-down akan tetap berfungsi meskipun Anda mengganti tema WordPress atau menginstal plugin baru.

Dengan metode ini, Anda bisa menyertakan halaman, postingan, kategori, dan link khusus dalam menu. Namun, pastikan tema yang digunakan mendukung menu drop-down dengan membaca dokumentasinya dulu.

Berikut cara membuat submenu di WordPress secara manual:

Nantinya, tampilan menu utama dan menu drop-down atau submenu Anda akan menjadi seperti berikut ini:

Ada beberapa tingkatan menu yang bisa Anda buat di bawah menu utama. Semakin kanan Anda memosisikan item submenu di bawah item menu utama, maka item tersebut akan menjadi bagian dari menu di atasnya.

Selain itu, menu drop-down WordPress bisa dikustomisasi menggunakan CSS. Aktifkan fungsi ini dulu dengan mengklik menu Screen Options (Opsi Layar) di pojok kanan atas halaman menu. Kemudian, centang kotak CSS Classes (Kelas CSS).

Kalau menu item ini dibuka, kotak teks baru berlabel CSS Classes akan muncul. Di sini, Anda bisa menambahkan WordPress CSS class untuk mengustomisasi gaya menu drop-down.

d. Pertimbangkan untuk Design Responsive

Ketika hendak membuat menu di website WordPress, Anda juga perlu mempertimbangkan responsiveness menu tersebut. Artinya Anda perlu mengatur bagaimana tampilannya ketika dibuka di berbagai layar, seperti desktop, tablet, maupun handphone.

Karena menu terletak di header atau kepala website, untuk membuatnya responsif, Anda dapat mempelajari cara membuat header dan footer responsif.

Tanya Jawab (FAQ) Cara Membuat Menu WordPress

Di bagian ini, kami akan menjawab beberapa pertanyaan umum tentang cara membuat menu dan submenu drop-down di WordPress.

Bagaimana Cara Mengurutkan Menu Drop-Down di WordPress?

Untuk mengubah urutan item dalam menu drop-down WordPress, buka Appearance (Tampilan) → Menus (Menu). Kemudian, pilih menu, seret item yang diinginkan ke posisi barunya, buat submenu dengan menyeret item ke kanan, lalu simpan perubahan Anda.

Bagaimana agar Menu Drop-Down Muncul di Semua Halaman Website?

Buka Appearance (Tampilan) → Menus (Menu) dan pilih menu yang ingin Anda edit. Klik tab Manage Locations (Kelola Lokasi), pilih lokasi untuk menu drop-down, lalu klik Save Changes (Simpan Perubahan). Menu drop-down Anda akan muncul di semua halaman.

Cara Membuat Menu di WordPress

Berlangganan Lebih banyak video tutorial! Hostinger Indonesia

Anggap saja saat ini Anda sedang membuka website Hostinger. Di sana Anda melihat berbagai menu, mulai dari Hosting, Domain, hingga Harga. Nah, menu-menu ini dibuat untuk mempermudah Anda dan pengunjung lainnya dalam melihat dan menjelajahi informasi apa saja yang ada di website kami. Anda pun tak perlu membuka halaman situs satu per satu sampai menemukan yang dicari.

Di video ini, kami akan membahas cara membuat menu navigasi di WordPress. Pembuatannya mudah, kok, dan tidak memakan waktu sampai berhari-hari. Yuk, siapkan komputer/laptop Anda dan mulai ikuti cara kami. Selamat mencoba ☺️

Aku Agil, YouTube Content Creator di Hostinger Indonesia. Passion-ku di bidang videografi dan sinematografi, dengan membuat video dapat mendokumentasikan sebagian dari hidupku. Melalui artikel dan tutorial ini, Agil ingin sharing tentang teknologi seperti website, blog, WordPress, domain, hosting, dan lainnya.