Hal ini terjadi pada semua orang.

Anda menemukan tema yang Anda sukai, Anda menginstalnya dan menghabiskan beberapa bulan menikmati tampilan situs Anda. Tetapi kemudian, setelah beberapa bulan, tema tersebut mulai terasa basi, agak membosankan.

Satu-satunya masalah adalah, Anda tidak ingin menghabiskan waktu beberapa jam untuk mencari sesuatu yang baru. Seandainya saja ada cara untuk menambahkan sedikit bumbu pada tema Anda, sedikit sentuhan untuk membuatnya menonjol.

Sebelum Anda menyerah dan putus asa, izinkan saya menunjukkan kepada Anda cara mudah untuk membumbui tema Anda tanpa terlalu banyak usaha, dan tanpa menambahkan gambar-gambar yang tidak perlu yang dapat memperlambat situs Anda.

Dashicons adalah ikon font yang diperkenalkan pada WordPress 3.8. Dashicons adalah ikon keren dan mengagumkan yang Anda lihat ketika Anda masuk ke dasbor. Bukankah lebih keren lagi jika Anda dapat menambahkannya pada tema Anda juga?

Ya, Anda bisa dan saya akan menunjukkan caranya.

Bagaimana cara menggunakan Dashicon di menu navigasi Anda?

Dashboard sudah disertakan dalam WordPress sejak versi 3.8 tetapi Anda masih perlu menyertakannya agar dapat ditampilkan dengan baik di bagian depan situs Anda; yaitu tema Anda.

Langkah 1: Siapkan dasbor tema Anda

Untuk menyiapkan dasbor tema Anda, pertama-tama buka file functions.php Anda (ditemukan di Appearance>Editor - secara default, ini akan membuka file CSS tema Anda saat ini. Silakan cari file functions.php dan klik untuk memuatnya di Editor).

Langkah 2: Mengatur urutan skrip

Gulir hingga ke bagian bawah dan tempelkan baris kode ini di bagian akhir:

 //Mengantre skrip Dashicons add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } 

Baiklah, sekarang tema Anda sudah siap untuk digunakan Dashicons.

Langkah 3: Menambahkan Dasbor ke item menu

Mari tambahkan Dashicon untuk tautan Beranda Anda. Kunjungi situs web Dashicons dan pilih ikon yang Anda sukai.

Pembaruan: Dashicon awalnya tersedia di GitHub.io, tetapi sekarang sudah tersedia di WordPress.org.

Langkah 4:

Klik pada ikon yang diinginkan (dalam hal ini saya memilih ikon beranda) dan kemudian klik pada Salin HTML. Ini akan memberi Anda jendela pop-up dengan kode yang Anda butuhkan.

Langkah 5:

Kembali ke dasbor WordPress Anda, klik Appearance> Menus dan tempelkan kode tepat di bagian yang bertuliskan Navigation Label.

Jika Anda masih ingin kata tersebut muncul, ketik kata tersebut setelah tanda kurung div penutup.

Klik simpan dan muat halaman beranda Anda. Tautan beranda Anda sekarang akan menampilkan Dashicon yang bagus dan tajam.

Anda dapat melakukan ini untuk semua item menu navigasi atau hanya untuk home. Ulangi langkah di atas dengan ikon yang cocok. Mudah bukan?

Bagaimana cara menggunakan Dashicon di post meta?

Anda bisa melangkah lebih jauh dan menambahkan Dashicon ke meta postingan Anda, atau dengan kata lain menambahkan Dashicon di depan nama penulis, tanggal, kategori, atau tag; tergantung tema Anda dan informasi yang ditampilkannya.

Karena Anda sudah meng-enqueue Dashicons di tema Anda, yang harus Anda lakukan sekarang adalah membuka file style.css Anda (atau menggunakan editor CSS kustom yang selalu merupakan pilihan yang lebih baik sehingga Anda tidak kehilangan perubahan setelah tema Anda diperbarui!), temukan pemilih yang cocok dan tambahkan kode CSS.

Katakanlah Anda ingin menambahkan ikon di depan nama Anda atau nama penulis Anda.

Langkah 1:

Pertama, kita akan memilih ikon yang kita sukai.

Langkah 2:

Kemudian klik di atasnya, dan kali ini pilih Copy CSS. Sekali lagi, ini akan memberi Anda jendela pop-up dengan kode yang perlu Anda tempel.

Langkah 3:

Sekarang buka style.css Anda dan temukan selektor yang sesuai, dalam hal ini - .entry-author. Dengan menambahkan :sebelum dan kemudian menempelkan kode CSS yang Anda salin dari situs web Dashicons, nama penulis akan memiliki ikon yang bagus di depannya. Anda juga harus menentukan bahwa Anda menggunakan font Dashicons. Kode yang telah dimodifikasi terlihat seperti ini:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; } 

Mari kita tambahkan sedikit gaya juga, dan sekarang kode yang sudah selesai terlihat seperti ini:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

Hasil akhir

Jadi, seperti apa hasilnya nanti?

Sesuatu seperti ini:

Ada begitu banyak cara untuk menggunakan Dashicons - biarkan kreativitas Anda mengambil alih dan lihat apa yang dapat Anda lakukan.

Menyatukan semuanya

Selain dari contoh di atas, Anda dapat menggunakan Dashicon di backend Anda untuk menentukan ikon yang berbeda untuk jenis postingan yang berbeda, atau Anda dapat menggunakannya di judul postingan, judul widget, atau jika Anda membuat laman landas khusus, Anda dapat membedakannya di antara berbagai laman di situs Anda.

Berikut ini contoh dasar tentang apa yang bisa Anda gunakan untuk membuatnya: