To se zgodi vsakomur.

Najdete temo, ki vam je všeč, jo namestite in nekaj mesecev uživate v videzu svojega spletnega mesta. Toda po nekaj mesecih se tema začne zditi zastarela, nekoliko dolgočasna.

Težava je le v tem, da ne želite porabiti nekaj ur za iskanje nečesa novega. Če bi le obstajal način, da bi svoji temi dodali malo začimbe, malo odtenka, ki bi jo naredil izstopajočo.

Preden obupano dvignete roke, vam bom pokazal enostaven način, kako brez prevelikega truda in dodajanja nepotrebnih slik, ki bi lahko upočasnile spletno mesto, popestriti svojo temo.

Dashicons. Dashicons so ikone pisave, ki so bile uvedene v WordPressu 3.8. To so tiste čudovite in kul ikone, ki jih vidite, ko se prijavite v nadzorno ploščo. Ali ne bi bilo kul, če bi jih lahko dodali tudi v svojo temo?

Lahko in pokazal vam bom, kako.

Kako lahko uporabite črkovne ikone v navigacijskem meniju?

Začnimo s preprostim primerom. Črtne ikone so v WordPress vključene že od različice 3.8, vendar jih morate še vedno vključiti, da se pravilno prikažejo na sprednjem delu vašega spletnega mesta, to je v vaši temi.

Korak 1: Pripravite svojo temo Dashicons

Če želite, da je vaša tema Dashicons pripravljen najprej odprite svojo datoteko functions.php (najdemo v videz> Editor - privzeto se bo odprla datoteko CSS vaše trenutne teme. Pojdi naprej in poiščite functions.php datoteko in kliknite na to, da ga naložite v Editor.)

Korak 2: Oddajanje skripte v zapisnik

Pomaknite se do dna in na koncu prilepite te vrstice kode:

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

V redu! Zdaj je vaša tema pripravljena za uporabo Dashicons.

Korak 3: Dodajanje črkovnih ikon v elemente menija

Dodajmo ikono Dashicon za povezavo Domov. Pojdite na spletno mesto Dashicons in izberite ikono, ki vam je všeč.

Posodobitev: Dashicons so bili prvotno na voljo na spletnem mestu GitHub.io, vendar so bili od takrat na voljo na spletnem mestu WordPress.org.

4. korak:

Kliknite želeno ikono (v tem primeru sem izbral ikono doma) in nato kliknite Kopiraj HTML. Odprlo se bo pojavno okno s kodo, ki jo potrebujete.

5. korak:

Vrnite se na nadzorno ploščo WordPress, kliknite na videz> Meniji in prilepite kodo prav tam, kjer piše Navigation Label.

Če še vedno želite, da se beseda prikaže, jo vnesite za zaključnim oglatim oklepajem.

Kliknite na Shrani in naložite svojo domačo stran. Vaša domača povezava mora zdaj prikazovati lepo in jasno ikono Dashicon.

To lahko storite za vse elemente navigacijskega menija ali samo za domači del. Ponovite zgornje korake z ustreznimi ikonami. To je bilo enostavno, kajne?

Kako uporabljate črkovne ikone v post meta?

Lahko greste še korak dlje in dodate Dashicons na meta objave, ali z drugimi besedami, dodate Dashicons pred avtorjevo ime, datum, kategorijo ali oznako; odvisno od vaše teme in informacij, ki jih prikaže.

Ker ste v svoji temi že pripravili Dashicons, morate zdaj le odpreti datoteko style.css (ali uporabiti urejevalnik CSS po meri, kar je vedno boljša možnost, da ne izgubite sprememb, ko se tema posodobi!), poiskati ustrezen selektor in dodati kodo CSS.

Recimo, da želite pred svoje ime ali ime avtorja dodati ikono.

Korak 1:

Najprej bomo izbrali želeno ikono.

Korak 2:

Nato kliknite nanj in tokrat izberite Kopiraj CSS. Ponovno se bo odprlo pojavno okno s kodo, ki jo morate prilepiti.

Korak 3:

Zdaj odprite svoj slog.css in poiščite ustrezen selektor, v tem primeru .entry-author. Če dodate :before in nato vstavite kodo CSS, ki ste jo kopirali s spletnega mesta Dashicons, bo ime avtorja imelo lepo ikono pred seboj. Določiti morate tudi, da uporabljate pisavo Dashicons. Spremenjena koda je videti takole:

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

Dodajmo še nekaj oblikovanja in končana koda je zdaj videti takole:

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

Končni rezultat

Kako bo to videti na koncu?

Nekako takole:

Črkovne ikone lahko uporabite na veliko načinov - prepustite se ustvarjalnosti in preverite, kaj lahko naredite.

Združevanje vsega skupaj

Poleg zgornjih primerov lahko v zalednem delu uporabite ikone Dashicons, da določite različne ikone za različne vrste objav ali jih uporabite v naslovih objav, naslovih gradnikov ali če ustvarjate pristajalno stran po meri, lahko razlikujete med različnimi stranmi svojega spletnega mesta.

Tukaj je osnovni primer, kaj lahko z njimi ustvarite: