Header Art
Un termine che sta diventando comune nel web è header art. Esso rappresenta quelle immagini fatte a mano, utilizzando combinazioni di colori, forme, simboli, immagini e testo. Necessitano di molto tempo e fantasia per essere create, ma alla fine rendono il proprio blog unico. Esistono siti con ampi cataloghi di header art (per esempio http://www.header-art.com/), ma, se ci si vuole distinguere dagli altri e si vuole adattare il più possibile l’header alla grafica del blog, conviene crearla a mano. Qui sotto si può vedere un ottimo esempio di header art dal sito http://artisticked.wordpress.com/.
Per creare il proprio header art personalizzato, si può utilizzare qualsiasi programma di design grafico, come Adobe Photoshop, Adobe Elements, JASC PaintShop Pro, The Gimp e Macromedia Fireworks. Il programma scelto deve avere la capacità di ridimensionare l’immagine e salvarla in vari formati: si può scegliere tra jpg, gif, o png. Come ultimi accorgimenti, l’immagine creata dovrebbe sempre avere la dimensione del contenitore in cui andrà posizionata e non si dovrebbero superare i 50Kbyte come dimensione per non rallentare il caricamento della pagina e aumentare il consumo di banda
Nascondere il testo dell’header
Se si utilizza un header art contenente già nell’immagine il nome del blog, allora il testo diventa inutile, in quanto si sovrappone all’immagine e duplica il titolo. Per questo motivo sarebbe opportuno eliminarlo. Si può togliere dal codice di header.php la parte che stampa il titolo del blog e non apparirà più. Dal punto di vista dei motori di ricerca, però, un titolo ha un elevato peso all’interno della pagina e, se lo si elimina, le informazioni in esso contenute andranno perse ai fini dell’indicizzazione (le immagini non possono essere analizzate).
Un’alternativa può essere quella di cercare nel file style.css il selettore corrispondente al titolo (di solito h1) e assegnargli la direttiva display:none come in questo esempio:
h1 {display:none; font-size: 230%; color: blue;.......
In questo modo il testo è “fisicamente” presente, ma non viene visualizzato nel browser. Alcuni motori di ricerca però sono in grado di analizzare il CSS, ed escludono automaticamente gli elementi che hanno la direttiva display:none. Una possibile soluzione è quella di dare al testo un’indentazione negativa:
h1 {
font-size: 0;
text-indent: -1000px;
}
Così facendo, il testo viene indicizzato perché fisicamente presente, ma non si vede poiché la sua posizione è al di fuori della pagina. Questo espediente funziona con la maggior parte dei browser in circolazione, ma siccome sono in continuo aggiornamento, è meglio verificare.
Rendere l’intero header cliccabile
Per rendere l’intero header cliccabile, è necessario inserirlo all’interno di un link. Ci sono due metodi per farlo: si può inserire l”immagine direttamente nel file header.php del tema, racchiudendola in un link, oppure utilizzare il CSS per espandere l’area del link fino a ricoprire l’intero header. Il seguente esempio è riferito al tema Classic, ma i concetti possono essere estesi anche agli altri temi.
Se si decide di inserire l’immagine direttamente nel tema, allora si deve aprire il file header.php e sostituire le seguenti linee
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>/">
<!--?php bloginfo('name'); ?--></a></h1>
</div>
con
<div id="header"><code> <a href="<?php bloginfo('url'); ?>">
<img src="http://example.com/headerimage.jpg"
alt="<?php bloginfo('name'); ?>" />
</a>
<h1><a href="<?php bloginfo('url'); ?>">"
title="<!--?php bloginfo('name'); ?-->">
<!--?php bloginfo('name'); ?--></a></h1>
Come accennato nel paragrafo precedente, si può assegnare uno stile al titolo h1 per farlo comparire sovrapposto all’immagine, oppure per farlo scomparire.
Se invece si decide di utilizzare il CSS per rendere l’header cliccabile, allora si devono impostare le dimensioni di h1 in modo tale da coprire l’intera area dell’immagine di sfondo. Se il file header.php è simile al seguente
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>/">
<!--?php bloginfo('name'); ?--></a></h1>
</div>
allora si deve cercare nel foglio d stile (style.css) il selettore #h1 e modificarne le dimensioni, adattandole all’immagine di sfondo. Qui sotto si può vedere il codice per rendere cliccabile un’immagine di 400×100 pixel e nascondere il titolo.
#header h1 a {
width: 400px;
height: 100px;
display: block;
background: url(images/headerimage.gif) no-repeat top left;
}
#header h1 a span { display: none; }
Utilizzare delle immagini a rotazione
Ci sono molti script disponibili che consentono di visualizzare a rotazione immagini diverse sull’header, sulla sidebar o in altre posizioni. Uno di questi è Random Image Rotator. Lo script va salvato in una cartella differente da quella contenente le immagini da visualizzare sull’header chiamandolo per esempio rotate.php. Per vedere un’immagine diversa ogni volta che si carica la pagina, si deve modificare nel CSS (style.css) lo sfondo dell’header inserendo la chiamata allo script al posto dell’immagine:
#header {
background: url("/images/headerimgs/rotate.php")
no-repeat bottom center; }
In alternativa, si può chiamare direttamente lo script come sorgente di un tag img dentro ad un file del template (header.php nel nostro caso).
<img src="/images/headerimgs/rotate.php" alt="Un'immagine casuale" />
Aggiungere un menù di navigazione all’header
Per rendere più immediata la navigazione nel blog, si può decidere di aggiungere un menù di navigazione subito sotto l’header. Siccome dalla versione 3.0 di WordPress c’è un’apposita funzione per creare menù personalizzati, è meglio utilizzare quella, piuttosto che crearlo a mano. Per avere informazioni a riguardo, fare riferimento a questa guida.
