Accentsconagua
Area di testo: ". $ Textarea."
"; eco "Casella di controllo: ". $ Checkbox".
"; eco "Pulsanti radio: ". $ Radio".
"; eco "Menu a discesa: ". $ Seleziona".
"; eco "Mappa del sito
"; eco "- msg_list_pages (array ('title_li' => ")). "
Share
Nella parte 1 di questa serie di tutorial ho introdotto il concetto di base dei modelli di pagina dinamici e creato un modello di pagina standard come base per il lavoro futuro. Per implementare il modello di pagina è stato utilizzato un tema figlio WordPress basato sul tema principale di Twenty Seventeen.
In questo tutorial, imparerai dettagli più specifici sui modelli di pagina dinamici e su come utilizzarli nei tuoi progetti WordPress.
Ti mostrerò anche passo dopo passo come estendere il modello di pagina dal primo tutorial e trasformarlo nel tuo primo modello di pagina dinamica funzionante!
Quindi, come possiamo rendere i modelli di pagina più flessibili e perché sarebbe utile comunque?
Supponiamo che tu disponga di un modello di pagina del portfolio che genera una galleria di singoli elementi del portfolio. Ogni articolo sarebbe di dimensioni fisse e solo così tanti potrebbero essere contenuti in ogni riga.
Potremmo, naturalmente, aggiungere un altro modello di pagina per visualizzare portafogli di dimensioni diverse. Ma se volessimo mostrare portafogli di piccole, medie o grandi dimensioni? Per questo, avremmo bisogno di tre modelli di pagina separati, ciascuno con dimensioni diverse per gli elementi del portfolio.
Ciò potrebbe essere reso immediatamente più flessibile aggiungendo un controllo a discesa per selezionare le dimensioni del portfolio (ad esempio Piccolo, Medio o Grande). Questo è più conveniente per l'utente in quanto il riquadro del modello di pagina è meno ingombrante di scelte non necessarie.
Ha più senso anche per lo sviluppatore, che ha solo un modello di pagina da gestire anziché tre! Questo segue il principio di sviluppo del software Do not Repeat Yourself (DRY).
Vale la pena notare che non tutti i modelli di pagina necessariamente trarrebbero vantaggio dall'essere dinamici. Se hai un modello di pagina che fa una cosa e solo una cosa, allora va bene. In questo caso, non avrebbe senso aggiungere controlli personalizzati e logica aggiuntiva a un modello di pagina.
Ma, come vedrai alla fine di questo tutorial, molti modelli di pagina trarrebbero grandi benefici dall'essere più flessibili.
Un altro utile esempio per un modello di pagina dinamico sarebbe un modulo di contatto. Esistono molti controlli personalizzati che possono essere aggiunti per rendere questo modello di pagina altamente flessibile.
Ad esempio, anziché generare un set fisso di campi modulo, è possibile aggiungere controlli del modello di pagina per consentire di omettere determinati campi. O forse potrebbe essere visualizzato facoltativamente un campo Captcha per prevenire l'invio di moduli spam? Ci sono così tanti modi in cui puoi personalizzare un modulo di contatto.
Creerò un modello di pagina di modulo dinamico nella parte 3 di questa serie di tutorial. Ma prima iniziamo con la creazione di un modello di pagina dinamica generico.
Per cominciare, creeremo un modello di pagina dinamica di base per dimostrare come tutte le parti dei componenti combaciano. I controlli personalizzati verranno aggiunti all'editor di pagine che verrà utilizzato in seguito per controllare l'output del modello di pagina.
I controlli del modello di pagina personalizzato che aggiungeremo a breve sono:
Idealmente, i controlli dovrebbero essere aggiunti direttamente sotto la casella a discesa del modello di pagina per rendere evidente che sono correlati a un modello di pagina.
Tuttavia, WordPress non fornisce alcun hook per questo, quindi dovrai fare (per ora) con l'aggiunta di controlli personalizzati per i modelli di pagina a una meta-box personalizzata separata. Nella terza parte di questa serie di tutorial, ti mostrerò come risolvere questo problema.
Gli hook sono fondamentali per lo sviluppo di WordPress. Consentono agli sviluppatori di estendere il codice base senza dover ricorrere alla modifica dei file core, che in genere è considerato una cattiva idea. Questo perché qualsiasi codice personalizzato verrebbe cancellato ogni volta che viene eseguito un aggiornamento di WordPress (cosa che può accadere abbastanza regolarmente).
Per visualizzare la nostra meta-box nella schermata dell'editor di pagine, aggiungi il carico-post.php e carico-post-new.php aggancia al tema figlio dentro() metodo che abbiamo creato nella parte 1.
Utilizziamo due hook di WordPress per garantire la visualizzazione del meta box sull'editor di pagina, sia che tu stia creando una nuova pagina o modificando una pagina esistente. C'è anche un
save_posthook che gestisce il salvataggio dei metadati dei post, che tratteremo un po 'più avanti.Aggiungi i seguenti quattro metodi di classe per creare, visualizzare e salvare i dati per la meta-scatola.
/ * Aggiungi il gancio della meta-box. * / public function page_template_meta_box () add_action ('add_meta_boxes', array ($ this, 'add_page_template_meta_box'));/ * Registra meta-box. * / public function add_page_template_meta_box () add_meta_box ('page-template-meta-box', esc_html __ ('Meta template template di pagina', 'twenty-diciassette-child'), array ($ this, 'display_page_template_meta_box'), 'page ',' side ',' default ');/ * Render metabox sull'editor di pagina. * / public function display_page_template_meta_box ($ object) wp_nonce_field (basename (__FILE__), 'page_template_meta_box_nonce');Non entrerò troppo nei dettagli qui sulle meta box di WordPress, poiché potrebbe trattarsi di un intero tutorial a parte, ma osservate i seguenti punti sul codice che ho aggiunto sopra:
page_template_meta_box () e add_page_template_meta_box () i metodi di classe registrano la meta-scatola con WordPress.add_page_template_meta_box (), il 'pagina' parametro specifica che questa meta-box verrà visualizzata solo nell'editor del tipo di post "pagina" nell'amministratore di WordPress.display_page_template_meta_box () il metodo class rende la meta-box e imposta un nonce per rendere i controlli del form più sicuri.Se tutto va bene, ora dovresti avere una meta-box visualizzata nell'editor della pagina, come mostrato di seguito.
Al momento è un po 'vuoto, quindi aggiungiamo alcuni controlli.
Se ti ricorderai da sopra, aggiungeremo una casella di testo, un'area di testo, una casella di controllo, un pulsante di opzione e i controlli della casella di selezione alla meta-scatola. Inizia aggiungendo il seguente codice al display_page_template_meta_box () metodo sotto la funzione nonce.
ID, 'page_template_text', true); $ textarea = get_post_meta ($ object-> ID, 'page_template_textarea', true); $ checkbox = get_post_meta ($ object-> ID, 'page_template_chk', true); $ radio = get_post_meta ($ object-> ID, 'page_template_radio', true); $ select = get_post_meta ($ object-> ID, 'page_template_select', true);
Questo recupera i valori correnti dei nostri controlli di meta box e li memorizza in variabili locali. Ora aggiungi subito dopo il seguente codice HTML, per eseguire il rendering dei controlli della meta box.
?>
/>
>
>
>
Ogni controllo è contenuto in un tag di paragrafo e il suo valore corrente viene aggiornato tramite la variabile locale creata in precedenza. Ciò garantisce che i controlli di meta box visualizzino sempre le impostazioni corrette.
Tuttavia, ciò non accadrà se non salviamo i dati di controllo del meta box corrente nel database di WordPress.
Poco prima, ho registrato un hook per eseguire un metodo di classe ogni volta che l'editor della pagina veniva aggiornato. Aggiungiamo questo metodo alla nostra classe tematica figlio ora.
post_type) return $ post_id; $ page_template_text_value = isset ($ _POST ['page-template-text'])? $ _POST ['page-template-text']: "; update_post_meta ($ post_id, 'page_template_text', $ page_template_text_value); $ page_template_textarea_value = isset ($ _POST ['page-template-textarea'])? $ _POST ['page -template-textarea ']: "; update_post_meta ($ post_id, 'page_template_textarea', $ page_template_textarea_value); $ page_template_chk_value = isset ($ _POST ['page-template-chk'])? $ _POST ['page-template-chk']: "; update_post_meta ($ post_id, 'page_template_chk', $ page_template_chk_value); $ page_template_radio_value = isset ($ _POST ['page-template-align'])? $ _POST ['page -template-align ']: "; update_post_meta ($ post_id, 'page_template_radio', $ page_template_radio_value); $ page_template_select_value = isset ($ _POST ['page-template-select'])? $ _POST ['page-template-select']: "; update_post_meta ($ post_id, 'page_template_select', $ page_template_select_value);Il
save_page_template_meta ()il metodo di classe gestisce il salvataggio dei dati di controllo del meta-box. Salva solo i dati del meta-box se il nonce è verificato, gli utenti attuali possono modificare i post e siamo nella schermata di amministrazione dell'editor di pagine.Se tali condizioni sono soddisfatte, estraiamo i dati per ciascun controllo che è memorizzato nel globale
$ _POSTvariabile. Questa variabile viene impostata ogni volta che un modulo viene inviato.Infine, i dati di controllo del meta-box vengono salvati nel database di WordPress come metadati per la pagina corrente.
Con i controlli del modello di pagina personalizzati aggiunti, la nostra meta-scatola dovrebbe apparire così.
Immettere del testo per la casella di testo e la textarea e selezionare le opzioni per la casella di controllo, il pulsante di opzione e la casella di selezione. Fai clic su Aggiorna per salvare le modifiche e quando l'editor di pagine viene ricaricato, i controlli del metatag devono mostrare i dati appena immessi.
Di seguito è riportato il codice sorgente completo per il file functions.php del tema figlio.
ID, 'page_template_text', true); $ textarea = get_post_meta ($ object-> ID, 'page_template_textarea', true); $ checkbox = get_post_meta ($ object-> ID, 'page_template_chk', true); $ radio = get_post_meta ($ object-> ID, 'page_template_radio', true); $ select = get_post_meta ($ object-> ID, 'page_template_select', true); ?>post_type) return $ post_id; $ page_template_text_value = isset ($ _POST ['page-template-text'])? $ _POST ['page-template-text']: "; update_post_meta ($ post_id, 'page_template_text', $ page_template_text_value); $ page_template_textarea_value = isset ($ _POST ['page-template-textarea'])? $ _POST ['page -template-textarea ']: "; update_post_meta ($ post_id, 'page_template_textarea', $ page_template_textarea_value); $ page_template_chk_value = isset ($ _POST ['page-template-chk'])? $ _POST ['page-template-chk']: "; update_post_meta ($ post_id, 'page_template_chk', $ page_template_chk_value); $ page_template_radio_value = isset ($ _POST ['page-template-align'])? $ _POST ['page -template-align ']: "; update_post_meta ($ post_id, 'page_template_radio', $ page_template_radio_value); $ page_template_select_value = isset ($ _POST ['page-template-select'])? $ _POST ['page-template-select']: "; update_post_meta ($ post_id, 'page_template_select', $ page_template_select_value) $ ts_child_theme = new DPT_Twenty_Seventeen_Child (); $ ts_child_theme-> init ();
/>
>
>
>
L'ultimo tassello del puzzle consiste nell'usare i dati di controllo del meta-box nel nostro modello di pagina sul front-end. Apri il
test-page-template.phpfile che abbiamo creato nella parte 1 e sostituire il contenuto con questo codice aggiornato.Casella di testo: ". $ Text.""; eco " Area di testo: ". $ Textarea."
"; eco "Casella di controllo: ". $ Checkbox".
"; eco "Pulsanti radio: ". $ Radio".
"; eco "Menu a discesa: ". $ Seleziona".
"; eco "Mappa del sito
"; eco "msg_list_pages (array ('title_li' => ")). "
"; endwhile; // End of the loop.?>Assicurati che il 'Modello pagina di prova' sia il modello di pagina attualmente selezionato e visualizzi la pagina sul front-end.
Come puoi vedere, il modello di pagina ora include i valori appena impostati per i controlli di meta box sull'editor di pagine. Questo è il fulcro del resto del tutorial poiché creeremo su questo esempio di base e creeremo vari esempi di modelli di pagina dinamici pienamente funzionanti che puoi utilizzare nei tuoi progetti WordPress.
Conclusione
In questo tutorial, abbiamo spiegato come costruire un modello di pagina dinamica funzionante. Al momento, anche se funzionale, il nostro modello di pagina di base non è molto utile.
Nella terza e ultima parte di questa serie di tutorial, ti mostrerò come creare vari modelli di pagine dinamiche, dall'inizio alla fine, che puoi utilizzare (ed espandere) nei tuoi progetti WordPress.
Se avete domande, per favore lasciatemi un messaggio nei commenti qui sotto. Mi piacerebbe sentire i tuoi pensieri sul tutorial.
