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

Modelli di pagina dinamica in WordPress, parte 3

by
Difficulty:AdvancedLength:LongLanguages:
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)

Nelle prime due parti di questa serie di tutorial, abbiamo visto che cosa sono i modelli di pagina dinamica e perché sono utili. Abbiamo anche esaminato il codice necessario per la loro implementazione.

In questo terzo e ultimo tutorial della serie, creerò due esempi di modelli di pagina dinamica che potrete utilizzare nei vostri progetti di lavoro. Sono stati scelti alcuni che siano facilmente estendibili per soddisfare le proprie esigenze e sono da intendersi come ispirazione per qualsiasi altro tipo di modelli di pagina dinamica che si può realizzare.

I due modelli di pagina dinamica che analizzeremo sono:

  • Semplice modulo di contatto
  • Archivio dei Post del Blog

Oltre a implementare i nostri modelli di pagina, mostrerò anche come aggiungere dettagli supplementari, attraverso CSS personalizzato e JavaScript, per rendere l'interazione molto più intuitiva per gli utenti finali.

Inoltre, daremo un'occhiata a come è possibile utilizzare modelli di pagina per qualsiasi tipo di post. A partire dalla versione 4.7 di WordPress, è possibile specificare a quale tipo di post un modello di pagina è associato. Vedremo come è possibile modificare un modello di pagina dinamica esistente per sfruttare questa nuova funzionalità, che funziona con qualsiasi tipo di post.

Abbiamo un sacco di materiale in questo tutorial, quindi diamoci da fare!

Installazione tema

Useremo un tema child di WordPress Twenty Seventeen, proprio come abbiamo fatto nella parte 2 di questa serie di tutorial, per aggiungere il nostro codice di modello di pagina dinamica. Cominciamo con un tema child vuoto.

Creare una cartella di temi child chiamata twentyseventeen-child e aggiungete i seguenti file:

  • functions.php
  • style.css

All'interno di style.css aggiungete:

E all'interno di functions.php, aggiungete:

Aggiungete il tema child alla directory dei temi di WordPress come abbiamo fatto prima. Se non siete sicuri su come effettuare questa operazione, tornate indietro alla parte 2 in questa serie di tutorial.

Ora abbiamo un tema child (vuoto) pronto per noi a cui aggiungere il nostro codice del modello pagina dinamica.

Modello di pagina di form dinamico

La nostra prima reale implementazione di un modello di pagina dinamica è un semplice modulo di contatto. Aggiungeremo i seguenti campi:

  • Intestazione
  • Nome
  • Soggetto
  • Email
  • Numero di telefono

Sono tutti campi input text, a parte il titolo, che è un tag di intestazione HTML standard.

Prima di implementare il modello di pagina effettivo, però, abbiamo bisogno di aggiungere controlli personalizzati per l'editor che ci permetterà di modificare l'output del template di pagina. Quindi, quando abbiamo creato il modello di pagina, questo sarà renderizzato secondo le impostazioni di controllo editor di pagina.

Nella parte 2 di questa serie di tutorial, ho detto che non c'è alcun modo semplice per aggiungere controlli personalizzati direttamente alla casella meta 'attributi della pagina', dove si trova il modulo a discesa dei modelli di pagina.

Page Attributes

Questo significa che dobbiamo aggiungere i nostri controlli del modello di pagina dinamica altrove per ora. Vi mostrerò come aggirare questa limitazione un po' più avanti, con un po' di magia CSS e JavaScript. Ma per il momento, aggiungeremo i nostri controlli personalizzati in un box separato.

Nella classe DPT_Twenty_Seventeen_Child, registrate due hook nel metodo init e un nuovo metodo denominato page_template_meta_boxes.

Le azioni load-post.php e load-post-new.php occorrono quando un post(di qualsiasi tipo) è creato o modificato. Quando questo accade, registriamo un altro hook add_meta_boxes che lancerà la creazione del nostro meta box, che viene effettuata attraverso la funzione di callback add_template_meta_boxes. Implementiamo questa funzione.

