Campi Personalizzati Wordpress

Condividi questo contenuto!

In questa guida completa ti spiegheremo cosa sono e come utilizzare i campi personalizzati WordPress.

I campi personalizzati di WordPress sono una comoda funzionalità che ti consente di aggiungere vari dati / informazioni aggiuntivi ai tuoi post e pagine WordPress.

Molti plugin e temi popolari di WordPress utilizzano campi personalizzati per memorizzare dati importanti. Puoi anche utilizzare i campi personalizzati WordPress per memorizzare i tuoi dati e quindi utilizzarli sul tuo sito web.

Poiché questo è un articolo lungo, abbiamo aggiunto un sommario per una navigazione più semplice.

Cosa sono i campi personalizzati di WordPress?

I campi personalizzati di WordPress, in inglese Custom Fields, sono metadati utilizzati per aggiungere ulteriori informazioni relative al post o alla pagina che stai modificando.

Per impostazione predefinita, quando scrivi un nuovo post, pagina o qualsiasi tipo di contenuto, WordPress lo salva in due aree diverse.

La prima parte è il corpo del tuo contenuto che aggiungi utilizzando l’editor dei post.

La seconda parte è l’informazione su quel particolare contenuto. Ad esempio, titolo, autore, data, ora e altro. Questa parte di informazione del post si chiama metadati.

WordPress aggiunge automaticamente tutti i metadati richiesti a ogni articolo o pagina che crei.

Puoi anche creare e memorizzare i tuoi metadati utilizzando i campi personalizzati.

Per impostazione predefinita, l’opzione dei campi personalizzati è nascosta nella schermata di modifica del post. Per visualizzarla, è necessario fare clic sul menu a tre punti nell’angolo in alto a destra dello schermo e selezionare “Opzioni” dal menu.

Editor Options

Verrà visualizzato un popup in cui è necessario selezionare l’opzione “Campi personalizzati (Custom Fields)” sotto i pannelli avanzati. Successivamente, fai clic sul pulsante “Abilita e ricarica” ​​per ricaricare l’editor dei post.

Displaycustomfields

L’editor dei post verrà ricaricato e sarai in grado di vedere il pannello dei Custom Fields WordPress sotto l’editor dei contenuti.

Customfieldspanel

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

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

Questo è il motivo per cui questo tutorial è consigliato agli utenti che hanno familiarità con la modifica dei file dei temi. È anche utile per gli aspiranti sviluppatori di WordPress che vogliono imparare a utilizzare correttamente i campi personalizzati nei propri temi o plugin.

Detto questo, diamo un’occhiata a come aggiungere campi personalizzati in WordPress.

Come aggiungere campi personalizzati in WordPress

Innanzitutto, devi modificare il post o la pagina in cui desideri aggiungere il campo personalizzato e andare al meta box dei campi personalizzati (Custom Fields).

Customfieldnamevalue

Successivamente, è necessario fornire un nome per il campo personalizzato e quindi immetterne il valore (value). Fare clic sul pulsante Aggiungi campo personalizzato (Add Custom Field) per salvarlo.

Il campo verrà memorizzato e visualizzato nella meta box dei campi personalizzati in questo modo:

Customfieldsaved

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

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

Come visualizzare i Custom Fields in WordPress

Per visualizzare il tuo custom field sul tuo sito web, dovrai modificare i file del tuo tema WordPress. Se non l’hai mai fatto prima, dai un’occhiata alla nostra guida su come aggiungere codice personalizzato in WordPress.

Inoltre, per non perdere le modifiche che farai quando il tuo tema rilascerà un aggiornamento (e quindi tutte le tue modifiche verrebbero sovrascritte) dovrai creare un tema child del tuo tema WordPress e fare le modifiche lì. Per istruzioni dettagliate consulta la nostra guida su come creare un tema child in WordPress.

Ricordati anche di fare un backup del tuo sito prima di effettuare le modifiche.

Dopo ciò, puoi cominciare a modificare i file modello del tuo tema child (che saranno uguali a quelli del tuo tema).

Innanzitutto, dovrai trovare il file modello che devi modificare per visualizzare il tuo campo personalizzato. Supponendo che devi visualizzarlo su una singola pagina di post, dovrai modificare il file single.php o content-single.php.

Dovrai inserire il codice dei campi personalizzati all’interno del loop di WordPress. Cerca la linea che assomiglia a questa:

<?php while ( have_posts() ) : the_post(); ?>

Vuoi assicurarti di aggiungere il tuo codice prima della seguente riga:

<?php endwhile; // end of the loop. ?>

Ora devi aggiungere questo codice al tuo file modello del tema (child):

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

Non dimenticare di sostituire key con il nome del tuo campo personalizzato. Ad esempio, abbiamo utilizzato questo codice nel nostro tema demo:

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

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

Displayingcustomfield

Ora puoi utilizzare questo campo personalizzato anche in tutti gli altri post di WordPress.

Crea semplicemente un nuovo post o modificane uno esistente. Vai al meta box dei campi personalizzati e seleziona il tuo campo personalizzato dal menu a discesa e inserisci il suo valore.

Reusecustomfield

Fare clic sul pulsante “Aggiungi campo personalizzato (Add custom field)” per salvare le modifiche e quindi pubblicare o aggiornare il post.

Impossibile trovare il campo personalizzato nel menu a discesa nella schermata Modifica post

Per impostazione predefinita, WordPress carica solo 30 campi personalizzati in questo modulo.

Se utilizzi temi e plug-in di WordPress che già utilizzano campi personalizzati, è possibile che questi vengano visualizzati 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 a un plug-in specifico del sito.

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

Il codice precedente cambierà il limite a 50. Se ancora non riesci a vedere il tuo campo personalizzato, prova ad aumentare ulteriormente quel limite.

Creazione di un’interfaccia utente per i campi personalizzati

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

Se hai molti campi personalizzati o più utenti 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?

Questo è ciò che fanno già tanti popolari 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 casella meta personalizzata:

Aioseo Metabox

Il modo più semplice per farlo è utilizzare il plug-in Advanced Custom Fields.

Aggiungere campi personalizzati in WordPress utilizzando ACF

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

Dopo l’attivazione, è necessario visitare la pagina Campi personalizzati (Custom Fields) »Gruppi di campi (Field Groups) e fare clic sul pulsante Aggiungi nuovo.

Newfieldgroup

Un gruppo di campi è come un contenitore di un insieme di campi personalizzati. Ciò consente di aggiungere più pannelli di campi personalizzati.

Ora, è necessario fornire un titolo per il gruppo di campi e quindi fare clic sul pulsante “Aggiungi campo (Add field)“.

Addnewfield

È ora possibile fornire un nome per il campo personalizzato e selezionare un tipo di campo. Advanced Custom Fields ti consente di creare tutti i tipi di campi tra cui testo, caricamento di immagini, numero, menu a discesa, caselle di controllo e altro.

Addingcustomfield

Scorri verso il basso e vedrai altre opzioni per quel particolare campo. Puoi modificarli in base alle tue esigenze.

Se lo desideri, puoi aggiungere più campi al tuo gruppo di campi. Al termine, fai clic sul pulsante di pubblicazione per salvare le modifiche.

Ora puoi modificare un post o crearne uno nuovo e vedrai un nuovo pannello per i tuoi campi personalizzati sotto l’editor dei contenuti.

Acf Field Panel

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

Nascondere campi personalizzati vuoti con istruzione condizionale

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

Vediamo ora come verificare se il campo personalizzato non è 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.

Aggiungere più valori a un campo personalizzato

I campi personalizzati possono essere riutilizzati nuovamente nello stesso post per aggiungere più valori. Devi solo selezionarlo di nuovo e aggiungere un altro valore.

Multiplevaluescf

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. Sarà necessario aggiungere il seguente codice nel 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; 
}
?>

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

In questo esempio, noterai che abbiamo cambiato l’ultimo parametro della funzione get_post_metain false. Questo parametro definisce se la funzione deve restituire un singolo valore o meno. Impostandolo su false gli consente di restituire i dati come un array, che abbiamo poi visualizzato in un loopforeach.

Visualizzazione dei post con una chiave personalizzata specifica

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

È possibile utilizzare il codice seguente 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_keye meta_valuecon i tuoi valori.

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 aggiungere un singolo post? Un modo più semplice per farlo è aggiungere il nome dell’autore ospite come campo personalizzato.

Innanzitutto, devi aggiungere il seguente codice nel file functions.php del tuo tema o in un plug-in specifico del sito.

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;
}

Questo codice aggancia una funzione filtro the_authore get_the_author_display_name in WordPress.

La funzione verifica prima il nome dell’autore del guest post. 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 al meta box dei campi personalizzati e aggiungi il nome dell’autore ospite.

Cfguestauthor

Visualizzare i collaboratori di un articolo utilizzando i campi personalizzati

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

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

Un altro modo per farlo è aggiungere collaboratori come campo personalizzato.

Per prima cosa devi modificare il post in cui desideri visualizzare i co-autori o collaboratori. Scorri verso il basso fino alla meta box dei campi personalizzati e aggiungi i nomi degli autori come campo personalizzato del coautore.

Coauthorcf

Ora aggiungi questo codice ai tuoi file del tema in cui vuoi 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 appare sul nostro sito demo.

Coauthors

Visualizzare i campi personalizzati fuori dal loop in WordPress

Finora ti abbiamo mostrato tutti gli esempi in cui i campi personalizzati vengono visualizzati all’interno del loop di WordPress. E se avessi bisogno di mostrarli fuori dal loop? Ad esempio, nella barra laterale di un singolo post.

Per visualizzare i campi personalizzati al di fuori del loop di WordPress aggiungi il seguente codice:

<?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 campo personalizzato.

Visualizzare header, footer e barra laterale personalizzati utilizzando i campi personalizzati

Di solito la maggior parte dei temi WordPress utilizza lo stesso header, footer e barra laterale su tutte le pagine. Esistono diversi modi per mostrare barre laterali, header o footer diversi per pagine diverse del tuo sito web. Consulta la nostra guida su come visualizzare una barra laterale diversa per ogni articolo o pagina di WordPress.

Un modo per farlo è utilizzare i campi personalizzati. Modifica il post o la pagina in cui desideri mostrare una barra laterale diversa, quindi aggiungi la barra laterale come campo personalizzato.

Sidebarcf

Ora è necessario modificare i file del tema WordPress come single.php in cui si desidera visualizzare la barra laterale personalizzata (fallo tramite un tema child per mantenere le modifiche nel tempo). Cercherai il seguente codice:

<?php get_sidebar(); ?>

Sostituisci questa riga con il codice seguente:

<?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 quindi lo visualizza nel tema. Ad esempio, se aggiungi wpbpage come campo personalizzato della barra laterale, il codice cercherà il file sidebar-wpbpage.php da visualizzare.

Dovrai creare il file sidebar-wpbpage.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

Desideri visualizzare 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 nei tuoi feed.

Per prima cosa devi aggiungere il seguente codice nel file functions.php del tuo tema o in un plugin specifico del sito.

function bfast_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', 'bfast_postrss');
add_filter('the_content', 'bfast_postrss');

Ora crea un campo personalizzato chiamato “coolcustom” e aggiungi il valore che preferisci. Puoi usarlo per visualizzare pubblicità, immagini, testo o qualsiasi cosa tu voglia.

Manipolare il titolo del feed RSS con i campi personalizzati

A volte potresti voler aggiungere del testo extra al titolo di un post per gli utenti del feed RSS. Ad esempio, se stai pubblicando un post sponsorizzato o un guest post.

Per prima cosa aggiungi il seguente codice nel file functions.php del tuo tema o in un plugin specifico del sito.

function bfast_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', 'bfast_titlerss');

Successivamente, è necessario modificare il post in cui si desidera visualizzare il testo aggiuntivo nel campo del titolo e aggiungere guest_post e sponsored_post nei campi personalizzati.

Guestpostcf

Se uno di questi due campi personalizzati viene trovato con un valore “vero (true)“, verrà aggiunto il testo appropriato prima del titolo. Questa tecnica può essere utilizzata in vari modi per adattarsi a ciò che ti piace.

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 in situazioni in cui desideri pubblicare contenuti solo per un periodo specifico, come l’esecuzione di sondaggi o offerte a tempo limitato.

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

Un altro modo per farlo è utilizzare i campi personalizzati per far scadere automaticamente i post dopo un tempo specifico.

Dovrai modificare i file del tuo tema (child) e aggiungere modifiche al 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 della scadenza al post che desideri far scadere. Assicurati di aggiungere l’ora in questo formato mm / gg / aaaa 00:00:00 .

Expirationcf

Applicare uno stile ai singoli post utilizzando i campi personalizzati

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

Tuttavia, utilizzando i campi personalizzati è possibile aggiungere le proprie classi personalizzate e quindi utilizzarle per definire lo stile dei post in modo diverso.

Per prima cosa devi modificare un post a cui vorresti dare uno stile diverso. Vai alla casella dei campi personalizzati e crea il campo personalizzato post-class.

Postclass

Successivamente, è necessario modificare i file del tema (child) WordPress e aggiungere questo codice all’inizio del loop di WordPress.

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

Ora devi trovare una riga con la funzione post_class (). Ecco come appariva nel nostro tema demo:

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

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

Postclasspreview

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

Questo è tutto, speriamo che questo articolo ti abbia aiutato a capire cosa sono e come utilizzare i campi personalizzati WordPress. Potresti anche voler vedere la nostra guida passo passo definitiva per aumentare la velocità e le prestazioni di WordPress.

Dichiarazione sulla trasparenza: il contenuto di B-Fast è supportato dal lettore, il che significa che se fai clic su alcuni dei collegamenti in questo post, potremmo guadagnare una piccola tassa di riferimento. Tieni presente che raccomandiamo solo prodotti che utilizziamo noi stessi e / o che riteniamo possano aggiungere valore ai nostri lettori.

Condividi questo contenuto!

Related Posts