Cara Membuat Menu WordPress Responsif Mobile-Ready

Apakah Anda ingin membuat menu WordPress responsif untuk perangkat seluler? Pengguna seluler telah mengungguli pengguna desktop di banyak situs web. Tambahkan menu seluler yang dapat disesuaikan yang memudahkan pengguna untuk menavigasi situs Anda. Pada artikel ini, kami akan menunjukkan cara mudah membuat menu WordPress responsif mobile-ready.

Ini adalah panduan mendalam. Kami akan menunjukkan metode plug-in untuk pemula (tanpa pengkodean) dan metode enkripsi untuk pengguna kami yang lebih mahir.

Di akhir tutorial ini, Anda akan belajar cara membuat menu pop-up geser, menu drop-down pop-up, dan menu pop-up toggle.

Siap? Mari kita mulai.

Video tutorial

Daftar ke WPBeginner

Jika Anda tidak menyukai video ini atau membutuhkan petunjuk lebih lanjut, baca terus.

Metode 1: Tambahkan Menu Responsif di WordPress Menggunakan Plugin

Cara ini lebih mudah dan direkomendasikan untuk pemula karena tidak memerlukan custom coding.

Dalam metode ini, kita akan membuat menu hamburger yang meluncur di layar ponsel.

Hal pertama yang harus Anda lakukan adalah menginstal dan mengaktifkan plugin Responsive Menu. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara menginstal plugin WordPress.

Setelah aktivasi, plugin akan menambahkan item menu baru berlabel “Menu Responsif” ke bilah admin WordPress Anda. Mengkliknya akan membawa Anda ke halaman konfigurasi plugin.

Anda harus memasukkan lebar layar terlebih dahulu, di mana plugin akan mulai menampilkan menu responsif. Standarnya adalah 800 px, seharusnya berfungsi untuk sebagian besar situs web.

Kemudian Anda perlu memilih menu yang ingin Anda gunakan untuk menu responsif Anda. Jika Anda belum membuat menu, Anda dapat membuatnya dengan membuka Penampilan »Menu. Lihat panduan kami tentang cara menambahkan menu navigasi di WordPress untuk instruksi terperinci.

Opsi terakhir di layar adalah menyediakan kelas CSS untuk menu tidak responsif Anda saat ini. Ini akan memungkinkan plugin menyembunyikan menu yang tidak responsif di layar yang lebih kecil.

Jangan lupa klik “Opsi Pembaruan” tombol untuk menyimpan pengaturan Anda.

Anda sekarang dapat mengunjungi situs web mereka dan mengubah ukuran layar browser Anda untuk melihat menu responsif beraksi.

Plugin menu responsif hadir dengan banyak opsi lain yang memungkinkan Anda mengubah perilaku dan tampilan menu responsif Anda. Anda dapat menjelajahi opsi ini di halaman konfigurasi plugin dan menyesuaikannya sesuai kebutuhan.

metode 2: Tambahkan menu pilihan dropdown menggunakan plugin

Cara lain untuk menambahkan menu responsif adalah dengan menambahkan menu pilihan drop-down. Metode ini tidak memerlukan keterampilan pengkodean apa pun, jadi disarankan untuk pemula.

Hal pertama yang harus dilakukan adalah menginstal dan mengaktifkan plugin Responsive Select Menu. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara menginstal plugin WordPress.

Setelah aktivasi, Anda harus mengakses Penampilan »Pilihan Responsif untuk mengkonfigurasi pengaturan plugin.

Anda harus menggulir ke bawah ke bagian “Aktifkan Lokasi Tema”. Secara default, plugin diaktifkan di semua lokasi tema. Anda dapat mengubahnya dengan mengaktifkannya secara selektif untuk lokasi tema tertentu.

Jangan lupa untuk mengklik tombol Simpan Semua Pengaturan untuk menyimpan perubahan Anda.

Anda sekarang dapat mengunjungi situs web mereka dan mengubah ukuran layar browser untuk melihat menu pilihan responsif beraksi.

metode 3: Buat menu ramah seluler yang responsif dengan transisi

Salah satu metode yang paling banyak digunakan untuk menampilkan menu di layar ponsel adalah melalui penggunaan transisi.

Metode ini mengharuskan Anda untuk menambahkan kode khusus ke file WordPress Anda. Jika Anda belum pernah melakukan ini sebelumnya, lihat panduan kami tentang menempelkan cuplikan web ke WordPress.

Pertama Anda harus membuka editor teks seperti notepad dan paste kode ini.

( function() {
	var nav = document.getElementById( 'site-navigation' ), button, menu;
	if ( ! nav ) {
		return;
	}

	button = nav.getElementsByTagName( 'button' )[0];
	menu   = nav.getElementsByTagName( 'ul' )[0];
	if ( ! button ) {
		return;
	}

	// Hide button if menu is missing or empty.
	if ( ! menu || ! menu.childNodes.length ) {
		button.style.display = 'none';
		return;
	}

	button.onclick = function() {
		if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
			menu.className="nav-menu";
		}

		if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
			button.className = button.className.replace( ' toggled-on', '' );
			menu.className = menu.className.replace( ' toggled-on', '' );
		} else {
			button.className += ' toggled-on';
			menu.className += ' toggled-on';
		}
	};
} )(jQuery);

Sekarang Anda perlu menyimpan file ini sebagai navigation.js di desktop Anda.

Selanjutnya, Anda perlu membuka klien FTP untuk mengunggah file ini ke direktori /wp-content/themes/your-theme-dir/js/ di situs WordPress Anda.

Ganti folder tema Anda dengan folder tema Anda saat ini. Jika folder tema Anda tidak memiliki folder js maka Anda harus membuatnya.

Setelah memuat file JavaScript, langkah selanjutnya adalah memastikan situs WordPress Anda memuat JavaScript ini. Anda perlu menambahkan kode berikut ke file .php tema Anda.

 
wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );

Sekarang kita perlu menambahkan menu navigasi ke tema WordPress kita. Biasanya menu navigasi ditambahkan ke file header.php dari sebuah tema.