Thematic, WordPress e le considerazioni di Fabio “marbio” Marasco

Mi sono imbattuta in un discorso interessante riguardo a Thematic; come per Artisteer (la mia semi-recensione e’ qui) sono affascinata da tutto quello che riguarda il mondo dei temi per WordPress.

Allora, che cos’e’ Thematic?
E’ un framework che permette di creare personalmente un tema per il vostro WordPress, se non andate troppo per il sottile ma volete un tema che non sia uno di quelli free che trovate in rete.. provatelo.
La differenza con Artisteer e’ lampante: Thematic non e’ uno stand-alone, ma si installa come un tema nella vostra installazione WP e da li’ si comincia a lavorare.
Dovete avere un minimo di conoscenza dei CSS se volete sfruttare al massimo le sue potenzialita’, mentre per Artisteer ci sono buone probabilita’ che non dobbiate modificare niente (a meno di non voler essere dei perfettini personalizzati).

Ho trovato la spiegazione di Fabio “marbio” Marasco semplice e sintetica (che tanto al giorno d’oggi se non e’ una documentazione ufficiale o un .nfo nessuno legge poi tanto) e ho voluto riprenderla anche qui.

Come funziona ?

Un Theme Framework è un tema creato per essere una soluzione estendibile che può fungere da genitore dal quale ereditare delle caratteristiche durante lo sviluppo di un tema figlio (child theme).

Dopo aver scaricato Thematic bisognerà installarlo come un normale tema nella cartella “themes” di WordPress. Per creare un tema figlio basta creare una nuova cartella e includere in essa un foglio di stile nel quale includiamo una serie di riferimenti al tema padre, in questo modo ne ereditiamo le caratteristiche.

Ecco i riferimenti necessari da aggiungere nel file style.css:

/*
Theme Name: NOME
Theme URI: INDIRIZZO
Description: DESCRIZIONE
Author: AUTORE
Author URI: INDIRIZZO AUTORE
Template: thematic
Version: 0.1


This work is released under the GNU General Public License 2:
http://www.gnu.org/licenses/old-licenses/gpl-2.0.htm


*/
/* Reset dei Browsers di default */
@import url('../thematic/library/styles/reset.css');


/* Stile tipografico */
@import url('../thematic/library/styles/typography.css');

/* Layout di base */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* Stile delle immagini*/
@import url('../thematic/library/styles/images.css');

/* Tema di default */
@import url('../thematic/library/styles/default.css');

/* Preparazione del tema per i plugin*/
@import url('../thematic/library/styles/plugins.css');

A questo punto si dispone della base di partenza per personalizzare il tema. Naturalmente il tema figlio può essere arricchito con funzionalità avanzate, definendo funzioni PHP ed ulteriori fogli di stile.
Se volete un po’ di ispirazione date un’occhiata a questa galleria di child themes gratuiti realizzati con Thematic.

Struttura di una Pagina con Thematic

Per avere una panoramica di quelli che sono gli elementi caratteristici di una pagina creata con Thematic, vi rimando a questo ottimo schema.

Come potete notare nello schema sono illustrati gli elementi div principali, le actions e gli hooks del tema e le aree predisposte per i widgets (asides).

Per poter meglio distinguere tutti questi elementi è presente anche una legenda che rappresenta in maniera diversa tutte le diverse entità.

Le Aree dei Widgets (Asides)

Le aree riservate ai widget solitamente vengono predisposte sulle sidebar. Gli utenti esperti invece modificando le pagine php dei temi possono sistemare i propri widget in qualsiasi posizione. Thematic invece offre la possibilità anche ai meno esperti di avere a disposizione ben 13 diverse aree (chiamate asides) che possono essere utilizzate per personalizzare il tema in modo efficace.

Le possibili aree dedicate ai widgets nella homepage:

  • Primary Aside
    Rappresenta la sidebar principale ed è posta di default a destra del contenuto.
  • Secondary Aside
    E’ la sidebar secondaria.
  • Index Top e Index Bottom
    Rappresentano l’area superiore e inferiore al contenuto nella pagina iniziale (homepage) del blog.
  • Subsidiary Asides
    Sono le tre aree che si trovano nel footer di ogni pagina.
  • Index Insert
    E’ un’area posta tra gli articoli ed è visualizzata solo nella pagina iniziale.
  • Single Top, Bottom, Insert
    Sono le aree collocate nelle pagine degli articoli singoli rispettivamente all’inizio, alla fine e al centro (subito dopo il contenuto e prima dei commenti).
  • Page Top, Bottom
    Sono le aree collocate nelle pagine statiche del blog.

L’utilizzo del framework su wordpress obbliga ad installare nella directory “themes” la cartella thematic contenente il cuore di tutto il framework. Il nuovo tema avrà una sua cartella con i suoi files (imamgini, css, javascript, ecc.) ma sarà inevitabilmente una estensione del tema principale thematic.

Questo costituisce un limite ?

Beh in realtà dipende.

Per un utente non web-addicted il cui interesse è avere un tema flessibile e completo, con una grosso grado di personalizzazione grazie alle 13 aree dove disporre i widgets, ciò non dovrebbe rappresentare un problema. L’utente è limitato all’utilizzo dei vincoli strutturali imposti da thematic.

Per un utente web-addicted la situazione è leggermente differente. Se si necessita di un grado di personalizzazione maggiore la prima cosa da fare è andare a mettere mano al codice… no? Ed io ho intrapreso questa strada.

Dopo aver studiato per bene il codice della libreria di Thematic ho deciso di iniziare a fare le prime modifiche strutturali tra cui: modifica dell’header del blog con inserimento di un div contenente tre immagini (rispettivamente twitter,rss e mail), modifica del footer del post singolo (single.php in wp), modifica del footer del blog, modifica della sidebar e tutte le modifiche grafiche in termini di css ed immagini.

E qui si è palesato il primo atroce dubbio, come fare?

Voi direte: basta modificare i files .php che fanno riferimento alle porzioni della pagina (single, footer, header, sidebar, ecc.). In un primo momento ho copiato tali files contenuti dalla directory cuore “thematic” nella root del mio tema ed ho iniziato a personalizzare il codice dove possibile, perchè spesso vengono richiamate funzioni thematic (difficili da modificare in breve tempo). Ad ogni modo non mi sembrava corretto copiare i files del tema padre nel tema figlio e modificarli, a questo punto mi conveniva di utilizzare direttamente tema padre contenuto nella cartella core thematic.

Approfondendo le mie ricerche sul web e sui vari blog che parlano di Thematic (tra cui Altamente decorativo e Matteo Stagi) ho capito che c’è una soluzione e consiste nell’andare a modificare o meglio nell’andare a riempire il file functions.php del nuovo tema (figlio) di tutte le modifiche strutturali che vogliamo applicare al blog.

Ad esempio per modificare il loop degli articoli nella pagina principale occorre rimuovere la funzione loop di thematic, scrivere una nuova funziona personalizzata secondo le proprie esigenze ed aggiungere questa come loop di thematic tramite una action.

Alla fine mi sono ritrovato con più di 15 funzioni personalizzate e con un file con quasi 500 linee di codice, devo ammettere che è un po’ difficile adesso mettere mano a questo file però per lo meno tutto sembra funzionare correttamente.

Alla domanda:”Riutilizzeresti Thematic per creare il tema del tuo blog?”

Sinceramente risponderei con un no. Con questa mia risposta negativa non voglio infangare questo straordinario strumento. Ho fatto un po’ d’esperienza, ho approfondito un argomento interessante e sono contento di ciò. L’unico problema è che ho perso del tempo per entrare nell’ottica del framework senza riuscire ad avere il controllo sul codice che desideravo.

Voglio precisare che queste sono delle considerazioni personali e se credete che abbia sbagliato in qualche punto per favore fatelo presente.

Mi sono letta un po’ di documentazione, seguendo anche i link segnalati da Fabio:

  • Theme Shaper
    E’ il sito di Ian Stewart fondatore del framework. Qui potete trovare documentazione, scaricare il framework e anche una serie di temi creati con esso.
  • Theme Shaper Forums
    Supporto offerto dalla comunità che gira intorno a Thematic.
  • Altamente Decorativo
    E’ il blog di Daniele Alano, uno degli sviluppatori del framework che si è occupato della sua traduzione italiana. Sulle sue pagine potrete trovare degli ottimi tutorial in italiano sulla personalizzazione e la creazione dei temi.
  • Matteo Stagi
    Sul suo blog troverete un ottimo tutorial a puntate che vi aiuterà nello sviluppo e nella personalizzazione di un child theme (3Hours Theme – a tutorial child theme for thematic).

Effettivamente se desiderate un tema semplice, personalizzato e veloce, ve lo consiglio. Vi consiglio le gallerie sopra citate, vi consiglio di leggere molto e di documentarvi per realizzare al meglio un tema tutto vostro.
Ma se siete dei perfettini, se avete bisogno di avere il controllo totale allora vi consiglio di integrare Thematic con le vostre conoscenze.

In ogni caso, e’ da provare, perche’ vale sempre la pena di usare, far conoscere e diffondere uno strumento libero creato per tutti. E se avete suggerimenti o idee, rivolgeveti agli sviluppatori e alle Community!

full-stack graphic designer | social media manager | community manager | blogger, autrice e saggista | appassionata di Giappone, poker e pianoforte | mai senza occhiali da sole | attaccabrighe per natura