Come creare un modello di pagina WordPress personalizzato

Un sito Web WordPress veramente professionale conterrà quasi sicuramente modelli di pagina personalizzati. In effetti, molti dei siti Web più comuni si baseranno su modelli. Un sito web immobiliare avrà bisogno di un modello per le sue case, un sito di e-commerce per i suoi prodotti, un sito di appartenenza per i suoi membri e così via.

Un modello definisce l'aspetto di pagine e post sul front-end. Il progetto dice come e dove visualizzerai tutto il contenuto su ogni post. Ad esempio, qualsiasi modifica apportata al modello per le ricette su un sito Web di cucina influirà sul modo in cui tutte le ricette verranno visualizzate sul front-end.

Esistono due tipi di modelli di pagina WordPress personalizzati che esaminerò:

1. Un modello per le pagine normali
2. Un modello per singole pagine di post

Perché avrai bisogno di un template WordPress personalizzato per le pagine normali

Un modello è facile per garantire che pagine simili seguano la stessa struttura. Invece di creare il layout per ogni pagina individualmente, puoi semplicemente creare il modello una volta e assegnarlo a qualsiasi pagina desideri. Quelle pagine seguiranno quindi il modello.

Immaginiamo un esempio. Su un sito web di cucina potresti avere molte pagine con consigli di cucina come “Come fare la pasta perfetta”, “Come cucinare le uova” e così via.

Ho un ebook sulla cucina che voglio visualizzare su tutte queste pagine. Invece di modificare ogni pagina con lo stesso contenuto (cosa che richiederebbe molto tempo), posso semplicemente creare un modello una volta e assegnare il modello alle pagine. In questo modo ogni pagina conterrà un invito all'azione per scaricare il mio ebook.

In entrambe le pagine sopra puoi vedere il mio invito all'azione sul lato destro. Questo perché ho assegnato lo stesso modello a entrambe le pagine.

I due modi in cui puoi creare un modello di pagina WordPress personalizzato

Esistono due modi per creare il tuo modello di pagina WordPress personalizzato:

• Il modo difficile . I temi forniscono automaticamente i file PHP che definiscono i modelli in WordPress. Quando crei un tipo di post personalizzato (come le ricette), dovrai modificare questi campi PHP o crearne di nuovi per assicurarti che il tuo sito web visualizzi i tuoi post.
• Il modo più semplice. Puoi utilizzare un plug-in di WordPress come Toolset per creare i tuoi modelli. Toolset crea modelli in pochi minuti e senza alcuna codifica. Inoltre, con i blocchi del set di strumenti puoi aggiungere blocchi all'editor Gutenberg di WordPress con contenuti dinamici.

Di seguito ti mostrerò il modo più semplice.

Per prima cosa creerò un modello per le pagine normali che conterrà un invito all'azione sul lato destro.

In secondo luogo, creerò un modello per il tipo di post personalizzato delle mie ricette.

Come creare un modello di pagina WordPress personalizzato per le pagine normali

Passaggio 1: creazione della struttura del modello di contenuto

Devi prima creare il modello di contenuto per le tue pagine. Con Toolset installato puoi aprire un nuovo modello di contenuto e aggiungere i tuoi blocchi.

Per prima cosa, organizzo la struttura del modello. Di seguito puoi vedere che ho aggiunto il blocco griglia di Toolset, permettendomi di dividere il mio modello in sezioni. Ho diviso il modello in due e ampliato la sezione a sinistra per occupare il 75% della pagina.

Passaggio 2: aggiungi contenuto al tuo modello

Ora che ho la struttura devo inserire i blocchi con il contenuto che voglio visualizzare. A sinistra, aggiungo il contenuto del post. Tutto quello che devo fare è inserire il blocco di campo singolo di Toolset che mi consente di selezionare qualsiasi fonte mi piace per il contenuto.

Di seguito seleziono il contenuto del post sul lato destro come fonte del blocco.

Aggiungerò l'invito all'azione per il lato destro del modello. Tutto quello che devo fare è selezionare i blocchi che voglio a seconda del contenuto. Di seguito ho utilizzato il blocco dell'intestazione e il blocco dei pulsanti del set di strumenti. Per il blocco pulsanti, includo anche un collegamento al libro.

Passaggio 3: modella i blocchi

Quando combini WordPress con Toolset, puoi dare uno stile ai blocchi che aggiungi al tuo modello. Se hai scelto di creare blocchi "nel modo più duro", dovresti fare affidamento sulle tue capacità di programmazione per uno stile buono.

Quando fai clic su un blocco vedrai sul lato destro molte opzioni per modellare e migliorare il tuo modello.

In "Tipografia" puoi modificare quanto segue:

• Font
• Dimensione del font
• Spaziatura
• Stile
• Colore del testo

Non è tutto. Nelle "Impostazioni stile" puoi anche modificare quanto segue:

• Colore di sfondo
• Margine/imbottitura
• Confine
• Ombra della scatola

Di seguito ho aggiunto un nuovo colore di sfondo per l'invito all'azione. Nota come non è necessario codificare alcuna modifica, ma selezionare semplicemente i colori e qualsiasi altro stile desiderato.

Passaggio 4: regola il modello per le diverse dimensioni dello schermo

Molto probabilmente stai costruendo il tuo modello su un laptop o desktop, ma è importante ricordare che i tuoi utenti potrebbero non visualizzare il sito Web sulla stessa dimensione dello schermo. Una maggioranza crescente sarà sul proprio tablet o dispositivo mobile.

Pertanto, potrebbe essere necessario modificare il modello per ciascuna dimensione dello schermo. Questo è abbastanza facile da fare con Toolset e WordPress.

Nella barra laterale destra accanto a ogni elemento di stile, c'è un'opzione per passare da desktop, tablet e mobile.

Come puoi vedere, quando passo da un'opzione all'altra, il modello si adatta da solo in modo da poter controllare come apparirà il modello su ciascun dispositivo.

Passaggio 5: assegna il modello alle tue pagine

Ora che ho un modello devo solo assegnarlo alle pagine corrette. Una volta fatto questo, ogni pagina visualizzerà lo stesso modello.

Tutto quello che devo fare è modificare ogni pagina e selezionare il modello di contenuto corretto.

Sul front-end, ora vedrò il modello su qualsiasi pagina a cui lo assegno.

Perché avrai bisogno di un modello di pagina WordPress personalizzato per i singoli post

Oltre a creare modelli per post regolari, molto probabilmente avrai bisogno anche di modelli per ciascuno dei post in un tipo di post personalizzato.

Per il mio sito web di cucina ho creato un tipo di post personalizzato per le mie ricette. Di seguito potete vedere una delle mie ricette sul back-end. Nota tutti i campi personalizzati che ho creato per esso, come il tempo di preparazione, il tempo di cottura e l'immagine della ricetta.

Devo ancora assegnare un modello alle mie ricette. Guarda cosa succede quando diamo un'occhiata alla ricetta senza un modello sul front-end.

Come puoi vedere, nessuno dei campi personalizzati viene visualizzato nel front-end. Tutto ciò che puoi vedere è il contenuto principale del post come il titolo del post e il corpo del post. Questo è il motivo per cui un modello è così importante per i tuoi singoli post in quanto ti consente di visualizzare tutti i tuoi contenuti inclusi i campi personalizzati.

Di seguito potete vedere due delle mie ricette sul front-end. Ora puoi vedere i campi personalizzati perché ho assegnato loro un modello.

Di seguito ti mostrerò come ho creato questo modello per le mie ricette.

Passaggio 1: creazione del modello

La prima cosa che devo fare è creare il modello in cui aggiungerò il mio contenuto. Posso farlo dalla dashboard del set di strumenti sul back-end di WordPress.

Assegno automaticamente il modello a tutte le ricette che ho creato selezionando il modello in questo modo. Pertanto, non è necessario tornare su ogni ricetta e assegnare manualmente il modello.

Passaggio 2: aggiunta del contenuto al modello

Ora sul modello di contenuto, posso iniziare ad aggiungere e strutturare il contenuto come ho fatto per il modello precedente per i miei post regolari.

Ancora una volta, posso aggiungere il blocco Griglia del set di strumenti per creare la struttura del modello.

Ora posso iniziare ad aggiungere i miei blocchi per i miei contenuti. Ad esempio, sulle mie ricette, ho un'immagine nella colonna di sinistra. Dal set di blocchi di Gutenberg posso aggiungere il blocco immagine di Toolset. Ho bisogno della versione del blocco di Toolset perché mi consente di aggiungere contenuto dinamico.

Contenuto dinamico significa che puoi creare un elemento come un'immagine e per ogni post, disegnerà il contenuto corretto per quel particolare post. Ad esempio, contenuto dinamico significa che la mia ricetta per le torte alla banana visualizzerà, hai indovinato, una torta alla banana. Altrimenti, il contenuto sarebbe statico e invece di una torta di banana, vedresti qualsiasi immagine che inserisco quando l'ho creata nel modello.

Usando Toolset e WordPress, posso selezionare la sorgente dinamica per ogni blocco per dirgli cosa visualizzare.

Ad esempio, ho creato un nuovo blocco per aggiungere uno dei miei campi personalizzati, Tempo di preparazione. Una volta aggiunto il blocco, posso selezionare il campo Tempo di preparazione come origine per il blocco sul lato destro. Questo blocco è anche dinamico poiché il tempo di preparazione varia a seconda dei requisiti della ricetta.

Puoi aggiungere molti tipi diversi di blocchi, incluso un blocco di campo ripetuto per aggiungere più elementi (come più righe per una ricetta), un blocco di scorrimento dell'immagine e un blocco di YouTube.

Passaggio 3: modella i tuoi blocchi

Come con il primo modello per i post regolari, posso dare uno stile a ogni blocco.

Passaggio 4: regola il modello per le diverse dimensioni dello schermo

Ancora una volta, in modo simile al modello precedente, posso regolare la struttura per dimensioni dello schermo diverse.

Passaggio 5: controlla come appare il modello con ciascuno dei tuoi post

Infine, puoi anche scegliere quale ricetta visualizzare sul tuo modello per vedere se si adatta a tutte. Utilizza il menu a discesa nella parte superiore della pagina per passare da un post all'altro.

Una volta che sei pronto, puoi controllare il tuo modello sul front-end.

E proprio così, ho un modello per le mie ricette. Quando creo una ricetta nuova di zecca, seguirà immediatamente la struttura del modello.

Inizia oggi stesso a creare il tuo modello di pagina WordPress personalizzato

Ora tocca a te vedere quanto è facile creare il tuo modello di pagina WordPress. Tutto quello che devi fare è scaricare Toolset e controllare la sua documentazione per vedere quanto velocemente puoi creare un modello per i tuoi post senza codifica.