Alla base dello sviluppo di temi professionali per WordPress c'è innanzitutto la conoscenza di WordPress e del suo funzionamento. Di pari importanza sono la conoscenza di PHP, HTML, CSS e JavaScript. La conoscenza di un framework non è necessaria, anche se molti la consigliano. La realtà è che un framework limita fortemente la nostra libertà d'azione e le nostre scelte sul codice e sul design del tema. Inoltre i framework ci costringono ad un lavoro supplementare per imparare il loro funzionamento, il che si concretizza in un tempo di realizzazione maggiore per il nostro tema. Noi siamo e dobbiamo essere creativi perchè è la creatività che permette ad un tema di essere venduto e di diventare popolare. Ma quali sono le linee guida da seguire? Proviamo a dare alcuni consigli.
Primo: l'idea grafica
Potrà sembrare contraddittorio, ma la grafica è il primo fattore che colpisce i potenziali utenti del nostro tema. Quindi va dato ampio spazio alla fase di design con programmi come Photoshop o Fireworks.
La vostra idea grafica potrà sia essere del tutto nuova che riprendere degli stilemi presi da altri temi o siti. L'importante è che sia chiara e che contenga le caratteristiche più richieste, come ad esempio:
- slideshow
- icone social
- abbellimenti (bordi arrotondati, ombreggiature eccetera)
- un logo ben definito
- header e footer
- la parte centrale dei contenuti
- una o più colonne laterali con i contenuti ausiliari (in alcuni temi possono anche non essere presenti, ma vi consiglio sempre di tenere questo aspetto nella debita considerazione)
Dovrete cercare di creare un design ricco ma non ridondante, ovviamente tenendo presente il tipo di sito su cui verrà usato (blog, sito aziendale, sito business, organizzazione ecc.).
Ricordate sempre che se create la grafica giusta, avete già fatto un passo enorme in avanti nel convincere gli utenti a scegliere il vostro tema.
Secondo: template statico in HTML, CSS e JavaScript
Il secondo passo è quello di creare un template statico delle varie sezioni del vostro tema usando HTML per la struttura, CSS per la presentazione e JavaScript per il comportamento.
In questa fase dovete prestare molta attenzione affinchè non si presentino quei bachi lato client in browser come Internet Explorer. Usate quindi il seguente ordine di test nei browser:
- Firefox
- Chrome
- Internet Explorer
- IE7
- IE8
- IE9+
Opera e Safari sono browser che si attestano intorno al 2/3% del mercato desktop, mentre hanno quote più significative nel mobile. In ogni caso si tratta di browser standard compliant, quindi non ci saranno differenze significative.
Valutate attentamente Internet Explorer: se per esempio vedete che il vostro slideshow funziona male in IE7, allora potete depennare questa versione di Explorer dalla lista quando pubblicherete il vostro tema.
Invece, IE8 dovrà essere presente. Se notate delle anomalie evidenti, vi consiglio di usare i commenti condizionali sia per il codice CSS che (soprattutto) per quello JavaScript.
In JavaScript, questo è il momento in cui potete scegliere la vostra libreria di riferimento e gli eventuali plugin da aggiungere per ottenere gli effetti che desiderate. WordPress supporta attualmente sia jQuery che Prototype. Altre librerie necessitano di un'attivazione esplicita.
Verificate sempre che una libreria sia presente come proprietà dell'oggetto globale window:
if(window.jQuery) {
// ...
}
Sia jQuery che Prototype condividono l'alias $. Per evitare conflitti, il modo più semplice per usare jQuery è quello di racchiudere il codice in una funzione automatica:
(function($) {
// codice jQuery
})(jQuery);
Se usate invece noConflict() dovete assegnare il riferimento ad una variabile:
var J = jQuery.noConflict();
J.ready(function() {
// ...
});
Terzo: PHP e WordPress
A questo punto dovete usare il vostro codice HTML all'interno dei file che formano un tema di WordPress, ovviamente usando le funzioni e i costrutti specifici del CMS.
Dovete inoltre caricare il vostro file CSS nel file header.php di WordPress e decidere se caricare il codice JavaScript in questo file o usare invece il file footer.php. Il secondo approccio vi da una migliore performance percepita da parte dell'utente, in quanto gli script vengono eseguiti insieme al corpo della pagina.
Potete anche usare i filtri di WordPress su wp_footer, ma non ve lo consiglio in quanto costringono il CMS ad un lavoro di parsing ed elaborazione aggiuntivo. Molto meglio l'inserimento diretto.
Usate un server locale per il vostro tema e create post e pagine usando contenuto fittizio. Simulate anche un minimo di interazione da parte degli utenti, per esempio lasciando dei commenti fittizi o inviando e-mail dal sito. In altre parole, testate tutte le funzionalità del vostro tema.
Se il vostro tema lo richiede, definite una sezione di amministrazione del tema permettendo all'utente di configurare alcuni aspetti del tema, come i contenuti dello slideshow o i propri link ai social network.
Per aggiungere altre funzionalità potete:
- usare il file
functions.phpper gestire le sidebar e i widget - usare il file
functions.phpper modificare i contenuti dei post e delle pagine - creare dei widget per le sidebar
- creare degli shortcode (per inserire ad esempio video di YouTube o gallerie di immagini)
Vi consiglio di creare una directory apposita per i file core della vostra configurazione in modo da nasconderli all'occhio dell'utente inesperto che smanetta con l'editor del tema.
Infine, un tema professionale non dovrebbe mai essere intrusivo, ossia non dovrebbe mai in automatico:
- modificare la struttura dei permalink
- creare directory o file al di fuori della directory del tema
- modificare il template predefinito dei post o delle pagine
- inserire post e pagine fittizi
Quando il tema viene disattivato o disinstallato, la procedura di disinstallazione deve necessariamente riportare il database e il CMS allo stato originario, come se il tema non fosse mai stato installato, a meno che il mantenimento di alcune parti (come le opzioni del tema) non sia funzionale ad una successiva reinstallazione.