Tema WordPress: come costruire l’header

24 giugno 2012 |

| in Tutorial, Wordpress

cover tutorial EordpressFinalmente riprendiamo la nostra guida ai temi WordPress.
Ci eravamo lasciati con questo tutorial, scrivendo il codice relativo al tag head all’interno del file index.php.
Tuttavia, dato che è passato diverso tempo, prima di proseguire nella lettura ti consiglio di fare un breve ripasso delle lezioni precedenti.
 
Oggi entriamo nel vivo della questione: andremo a prendere la struttura portante in html (che abbiamo realizzato qui e qui) e la trasformeremo in un vero e proprio tema WordPress, rendendo dinamiche tutte le parti relative ai contenuti.
 
Riprendiamo il file index.php su cui abbiamo iniziato a lavorare nello scorso tutorial, ed occupiamoci del contenuto del tag body.
 

Contenitore


 
Le primissime righe di codice che incontriamo subito dopo la chiusura del tag head sono le seguenti:
 

1
2
3
4
5

<body>
 
<!--Inizio CONTENITORE-->
<div id="contenitore">
</div></body>

Abbiamo l’apertura del tag body e del div contenitore.
 
Ricordiamo che ad ogni ogni elemento html contenuto nel file index.php abbiamo associato delle regole css ben precise, le quali si trovano nel foglio di stile style.css.
 
In questo caso, al body abbiamo assegnato la texture nera floreale, mentre al div contenitore abbiamo assegnato uno sfondo bianco, una larghezza di 960px ed un’allineamento orizzontale centrato.
Tema wordpress sfondo body e contenitore
 

Header

 
Questo è tutto il codice html relativo all’header del nostro layout:
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!--Inizio HEADER-->
    <div id="top"></div>
    <div id="header">
 
        <!--Inizio Titolo-->
        <div class="titolo">
        	<h1>Shadow</h1>
            <p>Wordpress Theme</p>
        </div>
        <!--Fine TITOLO-->
 
        <!--Inizio NAVIGAZIONE-->
        <div class="nav">
        	<ul>
            	<li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contatti</a></li>
            </ul>
        </div>
        <!--Fine NAVIGAZIONE-->
 
    </div>
    <!--Fine HEADER-->

I primi due tag, cioè i div top ed header
 

1
2
3
4
5
6

<!--Inizio HEADER-->
    <div id="top"></div>
    <div id="header">
 
    ...
    </div>

rappresentano la parte strutturale dell’header, e di conseguenza devono rimanere statici.Tema wordpress contenitore header
Nello specifico il div top rappresenta la fascia fucsia e nera mentre il div header è il contenitore bianco all’interno del quale verranno posizionati i contenuti: titolo, descrizione del blog e menù di navigazione.
 
Questi elementi dovranno essere espressi in maniera dinamica in modo che, qualunque utente installi il nostro tema, abbia lo stesso layout grafico ma possa modificarne comodamente il titolo, le voci del menù, e tutti gli altri contenuti del sito.
 

Titolo

 
Il codice html relativo al titolo e alla descrizione del blog è il seguente:
 

1
2
3
4
5
6

<!--Inizio Titolo-->
<div class="titolo">
        <h1>Shadow</h1>
        <p>Wordpress Theme</p>
</div>
<!--Fine TITOLO-->

Abbiamo un div con classe titolo che ha la funzione di contenitore. Naturalmente questo div resterà statico in quanto si riferisce ad una parte strutturale della pagina.
 
Ora dobbiamo rendere dinamico il titolo, in modo che possa essere visualizzato quello che l’utente inserirà nel pannello di amministrazione del blog.
All’interno del tag h1 sostituiamo il nostro valore statico (Shadow) con il seguente valore dinamico:
 

1
2
3

<h1>
        < ?php bloginfo('name'); ?>
</h1>

Questa stringa dice a WordPress di andare a pescare il valore che l’utente ha inserito nel campo Titolo sito all’interno della scheda Impostazioni/Generale.
 
Per convenzione sarebbe bene che il titolo sia associato ad un link che punti alla home page del blog.
Possiamo ottenere questo link in maniera dinamica aggiungendo la seguente stringa:
 

1
2
3
4
5

<h1>
        <a href="<?php echo home_url(); ?>/" title="Home Page">
                < ?php bloginfo('name'); ?>
        </a>
</h1>

Per andare a pescare la descrizione del blog, all’interno del tag p inseriremo la seguente funzione
 

1

<p>< ?php bloginfo('description'); ?></p>

Ricapitolando, ecco come dovrà essere l’header del nostro tema WordPress rendendo dinamici titolo e descrizione:
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

   <!--Inizio HEADER-->
    <div id="top"></div>
    <div id="header">
 
        <!--Inizio Titolo-->
        <div class="titolo">
            <h1>
        <a href="<?php echo home_url(); ?>/" title="Home Page">
                < ?php bloginfo('name'); ?>
        </a>
          </h1>
           <p>< ?php bloginfo('description'); ?></p>
        </div>
        <!--Fine TITOLO-->
 
    </div>
    <!--Fine HEADER-->

Ed ecco l’anteprima del lavoro svolto oggi:
Tema wordpress header, titolo e descrizione.
Nel prossimo tutorial ci occuperemo del menù di navigazione.
 
 

 
 

 

3 Commenti


  1. 27 giugno 2012 at 12:41

    andrea

    Aspetto il prossimo tutorial del menù di navigazione.
    Grazie sempre.

    Rispondi
  2. 10 luglio 2012 at 13:10

    Francesco

    Molto interessante, sei sempre chiarissima!
    Grazie e al prossimo tutorial ;-)
    Francesco

    Rispondi
  3. 10 luglio 2012 at 13:37

    Pupixel

    Grazie a te Francesco,
    il prossimo tutorial su WordPress dovrebbe essere sfornato in giornata, ci sto lavorando proprio ora

    Rispondi



Lascia un commento





due − 1 =