Modelli di pagina dinamica in WordPress, parte 3

Nelle prime due parti di questa serie di tutorial, sono stati illustrati i modelli di pagina dinamici e il motivo per cui erano necessari. Abbiamo anche esaminato il codice necessario per implementarli. 

In questo terzo e ultimo tutorial della serie, creerò due esempi di modelli di pagina dinamici pienamente funzionanti che puoi utilizzare nei tuoi progetti. Questi sono stati scelti appositamente per essere facilmente estensibili per soddisfare le tue esigenze e sono intesi come fonte di ispirazione per qualsiasi altro tipo di template di pagina dinamici che puoi immaginare.

I due modelli di pagina dinamici che daremo un'occhiata a breve sono:

• Modulo di contatto semplice
• Blog Post Archive

Oltre a implementare i nostri modelli di pagina, ti mostrerò anche come aggiungere ulteriore lucentezza, tramite CSS personalizzati e JavaScript, per rendere l'interazione molto più intuitiva per gli utenti finali.

Inoltre, daremo un'occhiata a come è possibile utilizzare i modelli di pagina per qualunque tipo di post. Dal momento che WordPress 4.7, è possibile specificare il tipo di post associato a un modello di pagina. Vedremo come è possibile modificare un modello di pagina dinamica esistente per sfruttare questa nuova funzionalità in modo che funzioni con qualsiasi tipo di post.

Abbiamo molto da approfondire in questo tutorial, quindi iniziamo!

Impostazione del tema

Utilizzeremo nuovamente un tema per WordPress Twenty Seventeen, proprio come abbiamo fatto nella parte 2 di questa serie di tutorial, per aggiungere il nostro codice di modello di pagina dinamico. Iniziamo con un tema figlio vuoto.

Creare una cartella di temi figlio chiamata twentyseventeen-figlio e aggiungi i seguenti file:

• functions.php
• style.css

Dentro style.css, Inserisci:

/ * 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 * /

E dentro functions.php, Inserisci:

dentro(); 

Aggiungi il tema figlio alla tua directory dei temi di WordPress come fatto in precedenza. Se non sei sicuro su come farlo, fai riferimento alla parte 2 di questa serie di tutorial.

Ora abbiamo a disposizione un tema figlio (vuoto) funzionante per aggiungere il nostro codice modello di pagina dinamico a.

Modello di pagina modulo dinamico

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

• Intestazione
• Nome
• Soggetto
• E-mail
• Numero di telefono

Questi sono campi di input di testo, a parte l'intestazione, che è un tag di intestazione HTML standard.

Prima di implementare il modello di pagina effettivo, tuttavia, dobbiamo aggiungere controlli personalizzati all'editor di pagina che ci consentirà di modificare l'output del modello di pagina. Quindi, quando creiamo il modello di pagina, verrà eseguito il rendering in base alle impostazioni di controllo dell'editor di pagine.

Nella parte 2 di questa serie di tutorial, ho menzionato che non esiste un modo semplice per aggiungere controlli personalizzati direttamente alla metatag "Attributi di pagina", in cui si trova il menu a discesa del modello di pagina.

Ciò significa che per ora dobbiamo aggiungere i controlli del modello di pagina dinamico altrove. Ti mostrerò come aggirare questa limitazione un po 'più avanti, con un po' di magia CSS e JavaScript. Ma per ora, dovremo accontentarci di aggiungere i nostri controlli personalizzati ad una meta box separata.

Nel DPT_Twenty_Seventeen_Child classe, registra due nuovi hook di azione in dentro metodo e un nuovo metodo chiamato page_template_meta_boxes.

Il carico-post.php e carico-post-new.php i ganci di azione vengono eseguiti ogni volta che un post (di qualsiasi tipo) viene modificato o creato. Quando ciò accade, registriamo un altro hook di azione add_meta_boxes questo attiverà la creazione della nostra meta-box personalizzata, che viene eseguita tramite il add_page_template_meta_boxes funzione di callback. Implementiamo ora quella funzione.
Il rendering effettivo dei controlli di meta box verrà gestito tramite display_form_page_template_meta_box funzione di callback, che è stata specificata sopra come uno degli argomenti a add_meta_box ().
Aggiungi controlli qui ... 
Per ora, ho aggiunto del testo segnaposto in modo che possiamo vedere la nostra nuova meta box nell'editor di pagine.
Ricorda prima che il nostro modello di pagina del modulo avrà un'intestazione e quattro campi di testo. Ci sono molti modi in cui potremmo scegliere di personalizzare l'output del modulo, ma nel nostro caso aggiungiamo caselle di controllo per ogni campo che ci consentirà di attivare la loro visibilità. Aggiornare display_form_page_template_meta_box () per includere il seguente codice.
ID, 'pt_chk_form_heading', vero); $ name = get_post_meta ($ object-> ID, 'pt_chk_form_name', true); $ subject = get_post_meta ($ object-> ID, 'pt_chk_form_subject', true); $ email = get_post_meta ($ object-> ID, 'pt_chk_form_email', true); $ phone = get_post_meta ($ object-> ID, 'pt_chk_form_phone', true); ?> 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
 
