Menambahkan Ikon Gambar Di Menu Navigasi WordPress

Apakah ingin menambahkan ikon gambar di menu navigasi WordPress terlihat lebih interaktif?. Pada artikel kali ini, kami akan berbagi cara menambahkan ikon gambar di menu navigasi WordPress.

Biasanya, menu navigasi WordPress adalah tautan teks biasa. Tautan ini berfungsi untuk sebagian besar situs web, namun menu navigasi dapat diubah dengan menambahkan ikon gambar agar terlihat lebih interaktif.

Ikon gambar dapat digunakan untuk membuat menu lebih terlihat. Misalnya, ikon gambar di sebelah halaman kontak dapat membuatnya menonjol di antara tautan lain di menu.

Menambahkan Ikon Gambar Di Menu Navigasi WordPress

Metode 1: Menambahkan Ikon Menu Menggunakan Plugin

Metode ini lebih mudah dan direkomendasikan untuk pengguna pemula karena tidak memerlukan pengkodean.

Hal pertama yang perlu dilakukan adalah menginstal dan mengaktifkan plugin “Menu Image” yang bisa didapatkan di plugins >> add news atau download di https://wordpress.org/plugins/menu-image/.

Setelah aktivasi, silakan mengunjungi Appearance » Menus. Akan terlihat tombol “Menu image” and “Image on hover” dalam pengaturan setiap item menu.

Dengan menggunakan tombol-tombol tersebut maka dapat dipilih dan mengunggah ikon gambar menu yang ingin digunakan. Bisa juga dengan hanya mengunggah gambar menu dan mengabaikan gambar hover.

Pada menu dropdown ‘Image size’, dapat dipilih ukuran untuk ikon gambar. Ukuran ini akan berlaku untuk ikon menu gambar dan gambar saat hover. Plugin ini mempunyai beberapa opsi untuk dipilih. Namun disarankan agar ikon menu tetap kecil dengan menggunakan ukuran 24 x 24 atau 36 x 36.

Jika ingin menambahkan ukuran khusus sendiri untuk gambar menu, maka bisa dengan menambahkan kode ini di file functions.php tema atau plugin khusus situs.

add_filter( 'menu_image_default_sizes', function($sizes){
  
  // remove the default 36x36 size
  unset($sizes['menu-36x36']);
  
  // add a new size
  $sizes['menu-50x50'] = array(50,50);
  
  // return $sizes (required)
  return $sizes;
  
});

Dengan plugin ini bisa mengatur posisi judul di atas, di bawah, sebelum, atau sesudah ikon gambar. Selain itu bisa juga untuk menyembunyikan judul dan hanya menampilkan ikon gambar untuk setiap menu navigasi.

Setelah mengonfigurasi pengaturan dan menambahkankan ikon gambar ke setiap item menu navigasi yang diinginkan. Selanjutnya, tinggal mengklik tombol “Save Menu” untuk menyimpan perubahan.

Untuk plugin menu icon/gambar yang lain bisa menggunakan Menu Icons by ThemeIsle di https://wordpress.org/plugins/menu-icons/. Support beragam type ikon seperti Dashicons (WordPress core icons), Elusive Icons by Aristeides Stathopoulos dan Font Awesome by Dave Gandy. Ditambah Foundation Icons by Zurb, Genericons by Automattic, Fontello icon packs, TI Icons icon pack by ThemeIsle, Image (attachments) dn SVG (attachments)

Metode 2: Menambahkan Ikon Menu Menggunakan Cuplikan Kode

Metode ini adalah cara bagi pengguna yang lebih berpengalaman dan mengetahui bahasa pemograman CSS.

Pertama, silakan mengunjungi Media » Add New untuk mengunggah semua ikon gambar di WordPress. Setelah diunggah, salin URL dan menempelkannya di editor teks seperti Notepad.

Selanjutnya, silakan mengunjungi Appearance » Menus dan klik tombol ‘Screen Options’ di sudut kanan atas layar. Di opsi layar, periksa opsi ‘CSS Classes’ tercentang.

Setelah itu, gulir ke bawah maka akan terlihat bidang ‘CSS Classes (Optional)’ di mana perlu menambahkan nama kelas CSS untuk item menu.

Sekarang tambahan CSS khusus seperti ini ke tema.

.homeicon {
background-image: url('https://www.example.com/wp-content/uploads/2018/09/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

Dalam CSS ini, .homeicon adalah nama kelas yang ditambahkan di bidang Kelas CSS di atas.

Menyesuaikan dengan tema atau template yang digunakan, maka mungkin perlu sedikit mengubah CSS agar mendapatkan penempatan yang sempurna untuk ikon menu. Setelah puas dengan hasilnya, ulangi proses untuk semua item menu.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar.