Kā to izmantot un maksimāli izmantot?

Ikonas ir aizraujošas!

Viņiem ir iespēja ātri sazināties ar auditoriju, izveidojot spēcīgu vizuālo saikni.

Tāpēc ikonas tiek plaši izmantotas visur, tostarp WordPress vietnēs.

Turklāt vienu un to pašu motīvu izmantošana savā vietnē vairākus mēnešus var būt garlaicīga. Tas ir izplatīts.

Un tad jūs meklēsit kaut ko interesantāku, izmantojot to, un atkal kļūsiet garlaicīgi,

Un cikls turpinās un turpinās…

Tātad, kā jūs varat izlaist šo garlaicības ciklu?

Dashicons ir lielisks veids!

Tas var paspilgtināt jūsu vietnes estētiku un palīdzēt jums izcelties. Tas arī ietaupīs jūs no papildu pūlēm un vietnes pārpildīšanas ar nevajadzīgiem attēliem, kas palēnina lapas ātrumu.

Tātad, izpētīsim Dashicons un to, kā tos efektīvi izmantot savā WordPress vietnē.

Kas ir WordPress Dashicons?

Dashicons ir WordPress oficiālie ikonu fonti, kas ieviesti pirms gadiem ar tā versiju 3.8. Šie fonti ir forši un lieliski apskatāmi, ja tos izmantojat savā vietnē. Tie ir augstākās kvalitātes SVG faili, kurus varat viegli mērogot jebkurā izmērā bez pikseļiem.

Tā kā viņiem ir vietējais WordPress atbalsts, jo tos ir izveidojusi viņu komanda, varat tos izmantot tieši, neielādējot papildu skriptus. Ir iekļauti aptuveni 350 ikonu fonti, kurus varat atrast oficiālajā WordPress izstrādātāju resursi.

  Kā iespējot jauno Gmail dizainu

Viņi ir iedalījuši šīs ikonas kategorijās, pamatojoties uz tēmu, kā arī jūs varat redzēt dinamisku meklēšanas lauku, kas ļauj filtrēt pieejamās ikonas.

Varat izmantot šīs ikonas:

  • WordPress informācijas panelis
  • Navigācijas izvēlnes
  • Lapas un ziņas
  • Metadati
  • Redaktora elementi
  • Pielāgoti spraudņi un motīvi
  • Administrēšanas paneļi
  • Priekšpuses dizains

Vai ievērojat, ka es atkārtoti saku “ikonas”?

Šeit es domāju tikai ikonu fontus.

Ne attēli ikonu veidā.

Jā, starp abiem ir atšķirība.

Atšķetināsim to.

Atšķirība starp attēlu ikonām un ikonu fontiem?

Ikonu fonti un attēlu ikonas ir nedaudz līdzīgi, taču ikonu fontos alfabētu vietā ir vektoru simboli.

Vai tas kļuva pārāk tehniski?

Ļaujiet man to precizēt.

Būtībā šie ikonu fonti atgādina attēlus, kurus varat izmantot, lai savai vietnei pievienotu simbolus, bet ne īstu attēlu.

Tie sniedz jums daudz priekšrocību.

Kā?

Uzziniet nākamajā sadaļā.

Kāpēc tie būtu jāizmanto?

  • Mērogojams, piemēram, teksti, kas tiek izmantoti jūsu vietnē, jo tie ir fonti
  • Viegls, kas neietekmē lapas ielādes ātrumu salīdzinājumā ar attēliem
  • Var iestatīt ikonas krāsu, izmantojot CSS, un pievienot papildu īpašības, piemēram, gradienta krāsu, ēnu utt.
  • Lieliski ietaupa pārāk daudz HTTP pieprasījumu, ļaujot ielādēt visus fontus vienlaikus, ko varat izmantot visās savās lapās. Ja vietnē izmantojat daudz attēlu, jums būs jāiesniedz daudz pieprasījumu, lai tos ielādētu, kas palielina lapas ielādes laiku.
  • Viegli lietojams un pielāgojams nekā attēli. Varat pievienot atpazīstamus un radošus simbolus bez nepieciešamības tos izveidot katru reizi, kad nepieciešama ikona video atskaņotājam, e-pastam, mūzikai vai jebkurai citai lietai.
  • Lielāka pieejamība, jo tie ir iebūvēti tieši WordPress
  Visaptveroša rokasgrāmata konfigurācijas pārvaldības plānam

Kā tos izmantot?

Dashicons izmantošana nav raķešu inženierija.

Uzticies man; Esmu pazīstams ar abiem :0

Vienkārši izpildiet dažas tālāk minētās darbības, lai sāktu darbu ar WordPress Dashicons.

1. darbība. Iespējojiet Dashicons savā WordPress vietnē

Pirms sākat, iespējojiet Dashicons, kur jums ir nepieciešams, piemēram, motīvs. Lai to izdarītu, failam function.php ir jāpievieno daži kodi.

Lai to izdarītu:

  • Vispirms savā WordPress informācijas panelī atveriet motīvu/izskata redaktoru.
  • Atveriet failu function.php.
  • Ritiniet līdz faila beigām un pievienojiet dažas koda rindiņas, lai ievietotu skriptus
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Iepriekš minētajā piemērā ir jāiespējo Dashicons priekšgalā.

Pirms faila functions.php rediģēšanas noteikti izveidojiet bērna motīvu. Tas ir tāpēc, ka, ja tieši rediģējat motīva failu un pēc tam tiek atjaunināts šis motīvs, tas ignorēs visas failā veiktās izmaiņas.

2. darbība. Atrodiet Dashicon HTML un CSS kodus

WordPress.org piedāvā Dashicons bibliotēku, kas palīdz atrast CSS un HTML kodus, kas pieder katrai ikonai. Šeit dodieties uz Izstrādātāju resursiem, lai atrastu Dashicons, kurus vēlaties izmantot, un pēc tam:

  • Noklikšķiniet uz savas vēlmes ikonas.
  • Izvēlieties “Kopēt CSS” vai “Kopēt HTML”, noklikšķinot uz tā.
  • Tagad jūs redzēsit uznirstošo logu. Vienkārši nokopējiet kodu starpliktuvē.
  • Izlemiet, kur vēlaties izmantot ikonu, piemēram, motīvus, metadatus, navigācijas izvēlni utt.
  • Ielīmējiet nokopēto kodu izvēlētās vietas teksta logrīkā vai teksta redaktorā.
  • Modificēt ikonu izskatās, izmantojot pielāgotu CSS

Tieši tā.

Turklāt pēc noklusējuma visu ikonu izmērs ir 20 pikseļi. Varat to mainīt, izmantojot CSS elementus no tādām opcijām kā Google Chrome pārbaudes elements vai Firefox FireBug.

  Kā noņemt bankas kontu no Cash App

Kā maksimāli izmantot WordPress Dashicons?

Jūs redzējāt, kā savā vietnē varat izmantot Dashicons, un tagad mēs redzēsim to izmantošanu konkrētiem mērķiem.

1. Izmantojot navigācijas izvēlni

Lai izvēlnei pievienotu ikonas, veiciet tālāk norādītās darbības.

  • Informācijas panelī atveriet sadaļu Izvēlnes/Izskats
  • Kopējiet HTML kodus, kas paredzēti izvēlnes ikonai no WordPress.org
  • Ielīmējiet to uz “Navigācijas etiķetes” informācijas panelī
  • Noklikšķiniet uz pogas „Saglabāt” un pēc tam ielādējiet sākumlapu. Tam vajadzētu parādīt vēsu un izteiksmīgu ikonu.

2. Izmantojot post meta

Dashicons varēsit izmantot tieši pirms datuma, autora vārda, atzīmes vai kategorijas, pamatojoties uz motīvu un tajā parādītajiem datiem.

Tā kā Dashicons jau esat ievietojis rindā, atveriet failu style.css. Pretējā gadījumā varat arī izvēlēties pielāgotu CSS redaktoru, kas neļaus jums zaudēt izmaiņas pēc motīvu atjaunināšanas. Pēc tam, kad ir atrasts atbilstošs atlasītājs, pievienojiet savu CSS kodu.

3. WordPress aizmugursistēmā

Ja vēlaties, lai dažādiem pielāgotiem ziņu nosaukumiem, ziņu veidiem vai logrīkiem tiktu iekļautas dažādas ikonas, to ir viegli izdarīt.

Īss padoms: izveidojiet īskodu

Lai ērti izmantotu Dashicons, varat izveidot tam īskodu. Tas ir noderīgi, jo īpaši, ja veidojat vietni saviem klientiem, kuriem būtu viegli ievietot Dashicons, nejaucoties ar kodiem.

Secinājums

Es ceru, ka jūsu pusē lietas ir diezgan skaidras attiecībā uz WordPress Dashicons. Tie ne tikai aptver jūsu vietnes estētiku, bet arī ir viegli lietojami un uzlabo lapas ielādes ātrumu.

Un jūs zināt, „skaistums un smadzenes” ir reta kombinācija.

Tāpēc pasteidzieties un izmantojiet šos uzkrītošos Dashicons savā WordPress vietnē!