Nello scorso tutorial abbiamo visto cos’è il loop di WordPress, come funziona e come integrarlo al meglio nel tema che stiamo sviluppando.
Abbiamo visto come ottenere l’output del contenuto degli articoli, ma al momento abbiamo integrato soltanto il contenuto testuale.
Oggi vedremo come personalizzare il loop: ricostruiremo fedelmente la struttura dei post del nostro layout, ma questa volta renderemo dinamico ogni singolo contenuto.
 

 
Apriamo il file index.php e il file index.html.
Index.php è il file in cui dobbiamo lavorare, index.html invece contiene la struttura statica del tema, in semplice codice html, e ci sarà molto utile averlo sempre a portata di mano dato che dobbiamo ricostruire la struttura dei post.
 

Il pulsante commenti

 
Consultando il file index.html vediamo che subito dopo l’apertura del div articoli abbiamo il pulsante che riporta il numero dei commenti.
Sotto il pulsante commenti abbiamo un div con classe clear, che ha la funzione di pulire il float del pulsante ripristinando così il normale flusso degli elementi.
 

1
2
3
4
5
6
7
8
9
10
11
12
13

<!--Inizio ARTICOLI-->
<div id="articoli">
 
        <!--Inzio COMMENTI-->
        <div class="commenti">
            	<p><a href="#">10 commenti</a></p>
        </div>
        <!--Fine COMMENTI-->
 
        <!--Classe CLEAR-->
        <div class="clear"></div>
 
</div>

Copiamo e incolliamo il div commenti e la classe clear appena sopra il div entry:
 

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

<!--Inizio POST-->
<div <?php post_class(); ?>>
 
        <!--Inzio COMMENTI-->
        <div class="commenti">
            	<p>< ?php comments_popup_link('0 Commenti', '1 Commento', '% Commenti'); ?></p>
        </div>
        <!--Fine COMMENTI-->
 
        <!--Classe CLEAR-->
        <div class="clear"></div>
 
 
        <!--Inizio contenuto post - ENTRY-->
	<div class="entry">
		< ?php the_content(__('Continua a leggere...')); ?>
	</div>
	<!--Fine Contenuto Post-->
 
</div>
<!--Fine POST-->

La funzione php che abbiamo inserito nel div commenti serve a richiamare dinamicamente il numero di commenti per ogni singolo articolo.
 
I valori che abbiamo inserito (’0 Commenti’, ’1 Commento’, ‘% Commenti’) possono essere sostituiti con il testo che vogliamo visualizzare all’interno del pulsante commenti, ad esempio: (‘Zero commenti’, ‘Un commento’, ‘% commenti’) oppure (‘Commenta per primo’, ‘C’è un commento’, ‘Ci sono % commenti’), ecc..
 
Noi abbiamo racchiuso questa funzione all’interno di un paragrafo per mantenere inalterata la struttura del tema che abbiamo realizzato, in questo modo la funzione ci restituirà un link contenuto in un paragrafo:
 

1
2
3

<div class="commenti">
        <p><a href="#">10 commenti</a></p>
</div>

Tu puoi scrivere la funzione anche senza tag p, in questo modo ti verrà restituito semplicemente il link con il numero dei commenti all’articolo:
 

1
2
3

<div class="commenti">
        <a href="#">10 commenti</a>
</div>

Nel nostro caso il tag p ha una funzione ben precisa, lo abbiamo utilizzato per costruire la struttura del balloon:
 

 

La data

 
Torniamo a consultare il file index.html, l’elemento successivo è la data:
 

1
2

<!--DATA-->
<p class="data">12/02/2012</p>

Andiamo a sostituire il valore statico contenuto nel paragrafo data con una funzione che prelevi dinamicamente la data di ogni singolo post:
 

1
2
3
4

<!--DATA-->
<p class="data">
	< ?php the_time('d/m/y') ?> 
</p>

Visualizziamo un’anteprima
 

 
All’interno di questa funzione possiamo inserire diversi valori in base al formato di data che vogliamo ottenere.
Se avessimo scritto la Y maiuscola, quindi (‘d/m/Y’), avremmo ottenuto l’anno completo invece che abbreviato, cioè “07/12/2011″.
Se avessimo voluto ottenere un formato del tipo “07 dicembre 2011″ avremmo dovuto scrivere (‘j F Y’).
 

Il titolo

 
Torniamo in index.html e copiamo gli elementi che si trovano sotto la data, cioè il titolo e una classe clear:
 

1
2
3
4
5

<!--TITOLO POST-->
<h2>Titolo post</h2>
 
<!--Classe CLEAR-->
<div class="clear"></div>

Incolliamoli nel file index.php e sostituiamo il contenuto statico del tag h2 con la seguente funzione in grado di rendere il titolo dinamico:
 

1
2
3
4
5
6

<!--TITOLO POST-->
<h2>
        <a href="<?php the_permalink() ?>">
		< ?php the_title(); ?>
	</a>
</h2>

In questo modo nel tag h2 verrà mostrato il titolo del post, il quale sarà a sua volta contenuto all’interno di un link che punterà alla pagina del singolo articolo.
 
Proviamo a visualizzare un’anteprima
 

 
Il titolo è fucsia mentre noi l’avevamo previsto grigio.
Questo perché nel foglio di stile non abbiamo impostato nessuna regola css per il link contenuto all’interno del titolo, quindi WordPress prende la formattazione generica che abbiamo assegnato ai link, che è appunto fucsia.
 
Apriamo il file style.css, cerchiamo la regola relativa al titolo del post e aggiungiamoci una regola per il colore del link:
 

1
2
3
4
5
6
7
8
9
10
11

/*TITOLO POST*/
#contenitore #contenuti #articoli h2 {
	font-family: GardensC;
	font-size: 30px;
	color: #333;
	padding: 10px 0px 0px 30px;
	float: left;
}
#contenitore #contenuti #articoli h2 a {
	color: #333;
}

Ecco il risultato:
 

 

L’immagine di copertina

 
Abbiamo strutturato la nostra home page in modo che in tutti gli articoli abbiamo un’immagine di copertina (detta anche immagine in evidenza) sulla sinistra, mentre sulla destra abbiamo le prime righe dell’articolo e il pulsante “Continua a leggere” che ci permette di accedere alla pagina dell’articolo completo.
 
Per inserire l’immagine in evidenza ci sono vari sistemi, in questo caso faremo tutto a mano impostando una semplice classe.
 
Prepariamo l’immagine con il nostro programma di grafica: assegniamole un bordo grigio di 1px, ed impostiamo la larghezza a 610px e l’altezza a 406px.
 

 
Queste dimensioni ci serviranno più avanti, quando realizzeremo il template per la pagina del singolo articolo, in home page visualizzeremo soltanto una miniatura.
 
Carichiamo l’immagine all’interno dell’articolo utilizzando l’apposito pulsante “Aggiungi media”.
Selezioniamo la modalità codice cliccando sulla scheda HTML, visualizzeremo questo:
 

 
Per prima cosa eliminiamo il link che racchiude l’immagine:
 

1

<img src="http://miosito/wp-content/uploads/2011/12/Copertina_1.jpg" alt="" title="Copertina_1" width="610" height="406" class="alignnone size-full wp-image-197" />

In secondo luogo eliminiamo tutti gli attributi contenuti all’interno del tag img, ed aggiungiamo la classe copertina.
 

1

<img src="http://miosito/wp-content/uploads/2011/12/Copertina_1.jpg" class="copertina" />

Mandiamo a capo il paragrafo, in modo da posizionare il testo nella riga sotto l’immagine:
 

 
La struttura del nostro articolo comincia a prendere forma
 

 
Per oggi ci fermiamo qui: mancano ancora le categorie, il pulsante “Continua a leggere” e qualche altro dettaglio, ma ne parleremo nel prossimo tutorial.
 
Qui sotto puoi scaricare il tema Shadow con tutto il lavoro sul loop che abbiamo svolto negli ultimi due tutorial.