Il rendering dei controlli metabox saranno gestiti dalla funzione callback display_form_page_template_meta_box, che è stata dichiarata prima come uno degli argomenti di add_meta_box().

Per il momento ho aggiunto del testo come segnaposto in modo da poter vedere il nostro nuovo meta box sull'editor di pagina.

Form Page Template Meta Box

Come ricorderete la nostra pagina con il modulo conterrà un'intestazione e quattro campi di input di testo. Ci sono molti modi per personalizzare il form, ma in questo caso aggiungiamo per ogni campo  un checkbox per gestirne la visualizzazione. Aggiornate display_form_page_template_meta_box() per includere il seguente codice.

Includiamo un campo nonce per la sicurezza che sarà verificata in seguito appena prima di salvare i valori del modulo nel database.

Nota: Se per qualsiasi motivo non è possibile verificare il valore nonce le impostazioni non verranno salvate.

Quindi i valori del form vengono recuperati dal database prima che i campi del form personalizzato vengano visualizzati nel meta box.

Form Page Template Meta Box with Options

Attualmente, le nostre caselle di controllo non verranno salvate quando il post viene aggiornato. Per far sì che le impostazioni vengano salvate, abbiamo bisogno di registrare un nuovo hook nel metodo init() che si innesca durante un'azione di save_post e quindi implementare il callback per aggiornare manualmente le impostazioni meta del post.

Dopo che il nonce del form e i permessi utente sono stati verificati, insieme ad un controllo per essere sicuri che siamo nel tipo di post corretto, possiamo effettuare un controllo sui valori inviati e salvarli in modo sicuro nel database.

Ora che i nostri checkbox sono ora perfettamente funzionanti, possiamo andare avanti e implementare il modello di pagina! Nella root della cartella del tema child, aggiungi una nuova cartella chiamata page-templates e aggiungi un nuovo file chiamato form-page-template.php.

Aggiungi il codice seguente nel nuovo file per creare un modello di pagina vuota.

Per ridurre la complessità del codice, il modulo di contatto non convalida l'input dell'utente, e abbiamo omesso i soliti controlli e convalida dei form, in quanto vogliamo concentrarci puramente sul rendere dinamico l'output del modulo senza codice estraneo.

In primo luogo, abbiamo bisogno di recuperare i valori della casella di controllo del modulo di contatto dinamico.

Poi possiamo aggiungere il codice del modulo. Questo è molto simile per ogni campo modulo. Diamo un'occhiata al codice del campo name.

Testiamo il valore della casella di controllo dalle impostazioni del modello di pagina e mostriamo il campo del modulo solo se è spuntato. In caso contrario, nulla viene mostrato. Questo si ripeterà per ogni campo del modulo.

Una volta che il form è stato inviato mandiamo una mail all'amministratore del sito e mostriamo un messaggio sullo schermo. Messe tutte queste cose assieme, abbiamo il codice finale del nostro modello di pagina.

Per testare he tutto funzioni correttamente, assicurati che tutti i checkbox del form sono stati spuntati e aggiorna il post. Dopo dai un'occhiata alla pagina nel frontend.

Looking at the template on the front-end

Ora prova a togliere la spunta ad alcuni checkbox del form del modello di pagina. Solo i campi specificati verranno mostrati. Ora hai il pieno controllo su quali campi del form verranno mostrati! Nello screenshot sottostante ho tolto la spunta solo al campo email e telefono.

Changing options for the front-end

Nota: se stai lavorando in locale la funzione mail non invia l'email. Funzionerà solo se hai un mail server funzionante.

Il form potrebbe essere facilmente esteso per aggiungere qualsiasi campo. Per esempio potresti aggiungere un campo di CAPTCHA al tuo form o specificare l'ordine in cui verranno mostrati i campi o anche il testo per l'intestazione o le etichette dei campi del modulo. Il punto qui è che puoi usare i modelli di pagina dinamici per customizzare il form come vuoi. Le possibilità sono infinite!

Organizzare i controlli del tuo modello di pagina

