by 2 Metode Menambahkan Ikon ke Menu untuk Navigasi WordPress – Salah satu keuntungan memiliki situs web WordPress adalah Anda bebas menyesuaikannya sesuai kebutuhan. Itu termasuk, namun tidak terbatas pada, meningkatkan tampilan menu navigasi Anda dengan ikon gambar.
2 Metode Menambahkan Ikon ke Menu untuk Navigasi WordPress
phpbbstyles – Menambahkan ikon ke menu navigasi WordPress dapat membuatnya terlihat lebih menarik, mudah diakses, dan mudah dikenali. Ikon menu juga membantu mengomunikasikan struktur menu Anda ke audiens internasional.
Ada dua cara untuk menambahkan ikon ke situs web WordPress Anda, mengkodekannya secara manual atau menggunakan plugin ikon menu. Metode pertama menawarkan fleksibilitas dalam mencapai desain ideal Anda, tetapi membutuhkan pengetahuan CSS. Jika Anda tidak yakin dengan keterampilan pengkodean Anda, sebaiknya gunakan metode kedua.
Baca Juga : Tutorial Membuat Situs Web dengan WordPress
Teruslah membaca untuk memahami bagaimana setiap metode bekerja untuk memilih yang terbaik untuk kebutuhan Anda.
Metode 1. Menambahkan Ikon Menu Menggunakan CSS
Metode ini melibatkan penambahan jenis ikon dari perpustakaan ke situs web WordPress Anda menggunakan CSS khusus . Berbagai jenis ikon tersedia untuk digunakan, artinya Anda tidak perlu mendesainnya dari awal, seperti Dashicons , Elusive Icons , Foundation Icons , dan Font Awesome .
Untuk tutorial ini, kita akan menggunakan pustaka ikon Font Awesome. Berikut cara menambahkan ikon menu WordPress menggunakan CSS:
- Buka beranda Font Awesome dan pilih Mulai Gratis .
- Masukkan email Anda untuk mendapatkan kode Kit gratis, yang memungkinkan Anda mengambil ikon Font Awesome dari perpustakaan mereka. Seperti inilah tampilan kode Kit perpustakaan:
- Sekarang setelah Anda memiliki kode pustaka, langkah selanjutnya adalah mendapatkan kelas CSS dari ikon Font Awesome yang ingin Anda gunakan. Buka halaman pencarian Font Awesome dan simpan yang sesuai dengan kebutuhan Anda. Untuk contoh ini, kami akan menggunakan ikon “ rumah ” untuk beranda kami.
- Akses dashboard admin WordPress Anda dan pergi ke Appearance -> Theme File Editor .
- Buka file header.php dan tambahkan kode Kit di atas baris </head> . Klik Perbarui File .
- Arahkan ke Penampilan -> Menu dan perluas item menu yang ingin Anda sesuaikan. Tambahkan kelas CSS yang Anda peroleh pada langkah ketiga ke kotak teks Label Navigasi dalam bagian Struktur Menu . Pertahankan teks menu saat ini jika Anda ingin menampilkannya di sebelah ikon gambar.
- Ulangi langkah ketiga dan keenam untuk menambahkan lebih banyak ikon ke item menu lainnya, lalu klik tombol Simpan Menu .
Metode 2. Menambahkan Ikon Menu Menggunakan Plugin
Banyak plugin menyederhanakan proses penyesuaian menu navigasi Anda dengan ikon menu yang bagus. Kami merekomendasikan plugin ikon menu berikut:
- Ikon Menu oleh ThemeIsle ‒ plugin gratis yang mendukung berbagai jenis ikon, termasuk Font Awesome, Dashicons, dan SVG.
- Gambar Menu ‒ plugin freemium yang dapat mengubah item menu menjadi tombol ajakan bertindak.
- Ikon Menu WP ‒ plugin gratis lain yang mendukung banyak jenis ikon dan menyediakan berbagai opsi penyesuaian, termasuk posisi dan warna ikon.
Tutorial berikut akan menunjukkan cara menambahkan ikon menggunakan ikon Menu oleh plugin ThemeIsle :
- Instal dan aktifkan plugin WordPress .
- Buka Penampilan -> Menu dan perluas item menu yang ingin Anda sesuaikan. Anda akan melihat item menu baru bernama Ikon: Pilih di bawah kotak teks Label Navigasi .
- Klik Pilih dan pilih ikon Dashicons dari menu popup. Sesuaikan visibilitas, posisi, perataan vertikal, dan ukuran font ikon baru melalui pengaturan ikon menu di sebelah kanan. Setelah selesai, tekan tombol Pilih .
- Ikon baru yang dipilih akan muncul di dalam bagian Struktur Menu . Ulangi proses yang sama untuk item menu lainnya, dan klik Save Menu .
- Berikut adalah contoh menu WordPress dengan ikon default Dashicons yang ditambahkan menggunakan plugin:
Kesimpulan
Menambahkan ikon menu ke situs web WordPress Anda adalah cara terbaik untuk meningkatkan navigasi dan estetika. Modifikasinya relatif mudah, jadi siapapun bisa melakukannya tanpa bantuan ahli WordPress.
Melalui artikel ini, Anda telah mempelajari dua metode tentang cara menambahkan ikon menu ke menu navigasi WordPress:
- Mengkodekannya secara manual – cara ini memberi Anda lebih banyak fleksibilitas tetapi membutuhkan pengetahuan CSS.
- Menggunakan plugin ikon menu – metode yang lebih ramah pemula tetapi ingat bahwa menggunakan terlalu banyak plugin dapat memperlambat situs WordPress Anda.
Metode mana yang Anda sukai? Beri tahu kami di bagian komentar di bawah.
