Video tutorial https://www.youtube.com/watch?v=e-5AUQSEzgY
Perchè fare un tema (theme) da zero?
I temi acquistabili su marketplace come themeforest.com offrono molta flessibilità e facilità d’uso, ma non permettono ogni tipo di personalizzazione; per creare pagine personalizzate sono disponibili dei portentosi plugin (builder) come Elementor e PageLayer, che ormai permettono di realizzare quasi qualsiasi cosa riusciamo ad immaginare. Ma ho cominciato a lavorare con WordPress nel 2012, quando era necessario scrivere il codice HTML, CSS e PHP da integrare nella struttura richiesta per i temi.
Oggi non ha davvero più senso creare un tema da zero, a parte forse per un motivo: la velocità di esecuzione. Se vogliamo controllare ogni singolo aspetto e ottimizzarlo manualmente, una strada da seguire è imparare a creare un tema da zero.
Un tema commerciale o un builder, sono infatti strumenti per gestire millemila soluzioni differenti, e per questo motivo, il sito web realizzato potrebbe a volte risultare un pò lento: ma per ogni problema su WordPress c'è anche una soluzione, infatti plugin come Nitropack riescono a velocizzare attraverso meccanismi di caching delle pagine.
Le motivazioni per fare questa fatica (o investimento) nel realizzare un tema da zero, non sono più così tante nel 2023. Ma se c'è a qualcuno piace approfondire, capire i meccanismi alla base del funzionamento di WordPress, allora può valere la pena seguire questo tutorial.
Dopo aver seguito questo, sono disponibili indicazioni alcune indicazioni per fare un tema che includa le parti per WooCommerce; è importante ricordare che buona parte delle personalizzazioni che funzionano nella creazione di un nuovo tema, possono essere applicate anche ad un tema già esistente, come vedremo più avanti nella sezione Personalizzare la pagina 404.
In due parole: impariamo a fare un tema da zero per capire aspetti tecnici e come funziona WordPress "sotto il cofano", per controllare ogni singolo aspetto (codice PHP, HTML, CSS), per migliorare la velocità e realizzare qualunque personalizzazione.
Pagine template
Anche in un sito web realizzato con un tema (come ad esempio programmatorewp.com) è possibile creare pagine template, cioè delle pagine riutilizzabili che contengono codice PHP personalizzato. Per un esempio la pagina /blog di questo sito web è realizzata proprio con una pagina template. Comporre un tema WordPress da zero significa poter creare qualsiasi estetica e non dire (quasi) mai <<Non è possibile fare questa cosa>> perché non ci sono limiti, con tutte le difficoltà (e le possibilità) che questo offre.
Creare un tema WordPress da zero
Un tema WordPress è come un puzzle formato da diversi pezzi che vanno composti per dare al sito web la forma e le funzionalità che vogliamo. La prima cosa da fare è creare una cartella dentro wp-content/themes (ad esempio, “tema-base”) e creare il file header.php che contiene le prime righe HTML della pagina, come il charset e il tag <title>. Di solito le righe standard della guida di WordPress possono bastare per iniziare.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>In generale, qui vanno tutte le parti da visualizzare in alto, in tutte le pagine del sito web. Ad esempio, se vogliamo inserire un menu nella parte alta (vedi sezione Mostrare un menu in WordPress) è qui che va richiamato; oppure se vogliamo la possibilità di mostrare un messaggio temporaneo in tutte le pagine (vedi il plugin base) ad esempio per pubblicare un annuncio o un'offerta commerciale temporanea.
La guida ci dice che il secondo file da creare è sidebar.php che serve a creare quelle barre tipiche dei vecchi blog; non serve più da diversi anno, perché è ormai inusuale avere barre laterali (a sinistra o a destra). Nel caso servisse, è con questo file che andrà creata.
Quindi il terzo file, il footer.php che rappresenta la parte di codice presente in fondo ad ogni pagina del sito web; anche qui, come header.php partiamo dal codice proposto nella guida.
<?php wp_footer(); ?>
</body>
</html>Probabilmente è in quest'area dove scrivere le informazioni di copyright, i dati dell’azienda e tutte quelle informazioni da mostrare staticamente in fondo; anche qui è utile il plugin base che offre un pannello per modificare questa parte.
La index.php è la pagina richiamata durante la navigazione del sito web; viene inoltre scomodata quando non è stato creato un template di pagina 404.php (che vedremo nelle sezioni successive). Infatti, se non creiamo il file 404.php e navighiamo un url non esistente, WordPress mostrerà il contenuto dela index.php.
<?php get_header(); ?>
<main role="main" class="container">
<div class="starter-template">
<p class="lead"><?php the_content(); ?></p>
</div>
</main>
<?php get_footer(); ?>Il file archive.php è la pagina richiamata quando l’utente naviga le pagine di categoria (category/nomecategoria) e di solito mostra la lista degli articoli; stesso meccanismo per WooCommerce, ma il file da utilizzare è archive-product.php (vedi il tutorial per fare un tema WooCommerce).
<?php get_header();
if ( have_posts() ) :
while ( have_posts() ) :
the_post();?>
<div id="post-<?php the_ID(); ?>">
<div class="entry-content">
<?php
the_content();
?>
</div>
</div><?php
endwhile;
endif;
get_footer();Due file (page.php e single.php) servono a mostrare i contenuti presenti nelle pagine e negli articoli. Per ora, creiamo questi due file e al loro interno copiamo il codice già presente nella index.php.
Per creare un template di pagina personalizzato che abbiamo accennato all'inizio, ad esempio un template per la homepage, basta sdoppiare il file page.php creando page-homepage.php e aggiungendo in alto la direttiva che imposta il nome della pagina template.
<?php
/**
Template Name: Home
Description: home
*
*/ Così, dopo aver completato questo lavoro e attivato il nuovo tema, apparirà la voce Home dentro Template per associare questa pagina template ad una pagina in WordPress. Utilizzeremo e vedremo meglio questo meccanismo alle ultime righe di questo tutorial.
Una cosa molto simile si può fare per i Custom post type, creando file single-[nome Custom Post Type].php ma approfondiamo questo aspetto un'altra volta.
Tralasceremo altri file meno importanti come comments.php e search.php ma, come accenniamo all'inizio di questo articolo, è importante creare una pagina 404.php (la vedremo nel prossimo capitolo). Esiste ancora un file fondamentale, che all'inizio può anche essere vuoto: il file style.css: se non è presente, WordPress non riconoscerà tutto questo lavoro come un suo tema e non potremo installarlo.
Un file non fondamentale, ma utile per distinguere il proprio tema dagli altri, è screenshot.png che corrisponde alla copertina del nostro tema. Questa copertina sarà visibile nella sezione Aspetto -> Temi e deve misurare 1200x900px.
Per questo tutorial utilirremo l'immagine di seguito: è delle giuste dimensioni e risulta abbastanza chiara, come è visibile anche nello screenshot qui sopra.
Molti dettagli sono stati tralasciati per evitare di rendere il tutorial troppo lungo, ma ciò che è bene ricordare è che WordPress è un software (o applicazione web) scritto in PHP e quindi potenzialmente può fare tutto quello che può fare PHP attraverso la creazione di temi e plugin su misura. Tutte le informazioni per farlo, sono contenute qui https://make.wordpress.org/core/handbook/contribute/codebase.
Le ultime note riguardano alcune impostazioni del file functions.php, il file che contiene le funzioni specifiche del tema.
Gestione featured image
Ad esempio, il codice di seguito permette la gestione delle featured image, le immagini associate ad una pagina o ad un articolo:
add_theme_support( 'post-thumbnails' );E farà apparire la sezione seguente nella pagina di creare di un articolo:
Personalizzare la pagina 404
Per quanto tutti noi proviamo ad abbassare le possibilità che l’utente incontri una pagina inesistente, è sempre bene creare una pagina template per gestire questa eventualità. E’ molto utile anche personalizzare questa pagina in modo da mostrare un messaggio e una lista di articoli interessanti o di suggerimenti.
Ma se non vogliamo che esca sempre lo stesso messaggio, possiamo creare una lista di messaggi come “La pagina è inesistente, prova a leggere altri fantastici articoli” oppure “Questa pagina è andata in vacanza ma puoi leggere queste altre” e un meccanismo per mostrare un messaggio in maniera casuale.
Molto utile è anche inserire in basso una lista di articoli che ci interessa particolarmente mostrare.
E’ possibile fare questo e molto altro direttamente dalla pagina 404 del proprio tema realizzato da zero, oppure creando una page template all’interno di un tema commerciale acquistato in precedenza.
Di seguito un esempio standard di pagina 404, basta inserire questo codice nel file denominato 404.php all’interno della cartella del tema.
<?php
get_header(); ?>
<div class="container">
<div class="row">
<div class="col-md-4">
<?php get_template_part( 'content', 'leftbar' ); ?>
</div>
<div class="col-md-8">
<header class="page-header">
<h1 class="page-title"><?php _e( 'Pagina non trovata! Prova a cliccare in una categoria o a cercare un altro prodotto' ); ?></h1>
</header>
<div class="page-wrapper">
<div class="page-content">
<br>
<?php get_search_form(); ?>
</div>
</div>
</div>
</div>
</div>
<?php get_footer();Includere CSS e JS in un tema WordPress (la maniera corretta)
Sopra dicevamo che più avanti avremmo visto come inscludere CSS e JS nella maniera corretta: ed eccoci qui. Non è illegale includere un CSS o un JS dentro header.php, ma WordPress offre una soluzione più elegante.
Includere file CSS e file JS insieme
Ecco un esempio completo da inserire in functions.php per includere file CSS e JS correttamente come spiegato qui su wordpress.org.
function add_theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'theme-file-css', get_template_directory_uri() . '/css/theme-file.css', array(), '1.1', 'all' );
wp_enqueue_script( 'theme-file-js', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), 1.1, true );
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );Altro: includere un file PHP con WordPress
Se l’esigenza è inserire un box con un contenuto personalizzato in homepage, nel footer o in un’altra posizione raggiungibile via codice (quindi non dall’editor di WP), chi proviene dallo sviluppo in PHP, può pensare di utilizzare la funzione include() o include_once(). In realtà, WordPress offre una propria funzione da tenere in considerazione: get_template_part().
Mettiamo il caso di voler includere in un page template il file content-leftbar.php (creato manualmente nel tema). Per mostrarlo basterà chiamare get_template_part passando due parametri che corrispondono al nome del file. Infatti, per inserire un file nominato “content-leftbar.php” basta passare “content” (la prima parte del nome del file) e “leftbar” la seconda parte del nome del file in questo modo:
get_template_part('content', 'leftbar');E’ un concetto simile a quello dell’include del PHP, ma questo è il modo giusto di includere un contenuto dentro una pagina template o qualunque altro file del tema WordPress.
Un altro metodo accettato da WordPress è quello di creare uno shortcode su misura come spiegato in questo articolo.
Mostrare un menu in WordPress
Per inserire un menu all’interno di un template costruito da zero, esiste la funzione wp_nav_menu() a cui vanno passati alcuni parametri di configurazione.
Lo slug del menu è quello impostato in fase di creazione del menu in /wp-admin -> Aspetto -> Menu ed è il parametro di configurazione minima.
$args = array('menu' => 'slug-del-menu');
wp_nav_menu( $args );Questa funzione genera un menu molto scarno, ma la funzione wp_nav_menu() può essere estesa e personalizzata impostando parametri diversi. Naturalmente, nessuno impedisce di creare voci di menu manualmente in HTML, ma è davvero comodo poter modificare le voci del menu da /wp-admin, quindi vale la pena imparare ad utilizzare questa funzione.
Attiviamo il nuovo tema per vedere il risultato
Il lavoro per ora è fatto: andiamo ad attivare il tema da /wp-admin cliccando su Aspetto->Temi e cliccando sul bottone blu Attiva relativo al nostro tema. Torniamo alla homepage e vediamo il risultato.
Migliorare la grafica di questo tema
In questo tutorial abbiamo visto come partire veramente da zero, dalla creazione della cartella ad ogni file necessario del tema; ma una volta finito risulterà molto vuoto proprio perchè è uno schema base, soddisfa i requisiti minimi necessari per essere riconosciuto da WordPress come un tema, e da adesso può essere riempito con qualsiasi estetica.
Prendiamo a riferimento un tema HTML di Bootstrap, dal sito ufficiale getbootstrap.com; nella sezione examples ci sono diversi (ovviamente) diversi esempi da utilizzare.
Scegliamone uno e col browser vediamo il codice sorgente. Proviamo a riconoscere le diverse sezioni disponibili e utilizziamole per arricchire il tema appena realizzato.
Video tutorial per la parte grafica con bootstrap https://www.youtube.com/watch?v=fuJ81uH8pLA
Per approfondire
Ogni nuovo template ha un header, footer, page, article e gli altri file che abbiamo visto, e la struttura è cambiata poco negli ultimi anni: il riferimento è sempre il sito ufficiale.
