Bu, hər kəsin başına gəlir.

Bəyəndiyiniz mövzunu tapırsınız, onu quraşdırırsınız və bir neçə ay ərzində saytınızın görünüşündən həzz alırsınız. Ancaq sonra, bir neçə aydan sonra mövzu köhnəlməyə başlayır. Bir az darıxdırıcıdır.

Yeganə problem odur ki, yeni bir şey axtarmaq üçün bir neçə saat sərf etmək istəmirsiniz. Mövzunuza bir az ədviyyat əlavə etmək, onu diqqətə çatdırmaq üçün bir az məşəl əlavə etmək üçün bir yol olsaydı.

Ümidsizliyə qapılmamışdan əvvəl icazə verin sizə əhvalınızı gözəlləşdirməyin asan yolunu göstərim. çox səy göstərmədən və saytınızı yavaşlada biləcək lazımsız şəkillər əlavə etmədən mövzu.

Dashicons daxil edin. Dashiconlar WordPress 3.8-də təqdim edilmiş şrift nişanlarıdır. Onlar tablonuza daxil olanda gördüyünüz zəhmli və gözəl nişanlardır. Onları da mövzunuza əlavə etsəniz, gözəl olmazdımı?

Yaxşı, siz edə bilərsiniz və mən sizə necə göstərəcəyəm.

Dashicon-ları öz işinizdə necə istifadə edə bilərsiniz. naviqasiya menyusu?

Sadə bir nümunə ilə başlayaq. Dashicons artıq 3.8 versiyasından bəri WordPress-ə daxil edilmişdir, lakin siz onları saytınızın ön hissəsində düzgün şəkildə göstərə bilmək üçün hələ də daxil etməlisiniz; yəni temanızdır.

Addım 1: Temanızı Dashicons hazırlayın

Mövzunuzu Dashicons hazır etmək üçün əvvəlcə functions.php faylınızı açın (Görünüş&gt-də tapılıb) ;Redaktor – standart olaraq o, cari temanızın CSS faylını açacaq.Davam edin və axtarınfunctions.php faylını açın və onu Redaktorda yükləmək üçün üzərinə klikləyin.)

Addım 2: Skripti sıralayın

Tamamilə aşağıya doğru sürüşdürün və bu sətirləri yapışdırın. sonunda kod:

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

Yaxşı! İndi mövzunuz Dashicons istifadə etməyə hazırdır.

Addım 3: Dashiconları menyu elementlərinə əlavə edin

Gəlin Ana səhifə linkiniz üçün Dashicon əlavə edək. Dashicons veb-saytına keçin və bəyəndiyiniz simvolu seçin.

Yeniləmə: Dashicons əvvəlcə GitHub.io-da mövcud idi, lakin o vaxtdan onlar WordPress.org-da əlçatan oldu.

Addım 4:

İstədiyiniz işarəyə klikləyin (bu halda mən ev ikonasını seçdim) və sonra HTML-ni Kopyala üzərinə klikləyin. O, sizə lazım olan kodun olduğu pop-up pəncərəsini verəcək.

Addım 5:

WordPress panelinizə qayıdın, Görünüş > üzərinə klikləyin ; Menyuları açın və kodu birbaşa Naviqasiya Etiketi yazılan yerə yapışdırın.

Sözün hələ də görünməsini istəyirsinizsə, onu bağlayan div mötərizəsindən sonra yazın.

Buraya klikləyin. saxla və ana səhifəni yüklə. Ev linkiniz indi gözəl, aydın Dashicon göstərməlidir.

Bunu bütün naviqasiya menyu elementləri üçün və ya sadəcə ev üçün edə bilərsiniz. Sadəcə yuxarıdakı addımları uyğun nişanlarla təkrarlayın. Bu asan idi?

Siz post meta-da Dashicon-dan necə istifadə edirsiniz?

Siz bir qədər irəli gedə və post metanıza Dashicon-ları əlavə edə və ya başqa sözlə müəllifin qarşısında Dashicon-ları əlavə edə bilərsiniz. ad, tarix, kateqoriya və ya etiket; asılı olaraqtemanız və onun göstərdiyi məlumat.

Mövzunuzda Dashicons-u artıq növbəyə qoyduğunuz üçün indi etməli olduğunuz şey style.css faylınızı açmaqdır (yaxud hər zaman daha yaxşı seçim olan Xüsusi CSS redaktorundan istifadə edin. temanız yeniləndikdən sonra dəyişiklikləri itirməyin!), uyğun seçicini tapın və CSS kodunu əlavə edin.

Tutaq ki, adınızın və ya müəllifinizin adının qarşısında ikona əlavə etmək istəyirsiniz.

Addım 1:

Əvvəlcə istədiyimiz ikona seçəcəyik.

Addım 2:

Sonra üzərinə klikləyin və bu dəfə CSS-ni Kopyala seçin. Yenə də, o sizə yapışdırmalı olduğunuz kodun olduğu pop-up pəncərə verəcək.

Addım 3:

İndi style.css-i açın. və müvafiq selektoru tapın, bu halda – .entry-author. Dashicons saytından kopyaladığınız CSS kodunu :əvvəl əlavə edib sonra yapışdırmaqla, müəllifin adının qarşısında gözəl bir işarə olacaq. Siz həmçinin Dashicons şriftindən istifadə etdiyinizi qeyd etməlisiniz. Dəyişdirilmiş kod belə görünür:

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

Gəlin bir az üslub əlavə edək və indi tamamlanmış kod belə görünür:

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

Son nəticə

Beləliklə, nə bu sonda bənzəyəcək?

Buna bənzər bir şey:

Dashicons-dan istifadə etməyin bir çox yolu var – yaradıcılığınıza imkan verin və nə edə biləcəyinizi görün.

Hamısını bir yerə toplamaq

Yuxarıdakı nümunələrdən başqa, siz fərqli parametrləri təyin etmək üçün arxa tərəfinizdə Dashicon-lardan istifadə edə bilərsiniz.müxtəlif yazı növləri üçün nişanlar və ya siz bunları yazı başlıqlarınızda, vidcet başlıqlarınızda istifadə edə bilərsiniz və ya fərdi açılış səhifəsi yaradırsınızsa, saytınızın müxtəlif səhifələrini fərqləndirə bilərsiniz.

Budur, nəyin əsas nümunəsi yaratmaq üçün onlardan istifadə edə bilərsiniz: