Bu hammada sodir bo'ladi.

Siz o'zingizga yoqqan mavzuni topasiz, uni o'rnatasiz va bir necha oyni saytingiz ko'rinishidan zavqlanishga sarflaysiz. Ammo keyin, bir necha oydan so'ng, mavzu eskirganini his qila boshlaydi. Biroz zerikarli.

Birgina muammo shundaki, siz yangi narsalarni izlashga bir necha soat sarflashni xohlamaysiz. Mavzuga ozgina ziravor qo'shishning bir yo'li bo'lsa, uni alohida ko'rsatish uchun biroz chaqnash mumkin bo'lsa.

Umumsizlikda qo'lingizni yuqoriga ko'tarishdan oldin, sizga ziravorlaringizni ziravor qilishning oson yo'lini ko'rsataman. mavzuni juda ko'p harakat qilmasdan va saytingizni sekinlashtiradigan keraksiz rasmlarni qo'shmasdan.

Dashicons kiriting. Dashicons - bu WordPress 3.8 da kiritilgan shrift piktogrammalari. Bular asboblar paneliga kirganingizda ko'radigan ajoyib va ​​ajoyib piktogrammalar. Agar siz ularni ham mavzuingizga qo'shsangiz yaxshi bo'lmaydimi?

Xo'sh, siz buni qila olasiz va men sizga buni qanday qilib ko'rsataman.

Dashicon'lardan qanday foydalanish mumkin. navigatsiya menyusi?

Oddiy misoldan boshlaylik. Dashicons 3.8 versiyasidan boshlab WordPress-ga allaqachon kiritilgan, ammo ularni saytingizning old qismida to'g'ri ko'rsatish uchun siz hali ham qo'shishingiz kerak; ya'ni sizning mavzuingiz.

1-qadam: Dashicons mavzusini tayyorlang

Mavzuni Dashicons tayyor qilish uchun avvalo functions.php faylini oching (Appearance&gt-da topilgan). ;Muharrir – sukut boʻyicha u joriy mavzuingizning CSS faylini ochadi.Davom eting va qidiringfunctions.php faylini oching va uni muharrirga yuklash uchun ustiga bosing.)

2-qadam: Skriptni navbatga qoʻying

Toʻliq pastga aylantiring va ushbu qatorlarni joylashtiring. oxiridagi kod:

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

Yaxshi! Endi sizning mavzuingiz Dashicon'lardan foydalanishga tayyor.

3-qadam: Menyu bandlariga Dashicon qo'shish

Keling, Bosh sahifa havolasi uchun Dashicon qo'shamiz. Dashicons veb-saytiga o'ting va o'zingizga yoqqan belgini tanlang.

Yangilanish: Dashicons dastlab GitHub.io'da mavjud edi, ammo keyin ular WordPress.org saytida mavjud bo'ldi.

4-qadam:

Istalgan belgini bosing (bu holda men uy belgisini tanladim) va keyin HTML-ni nusxalash tugmasini bosing. U sizga kerakli kod bilan qalqib chiquvchi oynani beradi.

5-qadam:

WordPress boshqaruv paneliga qayting, Tashqi ko'rinish > tugmasini bosing ; Menyular va kodni navigatsiya yorlig‘i yozilgan joyga to‘g‘ridan-to‘g‘ri qo‘ying.

Agar siz hali ham so‘z ko‘rsatilishini istasangiz, uni yopilish div qavsdan keyin kiriting.

Buni bosing. saqlang va bosh sahifangizni yuklang. Endi sizning uy havolangizda chiroyli va aniq Dashicon ko‘rinishi kerak.

Buni barcha navigatsiya menyusi elementlari uchun yoki faqat uy uchun qilishingiz mumkin. Yuqoridagi amallarni mos keladigan belgilar bilan takrorlang. Bu oson bo'ldi, to'g'rimi?

Siz qanday qilib post metada Dashicon-dan foydalanasiz?

Siz bir qadam oldinga borib, post metangizga Dashicon-larni qo'shishingiz yoki boshqacha qilib aytganda muallifning oldiga Dashicon-larni qo'shishingiz mumkin. ism, sana, toifa yoki teg; bog'liq holdamavzuingiz va unda ko'rsatiladigan ma'lumotlar.

Mavzuingizda Dashicons-ni allaqachon navbatga qo'yganingiz uchun, endi qilishingiz kerak bo'lgan narsa style.css faylingizni ochish (yoki har doim yaxshiroq variant bo'lgan Custom CSS muharriridan foydalanish). Mavzu yangilangandan so'ng o'zgarishlarni yo'qotmang!), mos keladigan selektorni toping va CSS kodini qo'shing.

Deylik, ismingiz yoki muallif ismingiz oldiga belgi qo'shmoqchisiz.

1-qadam:

Avval o'zimizga kerakli belgini tanlaymiz.

2-qadam:

Keyin ustiga bosing va bu safar CSS-ni nusxalash-ni tanlang. Yana, u sizga joylashtirishingiz kerak bo'lgan kod bilan qalqib chiquvchi oynani beradi.

3-qadam:

Endi style.css-ni oching. va tegishli selektorni toping, bu holda – .entry-author. Dashicons veb-saytidan ko'chirilgan CSS kodini :oldin qo'shish va keyin qo'yish orqali muallifning ismi uning oldida chiroyli belgiga ega bo'ladi. Bundan tashqari, Dashicons shriftidan foydalanayotganingizni ko'rsatishingiz kerak. O'zgartirilgan kod quyidagicha ko'rinadi:

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

Keling, biroz uslub qo'shamiz va endi tugallangan kod quyidagicha ko'rinadi:

.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; } 

Yakuniy natija

Xo'sh, nima bo'ladi? Bu oxir-oqibat shunday bo'ladimi?

Shunday narsa:

Dashicons-dan foydalanishingiz mumkin bo'lgan juda ko'p usullar mavjud - ijodingizni qo'lga kiriting va nima qila olishingizni ko'ring.

Hammasini bir joyga jamlash

Yuqoridagi misollardan tashqari, siz o'zingizning orqa tomoningizdagi Dashicon-dan turli xil narsalarni belgilashingiz mumkin.turli post turlari uchun piktogramma yoki siz ularni post sarlavhalarida, vidjet sarlavhalarida ishlatishingiz mumkin yoki agar siz maxsus ochilish sahifasini yaratayotgan bo'lsangiz, saytingizning turli sahifalarini farqlashingiz mumkin.

Bu erda nimaga asosiy misol. ularni yaratish uchun foydalanishingiz mumkin: