Template files per Articoli

Rocco Vincy page.php, template file, template tags

Dopo aver appreso le basi che ogni sviluppatore dovrebbe avere per poter realizzare un Tema WordPress, iniziamo a vedere come creare i principali template files. In particolare, in questo articolo vedremo quali sono i Template Files che possono essere realizzati per mostrare i Post Type di tipo Post, cioè gli articoli.

Analizzando la gerarchia di WordPress, i template file che si occupano di visualizzare i Post Type di tipo Post (che ti ricordo sono gli articoli) sono:

single-post.php è il template file specifico per il Post Type di tipo Post. Tuttavia è sufficiente sostituire la parola post con il nome assegnato ad un qualsiasi Custom Post Type per ottenere il template specifico per quel particolare Type personalizzato;
single.php è il template file più usato per mostrare il contenuto di un singolo articolo, infatti è presente in quasi tutti i temi;
singular.php è il template file che viene eseguito per mostrare il contenuto di un articolo o di una pagina quando non sono presenti, nella directory del tema, single.php e/o page.php;
index.php, come abbiamo detto più volte, è un file obbligatorio che dev’essere presente in ogni tema e viene eseguito per mostrare qualsiasi contenuto se non sono presenti altri template files specifici;

I Template Files appena visti hanno il compito di mostrare il contenuto del singolo articolo. Ma, come sai, gli articoli possono essere anche suddivisi in categorie ed avere dei tags. Quindi si potrebbero voler visualizzare anche tutti gli articoli appartenenti ad una determinata categoria o che hanno un particolare tags.

Ma non solo!

Un visitatore potrebbe voler vedere tutti gli articoli appartenenti ad un autore o quelli pubblicati in una specifica data e cosi via.

Template Files per mostrare un elenco di articoli

Il template file principale che viene eseguito per mostra un elenco di articoli è archive.php.

Archive.php può mostrare un elenco di articoli appartenenti ad una categoria, con un particolare tags, che appartengano ad un autore specifico o pubblicati in una determinata data. Tuttavia se dovesse esistere un template file più specifico, sarà quest’ultimo ad avere la precedenza.

In particolare, sempre in base a ciò che leggiamo dalla gerarchia dei files di WordPress, i template files specifici che vengono eseguiti per mostrare elenchi di articoli sono:

author.php mostra i Post appartenenti ad un autore;
category.php mostra i Post di una specifica categoria;
tags.php serve per mostrare i Post che hanno un particolare tag;
taxonomy.php mostra i Post di una Tassonomia Personalizzata;
data.php mostra i Post di una particolare data che può essere un intero anno, un mese o una data specifica;
archive.php mostra l’elenco dei Post in assenza di uno o più dei template files appena visti;
index.php il template file che mostra qualsiasi contenuto in assenza di files specifici.

Normalmente, in un tema vengono creati solo i template single.php, per mostrare il singolo articolo, e archive.php per mostrare un elenco di Post. Gli altri template più specifici vengono implementati solo se c’è una reale necessità.

A questo punto, dopo aver visto quali sono i template che possiamo usare per mostrare contenuto di tipo Post, vediamo come andrebbero implementati.

Vedremo come creare single.php per visualizzare il singolo articolo e archive.php per mostrare un elenco di articoli. Come ti ho già detto, questi sono gli unici template implementati in un tema laddove non ci fosse la necessità di creare viste specifiche per i diversi Post Type.

D’altronde, è consigliabile creare un tema con una struttura il più semplice possibile, senza riempirlo di template files specifici se non c’è una reale necessità. Per esempio, la maggior parte degli sviluppatori, piuttosto che creare single-post.php, preferiscono implementare solo single.php essendo già abbastanza specifico per processare il contenuto di tipo Post (Articolo).

Single.php

Per imparare ad implementare in modo corretto il file single.php, useremo come esempio quello presente nel tema Twenty Fifteen:


<?php
/**
* The template for displaying all single posts and attachments
*
* @package WordPress
* @subpackage Twenty_Fifteen
* @since Twenty Fifteen 1.0
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main"> 
<?php
// Start the loop.
while ( have_posts() ) : the_post(); 
/*
* Include the post format-specific template for the content. If you want to
* use this in a child theme, then include a file called called content-___.php
* (where ___ is the post format) and that will be used instead.
*/
get_template_part( 'content', get_post_format() ); 
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif; 
// Previous/next post navigation.
the_post_navigation( array(
'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next', 'twentyfifteen' ) . '</span> ' .
'<span class="screen-reader-text">' . __( 'Next post:', 'twentyfifteen' ) . '</span> ' .
'<span class="post-title">%title</span>',
'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous', 'twentyfifteen' ) . '</span> ' .
'<span class="screen-reader-text">' . __( 'Previous post:', 'twentyfifteen' ) . '</span> ' .
'<span class="post-title">%title</span>',
) ); 
// End the loop.
endwhile;
?> 
</main><!-- .site-main -->
</div><!-- .content-area --> 
<?php get_footer(); ?>

