Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Themes

Modelli di pagina dinamici in WordPress, parte 1

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Dynamic Page Templates in WordPress.
Dynamic Page Templates in WordPress, Part 2

Italian (Italiano) translation by Francesco (you can also view the original English article)

I modelli di pagina di WordPress sono un ottimo modo per modificare completamente il modo in cui particolari pagine web vengono visualizzate. È possibile utilizzarle per aggiungere una vasta gamma di funzionalità al tuo sito.

Tuttavia, hanno una limitazione nel senso che sono modelli «statici». Non è possibile personalizzarli o modificare il loro comportamento in alcun modo. Si può scegliere solo se attivare un modello di pagina o meno. Per impostazione predefinita, un modello di pagina potrà semplicemente svolgere una funzione fissa, ad esempio visualizzare una mappa del sito o rimuovere la barra laterale per visualizzare una pagina a larghezza intera.

In questa serie di tutorial, potrai apprendere come è possibile estendere i modelli di pagina per renderli più flessibili, migliorando notevolmente la loro funzionalità. Comincerò con l'introduzione di come creare un modello di pagina standard tramite un tema child, prima di passare a un approccio più flessibile dove creeremo un modello di pagina dinamica generico.

Infine, vi mostrerò tre reali esempi di modelli di pagina dinamica completamente funzionanti. Si parlerà anche di argomenti avanzati come assegnare i modelli di pagina a tipi di post personalizzati.

Vuoi proseguire?

Per seguire questa serie di tutorial, avrai bisogno di un sito WordPress con accesso admin. Di gran lunga il modo più semplice per farlo consiste nell'utilizzare un ambiente di sviluppo locale. Un editor di testo dedicato è utile ma non essenziale.

Se volete sviluppare con WordPress tramite un server remoto sarà necessario essere in grado di modificare i file di tema tramite l'amministratore di WordPress, o modificare i file localmente e utilizzare un software FTP per trasferirli al server. Per ragioni di semplicità, darò per scontato che stai lavorando con WordPress localmente in tutto il resto di questo tutorial.

Per implementare i nostri modelli di pagina, userò un tema child basato sul tema genitore Twenty Seventeen, che (al momento) è l'ultimo tema predefinito di WordPress. Quindi se si vuole seguire il tutorial è una buona idea averlo installato prima di andare avanti.

The default Twenty Seventeen Theme

È possibile utilizzare un tema child basato su un altro tema genitore, se si preferisce, ma sarà necessario modificare parte del codice per farlo funzionare perfettamente con il vostro tema particolare. Il metodo di base, però, è praticamente identico per qualsiasi tema child.

Modelli di pagina di WordPress

Prima di imparare a rendere più flessibili i modelli di pagina, andiamo su alcuni dettagli di base.

WordPress utilizza una gerarchia dei template per decidere quale modello usare per eseguire il rendering della pagina corrente. Il modello utilizzato nella maggior parte degli scenari per le pagine è page.php, ma può essere diverso se stai visualizzando una pagina con un particolare ID o slug. Tuttavia, se si seleziona un modello di pagina per una pagina particolare, questo verrà sempre utilizzato in preferenza, il che lo rende molto facile da personalizzare per qualsiasi pagina utilizzando un modello di pagina.

Ecco alcuni tipici esempi di modelli di pagina WordPress comunemente utilizzati:

  • Modulo di contatto
  • Portfolio
  • Domande frequenti
  • Pagina 404 personalizzata
  • Pagina di accesso personalizzata
  • Mappa del sito
  • Pagina a larghezza intera
  • Pagina di post di Blog
  • Pagina "widgetized"
  • E molti altri...

Potrei andare avanti, ma ne hai avuto un'idea. I modelli di pagina sono cool! È possibile utilizzarli per quasi tutto.

Se hai utilizzato WordPress per un po' di tempo allora è altamente probabile che avete già incrociato uno o più degli esempi precedenti. La maggior parte dei temi includono modelli di pagina per completare la funzionalità di tema ed è possibile aggiungere facilmente la propria tramite un tema child. Vi mostrerò come effettuare questa operazione tra poco.

I modelli di pagina sono così utili perché ti danno il controllo completo sull'intera pagina. Se lo si desidera, è possibile lasciare fuori l'intestazione, piè di pagina, e/o barre laterali. Questo è uno dei motivi per cui i modelli di pagina a larghezza intera sono così comuni perché è molto facile gestire le barre laterali tramite un modello di pagina.

Per vedere tutti i modelli di pagina attualmente disponibili, andare nell'editor di WordPress e accedere alla casella a discesa Template tramite il meta box Page Templates. Basta selezionare il modello di pagina desiderato e, una volta che la pagina è stata aggiornata, sarà visibile la prossima volta che la pagina viene visualizzata.

Aggiunta di modelli di pagina tramite un tema child

Come accennato in precedenza, utilizzeremo un tema child WordPress personalizzato per implementare tutti i modelli di pagina in questo tutorial. Inizieremo con un tema child semplice e quindi aggiungeremo ulteriori funzionalità man mano che andremo avanti.

L'intero processo sarà coperto passo dopo passo, quindi non preoccupatevi se non avete familiarità con temi child e/o modelli di pagina. Sarete più a vostro agio entro la fine del tutorial!

L'idea di base dietro temi child è che consentono di personalizzare l'aspetto del vostro tema corrente (chiamato un tema genitore) in modo da non essere modificato quando viene aggiornato il tema genitore.

Se il codice viene aggiunto direttamente al tema genitore tutte le personalizzazioni verranno sovrascritte e perse durante un aggiornamento pianificato del tema. Questo è un punto importante poichè qualsiasi tema ben mantenuto sarà regolarmente aggiornato. Per saperne di più sui temi child, consiglierei di dare un'occhiata alla documentazione ufficiale.

È interessante notare che è tecnicamente possibile utilizzare un plugin per WordPress per aggiungere modelli di pagina, ma è molto più semplice utilizzare un tema child. Non voglio complicare le cose inutilmente con codice estraneo, così userò i temi child per l'implementazione del modello di pagina.

Iniziamo!

Ok, quindi basta con la teoria — creiamo il nostro modello di pagina iniziale! Sarà situato in un tema child personalizzato di Twenty Seventeen che fungerà da nostro contenitore di modelli di pagina, quindi abbiamo bisogno di creare il tema child prima.

Apri cartella del tuo tema e crea una nuova cartella per il tema child. Secondo le WordPress best practices, è consigliabile che il nome della cartella del tema bambino abbia lo stesso nome del tema genitore su cui si basa, modificato con '-child'. Poichè la nostra cartella del tema genitore è denominato twentyseventeen, il nome della cartella del tema child sarà twentyseventeen-child. All'interno di questa nuova cartella, creare un unico file chiamato style.css e aggiungere il seguente blocco di commento nella parte superiore.

Ora abbiamo bisogno di fare riferimento a tutti gli stili dal tema genitore Twenty Seventeen. Se hai mai lavorato con temi child prima, potresti essere abituato ad aggiungere una dichiarazione di @import CSS direttamente sotto il blocco di commento. Questo non è più considerato una best practice di WordPress a causa di problemi di velocità. Invece, sarà meglio accodare gli stili del tema genitore, che saranno così più efficienti.

All'interno della cartella radice del tema child, creare un file functions.php e aggiungere il codice riportato di seguito per configurare un contenitore di classe vuota. Useremo questa classe per tutto il nostro codice di installazione.

Nota: Non è necessaria la chiusura istruzione PHP, ma è possibile aggiungerla se si preferisce.

Ora aggiungere un hook e un callback per accodare gli stili del tema genitore Twenty Seventeen, anziché importarli direttamente all'interno del file style.css. Fai questo con l'aggiunta di due nuovi metodi della classe.

Salvare le modifiche e attivare il tema child. Ora avete un tema Twenty Seventeen pienamente funzionante, seppur semplice. Per verificare se funziona correttamente, è necessario aggiungere una riga di CSS personalizzato a style.css.

Se tutto va bene, si dovrebbe vedere tutto il testo del sito ora colorato di un bel rosso sgargiante!

Updated styles as per the child theme

Non dimenticare di eliminare il CSS di prova prima di andare avanti. Ora che il tema child è attivo, possiamo cominciare a implementare il nostro primo modello di pagina.

Aggiungere il nostro primo modello di pagina

Una cosa da notare è dove sono archiviati i modelli di pagina all'interno del vostro tema child. È possibile archiviare i modelli di pagina, o direttamente all'interno della cartella radice del tema child o in una cartella di livello superiore. Non importa quale si sceglie; entrambi i casi vanno bene.

Tuttavia, se si dispongono di più modelli di pagina, si può decidere di memorizzarli in una cartella per scopi organizzativi. Il nome della cartella non è importante, ma deve trovarsi direttamente all'interno della cartella radice del tema child, altrimenti WordPress non riconoscere i modelli di pagina. Per questo tutorial, utilizzeremo una cartella denominata page-templates.

Aggiungiamo ora un nuovo modello di pagina per il tema child. Il modo standard per farlo è quello di fare una copia del file del modello del tema genitore page.php e aggiungerlo al proprio tema child. È possibile denominare il file tutto quello che vuoi, ma consiglierei anche qualcosa che lo rende riconoscibile come un modello di pagina. Userò test-page-template.php.

Dopo aver copiato il file page.php (e rinominato) nella cartella page-templates, la struttura del tema child dovrebbe apparire come questa:

Adding the first page template

Apri la pagina test-page-template.php e sostituisci il blocco di commento nella parte superiore del file con il seguente.

Questo passaggio è molto importante in quanto il blocco di commento dice a WordPress di riconoscere il file come un modello di pagina e aggiungerlo all'elenco dei modelli di pagina disponibili sulla schermata di editor di pagina.

Il codice del modello di pagina completa dovrebbe risultare come questo.

Testiamo il nostro modello di pagina. Vai all'admin di WordPress e modifica qualsiasi pagina esistente o creane una nuova. Sulla schermata di editor di pagina, selezionare il Template dall'elenco a discesa nella finestra Attributi di Pagina per assegnare il nostro modello di pagina alla pagina corrente.

The Page Attributes

Siccome abbiamo semplicemente copiato il file di modello del tema genitore page.php, il nostro modello di pagina personalizzato non fa nulla oltre che emettere l'output della pagina corrente, il che non è molto utile. Inoltre, non avremo bisogno di riprodurre contenuti o commenti, quindi rimuoviamo questi dal ciclo while, e aggiungiamo un messaggio. Modifica il contenuto del loop while così.

Salva e visualizza la pagina sul front-end.

Viewing the page template on the front-end

Nota: Se non riesci a vedere il messaggio personalizzato assicurati di avere selezionato il modello di pagina personalizzato nell'editor di pagina e di aver salvato per aggiornare le impostazioni.

Ora rendiamo il nostro modello di pagina personalizzato un po' più utile. Sostituiamo il messaggio che abbiamo aggiunto in precedenza con il codice seguente per visualizzare una sitemap di tutte le pagine pubblicate.

Questo visualizzerà il seguente output.

Viewing the sitemap

È facile vedere quanto utili possono essere i modelli di pagina. Ma possiamo fare ancora meglio!

Conclusione

Finora abbiamo creato un tema child e lo abbiamo usato per implementare il nostro modello di pagina standard. Nel prossimo tutorial, vi mostrerò passo per passo come estenderlo, dimostrando come i modelli di pagina possono essere resi più flessibili.

In particolare, creeremo un modello di pagina dinamica polivalente con l'aggiunta di controlli personalizzati per la schermata di editor di pagina. La logica di controllo verrà quindi aggiunta al modello di pagina per permetterci di personalizzare direttamente come il modello di pagina viene renderizzato.

WordPress ha un'ecosistema incredibilmente attivo. Ci sono temi, plugin, librerie, e molti altri prodotti che consentono di costruire il tuo sito o il tuo progetto. La natura open source della piattaforma, inoltre, lo rende una grande opzione da cui si possono migliorare le vostre abilità di programmazione. In ogni caso, si può vedere ciò che abbiamo già a disposizione sul marketplace di Envato.

Questo è il mio primo tutorial (siate gentili!) quindi non esitate a lasciare i commenti che avete qui sotto. Farò del mio meglio per rispondere a ogni domanda.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.