Cara Membuat Menu WordPress Responsif Mobile-Ready

Proposal hosting WordPress khusus untuk pembaca kami, cara menghasilkan menu WordPress yang merespons Mobile-Ready. Apakah Anda ingin membuat menu WordPress responsif yang siap untuk seluler? Pengguna seluler sebelumnya memiliki pengguna desktop yang terlalu banyak untuk banyak situs web. Menambahkan menu responsif seluler memudahkan pengguna mengelola situs web Anda. Pada artikel ini, spesialis kami akan menjelaskan kepada Anda bagaimana Anda dapat dengan mudah membuat menu WordPress responsif yang siap untuk seluler.

Buat menu WordPress yang responsif seluler

Ini adalah tutorial yang mendalam. Kami akan menunjukkan metode plugin untuk pemula (tanpa pengkodean) dan metode pengkodean untuk pengguna kami yang lebih mahir.

Di akhir tutorial ini, Anda akan belajar cara membuat menu seluler slide-in, menu tarik-turun seluler, dan menu sakelar seluler.

Siap? Mari kita mulai.

Teknik 1: Menambahkan Menu Responsif di WordPress dengan bantuan Plug-in

Teknik ini lebih mudah dan lebih baik untuk pemula karena tidak memerlukan pengkodean klien. Dalam teknik ini, kita akan membuat menu hamburger yang dapat digeser di layar ponsel Anda.

Demo plugin menu responsif

Pertama-tama Anda perlu melakukan proses penginstalan dan pengaktifan dengan plugin Responsive Menu. Jika Anda ingin membaca lebih detail, lihat instruksi kami tentang menginstal plug-in WordPress.

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

Pengaturan menu responsif

Pertama-tama Anda perlu memperkenalkan lebar layar saat ini plug-in akan mulai menampilkan menu responsif. Nilai yang dicadangkan adalah 800px yang harus berfungsi untuk sebagian besar situs web.

Setelah itu, Anda harus memilih menu yang ingin Anda gunakan untuk menu responsif Anda. Jika anda masih belum membuat menu, maka anda bisa membuatnya dengan cara hadir Appearance » Menu. Lihat instruksi kami tentang cara menambahkan menu navigasi di WordPress untuk instruksi tertentu.

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

Jangan lupa untuk mengklik tombol 'Opsi Perbarui' untuk menyimpan pengaturan Anda.

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

Demo plugin menu responsif

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 pengaturan plugin dan menyesuaikannya sesuai kebutuhan.

Metode 2: Tambahkan Drop down Pilih Menu Menggunakan Plugin

Metode lain untuk menambahkan menu responsif adalah dengan menambahkan menu pilihan drop-down. Teknik ini tidak menuntut pengalaman kode apa pun, jadi ini adalah metode terbaik untuk pemula.

Pemilihan menu responsif

Pertama-tama Anda perlu melakukan proses penginstalan dan pengaktifan dengan plugin Responsive Menu. Jika Anda ingin membaca lebih detail, lihat instruksi kami tentang menginstal plug-in WordPress.

Setelah aktivasi, Anda harus hadir Penampilan » Responsif memilih untuk mengkonfigurasi pengaturan plug-in.

Pilih pengaturan menu

Anda harus menggulir ke bawah untuk membagi 'Aktifkan lokasi tema'. Secara default, plugin diaktifkan di semua lokasi topik. Anda dapat memvariasikannya dengan konversi selektif untuk lokasi tema tertentu.

Ingat bahwa Anda perlu mengklik tombol Menyimpan semua instalasi untuk menyimpan perubahan Anda.

Anda sekarang dapat mengunjungi situs web Anda dan mengubah ukuran layar browser untuk melihat menu pilihan responsif di tempat kerja.

Teknik 3: Membuat menu responsif keluar seluler dengan tindakan sakelar

Salah satu teknik yang paling umum digunakan untuk menampilkan menu di layar ponsel adalah dengan bantuan tindakan sakelar.

Teknik ini menuntut Anda untuk menambahkan kunci khusus ke kumpulan data WordPress Anda. Jika Anda belum pernah membuat ini sebelumnya, lihat instruksi kami tentang menempelkan cuplikan dari internet di WordPress.

Pertama-tama Anda harus membuka editor teks, misalnya notepad dan paste kode ini.

Setelah mainan ini perlu menambahkan CSS sehingga menu kami menggunakan kelas CSS dengan benar untuk beralih bekerja saat dilihat di ponsel.

Teknik 4: Menambahkan Menu Seluler Slide-In di WordPress

Metode umum lainnya adalah menambahkan menu seluler dengan bantuan menggunakan menu panel geser (seperti yang Anda lihat di Teknik1).

Teknik 4 mengharuskan Anda untuk menambahkan kode ke file tema WordPress Anda, dan itu hanya cara yang berbeda untuk mencapai hasil yang sama seperti Teknik 1.

Pertama-tama, Anda harus membuka editor teks biasa, misalnya Notepad dan menambahkan kode khusus ke file teks kosong.

Ingatlah bahwa Anda perlu mengganti example.com dengan nama domain pribadi Anda dan tema Anda dengan direktori tema Anda yang sebenarnya. Simpan file ini sebagai slidepanel.js ke desktop Anda.

Setelah itu Anda akan membutuhkan gambar yang akan Anda gunakan sebagai ikon menu.

Ikon hamburger paling sering digunakan sebagai ikon menu. Anda akan melihat banyak gambar seperti itu dari berbagai situs internet. Kami akan menggunakan ikon menu dari pustaka Google Material Icons.

Sekarang Anda melihat gambar yang ingin Anda gunakan, simpan sebagai menu.png.

Setelah itu, Anda perlu membuka pelanggan FTP dan mengunggah file slidepanel.js ke folder /wp-content/your-theme/js/.

Jika katalog tema Anda tidak memiliki folder JS, maka Anda harus membuat tit dan kemudian mengunggah file Anda.

Setelah proses ini Anda harus mengunggah file menu.png ke folder /wp-content/themes/your-theme/images/.

Setelah file diunggah, kami harus yakin bahwa tema Anda memengaruhi file JavaScript yang Anda tambahkan saat ini. Kami akan mencapai ini dengan mengantrekan file JavaScript.

Tambahkan kode ini ke file functions.php tema Anda.

Perhatikan bahwa menu navigasi tema Anda masih ada. Kami baru saja membungkusnya dengan HTML yang kami butuhkan untuk memicu menu slidepanel.

Langkah terakhir adalah menambahkan CSS untuk menyembunyikan ikon gambar menu di layar yang lebih besar. Anda juga perlu menyesuaikan posisi ikon menu.

Tergantung pada tema WordPress Anda, Anda mungkin perlu menyesuaikan CSS untuk menghindari konflik.