Mengganti ikon menu hamburger pada tema GeneratePress (mobile view) ternyata sangat mudah. Tak perlu jago PHP, cukup dengan menyalin beberapa baris kode lalu menyisipkannya pada functions.php maka seketika icon menu pun akan berubah.
Bagi para blogger senior pengguna wordpress hal ini mungkin sangat remeh, namun tidak demikian bagi blogger pemula seperti saya. Jangankan paham kode pemrograman, cara menggunakan plugin-plugin pun masih kesusahan.
Dengan bermodalkan kemampuan bahasa inggris yang minim, saya mencoba melakukan pencarian pada google mengenai cara mengubah icon menu mobile GeneratePress. Tak perlu waktu lama, jawabannya pun angsung muncul hanya dengan sekali pencarian saja.
Nah, artikel ini sengaja saya buat sebagai pengingat dikemudian hari apabila saya membutuhkannya lagi. Ya, syukur-syukur tulisan ini juga bisa bermanfaat bagi sobat blogger pemula seperti saya.
Oke, langsung saja ke pembahasannya.
Cara Mengubah Ikon Menu (Mobile) GeneratePress
Berikut adalah langkah-langkah untuk mengubah ikon menu mobile tema GeneratePress pada wordpress.
Langkah 1: Salin kode berikut.
add_filter( 'generate_svg_icon', function( $output, $icon ) {
if ( 'menu-bars' === $icon ) {
$svg = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"></path>
</svg>';
return sprintf(
'<span class="gp-icon %1$s">
%2$s
</span>',
$icon,
$svg
);
}
return $output;
}, 15, 2 );Catatan:
Untuk mengganti icon menu dengan gaya yang lain, silahkan ganti kode svg pada bagian $svg = ‘ letakkan kode icon svg disini ‘ .
Langkah 2: Masuk ke dashboard WordPress
Langkah 3: Klik Tampilan > Editor Berkas Tema > functions.php
Langkah 4: Tempelkan kode yang telah disalin pada baris paling bawah, kemudian klik Perbarui Berkas.
Sampai pada tahap ini, kita telah berhasil mengganti icon menu bawaan GeneratePress tanpa bantuan plugin apapun. Selanjutnya kita harus memberikan sedikit styling menggunakan kode CSS.
Langkah 5: Salin kode CSS berikut.
.main-navigation .menu-toggle {
background: transparent;
}
.main-navigation .menu-toggle span {
padding: 0;
display: flex;
}
button.menu-toggle svg {
height: 1.5rem;
width: 1.5rem;
margin-top: -4px;
}Langkah 6: Tempel kode CSS tersebut pada menu CSS Tambahan yang dapat diakses melalui Tampilan > Sesuaikan > CSS Tambahan
Langkah 7: Selesai.
Nah, jika kamu mengikuti langkah langkah diatas dengan benar maka icon menu pada tampilan GeneratePress akan berubah seperti gambar berikut.
Gimana sob, mudah bukan? Jika ada pertanyaan atau ada langkah-langkah yang kurang dimengerti silahkan tuliskan pada kolom komentar. Termakasih telah membaca, semoga bermanfaat.