Creazione di un tema WordPress da HTML statico - Creazione di un modello di pagina

Finora in questa serie, ti ho mostrato come creare un tema WordPress pienamente funzionante da HTML statico.

Abbiamo coperto i seguenti passaggi:

• preparare il tuo markup per WordPress
• convertire il tuo HTML in PHP e dividere il tuo file in file modello
• modifica del foglio di stile e caricamento del tema su WordPress
• aggiungendo un ciclo al tuo file di indice
• aggiungendo meta tag, il wp_head gancio e il titolo del sito e la descrizione per il file di intestazione
• aggiungendo un menu di navigazione
• aggiungere aree widget all'intestazione e alla barra laterale
• aggiungendo aree widget, un colophon e il wp_footer aggancia al file footer.

Al momento, il tema ha solo un file di modello per la visualizzazione di contenuti: il index.php file. Una potente funzionalità di WordPress è la possibilità di utilizzare file modello per diversi tipi di contenuto.

In questo tutorial, darò un'introduzione ai file di modello e come puoi usarli, e poi ti mostrerò come creare il file di modello più comune-page.php-che viene utilizzato per la visualizzazione di pagine statiche.

La seguirò mostrandoti come creare un file modello seconda pagina per visualizzare pagine a larghezza intera senza barra laterale.

---

Cosa ti serve

• il tuo editor di codice di scelta
• un browser per testare il tuo lavoro
• un'installazione di WordPress, locale o remota
• Se stai lavorando localmente, avrai bisogno di MAMP, WAMP o LAMP per abilitare l'esecuzione di WordPress.
• Se stai lavorando in remoto, avrai bisogno di un accesso FTP al tuo sito più un account amministratore nella tua installazione di WordPress.

---

Una panoramica dei file di modello

Un tema WordPress può contenere una varietà di file modello per la visualizzazione di contenuti diversi. Questi possono includere:

• un index.php file, che è essenziale per il tema di lavorare e verrà utilizzato da WordPress in assenza di un file modello che corrisponde al tipo di contenuto specifico visualizzato
• un page.php file, per la visualizzazione di pagine statiche (ovvero non post)
• un single.php file per la visualizzazione di singoli post
• un archive.php file per la visualizzazione di archivi di post: ne creerai uno in seguito in questa serie.
• file modello per i post di un tipo di post specifico
• file modello per i post in categorie specifiche, tag o termini di tassonomia
• archiviare file per archivi di specifici tipi di contenuto (categorie, tag, termini di tassonomia, elenchi di tipi di post, elenchi di date e così via)

Per un elenco completo dei modelli, è possibile utilizzare nei temi e in che modo WordPress sceglie quale utilizzare, vedere la pagina Codex sulla gerarchia dei modelli o la risorsa interattiva sulla gerarchia dei modelli su wphierarchy.com.

---

1. Creazione del modello di pagina

Il primo passaggio consiste nel creare il file modello per le pagine statiche.

Nella cartella del tema, creare un file vuoto denominato page.php.

Aggiungi il seguente:

Questo crea la base del tuo file, con una chiamata all'intestazione, al piè di pagina e alla barra laterale include i file più o meno allo stesso modo index.php file. Notare che ho anche aperto e chiuso il #soddisfare div nello stesso modo in cui index.php file.

Nota: puoi anche creare un file modello per le pagine senza barra laterale, che non includerà la barra laterale. Ti mostrerò come farlo più avanti in questo tutorial.

---

2. Aggiunta di un loop

Il modello di pagina non funzionerà senza un ciclo per richiamare il contenuto della pagina dal database.

Dentro il #soddisfare div, aggiungi il seguente codice:

 
>    
  
 
  

Questo è il tuo file modello di pagina completo!

Ora dai un'occhiata a una pagina statica sul tuo sito per vedere come appare:

Come puoi vedere dallo screenshot, la mia pagina statica ora sembra un po 'diversa.

Non include alcun metadata e sulla home page, non c'è titolo della pagina. Il titolo della pagina è escluso dalla homepage usando il tag condizionale if (! is_front_page ()), che controlla se la prima pagina non è visualizzato (includendo il punto esclamativo), quindi visualizza il titolo della pagina se questo è il caso.

---

3. Creazione di un modello di seconda pagina

Occasionalmente, potresti desiderare che una pagina si estenda per tutta la larghezza dello schermo senza una barra laterale, oppure potresti voler visualizzare il contenuto della pagina in modo diverso su pagine diverse.

Per fare ciò, è possibile creare modelli di pagina personalizzati aggiuntivi. Puoi nominarli come vuoi, purché includa il suffisso pagina- nel loro nome All'interno del file stesso includi testo commentato per dire a WordPress del modello di pagina personalizzato.

Inizia facendo una copia del tuo page.php file e nominandolo Pagina-full-width.php.

Ora apri il file e aggiungi il seguente testo commentato nella parte superiore del file, sotto l'apertura

/ ** * Nome modello: pagina a larghezza intera, nessuna barra laterale * /

Questo dice a WordPress il nome del modello di pagina in modo da poterlo selezionare nella schermata di modifica della pagina.

Al momento il tuo nuovo modello di pagina è identico a quello predefinito, dovrai cambiarlo. Trova la riga che legge:

Modificalo in modo che legga: