WordPress Option Panel, Introduzione

Nelle precedenti lezioni abbiamo visto come costruire un semplice tema partendo da zero. Da oggi inizierà un nuovo ciclo di lezioni dedicate alla costruzione di una pagina d’opzioni per il nostro tema, cosi da gestire alcune funzionalità dello stesso come, ad esempio, i colori dei link o la visualizzazione di alcuni blocchi dinamici o parti del tema. Oggi vedremo come aggiungere la gestione dello sfondo del tema.
Prendendo come riferimento uno dei temi di default di WordPress, ovvero Twenty Eleven, andando nell’amministrazione, in “Aspetto“, troveremo una pagina chiamata “Impostazioni Tema“, presente solamente installando e attivando questo tema (quindi non sarà visibile installandone altri).

Così come le due voci seguenti, “Sfondo” e “Testata” servono sempre per la gestione del tema ma, in questo caso, vengono generate dalla funzione add_theme_support(), e quindi non sono state create da zero come andremo a fare noi nelle prossime lezioni. Tra l’altro questa funziona l’abbiamo già vista nella lezione dedicata al loop, per l’integrazione delle thumbnails. Prevede 5 parametri, anche se non li utilizzeremo tutti vediamoli comunque insieme:

1. $post-formats, ovvero il formato dei post. Dalla versione 3.1 di WordPress è stata aggiunta una nuova funzionalità, ovvero quella del formato dei post, che permette all’ admin del sito di personalizzare la visualizzazione degli articoli, utilizzando dei formati standard che adesso vedremo insieme (comunque, in futuro, i formati dei post verranno trattati in maniera più approfondita):
   • aside, post senza titolo, simile ad un aggiornamento di stato di Facebook.
   • gallery, galleria di foto, tramite l’utilizzo di shortcode nel contenuto del post.
   • link, link verso un’altro sito Può essere utilizzato il primo collegamento trovato nel contenuto del post, in alternativa, il post potrebbe contenere solamente un url, mentre è possibile utilizzare il titolo come ancoraggio.
   • image, Una singola immagine, ad esempio può essere utilizzata come immagine quella presente nel primo tag img all’interno del contenuto del post. In alternativa, il post potrebbe contenere solamente un url, che verrà utilizzato come url dell’immagine mentre il titolo sarà il tag title dell’immagine.
   • quote, Una citazione, ad esempio può essere utilizzata la prima citazione, tramite il primo tag blockquote , presente all’interno del contenuto del post. In alternativa è possibile utilizzare il contenuto del post come citazione, mentre la fonte o l’autore il titolo.
   • status, Aggiornamento di stato, simili a quelli di Twitter.
   • video, Un singolo video, ad esempio utilizzando il primo tag video o object/embed oppure, se il post è composto solamente da url, quest’ultimo potrà essere utilizzato come url del video.
   • audio, File audio da utilizzare, per esempio, come podcast.
   • chat, Una trascrizione di una chat.
2. $post-thumbnails, ovvero il supporto alle thumbnails dei post, abbiamo già visto in passato il funzionamento.
3. $custom-background, ovvero il supporto a sfondi personalizzati. Sostituisce, dalla versione 3.4 in poi, la precedente feature add_custom_background()
4. $custom-header, ovvero il supporto ad immagini nella testata. Sostituisce, dalla versione 3.4 in poi, la precedente feature add_custom_image_header()
5. $automatic-feed-links, ovvero l’aggiunta dei collegamenti ai feed RSS dei post e dei commenti predefiniti.

Adesso apriamo il file function.php del nostro tema e scriviamo:

if( version_compare( $wp_version, '3.4', ">=" ) )
add_theme_support( 'custom-background' );
else
add_custom_background();

Tramite il controllo della versione di WordPress utilizzata, ne garantiamo la piena compatibilità.

Ora riattiviamo il nostro tema e andiamo in “Aspetto”, vedremo che è attiva la pagina “Sfondo”.

Ciò che verrà impostato in questa pagina verrà aggiunto, sotto forma di codice css, all’interno dell’header del nostro tema.
Se proviamo ad inserire un’immagine oppure un colore di sfondo ed apriamo il sito, non succederà nulla. Dobbiamo utilizzare la funzione body_class() che aggiungerà, al tag body, tutte le classi css generate da WordPress, a seconda della pagina visualizzata. Tra parentesi è possibile indicare classi personalizzate.
Apriamo il file header.php:

<!-- sostituiamo -->
<body>
<!-- con -->
<body <?php body_class() ?>>    

Infine, nel file style.css, eliminiamo

body { background:#dcdcdc; }

Impostando un nuovo colore di sfondo, ad esempio #8a8a8a (grigio più scuro di quello utilizzato in precedenza) e torniamo al sito noteremo che ora è stato perfettamente modificato.

Se invece aggiungiamo un’immagine, possiamo anche scegliere il suo posizionamento, se deve essere ripetuta e altre opzioni.

Torniamo al sito, troveremo sia il colore di sfondo che l’immagine, centrale senza essere ripetuta.

Nella lezione di oggi abbiamo visto come gestire, da pannello di controllo, le immagini e i colori di sfondo del nostro tema, senza dover interagire con i fogli di stile. Nella prossima lezione vedremo come gestire dinamicamente le immagini dell’header.
Alla prossima settimana.