Bagaimana Cara Menggunakan dan Memanfaatkannya Secara Maksimal?

Ikon sangat menarik!

Mereka memiliki kekuatan untuk berkomunikasi secara cepat dengan penonton dengan membangun koneksi visual yang kuat.

Inilah sebabnya mengapa ikon digunakan secara luas di mana saja, termasuk situs web WordPress.

Selain itu, menggunakan tema yang sama di situs Anda selama beberapa bulan bisa jadi membosankan. Itu umum.

Dan kemudian, Anda akan mencari sesuatu yang lebih menarik, menggunakannya, dan bosan lagi,

Dan siklus itu terus berlanjut…

Jadi, bagaimana Anda bisa melewati siklus kebosanan itu?

Dashicons adalah cara terbaik!

Itu dapat membumbui estetika situs Anda dan membantu Anda menonjol. Ini juga akan menyelamatkan Anda dari upaya ekstra dan memenuhi situs Anda dengan gambar yang tidak perlu yang memperlambat kecepatan halaman.

Jadi, mari jelajahi Dashicons dan bagaimana Anda dapat menggunakannya secara efektif di situs web WordPress Anda.

Apa itu Dashicons WordPress?

Dashicons adalah font ikon resmi WordPress yang diperkenalkan bertahun-tahun lalu dengan versi 3.8. Font ini keren dan mengagumkan untuk dilihat jika Anda menggunakannya di situs web Anda. Itu adalah file SVG berkualitas tinggi yang dapat Anda skalakan dengan mudah ke ukuran apa pun tanpa pikselisasi.

Karena mereka memiliki dukungan WordPress asli karena dibuat oleh tim mereka sendiri, Anda dapat menggunakannya langsung tanpa memuat skrip tambahan. Ada sekitar 350 font ikon yang disertakan, yang dapat Anda temukan di dalam yang resmi Sumber Daya Pengembang WordPress.

  Cara Mengatur Ulang Dock Di macOS

Mereka telah mengkategorikan ikon-ikon ini berdasarkan topik, plus Anda dapat melihat bidang pencarian dinamis yang memungkinkan Anda memfilter ikon yang tersedia.

Anda dapat menggunakan ikon ini di:

  • Dasbor WordPress
  • Menu navigasi
  • Halaman dan posting
  • Metadata
  • Elemen penyunting
  • Plugin dan tema khusus
  • panel Admin
  • Desain ujung depan

Apakah Anda memperhatikan saya mengatakan “ikon” berulang kali?

Di sini, maksud saya hanya ikon font.

Bukan gambar dalam bentuk ikon.

Ya, ada perbedaan antara keduanya.

Mari kita uraikan itu.

Perbedaan antara ikon gambar dan font ikon?

Font ikon dan ikon gambar agak mirip, tetapi alih-alih huruf, simbol vektor ada di font ikon.

Apakah itu terlalu teknis?

Biarkan saya mengklarifikasi itu.

Pada dasarnya, font ikon ini mirip dengan gambar yang dapat Anda gunakan untuk menambahkan simbol di situs web Anda, tetapi bukan gambar sebenarnya.

Mereka memberikan banyak manfaat untuk Anda.

Bagaimana?

Cari tahu di bagian selanjutnya.

Mengapa Anda harus menggunakannya?

  • Dapat diskalakan seperti teks yang digunakan di situs web Anda karena merupakan font
  • Ringan yang tidak memengaruhi kecepatan pemuatan halaman Anda dibandingkan dengan gambar
  • Mampu mengatur warna ikon melalui CSS dan menambahkan properti tambahan seperti warna gradien, bayangan, dll.
  • Hebat dalam menyimpan terlalu banyak permintaan HTTP dengan memungkinkan Anda memuat font sekaligus, yang dapat Anda gunakan di seluruh halaman Anda. Jika Anda menggunakan banyak gambar di situs, Anda harus membuat banyak permintaan untuk mengambilnya, yang meningkatkan waktu pemuatan halaman.
  • Mudah digunakan dan disesuaikan daripada gambar. Anda dapat menambahkan simbol yang dapat dikenali dan kreatif tanpa perlu membuatnya kembali setiap kali Anda memerlukan ikon untuk pemutar video, email, musik, atau hal lainnya.
  • Aksesibilitas lebih besar karena dibuat langsung di WordPress
  5 Tips untuk Membangun PC Pertama Anda

Bagaimana cara menggunakannya?

Menggunakan Dashicons bukanlah rekayasa roket.

Percayalah padaku; Saya akrab dengan keduanya :0

Cukup ikuti beberapa langkah yang disebutkan di bawah ini untuk memulai dengan WordPress Dashicons.

Langkah 1: Aktifkan Dashicons di situs WordPress Anda

Sebelum Anda mulai, aktifkan Dashicons di mana Anda perlu, misalnya, sebuah tema. Untuk ini, Anda perlu menambahkan beberapa kode ke file function.php.

Untuk melakukannya:

  • Pertama, buka Theme/Appearance Editor dari WordPress Dashboard Anda.
  • Buka file function.php.
  • Gulir hingga akhir file dan tambahkan beberapa baris kode untuk membuat skrip enqueue
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Contoh di atas adalah untuk mengaktifkan Dashicons di frontend.

Pastikan Anda membuat tema anak sebelum mengedit file functions.php. Itu karena jika Anda langsung mengedit file tema dan kemudian pembaruan datang untuk tema itu, maka itu akan menimpa semua perubahan yang Anda buat pada file tersebut.

Langkah 2: Temukan kode HTML & CSS Dashicon

WordPress.org menawarkan perpustakaan Dashicons, yang membantu Anda menemukan kode CSS dan HTML milik setiap ikon. Di sini, buka Sumber Daya Pengembang untuk menemukan Dashicons yang ingin Anda gunakan, lalu:

  • Klik pada ikon keinginan Anda.
  • Pilih antara “Salin CSS” atau “Salin HTML” dengan mengkliknya.
  • Sekarang, Anda akan melihat jendela pop-up. Cukup salin kode ke clipboard.
  • Putuskan di mana Anda ingin menggunakan ikon, seperti tema, Metadata, menu navigasi, dll.
  • Rekatkan kode yang disalin ke dalam Widget Teks atau Editor Teks tempat yang dipilih.
  • Ubah tampilan ikon menggunakan CSS khusus

Itu dia.

Selain itu, secara default, semua ikon berukuran 20 piksel. Anda dapat mengubahnya menggunakan elemen CSS dari opsi seperti Elemen Inspeksi Google Chrome atau FireBug Firefox.

  5 Pengaya Kodi Terbaik untuk Kebugaran dan Latihan

Bagaimana cara memaksimalkan Dashicons WordPress?

Anda melihat bagaimana Anda dapat menggunakan Dashicons di situs Anda, dan sekarang kami akan melihat penggunaannya untuk tujuan tertentu.

1. Menggunakan menu navigasi

Untuk menambahkan ikon ke menu, ikuti langkah-langkah di bawah ini:

  • Buka Menu/Tampilan dari dasbor
  • Salin kode HTML yang dirancang untuk ikon menu dari WordPress.org
  • Rekatkan di “Label Navigasi” di dasbor
  • Klik tombol “simpan” dan kemudian muat halaman beranda. Itu harus menampilkan ikon keren dan segar.

2. Menggunakan meta pos

Anda akan dapat menggunakan Dashicons tepat di depan tanggal, nama penulis, tag, atau kategori berdasarkan tema plus data yang ditampilkannya.

Karena Anda telah mengantrikan Dashicons, buka file style.css. Jika tidak, Anda juga dapat menggunakan editor CSS Kustom, yang tidak membuat Anda kehilangan perubahan setelah pembaruan tema. Selanjutnya, tambahkan kode CSS Anda setelah menemukan pemilih yang cocok.

3. Di backend WordPress

Jika Anda ingin menyertakan ikon yang berbeda untuk berbagai judul kiriman khusus, jenis kiriman, atau widget, itu mudah dilakukan.

Tip cepat: Buat kode pendek

Untuk menggunakan Dashicons dengan mudah, Anda dapat membuat kode pendek untuknya. Ini berguna, terutama ketika Anda membuat situs web untuk klien Anda yang akan merasa mudah untuk memasukkan Dashicons tanpa mengotak-atik kodenya.

Kesimpulan

Saya harap semuanya cukup jelas di pihak Anda tentang WordPress Dashicons. Mereka tidak hanya menutupi estetika situs web Anda, tetapi juga mudah digunakan dan meningkatkan kecepatan memuat halaman.

Dan tahukah Anda, ‘kecantikan dan otak’ adalah kombinasi yang langka.

Jadi, cepatlah, gunakan Dashicons yang menarik itu di situs WordPress Anda!