Loncat ke Konten Utama

Cara membuat menu responsif untuk WordPress seluler

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Apakah Anda ingin membuat menu seluler responsif di blog WordPress Anda?

Pengguna seluler melebihi jumlah pengguna desktop saat ini. Menambahkan menu seluler yang responsif memudahkan pengguna untuk menavigasi situs Anda.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara mudah membuat menu responsif di WordPress.

Tetapi sebelumnya, jika Anda belum pernah menginstal WordPress temukan Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda 

Lalu kembali ke mengapa kita ada di sini.

Cara membuat menu wordpress mobile yang responsif

Di sini akan menjadi pertanyaan mendalam dengan menunjukkan kepada Anda metode dengan plugin untuk pemula dan metode pengkodean untuk pengguna tingkat lanjut.

Metode pertama: Buat menu seluler dengan plugin WordPress

Metode ini lebih mudah dan direkomendasikan untuk pemula karena tidak memerlukan keterampilan pengkodean khusus.

Dalam metode ini, kita akan membuat menu (dengan ikon hamburger) yang meluncur di layar ponsel.

Plugin menu responsif WordPress

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan Plugin Menu Responsif WordPress . Untuk lebih jelasnya, lihat panduan kami tentang cara memasang plugin WordPress .

Setelah mengaktifkan plugin, plugin akan menambahkan item baru pada menu, berjudul " responsif menu ". Mengkliknya akan membawa Anda ke halaman pengaturan plugin WordPress.

Plugin menu dasbor responsif WordPress

Anda harus terlebih dahulu memasukkan ukuran dari mana menu seluler akan muncul. Standarnya adalah 800px, yang seharusnya berfungsi untuk sebagian besar situs web.

Setelah itu Anda harus memilih menu yang ingin Anda gunakan di ponsel.

Opsi terakhir di layar memungkinkan Anda untuk menyediakan kelas CSS untuk menu Anda. Ini akan memungkinkan plugin menyembunyikan menu non responsif Anda di layar kecil.

Jangan lupa klik pada « Perbarui Pilihan Untuk menyimpan pengaturan Anda.

Kami juga menyarankan Anda untuk menemukan kami Plugin 10 WordPress untuk membuat menu di blog Anda

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

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

Situs-in-action menu-responsif-to-mobile-

Plugin « responsif menu »Menawarkan banyak opsi lain yang memungkinkan Anda untuk mengubah perilaku dan tampilan menu responsif Anda. Anda dapat menjelajahi opsi-opsi ini di halaman pengaturan plugin dan menyesuaikannya sesuai kebutuhan.

Metode 2: Cara Menambahkan Menu Seluler Secara Manual

Salah satu metode paling umum yang digunakan untuk menampilkan menu di layar ponsel adalah dengan menggunakan leverage.

Metode ini mengharuskan Anda untuk menambahkan kode khusus ke file WordPress Anda.

Dalam salah satu tutorial kami sebelumnya, kami tunjukkan kepada Anda cara membuat plugin WordPress.

Pertama, Anda perlu membuka editor teks seperti Notepad dan menempelkan kode ini.

(function () {nav var = document.getElementById ('navigasi situs'), tombol, menu; if (! nav) {return;} tombol = nav.getElementsByTagName ('tombol') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (tombol!) {return;} // Sembunyikan tombol jika menu hilang atau kosong jika (! 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 harus menyimpan file ini dengan nama " navigation.js Di meja Anda.

Maka Anda perlu membuka klien FTP untuk mengunduh file ini ke lokasi "/ wp-content / themes / your-theme / js /" di situs web WordPress Anda.

Ganti ekspresi " Anda-tema Dengan nama folder tema WordPress Anda saat ini. Jika direktori tema Anda tidak memiliki folder js, maka Anda perlu membuatnya.

Setelah mengupload file JavaScript, langkah selanjutnya adalah memastikan bahwa situs WordPress Anda akan memuat file JavaScript tersebut. Anda perlu menambahkan kode berikut ke " functions.php Tentang tema WordPress Anda.

Temukan sesuatu yang lain Apa yang dapat Anda lakukan dengan file functions.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', array (' jquery '), 20160909', benar.);

Sekarang kita harus menambahkan menu navigasi di tema WordPress kita. Biasanya menu navigasi ditambahkan ke file " header.php Tentang tema WordPress Anda.

Tidak bisa 'primer', 'menu_class' => 'nav-menu')); ?>

Kami berasumsi bahwa lokasi menu yang ditentukan oleh tema WordPress Anda disebut " primer ". Jika tidak, gunakan lokasi yang ditentukan oleh tema WordPress Anda.

Temukan juga kami 5 plugin WordPress untuk membuat formulir berlangganan

Langkah terakhir adalah menambahkan beberapa CSS sehingga menu kami menggunakan kelas CSS yang tepat untuk beralih saat dilihat di perangkat seluler.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

