Creare Temi WordPress, come realizzare un tema da zero

Saper sviluppare temi WordPress è una skill che può tornarti molto utile, sia se ti occupi di realizzare siti web per conto di clienti, sia se desideri sapere come modificare e personalizzare un template premium. In questo articolo ti mostrerò, quindi, come creare temi WordPress.

In passato abbiamo già visto come creare temi WordPress, per questo troverai un link di approfondimento per ogni sezione di questa guida.

In alternativa, puoi scaricare il mio ebook gratuito Creare Temi WordPress, presente nell’area premium del blog.

Questo ebook è composto da tutti gli articoli presenti su WPinProgress, rivisti e corretti in un unico file PDF di oltre 100 pagine.

All’interno dell’area premium troverai anche un un estratto delle prime 40 pagine del corso Sviluppare con WordPress.

Ti segnalo anche il gruppo Facebook Sviluppo WordPress by WPinProgress, dove confrontarsi riguardo lo sviluppo di temi e plugin WordPress.

Come ben sai, WordPress è una piattaforma di gestione dei contenuti (CMS) open source, che gira in PHP, che si appoggia ad un database MySQL, su server Linux.

Se non disponi di uno spazio web apposito, puoi installare sul tuo computer un programma che simula un server in locale, ti consiglio Xampp, che gira sia su Mac che su Pc Windows e Linux.

Approfondisci: Come installare WordPress in locale

Inoltre non è necessario che tu conosca alla perfezione il linguaggio PHP per creare temi WordPress, poiché lo stesso CMS fornisce delle funzioni utili a gestire e manipolare i dati.

Puoi consultare la documentazione ufficiale di WordPress, ovvero il Codex, dal seguente indirizzo http://codex.wordpress.org

Creare un tema WordPress, i file principali

Un tema per WordPress è composto da insieme di file php, fogli di stile e file javascript.
Quelli più importanti sono due, index.php e style.css, senza i quali il nostro tema WordPress non funzionerebbe.

Il file index.php viene utilizzato per visualizzare gli ultimi articoli del blog, sempre non sia stata impostata una pagina statica come pagina principale del sito, dalle impostazioni di lettura di WordPress.

Il file style.css invece, contiene l’intestazione e tutte le informazioni relative al tema, come il nome oppure la versione e le informazioni dell’autore.

Oltre a questi due file, è possibile aggiungere anche uno screenshot del tema, semplicemente rinominandolo un’immagine png precedentemente creata in screenshot.png, che sarà visualizzato come anteprima nella sezione Temi di WordPress

Approfondisci: Aggiungere le informazioni del tema

Durante la creazione di temi per WordPress, è importante seguire una gerarchia dei file poichè, per ogni sezione di un sito WordPress, è presente un file che si occupa di gemerare il contenuto.

Ad esempio, il file single.php è il template che gestisce gli articoli, il file functions.php contiene tutte le funzioni utili ad estendere il core di WordPress, il file comments.php gestisce i commenti e così via.

Ecco un elenco dei file che non dovrebbero mai mancare all’interno del tuo tema:

index.php , il file più importante, senza di esso il nostro tema non funzionerebbe.
style.css , questo file contiene, oltre alle informazioni del tema, anche il codice css che ne gestisce l’aspetto
header.php , il file dove caricare la parte alta del tema.
single.php , il template che si occuperà di visualizzare i post.
page.php , il template che si occuperà di visualizzare le pagine.
comments.php , il template che si occuperà di visualizzare i commenti.
archive.php , il template che si occuperà di visualizzare le categorie.
search.php , il template che si occuperà di visualizzare i risultati di ricerca.
sidebar.php , la barra laterale del nostro tema.
404.php , pagina di errore, nel caso la pagina richiesta non esista.
footer.php , file dove inserire la parte finale del nostro tema, oltre ai tags di chiusura.
functions.php, il file in cui è possibile inserire tutte le funzioni utili ad estendere il core di WordPress

Approfondisci: Gerarchia dei file di un tema WordPress

Creare un tema WordPress, la struttura della pagina.

Ogni pagina HTML generata da WordPress solitamente contiene una testata, in cui è presente la parte iniziale del documento HTML, oltre al menu di navigazione.
Ti consiglio di non inserire tutto il codice in un unico file ma di dividerlo in più parti, creando un file per la testata, uno per il footer, uno per la barra laterale e così via.

Testata

