Creare template files parziali in WordPress

Rocco Vincy template file, template tags

Come ho già detto in altri articoli di questa guida, un tema WordPress è composto da più files che lavorano insieme per generare l’interfaccia grafica di un sito. Ciascuno di questi files si chiama Template File e serve per mostrare un particolare tipo di contenuto. Inoltre, ognuno di essi può includere a sua volta Template files parziali.

I Template parziali hanno la funzione di generare solo una parte del contenuto mostrato da un tema WordPress, come per esempio l’header, il footer o la sidebar e devono essere richiamati in un altro template file, nella posizione dove si vuole che sia mostrato quel particolare contenuto.

Al fine di chiarici un po’ le idee, prima di proseguire, cerchiamo di fare un breve riassunto di quanto abbiamo visto finora a proposito dei Template Files.

Abbiamo detto che ogni tema WordPress e composto da più files. Questi file devono avere un nome specifico ed ognuno di essi ha il compito di mostrare un particolare contenuto.

Per ogni particolare tipo di contenuto richiesto dal visitatore, WordPress userà uno specifico template files, selezionato secondo l’ordine di priorità stabilito dalla gerarchia dei template di WordPress.

Infine, lo sviluppatore può frammentare ulteriormente un tema creando template parziali. Cioè dei files il cui compito é quello di generare solo una parte del contenuto da mostrare al visitatore e che dovranno essere richiamati in altri template files.

In questo articolo vedremo insieme quali sono i principali template parziali usati nella maggior parte dei temi WordPress. Leggendo oltre, ti renderai conto che il loro utilizzo semplifica e velocizza notevolmente lo sviluppo e la manutenzione di un tema.

I template files parziali più usati in un tema WordPress

Header.php

Il file header.php di un tema WordPress si occupa di generare l’intestazione di un sito.

Molti siti usano la stessa intestazione su tutte le pagine e su tutti i post. Questo vuol dire che sarà sufficiente scrivere il codice necessario all’interno di un unico file header.php e includere quest’ultimo all’interno dei vari template del tema attraverso il template tag get_header().

Tuttavia, in alcuni casi, potrebbe essere necessario aggiungere delle lievi differenze tra le intestazioni dei vari contenuti. Per esempio l’intestazione di una pagina potrebbe avere un banner o un menu differente rispetto all’intestazione di un articolo. Queste piccole variazioni possono essere realizzate facilmente usando i tag condizionali già visti nell’articolo dedicato ai template tags.

Qualora si dovesse presentare la necessità di realizzare un’intestazione completamente differente, a seconda del Post Type, è possibile creare intestazioni differenti assegnadoli il nome header-nome.php, dove nome va sostituito con un nome a scelta che sarà usato per includere quel particolare template parziale in questo modo: get_header(‘nome’).

Per avere un idea su come ralizzare un intestazione, di seguito ho riportato, come esempio, il file header.php del tema twenty fifteen.


<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>
<div id="sidebar" class="sidebar">
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php if ( is_front_page() &amp;&amp; is_home() ) : ?>
<h1 class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</h1>
<?php else : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
<?php endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) :
echo $description;
endif; ?>
<button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
</div><!-- .site-branding -->
</header><!-- .site-header -->
<?php get_sidebar(); ?>
</div><!-- .sidebar -->
<div id="content" class="site-content">

Analizziamone velocemente il codice.

Come puoi vedere, prima della chiusura dell’head è stato aggiunto il template tag wp_head(). Questo template tag aggiunge nell’head gli script e i fogli di stile nell’ordine in cui sono stati accodati in function.php, così come descritto nell’articolo Come aggiungere javascript e css in WordPress.

Subito dopo viene aperto il tag HTML body al cui interno notiamo il template tag body_class() il quale associa al tag body una serie di classi.

Infine notiamo la presenza di una alcuni tag condizionali che modificano l’intestazione del sito in base al contenuto richiesto.

Footer.php

Proprio come header.php, footer.php è un altro template file parziale molto usato nei temi WordPress. Non fa parte della gerarchia dei template files e il suo contenuto potrà essere mostrato solo se viene richiamato in un altro template attraverso la funzione get_footer().

Molto spesso gli sviluppatori aggiungono nel footer alcune aree widget al fine di facilitarne la personalizzazione all’utente, permettendogli di aggiungere o modificare il contenuto.

Qui sotto, come esempio, ho riportato il contenuto di footer.php del tema twenty fifteen.


</div>
<!-- .site-content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">
<?php /** * Fires before the Twenty Fifteen footer text for footer customization. * * @since Twenty Fifteen 1.0 */ do_action( 'twentyfifteen_credits' ); ?>
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a>
</div>
<!-- .site-info -->
</footer>
<!-- .site-footer -->
</div>
<!-- .site -->
<?php wp_footer(); ?>
</body>
</html>

Comment.php

Alcune pagine o articoli, in un sito realizzato con WordPress, potrebbero contenere dei commenti lasciati dai visitatori. Quindi, può essere utile realizzare un unico file, da caricare all’occorrenza all’interno dei template files interessati, che si occupi di mostrarli al visitatore.

Il template file parziale che si occupa di mostrare i commenti e di definire in che modo devono essere mostrati é di solito comment.php, ma lo sviluppatore può anche cambiare nome.

Questo file è richiamato soprattutto all’interno del template file single.php e la funzione che lo include nell’area dove si vuole che siano mostrati i commenti è comments_template().

Di solito i commenti gli leggiamo sotto il contenuto di un articolo, quindi comments_template() andrebbe inserito all’interno del loop dopo il template tag the_content().

I commenti di ogni articolo o pagina sono recuperati dal DB attraverso un loop.

Un piccolo esempio di loop che recupera i commenti può essere:


//Get only the approved comments
$args = array(
'status' => 'approve'
);
// The comment Query
$comments_query = new WP_Comment_Query;
$comments = $comments_query->query( $args );
// Comment Loop
if ( $comments ) {
foreach ( $comments as $comment ) {
echo '<p>' . $comment->comment_content . '</p>';
}
} else {
echo 'No comments found.';
}

Poichè non sempre i visitatori lasciano le loro opinioni agli articoli, è buona norma far uso di tag condizionali in modo da includere il file comment.php solo se sono presenti commenti. Un esempio di codice che verifica se l’articolo contiene commenti e di conseguenza se includere il file comment.php potrebbe essere:


// 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;

Sidebar.php

Le sidebar in un tema WordPress sono delle aree all’interno delle quali l’utente può aggiungere o rimuovere widget.

Prima di essere creata ed aggiunta all’interno di un template, una sidebar dev’essere registrata. Vedremo come registrare una sidebar nei prossimi articoli, per ora vediamo solo come realizzare il template file parziale sidebar.php.

Al fine di non aggiungere codice HTML inutile, prima di includere una sidebar nel tema è opportuno verificare se è attiva, cioè se contiene widget. Per farlo si usa il tag condizionale is_active_sidebar( ‘nome-sidebar’ ) quindi, qualora la condizione fosse soddisfatta, i widget scelti dall’utente saranno aggiunti dal template tag dynamic_sidebar(‘nome-sidebar’ ).

Per avere un idea di come va realizzato il file che si occupa di mostrare i widget scelti dall’utente, vediamo il contenuto del file sidebar.php del tema twenty fifteen.


if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) || is_active_sidebar( 'sidebar-1' ) ) : >
<div id="secondary" class="secondary">
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : >
<div id="widget-area" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); >
</div>
<!-- .widget-area -->
<?php endif; >
</div>
<!-- .secondary -->
<?php endif; >

Ti ricordo che il file sidebar.php non è richiamato direttamente da WordPress, quindi va incluso all’interno dei deversi template files usando il template tag get_sidebar().

I template parziali content-{$slug}.php

Molti sviluppatori definiscono l’architettura della singola pagina o dell’articolo all’interno dello specifico template file, mentre il compito di recuperare il contenuto da mostrare viene demandato ad un template parziale.

Alcuni esempi di questi template parziali sono content-page.php, content-post.php, content-portfolio.php, content-none.php.

Come abbiamo già visto nell’articolo Template files per Articoli, dove puoi trovare un esempio del template single.php che fa uso di un template parziale, per richiamare content-{$slug}.php si usa la funzione get_template_part(). Per esempio per richiamare content-page.php all’interno del loop del template file page.php si deve usare il template tag get_template_part( ‘content’, ‘page’ ).

Di seguito ho riportato il contenuto del file content-page.php del tema twenty fifteen.


<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php // Post thumbnail. twentyfifteen_post_thumbnail(); ?>
<header class="entry-header">
<?php the_title( '
<h1 class="entry-title">', '</h1>
' ); ?>
</header>
<!-- .entry-header -->
<div class="entry-content">
<?php the_content(); ?>
<?php 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 edit_post_link( __( 'Edit', 'twentyfifteen' ), '
<footer class="entry-footer"><span class="edit-link">', '</span></footer>
<!-- .entry-footer -->' ); ?>
</article>
<!-- #post-## -->

Conclusioni – Template parziali in WordPress

In questo articolo abbiamo visto quali sono i template files parziali più usati in un tema WordPress. Come abbiamo già detto, se si scompone un tema in più files lo si rende più facile da sviluppare, da modificare e da aggiornare.

WordPress fornisce agli sviluppatori tutti gli strumenti necessari per creare template modulari e facili da sviluppare.

Nei prossimi articoli impareremo a creare i template files per le tassonomie e per la pagina di errore 404, cioè la pagina richiamata quando una risorsa richiesta dall’utente non è presente nel sito.

In attesa di proseguire con la lettura dei prossimi articoli, se vuoi farmi qualche domanda, chiedere informazioni o darmi qualche consiglio, puoi contattarmi tramite la nostra pagina Facebook o via email.

Prossimo articolo -> Template per le Tassonomie in WordPress

Creare Template Files per Custom Post Type WordPress <- Articolo precedente