Cara Menambahkan Menu Dasbor di Tema WordPress

Baru-baru ini, salah satu pengguna kami bertanya kepada kami bagaimana mereka dapat mengganti menu navigasi mereka dengan menu konsol jQuery. Menu panel geser dapat digunakan untuk sangat meningkatkan pengalaman pengguna di situs web seluler. Pada artikel ini, kami akan menunjukkan cara menambahkan menu dasbor di 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 dasbor kepada pengguna di layar yang lebih kecil sambil mempertahankan menu default tema sehingga pengguna di port dan desktop dapat melihat menu lengkap. Sebelum Anda memulai, penting untuk mengetahui bahwa ada banyak tema WordPress yang berbeda di luar sana, dan Anda harus berurusan dengan sedikit CSS nanti.

Hal pertama yang harus Anda lakukan adalah membuka editor teks sederhana di komputer Anda, seperti Notepad, dan membuat file baru. Salin dan tempel kode ini:

(hàm ($) {
$ ('# chuyển đổi'). chuyển đổi (
chức năng () {
$ ('# bật ra'). animate ({trái: 0}, 'chậm', hàm () {
$ ('# chuyển đổi'). html ('');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').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 di desktop Anda. Kode ini menggunakan jQuery untuk mengaktifkan menu tabel geser. Ini juga menjiwai efek transisi.

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, maka Anda perlu membuatnya dan mengunggah file slidepanel.js ke dalam folder js.

Langkah selanjutnya adalah mendesain atau menemukan ikon menu. Ikon menu yang paling umum digunakan adalah ikon tiga baris. Anda dapat membuatnya menggunakan 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 panel slide di WordPress. Pada dasarnya, cukup salin dan tempel 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 diatur, Anda harus memodifikasi menu default 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: