WordPress: aggiungere un evidenziatore di sintassi al nostro tema

Short link

Quando si aggiunge un evidenziatore di sintassi al nostro tema di WordPress occorre tenere a mente che tale caratteristica non dovrà avere un impatto sulla performance del sito maggiore del dovuto. Per questo motivo gli script vanno caricati nel footer e gli stili CSS della sintassi vanno inseriti nel nostro foglio di stile principale. Il primo accorgimento serve a ridurre il tempo di caricamento, mentre il secondo evita al browser di eseguire un'ulteriore richiesta GET. In questo esempio vedremo come aggiungere Google Prettify al nostro tema.

Scaricate Google Prettify e caricate i file basilari in una nuova directory del vostro tema (se non esiste già, chiamatela js, altrimenti usate quella). Avrete quindi la seguente nuova struttura di directory:

/nometema

    /js
        /prettify

All'interno della directory prettify dovranno essere presenti:

  1. prettify.js
  2. prettify.css
  3. eventuali file lang per linguaggi specifici, come lang-css.js o lang-sql.js

Google Prettify dispone di alcuni temi CSS che potete usare al posto del file CSS predefinito. Quando avete scelto il vostro tema CSS, copiate il contenuto del file scelto all'interno del vostro foglio di stile principale:


/*= Syntax Highlighting */

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }

pre.prettyprint {padding: 2px; border: 1px solid #888}

ol.linenums { margin-top: 0; margin-bottom: 0 } 
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }


li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }

A questo punto aprite il vostro file functions.php e aggiungete il seguente codice per caricare gli script necessari al funzionamento della libreria. Ovviamente il file prettify.js e la funzione di inizializzazione dovranno sempre essere presenti, mentre gli altri sono a vostra discrezione:


function add_prettify() {

	$base_url = get_bloginfo('template_url') . '/js/prettify/';
	$scripts = '<script type="text/javascript" src="' . $base_url . 'prettify.js"></script>' . "\n";
	$scripts .= '<script type="text/javascript" src="' . $base_url . 'lang-jquery.js"></script>' . "\n";
	$scripts .= '<script type="text/javascript" src="' . $base_url . 'lang-sql.js"></script>' . "\n";
	$scripts .= '<script type="text/javascript" src="' . $base_url . 'lang-css.js"></script>' . "\n";
	$scripts .= '<script type="text/javascript">(function() {prettyPrint();})();</script>' . "\n";
	
	echo $scripts;

}

add_action('wp_footer', 'add_prettify');

E questo è il risultato finale:

[caption id="attachment_2418" align="aligncenter" width="518" caption="Google Prettify è stato aggiunto correttamente"][/caption]

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.