Una delle grandi caratteristiche dei template WordPress è la possibilità di personalizzarli al meglio. I template pagine su WordPress sono indubbiamente una tra le risorse più utili messe a disposizione dal celebre CMS, ma anche una feature abbastanza ostica da sfruttare per chi si approccia per la prima volta alla modifica di un tema.
Template pagine: a cosa servono?
Immaginate di dover sviluppare un sito web con una grande quantità di pagine, sia esso un e-commerce, una directory oppure il portale di una catena di alberghi. Ogni pagina ha ovviamente contenuti diversi e (troppo) spesso il modello “standard” del tema non si adatta alla perfezione ad ognuna di esse.
Può capitare che un gruppo di pagine abbia bisogno di una lieve modifica alla struttura (ad esempio una colonna in più o in meno, un modulo di iscrizione, un disclaimer), oppure di una landing page dal design totalmente differente – tutti problemi che per un web designer sono pane quotidiano.
Una delle soluzioni più gettonate è quella di ricorrere ai layout builder che, tramite la semplice installazione di un plugin, permettono di costruire ad hoc un template posizionando con il drag&drop una serie di elementi preimpostati senza metter mano al codice.
Ma per i “puristi” dell’HTML questa spesso non è la scappatoia migliore.
Proprio per non costringere gli sviluppatori a utilizzare l’editor di testo e riscrivere il codice su ogni pagina, WordPress mette a disposizione dei suoi utenti i template pagine, selezionabili nella sezione “Attributi pagina” che compare sulla destra quando viene creata una nuova pagina per il sito.
Il menù a tendina “Modello” vi permette di scegliere tra una serie di template preimpostati, consentendovi di determinare l’aspetto della pagina, inserendo nell’editor solo e soltanto i contenuti senza dovervi preoccupare della loro disposizione.
Template WordPress: come creare un nuovo template pagina
Ogni volta che create un template pagina dovrete caricarlo nella cartella del tema che attualmente state utilizzando. Per evitare che il vostro modello sparisca non appena aggiornerete il tema a una nuova versione, vi consiglio di creare un tema child modificabile a vostro piacimento (qui viene spiegato come farlo).
Armatevi di un editor di codice (Dreamweaver, Notepad++, il sempreverde blocco note…) e incollate la seguente sintassi all’inizio del documento:
<?php
/*
Template Name: Pagina mia
*/
?>
Dove al posto di “Pagina mia” andrete a inserire il nome che volete attribuire al vostro template, ad esempio “Pagina corsi”, “Pagina contatti” o “Pagina about”. Questo sarà il nome che comparirà nel menù a tendina quando andrete a creare una nuova pagina. Sarete gli unici a visualizzarlo, quindi non mettete freni alla fantasia, l’importante è che sia riconoscibile per voi.
Deciso il nome, il metodo più veloce per editare velocemente il resto del codice è copiare l’intero contenuto del “Template pagine”, ovvero il file page.php, e incollarlo nel vostro nuovo documento subito sotto al Template name.
Ora potete modificare il codice a seconda delle vostre esigenze. Anche per chi (come me) non mastica il PHP, è più che sufficiente utilizzare l’HTML e gli shortcode di WordPress per creare un modello pagina di tutto rispetto. Create l’HTML proprio come fareste con un sito statico e adottate pochi ma fondamentali accorgimenti per renderlo WordPress-ready:
- Non cancellate il richiamo all’header e al footer, ovvero
<?php get_header(); ?>
<?php get_footer(); ?>
a meno che ovviamente non vogliate modificare proprio queste parti della pagina. In quel caso dovrete copincollare l’intero contenuto di header.php o footer.php all’interno del template e editare le parti che vi interessano. - Ricordate di richiamare il loop dove vorrete inserire il contenuto.
Il loop di WordPress è semplicemente uno shortcode da incollare nel punto in cui desiderate che compaia il vero e proprio contenuto della pagina (quello che scriverete nell’editor quando creerete una pagina con questo template).
Il loop inizia con:
<?php if (have_posts()) : while (have_posts()) : the_post();?>
e finisce con:
<?php endwhile; else : ?>
<p><?php _e( 'Nessun post da visualizzare' ); ?></p>
<?php endif; ?>
Nel mezzo potete mischiare senza problemi l’HTML con tutti gli shortcode PHP che WordPress mette a disposizione, per ordinare al meglio i contenuti. Trovate tutta la documentazione necessaria qui.
Ora potete salvare il file con il nome che più vi aggrada seguito dall’estensione .php (ad esempio pagina-mia.php).
Se il vostro template è una variante di page.php che volete utilizzare per una sola pagina, potete nominarlo con il prefisso page- e lo slug o l’ID della pagina desiderata (WordPress in automatico riconoscerà l’identificativo della pagina e ne modificherà la struttura).
Per chiarire meglio il tutto, ecco un esempio di template pagina personalizzato:
<?php
/*
Template Name: Page Of Posts
*/
/* This example is for a child theme of Twenty Thirteen:
* You'll need to adapt it the HTML structure of your own theme.
*/
get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php
/* The loop: the_post retrieves the content
* of the new Page you created to list the posts,
* e.g., an intro describing the posts shown listed on this Page..
*/
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// Display content of page
get_template_part( 'content', get_post_format() );
wp_reset_postdata();
endwhile;
endif;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
// Change these category SLUGS to suit your use.
'category_name' => 'music, videos',
'paged' => $paged
);
$list_of_posts = new WP_Query( $args );
?>
<?php if ( $list_of_posts->have_posts() ) : ?>
<?php /* The loop */ ?>
<?php while ( $list_of_posts->have_posts() ) : $list_of_posts->the_post(); ?>
<?php // Display content of posts ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php twentythirteen_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>
Ovviamente il codice di cui sopra è concepito per un tema child di Twenty Thirteen e contiene al suo interno id e classi di quel tema (non dimenticate mai di integrare la struttura HTML con il CSS del vostro tema e di creare le classi CSS che vi servono in style.css).
Quasi finito! Per inserire il template nel tema dovrete caricarlo tramite FTP in:
/wp-content/themes/my-child-theme
Dove al posto di “my child theme” ci sarà il nome del vostro tema.
Et voilà. Quando andrete a cliccare su “Aggiungi nuova pagina” dal menù di sinistra o a modificare una pagina già esistente, nel menù “Modello” comparirà il nome del vostro template personalizzato. Selezionatelo, cliccate su “Aggiorna” ed ecco che la vostra pagina assumerà la struttura che le avete assegnato.
Potete modificare il nuovo template comodamente dall’editor di WordPress (Aspetto -> Editor nel menù di sinistra) e creare un numero pressoché infinito di template personalizzati. Ora avrete il vostro modello sempre a disposizione per essere applicato su qualsiasi pagina… e potrete finalmente pensare solo ai contenuti! 🙂
[amazon_link asins=’8820363585,8820378205,8820372916,8820374773,1118987241,B00BBF736C,B00Y06B37E,8850333234,1542690234′ template=’ProductCarousel’ store=’4writing-21′ marketplace=’IT’ link_id=’de23d500-00ff-11e7-b9b4-dde6e523c5a8′]
