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 tipi più comuni di siti Web si basano su modelli. Un sito web immobiliare avrà bisogno di un modello per le sue case, un sito web di e-commerce per i suoi prodotti, un sito di appartenenza per i suoi membri e così via.

Un modello definisce l'aspetto delle pagine e dei post sul front-end. È il progetto che dice come e dove visualizzerai tutti i contenuti 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 nel front-end.

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

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

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

Un modello è un modo semplice per garantire che pagine simili seguano la stessa struttura. Invece di dover creare il layout per ogni pagina individualmente, puoi semplicemente creare il modello una volta e assegnarlo alle pagine che preferisci. Quelle pagine seguiranno quindi il modello.

Immaginiamo un esempio. Su un sito web di cucina potresti avere una serie di pagine con suggerimenti di cucina come "Come fare la pasta perfetta", "Come cucinare le uova" e così via.

Ho un ebook sulla cucina che voglio mostrare in tutte queste pagine. Invece di modificare ogni pagina con lo stesso contenuto (che richiederebbe molto tempo) posso 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.

Su 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:

• Nel modo più duro . 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 facile. 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 Toolset Blocks puoi aggiungere blocchi all'editor di WordPress Gutenberg con contenuto dinamico.

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 pagine normali

Passaggio 1: creazione della struttura del modello di contenuto

Per prima cosa devi creare il modello di contenuto per le tue pagine. Con Toolset installato puoi aprire un nuovo modello di contenuto e iniziare ad aggiungere i tuoi blocchi.

Per prima cosa, organizzo la struttura del modello. Di seguito puoi vedere che ho aggiunto il blocco griglia di Toolset che mi consente di suddividere il mio modello in sezioni. Ho diviso il modello in due e ampliato la sezione a sinistra in modo che occupi 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 piaccia per il contenuto.

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

Per il lato destro del modello, aggiungerò l'invito all'azione. 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 di Toolset. Per il blocco dei 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 scegli di creare blocchi "Nel modo più duro", dovresti fare affidamento sulle tue capacità di codifica per un buon stile.

Quando fai clic su un blocco vedrai sul lato destro una serie di 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. Sotto le "Impostazioni stile" puoi anche modificare quanto segue:

• Colore di sfondo
• Margine/imbottitura
• Frontiera
• Scatola ombra

Di seguito ho aggiunto un nuovo colore di sfondo per l'invito all'azione. Nota come non hai bisogno di codificare alcuna modifica, piuttosto, seleziona semplicemente i colori e qualsiasi altro stile che desideri.

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 con le stesse dimensioni dello schermo. In effetti, una maggioranza crescente sarà sul proprio tablet o dispositivo mobile.

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

Nella barra laterale di destra, accanto a ciascun elemento di stile, è presente un'opzione per passare da desktop, tablet e dispositivo 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 di cucina ho creato un tipo di post personalizzato per le mie ricette. Di seguito puoi 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. In effetti, tutto ciò che puoi vedere è il contenuto principale del post, come il titolo 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 puoi vedere due delle mie ricette sul front-end. Ora puoi vedere i campi personalizzati perché ho assegnato loro un modello.

Di seguito vi 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ò i miei contenuti. Posso farlo dalla dashboard di Toolset sul back-end di WordPress.

Selezionando il template in questo modo assegno automaticamente il template a tutte le ricette che ho creato. Pertanto, non è necessario tornare a ciascuna 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 Toolset Grid 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 ciascuno dei post, disegnerà il contenuto corretto per quel particolare post. Ad esempio, il contenuto dinamico significa che la mia ricetta per le torte alla banana mostrerà, hai indovinato, una torta alla banana. Altrimenti, il contenuto sarebbe statico e invece di una torta alla banana, vedresti qualunque immagine inserisco quando l'ho creata nel modello.

Usando Toolset e WordPress, posso selezionare la sorgente dinamica per ciascuno dei miei blocchi per dirgli cosa visualizzare.

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

Esistono diversi tipi di blocchi che puoi aggiungere, incluso un blocco di campi ripetuti per aggiungere più elementi (come più righe per una ricetta), un blocco di scorrimento dell'immagine, un blocco di YouTube e molto altro.

Passaggio 3: modella i tuoi blocchi

Proprio come con il primo modello per i post regolari, posso modellare ciascuno dei miei blocchi.

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 diverse dimensioni dello schermo.

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

Infine, puoi anche scegliere quale ricetta visualizzare sul tuo modello in modo da poter 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. Ora, quando creo una ricetta nuova di zecca, seguirà immediatamente la struttura del modello.

Inizia oggi 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 quindi controllare la sua documentazione per vedere quanto velocemente puoi creare un modello per i tuoi post senza codifica.