Taip nutinka visiems.

Randate patinkančią temą, ją įdiegiate ir keletą mėnesių mėgaujatės savo svetainės išvaizda. Tačiau po kelių mėnesių tema pradeda atrodyti nuobodi. Šiek tiek nuobodi.

Vienintelė problema ta, kad nenorite praleisti poros valandų ieškodami ko nors naujo. Jei tik būtų būdas pridėti šiek tiek prieskonių savo temai, šiek tiek šarmo, kad ji išsiskirtų.

Prieš numodami ranka į viršų iš nevilties, leiskite parodyti paprastą būdą, kaip pagyvinti temą be didelių pastangų ir nepridedant nereikalingų paveikslėlių, kurie gali sulėtinti svetainės darbą.

Dashicons. Dashicons - tai šrifto piktogramos, kurios buvo įdiegtos "WordPress" 3.8. Tai nuostabios ir šaunios piktogramos, kurias matote, kai prisijungiate prie prietaisų skydelio. Argi nebūtų šaunu, jei galėtumėte jas pridėti ir prie savo temos?

Galite ir aš jums parodysiu, kaip tai padaryti.

Kaip naršymo meniu naudoti brūkšninius simbolius?

Pradėkime nuo paprasto pavyzdžio: "WordPress" nuo 3.8 versijos jau įtraukti brūkšniniai simboliai, tačiau norint, kad jie būtų tinkamai rodomi jūsų svetainės priekinėje dalyje, t. y. temoje, juos vis tiek reikia įtraukti.

1 žingsnis: Paruoškite temos brūkšninius simbolius

Norėdami, kad jūsų tema Dashicons pasiruošę pirmiausia atidarykite savo functions.php failą (rasti išvaizdos> Redaktorius - pagal nutylėjimą ji bus atidaryti savo dabartinės temos CSS failą. Eiti į priekį ir ieškoti functions.php failą ir spustelėkite jį įkelti jį į redaktorių.)

2 veiksmas: Įrašykite scenarijų

Slinkite iki pat apačios ir pabaigoje įklijuokite šias kodo eilutes:

 / /Skripto "Dashicons" iškvietimas add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } 

Gerai! Dabar jūsų tema paruošta naudoti "Dashicons".

3 žingsnis: brūkšninių simbolių pridėjimas prie meniu elementų

Pridėkime "Dashicon" piktogramą savo pagrindinei nuorodai. Eikite į "Dashicons" svetainę ir pasirinkite patinkančią piktogramą.

Atnaujinimas: Iš pradžių brūkšninės piktogramos buvo prieinamos "GitHub.io" svetainėje, tačiau vėliau jos tapo prieinamos "WordPress.org".

4 veiksmas:

Spustelėkite norimą piktogramą (šiuo atveju pasirinkau namų piktogramą) ir spustelėkite Copy HTML (kopijuoti HTML). Atsivers iškylantysis langas su reikiamu kodu.

5 veiksmas:

Grįžkite į savo "WordPress" prietaisų skydelį, spustelėkite Appearance> Meniu ir įklijuokite kodą ten, kur parašyta Navigation Label.

Jei vis tiek norite, kad žodis būtų rodomas, įveskite jį po uždaromojo dalelytės skliausto.

Spustelėkite Išsaugoti ir įkelkite pagrindinį puslapį. Dabar jūsų pagrindinėje nuorodoje turėtų būti rodoma graži, aiški "Dashicon" piktograma.

Tai galite padaryti visiems navigacijos meniu elementams arba tik pagrindiniam. Tiesiog pakartokite pirmiau nurodytus veiksmus su atitinkamomis piktogramomis. Tai buvo lengva, tiesa?

Kaip naudoti brūkšninius simbolius posto meta?

Galite žengti dar vieną žingsnį ir pridėti brūkšninius simbolius prie savo posto meta, arba, kitaip tariant, pridėti brūkšninius simbolius priešais autoriaus vardą, datą, kategoriją ar žymą; priklausomai nuo jūsų temos ir rodomos informacijos.

Kadangi savo temoje jau įrašėte "Dashicons", dabar tereikia atidaryti savo style.css failą (arba naudoti pasirinktinį CSS redaktorių, kuris visada yra geresnis variantas, kad atnaujinus temą neprarastumėte pakeitimų!), rasti atitinkamą selektorių ir pridėti CSS kodą.

Tarkime, norite pridėti piktogramą priešais savo vardą arba autoriaus vardą.

1 žingsnis:

Pirmiausia pasirinksime norimą piktogramą.

2 žingsnis:

Tada spustelėkite jį ir šį kartą pasirinkite Kopijuoti CSS. Vėl pasirodys iškylantysis langas su kodu, kurį reikia įklijuoti.

3 veiksmas:

Dabar atverkite savo style.css ir raskite atitinkamą selektorių, šiuo atveju - .entry-author. Pridėję :before ir įklijavę CSS kodą, kurį nukopijavote iš "Dashicons" svetainės, autoriaus vardas turės gražią piktogramą priešais. Taip pat turite nurodyti, kad naudojate "Dashicons" šriftą. Pakeistas kodas atrodo taip:

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

Taip pat pridėkime šiek tiek stiliaus ir dabar užbaigtas kodas atrodys taip:

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

Galutinis rezultatas

Kaip tai atrodys galiausiai?

Kažkas panašaus:

Yra daugybė būdų, kaip galite naudoti brūkšninius simbolius - leiskite pasireikšti savo kūrybiškumui ir pažiūrėkite, ką galite padaryti.

Visko sujungimas

Be pirmiau pateiktų pavyzdžių, galite naudoti brūkšnines piktogramas savo galinėje versijoje, norėdami nurodyti skirtingas piktogramas skirtingiems pranešimų tipams, arba galite jas naudoti pranešimų pavadinimuose, valdiklių pavadinimuose, arba, jei kuriate pasirinktinį nukreipimo puslapį, galite atskirti skirtingus svetainės puslapius.

Pateikiame pagrindinį pavyzdį, ką galėtumėte sukurti naudodami šias priemones: