Kamu sedang merapikan halaman layanan dan ingin ada ikon kecil di setiap kartu, tapi enggan memasang plugin tambahan yang menambah beban situs. WordPress sudah menyediakan beberapa jalur untuk menaruh ikon, dan semuanya bisa dikerjakan lewat kode tema atau blok editor. Artikel ini membahas cara menyisipkan ikon di WordPress tanpa plugin, mulai dari SVG inline sampai pilihan font icon, lengkap dengan konsekuensi masing-masing.
Kenapa Ikon SVG Inline Jadi Pilihan Pertama
SVG adalah format gambar berbasis vektor, artinya tetap tajam di layar beresolusi berapa pun. Kalau kamu menempelkan kode SVG langsung di dalam HTML, browser tidak perlu mengunduh file terpisah. Halaman jadi lebih ringan karena satu permintaan HTTP berkurang untuk setiap ikon.
Contoh paling sederhana, ikon panah di dalam tombol:
<button class="tombol-lanjut">
Lanjut
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="M6 3l5 5-5 5" fill="none" stroke="currentColor" stroke-width="2"/>
</svg>
</button>Perhatikan atribut aria-hidden="true". Ikon yang hanya berfungsi sebagai hiasan tidak perlu dibacakan pembaca layar, karena teks tombolnya sudah menjelaskan aksi. Kalau ikon berdiri sendiri tanpa teks, ganti dengan role="img" dan tambahkan <title> di dalam SVG.
Atribut stroke="currentColor" membuat warna garis mengikuti color elemen induk. Jadi kamu cukup mengubah warna teks di CSS, ikon ikut berubah tanpa perlu menyentuh kode SVG-nya lagi.
Menyimpan SVG sebagai File di Tema
Untuk ikon yang dipakai berulang, misalnya logo jaringan sosial di footer, menempel inline di setiap halaman membuat kode template berantakan. Simpan file .svg di folder tema, misalnya assets/icons/, lalu panggil lewat fungsi PHP tema:
function tampilkan_ikon($nama) {
$path = get_template_directory() . '/assets/icons/' . $nama . '.svg';
if (file_exists($path)) {
echo file_get_contents($path);
}
}Fungsi ini membaca isi file dan mencetaknya sebagai HTML, sehingga hasil akhirnya tetap SVG inline dan bisa diwarnai lewat CSS. Pastikan nama file yang dikirim ke fungsi berasal dari daftar tetap, bukan input pengguna, supaya tidak bisa dipakai membaca file lain di server.
Memakai Dashicon Bawaan WordPress
WordPress menyertakan set ikon bernama Dashicons yang dipakai di panel admin. Set yang sama bisa kamu pakai di sisi depan situs. Caranya, antrekan stylesheet dashicons lewat functions.php:
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style('dashicons');
});Setelah itu, panggil ikon dengan class yang sesuai di dalam elemen span:
<span class="dashicons dashicons-email-alt"></span>Dashicon cocok kalau kamu butuh ikon umum seperti telepon, amplop, atau lokasi. Kekurangannya, gaya visualnya mengikuti desain panel admin dan jumlah pilihannya terbatas. Untuk tampilan yang lebih khas, SVG tetap lebih fleksibel.
Kalau ikon ini dipakai di dalam blok HTML kustom pada editor, stylesheet dashicons juga perlu termuat di halaman tersebut. Cara paling aman adalah mengantrekannya secara global seperti contoh di atas.
Font Icon: Pilihan Lama yang Masih Layak Dipertimbangkan
Sebelum SVG populer, font icon seperti Font Awesome jadi cara standar menaruh ikon. Prinsipnya, setiap ikon adalah karakter dalam sebuah font, dipanggil lewat class CSS. Keuntungannya, kamu bisa mengubah ukuran dan warna dengan properti font-size dan color seperti teks biasa.
Masalahnya, satu file font bisa berukuran ratusan kilobyte meskipun kamu hanya memakai lima ikon. Browser juga harus menunggu font selesai diunduh sebelum ikon muncul, dan kadang ada kedipan kotak kosong sesaat. Kalau kamu tetap ingin memakainya, pilih versi yang memungkinkan subset ikon saja.
Untuk situs yang ikonnya sedikit, SVG inline hampir selalu lebih hemat. Font icon baru masuk akal kalau kamu memang membutuhkan puluhan ikon berbeda di banyak halaman.
Menaruh Ikon di Blok Editor Tanpa Plugin
Blok HTML kustom di editor Gutenberg menerima kode SVG apa adanya. Kamu bisa menyalin kode SVG dari pustaka ikon, tempel ke blok tersebut, lalu simpan. Cara ini praktis untuk halaman statis seperti halaman tentang atau halaman kontak yang tidak sering diubah.
Kalau ikon akan dipakai di banyak halaman, menaruhnya di blok HTML berarti kode yang sama tersebar di beberapa tempat. Saat ingin mengganti warna atau ukuran, kamu harus menyunting satu per satu. Untuk kasus seperti itu, pindahkan SVG ke fungsi tema dan panggil lewat shortcode sederhana, sehingga perubahan cukup dilakukan di satu file.
Pola serupa juga berguna saat kamu menampilkan data dari jenis konten kustom, misalnya ikon berbeda untuk setiap kategori layanan. Logika pemilihan ikon bisa disimpan di template, bukan di basis data. Kalau belum familier dengan jenis konten kustom, ada panduan menampilkan data custom post type yang membahas alur templatenya.
Hal yang Sering Terlewat Saat Menambah Ikon
- Ukuran dan viewBox. SVG tanpa
viewBoxtidak akan menyesuaikan ukuran dengan rapi saat lebar diubah lewat CSS. - Kontras warna. Ikon tipis dengan warna pucat sering hilang di latar terang. Uji di layar kecil dan mode gelap.
- Aksesibilitas. Ikon dekoratif diberi
aria-hidden, ikon bermakna diberi label teks. - Lisensi. Pustaka ikon gratis punya aturan atribusi berbeda. Baca syaratnya sebelum dipakai di situs klien.
- Cache. Setelah mengubah file SVG di tema, kosongkan cache situs dan cache browser agar perubahan terlihat.
Untuk pengaturan URL dan struktur halaman yang memuat ikon-ikon ini, rapikan permalink lebih dulu supaya tautan antar halaman tetap konsisten saat templatenya diubah.
Kalau proyekmu juga menyentuh aplikasi mobile, pemilihan format tanggal dan angka di Swift punya tantangan tersendiri yang dibahas di panduan memilih format tanggal dan angka di Swift. Untuk tim yang mengelola proyek WordPress berdampingan dengan aplikasi Java, ada catatan tentang tips memilih alat build Java untuk proyek baru yang bisa jadi bahan pertimbangan.
Ringkasan
SVG inline adalah cara paling ringan untuk menaruh ikon di WordPress karena tidak menambah permintaan file dan bisa diwarnai lewat CSS. Dashicon berguna untuk ikon umum dengan usaha minimal, sedangkan font icon sebaiknya dipakai hanya kalau kebutuhan ikonnya banyak. Simpan SVG yang dipakai berulang di folder tema dan panggil lewat fungsi PHP agar kode template tetap rapi.
Pertanyaan yang Sering Diajukan
Apakah SVG aman disisipkan langsung di WordPress?
Aman selama kodenya berasal dari sumber tepercaya. SVG bisa memuat skrip, jadi jangan mengunggah file SVG dari sumber tidak dikenal lewat pustaka media. Tempel kode yang sudah diperiksa ke blok HTML atau simpan di folder tema.
Kenapa ikon SVG saya tidak muncul setelah ditempel?
Periksa apakah kode terbungkus tag <svg> lengkap dengan atribut xmlns. Kalau ditempel di editor, pastikan tidak ada karakter yang diubah menjadi entitas HTML oleh editor visual. Cek juga aturan CSS tema yang mungkin menyembunyikan elemen svg.
Bisakah ikon diubah warnanya saat pengunjung mengganti mode gelap?
Bisa. Gunakan currentColor pada properti fill atau stroke, lalu atur warna teks induknya lewat media query prefers-color-scheme. Ikon akan mengikuti warna teks tanpa perlu file terpisah.