Potresti aver notato che ci sono alcuni problemi di usabilità con i controlli admin del tuo modello di pagina. La funzionalità è a posto, ma i controlli del modello di pagina dovrebbero essere nello stesso meta box in cui sono i controlli drop-down della pagina.

The meta boxes

Ricorda che il motivo per cui abbiamo dovuto aggiungere i nostri controlli del modello di pagina in una casella separata di meta era in primo luogo perché non c'è attualmente nessun gancio WordPress disponibile per aggiungere controlli personalizzati direttamente alla casella di meta del modello di pagina.

Inoltre, quando viene selezionato un modello di pagina dinamica, vogliamo che solo i controlli associati a tale modello siano visibili. Possiamo completare entrambi i requisiti aggiungendo alcuni CSS e JavaScript personalizzati per l'editor di pagina.

In particolare, abbiamo bisogno di:

  • Nascondere il modulo del meta box.
  • Attendere che la pagina di editor di admin sia caricata completamente.
  • Spostare i controlli del form nella casella di meta 'Attributi di pagina'.
  • Visualizzare i controlli del form admin solo se viene selezionato il modello di pagina associata.

Iniziamo con l'aggiunta di cartelle css e js nella cartella radice del tema child. All'interno della cartella css crea un file style.css e nella cartella js, creare un file script.js. È possibile chiamare questi file come preferisci. Basta ricordarsi di prendere nota dei nomi di file se e sostituirli nel codice enqueue.

Quindi, abbiamo bisogno di accodare entrambi i file solo sulla schermata di editor di pagina. Non vogliamo vengano aggiunti a tutte le pagine di amministrazione. Registra un nuovo gancio di azione nel metodo init() per caricare gli script nelle pagine di admin e aggiungere la funzione di callback per accodare i file di script.

Si noti come stiamo definendo il tipo page di post  e le pagine admin post.php o post-new.php. Quindi, fondamentalmente, a meno che non siamo in editor di pagina, i nostri script non verranno caricati, che è quello che vogliamo.

Procediamo ora e iniziamo ad aggiungere JavaScript e CSS per personalizzare i controlli del form del modello pagina. In primo luogo, è possibile nascondere la casella di meta intera con i CSS aggiungendo questo style.css:

Avremmo potuto fare questo con JavaScript, ma vogliamo che la casella di meta sia nascosta immediatamente. Se l'avessimo fatto tramite JavaScript, avremmo dovuto attendere che la pagina fosse caricata, e avremmo visto un piccolo flash con la casella di meta visualizzata sullo schermo e poi subito nascosta con JavaScript. Usare i CSS in questo caso è meglio.

Ora il JavaScript. Aggiungete questo a script.js.

Non ho intenzione di dare in un'enorme quantità di dettagli per quanto riguarda il JavaScript, ma ecco la panoramica.

Abbiamo innanzitutto messo nella cache un paio di selettori CSS e spostato i controlli del form admin nella casella meta degli attributi di pagina Page Attributes. Quindi, abbiamo una funzione di displayControls() che nasconde o visualizza i controlli di modulo in base al valore corrente dell'elenco a discesa del modello pagina. Chiamiamo displayControls() durante il caricamento della pagina, e quindi ogni volta che viene modificato l'elenco a discesa, per assicurarci che siamo sempre in sincro.

Con i CSS e JavaScript aggiunti, i controlli del form del modello di pagina vengono ora visualizzati nella giusta casella meta e vengono mostrati solo se è selezionato il modello di pagina associato.

All of the page attributes

Questo sembra molto meglio ed è molto più intuitivo per l'utente. Poiché le caselle di meta possono essere spostati ovunque nelle schermate di amministrazione di WordPress, i nostri controlli del modello di pagina dinamica non sarebbero stati necessariamente vicino alla casella a discesa del modello di pagina! Abbiamo risolto questo problema in un modo elegante per assicurarci che i nostri controlli appaiano sempre direttamente sotto il modello di pagina a discesa!

Modello dinamico di pagina di post di Blog

