Come evitare errori comuni nello sviluppo di temi WordPress

WordPress è noto per essere incredibilmente flessibile, soprattutto quando si tratta di sviluppo di temi e plugin. Se vuoi vedere una prova, chiedi a un gruppo di sviluppatori come implementerebbero una funzionalità specifica. È probabile che riceverai diversi metodi per ottenere lo stesso risultato. I forum di supporto sono pieni di questo tipo di esempi.

Ma con quella flessibilità è anche la realtà che è facile fare le cose nel modo “sbagliato”. Ora, in questo caso, "sbagliato" significa che qualcosa è inefficiente o un po' doloroso da mantenere lungo la strada. Sebbene possa funzionare nel senso di essere funzionale, di solito ci sono modi migliori per fare le cose.

Diamo un'occhiata a cinque degli errori più comuni riscontrati nello sviluppo dei temi, insieme ad alternative che ti risparmieranno futuri mal di testa.

1. Utilizzo di URL assoluti nei modelli

Se hai mai guardato il codice HTML prodotto da una pagina o un post di WordPress, noterai che sia le immagini che i collegamenti interni utilizzano URL assoluti (completi). Ma questo non è il modo migliore per fare le cose quando si aggiunge codice ai modelli di temi.

Ad esempio, supponiamo che tu stia sviluppando un sito Web che utilizza un URL temporaneo. Un URL assoluto codificato in un modello significa che dovrai apportare manualmente modifiche al codice quando sei pronto per avviare il sito nel suo dominio permanente. Anche se questo può essere fatto, è troppo facile dimenticare tutti i punti in cui questo tipo di codice potrebbe essere in agguato.

WordPress ha modi integrati per determinare l'URL corretto, estratto direttamente dall'area Settings > General della Dashboard.

Per un collegamento, l'eco esc_url( home_url() ) fornirà un percorso completo alla home page. Quindi, invece di inserire esplicitamente l'URL nel tuo codice, potresti aggiungere un semplice link alla tua home page in questo modo:

 <a href="<?php echo esc_url( home_url() ); ?>" />Home</a>

Inoltre, puoi anche usarlo per puntare a pagine secondarie. Ad esempio, se volessimo collegarci alla pagina Chi siamo del nostro sito, potremmo utilizzare il seguente codice:

 <a href="<?php echo esc_url( home_url() ); ?>/about-us/" />About Us</a>

Uno snippet simile funziona anche per le immagini. Questo esempio estrae un'immagine dalla sottocartella /images/ del nostro tema attivo:

 <img src="<?php echo esc_url( get_stylesheet_directory_uri() ) ; ?>/images/hello.png" />

2. Aggiunta di script e stili direttamente a un modello

L'utilizzo di script e stili di terze parti con WordPress è un mondo a parte. Quando inizi a creare temi per la prima volta, potresti essere tentato di inserire semplicemente <script> o <style> o persino un codice di incorporamento di Google Font direttamente nell'intestazione del tuo tema. Questo è generalmente il modo in cui le cose vengono fatte con i siti HTML statici, quindi ha senso fare lo stesso qui.

Ma, come quasi tutto il resto in WordPress, c'è un modo migliore per farlo. Invece, sfrutta wp_enqueue_script() e wp_enqueue_style() , che aggiungono script e fogli di stile nei punti corretti per te. Rende anche la gestione delle risorse molto più semplice, poiché tutto viene chiamato dal file functions.php del tuo tema.

Invece di reinventare la ruota qui, il Manuale dei temi di WordPress ha una fantastica guida su come aggiungere correttamente script e stili al tuo tema.

3. Chiamare istanze esterne di jQuery

In una nota correlata, uno dei segreti nascosti di WordPress è che include già una copia di jQuery, insieme a diverse funzionalità dell'interfaccia utente popolari. Quindi, non è necessario installare jQuery o chiamarlo in remoto. Ciò semplifica l'utilizzo della popolare libreria JavaScript e l'implementazione di elementi come schede, datepicker, finestre di dialogo e molto altro ancora.

L'unico problema è che devi abilitare specificamente gli elementi che desideri utilizzare tramite il file functions.php del tuo tema. Sebbene ciò crei un po 'una curva di apprendimento, riduce anche il gonfiore.

E, a dire il vero, non è eccessivamente difficile implementare un elemento dell'interfaccia utente jQuery desiderato. Ad esempio, per abilitare l'uso di jQuery UI Tabs, aggiungi semplicemente il seguente snippet al tuo functions.php :

 function my_jquery_elements() { wp_enqueue_script( 'jquery-ui-tabs', array('jquery')); add_action( 'template_redirect', my_jquery_elements ', 10 );

Questo dice a WordPress di caricare l'elemento dalla sua libreria già esistente. Da lì, progetta le tue schede e definiscile come specificato nella documentazione dell'interfaccia utente di jQuery.

4. Portare la personalizzazione troppo lontano

La possibilità di aggiungere campi personalizzati e tipi di post personalizzati può semplificare la vita sia agli sviluppatori che agli editor di contenuti del sito. Offrono praticità, una migliore organizzazione dei contenuti e una UX più intuitiva. Ma a volte ci si spinge troppo oltre.

Ad esempio, sono un grande fan dei campi personalizzati. Ma anche io ammetto che ci sono state volte in cui ho personalizzato un tema fino al punto di inflessibilità. I campi sono ottimi per le configurazioni in cui sappiamo esattamente quale contenuto dovrà essere inserito, come i campi del profilo di un membro dello staff.

Tuttavia, può diventare disordinato quando ci sono incoerenze nei tipi di contenuto che qualcuno vuole aggiungere. I client sono noti per avere eccezioni "minori" nei contenuti che possono rendere più difficile l'utilizzo delle personalizzazioni. La logica condizionale può spiegare alcuni di questi problemi, ma puoi portarla così lontano prima che l'interfaccia utente sfugga di mano.

Non ci sono regole rigide e veloci per questo tipo di personalizzazione. L'unica cosa che possiamo davvero fare è usare il nostro miglior giudizio su cosa dovrebbe essere personalizzato e cosa può essere lasciato meglio all'editor di contenuti di WordPress o anche a un plug-in di nicchia. Quando aggiungiamo campi o tipi di post, sappi solo che le cose potrebbero cambiare lungo la strada e proviamo a costruire pensando a questo.

5. Mancato commento del codice

Farò un'altra ammissione qui: commentare il codice non è uno dei miei punti di forza. Non è che non uso affatto i commenti, ma è più che non sono molto articolati. Di solito, indicherò l'inizio e la fine di elementi particolari senza una tonnellata di intuizioni intermedie. Dovrei fare di più? Probabilmente è così.

Il commento è importante perché fornisce almeno alcuni punti di riferimento all'interno del codice. Quando scavi attraverso file PHP o JS che contengono più di una cosa, ti consigliamo di sapere dove trovare un particolare elemento.

Anche se sei l'unico che modificherà quel codice, i commenti sono altamente raccomandati. Se, ad esempio, hai bisogno di cambiare qualcosa tra sei mesi, è improbabile che ricorderai il punto esatto in cui hai inserito un frammento di codice.

Quindi, non sarò un grande ipocrita e ti imploro di commentare tutto con grande profondità. Ma dirò che anche uno sforzo minimo qui rende più facile la manutenzione futura per te o per un altro sviluppatore che deve spulciare il tuo lavoro.

Tecniche migliori nel tempo

Costruire il tuo tema WordPress può essere una grande esperienza. Ma ci vuole un po' di pratica per cogliere i dettagli più fini della creazione di un tema ben codificato e di facile manutenzione. Più esperienza acquisisci, più le tue tecniche si evolveranno.

Posso onestamente dire che i primi temi che ho messo insieme non erano neanche lontanamente efficienti come lo sono ora. E sono anche certo che potrebbero non essere ancora all'altezza se visti da uno sviluppatore veramente esperto. In questo senso, la nostra evoluzione è costante.

Infine, vorrei notare che ho commesso personalmente tutti gli errori sopra menzionati. È solo attraverso tentativi ed errori, insieme a diverse visite al Codex, che ho scoperto come iniziare a fare le cose in "WordPress Way".

La lezione è che tutti faremo degli errori. Ma ognuno ci offre la possibilità di imparare e migliorare.