Includiamo un campo nonce per la sicurezza che verrà verificato in seguito, appena prima di salvare i valori del modulo nel database.
Nota: se per qualsiasi motivo il valore nonce non può essere verificato, le impostazioni non verranno salvate. 
Quindi, i valori del modulo corrente vengono recuperati dal database prima che i campi del modulo personalizzato vengano emessi all'interno della meta-box.
Attualmente, le nostre caselle di controllo non verranno salvate quando il post è aggiornato. Per rendere persistenti le impostazioni del modulo, è necessario registrare un nuovo hook nel file dentro() metodo che si attiva durante a save_post azione, quindi implementare la funzione di callback per aggiornare manualmente le meta-impostazioni.
post_type) return $ post_id;  $ heading = isset ($ _POST ['pt_chk_form_heading'])? $ _POST ['pt_chk_form_heading']: "; update_post_meta ($ post_id, 'pt_chk_form_heading', $ heading); $ name = isset ($ _POST ['pt_chk_form_name'])? $ _POST ['pt_chk_form_name']:"; update_post_meta ($ post_id, 'pt_chk_form_name', $ name); $ subject = isset ($ _POST ['pt_chk_form_subject'])? $ _POST ['pt_chk_form_subject']: "; update_post_meta ($ post_id, 'pt_chk_form_subject', $ subject); $ email = isset ($ _POST ['pt_chk_form_email'])? $ _POST ['pt_chk_form_email']:"; update_post_meta ($ post_id, 'pt_chk_form_email', $ email); $ phone = isset ($ _POST ['pt_chk_form_phone'])? $ _POST ['pt_chk_form_phone']: "; update_post_meta ($ post_id, 'pt_chk_form_phone', $ phone); 
Una volta verificato il valore nonce del modulo e le autorizzazioni utente, insieme a un controllo per accertarci che il tipo di post sia corretto, possiamo verificare i valori del modulo inviato e salvare i valori in modo sicuro nel database.
Le nostre caselle di controllo sono ora completamente funzionanti, quindi possiamo procedere e implementare il modello di pagina effettivo! All'interno della cartella dei temi figlio root, aggiungi una nuova cartella chiamata pagina-templates, e aggiungere ad esso un nuovo file chiamato form-page-template.php.
Aggiungere il seguente codice al nuovo file per creare un modello di pagina vuota.
 
 
 
  
 
 
 
Per ridurre la complessità del codice, il nostro modulo di contatto non convalida l'input dell'utente, e abbiamo eseguito i soliti controlli e convalida dei moduli, poiché ci concentriamo esclusivamente sul rendere l'output del modulo dinamico senza codice estraneo.
Innanzitutto, dobbiamo recuperare i valori della casella di controllo del modulo di contatto dinamico.
Quindi possiamo aggiungere il codice del modulo. Questo è molto simile per ogni campo del modulo. Diamo un'occhiata al nome codice di campo.
  
 
Testiamo il valore della casella di controllo dalle impostazioni del modello di pagina e stampiamo solo il campo modulo se è selezionato. Altrimenti, non viene emesso nulla. Questo viene ripetuto per ogni campo modulo.
Una volta inviato il modulo, inviamo un'email all'amministratore del sito e viene visualizzato un messaggio sullo schermo. Mettendo tutto questo insieme, abbiamo il codice del nostro modello di pagina finale.
 
 
 
 Mail inviata con successo!
";?> 
  
Modello di pagina modulo dinamico!
    
    
    
    
  
 
  
 
 
 
Per verificare che tutto funzioni correttamente, assicurati che tutte le caselle di controllo del modello di pagina del modulo siano selezionate e aggiorni il post. Quindi dai un'occhiata al modello di pagina sul front-end.
Ora prova a deselezionare alcune caselle di controllo del modello di pagina del modulo. Solo i campi specificati vengono emessi. Hai il controllo totale su come viene visualizzato il modulo! Nella schermata di seguito, ho deselezionato solo le caselle di controllo email e telefono.
Nota: se stai lavorando su un ambiente WordPress locale, allora il posta la funzione potrebbe non inviare effettivamente l'email. Funzionerà solo se hai un server di posta configurato e funzionante.
Il modulo potrebbe essere facilmente esteso per aggiungere qualsiasi numero di controlli di qualsiasi tipo. Ad esempio, è possibile aggiungere un campo CAPTCHA facoltativo al modulo oppure essere in grado di specificare l'ordine dei campi emessi o anche il testo per l'intestazione / le etichette del modulo. Il punto qui è che puoi usare modelli di pagina dinamici per personalizzare il tuo modulo come preferisci. Le possibilità sono letteralmente infinite!
Organizzazione dei controlli dei modelli di pagina
Potresti aver notato che ci sono un paio di problemi di usabilità con i controlli di amministrazione per il nostro modello di pagina dinamica. Funzionalmente va bene, ma idealmente i controlli dinamici del modello di pagina dovrebbero essere nella stessa casella del modello a discesa del modello di pagina. 
Ricorda che il motivo per cui abbiamo dovuto aggiungere i controlli del modello di pagina a una meta box separata in primo luogo era perché al momento non è disponibile alcun hook per WordPress per aggiungere controlli personalizzati direttamente alla meta box del modello di pagina.
Inoltre, quando viene selezionato un modello di pagina dinamico, vogliamo che i controlli associati a quel modello siano visibili. Possiamo completare entrambi i requisiti aggiungendo alcuni CSS e JavaScript personalizzati all'editor di pagine.
Nello specifico, abbiamo bisogno di:
 
Nascondere la meta box del modulo.
 
Attendi il caricamento completo della pagina dell'editor di amministrazione.
 
Sposta i controlli del modulo nella casella meta 'Attributi della pagina'.
 
Visualizza i controlli del modulo di amministrazione solo se il modello di pagina associato è selezionato.
 
