WordPress: utilizziamo stili personalizzati con l’editor visuale predefinito

Finalmente dopo tanti, ma tanti (ma tanti!) tentativi sono riuscito a ottenere ciò che volevo: un blocco preformattato con l’icona di un terminale, per poter postare comandi di Ubuntu e mantenere un minimo di stile, al posto dell’obbrobrio che viene proposto solitamente con il tema del blog.

In altre parole, sono riuscito a trasformare questo:

sudo apt-get install build-essential

in questo:

sudo apt-get install build-essential

Carino, vero? 😀

 

Sarebbe molto semplice se WordPress permettesse di modificare il menu a tendina del Formato (quello dove possiamo scegliere tra le voci “Paragrafo”, “Testata”, “Preformattato”, ecc.) associandogli un foglio di stile definito da noi, però non è così, di conseguenza occorre effettuare una modifica direttamente sul codice – ovvero i files PHP – per riuscire a raggiungere lo scopo.

Avremo bisogno di un programma per connetterci via FTP al server (es. FileZilla) e di un buon editor di testo per modificare i files PHP (es. Geany).

Intrufoliamoci nei meandri di WordPress

Scarichiamo sul computer il file functions.php, contenuto nella cartella del tema in uso ed apriamolo con l’editor di testo. Nel mio caso si trova in
/wp-content/themes/sthblue/functions.php

Aggiungiamo all’inizio del file (subito dopo il tag di inizio codice <?php ) il seguente codice, in modo che il file functions.php risulti così:

<?php

// Aggiungo il menu a tendina "Stili" all'editor visuale TinyMCE
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
function my_mce_buttons_2( $buttons )
{
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

// Inserisco nel menu a tendina "Stili" gli elementi
function my_mce_before_init( $settings )
{
    $style_formats = array(
    	array(
    		'title' => 'Terminale', // Testo che viene visualizzato nel menu a tendina "Stili"
    		'selector' => 'pre',    // Selettore associato allo stile (nell'esempio: preformattato)
    		'classes' => 'terminal' // Nome della classe, del foglio di stile, associato all'elemento (.terminal)
    	),
        array(
        	'title' => 'Output',
        	'block' => 'pre',
        	'classes' => 'output'
        )
    );
    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}

add_editor_style();

// Resto del file "functions.php" //

Ora salviamo e ricarichiamo sul server sostituendo la versione precedente con quella modificata poco fa.

E’ solo una questione di stile

Adesso occorre creare un foglio di stile dentro al quale bisogna scrivere le regole che serviranno a interpretare correttamente, secondo le nostre intenzioni, il blocco preformattato.

Creiamo con l’editor di testo un file vuoto.

Ora dobbiamo inserire le regole relative agli elementi che abbiamo aggiunto precedentemente modificando il file functions.php (abbiamo in questo modo creato e popolato il menu a tendina “Stili”), quindi, per seguire l’esempio, è sufficiente incollare questo codice:

/****** Il Mio CSS Personalizzato  **********/
pre.terminal
{
/* DISEGNA UN BLOCCO NERO CON L'IMMAGINE DEL TERMINALE PER I COMANDI UNIX */
  background: #0A0F0F url(images/terminal.png) 3px 3px no-repeat;
  color: #F5F5F5;
  padding: 15px;
  padding-left: 60px;
  border: 1px solid #B38C44;
  overflow: auto;
}

pre.output
{
/* DISEGNA UN BLOCCO NERO SENZA L'IMMAGINE DEL TERMINALE PER I COMANDI UNIX */
  background: #0A0F0F;
  color: #F5F5F5;
  padding: 10px;
  border: 1px solid #B38C44;
  overflow: auto;
}

Adesso è sufficiente salvare il file chiamandolo con il nome editor-style.css.
A questo punto, tramite il fidato FileZilla, riportiamo sul server il foglio di stile appena creato, posizionandolo nella stessa cartella del file “functions.php” di prima.

L’immagine del terminale, per seguire l’esempio, deve essere posizionata all’interno della cartella “images” del tema:
/wp-content/themes/sthblue/images/terminal.png

dove sthblue è il nome del tema attualmente in uso.

Utilizzo finale

Nell’editor, per postare un comando da terminale (per seguire fino in fondo l’esempio di questo articolo!):

1. Dal menu a tendina Formato scegliere l’elemento “preformattato”
2. Dal menu a tendina Stili (new!!) scegliere l’elemento “Terminale”
3. Godersi lo spettacolo

Ovviamente l’esempio è servito per creare un box che possa ospitare comandi da terminale, però è possibile creare ad esempio box contenente link per download, box per le citazioni, insomma, l’unico limite è la nostra fantasia!

Il tutto è disponibile senza dover disabilitare l’editor visuale, senza dover diventare scemo per cercare di riuscire a ottenere un qualche risultato che sia in qualche modo simile alle proprie aspettative. In questo modo ci si può creare l’esatto foglio di stile con le regoline che permetteranno (a coloro che sanno mettere le mani sul CSS 😀 ) una assoluta padronanza degli stili.

Ringrazio ampiamente alisothegeek per aver pubblicato sul suo blog l’articolo che mi ha permesso di far luce su questo argomento in via definitiva.