Come creare un tema WordPress da zero

WordPress è, come ben noto, il CMS attualmente più diffuso sul Web. Gratuita, open-source, questa piattaforma di blog ha un altro grande pregio che lo ha reso vincente rispetto ai competitor: è estremamente flessibile, e ve ne potete accorgere facendovi un giro in Rete e osservando quanti e quanto variegati sono i progetti che sono stati sviluppati a partire da esso.

La flessibilità di WordPress è evidente soprattutto nel web design. Grazie alla struttura organizzata a template, il vostro sito/blog può essere ridisegnato in migliaia di modi differenti, con sforzo nullo. Pur esistendo un numero incommensurabile di temi disponibili su Internet, sia gratuiti che a pagamento, può essere sfidante e affascinante occuparsi personalmente del design del proprio progetto, senza ricorrere quindi a customizzazioni o riadattamenti.

In questi tutorial vi spiegherò come si può costruire un tema WordPress partendo da zero. Darò per scontate delle nozioni di web design, soprattutto quelle riguardanti HTML, CSS e un po’ di PHP, che è il linguaggio di programmazione su cui è basato WordPress.

Strumenti per iniziare

Per consentirvi d’iniziare e completare il vostro sviluppo in comodità, e soprattutto in locale, dotatevi di un buon editor di testo dedicato alla programmazione; tra quelli free vi consigliamo PsPad, scaricabile a questo link.

Volete testare il risultato dei vostri progressi senza andare ad “inquinare” dei progetti già online? Potete farlo molto facilmente con XAMPP, un progetto open-source che vi consente di creare una configurazione d’ambiente locale di Apache + PHP + MySQL.

La struttura WordPress

Un tema WordPress deve garantire la presenza di almeno due file obbligatori:

index.php – Descrive la pagina del sito, quella che viene quasi sempre invocata, in particolare quando accediamo alla home page.

style.css – Definisce il foglio di stile che verrà adottato all’interno dell’intero tema, quindi il design vero e proprio del vostro progetto.

I file vanno inseriti all’interno di una directory con il nome che assegnerete al tema, che a sua volta va posizionata nel percorso “wp-content/themes/” nella vostra installazione WordPress.

Solitamente quasi nessuno usa solo i due file elencati sopra, ma li integra con tutta una serie di altri file, che elenchiamo di seguito:

header.php – La testata. Logo, menù e quant’altro.

footer.php – Il piè di pagina. Di solito comprende la chiusura dei tag <body> e <html>, oltre a presentare gli spazi per i credits del sito.

sidebar.php – La barra laterale. Di solito contiene vari widget o banner pubblicitari.

page.php – Questo file definisce il formato per le pagine, che in WordPress rappresentano un’entità distinta dai post.

single.php – Il file dell’articolo singolo. Viene invocato quando si clicca sul link del titolo del post.

search.php – E’ la pagina che restituisce i risultati di una ricerca interna al blog.

archive.php – Restituisce una lista dei post archiviati, una funzionalità sempre meno usata in WordPress.

comments.php – Definisce il template dei commenti, di solito viene richiamato da single.php

category.php – Restituisce un elenco di articoli riguardanti la categoria selezionata.

functions.php – E’ un file che contiene una lista di funzioni proprie del tema, richiamate per assolvere a svariati compiti.

404.php – File che restituisce un messaggio d’errore in caso di pagina non trovata.

Vale la pena ricordare che, nel caso in cui uno o più di questi file non sia presente nell’installazione del tema, WordPress andrà a recuperare il file standard del tema di default.

In generale, WordPress sintetizza il layout delle proprie pagine in questa maniera:

 

 

 

 

 

 

 

 

 

Se poi stiamo parlando di una pagina relativa ad un singolo post, il layout è leggermente differente:

Come potete notare, si tratta di uno sviluppo modulare della pagina, ovvero ciascuna sezione viene affidata ad un singolo file, che sarà poi richiamato dal principale (index.php, appunto). Per richiamare i singoli moduli si usano le seguenti sintassi:

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Questo modo di trattare i file è assai comodo, soprattutto nel caso in cui vogliate apportare delle modifiche, che andranno pertanto effettuate una singola volta e non per tutti i tipi di pagina.

La testata

Contenuta nel file header.php, rappresenta tutto quel che viene prima del <body>, e quindi del Loop, all’interno di una pagina WordPress.

Di solito riporta il doctype, il charset, il titolo della pagina, ovviamente le classi di stile che definiscono il logo, ed eventuali meta-tag o script necessari per l’esecuzione o il monitoraggio (come Google Analytics).

Questo è un esempio canonico di area di head HTML5-compliant:

<!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="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
        <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>

Il Loop

Nella sua versione standard, WordPress riporta all’interno della sua pagina (ad eccezione di quella relativa al singolo articolo) una lista di post ordinati secondo vari criteri (temporali, ma anche di categoria, tag, ecc…). Quest’elenco viene generato con un nucleo di codice chiamato “The Loop”, che nella sua forma più basic ha un costrutto del tipo:

<?php if (have_posts()) : ?>
               <?php while (have_posts()) : the_post(); ?>    
               <!-- do stuff ... -->
               <?php endwhile; ?>
<?php endif; ?>

Il loop può essere customizzato in svariati modi, tra cui:

  • Annidare più loop
  • Escludere determinate categorie
  • Modificare l’apparenza dei post

La sidebar

Altro elemento “storico” di un blog WordPress è la sidebar, che può essere sinistra, destra, addirittura doppia e non soltanto su entrambi i lati, ma che non può fare a meno di appartenere alle seguenti due categorie:

  • Sidebar “statica”, i cui elementi sono definiti nel codice e restano sempre gli stessi. E’ il “vecchio” modo di realizzare sidebar.
  • Sidebar “dinamica”, i cui elementi sono definiti dai widget e pertanto variano di volta in volta.

Ulteriori approfondimenti

In questo articolo mi sono limitato a presentarvi gli aspetti base necessari per la creazione di un tema WordPress. E’ chiaro che se avete delle esigenze particolari sarete costretti ad agire più pesantemente sul codice e soprattutto sul foglio di stile.

Se invece volete iniziare da un’ottima base di partenza, e se pensate anche voi che il futuro dei siti web sarà responsive, vi sarà utile scaricare il Twitter Bootstrap, un framework veramente ben fatto e discretamente semplice da customizzare.

Altrimenti, se proprio non volete toccare codice, potete passare a degli ambienti più “ad alto livello” come quelli proposti da WP Theme Generator e da Headway Themes: il secondo, però, non prevede alcuna versione “free”.

Buon Tema a tutti!

Bibliografia

Webmaster con WordPress. Creare rapidamente siti professionali