Con il theme Default di WordPress nella container headerimg del documento html si trovano 2 link testuali. Qui viene il testo che รจ stato introdotto nella sezione Settings -> General nella pagina di amministrazione.
Il testo che viene scritto nel campo "Blog Title" viene introdotto nella variabile "home" ed il testo che viene scritto nel campo "Tagline" viene introdotto nella variabile "description".
Di seguito spiego come introdurre un’immagine quale il logo del sito al posto del titolo e della descrizione e come fare in modo che l’immagine e lo spazio intero di headerimg abbiano un link verso la pagina principale del sito (homepage) da qualsiasi pagina secondaria.
Aprire il template header.php e modificare le seguenti righe:
Originale:
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
Modificato:
<div id="header"> <div id="headerimg" onclick="location.href='http://www.domainname.com/'" title="Return to Homepage!" style="cursor: pointer;"></div> </div>
L’immagine va copiata nella sottodirectory /images della directory dove si trova il template che si sta modificando.
Nel foglio di stile style.css nella sezione headerimg si impostano le proprietà dell’immagine di sfondo con il suo percorso, la sua larghezza ed altezza. In questo caso l’immagine è larga e alta 100 pixel.
#headerimg {
background: url('images/logo.gif') no-repeat left;
margin: 7px 9px 0;
width: 100px;
height: 100px;
border-bottom: 3px double #E7E7E7;
}
Nel foglio di stile style.css si trova una seconda istruzione con la quale si indica l’altezza di headerimg
#headerimg {
margin: 0;
height: 102px;
width: 100%;
}
In questo caso la sezione headerimg è alta 102 pixel (1 pixel sopra ed un pixel sotto l’immagine) e prende tutta la grandezza del container.
Non ci sono articoli correlati.