Sviluppo Temi DRY WordPress

Quando crei un tema WordPress, vale la pena impiegare del tempo per identificare dove è possibile evitare la ripetizione del codice. Questo ti dà parecchi vantaggi:

  • Dovrai solo scrivere il codice una volta, rendendoti più efficiente.
  • Se verrai a modificare il codice in futuro, dovrai farlo una sola volta.
  • Chiunque altro lavori con il tuo tema non verrà confuso da più iterazioni dello stesso pezzo di codice.
  • Il tuo tema avrà meno codice, che può dare benefici in termini di prestazioni.

Nella mia esperienza, il più importante di questi punti è il secondo: quando ho dovuto modificare temi per qualsiasi motivo, l'attività è resa molto più facile se ogni pezzo di codice è presente solo una volta.

In questo tutorial, ti mostrerò alcuni dei modi in cui puoi adottare il principio Non ripetere te stesso, o ASCIUTO, nel tuo sviluppo del tema, rendendoti più efficiente e meno stressato nel processo. 

Cosa non va?

1. Utilizzo di Framework e Temi di avvio

Usare un framework, uno di terze parti o uno che sviluppi te stesso, significa che molto del codice che ti serve sarà già lì per te quando inizi, e che non ti troverai a scrivere di nuovo lo stesso codice e di nuovo (o anche a tutti).

La quantità di codice che ti serve nel tuo framework dipenderà da te: potresti preferire l'uso di un framework barebone a cui poi aggiungi, o uno più completo da cui selezioni la funzionalità per il tuo progetto.

Oltre ai framework, è disponibile un numero crescente di temi introduttivi per accelerare la codifica. Attualmente, il più comunemente usato è il tema _s, che ti dà le ossa nude di cui hai bisogno per creare rapidamente temi WordPress.

In alternativa, potresti preferire creare temi di avvio personalizzati che includano il codice di base che utilizzi più e più volte sui progetti, Potresti crearne uno semplice a cui aggiungi, o un numero di versioni differenti per diversi tipi di progetto.

2. Utilizzo delle parti del modello

Otterrai il massimo del valore in termini di temi DRY se utilizzi le parti del modello. Il più ovvio di questi sono i file di intestazione, piè di pagina e barra laterale, ma puoi anche utilizzare file di loop e altre parti di modelli per rendere il tuo codice più efficiente.

L'intestazione, la barra laterale e il piè di pagina

Spero che tu non abbia bisogno che te lo dica: dovresti SEMPRE usare file modello separati per la tua intestazione (header.php), barra laterale (sidebar.php) e il piè di pagina (footer.php). Quindi li chiami in ciascuno dei tuoi file modello utilizzando questi tag modello:

  • get_header ()
  • get_sidebar ()
  • get_footer ()

Ma non avevi bisogno che te lo dicessi, quindi passiamo a un uso più avanzato delle parti del modello.

Intestazioni multiple, barre laterali o piè di pagina

Occasionalmente potresti voler utilizzare un'intestazione, una barra laterale o un piè di pagina diversi per aree diverse del tuo sito. Puoi farlo facilmente, creando più file.

Ad esempio, supponiamo di voler utilizzare una barra laterale diversa nelle pagine di archivio. Dovresti creare un file per questa barra laterale chiamata sidebar-archive.php. Nel tuo archive.php file modello, si dovrebbe quindi sostituire lo standard get_sidebar () tag con get_sidebar ('archive').

Questo ti dà la flessibilità di avere una barra laterale aggiuntiva, che puoi utilizzare in più file modello. Ad esempio, potresti volerlo utilizzare nei modelli di archivio per tipi di post specifici. Quindi se hai avuto un post chiamato pulsante, dovresti creare un modello di archivio per questo chiamato archive-button.php, e in quello useresti il get_sidebar ('archive') etichetta.

Ci sono alcuni svantaggi di questo approccio: se il tuo sidebar.php e sidebar-archive.php i file hanno un sacco di codice ripetitivo, il tuo tema non segue il principio di DRY abbastanza da vicino. Se questo è il caso, potresti scegliere di utilizzare invece i tag condizionali, che tratterò più avanti in questo tutorial.

Altre parti del modello

Oltre alle parti del modello per l'intestazione, il piè di pagina e la barra laterale, puoi anche creare altre parti del modello. Quindi chiami queste parti del modello usando il get_template_part () etichetta.

L'uso più comune di questo è per il ciclo. Il ciclo è un blocco di codice spesso ripetuto in più modelli, quindi ha senso estrarlo da ciascuno di questi modelli e inserirlo in un file a sé stante.

Per fare ciò, si crea un file chiamato loop.php con il codice per il tuo loop e poi lo chiami usando get_template_part ('loop'). Ciò estrae in modo efficace tutto il codice dal file del ciclo nel modello.

Puoi farlo ulteriormente con loop multipli. Ad esempio, se avessi un loop leggermente diverso per gli archivi, creerai un file chiamato loop-archive.php e chiamalo usando get_template_part ('loop', 'archive'). Semplice!

3. Utilizzo di tag condizionali

A volte è più efficiente utilizzare tag condizionali al posto di file modello separati. WordPress viene fornito con una serie di tag condizionali che è possibile utilizzare per verificare quale tipo di contenuto viene visualizzato in un determinato momento o quale modello di pagina viene utilizzato. Quindi puoi usarli per verificare se un modello specifico viene utilizzato e quindi aggiungere del codice se lo è. Ciò ti consente di creare un file modello aggiuntivo se i tuoi file modello hanno un sacco di codice duplicato.

Illustrerò questo con un esempio. Supponiamo tu abbia una barra laterale con un'area di widget registrata. Sulle singole pagine per un determinato tipo di post, si desidera aggiungere una seconda area del widget. Potresti voler farlo se vuoi elencare altri post di quel tipo di post in un widget, per esempio.

È possibile creare un file della barra laterale separato chiamato sidebar-xxx.php, dove xxx è il tuo tipo di post, quindi chiamalo nel file modello per il tuo tipo di post. Oppure puoi semplicemente utilizzare un file della barra laterale con un tag condizionale per aggiungere l'area del widget aggiuntivo come segue:

Nel tuo sidebar.php file, sarà già registrata un'area widget, che potrebbe essere simile a questa:

    

Questo mostrerà l'area del widget della barra laterale se è stata popolata con i widget.

È quindi possibile aggiungere una seconda barra laterale utilizzando il is_singular () tag condizionale:

if (is_singular ('xxx') && is_active_sidebar ('xxx-sidebar-widget-area')) ?>  

Questo controlla se l'area del widget è popolata nello stesso modo del primo esempio, ma aggiunge un controllo extra a questo Se dichiarazione: is_singular ('xxx'). Questo controlla se il sito sta attualmente visualizzando una singola pagina per il xxx tipo di post. Se questo è il caso e l'area del widget viene popolata, verrà visualizzata.

4. Trasformare il codice ripetitivo in una funzione

Se il tuo codice verrà ripetuto più e più volte nel sito e non si presta a essere inserito in un file di inclusione a parte, allora un'altra soluzione è metterlo in una funzione e quindi chiamare quella funzione ovunque nel tuo modello tu vuoi che il codice appaia.

Ad esempio, potresti avere del codice per visualizzare una chiamata al riquadro delle azioni:

// Il contenuto del CTA va qui

Ripetere lo stesso codice in più punti del tema sarebbe una cattiva pratica, poiché aggiungerebbe codice aggiuntivo e renderebbe molto difficile la modifica accurata del codice se fosse necessario in futuro. Invece puoi avvolgerlo in una funzione, quindi posizionare quella funzione in posti rilevanti nel tuo tema.

La tua funzione sarebbe simile a questa:

function wptp_cta () ?> 
// Il contenuto del CTA va qui

Quindi, se avevi bisogno che la tua chiamata alla casella di azione venisse visualizzata in punti del tuo tema come barre laterali o piè di pagina, dovresti semplicemente scrivere la funzione nel file di modello pertinente:

wptp_cta ();

Il grande vantaggio di questo è che se vuoi cambiare la chiamata all'azione in futuro, devi solo cambiare la funzione una volta e il cambiamento si rifletterà ovunque tu abbia chiamato nel tuo tema.

5. Agganciare i ganci Code to Action

Il passo successivo nello sviluppo del tema DRY consiste nell'utilizzare i ganci di azione nel tema.

Si crea un hook di azione usando il do_action () funzione, quindi si collegano le funzioni a tale hook usando add_action ().

Questo ti dà molta più flessibilità nel modo in cui usi il tuo codice ricorrente e ti consente di specificare non solo dove apparirà il tuo tema, ma in quali circostanze, utilizzando una combinazione di funzioni e tag condizionali.

Significa anche che se crei temi secondari utilizzando il tema originale come tema principale, puoi associare funzioni nel tema secondario alla funzione dal tema principale.

Tornerò all'esempio della mia barra laterale. Invece di codificare l'area del widget nella mia sidebar.php file, aggiungo solo un'azione, dandogli un nome univoco:

do_action ('wptp_sidebar');

Questo crea un hook di azione nel mio tema, al quale posso allegare funzioni personalizzate.

Nel mio functions.php file, quindi agganci il codice per la barra laterale standard a questa azione come segue:

function wptp_sidebar_default () if (is_active_sidebar ('sidebar-widget-area')) ?>  

Ho usato add_action () con due parametri: wptp_sidebar, il nome del gancio, e wptp_sidebar_default, il nome della funzione.

Questa è la barra laterale standard aggiunta al mio tema. Per aggiungere la barra laterale per il mio tipo di post, aggiungo una seconda funzione al mio functions.php file e collegalo allo stesso hook di azione:

function wptp_xxx_sidebar () if (is_singular ('xxx') && is_active_sidebar ('xxx-sidebar-widget-area')) ?>  

Questo avvolge la mia seconda barra laterale in una funzione e quindi attiva quella funzione su wptp_sidebar gancio di azione pure. Un paio di cose da notare:

  • Il tag condizionale passa all'interno della funzione e non con il add_action funzione.
  • Ho aggiunto una priorità di 15 alla mia seconda funzione. Poiché la priorità predefinita (che sarà stata assegnata alla mia prima funzione) è 10, ciò significa che WordPress genererà questa seconda funzione dopo quella prima, quindi xxx la barra laterale apparirà sotto quella predefinita.

Sommario

Le idee di cui sopra non sono un elenco esauriente di metodi per l'adozione del principio DRY nello sviluppo di temi WordPress, ma forniscono un'introduzione ad alcuni dei metodi più efficaci che è possibile utilizzare.

Se vuoi garantire che i tuoi temi siano il più efficienti possibile, ti suggerisco di dedicare del tempo a pianificare la struttura del tuo tema prima di iniziare a scrivere il codice. Identificare dove il codice verrà duplicato e quale approccio sarebbe il migliore per impedire la ripetizione di codice e sforzo. Lavora attraverso le idee sopra, usando quella che ti farà risparmiare più tempo e codice. Questo ti aiuterà a sviluppare ulteriormente il tema in futuro.