Campi personalizzati di WordPress 101: suggerimenti, trucchi e hack

Stai cercando di ottenere il massimo dai campi personalizzati sul tuo sito Web WordPress?

I campi personalizzati sono una pratica funzionalità di WordPress che ti consente di aggiungere dati e informazioni extra ai tuoi post e alle tue pagine WordPress. Molti plugin e temi WordPress popolari utilizzano campi personalizzati per memorizzare dati importanti.

In questo articolo, ti mostreremo come utilizzare i campi personalizzati di WordPress con alcuni suggerimenti, trucchi e hack.

Poiché si tratta di un articolo lungo, abbiamo aggiunto un sommario per facilitare la navigazione. Basta utilizzare i collegamenti rapidi di seguito per passare alla sezione che si desidera leggere:

Cosa sono i campi personalizzati di WordPress?

I campi personalizzati di WordPress sono metadati utilizzati per aggiungere ulteriori informazioni al post o alla pagina che stai modificando.

Per impostazione predefinita, quando scrivi un nuovo post, una pagina o qualsiasi altro tipo di contenuto, WordPress salva quel contenuto in due parti diverse.

La prima parte è il corpo del tuo contenuto che aggiungi utilizzando l'editor di contenuti di WordPress.

La seconda parte sono le informazioni su quel contenuto. Ad esempio, titolo, autore, data, ora e altro. Queste informazioni sono chiamate metadati.

Un sito Web WordPress aggiunge automaticamente tutti i metadati richiesti a ogni post o pagina che crei. Puoi anche creare e archiviare i tuoi metadati utilizzando campi personalizzati.

Per impostazione predefinita, l'opzione dei campi personalizzati è nascosta nella schermata di modifica post. Per visualizzarlo, devi fare clic sul menu a tre punti nell'angolo in alto a destra dello schermo e selezionare "Preferenze" dal menu.

Si aprirà un popup in cui è necessario passare alla scheda "Pannelli" e quindi abilitare l'opzione "Campi personalizzati".

Successivamente, fai semplicemente clic sul pulsante "Abilita e ricarica" ​​per ricaricare l'editor dei post.

L'editor dei post verrà ricaricato e potrai vedere il pannello Campi personalizzati sotto l'editor dei contenuti.

I campi personalizzati possono essere utilizzati per aggiungere qualsiasi informazione relativa al post, alla pagina o ad altro tipo di contenuto. Queste meta informazioni possono quindi essere visualizzate nel tuo tema.

Tuttavia, per farlo, dovrai modificare i file del tema WordPress.

Detto questo, diamo un'occhiata a come aggiungere e utilizzare campi personalizzati in WordPress.

Aggiunta di campi personalizzati in WordPress

Innanzitutto, devi aprire un post o una pagina nell'editor di blocchi in modo da poter aggiungere campi personalizzati. Quindi, devi andare alla meta box Campi personalizzati.

Successivamente, devi fornire un nome per il tuo campo personalizzato e quindi inserire il suo valore. Fare clic sul pulsante "Aggiungi campo personalizzato" per salvarlo.

Il campo verrà archiviato e visualizzato nella meta box Campi personalizzati in questo modo:

Puoi modificare questo campo personalizzato ogni volta che vuoi e quindi fare clic sul pulsante "Aggiorna" per salvare le modifiche. Puoi anche eliminarlo se non vuoi più usarlo.

Ora devi salvare il tuo post per memorizzare le impostazioni del campo personalizzato.

Visualizzazione di campi personalizzati nei temi di WordPress

Per visualizzare il tuo campo personalizzato sul tuo sito web, dovrai modificare i file del tema WordPress e i frammenti di codice.

Non consigliamo di modificare direttamente i file del tema perché il minimo errore può danneggiare il tuo sito web. Un modo più semplice per farlo è usare WPCode.

È il miglior plug-in di frammenti di codice per WordPress che ti consente di aggiungere codice personalizzato e gestire frammenti dalla dashboard di WordPress.

Se non l'hai mai fatto prima, ti consigliamo anche di leggere la nostra guida su come copiare e incollare codice in WordPress.

Innanzitutto, dovrai installare e attivare il plug-in WPCode gratuito. Per maggiori dettagli, consulta la nostra guida per principianti su come installare un plugin per WordPress.

Dopo l'attivazione, dovrai andare su Code Snippets »+ Add Snippet dalla dashboard di WordPress e selezionare l'opzione 'Add Your Custom Code (New Snippet)'.

Ora devi copiare questo codice da aggiungere ai tuoi file del tema:

<?php echo get_post_meta($post->ID, 'key', true); ?>

Non dimenticare di sostituire key con il nome del tuo campo personalizzato.

Successivamente, devi inserire il codice nell'area "Anteprima codice" e modificare il tipo di codice in "Snippet PHP".

Ad esempio, abbiamo utilizzato questo codice nel nostro tema demo:

<p>Today's Mood: <?php echo get_post_meta($post->ID, 'Mood', true); ?></p>

Da qui, puoi scorrere verso il basso fino alla sezione Inserimento.

Qui puoi selezionare dove verrà eseguito il codice. Per impostazione predefinita, WPCode inserirà automaticamente il codice e lo eseguirà ovunque sul tuo sito web.

Tuttavia, puoi modificarlo e selezionare dove desideri che appaia il campo personalizzato.

Ad esempio, sceglieremo la scheda "Pagina specifica" e selezioneremo l'opzione "Inserisci prima del post". In questo modo, il campo personalizzato apparirà all'inizio del post del blog.

Ora puoi salvare le modifiche e visitare il post in cui hai aggiunto il campo personalizzato per vederlo in azione.

Puoi utilizzare questo campo personalizzato anche in tutti gli altri post del tuo blog WordPress.

Puoi anche regolare facilmente il campo personalizzato per diversi post del blog. Basta creare un nuovo post o modificarne uno esistente.

Quindi, vai alla meta box Campi personalizzati e seleziona il tuo campo personalizzato dal menu a discesa e inserisci il suo valore.

Al termine, fai semplicemente clic sul pulsante "Aggiungi campo personalizzato" per salvare le modifiche e quindi pubblicare o aggiornare il tuo post.

Risoluzione dei problemi: impossibile trovare il campo personalizzato nel menu a discesa nella schermata Modifica post

Per impostazione predefinita, WordPress carica solo 30 campi personalizzati nel menu a discesa nella schermata di modifica del post.

Se utilizzi temi e plug-in di WordPress che utilizzano già campi personalizzati, questi potrebbero apparire per primi nel menu a discesa e non sarai in grado di vedere il campo personalizzato appena creato.

Per risolvere questo problema, dovrai aggiungere il seguente codice al file functions.php del tuo tema o utilizzando WPCode (consigliato):

add_filter( 'postmeta_form_limit', 'meta_limit_increase' );
function meta_limit_increase( $limit ) 
    return 50;

Il codice sopra cambierà tale limite a 50. Se ancora non riesci a vedere il tuo campo personalizzato, puoi provare ad aumentare ulteriormente tale limite.

Creazione di un'interfaccia utente per campi personalizzati utilizzando campi personalizzati avanzati

Come puoi vedere, una volta aggiunto un campo personalizzato, dovrai selezionare il campo e inserire il suo valore ogni volta che scrivi un post.

Se hai molti campi personalizzati di WordPress o più autori che scrivono sul tuo sito web, questa non è una soluzione ideale.

Non sarebbe bello se potessi creare un'interfaccia utente in cui gli utenti possono compilare un modulo per aggiungere valori ai tuoi campi personalizzati?

In effetti, questo è ciò che fanno già così tanti famosi plugin di WordPress.

Ad esempio, la casella del titolo SEO e della meta descrizione all'interno del popolare plug-in All in One SEO è una meta casella personalizzata:

Il modo più semplice per creare un'interfaccia utente per l'aggiunta di campi personalizzati consiste nell'utilizzare il plug-in Advanced Custom Fields.

La prima cosa che devi fare è installare e attivare il plug-in Advanced Custom Fields. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.

Dopo l'attivazione, è necessario visitare la pagina ACF »Field Groups e fare clic sul pulsante "Aggiungi nuovo".

Un gruppo di campi è come un contenitore con una serie di campi personalizzati. Ti consente di aggiungere più pannelli di campi personalizzati.

Ora devi fornire un titolo per il tuo gruppo di campi e fare clic sul pulsante "+ Aggiungi campo" nell'angolo in alto a destra.

Ora puoi selezionare un tipo di campo.

Campi personalizzati avanzati ti consente di creare tutti i tipi di campi, inclusi testo, caricamento di immagini, numero, menu a discesa, caselle di controllo e altro.

Successivamente, puoi scorrere verso il basso per vedere altre opzioni per quel particolare campo, come il nome del campo, l'etichetta del campo e il valore predefinito. Puoi cambiarli in base alle tue esigenze.

Puoi anche aggiungere più campi al tuo gruppo di campi, se lo desideri. Al termine, fai clic sul pulsante "Salva modifiche".

Successivamente, modifica un post o creane uno nuovo e vedrai un nuovo pannello con i campi personalizzati di WordPress sotto l'editor di contenuti.

Per istruzioni dettagliate dettagliate, puoi consultare la nostra guida su come aggiungere meta box personalizzati nei post e nei tipi di post di WordPress.

Come nascondere campi personalizzati vuoti con istruzioni condizionali

Finora abbiamo spiegato come creare un campo personalizzato e visualizzarlo nel tuo tema.

Vediamo ora come verificare che il campo personalizzato non sia vuoto prima di visualizzarlo. Per fare ciò, modificheremo il nostro codice per verificare prima se il campo contiene dati:

<?php 

$mood = get_post_meta($post->ID, 'Mood', true);

if ($mood)  ?>

<p>Today's Mood: <? echo $mood; ?></p>

<?php 

 else 
// do nothing;


?>

Non dimenticare di sostituire Mood con il nome del tuo campo personalizzato.

Aggiunta di più valori a un campo personalizzato

I campi personalizzati possono essere riutilizzati nello stesso post per aggiungere più valori. Devi solo selezionare nuovamente il campo e aggiungere un altro valore alla casella "Valore".

Tuttavia, il codice che abbiamo utilizzato negli esempi precedenti sarà in grado di mostrare solo un singolo valore.

Per visualizzare tutti i valori di un campo personalizzato, dobbiamo modificare il codice e fare in modo che restituisca i dati in un array. Dovrai aggiungere il seguente codice al tuo file del tema:

<?php 
$mood = get_post_meta($post->ID, 'Mood', false);
if( count( $mood ) != 0 )  ?>
<p>Today's Mood:</p>
<ul>
<?php foreach($mood as $mood) 
            echo '<li>'.$mood.'</li>';
            
            ?>
</ul>
<?php 
 else  
// do nothing; 

?>

Ancora una volta, non dimenticare di sostituire Mood con il nome del tuo campo personalizzato.

In questo esempio, noterai che abbiamo modificato l'ultimo parametro della funzione get_post_meta in false . Questo parametro definisce se la funzione deve restituire un singolo valore o meno. L'impostazione su false consente di restituire i dati come un array, che viene quindi visualizzato in un ciclo foreach .

Come cercare articoli per campo personalizzato in WordPress

La ricerca predefinita di WordPress non funziona con nessun campo personalizzato sul tuo sito web. Utilizza il contenuto solo per trovare il post che tu oi tuoi visitatori state cercando sul vostro sito.

Tuttavia, SearchWP lo cambia migliorando la ricerca di WordPress. È il miglior plug-in di ricerca di WordPress che va oltre l'utilizzo del contenuto del post e indicizza tutto, inclusi campi personalizzati di WordPress, documenti PDF, tabelle personalizzate, testo, file e altro ancora.

È possibile regolare l'algoritmo di ricerca senza modificare il codice utilizzando SearchWP. Installa semplicemente il plug-in e poi vai su SearchWP »Algorithm dalla tua area di amministrazione di WordPress.

Successivamente, devi andare alla scheda "Motori" e quindi regolare il dispositivo di scorrimento Rilevanza attributo. Questo cambierà l'importanza data a ciascun attributo durante una ricerca.

Ad esempio, puoi impostare il dispositivo di scorrimento Campi personalizzati al massimo e regolare di conseguenza i dispositivi di scorrimento per altri attributi. In questo modo, SearchWP darà la preferenza ai dati nei campi personalizzati durante la ricerca di contenuti in WordPress.

Un altro vantaggio dell'utilizzo di SearchWP è che funziona con alcuni dei plug-in di campi personalizzati più popolari, inclusi Advanced Custom Fields (ACF), Meta Box e Pod.

Per maggiori dettagli, puoi leggere la nostra guida per principianti su come migliorare la ricerca di WordPress con SearchWP.

Visualizzazione di post con una chiave personalizzata specifica

WordPress ti consente di visualizzare post con chiavi personalizzate e i loro valori. Ad esempio, se stai tentando di creare una pagina di archivio personalizzata per visualizzare tutti i post con chiavi personalizzate specifiche, puoi utilizzare la classe WP_Query per interrogare i post che corrispondono a quei campi.

È possibile utilizzare il seguente codice come punto di partenza:

$args = array(
    'meta_key'   => 'Mood',
    'meta_value' => 'Happy'
);
$the_query = new WP_Query( $args );
 
<?php 
// the query
$the_query = new WP_Query( $args ); ?>
 
<?php if ( $the_query->have_posts() ) : ?>
 
    <!-- the loop -->
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <?php the_content(); ?>
 
    <?php endwhile; ?>
    <!-- end of the loop -->
 
    <!-- pagination here -->
 
    <?php wp_reset_postdata(); ?>
 
<?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Non dimenticare di sostituire i parametri meta_key e meta_value con i tuoi valori.

Come aggiungere il nome dell'autore ospite utilizzando i campi personalizzati

Vuoi aggiungere un guest post ma non vuoi aggiungere un nuovo profilo utente solo per quel post? Un metodo più semplice consiste nell'aggiungere il nome di un autore ospite come campo personalizzato.

Per fare ciò, dovrai aggiungere il seguente codice al file functions.php del tuo tema o utilizzare WPCode (consigliato):

add_filter( 'the_author', 'guest_author_name' );
add_filter( 'get_the_author_display_name', 'guest_author_name' );
function guest_author_name( $name ) 
global $post;
$author = get_post_meta( $post->ID, 'guest-author', true );
if ( $author )
$name = $author;
return $name;

Per maggiori dettagli, consulta la nostra guida su come incollare frammenti dal Web in WordPress.

Questo codice aggancia una funzione ai filtri the_author e get_the_author_display_name in WordPress.

La funzione verifica innanzitutto il nome dell'autore ospite. Se esiste, sostituisce il nome dell'autore con il nome dell'autore ospite.

Ora dovrai modificare il post in cui desideri visualizzare il nome dell'autore ospite. Vai alla meta box Campi personalizzati, aggiungi il nome dell'autore ospite e infine fai clic sul pulsante "Aggiungi campo personalizzato".

Per maggiori dettagli, consulta il nostro articolo su come riscrivere i nomi degli autori ospiti con campi personalizzati in WordPress.

Come visualizzare i collaboratori di un articolo utilizzando i campi personalizzati

Su molti blog e siti di notizie popolari, molti autori contribuiscono a scrivere un singolo articolo. Tuttavia, WordPress consente di associare un solo autore a un post.

Un modo per risolvere questo problema è utilizzare il plug-in Co-Authors Plus. Per saperne di più, consulta la nostra guida su come aggiungere più autori a un post di WordPress.

Un altro metodo consiste nell'aggiungere contributori come campo personalizzato.

Innanzitutto, devi modificare il post in cui desideri visualizzare i coautori o i contributori. Quindi, scorri verso il basso fino alla casella meta Campi personalizzati e aggiungi i nomi degli autori come campi personalizzati co-autori.

Ora, devi aggiungere questo codice ai file del tema in cui desideri mostrare i coautori:

<?php 
 
$coauthors = get_post_meta($post->ID, 'co-author', false);
if( count( $coauthors ) != 0 )  ?>
<ul class="coauthors">
<li>Contributors</li>
<?php foreach($coauthors as $coauthors)  ?>
           <?php echo '<li>'.$coauthors.'</li>' ;
            
            ?>
</ul>
<?php 
 else  
// do nothing; 

?>

Per visualizzare i nomi degli autori separati da virgole, puoi aggiungere il seguente CSS personalizzato:

.coauthors ul  
display:inline;

.coauthors li  
display:inline;
list-style:none;

.coauthors li:after  
content:","

.coauthors li:last-child:after 
    content: "";

.coauthors li:first-child:after 
    content: ":";

Ecco come appariva sul nostro sito dimostrativo.

Come visualizzare i campi personalizzati fuori dal ciclo in WordPress

Cosa succede se devi mostrare campi personalizzati nella barra laterale di un singolo post?

Per visualizzare i campi personalizzati al di fuori del loop di WordPress, puoi aggiungere il seguente codice ai file del tema:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'key', true);
wp_reset_query();
?>

Non dimenticare di sostituire key con il nome del tuo campo personalizzato.

Di solito, la maggior parte dei temi WordPress utilizza la stessa intestazione, piè di pagina e barra laterale su tutte le pagine.

Esistono anche molti modi per mostrare diverse barre laterali, intestazioni o piè di pagina per diverse pagine del tuo sito web. Puoi consultare la nostra guida su come visualizzare una barra laterale diversa per ogni articolo o pagina di WordPress.

Un modo per farlo è utilizzare campi personalizzati. Basta modificare il post o la pagina in cui desideri mostrare una barra laterale diversa e quindi aggiungere la barra laterale come campo personalizzato.

Ora devi modificare il tuo file del tema WordPress, come single.php, dove vuoi visualizzare una barra laterale personalizzata. Cercherai il seguente codice:

Sostituisci questa riga con il seguente codice:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
$sidebar = get_post_meta($postid, "sidebar", true);
get_sidebar($sidebar);
wp_reset_query();
?>

Questo codice cerca semplicemente il campo personalizzato della barra laterale e lo visualizza nel tuo tema. Ad esempio, se aggiungi webpage come campo personalizzato della barra laterale, il codice cercherà un file sidebar-webpage.php da visualizzare.

Dovrai creare il file sidebar-webpage.php nella cartella del tema. Puoi copiare il codice dal file sidebar.php del tuo tema come punto di partenza.

Manipolazione del contenuto del feed RSS con campi personalizzati

Vuoi mostrare metadati o contenuti aggiuntivi agli utenti del tuo feed RSS? Utilizzando i campi personalizzati puoi manipolare il tuo feed RSS di WordPress e aggiungere contenuti personalizzati ai tuoi feed.

Innanzitutto, devi aggiungere il seguente codice al file functions.php del tuo tema o utilizzare WPCode (consigliato):

function wpbeginner_postrss($content) 
global $wp_query;
$postid = $wp_query->post->ID;
$coolcustom = get_post_meta($postid, 'coolcustom', true);
if(is_feed()) 
if($coolcustom !== '') 
$content = $content."<br /><br /><div>".$coolcustom."</div>
";

else 
$content = $content;


return $content;

add_filter('the_excerpt_rss', 'wpbeginner_postrss');
add_filter('the_content', 'wpbeginner_postrss');

Ora, basta creare un campo personalizzato chiamato "coolcustom" e aggiungere qualsiasi valore ti piaccia. Puoi usarlo per visualizzare pubblicità, immagini, testo o qualsiasi cosa tu voglia.

Per maggiori dettagli, consulta la nostra guida su come copiare e incollare codice dal Web in WordPress.

Come manipolare il titolo del feed RSS con campi personalizzati

A volte potresti voler aggiungere del testo extra al titolo di un post per gli utenti di feed RSS. Ad esempio, questo può essere utile se pubblichi un post sponsorizzato o un guest post.

Innanzitutto, devi aggiungere il seguente codice al file functions.php del tuo tema o utilizzare WPCode per aggiungere lo snippet di codice personalizzato senza danneggiare il tuo sito web:

function wpbeginner_titlerss($content) 
global $wp_query;
$postid = $wp_query->post->ID;
$gpost = get_post_meta($postid, 'guest_post', true);
$spost = get_post_meta($postid, 'sponsored_post', true);

if($gpost !== '') 
$content="Guest Post: ".$content;

elseif ($spost !== '')
$content="Sponsored Post: ".$content;

else 
$content = $content;

return $content;

add_filter('the_title_rss', 'wpbeginner_titlerss');

Successivamente, devi modificare il post in cui desideri visualizzare il testo aggiuntivo nel campo del titolo.

Quindi, aggiungi guest_post e sponsored_post come campi personalizzati.

Se uno di questi due campi personalizzati viene trovato con un valore "true", il codice aggiungerà il testo appropriato prima del titolo. Questa tecnica può essere utilizzata in molti modi per adattarsi a qualsiasi cosa tu voglia.

Vuoi saperne di più fantastici hack di feed RSS? Consulta la nostra guida su come aggiungere contenuti e manipolare i feed RSS di WordPress.

Come impostare la data di scadenza per i post in WordPress utilizzando i campi personalizzati

Vuoi impostare una data di scadenza per alcuni post sul tuo sito WordPress? Ciò è utile quando si desidera pubblicare contenuti solo per un periodo specifico come eseguire sondaggi o offerte a tempo limitato.

Un modo per farlo è rimuovere manualmente il contenuto del post o utilizzare un plug-in come Post Expirator.

Un'altra opzione è utilizzare campi personalizzati per far scadere automaticamente i post dopo un tempo specifico. Dovrai modificare i file del tema e modificare il loop di WordPress in questo modo:

<?php
if (have_posts()) :
while (have_posts()) : the_post();
$expirationtime = get_post_meta($post->ID, "expiration", false);
if( count( $expirationtime ) != '' ) 
if (is_array($expirationtime)) 
$expirestring = implode($expirationtime);


$secondsbetween = strtotime($expirestring)-time();
if ( $secondsbetween >= 0 ) 
echo 'This post will expire on ' .$expirestring.'';
the_content();
 else 
echo "Sorry this post expired!"

 else 
the_content();

endwhile;
endif;
?>

Nota: dovrai modificare questo codice in modo che corrisponda al tuo tema.

Dopo aver aggiunto questo codice, puoi aggiungere il campo personalizzato di scadenza al post che desideri far scadere. Assicurati di aggiungere l'ora in questo formato mm/dd/yyyy 00:00:00 .

Come dare uno stile ai singoli post utilizzando i campi personalizzati

Vuoi cambiare l'aspetto di un singolo post utilizzando i CSS? WordPress assegna automaticamente a ogni post la propria classe, che puoi utilizzare per aggiungere CSS personalizzati.

Tuttavia, utilizzando i campi personalizzati, puoi aggiungere le tue classi personalizzate e quindi utilizzarle per modellare i post in modo diverso.

Innanzitutto, devi modificare un post a cui vorresti dare uno stile diverso. Vai alla casella Campi personalizzati e aggiungi il campo personalizzato post-classe.

Successivamente, è necessario modificare i file del tema WordPress e aggiungere questo codice all'inizio del ciclo di WordPress:

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Ora devi trovare la riga con la funzione post_class() .

Ecco come appariva nel nostro tema demo:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

È necessario modificare questa riga per includere il valore del campo personalizzato, in questo modo:

<article id="post-<?php the_ID(); ?>" <?php post_class($custom_values); ?>>

Ora, se esamini il codice sorgente del post utilizzando lo strumento Inspect, vedrai la tua classe CSS del campo personalizzato aggiunta alla post-class.

Ora puoi utilizzare questa classe CSS per aggiungere CSS personalizzati e dare uno stile diverso al tuo post.

Speriamo che questo articolo ti abbia aiutato a saperne di più sui campi personalizzati di WordPress. Potresti anche voler consultare la nostra guida su come aggiungere meta campi personalizzati a tassonomie personalizzate in WordPress e i migliori plug-in per la creazione di pagine WordPress per aiutarti a progettare il tuo sito Web nel modo desiderato.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per i tutorial video di WordPress. Puoi trovarci anche su Twitter e Facebook.