logo
Federico Barberis

Web Designer

Professionista freelance con oltre 15 anni di esperienza nel settore della grafica digitale applicata al web e alla stampa. Esperto della piattaforma WordPress e del framework Bootstrap sono in grado di seguire l’intero workflow per la realizzazione di un sito web, dalla progettazione grafica alla implementazione su server e la pubblicazione on-line. Sono appassionato del mio lavoro e alla continua ricerca di tools e soluzioni efficaci e magari innovative.

Scarica il CV
 

Come realizzare un tema WordPress

wordpress_banner1

Come realizzare un tema WordPress

In questo articolo vorrei spiegare come realizzare un tema personalizzato per WordPress. A chi non conosce WordPress, mi limito a dire che è – semplificando – un “software” open-source scritto in PHP e basato su database MySQL, che permette, una volta installato e configurato sul proprio spazio web, di creare e gestire un Blog o un sito web senza conoscere quasi niente di PHP e HTML, personalizzando l’aspetto e la grafica per mezzo dei temi. Molti di voi, probabilmente, già conoscono WordPress e sanno che esistono migliaia di temi gratuiti da scaricare per questa piattaforma; se vi accontentate di dare al vostro sito un bell’aspetto, e non vi importa che qualcun altro ha quasi sicuramente usato lo stesso tema da voi scelto, questo articolo non vi interessa. Potete evitare di leggerlo. Ma se volete creare un sito o un Blog con WordPress dalla grafica originale, siete capitati nel posto giusto. Ma andiamo per gradi.

1. Cos’è un tema?

Un tema di WordPress è un insieme di file PHP e CSS che definiscono l’aspetto del vostro sito e il suo funzionamento. Infatti è il tema che stabilisce come presentare i vostri contenuti, sotto forma di blog o di magazine, oppure se volete una pagina di presentazione statica e gli articoli del blog su un’altra. Ma di questo parlerò in un altro articolo.

2. Come è composto un tema?

Un tema WordPress è composto da diversi file e da una cartella per le immagini; alcuni file, per esempio, possono essere:

  1. header.php –> contiene la parte superiore del sito (di solito il banner ed il menù) ma più in generale tutto ciò che si deve ripetere su tutto il sito nella parte superiore.
  2. footer.php –>analogo di header e contiene la parte finale del blog (in genere i tag di chiusura html o la grafica di chiusura del vostro layout).
  3. index.php –> è la homepage, o meglio, la parte che contiene tutti gli articoli
  4. page.php –> è il template delle pagine interne del blog (ad esempio portfolio)
  5. sidebar.php — > contiene il codice della barra laterale, sede dei widgets
  6. style.css –> il foglio di stile principale
  7. functions.php –> serve a dichiarare le funzioni personalizzate del sito; per chi comincia basta solo il codice di default che rende la nostra sidebar “widget ready”, ossia pronta a ricevere nuovi widgets dal pannello admin del sito.

Questi file sono contenuti all’interno di una directory nominata a nostro piacimento (nometema) posizionata in wp-content/themes/ nel nostro sito.

3. Progettare il lay-out della home page

Ok! Dopo questa breve infarinatura, possiamo iniziare a progettare la home page del nostro blog. Sentiamoci liberi di usare gli strumenti a noi più congeniali, perchè non dobbiamo fare altro che realizzare una pagina html statica. Un esempio può essere questo:

layout wordpress

Come vedete la pagina è composta da una testata che contiene il nostro logo e il titolo del blog, un menù di navigazione, l’area che conterrà gli articoli, una barra laterale per i widget e infine il piè di pagina, o footer, che conterrà, ad esempio, le note sul copyright e i nostri contatti. Traducendo questo lay-out in HTML otterremo:

 

Salviamo il nostro documento come template.html nella directory che abbiamo chiamato con molta fantasia nometema.
Adesso è giunto il momento di dare uno stile al nostro template; creiamo, quindi un file di testo vuoto dentro a nometema, chiamiamolo style.css e scriviamo queste righe di codice:

 

Applichiamo style.css a template.html scrivendo questo frammento di codice dopo il tag <meta> del nostro file HTML:

 

 

otterremo così una pagina con un lay-out a due colonne; questa è la base di partenza per costruire il nostro tema wordpress.

4. Frammentazione del codice

Bene! Ora che abbiamo il nostro file HTML vediamo come trasformarlo in un tema di WordPress. Per fare ciò dobbiamo suddividere il codice html in diversi file php che andranno a costituire le diverse aree della nostra pagina. Questa logica viene usata per rendere modulare il nostro blog. Il contenuto vero e proprio della pagina viene creato dal file index.php, gli altri file sono inclusioni di codice, come ad esempio header.php che ne descrive la parte alta, cosicché se volessimo cambiare il banner o il logo del sito, dovremmo cambiare solo un file che verrà richiamato su ogni pagina. Da questa immagine potete capire da quale file viene creata ogni area della pagina.

layout wordpress

Adesso creiamo nella directory del nostro tema il file header.php e copiamo al suo interno solo la parte di codice del nostro template che descrive la parte superiore della pagina

Salviamo il file, creiamo il file index.php e copiamo questa parte di codice:

questo codice andrà inserito in sidebar.php:

 

e infine footer.php

 

Adesso creiamo il file funcions.php, vedremo in seguito cosa scriverci dentro.
Abbiamo tutti i file necessari al funzionamento del nostro tema dobbiamo integrarli con le funzioni in php di wordpress, indispensabili per inserire gli articoli e i dati presenti nel database.

5. Integrazione delle funzioni di WordPress

iniziamo dal file header.php, che modifichiamo in questo modo:

 

Niente panico! Queste ed altre funzioni (Template Tags) sono spiegate nella guida ufficiale di WordPress: il Codex o, se non conoscete l’inglese, esiste il wiki di WordPress Italy.
Passiamo  al file index.php, il cuore della nostro sito dinamico. Esso contiene il loop di WordPress, cioè il codice che interroga (query) il database e mostra i nostri articoli nella home page. Scriviamo questo codice all’interno di index.php e salviamolo:

 

Tutto questo codice fa si che la pagina abbia comportamenti diversi in base alla query fatta al database. Se si tratta della home page mostrerà gli ultimi articoli, se invece si vuole visualizzare un singolo articolo, mostrerà solo quello con il form per inserire i commenti. Un solo file php, quindi, mostra risultati diversi secondo ciò che vuole visualizzare l’utente del sito.
I Template Tags come get_header(), get_sidebar() o get_footer() servono per includere il codice contenuto rispettivamente in header.php, sidebar.php e footer.php e ricostruire così la pagina nella sua interezza.
Continuiamo con il file sidebar.php che includerà il codice per visualizzare i widget di WordPress, cioè quegli elementi generalmente presenti a lato della pagina che contengono il calendario dei post, il tag cloud, il form per la ricerca ecc. Ho scritto “generalmente” perché nulla ci vieta di inserire l’are dei widget in un altra posizione, ad esempio nel footer.
Ecco cosa scriveremo in questo file:

 

Questo codice renderà la nostra side bar “widget ready”, cioè pronta per l’inserimento dei widget.

Apriamo il file footer.php e scriviamo queste righe:

 

Abbiamo quasi finito. Non ci resta che definire all’interno di functions.php le funzioni per creare il menù dinamico di wordpress (custom menu) e l’area dei widget.
Apriamo il file e scriviamo:

Bene! Il nostro tema è pronto; carichiamo la cartella nometema, che contiene tutti i nostri file, in wp-content/themes/ nel nostro sito. All’interno dell’area temi del back-end di WordPress troveremo il tema dal nome molto originale nometema. Attiviamolo e il gioco è fatto!

Spero di essere stato sufficientemente esaustivo, ma se qualcosa non vi è chiaro vi invito a commentare il post; vi risponderò sicuramente.
Prima di chiudere vorrei indicarvi la guida grazie alla quale ho iniziato a cimentarmi nella creazione di temi WordPress:
http://www.claudio-corti.com/06/creare-un-tema-per-wordpress/

Grazie per l’attenzione e a presto con una nuova guida su WebLab Design Blog!

Federico Barberis
info@weblabdesign.net

Web designer free-lance con oltre 15 anni di esperienza nel settore della grafica digitale applicata al web e alla stampa. Esperto della piattaforma WordPress e del framework Bootstrap sono in grado di seguire l’intero workflow per la realizzazione di un sito web, dalla progettazione grafica alla implementazione su server e la pubblicazione on-line. Sono appassionato del mio lavoro e alla continua ricerca di tools e soluzioni efficaci e magari innovative.

Non ci sono commenti

Pubblica commento