Cara Menggunakan Dashicons di WordPress

Dashicons adalah kumpulan ikon font inti bawaan di WordPress yang diperkenalkan kembali di WordPress 3.8 ketika mereka melakukan desain ulang UI backend besar-besaran dan secara default digunakan untuk berbagai tautan di bilah admin sebelah kiri. Meskipun ikon-ikon ini dibuat untuk inti, ikon-ikon ini dapat digunakan dalam plugin dan tema khusus Anda sendiri, tidak hanya saat menentukan jenis kiriman khusus atau membuat panel admin khusus tetapi juga pada desain tema front-end jika Anda mau. Yang terbaik dari semuanya, ini sangat mudah!

Menggunakan Dashicons Untuk Jenis Posting Kustom

Saat Anda mendaftarkan jenis posting khusus baru di WordPress, yang harus Anda lakukan adalah mengatur argumen menu_icon sama dengan nama kelas CSS Dashicon yang ingin Anda gunakan dan ikon ini akan didefinisikan sebagai ikon yang ditampilkan di sisi kiri nama jenis posting khusus Anda di panel admin WordPress. Cukup kunjungi halaman landing Dashicons dan klik ikon mana pun yang ingin Anda gunakan dan Anda akan melihat nama kelas di bagian atas di samping ikon sehingga Anda dapat menyalin dan menempelkannya.

Contoh:

// Register a new custom post type named Portfolio
register_post_type( 'portfolio', array(
	'public' => true,
	'menu_icon' => 'dashicons-portfolio',
	'label' => __( 'Portfolio', 'local' ),
);

Tangkapan layar:

Di bawah ini adalah tangkapan layar yang menunjukkan tampilan ikon Dashicon untuk jenis postingan portofolio. Saya tidak tahu apakah Anda ingat, tetapi sebelum Dashicons Anda harus menyetel URL gambar khusus untuk ikon jenis kiriman Anda dan ketika Anda menggunakan banyak plugin di situs sering kali ikon tidak cocok dan admin terlihat sangat buruk. Sekarang ikon jenis posting Anda akan cocok dengan UI WP default dan terlihat bagus.

Menggunakan Dashicons pada Desain Tema Front-End

Banyak tema saat ini yang menggunakan ikon front-end untuk hal-hal seperti meta postingan (tanggal, kategori, tag, penulis) serta ikon header seperti ikon pengguna, pencarian, dan toko. Meskipun ikon font yang paling banyak digunakan dan populer adalah FontAwesome dan berfungsi dengan baik untuk sebagian besar proyek, ini juga merupakan kumpulan ikon yang sangat besar termasuk banyak ikon yang mungkin tidak akan pernah Anda gunakan; Anda dapat menggunakan situs web pembuat font seperti Fontello untuk membuat stylesheet yang hanya berisi ikon-ikon yang Anda perlukan, namun alternatif lain adalah menggunakanDashicons yang sudah disertakan dalam instalasi WordPress Anda, yang harus Anda lakukan hanyalah memuat skrip di bagian depan.

Cukup tambahkan yang berikut ini ke function.php tema Anda untuk memuat Dashicons di front-end (masukkan melalui tema anak jika Anda menyesuaikan tema yang sudah ada dan tidak membuatnya sendiri).

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'dashicons' );
} );

Sekarang Anda dapat menyisipkan ikon melalui HTML seperti:

<span class="dashicons dashicons-menu"></span>

Perubahan sederhana yang bertuliskan "menu" ke ikon yang ingin Anda gunakan. HTML ini dapat ditempel di mana saja dalam tema di mana Anda ingin ikonnya ditampilkan. Anda bahkan dapat memasukkan HTML ke dalam item menu Anda dengan menempelkan HTML langsung ke bidang “label” item menu Anda.

Cara Membuat Kode Pendek Dashicons

Solusi lain untuk menggunakan Dashicons di front-end adalah dengan membuat kode pendek yang dapat Anda gunakan di mana saja di situs. Ini adalah pilihan yang baik jika Anda membuat situs untuk klien dan ingin memudahkan mereka memasukkan ikon ke situs sehingga mereka tidak perlu dipusingkan dengan HTML. Di bawah ini adalah contoh tampilan kode tersebut, cukup tambahkan kode tersebut ke file fungsi.php Anda (atau file non-templat lainnya yang dimuat oleh fungsi.php)

add_shortcode( 'dashicon', function( $atts ) {
	$atts = shortcode_atts( array(
		'icon' => 'menu',
	), $atts, 'bartag' );
	if ( ! empty( $atts[ 'icon' ] ) ) {
		return '<span class="dashicons dashicons-' . esc_attr( $atts[ 'icon' ] ) . '"></span>';
	}
} );

Penggunaan kode pendek:

[dashicon icon="chart-pie"]

Catatan: Kode pendek di atas mengasumsikan Anda telah mengikuti langkah sebelumnya dan memuat lembar gaya Dashicons di front-end Anda. Jika Anda belum melakukannya, Anda cukup menambahkan fungsi “wp_enqueue_style” dari cuplikan di atas langsung ke kode pendek dan stylesheet hanya akan dimuat saat ikon digunakan. Namun, disarankan untuk memuat skrip secara global jika tidak, stylesheet tanda hubung akan dimuat di footer situs Anda sehingga ikon akan ditampilkan setelah situs Anda dirender dan akan menyebabkan sedikit "flash".