Come funzionano effettivamente i quadri tematici

I quadri tematici possono essere estremamente potenti. Per gli utenti di WordPress non tecnici, rendono possibile creare un sito unico che sembra stia utilizzando un tema su misura, e per gli sviluppatori di WordPress possono aiutarti ad applicare il principio DRY (Non ripeterti) e darti la possibilità di costruire velocemente siti personalizzati.

Se hai utilizzato un framework di terze parti per un po 'di tempo e sei diventato frustrato dal codice gonfiato o dalla mancanza di flessibilità, o vuoi semplicemente avere il controllo completo sul tuo codice, costruire il tuo framework a tema potrebbe essere l'approccio migliore.

In questa serie, imparerai come creare il tuo tema framework per WordPress che puoi utilizzare per creare siti per te o per i tuoi clienti o persino per altri utenti. Lavorerai attraverso le fasi coinvolte nella creazione del tema principale che costituisce la base del tuo framework, aggiungendo funzioni extra, hook e altro. Imparerai anche come sfruttare questi temi e plugin del tuo bambino e come rilasciare il tuo codice al pubblico.

Ma prima di iniziare, devi sapere come funzionano i quadri tematici e cosa li rende diversi da un tema genitore standard.

Ho trascorso del tempo a sviluppare due framework tematici da utilizzare su due categorie di siti client, sviluppandoli e migliorandoli nel tempo, e ho anche lavorato con alcuni framework di temi di terze parti. Nella mia esperienza un quadro tematico ha alcune caratteristiche principali:

• Consiste in un tema principale progettato per essere utilizzato con temi figlio. In alcuni casi il tema principale può funzionare anche come tema autonomo, mentre in altri il tema principale funziona solo in combinazione con temi secondari - il Codice WordPress definisce questi come 'Base / Starter Themes' e 'Code Libraries', rispettivamente.
• Include hook e funzioni che possono essere sfruttati da temi figlio e plugin. La struttura del tema è la base di un intero ecosistema con cui lavorerai e questo include i plugin che si collegheranno al tuo framework.
• Se progettato per l'accesso da parte di utenti non codificanti, includerà pagine di opzioni tematiche che consentono agli utenti di personalizzare il tema in base alle proprie esigenze. Questi possono essere estesi, incorporando design, layout, funzioni, contenuti e altro ancora. In alcuni casi, la funzionalità può essere fornita tramite il Theme Customizer.
• Può includere più aree di widget in modo che gli utenti non tecnici possano aggiungere contenuto o codice tramite widget (inclusi i widget aggiunti dai plug-in scritti specificamente per il framework).
• Può anche includere funzionalità di libreria di script, come un cursore jQuery o lightbox. A seconda delle tue esigenze e di quelle dei tuoi utenti, potresti incorporarle nel framework o fornire plugin con il codice che si collega al tuo framework.
• È estensibile, con ganci che consentono di estenderne le funzionalità tramite temi figlio o plug-in.

I primi due dei punti sopra sono i più fondamentali: senza un tema genitore, non hai una struttura a tema. E un tema genitore senza quegli hook e funzioni è solo un tema genitore di base, non proprio un framework.

Ecco quali sono le strutture tematiche, ma come funzionano? Diamo un'occhiata agli elementi di una struttura tematica:

• Il tema principale e i temi secondari opzionali
• Ganci di azione e filtro
• funzioni
• Opzioni del tema
• widget
• Script
• estendibilità

I temi padre e figlio

Il componente principale di un framework a tema è il tema principale. Questo può essere progettato in due modi:

• Come tema di partenza, che può funzionare da solo, magari con la personalizzazione tramite una schermata delle opzioni del tema o il customizer del tema. Esempi di questi includono Atahualpa e Thematic. Entrambi possono essere utilizzati come temi autonomi senza l'uso di temi secondari.
• Come base da aggiungere a un tema figlio, senza il quale il tema non alimenterà efficacemente un sito. Gli esempi includono Hybrid Core e Genesis. Questi includeranno il codice di base che normalmente troverai in un tema insieme a una serie di hook e funzioni che possono essere sfruttati dai temi figlio e anche dai plugin. Tutto ciò comprende un'API per il framework.

Poiché una delle caratteristiche principali dei framework a tema è il principio DRY, è probabile che il tema principale utilizzi le parti del modello e includa i file laddove possibile, il che significa che è possibile accedere allo stesso codice in più posizioni nel tema. Ciò semplifica anche l'override del codice nei temi figlio, poiché è sufficiente creare una parte modello sostitutiva o un file di inclusione.

Non ho intenzione di spiegare il concetto di temi padre e figlio qui come è trattato in questo tutorial su temi figlio. Molti framework tematici sono dotati di una gamma di temi figlio per sostenerli, mentre con altri è necessario svilupparne uno proprio. 

Se si sta sviluppando il proprio, raccomanderei di creare almeno un tema figlio "di avviamento" per evitare di ripetere il lavoro necessario nella creazione di uno per ciascun progetto: si può decidere di creare più temi figlio come base per diversi tipi di progetto , ad esempio temi figlio per blog e siti non di blog.

Ganci di azione e filtro

Una struttura a tema includerà una serie di hook per temi e plug-in per bambini da collegare quando si aggiunge codice personalizzato o si modifica il modo in cui si comporta il tema:

• I ganci di azione verranno visualizzati in più punti del codice, consentendo di aggiungere codice ai file del modello tramite funzioni codificate nel framework che possono essere sostituite da temi figlio o tramite funzioni aggiunte ai temi figlio o ai plug-in. La mia struttura tematica fa ampio uso di hook di azione, fornendoli in tutti i file di modello per consentire agli utenti di inserire contenuti come aree di widget, dettagli di contatto, pulsanti di invito all'azione e codice site-specific ovunque sia necessario.
• I filtri hook possono essere usati per cambiare il comportamento di un sito che utilizza un tema secondario o un particolare plug-in, ad esempio la personalizzazione dei loop, la modifica del contenuto statico e altro. Qualsiasi testo statico (o codice chiamato dall'esterno del tuo sito) deve essere racchiuso in un filtro, in modo che possa essere modificato dai temi figli, se necessario.

Vale la pena dedicare del tempo a considerare quali hook si desidera includere in una fase iniziale, in modo da sapere quali contenuti includere tramite un hook e cosa codificare direttamente nei file del modello. Guarderai questo nella prossima parte di questa serie.

funzioni

È probabile che il tuo framework includa anche una serie di funzioni. Alcuni di questi si collegheranno all'azione e ai ganci filtro che hai già definito mentre altri saranno funzioni come i tag modello che i temi figlio possono utilizzare. 

Se hai delle funzioni personalizzate che usi su un certo numero di siti client, vale la pena aggiungerli al tuo framework. Non è necessario attivare tutte le funzioni: è possibile attivare una funzione dal tema principale utilizzando un add_action () funzione nel tuo sito figlio.

Opzioni del tema

Le schermate delle opzioni del tema sono un'aggiunta utile a qualsiasi tema complesso, ma saranno particolarmente utili per i framework di temi progettati per utenti non tecnici. Le principali strutture tematiche includono tutte più schermate delle opzioni del tema nella propria sezione di amministrazione, con opzioni che includono la commutazione e la disattivazione delle funzionalità, la modifica del layout, l'aggiunta di contenuto e la modifica di elementi di progettazione come colori, immagini di sfondo, caratteri e immagini di intestazione.

Puoi scegliere di usare il customizer del tema per molte delle tue opzioni, il che ha il vantaggio di permettere agli utenti di vedere le loro modifiche mentre le fanno. Ho adottato questo approccio per la struttura del tema Edupress, che ho sviluppato per i siti web delle scuole con Mark Wilkinson.

Aree dei widget

Sia che tu scelga di aggiungere una gamma di aree di widget dipenderà dal pubblico per il tuo framework: se solo tu o un piccolo team di sviluppatori lavorerai con il tema, potresti non aggiungere aree di widget oltre alla barra laterale e al piè di pagina standard le zone.

Ma se il tuo framework sarà utilizzato da utenti non tecnici, puoi dare loro molta più flessibilità registrando più aree widget in varie posizioni nel tuo tema. Oltre alla normale barra laterale e al piè di pagina, puoi anche registrare le aree dei widget nell'intestazione, prima e / o dopo il contenuto e sotto il piè di pagina.

Il framework del tema che utilizzo per i miei siti client include quattro aree widget nel footer: il tema controlla quali di questi sono popolati e aggiunge le classi CSS in modo che le aree del widget popolate occupino ciascuna la larghezza appropriata della pagina.

Le aree del tuo widget potrebbero essere codificate direttamente nei tuoi file modello o potresti decidere (come faccio io) di aggiungerle tramite i ganci di azione nelle posizioni pertinenti nel tuo sito. Ciò significa che possono essere sovrascritti in temi figlio, sia da aree di widget alternative che da codice personalizzato.

Script

Se un dato script è probabilmente usato da un numero di siti creati nel tuo framework, o se i tuoi utenti saranno non tecnici e vuoi fornire opzioni extra, potresti decidere di includere determinati script nel tuo framework, come ad esempio un slider o script lightbox. Questo può far risparmiare agli utenti la necessità di installare plugin aggiuntivi, ma ha lo svantaggio del codice gonfiato se questi script non sono necessari.

Di nuovo questo dipenderà dal tuo pubblico e dai suoi bisogni previsti: se lavori solo con il framework, ti ​​consiglio di sviluppare (o identificare) i plugin con questi script e usarli quando è necessario.

Se includi script, vale la pena includere un'opzione di attivazione e disattivazione nella schermata delle opzioni del tema.

estendibilità

Se il tuo framework sarà utile per una vasta gamma di siti ora e in futuro, desideri che sia estensibile. Il tema principale che costituisce il nucleo del framework è solo il cuore di un ecosistema che tu e gli utenti del tuo tema attingerai per aggiungere opzioni extra e potenziare i loro siti. Questo includerà:

• Temi secondari o temi iniziali: l'elenco di questi potrebbe crescere nel tempo, specialmente se pubblichi il tuo tema al pubblico
• Plugin progettati per funzionare specificamente con il tuo framework, spesso attivati ​​tramite hook specifici per framework.

Potrebbe anche includere documentazione per altri sviluppatori che desiderano lavorare con il tuo framework: la maggior parte dei principali framework di temi viene fornita con un'ampia documentazione che gli sviluppatori possono usare per personalizzare i loro siti creati sulla struttura o per creare temi o plug-in per altri utenti del quadro di accesso.

Sommario

Le strutture tematiche sono uno strumento potente nell'arsenale degli sviluppatori di WordPress. Come abbiamo visto, sono fondamentali per migliaia di proprietari di siti non tecnici che li utilizzano per creare siti WordPress personalizzati. Ma sono anche un ottimo strumento per qualsiasi sviluppatore che creerà più siti, sia per uso personale o per i clienti. 

I framework tematici hanno una serie di caratteristiche che danno loro quel potere: sono estensibili e flessibili e rendono facile per te o per i tuoi utenti creare siti personalizzati usando temi secondari e accedendo alle funzioni e ai ganci forniti dal tuo framework.

Dopo aver esaminato il funzionamento delle strutture tematiche, nella prossima parte di questa serie identificherai cosa deve fare il tuo quadro e chi ha bisogno di lavorare, il che ti aiuterà a decidere l'approccio di sviluppo più appropriato.