Come aggiungere campi personalizzati ai post di WordPress

In questo articolo tratteremo l’argomento dei campi personalizzati nei post di WordPress e come aggiungerli senza installare nuovi plugin.

I campi personalizzati consentono di aggiungere contenuti o più precisamente metadati, ad un post di WordPress.

Facciamo un esempio concreto. Poniamo il caso di dover gestire un blog di eventi, potremmo avere la necessità di campi dove inserire Data evento, Posizione, Prezzo ed in questo caso possono essere di aiuto proprio i campi personalizzati.
Ovviamente, come per qualsiasi altra necessità, in WordPress c’è sempre un plugin che può venire in aiuto, ma la nostra politica è di evitare di installare l’ennesimo plugin quando è possibile. Quindi se c’è una soluzione nativa, perché non sfruttarla?

Come aggiungere campi personalizzati ai post di WordPress in 2 step

Abilitare i campi personalizzati ed inserimento contenuti – 1° step
Come al solito, prima di apportare modifiche sostanziali al sito, è sempre consigliabile effettuare un backup dei file e del database. Inoltre, se non è già stato fatto, consigliamo di creare un tema child ed attivarlo.

Iniziamo con abilitare i campi personalizzati nei post di WordPress che di solito sono disabilitati di default. Procediamo così:
Aggiungiamo un nuovo articolo o apriamone uno presente e, nelle Opzioni (si abilitano cliccando sui 3 puntini verticali in alto a destra), troviamo la voce Preferenze e cliccandoci sopra si aprirà una finestra come questa:

A questo punto nel Tab “Pannelli” troviamo lo switch per abilitare i Campi personalizzati, quindi cliccare su Abilita e ricarica.

Fatto ciò, nel post troviamo la sezione per aggiungere i campi personalizzati

Ora poniamo il caso che utilizziamo i campi personalizzati per consigliare un libro di approfondimento sull’argomento trattato nell’articolo, di conseguenza nel campo a sinistra inseriamo il Nome (chiave) che servirà per essere richiamato nel post e nel campo destro il Valore (il titolo del libro). Cliccare su Aggiungi campo personalizzato.

Ora che abbiamo aggiunto i metadati per l’articolo, dobbiamo visualizzarli nel frontend e nel 2° step vediamo come fare.

Visualizzazione dei campi personalizzati nell’articolo – 2° step

Questa parte è leggermente più tecnica rispetto allo step precedente, infatti dobbiamo apportare modifiche al tema utilizzato in WordPress ed è fortemente consigliato farlo solo se è stato abilitato il tema child che, come trattato in questo articolo, ci consente di modificare i file del tema senza sovrascrivere le modifiche in caso di aggiornamenti dello stesso.

Il file da modificare per richiamare i campi personalizzati è quello che si occupa di far visualizzare gli articoli del proprio tema, di solito si chiama single.php o content-single.php e si trova nella directory principale del tema.
A volte, in base al tema, può avere altri nomi ed essere posizionato in altre directory.

Quindi facciamo una copia del file predisposto alla visualizzazione degli articoli ed inseriamolo nella directory del tema child, utilizzando un client FTP.

Nel nostro caso, utilizzando il tema “Twenty Twenty” predefinito di WordPress, la procedura è leggermente diversa. In questo tema infatti il file da modificare si chiama content.php e si trova nella directory “template-parts“. Quindi andremo a creare, nella directory del tema child, una directory con lo stesso nome (template-parts) ed all’interno copiamo il file content.php

Ora apriamo il file da modificare, nel nostro caso content.php, ed inseriamo il codice per far visualizzare il campo personalizzato, subito dopo la sezione in cui avviene l’inserimento del contenuto generico del post, che è identificato con la stringa the_content.
Il codice da inserire è questo:

/** Codice visualizzazione campi personalizzati */
<?php
   $libro = get_post_meta($post->ID, 'Libro', true);
   if ($libro) { ?>
  <p>Libro consigliato: <strong><?php echo $libro; ?></strong></p>
  <?php
                   } else {
     // do nothing;
                            }
 ?>
/** Fine codice visualizzazione campi personalizzati */

Quindi, come dicevamo, è da inserire dopo questo codice:

 <?php
   if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) {
   the_excerpt();
      } else {
      the_content( __( 'Continue reading', 'twentytwenty' ) );
                }
?>

Per ottenere questo:

 <?php
   if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) {
   the_excerpt();
      } else {
      the_content( __( 'Continue reading', 'twentytwenty' ) );
                }
?>
/** Codice visualizzazione campi personalizzati */
<?php
   $libro = get_post_meta($post->ID, 'Libro', true);
   if ($libro) { ?>
  <p>Libro consigliato: <strong><?php echo $libro; ?></strong></p>
  <?php
                   } else {
     // do nothing;
                            }
 ?>
/** Fine codice visualizzazione campi personalizzati */

Ora se abbiamo fatto tutto correttamente il risultato finale dell’articolo con il campo personalizzato è questo.

Hai bisogno di una competente e professionale Web Agency per la realizzazione di un sito web con WordPress?
Contattaci e parliamone.