Un approccio per neofiti allo sviluppo dei temi WordPress

Il 38% del web utilizza WordPress. Già da sola questa evidenza dovrebbe fugare ogni ragionevole dubbio sulla solidità e l’autorevolezza della piattaforma. Il New York Post, la White House, The Obama Fundation, Vogue, Rolling Stone, Microsoft News Center, Facebook Newsroom, Bloomberg, Quartz, Sony Playstation Blog, Adobe, TechCrunch, sono solo alcune tra migliaia di organizzazioni1 sparse in tutto il mondo che ne fanno uso (compreso questo blog). Il successo di WordPress è legato a diversi fattori quali la semplicità di utilizzo, la sua estrema versatilità, il back end pronto all’uso, il fatto che è un software gratuito e aggiornato continuamente da una vivace community di sviluppatori.

Negli anni, attorno alla piattaforma, è nato un fiorente commercio basato sui temi ovvero le customizzazioni del front end che determinano l’aspetto di un sito. Per facilitare la vita agli utenti, la piattaforma consente di personalizzare i temi in modo visuale, agendo su una serie di parametri, senza dover scrivere una sola linea di codice. Purtroppo questo approccio ha anche diffuso la falsa credenza secondo la quale per ritenersi esperti di WordPress sia sufficiente saper parametrizzare i suoi temi. E così, la maggior parte di coloro che si improvvisano come tali si ritrova spesso a dover affrontare la dura realtà di certe situazioni in cui, per aggiungere o modificare determinate funzioni, non c’è altra via che mettere mano al codice. Spesso, soprattutto per chi non ha grandi nozioni di programmazione, approcciare al codice dei template di WordPress è una corsa sfiancante agli ostacoli. Eppure ciò che in superfice appare complicato, con un po’ di impegno e dedizione, può essere superato senze troppi sforzi, soprattuto quando si realizza che la gran parte delle istruzioni necessarie a soddisfare i bisogni più ricorrenti sono già pronte all’uso e non richiedono più di una riga di codice. Un neofita può padroneggiare lo sviluppo della maggior parte delle funzionalità di base di un tema WordPress nel giro di un paio di settimane!

Per iniziare è utile consultare la documentazione ufficiale, così da comprendere come è strutturato un tema, la gerarchia dei template che lo caratterizzano (functions.php, header.php, sidebar.ph, footer.php, index.php e così via), le funzioni più comuni, la struttura del database e tutto ciò che può essere utile ai propri scopi. Riuscire a padroneggiare questi aspetti di base è fondamentale per acquisire un primo bagaglio di conoscenze che risolvono la maggior parte delle questioni più ricorrenti legate all’utilizzo della piattaforma. Non preoccupatevi se all’inizio alcuni concetti possono sembrare difficili da digerire perché, non appena risulteranno chiari e acquisiti, vi renderete conto di poter procedere sempre più spediti nell’implementare funzionalità sempre più complesse.

Il modo più semplice per iniziare a prendere confidenza con la piattaforma è sporcarsi subito le mani, entrando nel vivo della scrittura codice. Per questo, l’approccio più efficace è quello di iniziare a scrivere un tema partendo da zero, da dei file completamente vuoti. Non importa se all’inizio il risultato sarà di una semplicità disarmante: una volta compreso il meccanismo alla base di tutto risulterà tutto più semplice.

Questa guida è destinata ai neofiti di WordPress. Non entra nel dettaglio delle numerosissime funzioni ma descrive, passo dopo passo, un metodo semplice per implementare l’ossatura di un tema partendo da zero. Con un po’ di attenzione potrete padroneggiare le funzionalità di base nel giro di qualche ora. Sebbene la guida sia destinata a coloro che per la prima volta approcciano allo sviluppo del codice di WordPress è pur sempre necessario aver prima acquisito le nozioni di base su HTML, CSS e PHP.

Pronti? Iniziamo!


1. Introduzione ai template

Un tema WordPress è costituito da un insieme di file (prevalentemente con estensione .php.css, .js) che devono essere organizzati secondo dei criteri logici basati sul funzionamento standard della piattaforma. WordPress definisce a priori alcuni di questi file con estensione .php, detti template standard, utili a rappresentare una o più specifiche pagine del sito. Oltre ai template standard, vengono forniti i cosiddetti template tags, ovvero funzioni in grado di recuperare facilmente determinate informazioni dal database, senza dover ricorrere alla scrittura di linee di codice aggiuntive. Un esempio tipico di template tag è l’istruzione the_title() che serve a visualizzare sulla pagina il titolo di un post.

1.1. I template essenziali per iniziare lo sviluppo di un sito

La configurazione di base di un sito WordPress si può ridurre a soli tre template .php che, combinati, rappresentano gli elementi costitutivi delle tipiche sezioni di una pagina Web: l’intestazione, il corpo e il footer. I template sono:

  • header.php, contenente le dichiarazioni standard di apertura della pagina HTML con i tag <html>, <head>, <body> e il codice relativo agli elementi di intestazione di un sito come, ad esempio, la barra di navigazione superiore.
  • index.php, contenente il corpo della pagina, ovvero l’elenco dei post restituiti tramite una caratteristica fondamentale di WordPress chiamata the Loop, che vedremo nel dettaglio in seguito.
  • footer.php, contenente i tag di chiusura </body> e </html> e, più in generale, il codice relativo agli elementi di chiusura di un sito come ad esempio quelli tipici del footer.

Una pagina WordPress è generata dall’insieme combinato di questi tre template e cioè a livello schematico può essere rappresentata in questo modo:

header.php
index.php
footer.php

Inoltre, si deve tenere conto di altri due template fondamentali:

  • functions.php, contenente un set di dichiarazioni necessarie alla configurazione di funzionalità aggiuntive alla base del tema.
  • style.css, il file degli stili delle pagine.

A livello teorico c’è da dire che gli unici due file effettivamente necessari per inizializzare un tema WordPress sono index.php e style.css ma poiché tutti quelli sopra citati rivestono un ruolo decisivo nella costruzione di un tema, consideriamo questi ultimi come il set minimo per il nostro nuovo tema. Iniziamo quindi dal creare questi file vuoti all’interno della cartella del tema, mytheme/ (che deve essere posizionata nella cartella wp-content\themesdella nostra istallazione locale), secondo il seguente schema:

mytheme/
- header.php
- index.php
- footer.php
- function.php
- style.css

Ora che abbiamo la struttura disponibili, iniziamo a dedicarci nel vivo e cioè nella scrittura del codice.


2. Il file header.php

Il template header.php contiene le dichiarazioni standard di apertura di una pagina HTML, di norma comuni a tutte le pagine di un sito. Oltre ai tipici tag dell’HTML standard, quali <html>, <head>, <body>, all’interno del file trovano la loro naturale collocazione tutti gli elementi che, per consuetudine, caratterizzano l’intestazione di una pagina Web come, ad esempio, la barra di navigazione superiore.

2.1 La struttura di base

La struttura di base del template header.php può essere costruita a partire dalle semplici dichiarazioni che trovate riportate qui sotto. Naturalmente quella che ci accingiamo a implementare è una struttura molto semplificata, che non include alcun elemento particolare di layout ma che può essere utilizzata da base di partenza per tutti gli sviluppi futuri.

<?php
/**
 * Il file header del mio nuovo tema.
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body>
    <?php wp_body_open(); ?>
    <header id="site-header">
        <!-- Il contenuto dell'header del sito. --> 
    </header>

Nella parte iniziale del template è presente una dichiarazione php, sotto forma di commento, che deve essere inserita in tutti i template e all’interno della quale vengono riportati una breve descrizione del tema, il link al sito del tema o dello sviluppatore, l’elemento @package che è di default WordPress e l’elemento subpackage nel quale va specificato il nome del tema che, nel caso specifico, è My Theme.

2.2 I template tags essenziali

Inoltre sono presenti alcuni template tags fondamentali, ovvero:

  • language_attributes(), che restituisce una serie di attributi HTML contenenti la direzione del testo e le informazioni sulla lingua della pagina, così come impostati nell’area admin di back-end di WordPress.
  • bloginfo( 'charset' ), che restituisce il tipo di codifica per le pagine e i feed, di default “UTF-8”, secondo le impostazioni specificate nell’area di back-end.
  • wp_head(), che rappresenta uno dei principali hook di WordPress (ovvero dei ganci utili a manipolare determinate azioni del tema) attraverso il quale è possibile inserire tutte le istruzioni di cui abbiamo bisogno all’interno del tag <head>. Vedremo più avanti come poter utilizzare questo hook per caricare il file dei fogli di stile style.css e altre istruzioni all’interno dell’header del nostro template.
  • wp_body(), un hook introdotto con la versione 5.4 di WordPress e che consente di inserire determinate istruzioni immediatamente dopo il tag <body>. Per ora è opportuno citarlo solo per ragioni di completezza, rimandandone la trattazione a una lezione successiva in quanto, per quelli che sono gli attuali scopi, è possiamo al momento farne a meno.

Una volta predisposto l’ossatura del nostro file di header passiamo ora a scoprire come è fatto il file del footer.


3. Il file footer.php

Il file footer.php contiene le dichiarazioni standard di chiusura di una pagina HTML anch’esse, come nel caso di quelle presenti nel file di header, tipicamente comuni a tutte le pagine del sito. In questo template, oltre ai tag di chiusura <body/> e <html> si possono inserire tutti gli elementi che presenti norma nel piede di un sito, ad esempio, una lista di link con i riferimenti alla privacy e alla cookies policy, ai contatti, ai social, all’iscrizione alla newsletter e molto altro ancora.

3.1 La struttura di base

La struttura di base del template footer.php può essere costruita a partire da queste poche righe di codice:

<?php
/**
 * Il file footer del mio nuovo tema.
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

?>
    <footer id="site-footer">
        <!-- Il contenuto dell'header del sito. --> 
    </footer>
    <?php wp_footer(); ?>
    </body>
</html>

Nella parte iniziale del template è presente la solita dichiarazione php, sotto forma di commento, che descrive il nostro template. Come vedete, non sono presenti particolari template tag, a parte uno:

  • wp_footer(), che come wp_head() rappresenta uno dei principali hook di WordPress attraverso il quale è possibile inserire del codice aggiuntivo immediatamente prima del tag di chiusura </body>. Questo hook è particolarmente utile nelle situazioni in cui è preferibile posticipare il caricamento sincrono di certi script JavaScript dopo che il browser ha completato il caricamento della struttura della pagina. Vedremo più avanti, in un’altra guida, come utilizzare questo hook con una serie di esempi pratici.

3.2 Un esempio di contenuto da aggiungere nel footer

Cosa possiamo aggiungere alla struttura del nostro template footer.php per iniziare ad arricchirla? Iniziamo inserendo una semplice lista di collegamenti che puntano a varie sezioni del sito, variandone il codice come descritto di seguito.

<?php
/**
 * Il file footer del mio nuovo tema.
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

?>
    <footer id="site-footer" class="footer">
        <ul>
            <li><a href="<?php home_url();?>">%copy; 2020 My Theme</a></li>
            <li><a href="<?php home_url('/privacy');?>">Privacy Policy</a></li>
            <li><a href="mailto:lamiaemail@mytheme.example">Contatta</a></li>
        </ul>
    </footer>
    <?php wp_footer(); ?>
    </body>
</html>

Abbiamo inserito nel template un po’ di contenuto per renderlo funzionale al nostro scopo aggiungendo, in particolare, la classe footer al tag <footer> così da poterne definire i relativi stili all’interno del file style.css e una serie di semplici collegamenti tra cui spicca l’utilizzo questa funzione:

  • home_url(), uno dei template tag più utilizzati che restituisce il link alla home page o ad altre sezioni specifiche di un sito. IL suo utilizzo è sempre preferibile rispetto ai collegamento assoluti del tipo http://www.mytheme.example. Questo tag prende in input due parametri:
home_url( string $path = '', string|null $scheme = null ) 
  • path, di tipo string e opzionale, grazie al quale è possibile specificare un percorso relativo all’URL dell’home page. Ad esempio home_url('/about') per mostrare un link che punta alla pagina con slug about, ovvero all’indirizzo http://www.mytheme.example/about.
  • scheme, di tipo string o null e opzionale, che accetta i valori http, https, relative, rest o `null.

Ovviamente, lavorando su un file con estensione php è possibile utilizzare tutte le funzionalità messe a disposizione del linguaggio. Per fare un esempio pratico, se volessimo popolare la lista dei collegamenti nel footer in modo dinamico potremmo riscrivere il codice dell’esempio precedente in questo modo:

<?php
/**
 * Il file footer del mio nuovo tema.
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

var $links = array(
    '%copy; 2020 My Theme' => home_url(),
    'Privacy Policy' => home_url('/privacy'),
    'Contatta' => 'mailto:lamiaemail@mytheme.example'
);

?>
    <footer id="site-footer" class="footer">
        <ul>
            <?php
                foreach( $links as $title => $link ) {
                    echo '<li><a href="' . $link . '">' . $title  . '</a></li>';
                }
            ?>
        </ul>
    </footer>
    <?php wp_footer(); ?>
    </body>
</html>

Va detto che esistono modi più eleganti per ottenere lo stesso risultato ma per ora vi basti come spunto per capirne il meccanismo. A questo punto siamo pronti per assemblare la nostra prima pagina e iniziare a visualizzarne il contenuto grazie al template index.php.


4. Il file index.php

Il file index.php è il template più generico di un tema WordPress e, come anticipato all’inizio, insieme al file style.css è uno dei due elementi necessariamente richiesti in ogni tema. Questo template mostra il contenuto di una pagina quando all’interno della cartella del tema non è presente un template più specifico che corrisponde a una determinata query. Il senso di questa affermazione sarà chiarito più avanti, quando affronteremo la gerarchia dei template, e quindi per ora soffermiamoci a studiarne la struttura.

4.1 La struttura di base

Il template index.php, come la gran parte dei template standard che corrispondono a una determinata query su WordPress, può essere ricondotto alla seguente struttura di base:

<?php
/**
 * Il file del template principale.
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

get_header();
?>

<main id="site-content" role="main">

<?php
    // The Loop.
    if ( have_posts() ) {
        while ( have_posts() ) {
            the_post();
            //
            // Il contenuto del post
            //
        }
    }
?>
</main>

<?php 
get_footer();

Come potete notare è davvero molto semplice. Al suo interno sono presenti due template tag che di norma ricorrono in tutte le pagine del sito e servono per richiamare all’interno della pagina i contenuti dei due template di cui abbiamo parlato poco prima:

  • get_header(), richiama il contenuto del template header.php.
  • get_footer(), richiama il contenuto del template footer.php.

In mezzo a queste due funzioni trovate il codice php di quello che viene definito the Loop, ovvero un insieme di istruzioni standard grazie al quale, magicamente, vengono restituiti i risultati di ogni query a seconda se ci troviamo sull’home page, sulla pagina con l’elenco dei post relativi a una determinata categoria o a un determinato tag, nei risultati della ricerca, e così via. Il loop restituisce una lista specifica di post che corrispondono a una determinata query ma come possiamo visualizzare il loro contenuto sulla pagina? Per rispondere a questa domanda dobbiamo mettere mano alla struttura del nostro tema, aggiungendo i cosiddetti template di contenuto.

4.2 I template di contenuto

Un template di contenuto è un file php grazie al quale possiamo mostrare le classiche componenti di un post, ovvero il titolo, il riassunto, il contenuto, la categoria a cui appartiene, la lista dei tag associati e così via. Per creare un file di questo tipo, ripartiamo dalla struttura della cartella del nostro tema, modificandola come segue:

mytheme/
- header.php
- index.php
- footer.php
- functions.php
- style.css
- template-parts/
  - content.phhp

Prima di tutto, aggiungiamo una cartella template-parts all’interno della quale creaiamo un nuovo file denominato content.php. Per questioni di convenzione di terminologia utilizzate esattamente questi nomi, sia per la cartella sia per il template di contenuto che può essere strutturato in questo modo:

<?php
/**
 * Il template di default per mostrare il contenuto di un post.
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

?>

<article id="post-<?php the_ID(); ?>">
    <div class="post">
        <?php the_category(); ?>
        <h1><?php the_title(); ?></h1>
        <div class="entry-content">
            <?php 
            the_excerpt();
            the_content();
            the_tags();
            ?>
        </div>
    </div>

    <?php 
    // Mostra i commenti
    if ( is_single() ) { ?>
        <div class="comments">
            <?php
                comments_template(); 
            ?>
        </div><!-- .comments -->
        <?php
    }
    ?>
</article>

Analizzandone la struttura, notiamo:

  • Il contenuto del post è inserito all’interno del tag <article>.
  • the_ID() restituisce l’ID del post all’interno del database. Tenete a mente che, nel nostro caso, non è strettamente necessario aggiungere l’attributo id="post-<?php the_ID(); ?>" ma quando si ha a che fare con temi più complessi è buona norma utilizzarlo perché può tornare utile, ad esempio, per manipolare il Document Object Model della pagina Web con l’utilizzo di JavaScript.
  • the_category() visualizza la lista delle categorie relative al post.
  • the_title() visualizza il titolo del post.
  • the_excerpt() visualizza il riassunto del post.
  • the_content() visualizza il contenuto del post.
  • the_tags() visualizza la lista dei tag del post.
  • is_single() restituisce true quando viene visualizzata la pagina del post singolo. In questo caso, abbiamo definito il codice in modo da mostrare i commenti relativi al post corrente.
  • comments_template() visualizza il template dei commenti, ovvero comments.php che deve essere creato allo stesso livello di ìndex.php nella cartella del nostro tema. Pre ora non ci addentreremo nell’analisi di questo template di cui parlerò in un articolo dedicato.

Alcune delle funzioni appena citate accettano dei parametri in ingresso ma per i nostri scopi, nonché per brevità, possiamo utilizzarle direttamente senza ulteriori specifiche. Vi invito comunque a consultare la documentazione ufficiale per gli approfondimenti del caso. Aggiungo inoltre che esistono molte altre funzioni utili e pronte all’uso che ci vengono in aiuto in tantissime situazioni ricorrenti. Un esempio è quello legato ai controlli condizionali.

Immaginiamo di voler mostrare il riassunto di un post attraverso la funzione the_excerpt() solo nel caso in qui questo sia stato definito. Per farlo, WordPress mette a disposizione la funzione has_excerpt() che restituisce il valore true solo se il campo riassunto (excerpt) del nostro post è popolato. Tradotto in codice si ha:

<?php
/**
 * Il template di default per mostrare il contenuto di un post.
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

?>

<article id="post-<?php the_ID(); ?>">
    <div class="post">
        <?php the_category(); ?>
        <h1><?php the_title(); ?></h1>
        <div class="entry-content">
            <?php 
            // Mostra il riassunto solo se è stato definito.
            if ( has_excerpt() ) {
                the_excerpt();
            }
            the_content();
            the_tags();
            ?>
        </div>
    </div>

    <?php 
    // Mostra i commenti
    if ( is_single() ) { ?>
        <div class="comments">
            <?php
                comments_template(); 
            ?>
        </div><!-- .comments -->
        <?php
    }
    ?>
</article>

Semplice, no? Allo stesso modo possiamo personalizzare la visualizzazione del titolo, decidendo di aggiungere il collegamento al post quando siamo sull’home page o su qualsiasi altra pagina che non sia la pagina del post singolo. Per fare questo possiamo utilizzare la funzione the_permalink() in questo modo:

<?php
/**
 * Il template di default per mostrare il contenuto di un post.
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

?>

<article id="post-<?php the_ID(); ?>">
    <div class="post">
        <?php the_category(); ?>
        <?php if ( ! is_single() ) { ?>
            // Mostra il titolo con il link al post in tutte le pagine tranne
            // nella pagina singola del post.
            <h1><a href="<?php the_permalink?>"><?php the_title(); ?></a></h1>
        <?php } else { ?>
            <h1><?php the_title(); ?></h1>
        } ?> 
        <div class="entry-content">
            <?php 
            // Mostra il riassunto solo se è stato definito.
            if ( has_excerpt() ) {
                the_excerpt();
            }
            the_content();
            the_tags();
            ?>
        </div>
    </div>

    <?php 
    // Mostra i commenti
    if ( is_single() ) { ?>
        <div class="comments">
            <?php
                comments_template(); 
            ?>
        </div><!-- .comments -->
        <?php
    }
    ?>
</article>
  • the_permalink() mostra il permalink del post sotto forma http://www.mytheme.example/posts/my-post.

Come ripetuto fin dall’inizio, WordPress fornisce già la gran parte delle istruzioni necessarie a soddisfare moltissime esigenze mettendo a disposizione degli sviluppatori un set di funzioni che, in meno di una riga, agevolano l’interazione coi dati contenuti nel database.

A questo punto è sufficiente modificare il loop nel file index.php per poter visualizzare sulla pagina i post del sito e per ottenere questo risultato ricorriamo all’uso della funzione get_template_part().

<?php
/**
 * Il file del template principale.
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

get_header();
?>

<main id="site-content" role="main">

<?php
    // The Loop.
    if ( have_posts() ) {
        while ( have_posts() ) {
            the_post();
            // Mostra il contenuto del post.
            get_template_part( 'template-parts/content.php' );
        }
    }
?>
</main>

<?php 
get_footer();
  • get_template_part() richiama il file passato come parametro in ingresso alla funzione (nel nostro caso content.php) così da visualizzare il contenuto di ciascun post all’interno del loop.

Ora che abbiamo gettato le fondamenta per la costruzione del nostro nuovo tema, ci restano da completare alcuni passaggi necessari per inserire diverse istruzioni fondamentali tra cui l’inizializzazione dei parametri generali del tema e l’inserimento del file style.css all’interno del codice delle pagine. Per questo WordPress mette a disposizione il template functions.php.


6. Il file functions.php

Il file functions.php consente di estendere o customizzare le funzionalità di un tema secondo le nostre esigenze. A livello più generale, questo obiettivo si può raggiungere anche attraverso i cosiddetti plug-in, ovvero funzionalità aggiuntive, riutilizzabili e indipendenti dallo specifico tema che possono essere attivate dal back-end della piattaforma. Tuttavia, in questo post introduttivo illustrerò solo alcuni hook, filtri e azioni necessari a configurare alcuni aspetti di base del nostro tema, sfruttando esclusivamente il file functions.php.

6.1 Caricare il file dei fogli di stile

Come avrete notato nel paragrafo 2.1, nella struttura del file header.php manca il collegamento al file style.css che, come abbiamo visto, insieme al file index.php, rappresenta il nucleo minimale di ogni tema WordPress. Il modo più appropriato per caricare il file CSS nell’header di un sito è quello di ricorrere all’utilizzo della funzione add_action().

<?php
/**
 * Il template delle funzioni di base.
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

add_action( 'get_header', 'mytheme_load_styles' );

function mytheme_load_styles() {

    // Non caricare i file CSS quando l'utente loggato sta visualizzando
    // una pagina del back-end di WordPress.
    if ( is_admin() ) { return; }

    // Carica il foglio di stile style.css.
    wp_enqueue_style( 'styles', get_stylesheet_uri() );

}

Analizzando il codice, si evidenziano:

  • add_action(), un hook che il core di WordPress lancia a un certo punto dell’esecuzione del caricamento del tema. In questo caso, avendo specificato il nome dell’azione get_header, il codice verrà richiamato al caricamento dell’header del sito e il contenuto sarà inserito all’interno del file header.php tramite la funzione wp_head()che abbiamo visto sempre nel paragrafo 2.1. L’azione richiama la funzione custom mytheme_load_styles(), nella quale viene specificato il percorso del file style.css, richiamando quest’ultimo attraverso la funzione wp_enqueue_style().
  • get_stylesheet_uri() un hook che restituisce l’indirizzo del file style.css.

Per velocizzare i tempi di caricamento del back-end e evitare possibili visualizzazioni errate dovute alla sovrascrittura inavvertita degli stili di base, è buona norma evitare il caricamento del file style.css durante la navigazione sulle pagine del back-end. Per fare questo basta inserire il seguente codice:

if ( is_admin() ) { return; }
  • is_admin(), restituisce true quando l’utente sta visualizzando una pagina qualsiasi del back-and. Attenzione: spesso questa funzione viene confusa con user_can() che verifica il ruolo e le attribuzioni di un utente mentre, come specificato, serve per altri scopi.

6.2 Caricare una libreria di caratteri da Google Fonts

Per utilizzare uno dei servizi online che mettono a disposizione varie librerie di font utilizzabili sui siti Web, come Google Font o Adobe Font si può ricorrere al codice precedente, modificandolo come segue:

<?php
/**
 * Il template delle funzioni di base.
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

add_action( 'get_header', 'mytheme_load_styles' );

function mytheme_load_styles() 
{

    // Non caricare i file CSS quando l'utente loggato sta visualizzando
    // una pagina del back-end di WordPress.
    if ( is_admin() ) { return; }

    // Carica i font di Google.
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700&display=swap' );

    // Carica il foglio di stile style.css.
    wp_enqueue_style( 'styles', get_stylesheet_uri() );
}

Prima del riferimento al foglio di stile, è presente un’ulteriore istruzione wp_enqueue_stlye()che richiama la famiglia di caratteri che vogliamo importare nel nostro sito, così da poterla utilizzare negli stili dichiarati nel file style.css. È importante mantenere l’ordine delle due dichiarazioni wp_enqueue_stlye() per rendere disponibili le famiglie di caratteri negli stili dichiarati all’interno del file style.css.

6.3 Attivare il supporto per i formati dei post

I post formats rappresentano una caratteristica dei post di WordPress utilizzata per personalizzare la visualizzazione del contenuto di un determinato post. I formati supportati standard sono:

  • aside, un post privo del titolo.
  • gallery, un post con una galleria di immagini.
  • link, un post con un link nel titolo verso un sito o una risorsa esterna.
  • image, un post con una immagine singola.
  • quote, un post contenente una citazione.
  • status, un post con un aggiornamento di stato simile a quelli presenti su Facebook o Twitter.
  • video, un post che contiene un video all’interno del tag <video> o un oggetto incorporato come un video di YouTube, Vimeo o proveniente da qualsiasi altra origine.
  • audio, un post che contiene un file audio o un podcast.
  • chat, un post con una trascrizione di una chat.

È inoltre possibile dichiarare anche dei post standard, ma questa è una funzionalità avanzata che rimanderemo a una successiva trattazione.

Per attivare il supporto dei post formats standard all’interno di un tema, è sufficiente inserire nel file functions.php le seguenti dichiarazioni:

<?php
/**
 * Il template delle funzioni di base.
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

add_action( 'add_post_formats', 'mytheme_add_post_formats' );

function mytheme_add_post_formats() 
{
    // Abilita i post format.
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat') );

    // Abilita il'immagine in evidenza.
    add_theme_support( 'post-thumbnails' );

    // Aggiunge il tag titolo nell'<head> del documento HTML.
   add_theme_support( 'title-tag' );
}

Nella prima dichiarazione vengono abilitati tutti i tipi di post format standard, richiamati all’interno dell’array passato in input alla funzione add_theme_support(). Naturalmente non è necessario dichiararli tutti: è possibile abilitarne solo un sottoinsieme o addirittura nessuno. Questa dichiarazione abilita la relativa sezione Formato sulla pagina di creazione e modifica dei post del back-end, tramite la quale è possibile selezionare la tipologia di formato associata ad un dato post. Di default, il formato dei post è impostato su standard, indipendentemente se il supporto ai formati sia stato o meno dichiarato all’interno del file functions.php.

All’interno del nostro codice sono presenti altre due dichiarazioni:

  • add_theme_support( 'post-thumbnails' ), abilita la possibilità di associare ad ogni post un’immagine in evidenza, mostrando una specifica sezione nella pagina di creazione e modifica dei post del back-end.
  • add_theme_support( 'title-tag' ), aggiunge il tag <title> all’interno del tag <head> e gestisce la struttura del titolo dei post e delle varie pagine secondo i criteri definiti nella sezione Impostazioni del back-end.

Quando si assegna un formato a un post è possibile costruire un template dedicato alla visualizzazione di quello specifico formato, modificando il codice del file content.php, mostrato nel paragrafo 4.1, e creando un file di contenuto specifico con la seguente convenzione di denominazione: content-{nome del post format}. In altre parole se assegniamo il post format aside a un post, possiamo definire gli elementi visualizzati nel relativo template all’interno di un file chiamato content-aside.php situato all’interno della cartella template-parts. La struttura della nostra cartella si arricchirà, pertanto, con questo nuovo file:

mytheme/
- header.php
- index.php
- footer.php
- functions.php
- style.css
- template-parts/
  - content.phhp
  - content-aside.php

Abbiamo detto che un post a cui è assegnato il formato aside, tipicamente è un post senza alcun titolo visibile. Possiamo allora creare il relativo template content-aside.php a partire dal contenuto del file content.php, modificandolo in questo modo:

<?php
/**
 * Il template per mostrare il contenuto di un post col formato "aside".
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

?>

<article id="post-<?php the_ID(); ?>">
    <div class="post">
        <div class="entry-content entry-content--aside">
            <?php 
            the_excerpt();
            the_content();
            the_tags();
            ?>
        </div>
    </div>

    <?php 
    // Mostra i commenti
    if ( is_single() ) { ?>
        <div class="comments">
            <?php
                comments_template(); 
            ?>
        </div><!-- .comments -->
        <?php
    }
    ?>
</article>

Nel codice non sono più presenti le funzioni the_title() e the_category() che, nel file originale, mostravano rispettivamente il titolo del post e l’elenco delle categorie ad esso associate.

Per visualizzare l’immagine in evidenza di un post, attivata dalla dichiarazione add_theme_support( 'post-thumbnails' ), basta aggiungere la funzione the_thumbnail(), modificando il nostro template di contenuto content.php in questo modo:

<?php
/**
 * Il template di default per mostrare il contenuto di un post.
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

?>

<article id="post-<?php the_ID(); ?>">
    <div class="post">
        <!-- Mostra l'immagine in evidenza -->
        <?php the_thumbnail(); ?>
        <?php the_category(); ?>
        <?php if ( ! is_single() ) { ?>
            // Mostra il titolo con il link al post in tutte le pagine tranne
            // nella pagina singola del post.
            <h1><a href="<?php the_permalink?>"><?php the_title(); ?></a></h1>
        <?php } else { ?>
            <h1><?php the_title(); ?></h1>
        } ?> 
        <div class="entry-content">
            <?php 
            // Mostra il riassunto solo se è stato definito.
            if ( has_excerpt() ) {
                the_excerpt();
            }
            the_content();
            the_tags();
            ?>
        </div>
    </div>

    <?php 
    // Mostra i commenti
    if ( is_single() ) { ?>
        <div class="comments">
            <?php
                comments_template(); 
            ?>
        </div><!-- .comments -->
        <?php
    }
    ?>
</article>

Ora che abbiamo chiarito come abilitare i formati dei post e come costruire i relativi template è necessario indicare al core di WordPress di caricare il giusto template all’interno del loop. Per far questo bisogna mettere mano al codice del file index.php, modificando un riga di codice all’interno del loop.

<?php
/**
 * Il file del template principale.
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

get_header();
?>

<main id="site-content" role="main">

<?php
    // The Loop.
    if ( have_posts() ) {
        while ( have_posts() ) {
            the_post();
            // Mostra il contenuto del post.
            get_template_part( 'template-parts/content' . get_post_format() . '.php' );
        }
    }
?>
</main>

<?php 
get_footer();

La funzione get_post_format() restituirà il formato del post corrente così da concatenarlo al nome del relativo template da richiamare.

6.5 Limitare il numero di revisioni

Come abbiamo più volte detto fin dall’inizio, all’interno del file functions.php possono essere inserite una serie di dichiarazioni in grado di modificare il comportamento del tema. Le possibilità sono pressoché infinite e coinvolgono sia le modifiche al front-end che al back-end. Ad esempio, per ridurre una crescita incontrollata dei record del database, è possibile limitare il numero di revisioni dei post. Le revisioni sono nient’altro che delle copie di sicurezza dei post pubblicati che tengono traccia dello storico delle variazioni subite dal contenuto. Per ridurre il numero di revisioni gestite per ciascun post è sufficiente utilizzare il seguente codice:

<?php
/**
 * Il template delle funzioni di base.
 *
 * @link https://interrupt.blog
 *
 * @package WordPress
 * @subpackage My Theme
 */

add_filter( 'wp_revisions_to_keep', 'wpth_limit_revision', 10, 5 );

// Limita a un massimo di quattro il numero delle revisionoi di un post
// salvate nel database.
function wpth_limit_revision( $num, $post ) 
{
    return 4;
}

La funzione add_filter()è tipicamente utilizzata per filtrare i comportamenti standard del core di WordPress, in questo caso specifico il numero delle revisioni dei post. Il tema dei filtri è talmente vasto che vi suggerisco di dare un’occhiata alla relativa documentazione per comprendere il funzionamento per sfruttarne al massimo le potenzialità.


5. La gerarchia dei template

Nei paragrafi precedenti sono state introdotte alcune nozioni di base utili per iniziare a prendere confidenza col codice di WordPress. É però importante introdurre un ulteriore elemento fondamentale che riguarda la cosiddetta gerarchia dei template.

Per gerarchia dei template s’intende l’ordine con cui il core di WordPress richiama un certo template sulla base della query corrente. Che cosa significa in pratica? Abbiamo detto che la configurazione minimale di un tema WordPress è composta due file, index.php e style.scss. In questa configurazione di base, quando un utente visualizza la pagina di un singolo post, il core di WordPress caricherà il template index.php. Se però volessimo customizzare la pagina singola dei post per renderla differente da quella generica index.php, dovremmo introdurre nella cartella del nostro tema un nuovo file chiamato single.php.

mytheme/
- header.php
- index.php
- single.php
- footer.php
- functions.php
- style.css
- template-parts/
  - content.phhp
  - content-aside.php

In questo modo, quando viene visualizzata la pagina di uno specifico post, il core di WordPress caricherà direttamente il contenuto della pagina single.php anziché risalire alla più generica pagina index.php. Lo stesso esempio può essere fatto per le pagine tag.php o category che vengono richiamate prima della generica pagina index quando si vogliono visualizzare, rispettivamente, i post a cui è stato attribuito un determiato tag o una certa categoria.

Ai fini di una corretta determinazione di quali sono i template di cui abbiamo realmente bisogno nello sviluppo ddi un tema è molto utile conoscere la struttura complessiva dell’albero gerarchio dei template di WordPress il cui schema completo è consultabile a questo link.


Conclusioni

Tirando le somme, in questo post ho provato a riassumere in modo breve un metodo di base per neofiti per approcciare allo sviluppo di un tema WordPress e acquisire alcune nozioni di base utili a rispondere alle tipiche delle domande più comuni. Naturalmente questa guida non è né tantomeno si prefigge l’obiettivo di voler essere esaustiva ma vole solo fornire qualche spunto per iniziare ad orientarsi. Per completezza, vi suggerisco di dare uno sguardo al diagramma delle classi del database di WordPress così da approfondire quali sono le tabelle principali e il loro ruolo.


  1. WordPress Showcase, una selezione di siti basati su WordPress. 

