Modelli di pagina dinamica in WordPress, parte 1

I modelli di pagina di WordPress sono un ottimo modo per modificare completamente il modo in cui vengono visualizzate determinate pagine Web. Puoi usarli per aggiungere una vasta gamma di funzionalità al tuo sito.

Hanno, tuttavia, una limitazione in quanto sono modelli "statici". Non è possibile personalizzarli o influenzare il loro comportamento in alcun modo. Puoi solo scegliere se abilitare o meno un modello di pagina. Per impostazione predefinita, un modello di pagina eseguirà semplicemente una funzione fissa, ad es. visualizza una mappa del sito o rimuovi la barra laterale per visualizzare una pagina a larghezza intera.

In questa serie di tutorial, vedrò come è possibile estendere i modelli di pagina per renderli più flessibili, migliorando notevolmente le loro funzionalità. Inizierò presentando come creare un modello di pagina standard tramite un tema figlio, prima di passare a un approccio più flessibile in cui creerò un modello di pagina dinamica generico.

Infine, ti mostrerò tre esempi reali di modelli di pagine dinamiche pienamente funzionanti. Tratterò anche argomenti avanzati come come assegnare modelli di pagina a tipi di post personalizzati.

Vuoi seguire?

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

Se ti stai sviluppando con WordPress tramite un server remoto, dovrai essere in grado di modificare i file dei temi tramite l'amministratore di WordPress, o modificare i file localmente e utilizzare il software FTP per ritrasferirli al server. Per semplicità, presumo che tu stia lavorando con WordPress localmente nel resto di questo tutorial.

Per implementare i nostri modelli di pagina, userò un tema figlio basato sul tema principale di Twenty Seventeen, che (al momento della stesura di questo libro) è l'ultimo tema predefinito di WordPress. Quindi se stai seguendo allora è una buona idea averlo installato prima di andare avanti.

È possibile utilizzare un tema figlio basato su un altro tema principale, se si preferisce, ma sarà necessario modificare parte del codice per farlo funzionare perfettamente con il tema in questione. Il metodo di base, tuttavia, è praticamente lo stesso per qualsiasi tema figlio.

Modelli di pagina WordPress

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

WordPress utilizza una gerarchia di modelli per decidere quale modello renderizza la 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 ID o una lumaca particolare. Tuttavia, se selezioni un modello di pagina per una determinata pagina, questo verrà sempre utilizzato di preferenza, il che rende molto facile personalizzare qualsiasi pagina utilizzando un modello di pagina.

Ecco alcuni esempi tipici di modelli di pagine WordPress comunemente usati:

• Modulo di Contatto
• portafogli
• Domande frequenti
• Pagina personalizzata 404
• Pagina di accesso personalizzata
• Mappa del sito
• Pagina intera
• Pagina dei post dei blog
• Pagina Widgetized
• E tanti altri…

Potrei andare avanti, ma tu hai l'idea. I modelli di pagina sono fantastici! Puoi usarli per quasi tutto.

Se hai utilizzato WordPress per un certo periodo di tempo, è molto probabile che tu abbia già trovato uno o più esempi sopra. La maggior parte dei temi include modelli di pagina per integrare la funzionalità del tema e puoi aggiungerne di tuoi tramite un tema figlio. Tratterò su come farlo a breve.

I modelli di pagina sono così utili perché ti danno il controllo completo su tutta la pagina. Se lo desideri, puoi omettere l'intestazione, il piè di pagina e / o le barre laterali. Questo è uno dei motivi per cui i modelli di pagina a larghezza intera sono così comuni perché è molto semplice manipolare le barre laterali tramite un modello di pagina.

Per vedere tutti i modelli di pagina attualmente disponibili, vai all'editor di pagine di WordPress e accedi a Modello discesa attraverso il Modelli di pagina meta-box. Basta selezionare il modello di pagina che si desidera e, una volta che la pagina è stata aggiornata, sarà visibile alla successiva visualizzazione della pagina.

Aggiunta di modelli di pagina tramite un tema figlio

Come accennato in precedenza, utilizzeremo un tema figlio WordPress personalizzato per implementare tutti i modelli di pagina in questo tutorial. Inizierò con un tema figlio di base e un modello di pagina, quindi aggiungo più complessità mentre procediamo.

L'intero processo verrà trattato passo dopo passo, quindi non preoccuparti se non hai familiarità con temi figlio e / o modelli di pagina. Sarai alla fine del tutorial!

L'idea alla base dei temi figli è che consentono di personalizzare l'aspetto del tema corrente (chiamato tema principale) in un modo che non verrà modificato quando il tema principale viene aggiornato.

Se il codice viene aggiunto direttamente al tema principale, tutte le personalizzazioni verranno sovrascritte e perse durante un aggiornamento a tema programmato. Questo è un punto importante in quanto ogni tema ben curato verrà regolarmente aggiornato. Per saperne di più sui temi figli, ti consiglio di dare un'occhiata alla documentazione ufficiale. 

È interessante notare che è tecnicamente possibile utilizzare un plug-in di WordPress per aggiungere modelli di pagina, ma è molto più semplice utilizzare un tema figlio. Non voglio complicare le cose inutilmente con il codice estraneo, quindi rimarrò con i temi figlio per l'implementazione del modello di pagina.

Iniziamo!

Ok, teoria abbastanza, creiamo il nostro modello di pagina iniziale! Sarà posizionato in un tema personalizzato Twenty Seventeen che fungerà da contenitore del modello di pagina, quindi è necessario creare prima il tema secondario.

Apri la cartella del tema e crea una nuova cartella per il tuo tema figlio. Secondo le migliori pratiche di WordPress, si consiglia di nominare la cartella del tema figlio come il tema principale su cui è basata, modificata con "-child". Come viene denominata la nostra cartella tema principale twentyseventeen, nominare la cartella del tema figlio twentyseventeen-figlio. All'interno di questa nuova cartella, crea un singolo file chiamato style.css e aggiungi il seguente blocco di commenti in alto.

/ * Nome del tema: Venti diciassette bambini Descrizione: Venti diciassette temi per bambini Autore: David Gwyer Modello: twentyseventeen Versione: 0.1 Licenza: GNU General Public License v2 o successiva URI della licenza: http://www.gnu.org/licenses/gpl- 2.0.html Dominio testo: ventisettenne-figlio * /

Ora dobbiamo fare riferimento a tutti gli stili del tema padre Twenty Seventeen. Se hai mai lavorato prima con temi figlio, potresti essere abituato ad aggiungere un CSS @importare istruzione direttamente sotto il blocco dei commenti. Questa non è più considerata una best practice di WordPress a causa di problemi di velocità. Invece, accoderemo gli stili del tema principale, che saranno più efficienti.

All'interno della cartella radice del tema figlio, creare a functions.php file e aggiungi il seguente codice per impostare un contenitore di classe vuoto. Useremo questa classe per tutto il nostro codice di configurazione.

dentro();

Nota: l'istruzione di chiusura di PHP non è necessaria, ma puoi aggiungerla se preferisci.

Ora aggiungi un hook e callback per accodare gli stili del tema padre Twenty Seventeen, anziché importarli direttamente nel file style.css. Fatelo aggiungendo due nuovi metodi di classe.

Salva le modifiche e attiva il tema figlio. Ora hai un tema bambino pienamente funzionante, anche se semplice, Twenty Seventeen. Per verificare se funziona correttamente, aggiungi una linea di CSS personalizzati a style.css.
* color: red! important; 
Se tutto va bene, dovresti vedere tutto il testo del tuo sito ora colorato di un bel rosso sgargiante!
Non dimenticare di eliminare il CSS di test prima di proseguire. Ora che il tema figlio è attivo, possiamo iniziare a implementare il nostro modello di prima pagina.
Aggiungere il nostro modello di prima pagina
Una cosa vale la pena menzionare dove si memorizzano i modelli di pagina all'interno del tema figlio. È possibile memorizzare i modelli di pagina direttamente nella cartella del tema figlio root o in una cartella di livello superiore. Non importa quale scegli; entrambi i posti vanno bene.
Tuttavia, se si dispone di più modelli di pagina, è possibile decidere di memorizzarli in una cartella per scopi organizzativi. Il nome della cartella non è importante, ma deve essere posizionato direttamente nella cartella del tema figlio root, altrimenti WordPress non riconoscerà i modelli di pagina. Per questo tutorial, userò una cartella chiamata pagina-templates.
Ora aggiungiamo un nuovo modello di pagina al tema figlio. Il modo standard per farlo è quello di creare una copia del tema principale page.php file modello di tema e aggiungilo al tema figlio. Puoi dare un nome al file qualsiasi cosa desideri, ma ti consiglio di includere qualcosa che lo renda riconoscibile come modello di pagina. Vado con test-page-template.php.
Una volta che hai copiato il page.php file (e rinominato) al pagina-templates cartella, la struttura del tema figlio dovrebbe ora assomigliare a questa:
Aprire test-page-template.php e sostituire il blocco dei commenti nella parte superiore del file con il seguente.
Questo passaggio è molto importante in quanto il blocco dei commenti indica a WordPress di riconoscere il file come modello di pagina e lo aggiungerà all'elenco dei modelli di pagina disponibili nella schermata di modifica della pagina.
Il codice del modello di pagina intera dovrebbe ora apparire come questo.
 
 
 
  
 
 
 
Mettiamo alla prova il nostro modello di pagina. Vai all'amministratore di WordPress e modifica qualsiasi pagina esistente o creane una nuova. Nella schermata di modifica della pagina, selezionare il Modello discesa dal Attributi della pagina meta box per assegnare il nostro modello di pagina alla pagina corrente.
Perché abbiamo semplicemente copiato il tema principale page.php file modello, il nostro modello di pagina personalizzato non sta facendo altro che l'output della pagina corrente, che non è molto utile. Inoltre, non avremo bisogno di pubblicare il contenuto dell'editor o i commenti, quindi rimuoverli dal modello di pagina mentre loop e aggiungi un messaggio personalizzato. Cambia il contenuto del mentre loop al seguente.
Questo è il nostro modello di pagina personalizzato!
"; endwhile // Fine del ciclo.
Salva questo e guarda la pagina sul front-end.
Nota: se non riesci a visualizzare il messaggio personalizzato, assicurati di aver selezionato il modello di pagina personalizzato nell'editor di pagine e di averlo salvato per aggiornare le impostazioni.
Ora rendiamo il nostro modello di pagina personalizzato un po 'più utile. Sostituisci il messaggio che abbiamo aggiunto sopra con il seguente codice per generare una sitemap di tutte le pagine pubblicate.
Mappa del sito"; eco "
msg_list_pages (array ('title_li' => ")). "
"; endwhile // Fine del ciclo.
Ciò comporterà il seguente output.
È facile vedere quanto possono essere utili i modelli di pagina. Ma possiamo fare ancora meglio!
Conclusione
Finora, abbiamo creato un tema figlio e lo abbiamo usato per implementare il nostro modello di pagina standard. Nel prossimo tutorial, ti mostrerò passo passo come estenderlo, dimostrando come i modelli di pagina possono essere resi più flessibili.
In particolare, creeremo un modello di pagina dinamica generico aggiungendo controlli personalizzati alla schermata di modifica della pagina. La logica di controllo verrà quindi aggiunta al modello di pagina per consentirci di personalizzare direttamente la modalità di rendering del modello di pagina.
WordPress ha un'economia incredibilmente attiva. Ci sono temi, plugin, librerie e molti altri prodotti che ti aiutano a costruire il tuo sito e progetto. La natura open source della piattaforma lo rende anche un'ottima opzione da cui puoi migliorare le tue capacità di programmazione. In ogni caso, puoi vedere ciò che abbiamo a disposizione nel Marketplace Envato.
Questo è il mio primo tutorial (sii gentile!) Quindi non esitare a lasciare un feedback nel feed dei commenti qui sotto. Farò del mio meglio per rispondere a ogni domanda.



		
			
	   
	




Codice