Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 16 di 33
  • livello avanzato
Indice lezioni

Il template single.php nei temi di WordPress

Creiamo da zero il file single.php, cioè il template che nei temi di WordPress consente la visualizzazione di un singolo articolo. L'esempio pratico di un box recante le informazioni di un autore.
Creiamo da zero il file single.php, cioè il template che nei temi di WordPress consente la visualizzazione di un singolo articolo. L'esempio pratico di un box recante le informazioni di un autore.
Link copiato negli appunti

La gerarchia dei template assegna un template file ad ogni tipo di pagina richiesta, sia essa una pagina di archivio, un post, una pagina statica, o una pagina personalizzata. In questo capitolo vedremo a cosa serve e come creare il template che permette di visualizzare un singolo post, cioè il template single.php, precisando che la stessa logica può essere estesa a tutti i template che generano pagine singole, come il file che produce le pagine statiche (page.php).

Per visualizzare singoli articoli, WordPress sceglie il template secondo il seguente ordine:

single-{$post_type}.php
single.php
index.php

$post-type è un eventuale tipo di post personalizzato (ad esempio single-product.php o single-event.php), di cui si discuterà nei prossimi capitoli. Nel caso in cui non fosse disponibile il template single.php, WordPress cercherà il file index.php.

Lo script

Quello che segue è il codice del template single.php:

<?php
/**
 * @package WordPress
 * @subpackage Seventy-One-WordPress-Theme
 * @since Seventy One 1.0
 */
 get_header(); ?>
 	<div id="main-content" class="main-content">
 		<div id="content" class="content-area" role="main">
	<?php
	if (have_posts()) :
		// Start the Loop.
		while (have_posts()) : the_post();
			get_template_part( 'content', get_post_format() );
			if ( comments_open() || get_comments_number() ) {
				comments_template();
			}
		endwhile;
	?>
		<?php post_navigation(); ?>
	<?php
	else :
		get_template_part( 'content', 'none' );
	endif;
	?>
		</div><!-- #content -->
	</div><!-- #main-content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

La struttura di base è esattamente la stessa del template index.php. Trattandosi di un articolo specifico, però, potrebbe essere interessante aggiungere meta-informazioni che riguardano il post o l'argomento trattato.

Un box con il profilo dell'autore

Soprattutto quando partecipano più utenti alla creazione dei contenuti, potrebbe essere una buona idea quella di aggiungere alle pagine dei singoli articoli un box con una serie di informazioni sull'autore. Si supponga di voler dare al box la seguente struttura:

<aside class="author-box">
	<img alt="" src="...">
	<h4>About carlo</h4>
	<p>...<br />
		<a href="...">View all posts by ... (...)</a>
	</p>
</aside>

Trattandosi di informazioni a margine del contenuto principale, per generare il box si ricorre ad un elemento aside. All'interno sarà collocata l'icona del profilo utente, il nome dell'autore, la descrizione, il link all'archivio personale e il numero di articoli pubblicati. Tutte queste informazioni saranno recuperate dal database grazie alle funzioni del framework di WordPress. Data la struttura, si può progettare l'aspetto del box, aggiungendo le seguenti dichiarazioni al file style.css:

/*
 5.5 – Other stuff
*/
.author-box{
	margin-top: 2.08334%;
	padding: 1.04167%;
	width: 100%;
	overflow: hidden;
	border: 2px solid #e8e8e8;
	background-color: #eee;
}
.author-box .avatar {
	float: left;
	margin-right: 1.04167%;
}

In precedenza si è già presentato il codice del file single.php e a questo non si apporterà alcuna modifica. Si supponga ora di voler aggiungere il box autore solo agli articoli di formato standard. L'unico template da modificare sarà il file content.php. Si apra, quindi, il file e si vada direttamente alla chiusura dell'elemento article:

<?php endif; ?>
	<?php
	if( is_single() )
		get_template_part( 'template_parts/template', 'author' );
	?>
</article>

