Come creare e utilizzare campi personalizzati in WordPress

I campi personalizzati di WordPress sono un ottimo modo per espandere il tipico contenuto di post o pagina sul tuo sito. Sono parti di metadati allegate a un post o a una pagina del tuo sito WordPress, il che significa che utilizzando questo metodo puoi aggiungere ulteriori informazioni di qualsiasi tipo ai tuoi contenuti.

Organizzati in un formato chiave/valore, i campi personalizzati vengono utilizzati per aggiungere dati su più post o pagine. La chiave è un nome che fornisce coerenza e identifica il campo specifico, ad esempio "Articolo". Questo è sempre lo stesso. Un valore è l'informazione che verrà visualizzata nel campo. Il valore sarà diverso tra i post, a seconda delle informazioni inserite.

Aggiunta di campi personalizzati al post

I seguenti passaggi ti mostreranno come utilizzare i campi personalizzati nei tuoi post. Se preferisci usarli sulle pagine, si applicheranno le stesse idee ma dovranno essere implementate nei file modello che sono responsabili della creazione delle pagine piuttosto che dei post.

1. Vai alla schermata dell'editor dei post e seleziona "Campi personalizzati".

2. Trova la casella Campi personalizzati come parte della modifica del post. Quando ti trovi su una pagina di post, vedrai una nuova sezione in fondo con l'intestazione "Campi personalizzati".

Ora diamo un'occhiata a un esempio molto semplice di campi personalizzati di WordPress in azione. Le cose prenderanno forma con questo esempio per un blog di fitness. Utilizzeremo i campi personalizzati per tracciare ed elencare vari tipi di attività fisica sui post.

3. Aggiungi la chiave, che in questo caso è "Tipo di esercizio". Useremo questa casella per aggiungere dettagli specifici al post. Fare clic su "Inserisci nuovo" e digitare la chiave nel campo.

4. Aggiungere il valore. Andiamo con Zumba per questo. Tieni presente che questo verrà visualizzato solo in questo post specifico. In un post diverso, puoi inserire un valore diverso, qualcosa come "Ellittica" o un altro tipo di esercizio.

5. Salva il post.

In questo momento, in realtà non vedrai molto. È comunque necessario aggiungere un po' di formattazione per visualizzare le informazioni. Finora, queste informazioni aggiuntive sono memorizzate nel database, quindi possono essere richiamate per essere visualizzate. Per questo tutorial, ho scelto di visualizzare questi campi personalizzati sui post (invece che sulle pagine), quindi seguirò il modo più semplice per formattare tutto.

Visualizzazione dei campi personalizzati sul post

L'utilizzo delle modifiche al modello per aggiungere i campi personalizzati come dati ricorrenti del sito è un modo efficiente di procedere. Diciamo che inizi visualizzando i campi personalizzati all'inizio del tuo post, ma in seguito decidi che avrebbe un aspetto migliore in fondo. Utilizzando le modifiche al modello, tale modifica è facile da eseguire perché la modifica del modello aggiornerà l'intero sito. Se non hai utilizzato questo metodo e invece hai salvato le informazioni individualmente all'interno di ogni post, dovresti modificare ogni singolo post per apportare la modifica, rendendo le modifiche molto più difficili.

Per questo esempio, il campo personalizzato verrà mostrato prima del post in modo che il lettore possa vedere il tipo di esercizio giusto prima di leggere l'intero post. Per visualizzarlo in questo modo, i dati verranno richiamati prima del ciclo di WordPress.

Nota: queste personalizzazioni dovrebbero essere fatte in un tema child ovviamente, e useremo il file single.php . Come sempre, le personalizzazioni come queste vengono testate al meglio in un ambiente di sviluppo.

1. Apri il file single.php e aggiungi questo codice al di fuori del ciclo di WordPress:

 <?php the_meta(); ?>

Visualizzerà qualcosa del genere:

Se preferisci che venga visualizzato da qualche altra parte nella pagina, prova a posizionare lo snippet nel ciclo o dopo il ciclo. Ad esempio, inserendo la funzione all'interno del tag <main> , le informazioni del campo personalizzato verranno visualizzate come parte del contenuto principale.

 <div class="content-area"> <main class="site-main" role="main">

Questo approccio funzionerà per mostrare anche altri campi personalizzati che hai creato.

Una cosa da menzionare su questo esempio: il tema figlio è stato creato dal tema principale WordPress Twenty Fifteen, che è molto popolare. Se stai sperimentando dove visualizzare i campi personalizzati, potrebbero esserci altri modelli di cui hai bisogno nel tema figlio oltre al file single.php . Per mostrare le informazioni nel post, è stato aggiunto un content.php al child theme. Lo snippet sopra è stato inserito nel contenuto della pagina in modo che apparisse come parte del post.

