Cara Membuat Menu di WordPress (3 Metode Mudah)

Diterbitkan: 2022-03-19

Menu navigasi adalah salah satu bagian yang paling sering dikunjungi di situs web Anda. Ini memberi pengunjung Anda arahan yang jelas tentang ke mana mereka harus pergi untuk mendapatkan produk atau informasi yang mereka inginkan. Itu sebabnya Anda memerlukan menu yang terstruktur dengan baik untuk situs Anda sehingga pengguna dapat dengan mudah mengakses konten situs web Anda.

Jika Anda memiliki website WordPress, membuat menu tidak akan sulit. Tapi Anda mungkin takut untuk bekerja di dalam kode tema atau mungkin berpikir itu hanya pekerjaan profesional.

Untuk membantu Anda, hari ini kami akan menunjukkan cara membuat menu navigasi standar di dalam situs WordPress Anda dengan mudah. Di sini, Anda akan mempelajari prosesnya dengan pengkodean dan tanpa memiliki pengetahuan teknis sama sekali.

Mari kita lihat sekilas apa yang akan kita bahas hari ini di blog ini-

  • Apa itu Menu Navigasi
  • Berbagai Jenis Menu Navigasi
  • Cara Membuat Menu WordPress
  • Cara Membuat Menu Kustom di WordPress
  • Cara Menambahkan Menu Navigasi Menggunakan Elementor
  • FAQ di Menu WordPress

Baca sampai akhir untuk mendapatkan bonus eksklusif dalam mendesain Mega Menu .

Mari kita mulai dengan dasar-

Apa itu Menu Navigasi?

Menu navigasi adalah daftar tautan yang biasanya digunakan untuk menavigasi ke halaman internal penting atau konten web lain dari sebuah situs web. Menu navigasi sering terlihat sebagai bilah horizontal di bagian atas situs web.

Happy Addons Navigation Mneu

Namun, Anda dapat menemukan menu di area sidebar & footer situs web. Ini membantu pengguna untuk menemukan informasi penting tentang situs web Anda dengan cepat. WordPress memungkinkan penggunanya untuk membuat menu & sub-menu khusus.

Anda juga dapat menambahkan kategori, posting blog, dan tautan khusus seperti Google Maps & saluran media sosial ke dalam menu.

Berbagai Jenis Menu Navigasi

Anda dapat mengatur lokasi menu yang berbeda berdasarkan tema WordPress Anda saat ini. Biasanya, menu utama muncul di header, sedangkan menu sekunder muncul di footer. Selain itu, banyak tema menawarkan menu navigasi untuk perangkat seluler.

Ini adalah menu navigasi khas yang digunakan untuk tujuan yang berbeda dan area yang berbeda dari sebuah situs web-

  1. Menu Navigasi Horisontal
  2. Menu Navigasi Dropdown
  3. Menu Navigasi Footer
  4. Menu Navigasi Hamburger
  5. Menu Navigasi Sidebar Vertikal

1. Menu Navigasi Horisontal

Ini adalah contoh bilah navigasi horizontal yang terutama muncul di bagian atas situs web.

Horizontal Navigation Menu

2. Menu Navigasi Dropdown

Di menu tarik-turun, Anda dapat meletakkan beberapa halaman di bawah menu induk. Mari kita lihat seperti apa menu navigasi dropdown.

Dropdown menu

3. Menu Navigasi Footer

Jenis menu ini terutama ditampilkan di bagian bawah situs web. Berikut adalah contoh ideal menu footer.

Footer Menu Example

4. Menu Navigasi Hamburger

Anda membuat menu navigasi hamburger untuk perangkat seluler seperti menu di bawah ini.

Hamburger Navigation Menu

5. Menu Navigasi Sidebar Vertikal

Di banyak situs web restoran atau pengiriman makanan, Anda akan menemukan menu navigasi sidebar vertikal jenis ini.

Vertical Sidebar Navigation Menu
Sumber Gambar

Cara Membuat Menu WordPress (3-Metode Mudah)

Sebelum masuk ke tutorial, mari kita jelaskan apa yang kita tampilkan di blog ini. Di sini, kami akan menunjukkan cara membuat menu di WordPress dengan mengikuti tiga metode sederhana. Anda dapat memilih siapa saja sesuai dengan kebutuhan Anda.

Metodenya adalah:

Metode 1: Pengaturan Menu WordPress Default
Metode 2: Menambahkan Kode Kustom secara Manual
Metode 3: Menggunakan Pembuat Halaman Elementor

Metode 1: Konfigurasikan Pengaturan Menu WordPress Default

Saatnya menyelami tutorial membuat menu navigasi pertama kita. Jika Anda mengikuti langkah-langkah di bawah ini, Anda akan dapat membuat menu untuk situs web Anda dengan mudah.

Langkah 1: Buat Menu Baru di WordPress
Langkah 2: Tambahkan Halaman Baru ke Menu WordPress
Langkah 3: Atur Struktur Menu Anda
Langkah 4: Atur Lokasi Menu

Mari kita mulai:

Langkah 1: Buat Menu Baru di WordPress

Pertama, masuk ke area dasbor situs web Anda dan buka Appearance->Menus .

Go to Appearance Menu

Kedua, Anda perlu menulis nama menu Anda ke dalam area Nama Menu . Terakhir, Anda harus mengklik tombol Create Menu untuk menyimpan menu.

Create Menu

Langkah 2: Cara Menambahkan Halaman Baru ke Menu WordPress

Setelah membuat menu, tugas Anda selanjutnya adalah menambahkan halaman penting ke menu. Pergi ke bilah sisi kiri di sini Anda akan mendapatkan opsi Tambahkan item menu . Pilih tab Lihat Semua dan centang halaman yang relevan. Terakhir, klik tombol Tambahkan ke Menu .

Ikuti gambar di bawah ini dan pelajari cara menambahkan halaman baru ke menu WordPress.

Add Pages to the WordPress Menu

Pelajari cara membuat halaman baru di WordPress.

Langkah 3: Atur Struktur Menu Anda

Sangat mudah untuk mengatur item menu di WordPress. Anda perlu menarik & melepas item menu untuk menyelesaikan pekerjaan. Anda dapat memeriksa gambar ini di bawah ini.

Organize Your Menu Structure

Langkah 4: Atur Lokasi Menu

Setelah mengatur struktur menu, Anda harus mengatur lokasi yang tepat dari menu Anda. Karena ini adalah menu pertama kami, kami telah memilih Lokasi Tampilan sebagai Menu Utama dan mencentang opsi Tambahkan halaman otomatis untuk menambahkan halaman baru ke menu ini di masa mendatang secara otomatis.

Menu Settings

Terakhir, klik tombol Simpan Menu untuk memperbarui menu.

Metode 2: Buat Menu Kustom di WordPress

Tema WordPress hadir dengan tata letak dan lokasi menu yang telah ditentukan sebelumnya untuk menambahkan menu navigasi ke situs web Anda. Namun, jika Anda ingin membuat tata letak menu khusus dan ingin menampilkan menu di luar lokasi menu tema Anda, Anda harus membuat menu khusus untuk situs web Anda.

Untuk membuat menu kustom, Anda dapat menggunakan plugin pembuat menu pihak ke-3 atau mengedit file tema inti Anda. Di sini, kami akan menunjukkan bagaimana Anda dapat membuat menu kustom secara manual di WordPress.

Pertama, Anda perlu membuka file ” function.php ” tema Anda. Di sini, Anda harus mendaftarkan menu navigasi baru Anda dengan menambahkan kode ini.

 function custom_nav_menu() { register_nav_menu('new-nav-menu',__( 'New Nav Menu' )); } add_action( 'init', 'custom_nav_menu' );

Jika Anda ingin menambahkan lebih dari satu lokasi menu baru, Anda dapat menggunakan cuplikan kode ini.

 function custom_nav_menu() { register_nav_menus( array( 'new-nav-menu' => __( 'New Nav Menu' ), 'extra-menu' => __( 'Extra Menu' ) ) ); } add_action( 'init', 'custom_nav_menu' );

Setelah menambahkan kode, Anda harus pergi ke Dashboard website Anda_>Appearance->Menu area. Sekarang fokus pada area Pengaturan Menu . Di sini, Anda melihat bahwa menu yang baru dibuat " Menu Nav Baru " muncul.

New Nav Menu

Saatnya untuk menampilkan menu navigasi baru ke dalam tema WordPress Anda. Gunakan kode di bawah ini dan rekatkan ke file ” function.php ” tema untuk melakukannya.

 <?php wp_nav_menu( array( 'theme_location' => 'new-nav-menu' ) ); ?>

Sekarang, Anda dapat menampilkan menu khusus Anda di mana saja di situs web Anda. Kami telah menambahkan menu kustom baru di halaman ” Tentang ” kami.

New Custom Menu

Itu dia.

Metode 3: Tambahkan Menu Navigasi Menggunakan Elementor

Elementor adalah salah satu plugin pembuat halaman drag & drop populer yang membantu pengguna membuat situs web mereka dengan cepat. Muncul dengan banyak widget yang mudah digunakan di antaranya Menu Nav adalah yang populer yang memungkinkan Anda merancang menu navigasi untuk situs web Anda dalam hitungan menit. Anda dapat membuat dan menyesuaikan menu navigasi dengan cara Anda sendiri menggunakan widget ini.

Anda perlu menginstal plugin di bawah ini setiap kali Anda menggunakan widget Elementor Nav Menu.

Prasyarat

  1. Elemen (Gratis)
  2. Elementor Pro

Ikuti langkah-langkah berikut ini dan pelajari cara menambahkan menu navigasi ke situs web bertenaga Elementor Anda.

  • Langkah Satu: Buka Halaman Baru
  • Langkah Kedua: Tambahkan Bagian
  • Langkah Tiga: Tambahkan Widget Menu Nav
  • Langkah Empat: Sesuaikan Menu Nav

Periksa blog ini di sini kami telah membahas setiap langkah di atas dan akhirnya membuat menu.

Cara Membuat dan Menyesuaikan Menu Menggunakan Elementor Nav Menu Widget .

Juga, pelajari Cara Mendesain Header Elementor Kustom.

Bonus: Buat Menu Mega di WordPress Menggunakan Happy Addons

Menu mega adalah jenis menu yang berisi banyak halaman penting atau tautan navigasi lainnya yang ditampilkan di bagian atas situs web. Ini membantu pengguna untuk menemukan informasi yang dibutuhkan mereka secara instan. Selain itu, ini meningkatkan pengalaman pengguna dan proses navigasi situs web Anda. Anda sering melihat menu mega di situs web besar seperti.

  • situs web eCommerce
  • Situs web hotel
  • Situs web Berita/Majalah/Blog
  • Situs web berbasis Layanan/Produk

Anda tidak dapat membuat menu mega untuk situs web Anda dengan fitur menu default WordPress. Anda perlu menggunakan plugin WordPress mega menu atau membangun fungsi mega menu Anda sendiri secara manual dengan menulis kode.

Tetapi, jika Anda menggunakan pembuat halaman Elementor untuk membuat situs web Anda dan menginstal Pro Happy Addons, Anda dapat dengan mudah membuat menu mega dengan mudah dan tanpa menulis kode khusus.

Happy Addons hadir dengan widget " Happy Mega Menu " seret & lepas yang memungkinkan Anda membuat menu mega berukuran besar seperti Adidas, Puma, Dribbble, weDevs, InVision, dan banyak lagi. Alat canggih ini juga memungkinkan Anda untuk menambahkan templat khusus ke menu Anda.

Mari tonton tutorial video praktis ini dan pelajari cara membuat menu mega di WordPress.

Lihat dokumentasi widget Happy Mega Menu Happy Addon dan pelajari cara menggunakan widget ini dengan cara yang benar.

FAQ di Menu WordPress

Ada banyak pertanyaan tentang cara membuat menu di WordPress yang sering ditanyakan orang secara online. Di sini, kami telah menjawab beberapa pertanyaan umum yang dapat membantu Anda menambahkan menu ke situs WordPress Anda.

1. Bagaimana Cara Membuat Menu Drop Down di WordPress?

Untuk membuat submenu, Anda perlu menyeret item menu dan meletakkannya di bawah menu lain. Anda dapat memeriksa gambar di bawah ini untuk menyelesaikan pekerjaan.

How to Create a Drop Down Menu in WordPress

2. Bagaimana Cara Menghapus dan Mengganti Nama Item Menu?

Buka item lalu Anda dapat mengganti nama Label Navigasi . Dan klik tautan Hapus untuk menghapus item.

How to Delete and Rename Menu Items

3. Bagaimana Cara Menambahkan Postingan ke Menu?

Anda dapat menambahkan posting blog ke menu. Buka tab Posting dan pilih posting. Terakhir, klik tombol Tambahkan ke Menu . Anda dapat mengikuti gambar di bawah ini untuk menambahkan posting ke menu.

How to Add Posts to the Menu

4. Bagaimana Cara Menambahkan Tautan Khusus ke Menu Anda?

Anda juga dapat menambahkan tautan khusus ke menu. Buka opsi Tautan Kustom . Sekarang, masukkan URL & tulis Teks Tautan. Terakhir, klik tombol Add to Menu untuk menambahkan item ke menu. Di sini, kami telah menambahkan saluran Facebook kami.

How to Add Custom Links to Your Menu

5. Bagaimana Cara Menambahkan Kategori ke Menu WordPress?

Jika Anda ingin menambahkan kategori ke menu Anda, Anda perlu membuka tab Kategori dan memilih kategori. Terakhir, klik tombol Add to Menu untuk menambahkannya ke menu.

How to Add Categories to WordPress Menu

6. Bagaimana Menghapus Menu?

Untuk menghapus menu, Anda harus pergi ke area Pengaturan Menu dan klik tautan Hapus Menu .

How to delete a menu

Siap Membuat Menu WordPress Anda

Membuat menu di WordPress tidak sulit lagi jika Anda mengikuti langkah-langkah di atas. Di blog tutorial ini, kita telah membahas cara membuat menu di WordPress. Kami telah menunjukkan bagaimana Anda dapat membuat menu kustom Anda.

Namun, kami telah membahas bagaimana Anda dapat membuat menu menggunakan pembuat halaman Elementor dan membahas topik bonus tentang menu mega WordPress. Last but not least, kami telah menjawab beberapa pertanyaan umum menu WordPress.

Jika Anda memerlukan bantuan lebih lanjut atau memiliki beberapa pertanyaan tentang blog ini, Anda dapat angkat suara di bagian komentar di bawah.

Silakan bagikan blog ini di saluran sosial Anda jika Anda menyukainya. Dan, bergabunglah dengan buletin kami untuk mendapatkan tutorial WordPress dan Elementor yang lebih praktis. Gratis!

Berlangganan newsletter kami

Dapatkan berita & pembaruan terbaru di Elementor