Partiamo dall’Utente
Punto zero: l’Utente. Lo scrivo con la U maiuscola perché troppo spesso noi sviluppatori si dimentica che il nostro lavoro ha sempre lui come obiettivo finale: l’Utente. Non solo ce ne dimentichiamo ma siamo inclini a snobbarlo ed odiarlo perché, in un certo qual modo, non fa niente per venire incontro al nostro mondo, anzi, si frappone tra noi e il nostro mondo di codice con le sue richieste a volte insulse.
In realtà non dobbiamo dimenticarci che senza l’Utente il nostro lavoro non avrebbe senso. Nella sua soddisfazione possiamo ritrovare la forza di sviluppare più per gli altri e meno per noi stessi.
NOTA: Nel corso dell’articolo ti sarà chiaro il motivo di questa paternale introduttiva, non mollarmi proprio ora ;)
Arriviamo al sodo: partire dall’Utente significa partire dall’aspetto del nostro lavoro che lui percepisce: la pagina HTML.
Questa semplice affermazione è importante, poiché dalla nebbia dei dubbi e delle domande su come si sviluppa un tema in WordPress ecco che ora abbiamo un faro che ci indica la strada: tutto termina col mostrare una pagina HTML all’Utente.
NOTA 2: Concentrarsi sull’utente fin dallo sviluppo migliora l’Usabilità del sito web, punto cruciale per aumentare l’interazione dell’Utente con il sito stesso. E ricordati che l’iinterazione dell’Utente (traffico, permanenza sul sito, commenti, interazioni socials) aiuta il posizionamento nei motori di ricerca.
L’HTML che vede l’Utente
Chi genera l’HTML che l’Utente vede?
WordPress sfrutta una -relativamente- complessa struttura di files e meccanismi per generare la pagina web definitiva. Tra tutti questi meccanismi possiamo citare filters e actions (costituiscono la famiglia degli hooks) i conditional tags, il loop degli articoli, e certamente il nostro tema.
Prima ancora di parlare di come creare il tema in WordPress, dobbiamo comprendere che WordPress ragiona la pagina HTML in tre blocchi principali:
- HEADER: questa parte include sia il tag <head> con tutto il suo contenuto (title, meta tag, css, js, ecc) sia la parte superiore fissa del nostro sito. Nella parte superiore potremmo trovare il logo, i contatti, icone socials, navigazione e breadcrumb.
- CONTENUTO: parte “centrale” della nostra pagina dove vengono caricati i contenuti. Qui potremmo anche trovare delle sidebar laterali e riquadri funzionali come il blocco commenti, la paginazione, gli articoli correlati e altri widgets.
- FOOTER: traducibile in italiano come piè di pagina del sito, dove possono essere inseriti informazioni aziendali, nuovamente la navigazione (o quanto meno i link principali) e certamente il tag di chiusura </html> del nostro documento
Questa semplice suddivisione ha un forte impatto sull’Usabilità poiché forza (o almeno ci prova) il nostro layout ad avere degli elementi fissi che sarebbero l’header ed il footer. Gli elementi fissi in un sito web sono la bussola con la quale l’Utente si orienta e la loro mancanza porta a confusione durante la navigazione e difficoltà nel costruire un rapporto di fiducia con l’azienda pubblicizzata dal sito web. Sembra scontato – ma non lo è.
Per procedere oltre dobbiamo avere chiara in mente la struttura HTML del nostro documento:
<html> <head> TITLE META CSS JS </head> <body> <header> LOGO CONTATTI </header> <nav> HOME | SERVIZI | CHI SIAMO | BLOG </nav> <div> TI TROVI QUI: </div> CONTENUTO <footer> INFORMAZIONI AZIENDALI </footer> </body> </html>
Il tema WordPress genera l’HTML in questo modo
Ok siamo arrivati davanti l’oceano! Ora mettiamo i piedi a mollo…
L’HTML, ragionato nei tre blocchi sopracitati, viene generato dal tema di WordPress grazie ad una semplice struttura di files base:
wp-content/ themes/ tema_creato/ header.php <head> TITLE META CSS JS </head> <header> LOGO CONTATTI </header> <nav> HOME - SERVIZI - CHI SIAMO - BLOG </nav> <div>TI TROVI QUI: </div> index.php <?php get_header() ?> CONTENUTO <?php get_footer() ?> footer.php <footer> INFORMAZIONI AZIENDALI </footer>
NOTA: Chiedo scusa se in questa visualizzazione ho mischiato files, cartelle ed HTML ma avendo sperimentato per primo la confusione che si prova quando si approccia un nuovo argomento, ho ritenuto questo sistema il più efficace per spiegarti dove e come i vari files del template entrano in gioco.
Tema WordPress: almeno 2 files in una cartella
Osservando lo schema precedente avrai notato che partendo a ritroso dall’utente siamo arrivati a capire come è fatto un tema WordPress ossia di quali files è formato e cosa possiamo trovare dentro questi files.
Sì, perché creare un tema in WordPress, in termini pratici, significa creare una cartella sotto wp-content/themes ed aggiungervi almeno due files obbligatori:
- STYLE.CSS: non solo contiene le regole grafiche del tuo tema ma anche i commenti che indicano a WordPress il nome del tema ed altri dati.
- INDEX.PHP: l’HTML del tuo tema.
Come detto in apertura, esistono decine di validi tutorials che ti insegnano paro paro cosa devi scrivere dentro ai files del tema WordPress e ripeterli qui avrebbe poco senso. Per tuo riferimento in ogni caso, ecco qualche link dove troverai il codice esatto da scrivere nei files del tema:
- Creare temi WordPress, la guida – guida in più pagine di HTML.it
- Costruiamo un template WordPress da zero – guida in più pagine su WP And More a cura di Andrea Barchigiani
- Come crare un tema WordPress partendo da zero – articolo su Your Inspiration Web, a cura di Nando Pappalardo
Organizziamo i contenuti: Articoli, Pagine (e tanto altro)
Nel mio articolo Tipi di post personalizzati in WordPress ho parlato ampiamente dell’importanza di usare un tipo di post diverso per ogni tipo di contenuto diverso.
A tale proposito WordPress ti permette di usare Articoli per creare articoli del tuo blog e Pagine per le pagine statiche (Chi Sono, Servizi, ecc) ma anche tipi di contenuti personalizzati (eventi, offerte, film, prodotti, relatori, ecc). Le possibilità sono innumerevoli e ti permettono di gestire ottimamente i tuoi contenuti.
Quello che però ora ci interessa è come mostrare questi contenuti all’utente tramite il tema da noi creato. Abbiamo visto che i contenuti vengono mostrati all’utente grazie alla pagina index.php. Grazie al sistema gerarchico di WordPress possiamo però gestire tre casi diversi in maniera ottimale:
Articoli del Blog
Per gli articoli vogliamo visualizzare il titolo, l’Immagine in evidenza e il contenuto, sicuramente, ma non solo. Anche il riquadro dell’autore, i pulsanti di condivisione ed i commenti e magari una sidebar dove posizionare categorie, tag cloud e chi più ne ha più ne metta.
Per decidere come il nostro tema visualizzerà gli articoli useremo un ulteriore file: single.php.
Inserendo questo file nella nostra cartella “tema_creato” accadrà una cosa molto semplice: ogni qual volta l’utente (o una pagina WordPress) richiederà un articolo, sarà visualizzato il codice presente in single.php. Chiaramente, tutte le altre richieste saranno gestite ancora da index.php. Capito perché si parla di “Gerarchia”?
Per una disamina di questo particolare file ti consiglio l’articolo WORDPRESS: CREARE UN TEMPLATE SINGLE.PHP DIVERSO PER CIASCUN FORMATO DEI POST di Gabriele Romanato.
Pagine statiche
Per queste pagine vogliamo sicuramente un profilo più basso: titolo e contenuto come minimo, al quale aggiungere semmai. A questa configurazione base potremmo poi voler aggiungere dei richiami all’azione in varie parti del contenuto e nella sidebar. In ogni caso non saranno presenti le categorie e tutte le altre funzionalità necessarie agli articoli del blog.
Così come per gli articoli, anche nel caso delle pagine statiche WordPress prevede un file che possiamo usare per decidere la particolare visualizzazione delle stesse: page.php
Quindi, nuovamente, quando l’utente vorrà visualizzare una pagina, WordPress farà appello a questo file nel nostro tema per deciderne la visualizzazione, mentre tutte le altre richieste useranno index.php.
Tipi di post personalizzati
Anche se ho parlato dei tipi di post personalizzati nell’articolo sopra linkato, è utile qui annoverare che puoi creare un file nel tuo tema con il quale stabilire la visualizzazione dei post personalizzati ed anche, cosa molto importante, dei loro attributi.
Per dire a WordPress di usare una visualizzazione differente per i tuoi contenuti personalizzati dovrai creare un file del tipo single-<nome del tipo>.php.
Per l’implementazione tecnica di questi post nel tuo tema puoi far riferimento alla sezione “Risorse per la creazione di tipi di post personalizzati” del mio articolo sopra menzionato.
Impatto sull’esperienza Utente e sulla tua attività
Inutile dire che una suddivisione chiara dei tipi di contenuti che vuoi presentare all’Utente ha un impatto consistente sull’Usabilità del sito e sulla sua esperienza di navigazione.
Quando l’Utente interagisce con i tuoi contenuti (clicca il link sui risultati dei motori di ricerca, resta nella pagina per tot tempo, condivide l’articolo, lo commenta, legge altre pagine del tuo sito web) si genera un grande valore per:
- IL TUO MARCHIO: una permanenza duratura e piacevole sul tuo sito web aumenterà le possibilità che l’Utente si ricordi di te e, si spera, che l’Utente colleghi il tuo brand a sensazioni piacevoli collegate al poter risolvere il suo problema
- POSIZIONAMENTO NEI MOTORI DI RICERCA: i motori monetizzano quando l’utente è contento – stop. Per cui ogni intervento mirato a far contento l’utente sarà preso in buona considerazione dai motori di ricerca. La suddivisione dei contenuti e l’implementazione di diverse visualizzazioni nel tuo tema WordPress vengono captate dai motori di ricerca soprattutto perché i motori ragionano oramai per entità e relazioni tra queste entità.
Conclusioni
Si è parlato molto su come creare temi WordPress o personalizzare quelli già esistenti.
Se però lo sviluppo si allontana da una visione Utente-centrica occorre fermarsi un attimo e ricordarci che il centro del nostro lavoro deve essere l’Utente perché nella sua soddisfazione risiede il nostro guadagno in termini di marchio, visibilità e vendite.