2. Dai uno stile ai campi. Se vai all'ispettore, vedrai alcune nuove classi aggiunte alla pagina.

Ecco come appare l'esempio con i due diversi campi personalizzati:

• Tipo di esercizio: Zumba
• Ora del giorno: mattina

È piuttosto semplice lavorare con una lista. Con un po' di stile, sembrerà più integrato con lo stile del sito. Con solo un paio di semplici modifiche CSS, possiamo regolare il colore del testo e lo stile dell'elenco.

 ul.post-meta li { color: #898989; list-style-type: none; } ul.post-meta li span.post-meta-key { color: #1fc3d2; font-weight: bold; }

Altre personalizzazioni dei campi personalizzati

Lo stile nell'esempio precedente funzionerà bene, ma c'è di più che facciamo. I seguenti esempi ti mostreranno come i campi personalizzati possono essere regolati con opzioni di visualizzazione aggiuntive per casi d'uso specifici. Far leggere il campo personalizzato come parte del post e impostare il contesto con un titolo utile sarà un'ottima aggiunta al post. Se stai seguendo passo dopo passo, assicurati di commentare il <?php the_meta(); ?> <?php the_meta(); ?> che hai aggiunto nell'esempio precedente.

Per questo esempio, le cose sono state leggermente modificate. La chiave è stata semplificata in "esercizi" in modo che possa essere aggiunta più facilmente al modello e lo snippet di codice è stato aggiunto nel file content.php del tema figlio in modo che appaia nel contenuto del post, invece che prima o dopo .

 <?php $exercises = get_post_meta($post->ID, 'exercises', false); ?> <h3>Today's exercise:</h3> <ul> <?php foreach($exercises as $exercise) { echo '<li>'.$exercise.'</li>'; } ?> </ul>

Il campo personalizzato è ora mostrato sotto l'intestazione che recita "Esercizio di oggi:" in un formato elenco. Questo è stato impostato come <h3> ma può essere facilmente regolato per essere un altro stile di intestazione o paragrafo. Se non lo vuoi in formato elenco, anche questo può essere strutturato come preferisci.

Personalizzato condizionale

Campi

Potrebbero esserci momenti in cui il campo personalizzato non è incluso. Supponiamo, ad esempio, che ci sia un post senza un valore di esercizio. Ciò ti consentirà di visualizzare le informazioni di fallback, quindi non è solo lasciato vuoto.

 <?php $exercises = get_post_meta($post->ID, 'exercises', true); ?> <h3>Today's exercise:</h3> <ul> <?php if ($exercises) { ?> <?php echo '<li>' .$exercises. '</li>'; ?> <?php } //if there is nothing for exercises then display else { ?> <li>Today was a rest day.</li>

Il plug-in Campi personalizzati avanzati

Seguendo questo tutorial, puoi facilmente rendere operativi i campi personalizzati. Se preferisci utilizzare un plug-in per aggiungere campi personalizzati, tuttavia, sono disponibili anche opzioni per questo. Campi personalizzati avanzati è un'opzione molto popolare. Questo sostituisce l'interfaccia dei campi personalizzati predefinita in WordPress. Il prodotto finale creato da questo tutorial potrebbe anche essere creato con questo plugin.

Gruppi di campo

Il plug-in Advanced Custom Fields consente i gruppi di campi, che vale la pena menzionare perché sono strettamente correlati al tutorial precedente. Essenzialmente, abbiamo creato una versione molto semplice di un mini gruppo sul campo. I gruppi Campi personalizzati avanzati contengono campi personalizzati, regole di posizione e opzioni di visualizzazione. Ogni gruppo di campi utilizzerà le proprie regole di posizione per visualizzare i campi quando necessario, nella posizione corretta. Come il modo manuale di fare le cose, queste opzioni di visualizzazione ti consentono di personalizzare la pagina come preferisci. Ci sono molti gruppi di campi tra cui scegliere con questo plugin.

Questo graffia a malapena la superficie di ciò che può essere fatto con questo plugin. Per avere un quadro completo, assicurati di visitare il sito web Advanced Custom Fields.

I campi personalizzati sono una funzionalità pronta all'uso di WordPress. Apportando solo alcune modifiche al modello, puoi facilmente aggiungere questa funzionalità al tuo sito web. Questi passaggi riguardano le nozioni di base e, con un po' di sperimentazione, avrai una chiara comprensione di come implementare i campi personalizzati. Quando pianifichi il tuo prossimo progetto, assicurati di considerare la flessibilità offerta dai campi personalizzati. Possono ospitare vari tipi di contenuto, semplificando al contempo le modifiche a livello di sito.