Il nostro modello di pagina dinamica successiva visualizza un elenco di post del tuo blog più recenti. Ma piuttosto che semplicemente elencare tutti i messaggi, implementeremo una casella di riepilogo (simile a una discesa) per consentire di scegliere la categoria di post. Non solo ma sarete anche in grado di selezionare più categorie di post.

Iniziamo aggiungendo una nuova casella di meta in add_page_template_meta_boxes().

E ora abbiamo bisogno di implementare la funzione di callback per visualizzare la nostra casella di meta.

Analizziamo. Innanzitutto definiamo una variabile per contenere l'elenco delle categorie di post selezionate (se ce ne sono) dall'ultima volta che il post è stato aggiornato. Un'altra variabile memorizza una matrice di tutte le categorie esistenti.

Nota: abbiamo già un campo nonce dal nostro precedente modello di pagina, quindi non abbiamo bisogno di utilizzarne un altro qui, dato che siamo sulla stessa pagina admin.

Quindi con un ciclo sulla lista delle categorie del sito, popoliamoi un controllo elenco a discesa. Qualsiasi categoria selezionata in precedenza viene selezionata nuovamente per tenere tutto sincronizzato.

Potreste aver notato, però, che uno degli argomenti al selected() è una chiamata di funzione. Normalmente usiamo solo selected() per confrontare due valori per determinare se contrassegnare l'elemento corrente come selezionato. Tuttavia, poiché possiamo selezionare più di una categoria, la nostra impostazione nel database è sempre un array di valori (anche se abbiamo effettivamente selezionato solo una categoria).

La funzione q() è una funzione di supporto che permette di controllare la voce di elenco corrente contro la matrice delle categorie salvate.

Per ciascuna categoria, l'ID di categoria è passato a q() insieme all'array di categorie salvato. Se la categoria corrente è nell'elenco delle categorie salvate la categoria corrente viene restituita a selected() e corrisponderà al primo argomento. Questo farà sì che selected() contrassegni la categoria corrente come selezionata. Si tratta di un modo elegante per gestire più opzioni per un singolo controllo.

Tutto quello che dobbiamo fare ora è aggiornare save_page_template_meta() per gestire il salvataggio delle categorie del blog poste. Aggiungete questo codice per fare proprio questo.

Ora, abbiamo bisogno di creare il modello di pagina di post di blog. All'interno della cartella page-templates del tema child, creamo un nuovo file chiamato blog-page-template.php e aggiungiamo il codice riportato di seguito.

L'unica vera differenza dal nostro precedente modello di pagina dinamica è il codice all'interno del tag HTML <main>, quindi diamo un'occhiata.

Abbiamo innanzitutto impostato il valore della variablile paged della query, che viene utilizzato per visualizzare i post su più pagine, a seconda del numero di pagine restituite da nostra query di WordPress. Dunque, otteniamo tutte le categorie selezionate nel box meta dell'editor di pagina. L'array di categorie viene convertito in una stringa e gli viene dato un valore predefinito se vuoto. Quindi viene creata una nuova query di WordPress e i risultati sono mostrati in un ciclo standard.

Qui la cosa fondamentale è che siamo in grado di controllare esattamente quali categorie vengono passate all'oggetto query, tramite le selezioni effettuate nel meta box dell'editor di pagina.

Tutto quello che dobbiamo fare ora è nascondere la casella meta delle categorie del blog e spostare l'elenco nel meta box dei Page Attributes. Proprio come abbiamo fatto prima.

All'interno di style.css aggiornamento gli stili per nascondere il meta box dei post del blog.

Il file script.js ha bisogno di un altro po' di codice. Ecco il file completamente aggiornato.

Vale la pena notare come la maggior parte delle modifiche sono nella funzione .on('change'). Poiché ora abbiamo più di un modello di pagina dinamica, dobbiamo verificare quale è stato selezionato dal menu a discesa e poi passare il selettore dell'elemento corrispondente a displayControls().

