Tā notiek ar visiem.

Jūs atrodat sev tīkamu tēmu, instalējat to un dažus mēnešus baudāt savas vietnes izskatu. Bet pēc dažiem mēnešiem tēma sāk šķist novecojusi. Nedaudz garlaicīga.

Vienīgā problēma ir tā, ka jūs nevēlaties pavadīt pāris stundas, meklējot kaut ko jaunu. Ja vien būtu veids, kā savai tēmai piešķirt nedaudz pikantuma, mazliet izcelt, lai tā izceltos.

Pirms izmisumā paceļat rokas uz augšu, ļaujiet man parādīt jums vienkāršu veidu, kā uzlabot savu tēmu bez lielām pūlēm un nepievienojot nevajadzīgus attēlus, kas varētu palēnināt vietnes darbību.

Dashicons. Dashicons ir fontu ikonas, kas tika ieviestas WordPress 3.8. Tās ir tās lieliskās un foršās ikonas, ko redzat, kad piesakāties savā vadības panelī. Vai nebūtu forši, ja jūs varētu tās pievienot arī savai tēmai?

Jūs varat, un es jums parādīšu, kā to izdarīt.

Kā navigācijas izvēlnē izmantot domuzīmes?

Sāksim ar vienkāršu piemēru. Dashicons jau ir iekļauti WordPress kopš versijas 3.8, bet jums joprojām ir nepieciešams tos iekļaut, lai tie tiktu pareizi parādīti jūsu vietnes priekšējā daļā, t.i., jūsu tēmā.

1. solis: Sagatavojiet tēmu Dashicons

Lai padarītu savu tēmu Dashicons gatavs vispirms atveriet savu functions.php failu (atrodams Izskats>Redaktors - pēc noklusējuma tas atvērs jūsu pašreizējās tēmas CSS failu. Iet uz priekšu un meklēt functions.php failu un noklikšķiniet uz tā, lai ielādētu to Editor.)

2. solis: Pierakstiet skriptu

Ritiniet līdz pašai apakšai un beigās ielīmējiet šīs koda rindiņas:

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

Labi! Tagad jūsu tēma ir gatava Dashicons izmantošanai.

3. posms: Rādītāju ikonu pievienošana izvēlnes elementiem

Pievienosim Dashicon jūsu saitei Sākums. Dodieties uz Dashicons vietni un izvēlieties ikonu, kas jums patīk.

Atjauninājums: Dashicons sākotnēji bija pieejami vietnē GitHub.io, taču kopš tā laika tie ir pieejami vietnē WordPress.org.

4. solis:

Noklikšķiniet uz vēlamās ikonas (šajā gadījumā es izvēlējos mājas ikonu) un pēc tam noklikšķiniet uz Kopēt HTML. Atvērsies uznirstošais logs ar vajadzīgo kodu.

5:

Atgriezieties savā WordPress paneli, noklikšķiniet uz Izskats> Izvēlnes un ielīmējiet kodu tieši tur, kur tas saka Navigācijas etiķete.

Ja joprojām vēlaties, lai vārds tiktu parādīts, ierakstiet to aiz noslēdzošā divvītru iekavja.

Noklikšķiniet uz Saglabāt un ielādējiet savu sākuma lapu. Tagad jūsu sākuma saitei ir jāattēlo skaista, izteiksmīga Dashicon ikona.

To var izdarīt visiem navigācijas izvēlnes elementiem vai tikai sākuma pozīcijai. Vienkārši atkārtojiet iepriekš minētās darbības ar atbilstošajām ikonām. Tas bija viegli, vai ne?

Kā jūs izmantojat domuzīmes post meta?

Jūs varat iet soli tālāk un pievienot Dashicons jūsu post meta, vai, citiem vārdiem sakot, pievienot Dashicons priekšā autora vārdu, datums, kategorija vai tagu; atkarībā no tēmas un informāciju, kas tiek parādīta.

Tā kā tēmā jau esat pieteicis Dashicons, viss, kas jums tagad jādara, ir jāatver style.css fails (vai jāizmanto pielāgotais CSS redaktors, kas vienmēr ir labāks risinājums, lai pēc tēmas atjaunināšanas nezaudētu izmaiņas!), jāatrod atbilstošais selektors un jāpievieno CSS kods.

Pieņemsim, ka pirms sava vārda vai autora vārda vēlaties pievienot ikonu.

1. solis:

Vispirms izvēlēsimies vēlamo ikonu.

2. solis:

Pēc tam noklikšķiniet uz tā un šoreiz izvēlieties Kopēt CSS. Atkal tiks atvērts uznirstošais logs ar kodu, kas jāielīmē.

3. solis:

Tagad atveriet savu style.css un atrodiet atbilstošo selektoru, šajā gadījumā - .entry-author. Pievienojot :before un pēc tam ielīmējot CSS kodu, ko nokopējāt no Dashicons vietnes, autora vārdam priekšā būs jauka ikona. Jums arī jānorāda, ka izmantojat Dashicons fontu. Izmainītais kods izskatās šādi:

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

Pievienosim arī nedaudz stila, un tagad pabeigtais kods izskatās šādi:

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

Galarezultāts

Kāds tas būs galu galā?

Kaut kas līdzīgs:

Ir tik daudz veidu, kā izmantot domuzīmes - ļaujiet vaļu radošumam un izmēģiniet, ko varat paveikt.

Visu kopā salikšana

Papildus iepriekš minētajiem piemēriem, varat izmantot Dashicons savā backend, lai norādītu dažādas ikonas dažādiem amatu tipiem, vai arī varat izmantot tos amatu virsrakstos, logrīku virsrakstos, vai, ja izveidojat pielāgotu mērķlapu, varat atšķirt dažādas vietnes lapas.

Šeit ir sniegts vienkāršs piemērs tam, ko jūs varētu izmantot, lai tos radītu: