Advertisement
  1. Code
  2. WordPress
Code

16 controlli vitali prima di rilasciare un tema WordPress

by
Length:LongLanguages:

Italian (Italiano) translation by Danilo Maccioni (you can also view the original English article)

Rilasciare un tema WordPress su una piazza, come ad esempio ThemeForest, dove il pubblico è così ampio e variegato, presenta alcune sfide. Non potete verificare una soluzione direttamente con il cliente. Avete bisogno di pianificare in anticipo tutti i casi estremi, ed assicurarvi che il vostro tema sia il più possibile personalizzabile. Se siete inesperti, c'è la malaugurata possibilità che qualche cosa vi sfugga di mano. Fortunatamente per voi, abbiamo condensato la nostra faticata esperienza, per aiutarvi ad evitare di ripetere i nostri stessi errori.

1: Non visualizzate i commenti dei post protetti

WordPress da' la possibilità di proteggere i post: i visitatori possono accedere a tali contenuti solamente dopo aver inserito la password. Non dovete fare niente di speciale riguardo al post in sé, ma se vi dimenticate di controllare prima di visualizzare i commenti, i visitatori potranno leggere i commenti del post protetto, inficiando la volontà di proteggere i contenuti sin da subito. Potete rimediare a ciò con un semplice controllo su comments.php:


2: Visualizzare correttamente gli allegati

Esiste uno speciale file del template, attachment.php, che è usato quando un visitatore clicca su un allegato. Gli allegati possono essere immagini, filmati, file audio... qualsiasi cosa viene inserita mediante i bottoni degli allegati nell'editor:

Attachment buttons

Creare attachment.php non è obbligatorio: se il file di template non c'è, il browser semplicemente visualizzerà l'allegato, se se necessario con un plugin adeguato. Ci tengo a dire che il grande vantaggio offerto da attachment.php è che, ad esempio, quando il visitatore decide di visualizzare un immagine alla grandezza originale, la navigazione del sito rimane accessibile. Potete anche visualizzare qualche informazione personalizzata riguardo all'allegato. Il tema di base di WordPress 3.0, TwentyTen, ha un interessante attachment.php che visualizza le dimensioni dell'immagine.


3: Introdurre il supporto Right-To-Left

Potreste aver sentito parlare del supporto alle lingue da destra verso sinistra, ma a meno che non abbiate esperienza con una di queste lingue, è possibile pensiate sia tutto estremamente complesso.

Introdurre nel vostro tema il supporto alle lingue scritte da destra a sinistra, come l'arabo e l'ebraico, è oggi molto semplice. Gli stili in rtl.css sovrascriveranno quelli presenti nel principale style.css quando la variabile WP_LANG presente in settings.php verrà impostata con una lingua right-to-left, come ad esempio l'arabo.

Innanzitutto il vostro rtl.css ha bisogno di questa dichiarazione:

La prima proprietà si spiega da sé. La seconda 'aggiunge un livello di integrazione rispetto all'algoritmo bidirezionale' (W3C).

Il file rtl.css non deve copiare ogni proprietà presente in style.css, ma soltanto quelle che devono variare rispetto a quando si legge da sinistra a destra. Pensate come se il sito si vedesse allo specchio: i float cambiano verso, (i float: left diventano i float: right, e viceversa) e i margini e padding si invertono (margin-right: 18px diventa margin-left: 18px; e il margin-right: 0). Pensate anche a delle grandi sezioni del sito: in quale direzione fluttuerà l'intestazione? Non scordate tutti i piccoli dettagli, come l'indentazione  delle liste di definizione e delle citazioni. Per avere un idea, potreste provare a passare alla lingua araba o ebraica in siti come Facebook o Wikipedia, oppure visitare siti internazionali come Al Jazeera.

Credeteci o no. Questo è tutto ciò che c'è da sapere.

Riferimento


4: Fornire uno stile per l'Editor