Abbiamo anche bisogno di nascondere tutti gli altri controlli del modello di pagina oltre a quello selezionato. E se viene visualizzato il modello di pagina predefinito, nascondiamo tutti i controlli del modello di pagina. Il codice JavaScript potrebbe essere ottimizzato ulteriormente, ma dato che abbiamo solo due modelli di pagina dinamico attivi, fa un lavoro abbastanza buono per le nostre esigenze.

An example of dynamic page templates

Con queste modifiche abbiamo ora due template di pagina dinamica con i controlli associati visualizzati correttamente sotto il drop-down del template di pagina.

Modelli di pagina per tutti

In precedenza ho accennato a come, in WordPress 4.7 +, è ora possibile assegnare modelli di pagina a qualsiasi tipo di post. Prima di WordPress 4.7, si poteva solo assegnarli alle pagine, ma ora non più!

Tutto quello che dovete fare è aggiungere una riga supplementare per il blocco di commento nell'intestazione del modello di pagina e specificare un elenco delimitato da virgole di tipi di post in cui si desidera che il modello di pagina sia disponibile.

Il nome del tipo di post deve essere lo stesso dello slug inserito quando il tipo di post è stato registrato la prima volta, altrimenti verrà ignorato.

Così, siamo in grado di visualizzare modelli di pagina per qualsiasi tipo di post, invece i modelli di pagina dinamica? Con solo poche modifiche, anche queste possono essere supportate. Diamo un'occhiata a ciò che è necessario.

Per fortuna, a parte l'aggiunta di una riga di codice nella parte superiore del modello di pagina, tutte le modifiche necessarie sono in un unico file: functions.php.

In primo luogo, abbiamo bisogno di accodare il modello di pagina dinamica CSS e JavaScript non solo sulle pagine, ma per tutti i tipi di post che vogliamo supportino i modelli di pagina dinamica. In enqueue_editor_scripts(), possiamo fare qualcosa di simile.

In questo modo gli script del modello di pagina dinamica verranno caricati sulle pagine e il tipo di post personalizzato di film.

Successivamente, in add_page_template_meta_boxes(), è possibile aggiornare ogni istanza di add_meta_box() che si desidera visualizzare su un tipo di post personalizzato. Anziché specificare solo page, possiamo passare a un array di tipi di post.

Infine, aggiornate save_page_template_meta() per supportare più tipi di post, proprio come abbiamo fatto per enqueue_editor_scripts(). E questo è tutto!

Semplicemente seguendo questi pochi passi, è possibile modificare i modelli di pagina dinamica per farli funzionare per qualsiasi tipo di post.

Nota: Per eventuali siti di WordPress basati su una versione inferiore alla versione 4.7, il testo di intestazione Template Post Type verrà semplicemente ignorato e verranno visualizzati tutti i modelli di pagina per impostazione predefinita. Se questo non è vi piace, è possibile aggiungere codice personalizzato per rendere compatibili i modelli di pagina.

Questo snippet è preso dal blog Make WordPress, dove troverete ulteriori informazioni su retrocompatibilità e sulla nuova funzionalità di modelli di pagina in modo più dettagliato.

Conclusione

Abbiamo esaminato un bel po' nella parte finale di questa serie di tutorial. In particolare, abbiamo implementato due modelli di pagina dinamici completamente funzionanti e usato CSS custom e Javascript per migliorare l'esperienza utente.

Anche se i tipi di post dinamico introdotti in questa serie di tutorial sono stati relativamente semplici, sarebbe molto facile estenderli per creare modelli di pagina potenti e flessibili. C'è così tanto da poter aggiungere alcune funzionalità di livello avanzato. E, a partire da WordPress 4.7, non sei limitato a svilupparli solo per le pagine.

Se stai cercando altre utility di aiuto per aumentare il tuo set di strumenti per WordPress o del codice da studiare e diventare più esperto di WordPress, non dimenticare di vedere ciò che è disponibile nel market di Envato.

Questa serie di tutorial ti ha ispirato per creare modelli di pagina dinamica? Se è così, fammelo sapere nei commenti qui sotto. Mi piacerebbe sentire le vostre idee e come potreste utilizzarle nei vostri progetti.

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.