Analizzando il template notiamo subito la presenza di get_header() e get_footer() che, come abbiamo già detto, dovrebbero essere presenti in tutti i template files.

Un altro dettaglio da notare e che non possiamo trascurare è il costrutto del loop che in questo caso è:

/* Start the Loop */
while ( have_posts() ) : the_post();
...
endwhile; // End of the loop.

Come puoi vedere manca if ( have_posts() ). Il motivo della sua assenza è abbastanza semplice. Il file single.php è eseguito nel momento in cui un utente chiede di visualizzare un post, quindi è ovvio che c’è almeno un Post da mostrare. Di conseguenza la funzione have_posts(), in questo caso, restituirà sempre il valore true(vero).

Un altro particolare importante, che dovresti aver notato, è che la visualizzazione del contenuto dell’articolo è demandata ad un altro template parziale richiamato dalla funzione get_template_part( ‘content’, get_post_format()).

Quindi il file che che si occupa di formattare e mostrare il contenuto dell’articolo in realtà è content.php. Cerchiamo di capire perché.

La funzione get_template_part( $slug, $name ) include nel template corrente il template parziale $slug–$name.php. Tuttavia nel caso in cui non fosse presente in file $slug–$name.php, include il file chiamato $slug.php.

$slug è un parametro obbligatorio e, oltre ad indicare al nome del template, deve contenere anche il percorso dove si trova il file.

Per esempio se il template file parziale si chiama content.php e si trova in una sottodirectory del tema chiamata content-part, il parametro $slug dovrà essere la stringa ‘content-part/content’.

Quindi la funzione che richiama il template parziali dovrà essere scritta in questo modo:

get_template_part(  'content-part/content'  ).

La funzione get_post_format() restituisce il formato del Post o false se il Post Type è di tipo Post. I formati che attualmente sono restituiti da questa funzione sono:

aside
chat
gallery
link
image
quote
status
video
audio

Un template parziale per mostrare il contenuto dell’Articolo

Come abbiamo visto, il compito di visualizzare il contenuto vero e proprio dell’articolo, nella maggior parte dei casi, è demandato ad un template parziale richiamato all’interno del loop dalla funzione get_template_part( $slug, $name ).

Nell’esempio che abbiamo preso il considerazione, il template parziale è content.php e si trova nella cartella principale del tema. Vediamo com’è fatto:


<?php
/**
* The default template for displaying content
*
* Used for both single and index/archive/search.
*
* @package WordPress
* @subpackage Twenty_Fifteen
* @since Twenty Fifteen 1.0
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
// Post thumbnail.
twentyfifteen_post_thumbnail();
?>
<header class="entry-header">
<?php
if ( is_single() ) :
the_title( '<h1 class="entry-title">', '</h1>' );
else :
the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
endif;
?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php
the_content(
sprintf(
/* translators: %s: Post title. */
__( 'Continue reading %s', 'twentyfifteen' ),
the_title( '<span class="screen-reader-text">', '</span>', false )
)
);
wp_link_pages(
array(
'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
'pagelink' => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
'separator' => '<span class="screen-reader-text">, </span>',
)
);
?>
</div><!-- .entry-content -->
<?php
// Author bio.
if ( is_single() && get_the_author_meta( 'description' ) ) :
get_template_part( 'author-bio' );
endif;
?>
<footer class="entry-footer">
<?php twentyfifteen_entry_meta(); ?>
<?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->

Come puoi vedere, tra i commenti in intestazione, questo template parziale oltre a mostrare il singolo articolo all’interno di single.php, è stato scritto in modo tale da poter essere usato per mostrare gli articoli in un elenco. Quindi, molto probabilmente, sarà richiamato anche all’interno del loop dei template files archive.php, search.php e index.php.

In effetti, se apriamo i files archive.php, search.php e index.php del tema Twenty Fifteen, notiamo all’interno dei rispettivi loop la stessa funzione get_template_part( ‘content’, get_post_format()) con gli stessi parametri passati per argomento.