Per dare lo stile all'editor TinyMCE fornito con WordPress, create un file chiamato editor-style.css nella cartella del vostro tema. È davvero semplice da compilare, dovete solo far coincidere la tipografia con quella del foglio di stile principale, non dovete preoccuparvi della presentazione dei blocchi. TinyMCE però presenta alcune stranezze. Potete evitare che le linee diventino troppo lunghe impostando una proprietà max-width alla classe .mceContentBody.

Editor is too wide
Editor has usable width

Se state includendo il supporto ai linguaggi right-to-left tramite rtl.css, dovreste anche aggiungere un file chiamato editor-style-rtl.css, dal momento che anche nell'editor, i margini e i padding delle liste dovranno variare.


5: Far funzionare gli elementi suddivisi in pagine

Gli elementi suddivisi in pagine (da non confondere con le liste di elementi impaginati) vengono suddivisi in pagine dall'autore per mezzo del Quicktag. A dire il vero nei siti WordPress questa caratteristica pare non venga sfruttata molto, ma se dimenticate di gestirla, i visitatori saranno impossibilitati a leggere oltre la prima pagina. Per permettere all'intero contenuto di esser letto, dovete usare la funzione wp_link_pages all'interno del Loop.

Per un post diviso in tre pagine, otterremo il seguente risultato:

I visitatori potranno cliccare i numeri di pagina per leggere l'intero post. La documentazione completa per questa funzione si trova nel WordPress codex.


6: Dare uno stile ai Widget comuni

Dal momento che non potete dare uno stile a ogni possibile widget sulla terra, è una buona idea controllare che almeno i quelli forniti con wordpress vengano mostrati in modo adeguato. Ciascuno di essi può avere un titolo opzionale, inoltre alcuni possono assumere sembianze diverse. Per esempio, il widget Categorie, può essere rappresentato come una tendina, e mostrare livelli multipli di categorie annidate o tag, perciò assicuratevi di gestire le liste annidate. Concedete particolare attenzione al widget del Calendario. Si tratta di una tabella, e generalmente vorrete che i giorni siano centrati nelle proprie celle, così come i nomi dei giorni nell'intestazione. Nella prima immagine, i numeri appaiono leggermente sfasati, mentre nella seconda sono allineati correttamente.

Infine, potrebbe esservi d'aiuto iniziare a concepire degli stili per la classe .widget, che vengano applicati a tutti i widget, anche quelli provenienti da terze parti. In particolare con i layout flessibili, assicuratevi che i widget non si allunghino eccessivamente, perché questo potrebbe farli apparire davvero bizzarri.


7: Rendete usabili i commenti annidati

I commenti sono un po' una croce della progettazione. C'è una marea di roba da mostrare (avatar, nomi dei commentatori, date del commenti, il corpo, i bottoni di risposta), perciò avrete bisogno di fornirgli un adeguato spazio, ma allo setsso tempo, non dovrebbero sovrastare il contenuto principale, e in qualche modo devono distinguersi visivamente. I commenti annidati portano con sé tutte queste difficoltà, perché dovete anche distinguere le risposte. Generalmente, lo si fa con un margine, ma dal momento che non potete sapere quanti livelli ci saranno, si rischia di non concedergli abbastanza larghezza o di dargliene troppa.

Inoltre, ricordate che il modulo di risposta potrebbe non apparire al fondo della pagina, ma anche nel mezzo della discussione, quando qualcuno clicca il bottone di risposta. Così i margini e il padding dovranno essere adeguati in entrambi i casi. C'è anche il link "cancella la risposta" che deve esser modellato e posizionato.

Comment reply form

Infine, dovreste assicurarvi che la paginazione dei commenti funzioni, che i commenti appaiano correttamente, sia quando ce ne sono pochi, sia quando ce ne sono molti e che essi non fuoriescano dai limiti del loro contenitore. State attenti a non mischiare i commenti e non dimenticate di controllare la disposizione sia quando l'avatar è abilitato oppure disabilitato.


8: non scordate wp_footer() and wp_head()

Richiamate wp_footer() subito prima di chidere il tag body, e il wp_head() subito prima del tag head. Entrambe le funzioni hanno funzione di hook, le quali possono essere usate dagli sviluppatori di temi e plugin. Se li escludete, alcune caratteristiche e plugin potrebbero non funzionare, inclusi gli header personalizzati.

Riferimento


9: Supporto alle immagini d'anteprima

Anche se molti temi continuano ad affidarsi ai plugin, quali TimThumb, dalla versione 2.9 di WordPress è disponibile nativamente il supporto alle immagini di anteprima ('immagini in evidenza'). Per fruirne, dovete semplicemente aggiungere un paio di linee nel file function.php.

La prima linea dichiara a WordPress il supporto del vostro tema alle anteprime, mentre la seconda impone la grandezza delle immagini a 70x70px, per evitare di spaginare la struttura con anteprime dimensionate differentemente. In aggiunta, potete scegliere le politiche di ridimensionamento. L'esempio qui sopra ridimensionerà semplicemente l'mmagine, mentre

la ritaglierà anche per farla calzare nella dimensione specificata. Potete anche rendere disponibili dimensioni di anteprima addizionali, per utilizzarle in diverse aree del sito:

Ora,

mostra un'anteprima 70X70 e

mostra un'anteprima 500x500.

Riferimento

  • Potete trovare una spiegazione completa nel blog di uno degli sviluppatori di WordPress Mark Jaquith's.

10: Supportare i menu personalizzabili

WordPress 3.0 ho introdotto i tanto attesi menu personalizzabili, perciò è doveroso fare i modo che gli utenti possano beneficiarne. Dopo aver registrato il loro supporto nel tema, in questo modo:

...potrete visualizzare un menu personalizzato con wp_nav_menu():

Fate attenzione, il sistema permette di inserire elementi nidificati, che potrebbe generare strani effetti se non ne prevedete la gestione.

The border extends in a weird shape. Nested items have bullets and look jumbled.

Inoltre se fornite stili di menu a tendine o navbar, sarà difficoltoso mostrare correttamente oltre un certo numero di livelli di navigazione.  Per proteggere la vostra struttura, o scegliete un livello sotto il quale tutti gli elementi verranno visualizzati ugualmente, o evitate di mostrare i livelli inferiori. Ad esempio, per limitare la visualizzazione a due livelli, usate:


11: Abilitare gli sfondi personalizzabili

Questa è una nuova caratteristica introdotta in WordPress 3.0, ed è anche la più semplice da implementare. Si tratta letteralmente di una riga:

Fatto! Gli utenti ora potranno scegliere lo sfondo personalizzato che desiderano:

Background selection interface.

12: Abilitare le testate personalizzate

Nello stesso spirito, ma con qualche sforzo in più, potrete permettere la scelta dello sfondo della testata del sito ed anche il colore del suo titolo. Questa proprietà non funzionerà finché non inizierete a definire una serie di costanti. Sostituite 'yourwidth' e 'yourheight' con qualsiasi misura adatta al vostro tema.

Una volta piazzate, avrete bisogno di scrivere la funzione che applicherà lo sfondo alla vostra testata. Dal momento che non esiste un tag standard per la testata di un sito, WordPress non può indovinare come applicare il CSS necessario per voi. Ad esempio, per aggiungere uno sfondo personalizzato al div con id 'header', dovrete fare così:

Avrete anche bisogno di creare una funzione, tipo mytheme_admin_preview_header(), che applichi lo stile nell'area amministrativa per farlo combaciare col risultato finale. L'area di anteprima ha l'id #headimg, mentre il titolo del sito e la sua descrizione hanno ripettivamente id #name e #desc. Sperimentate con l'anteprima fin quando non vi riterrete soddisfatti. Infine, per abilitare il pannello Aspetto > Header, richiamate:

RIferimento


13: Rendere traducibili le stringhe visibili all'utente

Non tutti vogliono il loro tema in inglese. Impacchettate ogni stringa che potrà esser letta dall'utente con __() se volte tradurla, oppure _e() se volete anche stamparla, tipo:

