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

Modelli di pagina dinamica in WordPress, Parte 2

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

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

Nella prima parte di questa serie di tutorial ho introdotto i concetti di base dei modelli di pagina dinamici e ho creato un modello di pagina standard come base per sviluppi futuri. Un template child basato sul tema Twenty Seventeen è stato usato per implementare il modello di pagina.

In questo tutorial imparerete qualche cosa in più sui modelli di pagina dinamici e come usarli nei tuoi progetti WordPress.

Vi mostrerò anche passo dopo passo come estendere il modello di pagina del primo tutorial e convertirlo nel tuo primo vero e proprio modello di pagina!

Modelli di pagina dinamica: Un approccio più flessibile

Come possiamo rendere più flessibili i modelli di pagina, e perché questo sarebbe utile?

Diciamo che hai un modello di pagina di portfolio che restituisce una raccolta di elementi individuali. Ogni elemento dovrebbe avere una dimensione fissa, e solo così molti profili potrebbero stare su ogni riga.

Naturalmente potremmo aggiungere un altro modello di pagina per visualizzare descrizioni di diverse dimensioni. Ma cosa accadrebbe se avessimo voluto mostrare portafogli di piccole, medie o grandi dimensioni? Per questo, avremmo bisogno di tre modelli di pagina separati, ognuna con diverse dimensioni per gli elementi del portfolio.

Il tutto può essere reso molto flessibile aggiungendo un controllo drop-down per selezionare le dimensioni del portfolio (piccolo, medio, grande). E' molto più utile per l'utente poiché la casella del modello di pagina è meno confusionaria con scelte inutili.

Ha più senso per lo sviluppatore anche, che ha solo un modello di pagina per mantenere piuttosto che tre! Questo segue il principio di sviluppo di software Don't Repeat Yourself (DRY).

Tutti i modelli di pagina devono essere dinamici?

Vale la pena notare che non ogni modello di pagina necessariamente trarrebbe beneficio dall'essere dinamico. Se si dispone di un modello di pagina che fa una cosa e solo una cosa, allora va bene. Non avrebbe senso aggiungere controlli personalizzati e logica aggiuntiva ad un modello di pagina in questo caso.

Ma, come si vedrà alla fine di questo tutorial, molti modelli di pagina beneficerebbe molto dalla maggiore flessibilità.

Un altro esempio utile per un modello di pagina dinamica sarebbe un modulo di contatto. Ci sono molti controlli personalizzati che potrebbero essere aggiunte per rendere questo modello di pagina più flessibile.

Ad esempio, piuttosto che un insieme fisso di campi form, potrebbero essere aggiunti controlli al modello di pagina per permettere di omettere determinati campi. O forse un campo Captcha potrebbe essere visualizzato facoltativamente per prevenire lo spam? Ci sono così tanti modi in cui è possibile personalizzare un modulo di contatto.

Creeremo un modello di pagina di modulo dinamico nella parte 3 di questa serie di tutorial. Ma prima cominciamo con la creazione di un modello di pagina dinamica di uso generale.

Il nostro primo modello di pagina dinamico

Per cominciare, creeremo un modello di pagina dinamica base per dimostrare come tutti i componenti si incastrano. Controlli personalizzati verranno aggiunti all'editor di pagina che verrà utilizzato in seguito nella visualizzazione del modello di pagina.

I controlli del modello di pagina personalizzata che aggiungeremo sono:

  • Casella di testo
  • Area di testo
  • Casella di controllo
  • Pulsanti di opzione
  • Casella di selezione a discesa

Idealmente, i controlli dovrebbero essere aggiunti direttamente sotto la casella di elenco a discesa del modello di pagina per rendere evidente che sono relativi a un modello di pagina.

Tuttavia, WordPress non fornisce alcun gancio per questo, quindi dovrete(per ora) aggiungere i controlli del modello di pagina personalizzato in un meta box separato. Nella terza parte di questa serie di tutorial, vi mostrerò come aggirare questo problema.

I ganci o hooks sono fondamentali per lo sviluppo di WordPress. Essi consentono agli sviluppatori di estendere la base di codice senza dover ricorrere alla modifica di file di base, che è generalmente considerato una cattiva idea. Questo perché qualsiasi codice personalizzato potrebbe essere rimpiazzato ogni volta che viene eseguito un aggiornamento di WordPress (che può accadere abbastanza regolarmente).

Per visualizzare il nostro meta box sulla schermata di editor di pagina, aggiungere i gangi load-post.php e load-post-new.php al metodo init() del tema child che abbiamo creato nella parte 1.

Usiamo due ganci di WordPress per garantire che il meta box venga visualizzato nell'editor di pagina, sia se stai creando una nuova pagina o modificando una esistente. C'è anche un gancio save_post che gestisce il salvataggio dei meta dati del post, che tratterò in un po ' più avanti.

Aggiungere i seguenti quattro metodi di classe per creare, visualizzare e salvare i dati per il meta box.

Non voglio entrare troppo nel dettaglio qui sui meta box di WordPress, visto che potrebbe essere necessario un tutorial tutto per sé, ma attenzione ai seguenti punti circa il codice che ho aggiunto sopra:

  • I metodi della classe page_template_meta_box() e add_page_template_meta_box() registrano la casella di meta con WordPress.
  • In add_page_template_meta_box(), il parametro 'page' specifica che questa casella meta verrà visualizzata solo per l'editor di tipo 'pagina' in WordPress Admin.
  • Il metodo display_page_template_meta_box() della classe esegue il rendering della casella di meta e consente di impostare un parametro nonce per rendere più sicuri i controlli del form.

Se tutto va bene, ora dovresti vedere un meta box visualizzato nell'editor di pagina, come illustrato di seguito.

A new page meta box

È un po' vuota al momento, però, quindi cerchiamo di aggiungere alcuni controlli.

Aggiunta di controlli personalizzati

Se vi ricordate da prima, stiamo andando ad aggiungere una casella di testo, un'area di testo, una casella di controllo, un pulsante di opzione e una select box al meta box. Iniziamo aggiungendo il seguente codice per il metodo di display_page_template_meta_box() sotto la funzione di nonce.

Questo recupera i valori correnti dei nostri controlli del meta box e li memorizza nelle variabili locali. Ora aggiungiamo il seguente codice HTML direttamente dopo, per eseguire il rendering dei controlli del meta box.

Ogni controllo è contenuto all'interno di un tag di paragrafo e il valore corrente viene aggiornato tramite la variabile locale che abbiamo creato in precedenza. Questo assicura che i controlli del meta box visualizzino sempre le impostazioni corrette.

Tuttavia, questo non accadrà se non salviamo i dati correnti del meta box nel database di WordPress.

Un po' prima, ho registrato un gancio per eseguire un metodo di classe ogni volta che l'editor di pagina è stato aggiornato. Aggiungiamo quel metodo alla nostra classe del tema child ora.

Il metodo della classe save_page_template_meta() gestisce il salvataggio dati del meta box. Salva i meta dati solo se il parametro nonce è verificato, gli utenti possono modificare i messaggi e siamo sulla schermata admin pagina editor.

Se tali condizioni sono soddisfatte, allora estraiamo i dati per ogni controllo che viene memorizzato nella variabile globale $_POST. Questa variabile viene impostata ogni volta che viene inviato un modulo.

Infine, i dati del meta box vengono salvati nel database di WordPress come meta-dati per la pagina corrente.

Con i controlli del modello di pagina personalizzato aggiunti, il nostro meta box dovrebbe assomigliare a questo.

Adding controls to the meta box

Immettete un testo per la casella di testo e textarea e selezionate una casella di controllo, un pulsante di opzione e fate una scelta dalla casella a discesa. Cliccate Aggiorna per salvare le modifiche, e quando l'editor di pagina viene ricaricata, i controlli casella di meta dovrebbero mostrare i dati che avete appena inserito.

Populating the meta box

Il codice sorgente completo per il file functions.php del tema child è mostrato di seguito.

L'ultimo pezzo del puzzle è quello di utilizzare i dati del meta box nel nostro modello di pagina sul front-end. Aprite il file di test-page-template.php che abbiamo creato nella parte 1 e sostituite il contenuto con questo codice aggiornato.

Assicuratevi che il 'modello di pagina di Test' è il modello di pagina attualmente selezionato e visualizzate la pagina sul front-end.

Viewing the output of the meta box

Come potete vedere, il modello di pagina include ora i valori impostati solo per i controlli meta box dell'editor di pagina. Questo è fondamentale per il resto del tutorial che creeremo su questo esempio e creeremo vari esempi di modelli di pagina dinamica che è possibile utilizzare nei vostri progetti di WordPress di lavoro.

Conclusione

In questo tutorial abbiamo visto come creare un modello di pagina dinamico perfettamente funzionante. Al momento, anche se già funzionante, il nostro modello di pagina non è molto utile.

Nella terza ed ultima parte di questa serie di tutorial, vi mostrerò come creare diversi modelli di pagina dinamici, dall'inizio alla fine, che potrete usare(ed espandere) nei vostri progetti WordPress.

Se avete domande lasciatemi un messaggio nei commenti sottostanti. Mi piacerebbe conoscere le vostre opinioni riguardo il tutorial.

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.