Decodifica WordPress: Template Personalizzati e Parti di Template

Con l’introduzione di WordPress 5.9, ora puoi utilizzare la Modifica Completa del Sito per personalizzare l’aspetto del tuo tema. Inoltre, puoi accedere a ulteriori funzionalità di design per costruire il tuo sito web senza programmazione utilizzando un tema basato su blocchi. Tuttavia, queste impostazioni di base potrebbero non soddisfare le tue esigenze.

Fortunatamente, puoi facilmente aggiungere modelli personalizzati e parti di modello al tuo tema a blocchi WordPress. Che sia attraverso la modifica completa del sito o modificando il file del tema, puoi creare un layout personalizzato da riutilizzare quando progetti nuovo contenuto.

In questo articolo, discuteremo cosa sono i template e le parti di template. Poi, ti mostreremo come crearli in WordPress. Iniziamo!

Introduzione ai Template di Pagine WordPress

I temi sono alcune delle funzionalità più versatili di WordPress. Installando un tema sul tuo sito, puoi modificare radicalmente il suo aspetto per adattarlo alle tue esigenze. Inoltre, è solitamente facile trovare temi che si adattino alla tua particolare nicchia e offrano molta flessibilità durante il processo di progettazione.

Tuttavia, ci sono alcune cose che sono difficili da fare se utilizzi solo un tema per personalizzare l’aspetto del tuo sito. Ad esempio, cosa succede se vuoi che i tuoi archivi abbiano un layout molto diverso rispetto al resto delle tue pagine? Allo stesso modo, potresti volere che la barra laterale contenga informazioni diverse a seconda del tipo di pagina.

Inserisci i modelli di pagina — un modo per avere più controllo sull’aspetto del tuo sito. In alcuni modi, i modelli di pagina sono molto simili ai temi. Entrambi sono file con codice che indica al tuo sito come visualizzare le informazioni.

Come suggerisce il nome, tuttavia, un modello di pagina controlla solo lo stile di una particolare pagina (o tipo di pagina). Molti temi includono vari modelli di pagina tra cui scegliere, ma puoi anche crearne di propri. In questo modo, puoi decidere esattamente come dovrebbe essere configurato e quali pagine dovrebbero essere assegnate a seguire quel modello.

Capire e utilizzare i template è un po’ più tecnico rispetto al lavoro con i temi. Se vuoi davvero capire come funzionano i template, potresti voler dedicare del tempo a studiare la Gerarchia dei Template di WordPress. Questo sistema assegna un livello di priorità a ciascun tipo di template in modo che il tuo sito WordPress sappia sempre quale mostrare.

Non entreremo troppo nel dettaglio di questo concetto per ora, poiché ci concentreremo prima sui template di pagina. Iniziamo esplorando perché potresti voler utilizzare i template in primo luogo.

I Vantaggi dell’Uso dei Modelli di Pagina

Ormai dovresti avere un’idea del motivo per cui i template di pagina sono così utili. Offrono molto più controllo sull’aspetto e sulla disposizione del tuo sito rispetto a quanto di solito si può ottenere modificando il tuo tema. Le applicazioni per i template di pagina sono numerose: l’unico limite è la tua creatività.

Per farti capire l’importanza di questa funzionalità, ecco alcuni esempi di situazioni in cui potresti voler utilizzare un modello di pagina:

• Se desideri che una pagina specifica abbia un layout a piena larghezza mentre mantieni un design a larghezza fissa per le altre pagine.
• Per creare una pagina personalizzata che utilizza widget non visualizzati su altre pagine.
• Per mostrare ai lettori post consigliati pertinenti al contenuto specifico che stanno consultando.
• Per costruire una pagina con un insieme unico di funzionalità, come una pagina di contribuenti o di archivi.

Alla fine di questo post, ti mostreremo come fare ognuna di queste cose. Una volta che avrai iniziato a sperimentare con i template di pagina e avrai capito come funzionano, potrai fare ciò che desideri con essi.

Un’introduzione Alla Modifica Completa Del Sito Con Modelli E Parti Di Modelli

Utilizzando la Modifica Completa del Sito, puoi progettare il layout del tuo sito web con i blocchi. Probabilmente utilizzi già i blocchi per creare post su WordPress. Ora, possono costruire l’intero sito, incluse le aree non di contenuto.

Un vantaggio del Full-Site Editing sono i suoi modelli di pagina. Ti permettono di visualizzare e personalizzare facilmente i tuoi modelli senza dover modificare manualmente i file del tema:

In WordPress, ci sono anche parti di template, che funzionano come sezioni strutturali più piccole di un template di pagina. Di solito vedrai parti di template per intestazioni o piè di pagina:

Utilizzando un template, puoi costruire pagine con funzionalità uniche. Per esempio, potresti non volere che la tua pagina principale abbia lo stesso layout del resto dei tuoi contenuti. Pertanto, puoi ottenere un design unico con un template di pagina.

Inoltre, puoi risparmiare tempo durante il processo di progettazione riutilizzando i template e le parti di template. Cliccando semplicemente su un template o su un elemento singolo, puoi implementarlo immediatamente.

Come Creare Template in WordPress con l’Editor di Template

Se stai utilizzando un tema a blocchi, è dotato del Editor di Template. Utilizzando questa funzione, puoi creare e modificare template per qualsiasi pagina o post sul tuo sito web. Funziona in modo simile all’Editor di Blocchi, permettendoti di personalizzare il tuo tema con i blocchi.

Per iniziare, devi installare un tema a blocchi. Nel tuo pannello WordPress, naviga in Aspetto > Temi > Aggiungi nuovo. Poi, filtra i risultati con un tag Full Site Editing:

Scegli Applica Filtri. Nei risultati della ricerca, installa e attiva un tema. Per questo tutorial utilizzeremo il tema predefinito Twenty Twenty-Two:

Per creare un nuovo template, inizia aggiungendo un nuovo post o una nuova pagina. Poi, nella scheda delle impostazioni Post, trova la sezione Template e seleziona il pulsante Nuovo:

Nella finestra popup, dai un nome al tuo nuovo template. Poi, seleziona Crea:

Questo aprirà automaticamente l’Editor di Template. Puoi progettare il tuo template utilizzando gli stessi blocchi che useresti in un post. Tuttavia, è importante notare che questi blocchi verranno aggiunti a ogni post con questo template:

Puoi anche inserire blocchi relativi al tuo tema. Scorrendo fino alla sezione Tema delle opzioni dei blocchi, puoi visualizzare un logo, uno slogan, commenti ai post e altro ancora:

Quando hai finito di personalizzare il tuo template, clicca su Pubblica. Poi, ogni volta che vuoi assegnare un post o una pagina a quel template, selezionalo semplicemente nella scheda delle impostazioni.

Come Creare Parti di Template in WordPress con l’Editor di Sito

Con un tema a blocchi, puoi modificare i template con l’Editor del Sito. Puoi modificare direttamente il tuo tema anziché creare un nuovo post o una nuova pagina.

Prima, vai alla tua dashboard. Poi, seleziona Appearance > Editor (beta):

Questo aprirà l’Editor del Sito. Per trovare i template e le parti di template del tuo tema, clicca sull’icona di WordPress nell’angolo superiore sinistro:

Dopo aver selezionato Template Parts, vedrai un elenco di opzioni predefinite. Per aggiungere una nuova parte di template, clicca sul pulsante Aggiungi Nuovo:

Poi, crea un nome per la parte del tuo template e scegli dove posizionarla. Le tre aree di posizionamento sono Generale, Intestazione e Piede di pagina:

Quando hai finito, seleziona Crea. Questo ti porterà alla parte del modello isolata, che puoi personalizzare aggiungendo blocchi:

Potresti mostrare un semplice invito all’azione, il logo del sito web, o qualsiasi cosa tu voglia riutilizzare come parte del template. Una volta salvato, puoi aggiungerlo a qualsiasi template semplicemente inserendo il blocco Template Part.

Come Creare Template Personalizzati e Parti di Template in WordPress (Codifica Manuale)

Anche se la modifica completa del sito ti consente di creare modelli e parti di modello per un tema esistente, potresti voler sviluppare il tuo tema. Inoltre, questa opzione può darti più controllo sull’aspetto del tuo sito web.

Se stai costruendo il tuo nuovo tema partendo da uno esistente, ti consigliamo di creare un tema child. Questo passaggio garantisce che i nuovi aggiornamenti del tema parent non sovrascriveranno le tue personalizzazioni.

Passo 1: Aggiungi un File di Configurazione

Con i precedenti temi basati su PHP, potevi modificare l’intestazione del file di template. Tuttavia, per creare contenuti personalizzati in un tema basato su blocchi, dovrai creare un nuovo file theme.json.

Prima dovrai accedere al tuo sito tramite Secure File Transfer Protocol (SFTP) o il dashboard del gestore del sito del tuo provider di hosting. Poi, cerca la cartella themes, che dovrebbe trovarsi sotto wp-content:

Nella cartella del tuo tema child, crea un nuovo file. Etichettalo come “theme.json”:

In questo file, include il numero di versione tra parentesi graffe. Se non lo aggiungi, verrà letto come “versione 0”:

{
    "version": 2
}

Dovrai configurare questo file theme.json per supportare la larghezza del tuo contenuto. Dopo il tuo numero di versione, copia e incolla questo codice aggiuntivo:

{
        "version": 2,
"settings": {
"layout": {
"contentSize": "840px",
"wideSize": "1100px"
 }
 }
}

Questo imposterà la larghezza del tuo contenuto a 840px. Anche la larghezza estesa sarà aggiornata a 1100px. Questi valori corrispondono alle larghezze predefinite nell’Editor del Sito, ma puoi modificarli come necessario.

Ora che la larghezza del contenuto è di 840px, fornirà molto spazio per ogni riga di caratteri. A seconda del font e della dimensione scelti, potresti doverlo regolare in modo che gli spettatori possano leggere comodamente il tuo contenuto.

Fase 2: Crea Nuove Parti del Template

Quindi, torna alla tua cartella themes e apri la cartella templates:

Qui, crea un file index.html:

Torna alla tua cartella dei temi e clicca su template-parts. All’interno di questa cartella, crea i file per footer.html e header.html:

All’interno del file header.html, aggiungi il codice per i blocchi del titolo del tuo sito e del tagline. Puoi farlo includendo questo markup del blocco:

<!-- wp:site-title /-->
<!-- wp:site-tagline /-->

Successivamente, vai al file footer.html e incolla il seguente codice:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Orgogliosamente alimentato da 
<a href="https://wordpress.org/">WordPress</a>.</p>
<!-- /wp:paragraph /—->

Una volta che hai aggiunto queste parti del template, possono essere facilmente identificate quando sei pronto per testare il tuo tema.

Step 3: Combina le Parti del Template

Il passo successivo è inserire il markup del blocco per le parti del tuo template nel file HTML del tuo template. Apri la cartella templates e trova il file index.html che hai creato nell’ultimo passaggio.

Successivamente, dovrai aggiungere il codice per le tue due parti del template:

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:template-part {"slug":"footer"} /—->

In base al nome del file della parte di template, questo nome diventerà lo slug. Ad esempio, la parte di template header.html avrà “header” come suo slug.

Successivamente, aggiungi l’elemento HTML corretto per ogni parte del template. Questi identificheranno la posizione della parte del template:

"tagName":"header"
"tagName":"footer"

Se prevedi di utilizzare CSS per identificare questo header e footer, dovrai aggiungere un nome di classe CSS personalizzato. Puoi inserire questo codice alla fine di ogni riga:

"className":"intestazione-sito"
"className":"piede-pagina"

Infine, l’impostazione del layout che hai inserito nel file theme.json deve essere supportata. Per fare ciò, aggiungi questo codice a ciascuna parte del template:

"layout":{"inherit":true}

Ecco come dovrebbe apparire il codice risultante:

Una volta terminata la programmazione, puoi visualizzare in anteprima il tuo sito per vedere queste modifiche al layout.

Pronto a Creare i Tuoi Modelli Personalizzati?

Se vuoi semplificare il processo di progettazione del tuo sito web, è una buona idea utilizzare l’Editing Completo del Sito. Puoi personalizzare facilmente l’aspetto del tuo sito con modelli e parti di modelli utilizzando questa funzionalità. Questo approccio può essere un’alternativa più semplice rispetto alla completa riprogettazione di ogni pagina da zero.

Per riepilogo, ecco i diversi modi in cui puoi creare template e parti di template in WordPress:

1. Crea un nuovo template con l’Editor di Template.
2. Crea parti di template con l’Editor del Sito.
3. Codifica manualmente template e parti di template.

Creare il tuo tema può essere complicato, soprattutto se non hai esperienza nello sviluppo web. Se hai bisogno di personalizzare il tuo layout da zero, potresti voler assumere un designer professionista. Con il nostro Servizio Pro di Design Web Personalizzato, puoi evitare questo complicato processo di codifica e ottenere un sito web di alta qualità progettato per il tuo brand!