Il secondo argomento dovrebbe essere un identificativo univoco del vostro tema, in modo che altre traduzioni non confliggano.

Dopo che ogni stringa sarà avvolta in una funzione di traduzione, avrete bisogno di usare lo script makepot.php. La maniera raccomandata per ottenere questo script è di installare Subversion, per poi eseguire:

Otterrete una cartella, chiamata 'trunk', contenente tra gli altri, anche il file makepot.php.
Lo script si esegue così

mytheme è il percorso alla cartella del vostro tema. Otterrete un file chiamato mytheme.pot, che è pronto per essere utilizzato in un programma, ad esempio Poedit per produrre un file .po contenente la traduzione.

Per concludere, avrete bisogno di comunicare a WordPress dov'è la traduzione nella cartella del vostro tema, per esempio:

Qui, 'mytheme' è l'identificativo per il vostro tema; il secondo argomento dice dove si trovano i file di traduzione. TEMPLATEPATH è una costante speciale definita da WordPress che punta sempre alla cartella del tema corrente.

Riferimento


14: Gestire i campi personalizzati

Questo punto è facoltativo, potreste lasciarlo alla discrezione dell'utente o dello sviluppatore. Saprete che WordPress supporta l'aggiunta di campi personalizzati in ciascun post. In molti temi, questi campi non mostrano nulla, fin tanto che non vengono usati per una particolare caratteristica. Alcuni utenti potrebbero esserne confusi, perché credono di poter usare i campi personalizzati per restituire qualunque informazione vogliano. 

The custom fields interface

C'è una funzione,

da chiamare all'interno del Loop, che visualizza tutti i campi personalizzati presenti in un post, come una lista non ordinata di elementi in forma chiave:valore. A dire il vero, non è utilissima, ma potrebbe essere meglio che lasciare qualcuno interrogarsi sul perché questi campi non compaiano da nessuna parte.

Riferimento


15: Assicurarsi che il tutto appaia consistente

Una delle difficoltà nel creare un tema per un sistema dinamico come WordPress, è che ci sono molti casi particolari che non si presentano così spesso, ma che potrebbero rovinare l'aspetto qualora si verificassero. Pensate a post con i commenti chiusi, o con corpi molto stringati. Assicuratevi non ci siano spazi anomali in cui infilarsi , o che gli elementi non si mescolino assieme perché qualcosa non è visibile. La sezione dei commenti potrebbe non essere visualizzata se i commenti non siano abilitati, o che il campo di inserimento della password rimpiazzi il contenuto del post, quando esso è protetto.

Inoltre, provate a confrontare il modo in cui i commenti sono modellati rispetto al corpo. Questo ultimo punto richiede una particolare cura, perché, parlando in generale, lo spazio è più limitato nell'area dei commenti -- specialmente quando si utilizzano i commenti nidificati e ogni replica viene spostata verso destra (o verso sinistra, nel RTL).


16: Usate l'unità di test del tema di WordPress.org

WordPress.org offre un file di contenuti d'esempio che potrete importare nella vostra installazione WordPress, contienente un assortimento di post di test, pagine ed immagini.

Per importare il file in WordPress 3.0, prima avrete bisogno di installare il plugin WordPress Importer. Dopodiché, selezionate Strumenti > Importa > WordPress. Assicuratevi di controllare che il la casella 'Scarica ed importa gli allegati' sia spuntata. In caso contrario, non otterrete le immagini associate ai post.

Dopo che l'importazione sarà completa, potrete usare questa lista di controlli per determinare se il contenuto appare come dovrebbe.


Conslusioni

Abbiamo imparato che le cose alle quali prestare attenzione sono molteplici varietà. Alcune sono caratteristiche raramente utilizzate, altre sono opportunità di personalizzazione, altre ancora sono più legate a comuni problemi di progettazione, che si ripresenteranno ad ogni sito WordPress che realizzerete. La nostra lista è certamente lontana dall'essere esaustiva, perciò vogliamo leggere e vostre opinioni! Quali pensate siano le parti di più spesso trascurate?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.