Nelle precedenti lezioni abbiamo visto come gestire lo sfondo e la testata del nostro sito, andando ad utilizzare delle funzioni fornite da WordPress. Se non abbiamo esigenze particolari possono andar bene le soluzioni già viste. Ma per aggiungere una nostra pagina di amministrazione del tema?. Nella lezione di oggi vedremo proprio questo, aggiungeremo una nuova voce nel menù di amministrazione collegata alla pagina del pannello del tema.
Per fare questo ci viene incontro la funzione add_menu_page(), che prevede 7 parametri:
- $page_title , il titolo della pagina gestito dal tag “title” ( ovvero quello che compare sulla parte alta del browser.)
- $menu_title , il titolo della voce di menù.
- $capability , Quale gruppo di utenti ha accesso alla pagina.
- $menu_slug , Slug di riferimento del menù.
- $function , Nome della funzione a cui agganciare il menù.
- $icon_url , Percorso dell’icona del nostro menù. Va caricata un’immagine di 16 x 16 pixel.
- $position , Posizione del pulsante, nel menù di amministrazione. Di default viene inserito alla fine del menù. Utilizzando una posizione in cui è già presente un elemento, questo verrà sostituito.
2 Dashboard 4 Separator 5 Posts 10 Media 15 Links 20 Pages 25 Comments 59 Separator 60 Appearance 65 Plugins 70 Users 75 Tools 80 Settings 99 Separator
Apriamo, come al solito, il file functions.php e scriviamo:
function add_menu()
{
add_menu_page("Amministrazione", "Theme Options", 'administrator', 'theme-option', 'themeoption', '' ,61 );
}
add_action('admin_menu', 'add_menu');
function themeoption()
{
echo "<h2> Amministrazione </h2>";
}
Il codice appena scritto è abbastanza semplice, la funzione di Worpdress viene agganciata all’action admin_menu
Andando nel back-end di WordPress, vedremo che è presente una nuova voce “Theme Options” collegata alla nostra pagina di amministrazione, in cui troveremo il titolo che abbiamo aggiunto, Amministrazione
Ora abbiamo due possibilità, o creare l’option panel in un’unica pagina, oppure dividerla in più sezioni. Nel secondo caso è possibile aggiungere una o più sottovoci a Theme Options, utilizzando la funzione add_submenu_page().
- $parent_slug , slug dell’elemento a cui aggiungere la sottovoce, di seguito la lista delle voci già presenti nell’amministrazione.
Dashboard: add_submenu_page( 'index.php', ... ); Articoli: add_submenu_page( 'edit.php', ... ); Media: add_submenu_page( 'upload.php', ... ); Links: add_submenu_page( 'link-manager.php', ... ); Pagine: add_submenu_page( 'edit.php?post_type=page', ... ); Commenti: add_submenu_page( 'edit-comments.php', ... ); Custom Post Types: add_submenu_page( 'edit.php?post_type=your_post_type', ... ); Aspetto: add_submenu_page( 'themes.php', ... ); Also see add_theme_page() Plugins: add_submenu_page( 'plugins.php', ... ); Also see add_plugins_page() Utenti: add_submenu_page( 'users.php', ... ); Also see add_users_page() Strumenti: add_submenu_page( 'tools.php', ... ); Also see add_management_page() Impostazioni: add_submenu_page( 'options-general.php', ... ); Also see add_options_page()
- $page_title , il titolo della pagina gestito dal tag “title“
- $menu_title , il titolo della sottovoce di menù.
- $capability , Quale gruppo di utenti ha accesso alla pagina.
- $menu_slug , Slug di riferimento del menù.
- $function , Nome della funzione a cui agganciare il menù.
Aggiungiamo la funzione dopo add_menu_page():
add_submenu_page( "theme-option", "Testata", "Testata", 'administrator', "theme-header", "themeheader" );
Dopo function themeoption() … aggiungiamo:
function themeheader()
{
echo "<h2> Testata </h2>";
}
Ecco il risultato.
In alternativa avremmo potuto utilizzare una sola pagina e collegarla ad una sottovoce di Aspetto, in questo modo:
add_submenu_page( "theme-option", "Theme Option", "Theme Option", 'administrator', "theme-option", "themeoption" );
Ecco il codice completo visto oggi.
function add_menu()
{
add_menu_page("Amministrazione", "Theme Options", 'administrator', 'theme-option', 'themeoption', '' ,61 );
add_submenu_page( "theme-option", "Testata", "Testata", 'administrator', "theme-header", "themeheader" );
}
add_action('admin_menu', 'add_menu');
function themeoption()
{
echo "<h2> Amministrazione </h2>";
}
function themeheader()
{
echo "<h2> Testata </h2>";
}
Oggi abbiamo visto come creare un elemento del menù di amministrazione di WordPress, collegato al pannello di amministrazione del tema. Nella prossima lezione andremo a creare il pannello, aggiungendo il form in cui gestire gli elementi.
Nella precedente lezione abbiamo visto come gestire, da amministrazione, lo sfondo del nostro sito senza dover intervenire sul codice. Oggi invece vedremo come gestire la testata, rendendo possibile sia la scelta di un’immagine, che la presenza o meno del titolo e della descrizione presenti tra le Impostazioni di WordPress.
Fino alla versione 3.3 di WordPress, era necessario utilizzare la funzione add_custom_image_header() che prevede 3 valori:
- $header_callback, (obbligatorio) richiamo all’hook “wp_head”, in cui agganciare il codice css necessario alla corretta visualizzazione della testata.
- $admin_header_callback, (obbligatorio) utilizzato per la visualizzazione della testata, nel pannello di amministrazione.
- $header_callback, (obbligatorio) utilizzato per personalizzare l’anteprima della testata, nel pannello di amministrazione.
Apriamo il file functions.php e scriviamo
define('HEADER_TEXTCOLOR', '000');
define('HEADER_IMAGE', '%s/images/default_header.jpg'); // %s è il percorso del nostro tema
define('HEADER_IMAGE_WIDTH', 775);
define('HEADER_IMAGE_HEIGHT', 200);
Abbiamo appena definito 4 costanti, impostando il colore del testo, un immagine di default e le dimensioni dell’immagine. Successivamente scriviamo:
function header_style() { ?>
<style type="text/css">
#the-header {
background: url(<?php header_image(); ?>);
}
</style>
<?php } ?>
Questa funzione genererà il codice css necessario per visualizzare la testata, è molto semplice ma può essere personalizzato come meglio si crede.
function admin_header_style() { ?>
<style type="text/css">
#headimg {
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
background: no-repeat;
}
</style>
<?php } ?>
Questa invece, servirà gestire il pannello di amministrazione in cui caricare l’header. Per ultimo scriviamo:
add_custom_image_header('header_style', 'admin_header_style');
A questo punto, andando nel back end di WordPress, dovreste trovare, sotto Aspetto, la nuova voce Testata.
Per visualizzare la testata possiamo o aggiungere un div avente come ID “customheader” nel punto in cui vogliamo farla visualizzare, oppure generare direttamente l’immagine in questo modo:
<img src="<?php header_image(); ?>" alt="Header" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" />
Ecco una prova della seconda soluzione, inserendo la testata sotto al logo e al menù.
Poiché, dall’ultima versione di WordPress, la funzione add_custom_image_header() non è più supportata, è necessario verificare la versione in uso (come già fatto per lo sfondo) ed utilizzare add_theme_support(‘custom-header’).
Prevede i seguenti parametri:
- default-image, immagine di default
- random-default, valore booelano per indicare se visualizzare casualmente le immagini di default
- width, larghezza dell’immagine
- height,altezza dell’immagine
- flex-height, larghezza flessibile
- flex-width, altezzaflessibile
- default-text-color, colore di default del testo
- header-text, valore booleano per indicare se visualizzare o meno il testo
- wp-head-callback, funzione già vista in precedenza, bisogna indicare la stessa
- admin-head-callback, funzione già vista in precedenza, bisogna indicare la stessa
- admin-preview-callback, funzione già vista in precedenza, bisogna indicare la stessa
Ora, per garantire la piena compatibilità con tutte le versioni di WordPress, eliminiamo solalemente add_custom_image_header() e scriviamo:
$args = array(
'flex-width' => true,
'width' => 980,
'flex-height' => true,
'height' => 200,
'default-text-color' => '#000',
'header-text' => true,
'default-image' => get_template_directory_uri() . '/images/header.jpg',
'wp-head-callback' => 'header_style',
);
if( version_compare( $wp_version, '3.4', ">=" ) )
add_theme_support( 'custom-header', $args );
else
add_custom_image_header('header_style', 'admin_header_style');
Cambierà poco o nulla, è possibile lasciare lo stesso codice all’interno dell’header, per visualizzare l’immagine. Per aggiungere il titolo e la descrizione, basterà utilizzare la funzione bloginfo() :
<!--?php bloginfo('name') ?--> // Per il nome del blog
<!--?php bloginfo('description') ?--> // Per la descrizione del blog
Dalla versione 3.4 di WordPress poi, è presente la nuova funzione di personalizzazione live dei temi e quello che abbiamo visto nella lezione di oggi e in quella precedente, è perfettamente compatibile con questa funzione. Andando su Aspetto e poi Temi, vedremo questo nuovo pulsante “Personalizza”
Da cui possiamo gestire i colori dello sfondo, le immagini, l’immagine della testata ecc.
Oggi abbiamo visto come gestire, da amministrazione, la testata del nostro sito, è possibile personalizzare al meglio la grafica agendo sul codice css. Dalla prossima lezione andremo a costruire il pannello vero e proprio.
Alla prossima settimana.
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:
- $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.
- $post-thumbnails, ovvero il supporto alle thumbnails dei post, abbiamo già visto in passato il funzionamento.
- $custom-background, ovvero il supporto a sfondi personalizzati. Sostituisce, dalla versione 3.4 in poi, la precedente feature add_custom_background()
- $custom-header, ovvero il supporto ad immagini nella testata. Sostituisce, dalla versione 3.4 in poi, la precedente feature add_custom_image_header()
- $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.
Siamo quindi arrivati all’ultima lezione dedicata alla creazione di temi per WordPress. Oggi ci occuperemo della parte finale del nostro tema, ovvero il footer. Creiamo un nuovo file vuoto e rinominiamolo footer.php. Al suo interno andrà inserito, oltre al codice html necessario per la visualizzazione degli elementi che decidiamo noi, anche la chiusura dei tag body e html, ecco perché non l’abbiamo fatto in precedenza. Apriamo il file ed aggiungiamo:
<div id="footer"> <!-- contenuto del footer --> </div> <div class="clear"></div> <!-- fine wrapper --> </div> <?php wp_footer(); ?> </body> </html>
Come avete potuto notare è presente, come nell’header, un gancio necessario ad includere eventuali tags di chiusura ed elementi generati da plugin di terze parti ma anche per il caricamento dell’admin bar una volta loggati al sito. Sto parlando di wp_footer(). Fatto questo il nostro tema è completato, volendo possiamo predisporre il footer per ospitare dei widget, poiché abbiamo già aggiunto la sidebar nel file function.php, dobbiamo solo aggiungere il codice necessario per integrarla nel footer, al posto del commento “contenuto del footer“, scriviamo:
<?php (dynamic_sidebar('footer-sidebar-area')) ?>
Mentre, nel foglio di stile, aggiungiamo:
/* Widget */
.widget-box { float:left; margin:0 5px; font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:1.6em; color:#262626; text-decoration:none;text-shadow:1px 1px 1px #fff; }
.widget-box h2 { font-size:16px;font-family:Verdana, Geneva, sans-serif;line-height:1.6em; color:#007fa6; text-decoration:none;text-shadow:1px 1px 1px #fff; }
.widget-box ul {list-style:none; }
.widget-box a, .widget-box li a {font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:1.6em; color:#007fa6; text-decoration:none;text-shadow:1px 1px 1px #fff; margin:0 0 0 10px; }
.widget-box a:hover, .widget-box li a:hover { color:#262626;}
/* Footer */
#footer { width:950px; padding:5px; margin:auto; }
.footer-box { text-align:center;font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:1.6em; color:#262626; text-decoration:none;text-shadow:1px 1px 1px #fff; }
Infine colleghiamo il footer agli altri file necessari al nostro sito (index.php, single.php, archive.php, search.php, 404.php e page.php) inserendo, alla fine di essi:
<?php get_footer(); ?>
Ora, nell’amministrazione di WordPress, aggiungiamo qualche widget nel footer.
E questo è ciò che vedremo nel sito, certamente potrà essere migliorato graficamente lavorando con i fogli di stile e con l’html./p>
Se vogliamo, possiamo anche aggiungere un testo relativo al copyright del nostro sito/blog. Prima della chiusura dell’ultimo div scriviamo:
<div class="footer-box"> Copyright WP in Progress. </div>
La prima serie di lezioni dedicati allo sviluppo di temi per WordPress è giunto al termine, quello che avete imparato fino ad’ora è sufficiente per iniziare a realizzare un tema tutto vostro. L’unico limite è la vostra fantasia ed il livello di conoscenza di html, css e jquery. Le prossime lezioni saranno dedicate all’integrazione di nuove funzionalità al nostro tema, aggiungendo un pannello di amministrazione per gestirne le varie funzionalità, creando nuovi widget da inserire nella sidebar e nel footer e molto altro ancora. Il blog si prende una pausa estiva e quindi, nel mese di Agosto, non verrà aggiornato.
Dal pulsante “Download” in fondo all’articolo, potete scaricare il tema che abbiamo realizzato (ci sono delle lievi differenze, è presente un unico loop che viene richiamato nei template in cui è richiesto, invece di caricarlo in ognuno di essi)
Vi dò appuntamento ai primi di settembre con un tutorial su come creare un widget che visualizzi gli ultimi tweet dell’account impostato dall’amministrazione.
Buone ferie 🙂