Se continui ad analizzare il codice di content.php non puoi fare a meno di notare l’uso dei seguenti template tags:

the_title( $before, $after), usato per mostrare il titolo dell’articolo. $before e $after sono parametri opzionali e normalmente sono usati per racchiudere il titolo all’interno di tag HTML come <h1></h1>.
the_content() è il template tag usato per mostrare il contenuto dell’articolo. Ti ricordo che nel caso in cui si sta visualizzando un elenco di articoli, il contenuto sara mostrato fino al tag <!–more–> e il testo non mostrato sarà sostituito con un link il cui testo sarà tipo read more (o continua a leggere)che punterà all’articolo completo.

Come puoi vedere, l’uso di template parziali semplifica notevolmente la creazione e la manutenzione di un tema WordPress.

Come mostrare un elenco di articoli WordPress

Ora, per completezza, vediamo com’è fatto il file archive.php, il template che viene eseguito nel momento in cui viene richiesto un elenco di articoli.

Come abbiamo detto, archive.php è il template che viene eseguito nel momento in cui l’utente chiede di visualizzare gli articoli appartenenti ad una determinata categoria, che contengono un particolare tag, che sono stati scritti da un autore o pubblicati in una specifica data o periodo.

Useremo come esempio sempre il file del tema twenty fifteen


<?php
/**
* The template for displaying archive pages
*
* Used to display archive-type pages if nothing more specific matches a query.
* For example, puts together date-based pages if no date.php file exists.
*
* If you'd like to further customize these archive views, you may create a
* new template file for each one. For example, tag.php (Tag archives),
* category.php (Category archives), author.php (Author archives), etc.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Fifteen
* @since Twenty Fifteen 1.0
*/
get_header(); ?>
<section id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="taxonomy-description">', '</div>' );
?>
</header><!-- .page-header -->
<?php
// Start the loop.
while ( have_posts() ) :
the_post();
/*
* Include the post format-specific template for the content. If you want
* to use this in a child theme, then include a file called content-___.php
* (where ___ is the post format) and that will be used instead.
*/
get_template_part( 'content', get_post_format() );
// End the loop.
endwhile;
// Previous/next page navigation.
the_posts_pagination(
array(
'prev_text' => __( 'Previous page', 'twentyfifteen' ),
'next_text' => __( 'Next page', 'twentyfifteen' ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
)
);
// If no content, include the "No posts found" template.
else :
get_template_part( 'content', 'none' );
endif;
?>
</main><!-- .site-main -->
</section><!-- .content-area -->
<?php get_footer(); ?>

Come vedi, anche archive.php include nel loop il template parziale content.php attraverso la funzione get_template_part(), a dimostrazione di quanto abbiamo detto poco fa.

Inoltre, come puoi notare, anche in questo file ci sono alcuni dei più comuni template tag, che sono:

the_archive_title() per mostrare il titolo dell’archivio;
the_archive_description() per mostrare la descrizione dell’archivio;
the_posts_pagination() che genera un menu di navigazione tra le pagine che contengono gli articoli. Infatti, come abbiamo già detto quando abbiamo parlato del loop, l’archivio non mostra tutti gli articoli, ma solo un numero limitato, in base a quanto indicato in dashborad -> impostazioni -> lettura.

Conclusioni – Template files per Articoli

In questo articolo abbiamo visto quali sono i template files che un tema deve avere per mostrare gli articoli.

Abbiamo anche visto che alcuni template parziali sono inclusi in più template files e facilitano lo sviluppo e la manutenzione del tema.

Ti consiglio di fare delle prove e, partendo da quanto detto fin’ora, di iniziare a realizzare la struttura del tuo primo tema. Sicuramente la visualizzazione non sarà delle migliori e necessiterà di miglioramenti.

Potrai farlo creando un tuo foglio di stile e includendolo nel tuo tema come abbiamo visto nei precedenti articoli o usando un framework come Bootstrap.

Sicuramente l’unico modo che hai per imparare è quello di fare delle prove cercando di migliorarti sempre di più.

Nei prossimi articoli continueremo a vedere come creare altri template files necessari per mostrare i diversi contenuti.

Nel frattempo, se vuoi farmi qualche domanda, chiedere informazioni o darmi qualche consiglio, puoi contattarmi tramite la nostra pagina Facebook o via email.

Prossimo articolo -> Creare un template diverso per ogni pagina WordPress

Categorie, Tags e Tassonomie <- Articolo precedente