Di recente moltissimi sviluppatori di temi wordpress hanno cominciato ad inserire nei propri lavori il supporto alle icone Font Awesome. Tale scelta è stata principalmente dettata dalla volontà di evitare l’utilizzo di icone in formato .png o .jpg a favore di una soluzione più leggera e che quindi permette di ottenere un incremento nella velocità di caricamento delle pagine web.
Quello che forse non sapete è che potete aggiungere il supporto alle icone font awesome anche se il vostro tema non lo prevede. Come sempre, anche in questo caso esistono dei plugin ma dal momento che si tratta di poche righe di codice, come già detto in altre circostanze, preferisco fare da me e realizzare un piccolo plugin.
Se non sapete da che parte iniziare vi consiglio di dare uno sguardo all’articolo sui custom shortcodes.
ICONE FONT AWESOME – REALIZZIAMO UN PLUGIN
La prima cosa da fare anche in questo caso è quella di aprire un editor php, creare un nuovo documento ed inserire le informazioni relative al plugin che vogliamo realizzare. In poche parole dovreste creare qualcosa del genere:
<?php
/*
Plugin Name: WpGuida Font Awesome
Description: A plugin to add font awesome support for your theme.
Version: 1.0
Author: Dario Vinci
License: GPL2
*/
?>A questo punto non ci resta che aggiungere il codice che si occuperà di caricare nell’header il file necessario al funzionamento delle icone font awesome.
add_action( 'wp_enqueue_scripts', 'carica_font_awesome' );
function carica_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
}Salvate il file che avete creato e caricatelo nell’apposita cartella che andrete a creare all’interno della directory wp-plugins. A questo punto portatevi all’interno del pannello di amministrazione e attivate il plugin che avete realizzato.
Se avete effettuato tutto correttamente dando uno sguardo al codice sorgente delle vostre pagine dovreste trovare una riga nell’header tramite la quale viene caricato il file css delle icone font awesome.
A questo punto non vi resta che utilizzarle all’interno delle pagine del vostro tema.
In questa pagina trovate la lista di tutte le icone e cliccando su ciascuna di esse troverete anche il codice da utilizzare.
Per esempio:
<i class="fa fa-comment"></i>Prossimamente vedremo come creare uno shortcode che vi permetterà di inserire qualsiasi icona anche all’interno degli articoli.
