Ia berlaku kepada semua orang.

Anda menemui tema yang anda suka, anda memasangnya dan menghabiskan beberapa bulan menikmati rupa tapak anda. Tetapi kemudian, selepas beberapa bulan, tema mula berasa basi. Agak membosankan.

Satu-satunya masalah ialah, anda tidak mahu menghabiskan beberapa jam mencari sesuatu yang baharu. Sekiranya ada cara untuk menambah sedikit rempah pada tema anda, sedikit suar untuk menyerlahkannya.

Sebelum anda mengangkat tangan anda dalam keputusasaan, izinkan saya menunjukkan kepada anda cara mudah untuk menyedapkan hati anda. tema tanpa terlalu banyak usaha dan tanpa menambah imej yang tidak perlu yang boleh melambatkan tapak anda.

Masukkan Dashicons. Dashicon ialah ikon fon yang diperkenalkan dalam WordPress 3.8. Ia adalah ikon hebat dan hebat yang anda lihat apabila anda log masuk ke papan pemuka anda. Bukankah bagus jika anda boleh menambahkannya pada tema anda juga?

Nah, anda boleh dan saya akan menunjukkan kepada anda caranya.

Bagaimanakah anda boleh menggunakan Dashicon dalam anda menu navigasi?

Mari kita mulakan dengan contoh mudah. Dashikon sudah disertakan dalam WordPress sejak versi 3.8 tetapi anda masih perlu memasukkannya untuk membolehkannya dipaparkan dengan betul di hujung hadapan tapak anda; iaitu tema anda.

Langkah 1: Sediakan tema anda sebagai Dashicon

Untuk menyediakan tema anda Dashicons, mula-mula buka fail functions.php anda (ditemui dalam Appearance> ;Editor – secara lalai ia akan membuka fail CSS tema semasa anda. Teruskan dan carifunctions.php dan klik padanya untuk memuatkannya dalam Editor.)

Langkah 2: Enqueque skrip

Tatal sehingga ke bawah dan tampal baris ini kod pada penghujung:

//Enqueue the Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); }

Baiklah! Kini tema anda sedia untuk menggunakan Dashicons.

Langkah 3: Menambah Dashicons pada item menu

Mari tambah Dashicon untuk pautan Laman Utama anda. Pergi ke tapak web Dashicons dan pilih ikon yang anda suka.

Kemas kini: Dashicons pada asalnya tersedia di GitHub.io, tetapi sejak itu ia telah tersedia di WordPress.org.

Langkah 4:

Klik pada ikon yang diingini (dalam kes ini saya memilih ikon rumah) dan kemudian klik pada Salin HTML. Ia akan memberi anda tetingkap pop timbul dengan kod yang anda perlukan.

Langkah 5:

Kembali ke papan pemuka WordPress anda, klik pada Rupa > ; Menu dan tampal kod betul-betul di tempat yang tertera Label Navigasi.

Jika anda masih mahu perkataan itu dipaparkan, taipkannya selepas kurungan div penutup.

Klik pada simpan dan muatkan halaman utama anda. Pautan rumah anda kini sepatutnya memaparkan Dashicon yang bagus dan segar.

Anda boleh melakukan ini untuk semua item menu navigasi atau hanya untuk rumah. Cuma ulangi langkah di atas dengan ikon yang sepadan. Itu mudah kan?

Bagaimanakah anda menggunakan Dashicons dalam meta post?

Anda boleh melangkah lebih jauh dan menambahkan Dashicons pada meta post anda, atau dengan kata lain menambah Dashicons di hadapan pengarang nama, tarikh, kategori atau tag; bergantung kepadatema anda dan maklumat yang dipaparkan.

Memandangkan anda sudah memasukkan Dashicon dalam tema anda, apa yang anda perlu lakukan sekarang ialah membuka fail style.css anda (atau gunakan editor CSS Tersuai yang sentiasa menjadi pilihan yang lebih baik supaya anda jangan kehilangan perubahan sebaik sahaja tema anda dikemas kini!), cari pemilih yang sepadan dan tambahkan kod CSS.

Katakanlah anda mahu menambah ikon di hadapan nama anda atau nama pengarang anda.

Langkah 1:

Mula-mula kita akan memilih ikon yang kita mahu.

Langkah 2:

Kemudian klik padanya, dan kali ini pilih Salin CSS. Sekali lagi, ia akan memberi anda tetingkap timbul dengan kod yang anda perlu tampalkan.

Langkah 3:

Sekarang buka gaya anda.css dan cari pemilih yang sepadan, dalam kes ini – .entry-author. Dengan menambahkan :before dan kemudian menampal kod CSS yang anda salin daripada tapak web Dashicons, nama pengarang akan mempunyai ikon yang bagus di hadapannya. Anda juga perlu menyatakan bahawa anda menggunakan fon Dashicons. Kod yang diubah suai kelihatan seperti ini:

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

Mari kita tambahkan sedikit penggayaan juga, dan kini kod yang telah lengkap kelihatan 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 apa adakah ini akan kelihatan seperti pada akhirnya?

Sesuatu seperti ini:

Terdapat banyak cara anda boleh menggunakan Dashicon – biarkan kreativiti anda menguasai dan melihat perkara yang boleh anda lakukan.

Menyatukan semuanya

Selain daripada contoh di atas, anda boleh menggunakan Dashicons di bahagian belakang anda untuk menentukan berbezaikon untuk jenis siaran yang berbeza, atau anda boleh menggunakannya dalam tajuk siaran anda, tajuk widget atau jika anda membuat halaman pendaratan tersuai, anda boleh membezakan antara halaman yang berbeza di tapak anda.

Berikut ialah contoh asas tentang perkara anda boleh menggunakannya untuk mencipta: