Anatomia di un tema WordPress

Questo è un capitolo di "Up and Running: A Practical Guide to WordPress Development", una guida multimediale allo sviluppo di WordPress che verrà lanciata il 16 giugno. Il pacchetto completo include un e-book completo, oltre 50 video tutorial sullo sviluppo di temi e plugin, e interviste dettagliate al codice con 13 dei migliori sviluppatori WordPress del mondo. Preordina ora su upandrunningwp.com per uno sconto del 20%!

Punti chiave:

• Un tema WordPress è composto da un insieme di parti coerenti. Le parti cruciali di un tema non figlio includono style.css , functions.php e diversi tipi di file modello PHP (come header.php , footer.php e index.php ).
• In quanto fonte principale dello stile CSS del tema, style.css determina l'aspetto visivo del tema. Una sezione commenti nella parte superiore di style.css è anche il punto in cui vengono registrati il ​​nome del tema, l'autore, ecc.
• functions.php è dove aggiungi funzionalità di presentazione al tuo tema. Attraverso functions.php , aggiungerai fogli di stile CSS, file JavaScript, menu di navigazione, aree widget e altre funzionalità.
• I file modello possono essere suddivisi in modo informale in: file modello "sempre usati" ( header.php e footer.php e sidebar.php se applicabile); file nella gerarchia dei modelli di WordPress (come index.php , single.php e page.php ); e "parti del modello" (snippet incompleti estratti da altri file del modello per ridurre la ripetizione).
• I temi possono essere arbitrariamente grandi e complessi; ma questi sono i pezzi più importanti e prevedibilmente lì.

Questo breve capitolo ruota attorno a un grande diagramma. Perché aspettare? Ecco qui:

Niente panico! Lo capirai abbastanza presto. Nel resto di questo capitolo, spiegheremo ogni parte del diagramma in modo più approfondito.

Cosa c'è in un nome?

WordPress decide come trattare i file dei temi in base al loro nome.

La prima cosa da notare è che ogni file nel diagramma ha un nome speciale. functions.php , style.css , index.php —nessuno di questi file è nominato per errore e nessuno dei loro nomi è arbitrario.

WordPress decide come trattare i file dei temi in base al loro nome. Ha un trattamento speciale scritto per functions.php , ma nessuno per functionz.php . Quindi, se carichi una serie di istruzioni come functions.php , WordPress le interpreterà; ma se carichi le stesse istruzioni di functionz.php , WordPress, per impostazione predefinita, ignorerà completamente quel file e le sue istruzioni.

style.css

style.css è la fonte principale dell'aspetto visivo del tema.

style.css è la principale fonte di stile CSS del tema. In quanto tale, è la principale fonte dell'aspetto visivo del tema, dalla scelta dei caratteri e dei colori al fatto che il tema funzioni su una griglia reattiva.

Quindi, ad esempio, se inserisci il seguente CSS nel style.css del tuo tema:

p {
color: blue;
}

...allora tutto ciò che è in un paragrafo, ovunque sul tuo sito mentre sta eseguendo il tuo tema, diventerà blu. Davvero fantastico, vero?

style.css è dove farai la maggior parte del tuo lavoro per far apparire i tuoi temi nel modo desiderato.

Questo tipo di controllo visivo significa che c'è molto lavoro da fare in style.css : è lì che farai la maggior parte del tuo lavoro per dare ai tuoi temi l'aspetto che desideri.

style.css è anche il modo in cui registri il tuo tema

style.css ospita anche una sezione commenti nella sua intestazione, che è dove vengono registrati i dati del tema, il nome del tema, l'autore, il tema principale, se presente e così via. Sembra il seguente:

/*
Theme Name: Pretend Theme
Author: WPShout
Author URI: http://wpshout.com/
Version: 0.1
Description: A very pretend theme for WordPress learners
[Other comment-block information goes here, too]
*/

WordPress legge questi commenti per ottenere le sue informazioni sul tuo tema. Quindi il piccolo blocco di commenti sopra, e niente di più elaborato o più tecnico, è ciò che fa apparire il tuo tema nell'elenco dei temi del tuo sito in Aspetto > Temi nell'area di amministrazione di WordPress:

Puoi vedere un esempio dei dati di registrazione reale di un tema sulle righe da 1 a 6 di style.css in quel grande grafico, Anatomy of a WordPress Theme.

funzioni.php

functions.php è dove aggiungi funzionalità personalizzate al tuo tema. Questo potrebbe essere molto, tra cui:

• Aggiunta di fogli di stile CSS (incluso lo stesso style.css ) e file JavaScript
• Registrazione delle aree del menu di navigazione e delle aree dei widget
• Definire quali dimensioni di immagine personalizzate desideri siano disponibili sul tuo sito
• Filtrare il contenuto della tua pagina

functions.php "parla con" il resto di WordPress principalmente attraverso gli hook di WordPress (chiamati anche action e filter hook), che gli consentono di aggiungere funzionalità nei posti giusti. Approfondiamo il funzionamento di functions.php in Concetti fondamentali dei temi WordPress: 3. Aggiunta di funzionalità con functions.php e entriamo molto di più negli hook in WordPress Hooks (azioni e filtri): cosa fanno e come funzionano.

File modello PHP

I file modello di un sito WordPress determinano il markup del sito. Senza di loro, non c'è letteralmente nulla sulla pagina.

La maggior parte dei file di un tema sono i suoi file modello PHP. Se functions.php è il cervello di un tema e style.css è i suoi vestiti e i file modello sono il suo corpo reale.

I file modello sono file ,code>.php che contengono un mix di markup HTML e codice PHP. (Controlla quella grafica e vedrai come appaiono.)

I file modello creano markup in due modi

Insieme, questi file determinano il markup del sito: l'HTML effettivo che il browser visualizza quando visita il tuo sito. Lo fanno in due modi.

1. HTML

Innanzitutto, i file modello stampano l'HTML direttamente sul browser, proprio come farebbe un normale file .html . Tutto ciò che non è all'interno di <!--?php?--> non è PHP: è solo un semplice HTML che va direttamente nella pagina. Quindi, se header.php di un tema include un po' di HTML come il seguente:

<body class="site-body">

Questo è esattamente ciò che un browser vedrà su ogni pagina Web WordPress che include header.php , che dovrebbero essere tutte.

2. PHP

I file modello fanno davvero la loro magia usando PHP, che si compila o si trasforma in HTML. Come semplice esempio, il nostro stesso file header.php potrebbe invece contenere il seguente codice:

<body class="<?php echo 'site-body'; ?>">

Il PHP aggiunto semplicemente fa eco (stampa) la stringa site-body direttamente sulla pagina. Quindi il server ha eseguito un'elaborazione PHP aggiuntiva alla sua estremità, ma il browser vede ancora lo stesso vecchio HTML.

Come puoi immaginare, i file modello di un tema sono assolutamente cruciali: senza di essi, non c'è letteralmente nulla sulla pagina.

File modello "sempre usati".

header.php e footer.php vengono solitamente utilizzati ovunque in un tema, perché la maggior parte dei siti desidera un'intestazione e un piè di pagina coerenti su pagine diverse.

Alcuni file modello vengono utilizzati su ogni pagina Web di un sito. Gli esempi principali sono header.php e footer.php .

Questi file vengono utilizzati così spesso che WordPress dispone di funzioni speciali per includerli in altri file modello: get_header() e get_footer() . Chiamate in questo modo, senza parametri, quelle funzioni acquisiscono semplicemente header.php e footer.php e le rilasciano nel punto in cui è stata chiamata la funzione.

Perché questi file vengono utilizzati ovunque? È perché la maggior parte dei siti desidera un'intestazione e un piè di pagina coerenti su pagine diverse. Se una pagina ha il logo della tua azienda e il menu di navigazione principale, è una buona scommessa che vorrai che altre pagine facciano lo stesso. Lo stesso vale per il tuo piè di pagina in fondo alla pagina.

Come nota, sidebar.php è anche una sorta di questo tipo di file, perché spesso accade che la maggior parte dei tipi di pagine Web su un sito condividano una singola barra laterale, forse con l'eccezione delle pagine a larghezza intera dedicate alla visualizzazione del tipo di pagina messaggi. sidebar.php ha anche la sua funzione, get_sidebar() .

File nella gerarchia dei modelli di WordPress

La vera eccitazione si verifica in file come index.php , single.php e page.php . Questi file determinano quale markup apparirà per i diversi tipi di dati dei post .

Per riformulare ciò, WordPress sa quale pagina utilizzare per quale tipo di dati dei post. Per esempio:

• Se la pagina web richiesta coinvolge un post di tipo Pagina (ad esempio, la tua pagina Informazioni), WordPress utilizzerà probabilmente page.php per creare quella pagina web.
• Se la pagina Web richiesta è un singolo post di tipo Post (ad esempio, stai visualizzando un particolare post del blog), WordPress utilizzerà probabilmente single.php per crearlo.
• Se stai esaminando tutti i post di tipo Post che hai scritto nel 2014, WordPress probabilmente utilizzerà archive.php per creare quella pagina web.

Questa è la magia della gerarchia dei modelli di WordPress , che trattiamo in modo approfondito nei concetti fondamentali dei temi di WordPress: 1. La gerarchia dei modelli.

Questi file modello sono basati sul ciclo

Questi file modello "nella gerarchia del modello" condividono tutti qualcosa di molto importante: sono costruiti attorno a The Loop, uno dei principi fondamentali assoluti dello sviluppo di WordPress.

Approfondiamo The Loop nei concetti fondamentali dei temi WordPress: 2. Elaborazione dei post con The Loop. The Loop è davvero fantastico, quindi se sei nuovo, tieni i calzini in modo che The Loop non li faccia esplodere!

Parti del modello

Diciamo che c'è una sezione sia di index.php che di page.php che è esattamente la stessa. Dovremmo ripetere quel codice in entrambi quei file?

In realtà, DRY—"Non ripeterti!"—è un grido di battaglia per i bravi programmatori. La ripetizione causa tutti i tipi di problemi. E se volessi cambiare qualcosa nella sezione ripetuta? Ora devi cambiarlo in due punti. Cosa succede se ti dimentichi di cambiarlo in un posto o commetti un errore in un file ma non in un altro? Ora il tuo codice non è sincronizzato e il tuo sito ha dei bug. (Ora: cosa succede se ripeti lo stesso codice venti volte? Devi ripetere ogni modifica apportata volte venti e sperare di "averli presi tutti".)

Le parti del modello prendono una parte che potrebbe essere ripetuta di un file modello e le spostano in un nuovo file. In questo modo, sia index.php che page.php possono semplicemente fare riferimento alla stessa parte del modello, piuttosto che scriverla singolarmente due volte; e se vuoi cambiare quella sezione la cambi solo una volta.

Ora conosci l'anatomia del tuo tema

Queste sono le cose da capire davvero su un tema WordPress. Anche un tema ThemeForest troppo grande sarà costruito attorno a questo scheletro principale, quindi comprendi come questi pezzi si incastrano e avrai molto potere per capire i temi di WordPress.

Con la lezione di anatomia conclusa, i prossimi tre capitoli si immergono in quattro dei principi di programmazione cruciali che spiegano come un tema fa il suo lavoro:

1. La gerarchia dei modelli di WordPress
2. Il cappio
3. funzioni.php
4. Hook di WordPress

Avanti!