Cara Menambahkan Ikon Gambar di Menu Navigasi WordPress

Apakah kamu ingin menambahkan ikon di menu navigasi WordPress? Jika iya, kamu berada di halaman yang tepat. Karena pada artikel ini, saya akan menunjukkan cara menambahkan ikon di menu navigasi WordPress secara terperinci.

Tetapi sebelum kita mulai panduannya kamu perlu tahu terlebih dahulu alasan harus melakukan hal tersebut.

Daftar Isi

Alasan Kamu Harus Menambahkan Ikon Gambar di Menu WordPress

Menu navigasi adalah tampilan di bagian header situs yang muncul dengan teks biasa. Terkadang untuk sebagian orang tampilan menu yang hanya berupa teks sangat membosankan, maka dari itu mereka mencoba menambahkan ikon di bagian awal teks untuk membuat kesan yang lebih menarik.

Menambahkan Ikon Gambar di Menu WordPress

Untuk dapat menambahkan ikon di menu situs WordPress, ada dua cara yang dapat di lakukan yaitu menggunakan bantuan plugin dan tanpa plugin. Saya akan membahas panduan mulai dari yang paling mudah.

Metode 1: Menambahkan Ikon di Menu WordPress Dengan Plugin

Cara ini lebih mudah dan cukup direkomendasikan untuk pemula yang baru pertama kali menggunakan WordPress karena tidak melibatkan kode yang rumit.

Pertama yang harus kamu lakukan untuk menambahkan ikon ke menu adalah menginstal dan mengaktifkan plugin Menu Image. Untuk lebih detailnya kamu dapat melihat panduan kami tentang cara memasang plugin di WordPress.

Setelah plugin di aktivasi, buka Appearance > Menus dari panel sebelah kiri area admin WordPress.

Kemudian pada item menu di kolom sebelah kanan, kamu klik Menu Image yang muncul ketika kamu mengarahkan cursor ke item. Setelah itu akan ada popup yang menampilkan pengaturan gambar.

Seperti yang terlihat pada gambar di atas, kamu bisa memilih apakah ingin menggunakan gambar atau icon. Jika kamu memilih Image, kamu harus menyiapkan gambar yang akan di gunakan dengan cara mengklik Set image dan menguploadnya. Pada bagian Set Image on hover kamu bisa mengabaikannya.

Ketika memilih menggunakan gambar, kamu harus menentukan ukuran ikon gambar dengan mengklik menu dropdown di bagian Image size.

Plugin ini memberikan beberapa opsi untuk dipilih. Namun kami menyarankan untuk membuat ukuran ikon tetap kecil yaitu dengan menggunakan ukuran 24×24 atau 36×36.

Tidak hanya menggunakan menu yang tersedia. Kamu juga dapat menambahkan ukuran custom sendiri untuk gambar menu, kamu dapat melakukannya dengan menambahkan kode berikut ini ke dalam file functions.php tema WordPress.

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;

});

Perhatikan pada baris $sizes[‘menu-50×50’] = array(50,50); ubah angka 50 dengan ukuran yang ingin kamu gunakan.

Jika memilih untuk menggunakan Icon dari pada gambar, ini sangat mudah karena kamu hanya perlu memilih ikon yang tersedia. Tetapi untuk dapat melihat lebih banyak ikon kamu bisa menginstal plugin Fontawesome resmi.

Setelah itu kamu dapat mengatur posisi teks di atas, di bawah, sebelum, atau setelah ikon gambar. Ini juga memungkinkan untuk menyembunyikan teks dan hanya menampilkan ikon gambar di menu navigasi.

Setelah mengkonfigurasi di semua item menu navigasi. Selanjutnya klik Save Menu dan lihat pada situs kamu apakah ikon gambar sudah muncul.

Metode 2: Menambahkan Ikon di Menu WordPress Tanpa Plugin

Jika kamu sudah terbiasa dengan menggunakan kode seperti CSS, cara ini sangat dianjurkan karena jika menggunakan terlalu banyak plugin akan membuat beban pada server yang berefek pada SEO website.

Pertama yang harus di lakukan adalah membuka menu Media > Add New untuk menggunggah semua ikon gambar yang akan kamu gunakan. Setelah berhasil diunggah, salin URL dari masing-masing gambar dan taruh di teks editor notepad untuk sementara.

Kemudian, kamu pergi ke Appearance > Menus dan klik Screen Options yang berada di sudut kanan atas. Dan beri tanda centang pada CSS Classes.

Setelah itu, scroll dan klik tanda panah ke bawah pada item menu yang akan kemu beri icon gambar. Disini akan ada kolom baru yang bertuliskan “CSS Classes (optional)”, tambahkan nama class CSS untuk item menu tersebut.

Jangan lupa untuk memberi class CSS pada semua item yang akan di beri ikon gambar. Klik Save Menu untuk menyimpan perubahan.

Sekarang kamu harus memasukkan kode CSS berikut ini ke tema yang kamu gunakan atau menaruhnya melalui menu Appearance > Customizer dan pilih Additional CSS.

.homeicon {

background-image: url('http://www.domain.com/wp-content/uploads/2021/10/home.png');

background-repeat: no-repeat;

background-position: left;

padding-left: 5px;

}

Pada cuplikan kode CSS di atas, .homeicon adalah nama class yang barusan saya tambahkan pada item menu. Jika punya kamu berbeda maka sesuaikan class CSS tersebut. Lakukan hal yang sama pada semua item yang ingin kamu beri ikon gambar.

Dan jangan lupa untuk mengganti URL dengan tautan yang sudah kamu simpan sebelumnya pada teks editor notepad.

Itu saja. Kami harap artikel ini membantu kamu mempelajari cara menambahkan ikon gambar di menu navigasi WordPress. Kamu mungkin juga ingin melihat panduan kami lainnya tentang cara membuat menu dropdown di WordPress.

Semoga panduan di atas bermanfaat. Jika kamu memiliki pertanyaan tinggalkan pada kolom komentar di bawah.