Cara Membuat Menu WordPress Responsif Mudah Alih

Adakah anda ingin membuat menu WordPress responsif yang mudah alih? Pengguna mudah alih telah mengatasi pengguna desktop untuk banyak laman web. Menambah menu responsif mudah alih memudahkan pengguna menavigasi laman web anda. Dalam artikel ini, kami akan menunjukkan kepada anda cara membuat menu WordPress responsif yang mudah alih dengan mudah.


Buat menu WordPress responsif mudah alih

Ini adalah tutorial mendalam. Kami akan menunjukkan kaedah pemalam untuk pemula (tanpa pengekodan) dan kaedah pengekodan untuk pengguna kami yang lebih maju.

Pada akhir tutorial ini, anda akan belajar bagaimana membuat menu mudah alih slaid-in, menu mudah alih lungsur, dan menu mudah alih beralih.

Sedia? Mari kita mulakan.

Tutorial Video

Langgan WPBeginner

Sekiranya anda tidak menyukai video atau memerlukan lebih banyak arahan, teruskan membaca.

Kaedah 1: Tambahkan Menu Responsif di WordPress Menggunakan Plugin

Kaedah ini lebih mudah dan disyorkan untuk pemula kerana tidak memerlukan pengekodan khusus.

Dalam kaedah ini, kami akan membuat menu hamburger yang meluncur di skrin mudah alih.

Demo pemalam menu responsif

Perkara pertama yang perlu anda lakukan ialah memasang dan mengaktifkan plugin Menu Responsif. Untuk maklumat lebih lanjut, lihat panduan langkah demi langkah kami mengenai cara memasang pemalam WordPress.

Setelah diaktifkan, pemalam akan menambahkan item menu baru yang berlabel ‘Menu Responsif’ ke bar pentadbir WordPress anda. Mengkliknya akan membawa anda ke halaman tetapan pemalam.

Tetapan menu responsif

Mula-mula anda perlu memasukkan lebar skrin di mana plugin akan mula menunjukkan menu responsif. Nilai lalai adalah 800px yang seharusnya berfungsi untuk kebanyakan laman web.

Selepas itu, anda perlu memilih menu yang ingin anda gunakan untuk menu responsif anda. Sekiranya anda belum membuat menu, anda boleh membuatnya dengan melawat Rupa »Menu. Lihat panduan kami mengenai cara menambahkan menu navigasi di WordPress untuk arahan terperinci.

Pilihan terakhir di skrin adalah menyediakan kelas CSS untuk menu semasa anda yang tidak responsif. Ini akan membolehkan pemalam menyembunyikan menu tidak responsif anda pada skrin yang lebih kecil.

Jangan lupa untuk mengklik butang ‘Update Options’ untuk menyimpan tetapan anda.

Anda kini boleh mengunjungi laman web anda dan mengubah ukuran skrin penyemak imbas anda untuk melihat menu responsif beraksi.

Demo pemalam menu responsif

Plugin menu responsif dilengkapi dengan banyak pilihan lain yang membolehkan anda mengubah tingkah laku dan penampilan menu responsif anda. Anda boleh meneroka pilihan ini di halaman tetapan pemalam dan menyesuaikannya mengikut keperluan.

Kaedah 2: Tambahkan Menu Pilih Turun Turun Menggunakan Plugin

Cara lain untuk menambahkan menu responsif adalah dengan menambahkan menu pilih drop-down. Kaedah ini tidak memerlukan kemahiran pengekodan, jadi disarankan untuk pemula.

Menu pilih responsif

Perkara pertama yang perlu anda lakukan ialah memasang dan mengaktifkan pemalam Menu Pilih Responsif. Untuk maklumat lebih lanjut, lihat panduan langkah demi langkah kami mengenai cara memasang pemalam WordPress.

Setelah diaktifkan, anda perlu melawat Rupa »Pilih Responsif untuk mengkonfigurasi tetapan pemalam.

Pilih tetapan menu

Anda perlu menatal ke bawah ke bahagian ‘Aktifkan lokasi tema’. Secara lalai, plugin diaktifkan di semua lokasi tema. Anda boleh mengubahnya dengan mengaktifkannya secara selektif untuk lokasi tema tertentu.

Jangan lupa untuk mengklik butang simpan semua tetapan untuk menyimpan perubahan anda.

Anda kini boleh mengunjungi laman web anda dan mengubah ukuran skrin penyemak imbas untuk melihat menu pilih yang responsif beraksi.

Kaedah 3: Membuat Menu Responsif Mesra Mudah Alih dengan Toggle Effect

Salah satu kaedah yang paling biasa digunakan untuk menampilkan menu di skrin mudah alih adalah dengan menggunakan toggle effect.

Kaedah ini menghendaki anda menambahkan kod tersuai ke fail WordPress anda. Sekiranya anda belum melakukan ini sebelumnya, lihatlah panduan kami mengenai menampal potongan dari web di WordPress.

Mula-mula anda perlu membuka editor teks seperti notepad dan tampal kod ini.

(fungsi () {
var nav = document.getElementById (‘site-navigation’), butang, menu;
sekiranya (! nav) {
kembali;
}

butang = nav.getElementsByTagName (‘button’) [0];
menu = nav.getElementsByTagName (‘ul’) [0];
jika (butang!) {
kembali;
}

// Sembunyikan butang jika menu tiada atau kosong.
jika (! menu ||! menu.childNodes.length) {
button.style.display = ‘tiada’;
kembali;
}

button.onclick = fungsi () {
jika (-1 === menu.className.indexOf (‘nav-menu’)) {
menu.className = ‘nav-menu’;
}

jika (-1! == button.className.indexOf (‘toggled-on’)) {
button.className = button.className.replace (‘toggled-on’, ”);
menu.className = menu.className.replace (‘toggled-on’, ”);
} lain {
button.className + = ‘toggled-on’;
menu.className + = ‘toggled-on’;
}
};
}) (jQuery);

Sekarang anda perlu menyimpan fail ini sebagai navigasi.js di desktop anda.

Seterusnya, anda perlu membuka klien FTP untuk memuat naik fail ini ke / wp-content / themes / your-theme-dir / js / folder di laman WordPress anda.

Gantikan direktori tema-anda dengan direktori tema semasa anda. Sekiranya direktori tema anda tidak mempunyai folder js, maka anda perlu membuatnya.

Setelah memuat naik fail JavaScript, langkah selanjutnya adalah memastikan laman WordPress anda memuatkan JavaScript ini. Anda perlu menambahkan kod berikut ke fail functions.php tema anda.

wp_enqueue_script (‘wpb_togglemenu’, get_template_directory_uri (). ‘/js/navigation.js’, array (‘jquery’), ‘20160909’, benar);

Sekarang kita perlu menambahkan menu navigasi ke dalam tema WordPress kita. Biasanya menu navigasi ditambahkan ke dalam fail header.php tema.

Menu
<?php wp_nav_menu (array (‘tema_lokasi’ =)> ‘primer’, ‘menu_class’ => ‘menu-nav’)); ?>

Kami menganggap bahawa lokasi tema yang ditentukan oleh tema anda disebut utama. Sekiranya tidak, gunakan lokasi tema yang ditentukan oleh tema WordPress anda.

Langkah terakhir adalah menambahkan CSS supaya menu kami menggunakan kelas CSS yang tepat untuk beralih berfungsi apabila dilihat pada peranti mudah alih.

/ * Menu Navigasi * /
.pelayaran utama {
margin atas: 24 piksel;
margin-top: 1.714285714rem;
text-align: tengah;
}
.pelayaran utama li {
margin atas: 24 piksel;
margin-top: 1.714285714rem;
saiz fon: 12px;
saiz fon: 0.857142857rem;
ketinggian garisan: 1.42857143;
}
.pelayaran utama a {
warna: # 5e5e5e;
}
.pelayaran utama a: hover,
.pelayaran utama a: fokus {
warna: # 21759b;
}
.menu ul.nav-navigasi utama,
.menu utama navigasi div.nav > ul {
paparan: tiada;
}

.main-navigasi ul.nav-menu.toggled-on,
.menu-togol {
paparan: sebaris-blok;
}

// CSS untuk digunakan pada peranti mudah alih

Skrin @media dan (lebar minimum: 600px) {

.menu ul.nav-navigasi utama,
.menu utama navigasi div.nav > ul {
border-bottom: 1px padat #ededed;
border-top: 1px padat #ededed;
paparan: sebaris-blok! penting;
text-align: kiri;
lebar: 100%;
}
.pelayaran utama ul {
margin: 0;
teks-inden: 0;
}
.pelayaran utama li a,
.pelayaran utama li {
paparan: sebaris-blok;
hiasan teks: tiada;
}
.pelayaran utama li a {
sempadan-bawah: 0;
warna: # 6a6a6a;
ketinggian garisan: 3.692307692;
text-transform: huruf besar;
ruang putih: nowrap;
}
.pelayaran utama li a: hover,
.main-navigasi li a: fokus {
warna: # 000;
}
.pelayaran utama li {
margin: 0 40px 0 0;
margin: 0 2.857142857rem 0 0;
kedudukan: saudara;
}
.pelayaran utama li ul {
margin: 0;
pembalut: 0;
kedudukan: mutlak;
atas: 100%;
z-index: 1;
tinggi: 1px;
lebar: 1px;
limpahan: tersembunyi;
klip: betul (1px, 1px, 1px, 1px);
}
.pelayaran utama li ul ul {
atas: 0;
kiri: 100%;
}
.main-navigasi ul li: hover > ul,
.main-navigasi ul li: fokus > ul,
.pelayaran utama .fokus > ul {
sempadan kiri: 0;
klip: mewarisi;
limpahan: mewarisi;
tinggi: mewarisi;
lebar: mewarisi;
}
.pelayaran utama li ul li a {
latar belakang: #efefef;
border-bottom: 1px padat #ededed;
paparan: blok;
saiz fon: 11px;
saiz fon: 0.785714286rem;
ketinggian garis: 2.181818182;
padding: 8px 10px;
pelapik: 0.571428571rem 0.714285714rem;
lebar: 180px;
lebar: 12.85714286rem;
ruang putih: normal;
}
.pelayaran utama li ul li a: hover,
.main-navigasi li ul li a: fokus {
latar belakang: # e3e3e3;
warna: # 444;
}
.utama-navigasi .current-menu-item > a,
.utama-navigasi .current-menu-leluhur > a,
.main-navigasi .current_page_item > a,
.pelayaran utama .current_page_ancestor > sebuah {
warna: # 636363;
font-weight: tebal;
}
.menu-togol {
paparan: tiada;
}

}

Anda kini boleh mengunjungi laman web anda dan mengubah ukuran skrin penyemak imbas anda untuk melihat menu togol responsif anda beraksi.

Togol pratonton menu

Penyelesaian masalah: Bergantung pada tema WordPress anda, anda mungkin perlu menyesuaikan CSS. Gunakan alat elemen periksa untuk mengetahui konflik CSS dengan tema anda.

Kaedah 4: Tambahkan Menu Mudah Alih Slide-In di WordPress

Teknik umum lain untuk menambahkan menu bergerak adalah dengan menggunakan menu panel slaid-in (seperti yang ditunjukkan dalam Kaedah 1).

Kaedah 4 menghendaki anda menambahkan kod ke fail tema WordPress anda, dan ini hanyalah cara yang berbeza untuk mencapai hasil yang sama seperti Kaedah 1.

Pertama, anda perlu membuka editor teks biasa seperti Notepad dan menambahkan kod berikut ke fail teks kosong.

(fungsi ($) {
$ (‘# toggle’). toggle (
fungsi () {
$ (‘# popout’). animate ({kiri: 0}, ‘lambat’, fungsi () {
$ (‘# toggle’). html (‘tutup‘);
});
},
fungsi () {
$ (‘# popout’). animate ({kiri: -250}, ‘lambat’, fungsi () {
$ (‘# toggle’). html (‘tutup‘);
});
}
);
}) (jQuery);

Jangan lupa ganti example.com dengan nama domain dan tema anda sendiri dengan direktori tema sebenar anda. Simpan fail ini sebagai slidepanel.js ke desktop anda.

Sekarang anda memerlukan gambar yang akan digunakan sebagai ikon menu. Ikon hamburger paling sering digunakan sebagai ikon menu. Anda akan mendapat banyak gambar seperti itu dari laman web yang berbeza. Kami akan menggunakan ikon menu dari perpustakaan Ikon Bahan Google.

Setelah anda menemui gambar yang ingin anda gunakan, simpan sebagai menu.png.

Seterusnya, anda perlu membuka klien klien FTP dan memuat naik fail slidepanel.js ke / wp-content / your-tema / js / folder.

Sekiranya direktori tema anda tidak mempunyai folder JS, maka anda perlu membuat tit dan kemudian memuat naik fail anda.

Selepas itu, anda perlu memuat naik fail menu.png ke / wp-content / tema / tema-anda / gambar / folder.

Setelah fail dimuat, kami perlu memastikan bahawa tema anda memuat fail JavaScript yang baru anda tambahkan. Kami akan mencapainya dengan memasukkan fail JavaScript.

Tambahkan kod ini ke fail functions.php tema anda.

wp_enqueue_script (‘wpb_slidepanel’, get_template_directory_uri (). ‘/js/slidepanel.js’, array (‘jquery’), ‘20160909’, benar);

Sekarang kita perlu menambahkan kod sebenar dalam fail header.php tema anda untuk memaparkan menu navigasi. Anda harus mencari kod yang serupa dengan ini:

<?php wp_nav_menu (array (‘tema_lokasi’ =)> ‘primer’, ‘menu_class’ => ‘menu-nav’)); ?>

Anda ingin membungkus menu navigasi yang ada dengan kod HTML untuk memaparkan menu panel slaid anda pada layar yang lebih kecil.

Tunjuk

<?php wp_nav_menu (array (‘tema_lokasi’ =)> ‘primer’, ‘menu_class’ => ‘menu-nav’)); ?>

Perhatikan bahawa menu navigasi tema anda masih ada. Kami baru sahaja melengkapkannya di HTML yang kami perlukan untuk mencetuskan menu slidepanel.

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

Berikut adalah contoh CSS yang boleh anda gunakan sebagai titik permulaan:

Skrin @media dan (lebar minimum: 769px) {
#toggle {
paparan: tiada;
}

}

Skrin @media dan (lebar maksimum: 768px) {
#terkeluar {
kedudukan: tetap;
tinggi: 100%;
lebar: 250px;
latar belakang: rgb (25, 25, 25);
latar belakang: rgba (25, 25, 25, .9);
warna: putih;
bahagian atas: 0px;
kiri: -250px;
limpahan: automatik;
}

#toggle {
terapung: betul;
kedudukan: tetap;
bahagian atas: 60 piksel;
kanan: 45 piksel;
lebar: 28px;
tinggi: 24px;

}

.menu nav li {
sempadan-bawah: 1px padat #eee;
pembalut: 20px;
lebar: 100%;
}

.nav-menu li: arahkan {
latar belakang: #CCC;
}

.menu nav li a {
warna: #FFF;
hiasan teks: tiada;
lebar: 100%;
}
}

Bergantung pada tema WordPress anda, anda mungkin perlu menyesuaikan CSS untuk mengelakkan konflik.

Inilah caranya di laman web demo kami:

Menu slaid masuk responsif di WordPress

Kami harap artikel ini dapat membantu anda belajar bagaimana membuat menu WordPress responsif yang sedia untuk mudah alih. Anda mungkin juga ingin melihat panduan kami mengenai cara menambahkan menu responsif skrin penuh di WordPress

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me