Nel precedente articolo abbiamo visto alcuni dei framework disponibili in rete per l'installazione di un pannello opzioni all'interno del proprio tema WordPress e in particolare l'installazione di SMOF (Slightly Modified Options Framework). In quest'articolo di approfondimento analizzeremo alcune tecniche avanzate sull'utilizzo delle opzioni.
Opzioni e regole CSS dinamiche
L'argomento dei fogli di stile generati in modo dinamico è controverso. Lo sviluppatore di SMOF, nel suo tutorial (in Inglese) spiega il metodo per implementare un file styles.php e i relativi passaggi per modificare "SMOF" in modo che scriva un file options.css dinamico ogni volta che aggiorniamo le opzioni con il pulsante "Save All Changes". Questa tecnica, per ammissione stessa dell'autore non è esente da problemi, e testata si rivela poco affidabile. Il file options.css non sempre viene riscritto all'aggiornamento delle opzioni e spesso risente dell'influenza della cache.
Un File style.php richiamato con la funzione:
wp_register_style('options', get_template_directory_uri() . '/css/style.php', false, null);non darà ugualmente l'effetto sperato, perché viene richiamato prima del core di WordPress, quindi i valori all'interno della variabile globale $data ancora non esistono e non vengono interpretati. Probabilmente i puristi del codice non concorderanno, ma il sistema più efficace fra quelli testati dovrebbe essere quello di richiamare il file style.php come foglio di stile incorporato, direttamente nella sezione head del sito insieme agli altri eventuali fogli di stile statici:
require_once locate_template('/assets/css/style.php');Il foglio di stile dinamico verrà elaborato dal server come un qualsiasi altro file ".php" e, andando a esaminare il codice prodotto, troveremo i valori impostati dalle opzioni del nostro Theme Options al posto delle nostre variabili. Vediamo un esempio pratico:
<style type="text/css">
<?php
global $data;
if(!empty($data['id_mia_variabile'])) { $id_mia_variabile = $data['id_mia_variabile'];}
echo 'id_mia_variabile';
?>
</style>Apriamo il foglio di stile con il tag style, apriamo il tag php, richiamiamo la variabile $data. Verifichiamo se la variabile con identificatore id_mia_variabile contiene un valore e nel caso lo associamo a una variabile semplice. Stampiamo il valore, chiudiamo i tag php e style.
A questo punto abbiamo definito il sistema per operare delle scelte di stile sul nostro tema e recuperare i valori in un foglio di stile dinamico. Vediamo come creare un'opzione per cambiare il colore del testo delle pagine in TwentyFourteen. In functions.options.php aggiungiamo il codice per la scelta del colore delle scritte al pannello "Styling Options"; cerchiamo quindi le righe:
$of_options[] = array( "name" => "Styling Options",
"type" => "heading");e aggiungiamo l'opzione:
$of_options[] = array( "name" => "Styling Options",
"type" => "heading");
$of_options[] = array( "name" => "Colore del testo",
"desc" => "Scegli il colore per il testo delle pagine",
"id" => "mio_colore_testo",
"std" => "#333333",
"type" => "color");L'id univoco dell'opzione è mio_colore_testo e ci servirà per passare il valore al foglio di stile dinamico:
<style type="text/css">
<?php
global $data;
if(!empty($data['mio_colore_testo'])) { $mio_colore_testo = $data['mio_colore_testo'];}
?>
body {
color: <?php echo 'mio_colore_testo';?>;
}
</style>Ora, andando a verificare il pannello opzioni, troveremo la possibilità di scegliere il nostro colore preferito e impostandolo (ricordando di salvare), la modifica si rifletterà sul colore del testo delle pagine del tema.
Scelta del font
Oltre le opzioni già descritte, probabilmente vorremo offrire anche la possibilità di scegliere il font. A questo scopo "SMOF" offre diverse soluzioni. Esistono tipologie di opzione che ci consentono, con un singolo array, di passare più valori relativi al carattere come: colore, font, dimensione e interlinea, oppure di scegliere fra i Google font mostrandoci l'anteprima del carattere selezionato. Aggiungiamo un'altra opzione:
$of_options[] = array( "name" => "Styling Options",
"type" => "heading");
$of_options[] = array( "name" => "Colore del testo",
"desc" => "Scegli il colore per il testo delle pagine",
"id" => "mio_colore_testo",
"std" => "#333333",
"type" => "color");
$of_options[] = array( "name" => "Seleziona un Google font",
"desc" => "La descizione dell'opzione",
"id" => "mio_g_font",
"std" => "Seleziona un Google font",
"type" => "select_google_font",
"preview" => array(
"text" => "Il testo della mia anteprima", //questo è il testo visualizzato nel box dell'anteprima
"size" => "30px" //questa è la dimensione del testo in anteprima
),
"options" => array(
"none" => "Select a font",//please, always use this key: "none"
"Lato" => "Lato",
"Loved by the King" => "Loved By the King",
"Tangerine" => "Tangerine",
"Terminal Dosis" => "Terminal Dosis"Ora è possibile scegliere un font fra quelli presenti nella select di scelta. Volendo aggiungere altri font, basta accodarli seguendo la stessa sintassi all'array options. Perché la scelta del font si rifletta sulle pagine, dobbiamo completare ancora due passaggi. Innanzitutto dobbiamo richiamare dinamicamente il font nella sezione head (come un qualsiasi CSS) utilizzando le API di Google:
wp_register_style('headers_font', 'http://fonts.googleapis.com/css?family='. urlencode($data['mio_g_font']).':400,400italic,700,700italic&subset=latin,', false, null);
wp_enqueue_style( 'headers_font');Fra i vari parametri richiesti, passiamo anche il valore $data['mio_g_font'] che conterrà di volta in volta il nome del font che andremo a selezionare dalla select. Ora il font selezionato sarà disponibile per essere utilizzato come parte dello stile delle nostre pagine. Perché questo avvenga però, dobbiamo passare questo valore anche al foglio di stile dinamico style.php:
<style type="text/css">
<?php
global $data;
if(!empty($data['mio_colore_testo'])) { $mio_colore_testo = $data['mio_colore_testo'];}
if(!empty($data['mio_g_font'])) { $mio_g_font =$data['mio_g_font'];}
?>
body {
color: <?php echo 'mio_colore_testo';?>;
font-family: <?php echo 'mio_g_font';?>;
}
</style>Abbiamo verificato l'esistenza di un valore nella variabile globale con l'id mio_g_font e poi l'abbiamo passata a una variabile semplice, stampandola infine come valore per la regola font-family. Questa logica può essere utilizzata ovviamente anche per personalizzare gli altri aspetti del testo come la dimensione o l'interlinea, ma anche per modificare i colori o le regole di stile delle pagine. Sarà sufficiente creare l'opzione e passare il valore alla classe o l'id che vogliamo poter modificare tramite opzione.
Sotto pannelli e icone
Personalizzando il pannello di "SMOF" possiamo generare tutti i sotto pannelli che riteniamo necessari. Tuttavia quando creiamo un nuovo pannello, diverso da quelli predefiniti, questo non sarà dotato di icona se non specifichiamo il valore nell'array:
$of_options[] = array("name" => "Social Options",
"type" => "heading",
"icon" => get_template_directory_uri() . '/admin/images/mia_icona.png");Rispetto al codice visto in precedenza, abbiamo inserito il parametro icon al quale passiamo il percorso relativo all'immagine dell'icona da associare al nuovo pannello.