/ * Menu Navigasi * / .main-navigation {margin-top: 24px; margin-top: 1.714285714rem; text-align: center; } .main-navigation li {margin-top: 24px; margin-top: 1.714285714rem; ukuran font: 12px; ukuran font: 0.857142857rem; tinggi garis: 1.42857143; }. navigasi-utama a {color: # 5e5e5e; } .main-navigation a: hover, .main-navigation a: focus {color: # 21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle {display: inline-block; } // CSS yang akan digunakan pada perangkat seluler layar @media dan (min-width: 600px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {border-bottom: 1px solid # ededed; border-top: 1px solid #ededed; display: inline-block! important; teks-rata: kiri; lebar: 100%; } .main-navigation ul {margin: 0; teks-indentasi: 0; } .main-navigation li a, .main-navigation li {display: inline-block; dekorasi-teks: tidak ada; } .main-navigation li a {border-bottom: 0; warna: # 6a6a6a; tinggi garis: 3.692307692; text-transform: huruf besar; ruang putih: nowrap; } .main-navigation li a: hover, .main-navigation li a: focus {color: # 000; } .main-navigation li {margin: 0 40px 0 0; margin: 0 2.857142857rem 0 0; posisi: relatif; } .main-navigation li ul {margin: 0; bantalan: 0; posisi: mutlak; atas: 100%; z-indeks: 1; tinggi: 1px; lebar: 1px; overflow: hidden; clip: rect (1px, 1px, 1px, 1px); } .main-navigation li ul ul {top: 0; kiri: 100%; } .main-navigation ul li: hover> ul, .main-navigation ul li: focus> ul, .main-navigation .focus> ul {border-left: 0; klip: mewarisi; overflow: mewarisi; tinggi: mewarisi; lebar: mewarisi; } .main-navigation seperti {background: #efefef; border-bottom: 1px solid #ededed; tampilan: blok; ukuran font: 11px; ukuran font: 0.785714286rem; tinggi garis: 2.181818182; padding: 8px 10px; bantalan: 0.571428571rem 0.714285714rem; lebar: 180px; lebar: 12.85714286rem; ruang putih: normal; } .main-navigation li ul li a: hover, .main-navigation li ul li a: focus {background: # e3e3e3; warna: # 444; } .main-navigation .current-menu-item> a, .main-navigation .current-menu-leluhur> a, .main-navigation .current_page_item> a, .main-navigation .current_page_ancestor> a {color: # 636363; font-weight: bold; } .menu-toggle {display: none; }}

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

Goyang-menu-wordpress-tutorial

Temukan juga beberapa plugin WordPress premium  

Anda dapat menggunakan plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. UberMenu

UberMenu adalah plugin WordPress yang didedikasikan untuk kreasi yang sangat dapat disesuaikan, responsif, dan dapat diakses oleh pengguna megamenu. Ini berfungsi setelah instalasi, tanpa perlu konfigurasi khusus.

Plugin Ubermenu wordpress mega menu

Ini adalah plugin yang mudah digunakan, namun cukup kuat untuk membuat tata letak menu mega yang sangat dapat disesuaikan dan kreatif.

Lihat juga kami 9 plugin WordPress untuk membuat kisi harga di blog

Anda akan menemukan antara lain: 3 templat menu, tata letak responsif penuh, kompatibilitas dengan perangkat seluler (iPhone, iPad, Android), dukungan sentuh, dll.

Download | Demo | Hébergement Web

2. LMM

Liquida Mega Menu juga disebut LMM adalah plugin WordPress yang dirancang untuk pengguna dan pengembang. Ini memiliki antarmuka yang sederhana dan intuitif, terintegrasi dengan dasbor WP, memungkinkan Anda untuk membuat dan menyesuaikan menu mega dalam jumlah tak terbatas, tanpa keterampilan pemrograman apa pun.

Menu mega responsif wordpress lmm berdasarkan bootstrap

Muncul dengan lusinan fitur, baik untuk pengguna biasa atau tingkat lanjut. Sebagai fungsionalitas, ia menawarkan antara lain: integrasi otomatis dan manual, dukungan untuk multisite, dukungan untuk tema anak-anak, gaya yang sepenuhnya dapat disesuaikan untuk menu, lokasi menu yang dapat disesuaikan, menu lengket, dll.

Download | Demo | Hébergement Web

3. 8Degree Menu Terbang

8Degree Fly Menu adalah plugin WordPress premium yang memungkinkan Anda menambahkan menu kanvas di situs web Anda, untuk memberikan tampilan yang menyoroti dan memudahkan informasi Anda. Ini menggunakan fungsi menu WordPress default untuk membuat menunya.

8degree fly menu responsif dari menu menu plugin untuk wordpress

Anda akan dapat menambahkan elemen tambahan ke item menu default, seperti ikon, slogan menu, header pengelompokan semu, dan deskripsi panjang.

Baca juga: 10 plugin WordPress untuk mengoptimalkan sidebar dan header lengket

Ini juga dilengkapi dengan editor WYSIWYG untuk membantu Anda memahami deskripsi panjang Anda dengan cara yang ramah pengguna. Dengan editor ini Anda juga dapat menggunakan kode pendek.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Download | Demo | Hébergement Web

Sumber daya lain yang direkomendasikan

Kami juga mengundang Anda untuk berkonsultasi dengan sumber daya di bawah ini untuk melangkah lebih jauh dalam cengkeraman dan kontrol situs web dan blog Anda.

Kesimpulan

Itu dia! Itu saja untuk tutorial ini, saya harap ini akan memungkinkan Anda untuk membuat menu untuk pengguna seluler. merasa bebas untuk bagikan tip dengan teman-teman Anda di jejaring sosial Anda.

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.

Namun, sementara itu, beri tahu kami tentang file komentar dan saran di bagian khusus.

...

Artikel ini berisi komentar 2

  1. halo

    terima kasih atas informasimu

    Sepertinya saya tidak dapat menemukan "kelas CSS untuk menu Anda". saya menemukan stylesheet css tetapi saya tidak tahu apa yang harus disalin dan ditempel

    terima kasih sebelumnya atas bantuan Anda

    akhir minggu yang baik

    michel

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
6 saham
saham4
menciak
Register2