La condizione è necessaria in quanto il template content.php viene caricato per generare il contenuto sia delle pagine singole che delle pagine di archivio. Quindi, qualora l'utente si trovi in una pagina singola, sarà caricato il template parziale template-author.php, che si collocherà in una directory ad-hoc che può essere nominata template_parts. Quello che segue è il codice del template.

<?php
/**
 * @package WordPress
 * @subpackage Seventy-One-WordPress-Theme
 * @since Seventy One 1.0
 */
 ?>
<aside class="author-box">
	<?php echo get_avatar( get_the_author_meta( 'ID' ) ); ?>
	<h4><?php echo __('About ') . get_the_author_meta( 'display_name' ); ?></h4>
	<p>
		<?php the_author_meta( 'description' ); ?><br />
		<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
			<?php echo __('View all posts by ') . get_the_author() . ' (' . get_the_author_posts() .')'; ?>
		</a>
	</p>
</aside>

L'elemento img dell'icona viene generato grazie alla funzione del framework get_avatar(). Questa recupera l'avatar dell'utente a partire dall'ID o dall'indirizzo email. All'interno del Loop, l'ID viene recuperato grazie alla funzione get_the_author_meta(). Questa stessa funzione viene invocata più volte: la prima volta viene passato come argomento il parametro ID, la seconda volta il parametro display_name, infine ancora l'ID. Ogni volta la funzione restituisce l'informazione corrispondente.

get_the_author_meta restituisce una stringa gestibile via PHP. Gli stessi dati possono essere mandati a video grazie al corrispondente tag the_author_meta, qui invocato per stampare la descrizione dell'autore. L'URL del successivo link viene generata dalla funzione get_author_posts_url, alla quale viene passato l'ID dell'autore.

Il testo del link, infine, viene generato dalla funzione get_the_author, che restituisce il display_name dell'autore allo stesso modo di get_the_author_meta( 'display_name' ), e da get_the_author_posts, che restituisce il numero degli articoli pubblicati dallo stesso autore. Nell'immagine che segue, il risultato a video.

Figura 1. Box autore
Box autore

Oltre a quelle utilizzate in questo esempio, WordPress dispone di diverse altre funzioni che recuperano dal database informazioni sugli autori. Quelle di uso più frequente sono riportate nella tabella che segue:

Funzione Descrizione
get_the_author() Restituisce il display_name dell'autore del post corrente
get_author_posts_url() Restituisce la URL della pagina d'archivio dell'autore
the_author_posts_link() Manda a video un link che punta all'archivio dell'autore
get_avatar() Restituisce una stringa in cui è rappresentato l'elemento img che genera l'icona di un utente
the_author_meta() Manda a video i dati riferiti all'autore in base ai parametri passati come argomenti
get_the_author_meta() Restituisce i dati riferiti all'autore in base ai parametri passati come argomenti
the_author_posts() Manda a video il numero di post dell'autore
get_the_author_posts() Restituisce il numero di post dell'autore

Progettare una struttura ordinata

Si è visto che il template parziale template-author.php è stato collocato in una directory specifica, cui è stato assegnato il nome di template_parts. Ciò non sarebbe necessario se il tema mantenesse nel tempo una struttura semplice e composta di pochi file. Può capitare, però, che un tema inizialmente semplice, aumenti via via di complessità. In questo caso, si corre il rischio di ritrovarsi con una struttura disordinata e difficile da gestire. Si consiglia, quindi, di strutturare in modo rigoroso il tema anche nel caso in cui si componga di pochi file essenziali. Quella che segue è la struttura attuale del tema Seventyone.

Figura 2. Struttura tema
Struttura tema

Conclusioni e riferimenti

Quando si modifica il file style.css, potrebbe succedere che le modifiche non siano visibili. Dato che in questo capitolo sono state aggiunte alcune dichiarazioni al foglio di stile, è opportuno disabilitare la cache del browser per verificare i risultati a video.

Per ogni utile approfondimento, si suggeriscono le seguenti risorse:

Ti consigliamo anche