Come installare material icons WordPress senza plugin

Come installare material icons in WordPress senza aggiungere plugin? Spesso per ottimizzare la velocità del tuo sito web è necessario rimuovere alcuni plugin, specialmente se possiamo sostituirli da poche righe di codice!

Per installare le icone di Google material design devi mettere mano al codice sorgente di WordPress, nello specifico, al tema che stai utilizzando.

Per prima cosa apri il file functions.php del tuo tema e inserisci questo codice già pronto.

Ti consiglio di creare un tema child per non perdere tutte le modifiche al primo aggiornamento del tema genitore.

add_action('wp_footer', function {
  ?>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <?php
});

In questo modo hai inserito nel footer il link al file css di Google contenente tutte le icone e le specifiche per utilizzarle nel tuo sito web.

Puoi anche inserire il link nell’head del tuo sito semplicemente sostituendo “wp_footer” con “wp_head” ma, in questa posizione, potresti rallentare leggermente il caricamento dei contenuti importanti. Ti consiglio la posizione wp_head solo se usi le tue icone nella parte più alta della pagina (menu o prima sezione) per evitare eccessive variazioni di layout.

Ora che hai capito come installare material icons in WordPress dovrai semplicemente inserirle manualmente nelle pagine del tuo sito.

Se usi un page builder oppure il builder predefinito di WordPress dovrai inserire un elemento “HTML personalizzato” contenente questo codice:

<span class="material-icons">face</span>

Con questo codice già pronto abbiamo inserito l’icona con la faccia dell’omino, e utilizziamo gli stili predefiniti delle icone.

Se vuoi cambiare icona ti basta sostituire “face” con il nome di quella nuova e lasciare invariato il resto del codice.

Trovi tutte le icone presenti in questa documentazione sempre aggiornata, ti basta cercare il nome di un’icona e in basso vedrai il nome da inserire nel tag <span>

Per personalizzare colori, dimensioni e altri elementi puoi sempre creare una tua classe css da aggiungere al codice con le istruzioni che vuoi modificare.