Succede a tutti.

Trovi un tema che ti piace, lo installi e trascorri alcuni mesi a goderti l’aspetto del tuo sito. Ma poi, dopo alcuni mesi, il tema inizia a sentirsi stantio. Un po ‘ noioso.

L’unico problema è che non vuoi passare un paio d’ore alla ricerca di qualcosa di nuovo. Se solo ci fosse un modo per aggiungere un po ‘di spezie al tuo tema, un po’ di chiarore per farlo risaltare.

Prima di alzare le mani in preda alla disperazione, lascia che ti mostri un modo semplice per rendere il tuo tema senza troppi sforzi e senza aggiungere immagini inutili che potrebbero rallentare il tuo sito.

Inserire Dashicons. Dashicons sono icone di carattere che sono stati introdotti in WordPress 3.8. Sono quelle icone impressionante e fresco che si vede quando si accede al cruscotto. Non sarebbe bello se si potesse aggiungere al vostro tema pure?

Bene, puoi e ti mostrerò come.

Come puoi usare Dashicons nel tuo menu di navigazione?

Iniziamo con un semplice esempio. Dashicons sono già inclusi in WordPress dalla versione 3.8, ma è ancora necessario includerli per farli visualizzare correttamente sul front-end del tuo sito; cioè, il tema.

Passo 1: Rendere il vostro tema Dashicons pronto

Per rendere il vostro tema Dashicons pronto prima aprire le funzioni.file php (trovato in Aspetto > Editor-per impostazione predefinita si aprirà il file CSS del tema corrente. Vai avanti e cercare le funzioni.file php e fare clic su di esso per caricarlo in Editor.)

Passo 2: Accodare lo script

Scorrere fino in fondo e incollare queste righe di codice alla fine:

Va bene! Ora il tema è pronto per l’uso Dashicons.

Passo 3: Aggiunta di Dashicons alle voci di menu

Aggiungiamo un Dashicon per il tuo link Home. Oltre al capo Dashicons sito web e selezionare l’icona che ti piace.

Aggiornamento: Dashicons erano originariamente disponibili su GitHub.io, ma da allora sono stati resi disponibili su WordPress.org.

Punto 4:

Fare clic sull’icona desiderata (in questo caso ho selezionato l’icona home) e quindi fare clic su Copia HTML. Ti darà una finestra pop-up con il codice che ti serve.

Passo 5:

Torna alla tua dashboard di WordPress, fai clic su Aspetto> Menu e incolla il codice proprio dove si dice Etichetta di navigazione.

Se si desidera che la parola venga visualizzata, digitarla dopo la parentesi div di chiusura.

Clicca su salva e carica la tua home page. Il tuo link home dovrebbe ora visualizzare un Dashicon bello e croccante.

Puoi farlo per tutte le voci del menu di navigazione o solo per home. Basta ripetere i passaggi precedenti con le icone corrispondenti. E ‘ stato facile vero?

Come si usa Dashicons in post meta?

Puoi fare un ulteriore passo avanti e aggiungere Dashicons al meta del tuo post, o in altre parole aggiungere Dashicons davanti al nome, alla data, alla categoria o al tag dell’autore; a seconda del tema e delle informazioni visualizzate.

Dal momento che hai già accodato Dashicons nel tuo tema, tutto ciò che devi fare ora è aprire il tuo stile.file css (o utilizzare l’editor CSS personalizzato che è sempre un’opzione migliore in modo da non perdere le modifiche una volta che il tema si aggiorna!), trova il selettore corrispondente e aggiungi il codice CSS.

Supponiamo che tu voglia aggiungere un’icona davanti al tuo nome o al nome del tuo autore.

Fase 1:

Per prima cosa sceglieremo un’icona che ci piacerebbe.

Passo 2:

Quindi fare clic su di esso, e questa volta selezionare Copia CSS. Ancora una volta, ti darà una finestra pop-up con il codice che devi incollare.

Passo 3:

Ora apri il tuo stile.css e trovare il selettore corrispondente, in questo caso – .ingresso-autore. Aggiungendo: prima e poi incollando il codice CSS copiato dal sito web Dashicons, il nome dell’autore avrà una bella icona di fronte ad esso. È inoltre necessario specificare che si sta utilizzando il carattere Dashicons. Il codice modificato assomiglia a questo:

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

Aggiungiamo anche un po ‘ di stile, e ora il codice completato assomiglia a questo:

Il risultato finale

Quindi come sarà questo alla fine?

Qualcosa del genere:

Ci sono così tanti modi in cui puoi usare Dashicons – lascia che la tua creatività prenda piede e vedi cosa puoi fare.

Mettere tutto insieme

A parte gli esempi di cui sopra, è possibile utilizzare Dashicons nel backend per specificare diverse icone per diversi tipi di post, oppure è possibile utilizzarli nei titoli dei post, titoli dei widget, o se si sta creando una pagina di destinazione personalizzata è possibile distinguere tra diverse pagine del tuo sito.

Un ottimo esempio di questo è la vecchia home page di WP Superstars. Qui, puoi vedere Dashicons in uso per diverse aree del sito web:

I dashicon non sono l’unico tipo di font icona che puoi aggiungere. Controlla il nostro FontAwesome Icone tutorial per più.

Comprende e-mail di aggiornamento. Annullare l’iscrizione in qualsiasi momento.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.