Untuk menambahkan menu dasbor gambar ke tema WordPress
Baru-baru ini salah satu pengguna kami bertanya kepada kami bagaimana mereka dapat mengganti menu navigasi mereka dengan panel gambar jQuery. Menu panel geser dapat digunakan untuk meningkatkan pengalaman pengguna di situs web seluler. Pada artikel ini, kami akan menunjukkan cara menambahkan menu dasbor gambar ke tema WordPress.
Catatan: Ini adalah tutorial tingkat menengah dan membutuhkan pengetahuan HTML dan CSS yang memadai.
Ganti menu default dengan menu tabel geser di WordPress
Tujuannya di sini adalah untuk menampilkan menu panel visual kepada pengguna di layar yang lebih kecil sambil mempertahankan menu default tema kami sehingga pengguna di komputer port dan desktop dapat melihat seluruh menu. . Sebelum Anda memulai, penting untuk mengetahui bahwa ada banyak tema WordPress yang berbeda di luar sana, dan Anda harus berurusan dengan beberapa CSS nanti.
Hal pertama yang harus Anda lakukan adalah membuka editor teks biasa di komputer Anda, seperti Notepad, dan membuat file baru. Salin dan tempel kode ini:
(fungsi ($) {
$(‘#konversi’). mengalihkan (
karakteristik () {
$(‘# muncul’). animate({kiri: 0}, ‘lambat’, function() {
$(‘#konversi’). html (“
‘);
});
},
fungsi () {
$(‘#munculan’). animate({kiri: -250}, ‘lambat’, function() {
$(‘# Konversi’). html(‘‘);
});
}
);
}) (jQuery);
Ganti example.com dengan nama domain Anda sendiri dan juga ganti tema Anda dengan direktori tema Anda yang sebenarnya. Simpan file ini sebagai slidepanel.js ke desktop Anda. Kode ini menggunakan jQuery untuk beralih di antara menu panel geser. Ini juga menjiwai efek roda gigi.
Buka klien FTP seperti Filezilla dan sambungkan ke situs web Anda. Lalu buka folder tema Anda dan jika Anda memiliki folder js buka. Jika folder tema Anda tidak memiliki folder js, Anda harus membuatnya dan memuat file slidepanel.js di folder js.
Langkah selanjutnya adalah mendesain atau menemukan ikon menu. Ikon menu yang paling umum digunakan adalah ikon dengan tiga baris. Anda dapat membuatnya di Photoshop atau menemukan salah satu dari banyak gambar Google yang ada. Untuk tutorial ini, kami menggunakan ikon menu 27x23px. Setelah Anda membuat atau menemukan ikon menu Anda, ganti namanya menjadi menu.png dan muat ke folder gambar di folder tema Anda.
Langkah selanjutnya adalah mengantri file javascript untuk tabel gambar WordPress. Pada dasarnya, Anda hanya perlu menyalin dan menempelkan kode ini ke file .php tema Anda.
wp_enqueue_script(‘wpb_slidepanel’, get_template_directory_uri().’/js/slidepanel.js’, array(‘jquery’), ‘20131010’, true);
Sekarang semuanya sudah dikonfigurasi, Anda harus mengubah menu default untuk tema Anda. Secara umum, sebagian besar tema menampilkan menu navigasi di file header.php tema. Buka file header.php dan cari baris yang mirip dengan ini:
