Succede a tutti.

Trovate un tema che vi piace, lo installate e passate qualche mese a godervi l'aspetto del vostro sito. Ma poi, dopo qualche mese, il tema inizia a sembrare stantio, un po' noioso.

L'unico problema è che non volete passare un paio d'ore a cercare qualcosa di nuovo. Se solo ci fosse un modo per aggiungere un po' di pepe al vostro tema, un po' di brio per farlo risaltare.

Prima che vi disperiate, lasciate che vi mostri un modo semplice per ravvivare il vostro tema senza troppi sforzi e senza aggiungere immagini inutili che potrebbero rallentare il vostro sito.

Le Dashicons sono icone di carattere introdotte in WordPress 3.8. Sono quelle icone fantastiche che vedete quando accedete alla vostra dashboard. Non sarebbe bello se poteste aggiungerle anche al vostro tema?

Beh, potete farlo e vi mostrerò come.

Come si possono utilizzare i Dashicon nel menu di navigazione?

Partiamo da un semplice esempio: le dashicon sono già incluse in WordPress dalla versione 3.8, ma è ancora necessario includerle per farle visualizzare correttamente sul front-end del sito, ovvero sul tema.

Passo 1: Preparare le Dashicon del tema

Per rendere pronte le Dashicon del vostro tema, aprite innanzitutto il file functions.php (che si trova in Aspetto>Editor - per impostazione predefinita aprirà il file CSS del vostro tema corrente. Cercate il file functions.php e cliccateci sopra per caricarlo nell'Editor).

Fase 2: Eseguire l'encoding dello script

Scorrete fino in fondo e incollate queste righe di codice alla fine:

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

Ora il vostro tema è pronto per utilizzare Dashicons.

Passo 3: Aggiungere le freccette alle voci di menu

Aggiungiamo una Dashicon per il nostro link alla Home. Andiamo sul sito Dashicons e selezioniamo l'icona che ci piace.

Aggiornamento: le dashicon erano originariamente disponibili su GitHub.io, ma da allora sono state rese disponibili su WordPress.org.

Passo 4:

Fare clic sull'icona desiderata (in questo caso ho selezionato l'icona della home) e poi fare clic su Copia HTML. Verrà visualizzata una finestra pop-up con il codice necessario.

Passo 5:

Tornate alla vostra dashboard di WordPress, fate clic su Aspetto> Menu e incollate il codice proprio dove c'è scritto Etichetta di navigazione.

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

Fare clic su Salva e caricare la pagina iniziale. Il link iniziale dovrebbe ora visualizzare una Dashicon bella e nitida.

È possibile farlo per tutte le voci del menu di navigazione o solo per la home. Basta ripetere i passaggi precedenti con le icone corrispondenti. È stato facile, vero?

Come si usano i Dashicons nei post meta?

È possibile fare un ulteriore passo avanti e aggiungere Dashicons ai meta dei post, ovvero aggiungere Dashicons davanti al nome dell'autore, alla data, alla categoria o al tag, a seconda del tema e delle informazioni visualizzate.

Dal momento che avete già inserito Dashicons nel vostro tema, tutto ciò che dovete fare ora è aprire il file style.css (o usare l'editor CSS personalizzato, che è sempre un'opzione migliore per non perdere le modifiche una volta aggiornato il tema!), trovare il selettore corrispondente e aggiungere il codice CSS.

Supponiamo che si voglia aggiungere un'icona davanti al proprio nome o al nome dell'autore.

Fase 1:

Per prima cosa sceglieremo un'icona che ci piace.

Fase 2:

Quindi fare clic su di esso e questa volta selezionare Copia CSS. Anche in questo caso si aprirà una finestra pop-up con il codice da incollare.

Fase 3:

Ora aprite il vostro style.css e trovate il selettore corrispondente, in questo caso .entry-author. Aggiungendo :before e incollando il codice CSS che avete copiato dal sito web di Dashicons, il nome dell'autore avrà una bella icona davanti a sé. Dovete anche specificare che state usando il font Dashicons. Il codice modificato si presenta così:

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

Aggiungiamo anche un po' di stile e ora il codice completato si presenta così:

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

Il risultato finale

Come si presenterà alla fine?

Qualcosa del genere:

Ci sono tantissimi modi per utilizzare le Dashicon: lasciate che la vostra creatività prenda piede e vedete cosa riuscite a fare.

Mettere tutto insieme

Oltre agli esempi precedenti, è possibile utilizzare le Dashicons nel backend per specificare icone diverse per i vari tipi di post, oppure utilizzarle nei titoli dei post, nei titoli dei widget o, se si sta creando una landing page personalizzata, per differenziare le diverse pagine del sito.

Ecco un esempio di base di ciò che si potrebbe usare per creare: