Creare un Tema WordPress – Il Loop

Il loop

Nelle lezioni precedenti abbiamo finalmente completato l’header del nostro tema, oggi andremo ad analizzare il loop, ovvero il sistema utilizzato da WordPress per visualizzare il contenuto della maggior parte dei template che compongono il nostro tema, ad esempio per i post, le pagine, una specifica categoria, i risultati di una ricerca ecc.

La sua struttura è molto semplice, analizziamola insieme:

/*INIZIO DEL LOOP */
if ( have_posts() ) : while ( have_posts() ) : the_post();

/*SERIE DI AZIONI DA ESEGUIRE*/

/*FINE DEL LOOP */
endwhile; else:  
/*MESSAGGIO DI ERRORE SE NON VIENE TROVATO NESSUN CONTENUTO*/
endif;

WordPress eseguirà il ciclo per tot volte quanti sono i post o le pagine presenti, se è necessario visualizzare un elenco di articoli di una categoria o i risultati di una ricerca, oppure una singola volta, se viene utilizzato per generare il contenuto di un post o di una pagina, in base all’id del contenuto.
Infatti lo stesso loop può essere utilizzato indifferentemente per qualsiasi template in cui è necessaria la sua presenza. Per questo motivo è preferibile dedicare al loop un template file e richiamarlo, dove richiesto, tramite la funzione get_template_part().

page.php

Per il momento limitiamoci a creare il file page.php e ad inserire il loop al suo interno, infine apriamo il nostro sito e clicchiamo su “Pagina di esempio”, non verrà visualizzato nulla, vediamo se riuscite a capirne il motivo…per prima cosa manca il richiamo all’header (dopo tutta la fatica fatta per costruirlo 🙂 ), quindi scriviamo:

get_header();

ed aggiorniamo la pagina, viene finalmente visualizzato il logo ed il menù ma non il contenuto della pagina. Nessun errore, dobbiamo utilizzare i tags necessari per visualizzare ciò che ci serve. Andiamo ad aggiornare il loop scrivendo:

<?php the_title('<h2>', '</h2>'); 

Come avrete intuito, the_title(), visualizzerà il titolo della pagina o del post ed accetta tre parametri: the_title($prima,$dopo, $echo). $prima è quello che dovrà essere visualizzato prima del titolo, $dopo quello che dovrà essere visualizzato dopo il titolo e $echo è un valore booleano ed indica se è visibile o meno, di default è impostato su TRUE. Racchiudendo the_title() all’interno del tag h2 avremmo ottenuto lo stesso risultato.

<h2><?php the_title();</h2> 

È necessario creare un blocco centrale in cui far visualizzare il contenuto delle pagine e dei post. Apriamo il file “style.css” e scriviamo:

/* Post */

.post { padding:10px; }
.post p, .post span, .post .the-post{ font-size:14px; font-family:Verdana, Geneva, sans-serif;line-height:1.4em}
.post a{ color:#007fa6; text-decoration:none;text-shadow:1px 1px 1px #fff; }
.post a:hover{ color:#262626; }
.post h2 a { font-size:16px;font-family:Verdana, Geneva, sans-serif;line-height:1.6em; color:#007fa6; text-decoration:none;text-shadow:1px 1px 1px #fff; }
.post h2 a:hover { color:#262626;}

Torniamo in page.php, eliminiamo tutto ciò che è presente dopo il richiamo dell’header e sostituiamolo con:

<!-- inizio content -->
<div id="content">
<div class="post"; 
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
echo '<div class="post">';
the_title('<h2>', '</h2>');
echo '</div>';
endwhile; else: echo "Nessun post presente";
endif;
?>
<!-- fine post -->
</div>
<!-- fine content -->
</div>
<!-- fine wrapper-->
</div>

Analizziamo il codice appena scritto, il loop verrà caricato all’interno del blocco centrale mentre il blocco contenente i post verrà visualizzato tot volte quanti sono i post da visualizzare, nel caso il loop venga utiizzato per generare il contenuto di una categoria altrimenti verrà visualizzato una sola volta,se il loop genera il contenuto di una pagina o di un post, come in questo caso. RItorniamo alla home del nostro sito.

Il Contenuto

Ora che abbiamo inserito il titolo della nostra pagina, aggiungiamo il contenuto della pagina. Torniamo in page.php e, dopo the_title() scriviamo:

the_content();

La funzione the_content(), serve per generare il contenuto della pagina o del post corrente. Se, all’interno di un post, abbiamo utilizzato il tag per dividere il testo introduttivo dal contenuto vero e proprio, the_content() visualizzerà solo tutto ciò che è stato scritto prima del tag more generando il pulsante “Continua” per aprire l’articolo, questo solo se ne stiamo visualizzando un elenco (come i post di una categoria) e viene ignorato per i contenuti singoli (ad esempio una pagina, come nel nostro caso, oppure un post).Se torniamo al nostro sito troveremo anche il contenuto della pagina e, per il motivo appena detto, il tag more è stato ignorato.

Data di creazione

Per visualizzare la data di creazione dell’articolo o della pagina dobbiamo utilizzare la funzione the_date(), accetta quattro parametri (opzionali):
$formatodata -> Il formato della data, di default è F j Y, ovvero mese per intero, giorno in cifre ed anno per interno. Potete trovare maggiori informazioni nella guida ufficiale di WordPress in cui viene spiegato la formattazione della data.
$prima -> Cosa visualizzare prima della data.
$dopo -> Cosa visualizzare dopo la data.
$echo -> Valore booleano che indica se la data è visibile o meno, di default è TRUE.
Torniamo in page.php e, dopo il titolo, scriviamo:

the_date('Y-m-d', '<h3>', '</h3>');

Per mostrare la data nel formato italiano, scambiamo l’anno con il giorno:

the_date('d-m-Y', '<h3>', '</h3>');

Se vogliamo inserire, al titolo della pagina un collegamento ipertestuale alla pagina stessa, dobbiamo utilizzare la funzione the_permalink(). Sostituiamo the_title() con il seguente codice:

/* scriveremo del codice html, quindi utilizzamo il tag php di chiusura */
?>
<h2> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?>  </a> </h2>
<?php

Aggiungiamo anche l’autore della pagina, utilizzando la funzione the_author(), dopo il titolo:

Scritto da <?php the_author() ?>

Per visualizzare in quale o quali categorie è stato inserito un post, utilizziamo la funzione the_category(). Tale funzione accetta tre parametri:

1. $separatore, Cosa utilizzare per separare le categorie.
2. $sottocategorie, Come visualizzare i collegamenti delle sottocategorie, impostando ‘single’ e ipotizzando di aver inserito un post sia nella categoria A e sia nella sottocategoria B di A, il nome visualizzato sarà composto dalla categoria A $separatore categoria B.(Es Sport/Calcio avendo scelto uno slash come separatore).
   Impostando ‘multiple’ verrà visualizzato il nome completo della sottocategoria senza la presenza, nel nome del collegamento alla categoria, della categoria principale (Es. Verrà visualizzato solo Calcio senza Sport)
3. $separatore, Cosa utilizzare per separare tra loro le categorie.

Supporto alle thumbnails

Dalla versione 2.9 di WordPress, è possibile aggiungere un’immagine rappresentativa di un articolo, semplicemente cliccando, una volta caricata l’immagine, in “Utilizza come immagine in evidenza“, se il tema utilizzato non supporta questa funzionalità, il pulsante appena descritto non sarà presente nè in fase di caricamento e nè in fondo sulla colonna destra. Integrarla oppure aggiungerla al nostro nuovo tema è abbastanza semplice. Dobbiamo utilizzare la funzione add_theme_support().

Innanzitutto apriamo il file function.php ed aggiungiamo:

add_theme_support( 'post-thumbnails' ); 

Possiamo decidere in quale tipo di contenuto integrare le thumbnails in questo modo:

// Solamente nei post
add_theme_support( 'post-thumbnails', array( 'post' ) );    
// Solamente nelle pagine
add_theme_support( 'post-thumbnails', array( 'post' ) );      
// Solamente nei post, nelle pagine e in un custom post "prodotti"
add_theme_support( 'post-thumbnails', array( 'post','page','prodotti' ) );          

Successivamente, nel punto del loop dove vogliamo che appaia la thumbnail, dobbiamo utilizzare la funzione
the_post_thumbnail(), che accetta due parametri:

1. $dimensione, la larghezza in pixel dell’immagine o il formato di default a scelta tra “thumbnail”, “medium”, “large” e “full”.
2. $attr, array di attributi da utilizzare, come la classe che verrà impostata all’immagine, il title o il testo alternativo .

if ( has_post_thumbnail() ) {
/* DEFAULT */
the_post_thumbnail();

/* DIMESIONI PERSONALIZZATE */
the_post_thumbnail(array(300,200));

/* FORMATO IMMAGINE */
the_post_thumbnail('small');
}

/* ATTRIBUTI */
$attr= array(
'class'	=> "attachment-$size",
'alt'	=> trim(strip_tags( wp_postmeta->_wp_attachment_image_alt )),
'title'	=> trim(strip_tags( $attachment->post_title )),
);

the_post_thumbnail($attr);

In alternativa possiamo impostare una dimensione di default, tramite la funzione set_post_thumbnail_size() che accetta 3 parametri:

1. $larghezza, la larghezza in pixel dell’immagine.
2. $altezza, l’altezza in pixel dell’immagine.
3. $crop, valore booleano per indicare se l’immagine andrà ridimensionata oppure ritagliata ai lati o dalla parte superiore e inferiore, di default è impostato FALSE, ovvero il ridimensionamento senza ritagliare l’immagine.

set_post_thumbnail_size (150, 150, true);

Per impostare nuovi formati da utilizzare secondo necessità, dobbiamo utilizzare la funzione add_image_size() e prevede quattro parametri:

1. $nome,nome del formato della miniatura.
2. $larghezza, la larghezza in pixel dell’immagine.
3. $altezza, l’altezza in pixel dell’immagine.
4. $crop, valore booleano per indicare se l’immagine andrà ridimensionata oppure ritagliata ai lati, di default è impostato FALSE, ovvero il ridimensionamento senza ritagliare l’immagine.

add_image_size( 'immagini-slide', 600, 300);

Per richiamare nel loop, ‘immagini-slide‘, dobbiamo semplicemente scriverne il nome tra parentesi:

if ( has_post_thumbnail() ) {
the_post_thumbnail('immagini-slide');
}

archive.php

Facciamo una prova, copiamo l’intero codice appena scritto ed inseriamolo, creando prima il file, in archive.php aggiungendo, dopo la visualizzazione della data:

?>
Inserito nella categoria: <?php the_category(','); ?>
<?php

Torniamo nel nostro sito ed andiamo in Senza Categoria dal menù, ecco quello che verrà visualizzato.

Avrete notato che, nel primo post visualizzato, è presente anche il pulsante “continua” generato dal tag more utilizzato per dividere il contenuto dell’articolo dal suo riassunto. Ma cosa succerebbe se non venisse inserito? Sarebbe visualizzato l’intero articolo, comprese eventuali immagini. Per visualizzare una breve introduzione, anche senza la presenza del tag more ci viene in aiuto la funzione the_excerpt() che, di default, visualizza le prime 55 parole del post oppure il riassunto impostato manualmente, rimuovendone la formattazione le immagini presenti. Come indicato nel codex di WordPress, è possibile aumentare o diminuire la lunghezza del riassunto intervenendo nel file function.php e scrivendo, dopo il menù personalizzato:

function lunghezza_riassunto() { return 10; }
add_filter( 'excerpt_length', 'lunghezza_riassunto', 999 );

Se adesso aggiorniamo la pagina nel nostro sito vedremo che il limite è stato diminuito a 10 parole. Quello che abbiamo fatto è stato creare una funzione chiamata lunghezza_riassunto ed impostare, come valore di ritorno, 10 ovvero il limite di parole da visualizzare ed infine abbiamo collegato la funzione ad un filter hook chiamato excerpt_length. I filter hooks altro non sono che ganci che permettono di effettuare modifiche e personalizzazioni su come generare il contenuto delle pagine e dei post senza intervenire direttamente nel core di WordPress. Esistono anche altri tipi di hooks o ganci, ovvero quelli di azione ma ci torneremo tra un pò di tempo, ora rischierei di confondervi troppo le idee.

Per personalizzare […] che the_excerpt() aggiunge alla fine di ogni post scriviamo:

function leggi_tutto($more) {global $post;
return '<a href="'. get_permalink($post->ID) . '">Leggi Tutto</a>';
}
add_filter('excerpt_more', 'leggi_tutto');

In questo modo verrà visualizzato un pulsante Leggi Tutto alla fine di ogni post.

Uno degli argomenti che vedremo in futuro sarà la visualizzazione dei commenti alla fine di ogni post, intanto però diamo qualche informazione al visitatore sul numero di commenti presenti, utilizzando la funzione comments_popup_link(). Questa funzione prevede cinque parametri:

1. $nessuncommento, il testo da visualizzare nel caso non fossero presenti ancora commenti.
2. $uncommento, il testo da visualizzare nel caso fosse presente un solo commento.
3. $piucommenti, il testo da visualizzare nel caso fossero presenti più commenti.
4. $classecss, la classe css da utilizzare per visualizzare le informazioni sui commenti.
5. $commentidisabilitati, il testo da visualizzare nel caso i commenti per quel post fossero stati disabilitati.

<?php comments_popup_link( 'Nessun commento', '1 commento', '% commenti', 'css-commenti', 'Commenti disabilitati'); ?>

Paginazione

Come ultima cosa aggiungiamo un menù per visualizzare gli articoli più recenti e meno recenti, il valore di default è impostato a 10 articoli, ma è possibile modificarlo aprendo, dal back-end di WordPress, “Impostazioni” -> “Lettura” -> “Le pagine del blog visualizzano al massimo”. Il menù è generato tramite la funzione posts_nav_link() ed accetta tre parametri:

1. $separatore, cosa visualizzare come separatore tra i link.
2. $indietro, cosa visualizzare per andare agli articoli precedenti.
3. $avanti, cosa visualizzare per andare agli articoli successivi.

Scriviamo, dopo the_excerpt():

posts_nav_link( " - ", "prec", "succ" );

Per visualizzare separatamente i due pulsanti, dobbiamo utilizzare le funzioni next_posts_link() per gli articoli successivi e previous_posts_link() per gli articoli precedenti, entrambi accettano due parametri:

1. $pulsante, cosa visualizzare come testo del pulsante.
2. $limite, limite della paginazione, di default è 0 ovvero illimitato.

next_posts_link(__('« Precedenti'));
previous_posts_link(__('Successivi »'));

Con un pò di Css è possibile personalizzare la visualizzazione dei pulsanti.
. Invece, se vogliamo integrare una paginazione dei risultati ottenuti, dobbiamo utilizzare la funzione paginate_links(), che accetta 13 parametri. Vediamoli insieme.

1. $base, viene utilizzato per indicare l’ url che successivamente verrà utilizzato per generare i link della paginazione, di default è %_%
2. $format, serve per indicare la struttura dell’url che verrà generato.
3. $total, serve per indicare il numero totale di pagine da generare.
4. $current, serve per indicare il numero della pagina corrente.
5. $show_all, è un valore booleano, se impostato su TRUE, visualizzerà l’intero elenco di pagine invece che un breve elenco di pagine vicino quella corrente.
6. $end_size, è correlato al precedente parametro ed indica quante pagine visualizzare all’inizio ed alla fine, nel caso si decida di visualizzare un elenco breve rispetto a tutte le pagine.
7. $mid_size, è correlato ai precedenti due parametri, ed indica quante pagine visualizzare a destra e a sinistra di quella corrente
8. $prev_next, è un valore booleano, e viene utilizzato per generare o meno i pulsanti per scorrere le pagine. Di default è TRUE.
9. $prev_text, Il testo del pulsante per andare indietro, tra i risultati.
10. $next_text, Il testo del pulsante per andare avanti, tra i risultati.
11. $tipo, il tipo di elemento da generare, può essere di tre tipi.
    • plain, verranno generati i link, senza essere racchiusi in nessun elemento
    • array, un array per generare la lista di link .
    • list, i link verranno racchiusi in una lista non ordinata.
12. $add_args, array che verrà aggiunto alla fine di ogni link.
13. $add_fragment, una stringa che verrà aggiunta alla fine di ogni link .

<?php
global $wp_query;
echo paginate_links( array(
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages
) );
?>

Template personalizzati per le pagine

Torniamo per un secondo al template per le pagine, è possibile crearne di differenti e assegnarli ad una specifica pagina in fase di realizzazione. È necessario creare un nuovo file, non ha importanza il nome che gli daremo, l’importante è che cominci con:

<?php
/*
Template Name: Nome del Nostro Template
*/
?>

Tornando all’amministrazione troveremo, aggiungendo una nuova pagina (ricordiamoci anche di collegarla al menù, cosi da vederne le modifiche), una lista di template personalizzati che prima non era presente:

Ora, copiamo l’intero contenuto del file page.php e personalizziamolo a seconda delle nostre necessità. Ad esempio inseriamo l’autore e la data di creazione della pagina.

<?php
/*
Template Name: Nome del Nostro Template
*/
?>

<?php get_header(); ?>

<!-- inizio content -->
<div id="content">

<div class="post">

<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
echo '<div class="the-post">'; 
/* utilizzeremo direttamente del codice html, quindi utilizzamo il tag php di chiusura */ 
?>
<h2> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?>  </a> </h2>

<span class="author">Scritto da <?php the_author() ?> il <?php the_date('d-m-Y'); ?> </span>

<?php
echo '<p>'.the_content().'</p>';
?>
<?php
echo '</div>';
endwhile; else: echo "Nessun post presente";
endif;
?>
<div class="clear"></div>
</div>
<!-- fine content -->
</div>

Questo è il risultato:

Le possibilità di personalizzazione sono infinite, sta a noi sfruttarle come meglio riteniamo opportuno.

In questa lezione abbiamo analizzato il loop e le sue funzionalità base, adatte nella maggior parte dei casi. Nella prossima lezione vedremo come sfruttare a pieno le sue potenzialità.