WordPress Option Panel – Custom Header

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:

1. $header_callback, (obbligatorio) richiamo all’hook “wp_head”, in cui agganciare il codice css necessario alla corretta visualizzazione della testata.
2. $admin_header_callback, (obbligatorio) utilizzato per la visualizzazione della testata, nel pannello di amministrazione.
3. $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:

1. default-image, immagine di default
2. random-default, valore booelano per indicare se visualizzare casualmente le immagini di default
3. width, larghezza dell’immagine
4. height,altezza dell’immagine
5. flex-height, larghezza flessibile
6. flex-width, altezzaflessibile
7. default-text-color, colore di default del testo
8. header-text, valore booleano per indicare se visualizzare o meno il testo
9. wp-head-callback, funzione già vista in precedenza, bisogna indicare la stessa
10. admin-head-callback, funzione già vista in precedenza, bisogna indicare la stessa
11. 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.