9 Commenti

  • Grazie mille per questo interessante articolo. Da qualche tempo mi sto interessando di wordpress e sto cercando ogni spunto possibile per capire da che parte incominciare per modificare un tema di quelli predefiniti. Lo leggero attentamente e tornerò sicuramente a chiederti qualche chiarimento!
    • Chiaro come sempre. Ho però dei problemi con i post format perché ho un tema comprato su Themeforest dove mi trovo alcuni formati diversi rispetto ai normali post. Se però creo un post di quel formato ho come problema che non mi compare nelle varie pagine per esempio gli archivi o la ricerca. Posso scriverti in privato per avere una mano? Grazie!
      • Grazie, non so se ho ben compreso la tua domanda, ma credo che nel caso in questione quelli che stai modificando siano i Post Types e non i Post Formats!
    • Un post interessantissimo! Davvero complimenti. Sai tempo fa avevo iniziato a sviluppare un tema partendo dallo starter theme di Underscores, e avevo già inserito la griglia di bootstrap e creato una sorta di layout di base. Poi però mi sono reso conto di non avere sufficienti skills sul php, e nessuna su javascript, e che di certo non potevano bastare le sole conoscenze di html/css per completare il progetto. Ora posso dire di avere le idee più chiare su come procedere. Step by step, come dicono gli albionici. ;)
      • Ciao Antonio grazie per questa guida semplice e chiara è proprio quello di cui avevo bisogno. Non vedo l'ora di leggere altre guide come questa perché non è facile trovare un approccio così sistematico agli sviluppi dei temi soprattutto per chi è come me alle prime armi. Le difficoltà maggiori che ho riscontrato io è partire dai temi commerciali e personalizzarli secondo le esigenze dei miei clienti perché molto spesso le richieste sono così varie che non puoi fare a meno come ricordi nel post di modificare il codice. Proverò a seguire i tuoi consigli e a sviluppare un tema partendo dalle basi. Spero che questo può tornarmi utile per migliorare. PS: bellissima l'impostazione essenziale del tuo blog, continua così.
        • Complimenti per questo blog e per la chiarezza di questa guida essenziale e molto utile.
          • Ottimo articolo. Un approccio pratico e concreto. Apprezzo soprattutto l'intenzione, a mio parere, di restare sulla programmazione e sul codice invece di tentare un approccio rivolto al "tema framework": davvero eccellente per chi vuole partire dal file vuoto. Come sempre, Antonio, kudos!
            • Ottimi spunti di partenza e molto pratici. Condivido riga per riga quello che hai scritto specialmente nell'introduzione che dovrebbe essere letta da tutti quelli che si professano esperti di WP senza conoscerlo veramente. Frequentando un po' di gruppi su WP non si parla altro di come risolvere problemi si temi commerciali già confezionati quando invece è fondamentale conoscere come funziona WP e quali sono le potenzialità del suo codice.
              • Ottima guida, pratica e semplice da seguire. Sto approcciando da un po' alla programmazione Wordpress e devo dire che mi è stata molto utile per capire alcuni meccanismi di base. Sarebbe utile se potessi aggiungere anche una specifica sezione su come trattare i commenti e come creare una sezione del sito con una pagina di accesso. Aspetto novità! Grazie mille!