Creare il tema WordPress perfetto come codificare bene

Nella parte precedente di questa serie; abbiamo analizzato varie API di WordPress che dovremmo conoscere, abbiamo parlato dell'importanza di tradurre un tema (o, meglio ancora, di renderlo già tradotto in altre lingue) e compreso il concetto di temi di licenza e l'uso di prodotti concessi in licenza con i temi.

In questo articolo, ci concentreremo sul codice: vedremo come codificare con gli standard di codifica di WordPress, come commentare correttamente il nostro codice e come convalidare e testare il tema.

Standard di codifica WordPress

Sì, lo so, hai il tuo stile di codifica preferito: ti piace comprimere una grande funzione con una singola riga di codice, non ti piacciono molto gli spazi bianchi - Ah, una volta ero proprio così.

Ma se hai intenzione di sviluppare per altre persone e letteralmente vendere il tuo codice, devi rendere comprensibile il tuo codice. E mentre pensi che il tuo codice sia "abbastanza chiaro", ci sono degli standard universali per la codifica per aiutare tutti a codificare con lo stesso stile, e tutti i mercati e i centri di download dei temi seri (da WordPress.org a ThemeForest) richiedere per codificare con gli standard.

Esistono quattro linguaggi di programmazione e marcatura principali necessari per sviluppare temi WordPress: HTML, CSS, JavaScript e, naturalmente, PHP. Diamo un'occhiata a ciascuno:

Standard HTML

Esistono regole relativamente semplici per scrivere codice HTML conforme agli standard:

Convalida il tuo codice con W3C. Sempre. Ci arriveremo più tardi.
Fai attenzione agli elementi che si chiudono automaticamente: devi terminare l'elemento con uno spazio, una barra e il segno "maggiore di".
Quando digiti i valori degli attributi, digitarli tutti in lettere minuscole, a meno che non siano per gli umani.
Completa sempre i valori degli attributi con le virgolette. Le virgolette singole e doppie sono accettabili.
L'indentazione deve essere logica e leggibile. Il codice PHP mescolato all'interno dell'HTML non dovrebbe essere un'eccezione.

Consulta la pagina degli standard HTML di WordPress su Make WordPress per ulteriori informazioni.

Standard CSS

La lista è un po 'più lunga, ma, di nuovo, ci sono regole semplici per la corretta codifica CSS:

Le proprietà dovrebbero essere rientrate con le schede.
È possibile raggruppare i selettori, ma ogni selettore deve avere una propria riga per la leggibilità.
Dai un nome a tutti classe e id selettori con lettere minuscole e non dimenticare di separare le parole con trattini.
Utilizzare selettori leggibili. .c6 non è un buon nome, chiamalo .Colonna sesto!
No overqualifying. div.column è privo di significato quando puoi semplicemente usarlo .colonna.
Le proprietà e i relativi valori devono essere anch'essi in minuscolo, ad eccezione dei nomi dei font e delle proprietà specifiche del fornitore.
L'ordine per le proprietà deve essere "display, posizionamento, modello box, colori, tipografia e altro".
Dovresti anche ordinare i prefissi del venditore da più tempo (-webkit-) al più breve (nessun prefisso).
Mantieni le tue query multimediali nella parte inferiore del foglio di stile.
Commenta il tuo codice CSS mentre commenta in PHP. Maggiori informazioni in seguito.

Vedi la pagina degli standard CSS di WordPress su Make WordPress per una spiegazione più dettagliata.

Standard JavaScript

Poiché oggigiorno JavaScript sta diventando cruciale per molti temi WordPress, abbiamo bisogno anche di standard e regole:

Le parentesi possono non apri e chiudi all'interno della stessa linea.
Preferisci virgolette singole su virgolette doppie, a meno che una stringa non contenga virgolette singole.
Sei libero di usare gli spazi bianchi come preferisci nel tuo codice - non usare spazi bianchi su righe vuote, però. E non dimenticare che stai usando lo spazio bianco per la leggibilità, non per divertimento.
Dai un nome alle tue funzioni e variabili usando camelCase, not_with_underscores. I costruttori dovrebbero essere dentro Titlecase.
È possibile dichiarare più variabili su una singola riga; ma se hai intenzione di assegnare valori, avrai bisogno di linee separate.
Il nuovo array () e nuovo oggetto () le notazioni sono "no-no". Utilizzare gli equivalenti di stenografia ([] e ) anziché.
Tratta i condizionali e i loop molto delicatamente - di solito sono i più facili da leggere male. L'uso di parentesi graffe e spazi bianchi è fondamentale per questo.
Se stai per usare jQuery; definire una funzione anonima e passare jQuery come argomento prima di fare qualsiasi altra cosa. Controlla l'esempio per essere sicuro.

La pagina degli standard JavaScript di WordPress su Make WordPress ha più informazioni, aggiungi questa pagina ai segnalibri e usala.

Standard PHP:

Questa è la parte più difficile. Ci sono tonnellate di regole da considerare:

Convenzioni di denominazione
Virgolette singole e doppie
Uso dello spazio bianco
Espressioni regolari
"Condizioni Yoda"
Speciali guest star SQL e query di database di formattazione

Se non sai cosa sono, allora forse il tuo miglior corso è quello di calpestare leggermente.

Ci sono due fantastiche risorse per impararlo, però:

Pagina WordPress PHP standard su Make WordPress
La serie Wptuts + intitolata "The WordPress Coding Standards" di Tom McFarlin

Commentando correttamente il codice

Per far capire agli altri sviluppatori come hai creato il tuo tema, devi rendere il tuo codice tema chiaro e leggibile - e questo richiede di commentare il tuo codice.

La migliore pratica per PHP è usare PHPDoc, lo stile di documentazione di phpDocumentor. È ampiamente utilizzato tra gli sviluppatori di WordPress e raccomandato nella pagina degli standard di documentazione di PHP su Make WordPress. Fornisce uno stile di documentazione pulito per il codice PHP.

Per quanto riguarda i CSS, la pagina degli standard CSS di WordPress su Make WordPress ti consiglia di farlo come PHPDoc, insieme ad un paio di altri suggerimenti.

Per quanto riguarda il codice HTML e JavaScript, sembra che non ci sia alcun modo consigliato o richiesto di commentare il tuo codice, ma questo non significa che non devi fare nulla: cerca di essere il più chiaro possibile con il tuo codice e fornire piccoli frammenti di informazione commentando ovunque sia necessario.

Convalida e test del tema

Il tema potrebbe essere un buon sito web nella tua testa, ma spero che ci saranno centinaia (forse migliaia) di persone che potranno usare il tuo tema ed essere sicuro che cercheranno di creare siti web che non puoi pensare di. Inoltre, ci sono dei requisiti per i marketplace tematici e le directory dei temi per far interagire il tema.

Ecco perché devi testare il tuo tema e convalidare il tuo codice. Ho tre idee per questo:

Convalida il tuo codice HTML e CSS con i validatori W3C

La prima cosa che devi fare è convalidare il tuo codice con i servizi di validazione del W3C. Sia i servizi HTML Markup Validator che i CSS Validator vengono utilizzati e sviluppati per anni e sono i migliori servizi di convalida disponibili.

Dopo aver fatto le due cose qui sotto, controlla semplicemente le pagine demo con questi due servizi per assicurarti che non ci siano errori o avvertimenti.

Usa il plugin "Sviluppatore" per correggere il tuo tema

Lo sviluppatore è un plugin gratuito sviluppato da Automattic che, nelle loro parole, aiutare gli sviluppatori di WordPress a sviluppare. In realtà è solo un programma di installazione di plugin: lo scopo principale del plugin è fornire i plugin essenziali per il proprio ambiente di sviluppo.

Lo sviluppatore suggerisce 16 diversi plugin. Mentre alcuni di essi rendono il processo di sviluppo molto più semplice (come Switching utente e Tema Drive Test), alcuni di essi aiutano a eseguire il debug del tema (ad esempio Registro di messaggi deprecati e Tema di controllo).

Quelli che trovo più utili sono Tema Controllo, Tema Test Drive e Debug Bar, ma tutti e 16 i plugin forniscono ottime funzionalità. Ti suggerisco di installarli tutti per testare il diavolo del tuo tema.

Metti alla prova il tuo tema con i dati di prova

Non puoi semplicemente codificare il tema e dire che è completato - devi testarlo con alcuni contenuti. Puoi creare i tuoi contenuti ma dovresti considerare di testare con alcuni "dati di test":

Utilizza i dati di esempio di WordPress. Questi dati di esempio contengono alcuni dei tipi di contenuti più utilizzati e ti aiuteranno a notare le carenze del tuo tema rispetto ai contenuti che hai dimenticato di considerare.
Usare di più esauriente dati di test. WPTest.io è un piccolo sito Web con a pauroso raccolta di contenuti WordPress di esempio. Non sto scherzando: dalle voci di menu che diventano profonde 10 livelli e incorporate in Amazon Store, questo è il più esaustivo dei dati di test che abbia mai visto. Non ho mai testato un tema con questo contenuto di esempio, ma se riesci a far funzionare il tema con questi dati, probabilmente non devi preoccuparti che il tuo tema diventi noioso in qualsiasi scenario.

L'unico lato negativo di questi due test è che non sarai in grado di testare i tuoi contenuti con codici brevi o il tipo di contenuti specifici che avevi in mente durante lo sviluppo del tema. Ti suggerisco di testare il tema con almeno i dati di esempio di WordPress, quindi creare il tuo contenuto. Dopo tutto, avrai bisogno di contenuti solidi quando creerai il sito demo per il tuo tema.

Avvolgendo

In questo articolo; abbiamo passato i processi di codifica e commento appropriati con alcuni standard, poi abbiamo visto come convalidare il nostro codice e testare il nostro tema. Nella parte successiva della serie, ne vedremo alcuni cattive pratiche.

Resta sintonizzato e non dimenticare di condividere l'articolo, se ti è piaciuto!

Codice