Tema WordPress: nascondere titolo header, rendere header cliccabile, aggiungere menu

Share:
Stampa

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/.

Esempio header art WordPress

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.

  • http://artisticked.wordpress.com Sreehari Varma

    Thanx a lot for using my header art as an example and I feel like i got featured…… Appreciate your support and best wishes…!!

    Peace from India…..!!

  • Sabrina

    Ciao Niccolò,

    sto testando un blog wordpress in locale e vorrei rendere il mio header cliccabile solo che si sovrappone inevitabilmente al titolo dell’ipotetico logo con descrizione che wordpress mette di default (peraltro cliccabile). I miei codici sembrano essere differenti da quelli presentati in questo articolo. Non vorrei perdere l’indicizzazione nei motori di ricerca. Ti incollo il codice dell’header:
    Saresti così gentile da aiutarmi? Grazie mille!

    • http://wordpress.altervista.org/ Niccolò Tapparo

      Dovresti mettere il blog online, altrimenti così è difficile capire cosa intendi. Che tema stai usando? Cosa vorresti rendere cliccabile, l’immagine, il logo? Se vuoi inserire del codice nei commenti, ricordati di sostituire tutti i < e > rispettivamente con &lt; e &gt; altrimenti viene eliminato da WordPress.

  • http://gek60.altervista.org/ bulsa

    ciao niccolò, a me non risulta in header.php il codice

    <a href="/”>
    <!–?php bloginfo(‘name’); ?–></a>

    ma solo

    <form id="searchform2" method="get" action="”>

    potresti consigliarmi come potrei risolvere. ti ringrazio

  • http://gek60.altervista.org/ bulsa

    dimenticavo il tema in uso e: Tema corrente

    corp 1.3
    Dansette

    • http://wordpress.altervista.org/ Niccolò Tapparo

      Che modifica vorresti effettuare?

  • http://gek60.altervista.org/ bulsa

    ciao niccolò, vorrei inserire un immagine fissa con sempre la descrizione del blog

  • http://wordpress.altervista.org/ Niccolò Tapparo

    Guardando l’html del tuo tema, subito dopo il form c’è un h3 con il titolo. Non so se è presente così anche nel php, oppure se viene generato da una funzione, ma dovresti sostituire quello con un’img racchiusa da un tag a.

  • http://gek60.altervista.org/ bulsa

    perdonami ma non ti seguo la tua risposta tecnica non rientra nella mia capacità cognitiva, se mi spieghi meglio forse riesco a comprendere ;)

    • http://wordpress.altervista.org/ Niccolò Tapparo

      In header.php, sotto al codice del form cosa trovi?

  • http://gek60.altervista.org/ bulsa

    questo trovo

    <form id="searchform2" method="get" action="”>

    <input type="text" onfocus="doClear(this)" value="” class=”searchinput” name=”s” id=”s” size=”20″ /> <input type="submit" class="searchsubmit" value="” />

    <a href="/”>

    <a href="/”>Home

  • http://gek60.altervista.org/ bulsa

    il codice che ho inserito non lo riporta corretto nel commento

    • http://wordpress.altervista.org/ Niccolò Tapparo

      Nel tuo header.php, subito sotto al form c’è <h3><a href=”<?php bloginfo(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h3>, che è il codice da sostituire con <a href=”<?php bloginfo(‘home’); ?>/”><img src=”indirizzo dell’immagine” /></a>

  • http://gek60.altervista.org/ bulsa

    ti ringrazio niccolò, ora creo l’immagine poi provo a mettere in pratica il tuo consiglio ;)

  • http://gek60.altervista.org/ bulsa

    mi sorge un dubbio, creando io il banner immagine poi l’intestazione del blog rimane sovraimpressa all’immagine creata oppure scompare, o debbo crearla io sull’immagine

    • http://wordpress.altervista.org/ Niccolò Tapparo

      Il testo non rimane sovraimpresso. Lo devi inserire tu direttamente nell’immagine.

  • http://gek60.altervista.org/ bulsa

    ok ti ringrazio ;)

  • http://gek60.altervista.org/ bulsa

    Ciao Niccolò, ho creato il logo e aperto un blog per fare delle prove http://puffo60.altervista.org/ ora come puoi ben notare il logo da me creato rimane sotto all’header esistente, come faccio ad eliminarlo e fare andare il mio logo al posto dell’originale, ti ringrazio

  • Nicola

    Ciao Nicolò, premeto che non sono tanto bravo con i codici :-)
    Ho fatto delle prove ma non ho ottenuto un buon risultato.
    Mi potresti spiegare per piacere come modificare la header del mio blog.
    Ho creato questo logo: http://www.meditazionelaicaoccidentale.it/wp-content/themes/cleancorp/images/logo_mlo.png
    e vorrei inserirlo al posto del titolo.

    Questo è il blog: http://www.meditazionelaicaoccidentale.it

    Grazie mille.
    Nicola