Apakah Anda ingin membuat menu 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 Berapa banyak plugin untuk diinstal di WordPress. et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda 

Lalu kembali ke mengapa kita ada di sini.

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.

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 WordPress Plugin.

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

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

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 Anda tema WordPress 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 »Dari Anda tema WordPress.

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 perlu menambahkan menu navigasi di tema WordPress. Biasanya menu navigasi ditambahkan di “ header.php Tentang tema WordPress Anda.

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

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

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

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation 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 to use on mobile devices

@media screen and (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;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: 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;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > 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.

Temukan juga beberapa plugin WordPress premium  

Anda dapat menggunakan yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website Anda.

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

1. UberMenu

UberMenu adalah WordPress Plugin didedikasikan untuk membuat megamenu yang sangat dapat disesuaikan, responsif, dan dapat diakses pengguna. Ini berfungsi setelah instalasi, tanpa memerlukan konfigurasi tertentu.

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 disebut juga LMM adalah a WordPress Plugin dirancang untuk pengguna dan pengembang. Ini memiliki antarmuka yang sederhana dan intuitif, terintegrasi ke dalam dasbor WP, memungkinkan Anda membuat dan menyesuaikan menu mega dalam jumlah tak terbatas, tanpa keahlian pemrograman apa pun.

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 tempel, 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.

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.

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.

• Cara mengubah nama gambar pada blog WordPress
• Cara membuat menu mengambang di WordPress
• Plugin 8 WordPress untuk membuat megamenu di blog Anda
• Beberapa tip untuk membuat menu modern untuk blog Anda
• Plugin 6 WordPress untuk mengelola kategori dan subkategori di blog Anda

Kesimpulan

Jadi ! Sekian untuk tutorial kali ini, semoga dapat membantu anda dalam membuat menu untuk pengguna mobile. 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.

...