Inizia aggiungendo css e js cartelle nella cartella radice del tema figlio. Dentro il css cartella crea a style.css file e nel js cartella crea a script.js file. Puoi chiamare tutto ciò che vuoi, però. Ricordati di prendere nota dei nomi dei file in caso affermativo e sostituiscili nel codice degli script di accodamento.
Quindi, dobbiamo accodare entrambi i file solo sullo schermo dell'editor di pagine. Non vogliamo che vengano aggiunti a tutti pagine di amministrazione. Registra un nuovo hook di azione in dentro() metodo per caricare script nelle pagine di amministrazione e aggiungere la funzione di callback per accodare i file di script.
Nota come stiamo mirando al pagina inserisci il tipo e poi il post-new.php o post.php pagine di amministrazione. Quindi, in pratica, a meno che non siamo nell'editor di pagine, i nostri script non verranno caricati, che è ciò che vogliamo.
Andiamo avanti ora e inizia ad aggiungere CSS e JavaScript per personalizzare i controlli del modello di pagina del modulo. In primo luogo, nascondi l'intero modulo meta box con CSS aggiungendo questo a style.css:
# form-page-template-meta-box display: none; 
Avremmo potuto farlo con JavaScript, ma vogliamo che il meta box del modulo sia nascosto immediatamente. Se lo avessimo fatto tramite JavaScript, avremmo dovuto aspettare fino a quando la pagina non fosse stata caricata, e vedresti un piccolo flash mentre la meta-box è stata visualizzata sullo schermo e poi è stata nascosta con JavaScript. Quindi usare CSS in questo caso è meglio.
Ora per il JavaScript. Aggiungi questo a script.js.
jQuery (document) .ready (function ($) var pt = $ ("#page_template"); var form_controls = $ ("#form_pt_wrapper"); // Sposta i controlli del modulo nella casella meta 'Attributi della pagina' e li nasconde default form_controls.insertAfter ('#page_template') .hide (); function displayControls (ptStr, sel) if (ptStr! == pt.val ()) sel.hide (); else sel.toggle () ; // Call on page load displayControls ('page-templates / form-page-template.php', form_controls); // Chiama ogni volta che si sostituiscono le modifiche pt.on ('change', function () displayControls ( this.value, form_controls);););
Non ho intenzione di entrare in un'enorme quantità di dettagli riguardo il JavaScript, ma ecco la panoramica.
Prima memorizziamo un paio di selettori CSS e spostiamo i controlli del modulo di amministrazione su Attributi della pagina meta-box. Quindi, abbiamo a displayControls () funzione che nasconde o visualizza i controlli del modulo a seconda del valore corrente del menu a discesa del modello di pagina. Noi chiamiamo displayControls () al caricamento della pagina, quindi ogni volta che viene modificato il menu a discesa, per essere sicuri di essere sempre sincronizzati.
Con il CSS e il JavaScript aggiunti, i controlli del modello di pagina del modulo vengono ora visualizzati nella meta-box corretta e mostrano solo se il modello di pagina associato è selezionato.
Questo sembra molto meglio ed è molto più intuitivo per l'utente. Poiché le meta box possono essere spostate attorno alle schermate di amministrazione di WordPress, i nostri controlli dinamici del modello di pagina non si sarebbero necessariamente trovati in prossimità del menu a discesa del modello di pagina! Abbiamo risolto questo problema in modo elegante per garantire che i nostri controlli vengano sempre visualizzati direttamente sotto il menu a discesa del modello di pagina!
Post del blog Modello di pagina dinamica
Il nostro modello di pagina dinamico successivo mostra un elenco dei tuoi post del blog più recenti. Ma anziché elencare tutti i post, implementeremo una casella di riepilogo (simile a un menu a discesa) per consentire all'utente di scegliere la categoria di post. Non solo, sarai anche in grado di selezionare multiplo pubblicare categorie.
Inizia aggiungendo una nuova meta-box in add_page_template_meta_boxes ().
E ora abbiamo bisogno di implementare la funzione di callback per rendere la nostra meta-box.
ID, 'blog_category', vero); $ categories = get_categories (); ?> 
 :  % 3 $ s (% 4 $ s)', esc_attr ($ category-> cat_ID), esc_attr (selezionato ($ category-> cat_ID, $ this-> q ($ category-> cat_ID, $ blog_category))), esc_html ($ category-> cat_name), esc_html ( $ category-> category_count)); ?>  
 
Rompiamo questo. Per prima cosa definiamo una variabile per contenere l'elenco delle categorie di post selezionate (se presenti) 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 del modulo, quindi non abbiamo bisogno di usarne un altro qui, dato che siamo sulla stessa pagina di amministrazione.
Quindi eseguiamo il ciclo sopra l'elenco delle categorie del sito, compilando un controllo a discesa mentre procediamo. Qualsiasi categoria precedentemente selezionata viene nuovamente selezionata per mantenere tutto sincronizzato.
Avresti potuto notare, tuttavia, che uno degli argomenti a selezionato() è una chiamata di funzione. Normalmente lo usiamo selezionato() per confrontare due valori per determinare se contrassegnare l'elemento corrente come selezionato. Tuttavia, poiché possiamo selezionare più di una categoria, le nostre impostazioni del database sono sempre una serie di valori (anche se in realtà selezioniamo solo una categoria).
La funzione q () è una funzione di supporto che ci consente di controllare l'elemento della lista corrente rispetto alla serie di categorie salvate.
Per ogni categoria, viene passato l'ID della categoria q () insieme con l'array della categoria salvata. Se la categoria corrente è nell'elenco delle categorie salvate, viene restituita la categoria corrente selezionato() e corrisponderà al primo argomento. Questo causerà selezionato() per contrassegnare la categoria corrente come selezionata. Questo è un modo elegante di gestire più opzioni per un singolo controllo.
Tutto quello che dobbiamo fare ora è l'aggiornamento save_page_template_meta () gestire le categorie di post del blog di salvataggio. Aggiungi questo codice per fare proprio questo.
Ora, dobbiamo creare il modello di pagina dei post del blog. All'interno dei temi del tuo bambino pagina-templates cartella, crea un nuovo file chiamato blog-page-template.php, e aggiungi il seguente codice.
 
 
 
  $ paged, 'cat' => $ cat, 'orderby' => 'date', 'order' => 'DESC', 'post_type' => 'post'); $ blog_posts = new WP_Query ($ query_args); ?> have_posts ()):?> have_posts ()): $ blog_posts-> the_post (); ?>    
 
 
 
L'unica vera differenza dal nostro precedente modello di pagina dinamica è il codice all'interno del 
 Tag HTML, quindi diamo un'occhiata più da vicino a questo ora.
Per prima cosa impostiamo il valore di paging variabile di query, che viene utilizzata per visualizzare post su più pagine, a seconda del numero di pagine restituite dalla nostra query di WordPress. Quindi, otteniamo tutte le categorie selezionate nella meta-box dell'editor di pagina. L'array della categoria viene convertito in una stringa e viene assegnato un valore predefinito se vuoto. Viene quindi creata una nuova query WordPress e i risultati vengono emessi in un ciclo standard.
La cosa fondamentale qui è che siamo in grado di controllare esattamente quali categorie vengono passate all'oggetto query, tramite le selezioni effettuate nella meta-box dell'editor di pagina. 
Tutto quello che dobbiamo fare ora è nascondere la meta box delle categorie del blog e spostare il controllo della lista su Attributi della pagina meta-box. Proprio come abbiamo fatto prima.
Dentro style.css aggiorna gli stili per nascondere la meta box dei post del blog:
# form-page-template-meta-box, # blog-page-template-meta-box display: none; 
Il script.js il file ha bisogno di un po 'più di codice da aggiungere. Ecco il file completamente aggiornato.
jQuery (document) .ready (function ($) var pt = $ ("#page_template"); var form_controls = $ ("#form_pt_wrapper"); var blog_post_controls = $ ("#blog_pt_wrapper"); // Sposta i controlli del modulo alla casella meta 'Attributi della pagina' e nasconderli per impostazione predefinita form_controls.insertAfter ('#pagepage.template') .hide (); blog_post_controls.insertAfter ('#pagepage.template') .hide (); function displayControls (ptStr, sel) if ( ptStr! == pt.val ()) sel.hide (); else sel.toggle (); // Call on page load displayControls ('page-templates / form-page-template.php', form_controls); displayControls ('page-templates / blog-page-template.php', blog_post_controls); // Chiama ogni volta che si eliminano le modifiche pt.on ('change', function () var controls; if (this.value === 'page-templates / form-page-template.php') controls = form_controls; blog_post_controls.hide (); else if (this.value === 'page-templates / blog-page-template.php ') controls = blog_post_controls; form_controls.hide () else // nasconde tutto blog_post_controls.h ide () form_controls.hide ();  displayControls (this.value, controls); ); );
La maggior parte delle modifiche degne di nota sono nel .on ( 'cambiamento') funzione. Poiché ora abbiamo più di un modello di pagina dinamica, dobbiamo testare per vedere quale è stato selezionato dal menu a discesa e quindi passare questo nel selettore di elementi 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 ulteriormente ottimizzato, ma poiché abbiamo solo due modelli di pagina dinamici attivi, fa un buon lavoro per le nostre esigenze.
Con queste modifiche in atto, ora abbiamo due modelli di pagina dinamici funzionanti con ciascuno dei controlli associati visualizzati direttamente sotto il menu a discesa del modello di pagina.
Modelli di pagina per tutti
In precedenza ho accennato a come, in WordPress 4.7+, ora puoi assegnare modelli di pagina a qualunque tipo di post. Prima di WordPress 4.7, è possibile assegnarli solo alle pagine, ma non più!
Tutto quello che devi fare è aggiungere una riga aggiuntiva al blocco dei commenti nell'intestazione del modello di pagina e specificare un elenco separato da virgole di tipi di post che vuoi che il modello di pagina sia disponibile su.
Il nome del tipo di post deve essere uguale a quello inserito quando è stato registrato per la prima volta il tipo di post, altrimenti verrà ignorato.
Pertanto, possiamo visualizzare modelli di pagina per qualsiasi tipo di post, ma per quanto riguarda i modelli di pagina dinamici? Con poche modifiche, anche queste possono essere supportate. Diamo un'occhiata a ciò che è necessario.
Fortunatamente, a parte l'aggiunta di una riga di codice nella parte superiore del modello di pagina, tutte le modifiche necessarie si trovano in un unico file: functions.php.
Innanzitutto, dobbiamo accodare il modello di pagina dinamica CSS e JavaScript non solo sulle pagine, ma per tutti i tipi di post vogliamo supportare modelli di 



		
			
	   
	




Codice