Per gestire la testata, WordPress utilizza il template header.php, che può essere richiamato tramite la funzione get_header()

Approfondisci: Header di un tema WordPress, parte 1
Approfondisci: Header di un tema WordPress, parte 2
Approfondisci: Header di un tema WordPress, parte 3

Barra laterale

Insieme alla testata, è spesso presente anche una barra laterale, in cui è possibile aggiungere uno o più widget.
I widget sono delle estensioni che possiamo utilizzare per estendere le funzionalità di WordPress, puoi gestirle andando in Aspetto, successivamente su Widgets.

Di default WordPress dispone di un buon numero di widget nativi, volendo puoi crearne uno nuovo integrandolo al tema oppure tramite lo sviluppo di un plugin.

Approfondisci: Come sviluppare un widget WordPress
Approfondisci: Come sviluppare un plugin WordPress

WordPress gestisce la barra laterale utilizzando il file sidebar.php, puoi richiamare questo file grazie alla funzione get_sidebar().

Approfondisci: Come aggiungere la barra laterale

Il loop

La parte centrale della documento HTML, contenente il contenuto della pagina oppure dell’articolo, viene gestita tramite una funzione che WordPress utilizza per collegarsi al database, chiamata Loop

La struttura del loop è la seguente:

/*INIZIO DEL LOOP */
if ( have_posts() ) : while ( have_posts() ) : the_post();

/*SERIE DI AZIONI DA ESEGUIRE*/

/*FINE DEL LOOP */
endwhile; else:  
/*MESSAGGIO DI ERRORE SE NON VIENE TROVATO NESSUN CONTENUTO*/
endif;

Il loop base di WordPress si occupa di caricare il contenuto, a seconda della pagina in cui viene richiamato, quindi rimane sostanzialmente lo stesso per ogni sezione del blog, ad esempio è possibile utilizzare lo stesso codice sia per le categorie oppure per i risultati di ricerca.

Quello che cambierà saranno le informazioni del contenuto da visualizzare, utilizzando le opportune funzioni.

Ad esempio puoi aggiungere inserire la data dell’articolo tramite la funzione the_time() oppure il riassunto tramite la funzione the_excerpt().

Approfondisci: Il loop

Puoi anche filtrare i risultati creando un loop personalizzato per visualizzare, ad esempio, solo i post di una determinata categoria oppure solo dei custom post type.

Approfondisci: Il loop, query personalizzate

È inoltre possibile aggiungere nuovi tipi di contenuto, simile agli articoli, grazie ai custom post type introdotti dalla versione 3.0 di WordPress.

Approfondisci: Come creare un custom post type

Commenti

Insieme al contenuto, è importante gestire i commenti dei visitatori, nel caso siano stati abilitati.

Anche se non viene aggiunto il file comments.php, WordPress genera comunque il modulo insieme a tutti i commenti già presenti.

Approfondisci: Gestione dei commenti WordPress, parte 1
Approfondisci: Gestione dei commenti WordPress, parte 2

Footer

Infine dobbiamo creare un file dedicato alla parte finale della pagina HTML, ovvero il template footer.php. Questo può essere richiamato tramite la funzione get_footer()

Approfondisci: Il footer

Conclusione

Una volta che abbiamo aggiunto tutte le sezioni della nostra pagina, ovvero la testata, il footer e la barra laterale, tramite gli appositi template, dobbiamo creare anche il template che gestisce i risultati di una ricerca sul nostro sito in WordPress, ovvero search.php.

Approfondisci: Gestione dei risultati di ricerca

Insieme al tema WordPress, può essere utile integrare un pannello di controllo, in questo modo sarà più semplice personalizzarlo, anche da parte di un tuo eventuale cliente.

Approfondisci: Il Theme Customizer di WordPress

In alternativa puoi anche creare da zero un pannello di gestione per il tema.

Approfondisci: Introduzione
Approfondisci: Custom header
Approfondisci: Menu amministrazione
Approfondisci: Salvataggio delle opzioni
Approfondisci: Ottimizzazione del codice
Approfondisci: Conclusione

Dopo aver seguito attentamente questa guida ed approfondito ogni argomento, sarai in grado di creare temi WordPress da zero, puoi scaricare il tema che abbiamo sviluppato insieme tramite il seguente pulsante: Scarica il tema WordPress

Se vuoi creare temi WordPress, per poi venderli e garantirti una rendita passiva, ti consiglio di leggere questo articolo: Vendere Temi WordPress