{"id":44001,"date":"2023-06-29T08:00:00","date_gmt":"2023-06-29T07:00:00","guid":{"rendered":"https:\/\/supporthost.com\/it\/?p=44001"},"modified":"2024-10-14T07:38:17","modified_gmt":"2024-10-14T07:38:17","slug":"advanced-custom-fields","status":"publish","type":"post","link":"https:\/\/supporthost.com\/it\/advanced-custom-fields\/","title":{"rendered":"Advanced Custom Fields: guida completa ai campi personalizzati di WordPress"},"content":{"rendered":"\n<p>In questa guida ti mostrer\u00f2 come usare <strong>Advanced Custom Fields<\/strong> per creare campi personalizzati su WordPress. <\/p>\n\n\n\n<p>Creare dei campi da mostrare nel sito non \u00e8 difficile, vedremo degli esempi pratici che ti aiuteranno a farlo con diversi metodi. <\/p>\n\n\n\n<p>Per prima cosa, per\u00f2, scopriamo di pi\u00f9 sui campi personalizzati di WordPress e su come attivare la funzione nativa che ci permette di usarli senza installare nessun plugin.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Indice<\/h2><nav><ul><li><a href=\"#cosa-sono-i-campi-personalizzati-di-word-press\">Cosa sono i campi personalizzati di WordPress<\/a><ul><li><a href=\"#come-attivare-i-campi-personalizzati-di-word-press\">Come attivare i campi personalizzati di WordPress<\/a><\/li><li><a href=\"#aggiungere-un-campo-personalizzato\">Aggiungere un campo personalizzato<\/a><\/li><li><a href=\"#mostrare-i-campi-personalizzati\">Mostrare i campi personalizzati<\/a><\/li><\/ul><\/li><li><a href=\"#usare-advanced-custom-fields-per-gestire-i-campi-personalizzati\">Usare Advanced Custom Fields per gestire i campi personalizzati<\/a><ul><li><a href=\"#installare-advanced-custom-fields\">Installare Advanced Custom Fields<\/a><\/li><li><a href=\"#creare-i-gruppi-di-campi\">Creare i gruppi di campi<\/a><\/li><li><a href=\"#creazione-campo-scheda-generale\">Creazione campo: scheda Generale<\/a><\/li><li><a href=\"#creazione-campo-scheda-validation\">Creazione campo: scheda Validation<\/a><\/li><li><a href=\"#creazione-campo-scheda-presentazione\">Creazione campo: scheda Presentazione<\/a><\/li><li><a href=\"#creazione-campo-scheda-condizione-logica\">Creazione campo: scheda Condizione logica<\/a><\/li><li><a href=\"#altri-tipi-di-campo\">Altri tipi di campo<\/a><ul><li><a href=\"#campo-numero\">Campo numero<\/a><\/li><li><a href=\"#campo-seleziona\">Campo seleziona<\/a><\/li><li><a href=\"#campo-selettore-data\">Campo selettore data<\/a><\/li><li><a href=\"#campo-immagine\">Campo immagine<\/a><\/li><\/ul><\/li><li><a href=\"#associare-i-campi-personalizzati-ad-articoli-o-pagine\">Associare i campi personalizzati ad articoli o pagine<\/a><\/li><li><a href=\"#cambiare-laspetto-della-compilazione-dei-campi-personalizzati\">Cambiare l&#8217;aspetto della compilazione dei campi personalizzati<\/a><\/li><li><a href=\"#gestire-i-gruppi-di-campi\">Gestire i gruppi di campi<\/a><\/li><li><a href=\"#come-visualizzare-i-campi-personalizzati-in-pagine-e-articoli\">Come visualizzare i campi personalizzati in pagine e articoli<\/a><ul><li><a href=\"#modificare-i-template-del-tema\">Modificare i template del tema<\/a><\/li><li><a href=\"#usare-gli-shortcode-di-acf\">Usare gli shortcode di ACF<\/a><\/li><li><a href=\"#come-usare-advanced-custom-fields-con-oxygen-builder\">Come usare Advanced Custom Fields con Oxygen Builder<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#alternative-ad-avanced-custom-fields\">Alternative ad Avanced Custom Fields<\/a><ul><li><a href=\"#pods\">Pods<\/a><\/li><li><a href=\"#easy-post-types-and-fields\">Easy Post Types and Fields<\/a><\/li><li><a href=\"#meta-box\">Meta Box<\/a><\/li><li><a href=\"#custom-field-suite\">Custom Field Suite<\/a><\/li><\/ul><\/li><li><a href=\"#conclusioni\">Conclusioni<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/advanced-custom-fields-guida-1024x538.png\" alt=\"Advanced Custom Fields Guida\" class=\"wp-image-44487\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/advanced-custom-fields-guida-1024x538.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/advanced-custom-fields-guida-300x158.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/advanced-custom-fields-guida-768x403.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/advanced-custom-fields-guida-120x63.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/advanced-custom-fields-guida.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cosa-sono-i-campi-personalizzati-di-word-press\">Cosa sono i campi personalizzati di WordPress<\/h2>\n\n\n\n<p>Nell&#8217;ecosistema WordPress, i campi personalizzati sono delle <strong>informazioni aggiuntive<\/strong> o meta dati che possiamo associare a un articolo o una pagina del nostro sito.<\/p>\n\n\n\n<p>I campi personalizzati, chiamati anche custom field, ci permettono nella pratica di aggiungere informazioni extra ai nostri contenuti di WordPress.<\/p>\n\n\n\n<p>Ecco alcuni esempi pratici di come potresti usare i campi personalizzati:<\/p>\n\n\n\n<ul>\n<li>Creare una scheda informativa su un videogioco o un libro per mostrare una copertina e le informazioni su data di uscita, autore o sviluppatore e cos\u00ec via.<\/li>\n\n\n\n<li>Inserire in un articolo di ricette informazioni su tempo di cottura, ingredienti e difficolt\u00e0 di preparazione.<\/li>\n\n\n\n<li>In un sito immobiliare potremmo inserire per ogni articolo dedicato a una propriet\u00e0 una serie di informazioni come indirizzo, prezzo di vendita, numero di stanze, dimensione della propriet\u00e0, ecc. <\/li>\n<\/ul>\n\n\n\n<p>Ogni campo \u00e8 composto da una coppia di elementi: una <strong>chiave<\/strong>, che rappresenta il nome dell&#8217;elemento e un <strong>valore <\/strong>vale a dire l&#8217;informazione che vogliamo associare alla chiave.<\/p>\n\n\n\n<p>Per fare un esempio pratico, se volessimo aggiungere un campo personalizzato per specificare l&#8217;anno di pubblicazione di un libro, ci basterebbe usare:<\/p>\n\n\n\n<ul>\n<li>nome (chiave): Anno di pubblicazione<\/li>\n\n\n\n<li>valore: 2023.<\/li>\n<\/ul>\n\n\n\n<p>I custom field sono una <strong>funzione nativa di WordPress<\/strong>, possiamo quindi attivarli per poi mostrarli in un punto specifico delle nostre pagine e dei nostri articoli.<\/p>\n\n\n\n<p>In alternativa, come vedremo, pu\u00f2 essere pi\u00f9 pratico utilizzare un <strong>plugin <\/strong>che ci consenta una personalizzazione pi\u00f9 avanzata rispetto alla funzione nativa di WordPress.<\/p>\n\n\n\n<p>Per cominciare vediamo come attivare quest&#8217;ultima.<\/p>\n\n\n\n<p class=\"note\">Vuoi seguire questa guida passo passo, ma non hai ancora un sito? Attiva una prova con il nostro <a href=\"https:\/\/supporthost.com\/it\/hosting-gratis\/\" data-type=\"page\" data-id=\"56333\">hosting gratuito<\/a> e scegli un piano <a href=\"https:\/\/supporthost.com\/it\/hosting-wordpress\/\" data-type=\"page\" data-id=\"22570\">hosting WordPress<\/a> che potrai provare per 14 giorni senza impegno.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"come-attivare-i-campi-personalizzati-di-word-press\">Come attivare i campi personalizzati di WordPress<\/h3>\n\n\n\n<p>I campi personalizzati sono una funzione integrata di WordPress, per utilizzarli dobbiamo prima attivare questa opzione.<\/p>\n\n\n\n<p>Possiamo farlo direttamente dall&#8217;editor, ci basta quindi andare ad aggiungere un nuovo articolo per aprire l&#8217;editor di default di WordPress, <a href=\"https:\/\/supporthost.com\/it\/gutenberg\/\" data-type=\"post\" data-id=\"22269\">Gutenberg<\/a>. <\/p>\n\n\n\n<p>Dobbiamo quindi fare click sull&#8217;icona dei tre punti verticali (\u205d) per aprire le <strong>opzioni <\/strong>e poi cliccare su &#8220;Preferenze&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"486\" height=\"924\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/gutenberg-opzioni-preferenze.png\" alt=\"Gutenberg Opzioni Preferenze\" class=\"wp-image-44004\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/gutenberg-opzioni-preferenze.png 486w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/gutenberg-opzioni-preferenze-158x300.png 158w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/gutenberg-opzioni-preferenze-33x63.png 33w\" sizes=\"auto, (max-width: 486px) 100vw, 486px\" \/><\/figure>\n\n\n\n<p>Apriamo la scheda &#8220;Pannelli&#8221; e attiviamo l&#8217;opzione &#8220;Campi personalizzati&#8221;. Dopo averla attivata ci verr\u00e0 richiesto di ricaricare la pagina per poter applicare le modifiche. <\/p>\n\n\n\n<p>Se hai fatto delle modifiche al post devi prima salvare e poi puoi cliccare sul pulsante &#8220;Abilita e ricarica&#8221; altrimenti puoi procedere direttamente.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"937\" height=\"663\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/attiva-campi-personalizzati-wordpress.png\" alt=\"Attiva Campi Personalizzati WordPress\" class=\"wp-image-44005\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/attiva-campi-personalizzati-wordpress.png 937w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/attiva-campi-personalizzati-wordpress-300x212.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/attiva-campi-personalizzati-wordpress-768x543.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/attiva-campi-personalizzati-wordpress-89x63.png 89w\" sizes=\"auto, (max-width: 937px) 100vw, 937px\" \/><\/figure>\n\n\n\n<p>A questo punto la pagina dell&#8217;editor verr\u00e0 ricaricata e vedremo comparire il box &#8220;Campi personalizzati&#8221; nella porzione inferiore dello schermo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aggiungere-un-campo-personalizzato\">Aggiungere un campo personalizzato<\/h3>\n\n\n\n<p>Possiamo aggiungere campi personalizzati ai singoli articoli e pagine del nostro <a href=\"https:\/\/supporthost.com\/it\/sito-wordpress\/\" data-type=\"post\" data-id=\"38754\">sito WordPress<\/a>. Ci basta aprire l&#8217;editor per modificare l&#8217;articolo e poi compilare la sezione &#8220;Campi personalizzati&#8221;.<\/p>\n\n\n\n<p>Nello specifico ci baster\u00e0 inserire un nome e un valore e poi cliccare su <em>Aggiungi campo personalizzato<\/em>, cos\u00ec:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"222\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungere-campo-personalizzato-wordpress-1024x222.png\" alt=\"Aggiungere Campo Personalizzato WordPress\" class=\"wp-image-44006\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungere-campo-personalizzato-wordpress-1024x222.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungere-campo-personalizzato-wordpress-300x65.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungere-campo-personalizzato-wordpress-768x166.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungere-campo-personalizzato-wordpress-120x26.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungere-campo-personalizzato-wordpress.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dopo aver aggiunto il campo potremo:<\/p>\n\n\n\n<ul>\n<li>aggiornare o eliminare il campo (attraverso i pulsanti che vedi evidenziati nella schermata di seguito);<\/li>\n\n\n\n<li>aggiungere un nuovo campo personalizzato ripetendo i passaggi di prima.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"349\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/modificare-campo-personalizzato-wordpress-1024x349.png\" alt=\"Modificare Campo Personalizzato WordPress\" class=\"wp-image-44007\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/modificare-campo-personalizzato-wordpress-1024x349.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/modificare-campo-personalizzato-wordpress-300x102.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/modificare-campo-personalizzato-wordpress-768x262.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/modificare-campo-personalizzato-wordpress-120x41.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/modificare-campo-personalizzato-wordpress.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"mostrare-i-campi-personalizzati\">Mostrare i campi personalizzati<\/h3>\n\n\n\n<p>Aggiungere i campi personalizzati dall&#8217;editor di WordPress come abbiamo appena visto non \u00e8 sufficiente a mostrarli nel front end. Se dopo aver aggiunto i campi andiamo a pubblicare l&#8217;articolo, vedremo che le informazioni inserite non compaiono nell&#8217;articolo pubblicato.<\/p>\n\n\n\n<p>Per mostrare i campi personalizzati dobbiamo modificare i file del tema per esempio i template degli articoli o delle pagine e utilizzare la funzione <code>get_post_meta<\/code> come in questo esempio:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php echo get_post_meta($post-&gt;ID, 'nome_campo', true); ?&gt;<\/code><\/pre>\n\n\n\n<p>Dobbiamo sostituire &#8220;nome_campo&#8221; con il nome del campo che abbiamo creato.<\/p>\n\n\n\n<p>In alternativa possiamo usare la funzione <code>get_post_custom_values<\/code> per prelevare tutti i campi personalizzati.<\/p>\n\n\n\n<p>Puoi trovare i riferimenti a queste funzioni nella <a href=\"https:\/\/wordpress.org\/documentation\/article\/assign-custom-fields\/\" rel=\"noopener\">documentazione<\/a> di WordPress sui campi personalizzati.<\/p>\n\n\n\n<p>Adesso andiamo a vedere un metodo pi\u00f9 pratico per creare i campi personalizzati.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"usare-advanced-custom-fields-per-gestire-i-campi-personalizzati\">Usare Advanced Custom Fields per gestire i campi personalizzati<\/h2>\n\n\n\n<p>La funzionalit\u00e0 di nativa di WordPress per i campi personalizzati pu\u00f2 risultare complessa da usare, perci\u00f2 in molti casi sar\u00e0 pi\u00f9 utile e semplice usare un <strong>plugin <\/strong>per gestire i nostri campi aggiuntivi.<\/p>\n\n\n\n<p>Il plugin pi\u00f9 utilizzato per questo scopo \u00e8 Advanced Custom Fields (ACF) di WP Engine. Adesso ti mostrer\u00f2 come utilizzarlo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"installare-advanced-custom-fields\">Installare Advanced Custom Fields<\/h3>\n\n\n\n<p>Possiamo installare e attivare Advanced Custom Fields come un normale plugin di WordPress.<\/p>\n\n\n\n<p>Vai su <em>Plugin &gt; Aggiungi nuovo<\/em>, cerca &#8220;advanced custom fields&#8221; nella barra in alto a destra e poi clicca sul pulsante &#8220;Installa ora&#8221; accanto al plugin, come ti mostro qui:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"302\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/installare-advanced-custom-fields-1024x302.png\" alt=\"Installare Advanced Custom Fields\" class=\"wp-image-44008\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/installare-advanced-custom-fields-1024x302.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/installare-advanced-custom-fields-300x89.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/installare-advanced-custom-fields-768x227.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/installare-advanced-custom-fields-120x35.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/installare-advanced-custom-fields.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dopo l&#8217;installazione, il pulsante accanto al plugin diventer\u00e0 &#8220;<em>Attiva<\/em>&#8221; e ci permetter\u00e0 di attivare il plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"827\" height=\"320\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/attivare-advanced-custom-fields.png\" alt=\"Attivare Advanced Custom Fields\" class=\"wp-image-44009\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/attivare-advanced-custom-fields.png 827w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/attivare-advanced-custom-fields-300x116.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/attivare-advanced-custom-fields-768x297.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/attivare-advanced-custom-fields-120x46.png 120w\" sizes=\"auto, (max-width: 827px) 100vw, 827px\" \/><\/figure>\n\n\n\n<p>Dopo aver attivato il plugin vedremo comparire una nuova voce &#8220;ACF&#8221; nel menu laterale di WordPress.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creare-i-gruppi-di-campi\">Creare i gruppi di campi<\/h3>\n\n\n\n<p>Ora che abbiamo attivato Advanced Custom Fields, siamo pronti per creare i nostro campi. Il plugin organizza i campi in <strong>gruppi <\/strong>in modo da raggruppare diversi campi in un&#8217;unica categoria.<\/p>\n\n\n\n<p>Dal menu di sinistra facciamo click su <em>ACF &gt; Gruppi di campi<\/em> e ci troveremo davanti a una schermata come questa. Per iniziare clicchiamo su <em>Aggiungi nuovo<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"493\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-nuovo-gruppo-di-campi-acf-1024x493.png\" alt=\"Aggiungi Nuovo Gruppo Di Campi Acf\" class=\"wp-image-44010\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-nuovo-gruppo-di-campi-acf-1024x493.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-nuovo-gruppo-di-campi-acf-300x145.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-nuovo-gruppo-di-campi-acf-768x370.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-nuovo-gruppo-di-campi-acf-120x58.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-nuovo-gruppo-di-campi-acf.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Per prima cosa diamo un nome al gruppo compilando il box in alto, nel nostro esempio abbiamo usato &#8220;scheda informativa videogiochi&#8221;. Come esempio andremo a usare i campi personalizzati per aggiungere metadati sui videogiochi: data di uscita, piattaforma, copertina e cos\u00ec via.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"131\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/nome-nuovo-gruppo-di-campi-1024x131.png\" alt=\"Nome Nuovo Gruppo Di Campi\" class=\"wp-image-44011\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/nome-nuovo-gruppo-di-campi-1024x131.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/nome-nuovo-gruppo-di-campi-300x38.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/nome-nuovo-gruppo-di-campi-768x98.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/nome-nuovo-gruppo-di-campi-120x15.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/nome-nuovo-gruppo-di-campi.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dobbiamo quindi creare tutti i campi di cui abbiamo bisogno.<\/p>\n\n\n\n<p>Al centro della schermata vediamo la sezione &#8220;Campi&#8221; che ci permette di gestire i campi gi\u00e0 creati e aggiungerne di nuovi.<\/p>\n\n\n\n<p>Quando creiamo un nuovo campo, possiamo vedere quattro schede: <\/p>\n\n\n\n<ul>\n<li>Generale<\/li>\n\n\n\n<li>Validation<\/li>\n\n\n\n<li>Presentazione<\/li>\n\n\n\n<li>Condizione logica.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"363\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/quattro-schede-creazione-campi-acf-1024x363.png\" alt=\"Quattro Schede Creazione Campi Acf\" class=\"wp-image-44239\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/quattro-schede-creazione-campi-acf-1024x363.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/quattro-schede-creazione-campi-acf-300x106.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/quattro-schede-creazione-campi-acf-768x272.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/quattro-schede-creazione-campi-acf-120x43.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/quattro-schede-creazione-campi-acf.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ognuna di queste sezioni ci permette di scegliere alcune impostazioni per il nostro campo e queste opzioni cambiano in base al tipo di campo che stiamo creando.<\/p>\n\n\n\n<p>Iniziamo dal vedere quali opzioni abbiamo nella scheda &#8220;Generale&#8221;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creazione-campo-scheda-generale\">Creazione campo: scheda Generale<\/h3>\n\n\n\n<p>Iniziamo dall&#8217;esempio pi\u00f9 semplice, il <strong>campo &#8220;testo&#8221;<\/strong>. In questo esempio vogliamo creare un campo che ci permetta di inserire il nome del videogioco.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"966\" height=\"787\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-generale.png\" alt=\"Aggiungi Campo Di Testo Acf Generale\" class=\"wp-image-44012\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-generale.png 966w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-generale-300x244.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-generale-768x626.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-generale-77x63.png 77w\" sizes=\"auto, (max-width: 966px) 100vw, 966px\" \/><\/figure>\n\n\n\n<p><strong>Tipo di campo<\/strong>: possiamo impostare il tipo di campo. In base al tipo selezionato cambieranno anche le impostazioni successive. Possiamo scegliere un campo di testo, ma anche inserire selettori di data e orario, oppure link, checkbox e immagini.<\/p>\n\n\n\n<p><strong>Etichetta campo<\/strong>: qui possiamo inserire l&#8217;etichetta che ci permetter\u00e0 di riconoscere il campo per le modifiche future.<\/p>\n\n\n\n<p><strong>Nome campo<\/strong>: appena inseriamo l&#8217;etichetta, il campo &#8220;nome campo&#8221; verr\u00e0 popolato in automatico, possiamo modificare il nome attenendoci alle indicazioni: usare una sola parola senza spazi, \u00e8 possibile usare i trattini.<\/p>\n\n\n\n<p><strong>Valore predefinito<\/strong>: possiamo inserire un valore che verr\u00e0 usato di default quando non viene specificato nessun valore. In questo caso lasciamo il campo vuoto.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creazione-campo-scheda-validation\">Creazione campo: scheda Validation<\/h3>\n\n\n\n<p>Cliccando sulla scheda &#8220;Validation&#8221; possiamo scegliere se il campo \u00e8 <strong>obbligatorio <\/strong>o <strong>facoltativo<\/strong>.<\/p>\n\n\n\n<p>Nel caso del nostro esempio possiamo impostarlo come obbligatorio attivando l&#8217;opzione &#8220;Required&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"322\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-validation-1024x322.png\" alt=\"Aggiungi Campo Di Testo Acf Validation\" class=\"wp-image-44013\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-validation-1024x322.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-validation-300x94.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-validation-768x241.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-validation-120x38.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-validation.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creazione-campo-scheda-presentazione\">Creazione campo: scheda Presentazione<\/h3>\n\n\n\n<p>Dalla scheda &#8220;Presentazione&#8221; della creazione del campo con ACF possiamo inserire delle informazioni aggiuntive. Per esempio possiamo aggiungere delle <strong>note <\/strong>che verranno mostrate a chi dovr\u00e0 compilare i campi personalizzati oppure possiamo inserire un testo segnaposto.<\/p>\n\n\n\n<p>In questo esempio ho aggiunto una nota nel campo &#8220;Istruzioni&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"954\" height=\"779\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-presentazione.png\" alt=\"Aggiungi Campo Di Testo Acf Presentazione\" class=\"wp-image-44014\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-presentazione.png 954w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-presentazione-300x245.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-presentazione-768x627.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/aggiungi-campo-di-testo-acf-presentazione-77x63.png 77w\" sizes=\"auto, (max-width: 954px) 100vw, 954px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creazione-campo-scheda-condizione-logica\">Creazione campo: scheda Condizione logica<\/h3>\n\n\n\n<p>ACF ci permette di impostare delle <strong>condizioni logiche<\/strong> in modo da mostrare alcuni campi solo se le condizioni sono soddisfatte.<\/p>\n\n\n\n<p>Ritornando all&#8217;esempio della scheda informativa dei videogiochi, potremmo ad esempio mostrare il campo &#8220;Data di uscita&#8221; solo se il videogioco \u00e8 stato gi\u00e0 rilasciato.<\/p>\n\n\n\n<p>In questo caso ci basta creare un campo di tipo &#8220;Seleziona&#8221; con il valore &#8220;Rilasciato&#8221; e due possibili scelte: Si e No. Dopodich\u00e9 possiamo impostare una condizione logica per il campo &#8220;Data di uscita&#8221; per far s\u00ec che venga mostrato solo se il campo &#8220;Rilasciato&#8221; \u00e8 impostato su s\u00ec.<\/p>\n\n\n\n<p>Ecco il nostro risultato della nostra condizione logica:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"382\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-condizione-logica-acf-1024x382.png\" alt=\"Esempio Di Condizione Logica Acf\" class=\"wp-image-44015\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-condizione-logica-acf-1024x382.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-condizione-logica-acf-300x112.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-condizione-logica-acf-768x287.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-condizione-logica-acf-120x45.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-condizione-logica-acf.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"altri-tipi-di-campo\">Altri tipi di campo<\/h3>\n\n\n\n<p>Nell&#8217;esempio iniziale abbiamo visto le opzioni del campo testo. In realt\u00e0 ACF ci permette di inserire molteplici <strong>tipi di campo<\/strong>, ognuno dei quali ci permetter\u00e0 di selezionare opzioni differenti, vediamo qualche esempio.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"campo-numero\">Campo numero<\/h4>\n\n\n\n<p>Possiamo utilizzare il campo <strong>numero <\/strong>in diverse circostanze, nel nostro esempio possiamo creare un campo di tipo numero per aggiungere il voto della recensione di un videogioco.<\/p>\n\n\n\n<p>In questo caso, rispetto al campo testo, nella scheda &#8220;Validation&#8221; troviamo una nuova impostazione che ci permette di selezionare il valore minimo e massimo, come ti mostro qui:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"427\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-numero-valore-minimo-e-massimo-acf-1024x427.png\" alt=\"Campo Numero Valore Minimo E Massimo Acf\" class=\"wp-image-44016\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-numero-valore-minimo-e-massimo-acf-1024x427.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-numero-valore-minimo-e-massimo-acf-300x125.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-numero-valore-minimo-e-massimo-acf-768x320.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-numero-valore-minimo-e-massimo-acf-120x50.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-numero-valore-minimo-e-massimo-acf.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"campo-seleziona\">Campo seleziona<\/h4>\n\n\n\n<p>Il tipo di campo &#8220;<strong>seleziona<\/strong>&#8221; di Advanced Custom Fields ci consente di creare un campo con una scelta multipla.<\/p>\n\n\n\n<p>Nel nostro esempio possiamo utilizzarlo per associare a un videogioco le piattaforme per cui \u00e8 disponibile.<\/p>\n\n\n\n<p>Per farlo dobbiamo inserire nel box &#8220;Scelte&#8221; le varie opzioni disponibili, una per ogni riga, come abbiamo fatto nel nostro esempio. Possiamo anche decidere se rendere la scelta esclusiva o permettere di selezionare pi\u00f9 valori, grazie all&#8217;opzione in basso. Ecco come abbiamo impostato il nostro campo d&#8217;esempio:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"858\" height=\"793\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-campo-seleziona-acf.png\" alt=\"Esempio Di Campo Seleziona Acf\" class=\"wp-image-44017\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-campo-seleziona-acf.png 858w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-campo-seleziona-acf-300x277.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-campo-seleziona-acf-768x710.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-campo-seleziona-acf-68x63.png 68w\" sizes=\"auto, (max-width: 858px) 100vw, 858px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"campo-selettore-data\">Campo selettore data<\/h4>\n\n\n\n<p>Scegliendo come tipo di campo &#8220;Selettore data&#8221; possiamo creare un campo con un selettore tramite calendario per impostare una data.<\/p>\n\n\n\n<p>Dalla scheda <em>generale<\/em> possiamo scegliere il formato da usare e volendo possiamo impostare un formato data differente per la parte di compilazione e per la visualizzazione finale (sul front end).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"529\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-campo-selettore-data-1024x529.png\" alt=\"Esempio Campo Selettore Data\" class=\"wp-image-44018\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-campo-selettore-data-1024x529.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-campo-selettore-data-300x155.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-campo-selettore-data-768x397.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-campo-selettore-data-120x63.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-campo-selettore-data.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"campo-immagine\">Campo immagine<\/h4>\n\n\n\n<p>Per i campi <strong>immagine <\/strong>possiamo aggiungere diverse opzioni.<\/p>\n\n\n\n<p>Per prima cosa, dalla scheda <em>generale<\/em> possiamo decidere se far selezionare l&#8217;immagine da tutti i media o solo tra quelli caricati nell&#8217;articolo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"919\" height=\"778\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-immagine-generale-acf.png\" alt=\"Campo Immagine Generale Acf\" class=\"wp-image-44019\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-immagine-generale-acf.png 919w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-immagine-generale-acf-300x254.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-immagine-generale-acf-768x650.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-immagine-generale-acf-74x63.png 74w\" sizes=\"auto, (max-width: 919px) 100vw, 919px\" \/><\/figure>\n\n\n\n<p>Aprendo la scheda <em>validation<\/em> possiamo inserire delle restrizioni sui <strong>tipi di file<\/strong> consentiti e sulle <strong>dimensioni <\/strong>delle immagini (sia in pixel che come peso in MB).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1009\" height=\"706\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-immagine-validation-acf.png\" alt=\"Campo Immagine Validation Acf\" class=\"wp-image-44020\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-immagine-validation-acf.png 1009w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-immagine-validation-acf-300x210.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-immagine-validation-acf-768x537.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-immagine-validation-acf-90x63.png 90w\" sizes=\"auto, (max-width: 1009px) 100vw, 1009px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"associare-i-campi-personalizzati-ad-articoli-o-pagine\">Associare i campi personalizzati ad articoli o pagine<\/h3>\n\n\n\n<p>Scorrendo nella pagina dell&#8217;aggiunta del nuovo gruppo di campi, arriviamo al box &#8220;Impostazioni&#8221;.<\/p>\n\n\n\n<p>Dalla prima sezione, <em>Location Rules<\/em>, Advanced Custom Fields ci permette di scegliere a quali contenuti del nostro sito associare il gruppo di campi che abbiamo creato.<\/p>\n\n\n\n<p>Possiamo mostrare i campi in base a tipo di contenuto: articoli, pagine o <a href=\"https:\/\/supporthost.com\/it\/custom-post-type\/\" data-type=\"post\" data-id=\"44303\">custom post type<\/a>.<\/p>\n\n\n\n<p>Oppure possiamo scegliere se mostrarli solo per gli articoli che appartengono a una determinata categoria o a una serie di categorie.<\/p>\n\n\n\n<p>Per impostare il gruppo di campi solo per gli articoli, usiamo questa impostazione:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"254\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/location-rules-di-acf-1024x254.png\" alt=\"Location Rules Di Acf\" class=\"wp-image-44021\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/location-rules-di-acf-1024x254.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/location-rules-di-acf-300x75.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/location-rules-di-acf-768x191.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/location-rules-di-acf-120x30.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/location-rules-di-acf.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cambiare-laspetto-della-compilazione-dei-campi-personalizzati\">Cambiare l&#8217;aspetto della compilazione dei campi personalizzati<\/h3>\n\n\n\n<p>Per impostazione predefinita, i campi personalizzati creati con ACF verranno mostrati nell&#8217;editor al di sotto del contenuto dell&#8217;articolo, come vedi in questo esempio:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"516\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-creati-con-acf-editor-wordpress-1024x516.png\" alt=\"Campi Personalizzati Creati Con Acf Editor WordPress\" class=\"wp-image-44022\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-creati-con-acf-editor-wordpress-1024x516.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-creati-con-acf-editor-wordpress-300x151.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-creati-con-acf-editor-wordpress-768x387.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-creati-con-acf-editor-wordpress-120x61.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-creati-con-acf-editor-wordpress.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Modificando le impostazioni per il gruppo di campi e tramite la scheda &#8220;<strong>Presentazione<\/strong>&#8221; possiamo modificare il modo in cui i campi verranno mostrati nell&#8217;editor di WordPress.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"539\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/scheda-presentazione-impostazioni-campi-acf-1024x539.png\" alt=\"Scheda Presentazione Impostazioni Campi Acf\" class=\"wp-image-44241\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/scheda-presentazione-impostazioni-campi-acf-1024x539.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/scheda-presentazione-impostazioni-campi-acf-300x158.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/scheda-presentazione-impostazioni-campi-acf-768x404.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/scheda-presentazione-impostazioni-campi-acf-120x63.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/scheda-presentazione-impostazioni-campi-acf.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ecco le opzioni che abbiamo.<\/p>\n\n\n\n<p><strong>Posizione<\/strong>: l&#8217;impostazione predefinita \u00e8 &#8220;Normale (dopo il contenuto)&#8221; e viene mostrata come nell&#8217;esempio di prima. Possiamo anche scegliere di mostrarli <strong>lateralmente<\/strong>, come vedi qui:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"351\" height=\"829\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-acf-posizione-laterale-editor-wordpress.png\" alt=\"Campi Personalizzati Acf Posizione Laterale Editor WordPress\" class=\"wp-image-44023\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-acf-posizione-laterale-editor-wordpress.png 351w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-acf-posizione-laterale-editor-wordpress-127x300.png 127w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-acf-posizione-laterale-editor-wordpress-27x63.png 27w\" sizes=\"auto, (max-width: 351px) 100vw, 351px\" \/><\/figure>\n\n\n\n<p><strong>Posizione etichetta<\/strong>: possiamo modificare le etichette in modo che vengano mostrate a sinistra rispetto al campo anzich\u00e9 in alto, come vedi qui:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"277\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-acf-posizione-etichetta-a-sinistra-1024x277.png\" alt=\"Campi Personalizzati Acf Posizione Etichetta A Sinistra\" class=\"wp-image-44024\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-acf-posizione-etichetta-a-sinistra-1024x277.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-acf-posizione-etichetta-a-sinistra-300x81.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-acf-posizione-etichetta-a-sinistra-768x208.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-acf-posizione-etichetta-a-sinistra-120x33.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-personalizzati-acf-posizione-etichetta-a-sinistra.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Posizione istruzioni<\/strong>: possiamo inserire le istruzioni in modo che appaiano sotto le etichette o sotto i campi. Nell&#8217;esempio precedente le istruzioni vengono mostrate sotto le etichette come puoi vedere dal testo al di sotto dell&#8217;etichetta &#8220;Nome&#8221;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"gestire-i-gruppi-di-campi\">Gestire i gruppi di campi<\/h3>\n\n\n\n<p>Andando su <em>ACF &gt; Gruppi di campi<\/em> possiamo gestire i gruppi che abbiamo creato. Attraverso le opzioni che compaiono sotto il nome del gruppo possiamo:<\/p>\n\n\n\n<ul>\n<li>modificare<\/li>\n\n\n\n<li>duplicare<\/li>\n\n\n\n<li>disattivare<\/li>\n\n\n\n<li>spostare nel cestino.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"320\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/gestire-i-gruppi-di-campi-advanced-custom-fields-1024x320.png\" alt=\"Gestire I Gruppi Di Campi Advanced Custom Fields\" class=\"wp-image-44025\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/gestire-i-gruppi-di-campi-advanced-custom-fields-1024x320.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/gestire-i-gruppi-di-campi-advanced-custom-fields-300x94.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/gestire-i-gruppi-di-campi-advanced-custom-fields-768x240.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/gestire-i-gruppi-di-campi-advanced-custom-fields-120x38.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/gestire-i-gruppi-di-campi-advanced-custom-fields.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"come-visualizzare-i-campi-personalizzati-in-pagine-e-articoli\">Come visualizzare i campi personalizzati in pagine e articoli<\/h3>\n\n\n\n<p>L&#8217;inserimento dei campi personalizzati attraverso l&#8217;editor di WordPress non \u00e8 sufficiente a mostrarli nei nostri contenuti.<\/p>\n\n\n\n<p>Infatti, se proviamo a compilare i campi personalizzati aggiunti a un articolo e lo pubblichiamo, non vedremo queste informazioni nell&#8217;articolo.<\/p>\n\n\n\n<p>Per poter visualizzare i campi aggiuntivi creati con ACF possiamo usare diversi metodi.<\/p>\n\n\n\n<p>Visto che questo vuole essere un tutorial completo su Advanced Custom Fields, andiamo a vedere esattamente come fare a mostrare i campi personalizzati nel nostro sito WordPress con degli esempi reali.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"modificare-i-template-del-tema\">Modificare i template del tema<\/h4>\n\n\n\n<p>Dopo aver creato un gruppo di campi con Advanced Custom Fields possiamo mostrare i dati che abbiamo inserito nei campi personalizzati andando a <strong>modificare il tema<\/strong> del nostro sito WordPress.<\/p>\n\n\n\n<p class=\"note\"><strong>Nota importante<\/strong>: \u00e8 altamente raccomandato <a href=\"https:\/\/supporthost.com\/it\/tema-child\/\" data-type=\"post\" data-id=\"23609\">creare un tema child<\/a> in modo da non dover modificare direttamente i file del tema e non rischiare di perdere tutto il lavoro fatto quando aggiorneremo il tema.<\/p>\n\n\n\n<p>Per mostrare i dati inseriti nei campi personalizzati possiamo usare le funzioni di ACF. In particolare ci vengono in aiuto queste due funzioni:<\/p>\n\n\n\n<ul>\n<li><code>get_field ()<\/code> ci permette di recuperare il valore del campo come variabile, \u00e8 utile se dobbiamo usare il valore come variabile per un&#8217;altra funzione.<\/li>\n\n\n\n<li><code>the_field ()<\/code> (ha la stessa funzione di <code>echo get_field ()<\/code>) e ci permette di mostrare in output il valore del campo.<\/li>\n<\/ul>\n\n\n\n<p>Per maggiori informazioni ed esempi di casi d&#8217;uso puoi fare riferimento alla <a href=\"https:\/\/www.advancedcustomfields.com\/resources\/#functions\" rel=\"noopener\">documentazione<\/a> di ACF sulle funzioni.<\/p>\n\n\n\n<p>Se vuoi mostrare i campi personalizzati all&#8217;interno degli <strong>articol<\/strong><strong>i<\/strong>, uno dei metodi pi\u00f9 semplici \u00e8 creare un tema child e andare a modificare il file single.php. Questo file rappresenta il template che WordPress utilizza per gli articoli del blog.<\/p>\n\n\n\n<p>Il file specifico da andare a modificare dipende dal tema in uso. Se utilizziamo uno dei temi predefiniti di WordPress, Twenty Twenty-One, e apriamo il file &#8220;single.php&#8221;, vediamo che esso richiama a sua volta un file chiamato &#8220;content-single&#8221;. Quest&#8217;ultimo \u00e8 il file che dobbiamo andare a modificare per poter mostrare i nostri campi personalizzati.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"834\" height=\"518\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/content-single-tema-twenty-twenty-one.png\" alt=\"Content Single Tema Twenty Twenty One\" class=\"wp-image-44026\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/content-single-tema-twenty-twenty-one.png 834w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/content-single-tema-twenty-twenty-one-300x186.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/content-single-tema-twenty-twenty-one-768x477.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/content-single-tema-twenty-twenty-one-101x63.png 101w\" sizes=\"auto, (max-width: 834px) 100vw, 834px\" \/><\/figure>\n\n\n\n<p>Il file si trova al seguente percorso:<\/p>\n\n\n\n<p>wp-content\/themes\/twentytwentyone\/template-parts\/content\/content-single.php<\/p>\n\n\n\n<p>Se, invece, volessimo mostrare i campi personalizzati all&#8217;interno delle <strong>pagine<\/strong>, dovremmo andare a modificare il file page.php, vale a dire il template utilizzato per le pagine.<\/p>\n\n\n\n<p>Nel caso del tema Twenty Twenty-One, aprendo il file &#8220;page.php&#8221;, possiamo risalire al file del template da andare a modificare: &#8220;content-page&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"918\" height=\"694\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/content-page-tema-twenty-twenty-one.png\" alt=\"Content Page Tema Twenty Twenty One\" class=\"wp-image-44027\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/content-page-tema-twenty-twenty-one.png 918w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/content-page-tema-twenty-twenty-one-300x227.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/content-page-tema-twenty-twenty-one-768x581.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/content-page-tema-twenty-twenty-one-83x63.png 83w\" sizes=\"auto, (max-width: 918px) 100vw, 918px\" \/><\/figure>\n\n\n\n<p>Possiamo trovare il file nella stessa cartella che abbiamo visto prima.<\/p>\n\n\n\n<p>Dopo aver capito quali sono i file da modificare, non ci resta che utilizzare le funzioni che abbiamo visto prima per richiamare i dati inseriti all&#8217;interno dei campi personalizzati di ACF.<\/p>\n\n\n\n<p>Ecco l&#8217;esempio pi\u00f9 semplice di <strong>funzione<\/strong> che ci permette di richiamare e mostrare in output un campo specifico:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php the_field('nome_campo'); ?&gt;<\/code><\/pre>\n\n\n\n<p>Ci basta andare a sostituire nome_campo con il nome del campo che vogliamo mostrare.<\/p>\n\n\n\n<p>Usando i tag HTML e le funzioni di ACF possiamo mostrare i diversi campi personalizzati. Qui ti riporto un esempio di codice che abbiamo utilizzato per mostrare i campi che abbiamo creato. Come vedi il codice va inserito dopo &#8220;<code>&lt;div class=\"entry-content\"&gt;<\/code>&#8220;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"861\" height=\"402\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-template-per-mostrare-campi-personalizzati.png\" alt=\"Esempio Di Template Per Mostrare Campi Personalizzati\" class=\"wp-image-44028\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-template-per-mostrare-campi-personalizzati.png 861w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-template-per-mostrare-campi-personalizzati-300x140.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-template-per-mostrare-campi-personalizzati-768x359.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-template-per-mostrare-campi-personalizzati-120x56.png 120w\" sizes=\"auto, (max-width: 861px) 100vw, 861px\" \/><\/figure>\n\n\n\n<p>Il codice che abbiamo inserito \u00e8 il seguente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>                &lt;?php $img = get_field('copertina'); ?&gt;\n\t    \t&lt;div&gt;\n\t\t&lt;img style=\"margin:auto\" src=&lt;?php echo $img&#091;'sizes']&#091;'large'] ?&gt; &gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;ul&gt;\n\t\t    &lt;li&gt;&lt;strong&gt;Nome: &lt;\/strong&gt;&lt;?php the_field('nome');?&gt;&lt;\/li&gt;\n\t\t    &lt;li&gt;&lt;strong&gt;Data di Uscita: &lt;\/strong&gt;&lt;?php the_field('data_di_uscita');?&gt;&lt;\/li&gt;\n\t\t    &lt;li&gt;&lt;strong&gt;Piattaforme: &lt;\/strong&gt;&lt;?php the_field('piattaforme');?&gt;&lt;\/li&gt;\n\t\t&lt;\/ul&gt;\n\t\t&lt;?php<\/code><\/pre>\n\n\n\n<p>Andando ad aggiornare l&#8217;elemento in cui abbiamo inserito i campi personalizzati, vedremo che i campi vengono mostrati in alto <strong>prima del contenuto dell&#8217;articolo<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"764\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-articolo-con-campi-personalizzati-acf-1024x764.png\" alt=\"Esempio Di Articolo Con Campi Personalizzati Acf\" class=\"wp-image-44029\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-articolo-con-campi-personalizzati-acf-1024x764.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-articolo-con-campi-personalizzati-acf-300x224.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-articolo-con-campi-personalizzati-acf-768x573.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-articolo-con-campi-personalizzati-acf-84x63.png 84w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-di-articolo-con-campi-personalizzati-acf.png 1054w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Per farlo abbiamo inserito il nostro codice <strong>prima <\/strong>della funzione <code>the_content()<\/code> che WordPress utilizza per mostrare il contenuto degli articoli e delle pagine. Invece, per mostrare i tuoi campi personalizzati <strong>dopo <\/strong>il contenuto dell&#8217;articolo (o pagina) ti baster\u00e0 inserire il codice dopo la funzione <code>the_content()<\/code>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"usare-gli-shortcode-di-acf\">Usare gli shortcode di ACF<\/h4>\n\n\n\n<p>Advanced Custom Fields ci permette di utilizzare degli <strong>shortcode <\/strong>per avere lo stesso risultato della funzione &#8220;<code>the_field()<\/code>&#8220;. Se non sai cosa sono, ti rimandiamo alla nostra <a href=\"https:\/\/supporthost.com\/it\/wordpress-shortcode\/\">guida di approfondimento dedicata agli shortcode<\/a>.<\/p>\n\n\n\n<p>Possiamo usare gli shortcode direttamente all&#8217;interno dei nostri articoli (dall&#8217;editor) senza dover andare a modificare i file del tema.<\/p>\n\n\n\n<p>Questo sistema per\u00f2 non \u00e8 pratico, perch\u00e9 ogni volta che creiamo un articolo (o una pagina) dovremo usare gli shortcode per richiamare i valori dei campi personalizzati.<\/p>\n\n\n\n<p>Invece, con il metodo che abbiamo visto prima, possiamo creare un <strong>template da applicare a tutti gli articoli<\/strong>.<\/p>\n\n\n\n<p>Tieni presente gli shortcode non si possono usare in tutti i casi, per esempio non possiamo usare il semplice shortcode che vedremo per mostrare un&#8217;immagine. Questo sistema pu\u00f2 essere usato per i tipi di campi pi\u00f9 semplici come testo, numeri o date.<\/p>\n\n\n\n<p>Questo \u00e8 lo shortcode che possiamo usare:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;acf field=\"nome_campo\"]<\/code><\/pre>\n\n\n\n<p>Dovremo andare a sostituire &#8220;nome_campo&#8221; con i nomi dei campi che abbiamo creato, come in questo esempio:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"491\" height=\"229\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/mostrare-campi-personalizzati-con-shortcode-acf.png\" alt=\"Mostrare Campi Personalizzati Con Shortcode Acf\" class=\"wp-image-44030\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/mostrare-campi-personalizzati-con-shortcode-acf.png 491w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/mostrare-campi-personalizzati-con-shortcode-acf-300x140.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/mostrare-campi-personalizzati-con-shortcode-acf-120x56.png 120w\" sizes=\"auto, (max-width: 491px) 100vw, 491px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"come-usare-advanced-custom-fields-con-oxygen-builder\">Come usare Advanced Custom Fields con Oxygen Builder<\/h4>\n\n\n\n<p>Dopo aver creato i nostri campi personalizzati con ACF possiamo mostrarli all&#8217;interno delle pagine in maniera molto semplice se stiamo utilizzando <a href=\"https:\/\/supporthost.com\/it\/oxygen-builder\/\" data-type=\"post\" data-id=\"24532\">Oxygen Builder<\/a> come site builder.<\/p>\n\n\n\n<p>Per prima cosa dobbiamo assicurarci che i campi vengano prelevati correttamente dal plugin. Per farlo dobbiamo verificare che sia attiva un&#8217;impostazione.<\/p>\n\n\n\n<p>Vai su <em>Oxygen &gt; Settings<\/em> e poi controlla che nella scheda <em>General<\/em>, l&#8217;opzione &#8220;Show all ACF fields in the Dynamic Data Dialog&#8221; sia attiva. Se non lo fosse, attivala e clicca su <em>Salva le modifiche.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"458\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/mostrare-campi-acf-con-oxygen-builder-impostazioni-1024x458.png\" alt=\"Mostrare Campi Acf Con Oxygen Builder Impostazioni\" class=\"wp-image-44031\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/mostrare-campi-acf-con-oxygen-builder-impostazioni-1024x458.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/mostrare-campi-acf-con-oxygen-builder-impostazioni-300x134.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/mostrare-campi-acf-con-oxygen-builder-impostazioni-768x344.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/mostrare-campi-acf-con-oxygen-builder-impostazioni-120x54.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/mostrare-campi-acf-con-oxygen-builder-impostazioni.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Adesso modifichiamo con l&#8217;editor di Oxygen la pagina o il template in cui vogliamo inserire i nostri campi personalizzati.<\/p>\n\n\n\n<p>Per richiamare i campi inseriti con ACF ci basta usare la funzione di <strong>dati dinamici<\/strong> di Oxygen, i nostri campi infatti compariranno nel menu &#8220;<em>Insert Data<\/em>&#8221; del builder.<\/p>\n\n\n\n<p>Ci baster\u00e0 quindi inserire un semplice elemento di testo, e poi cliccare sul pulsante dal menu superiore &#8220;Insert Data&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/insert-data-oxygen-builder-per-campi-acf-1024x682.png\" alt=\"Insert Data Oxygen Builder Per Campi Acf\" class=\"wp-image-44033\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/insert-data-oxygen-builder-per-campi-acf-1024x682.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/insert-data-oxygen-builder-per-campi-acf-300x200.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/insert-data-oxygen-builder-per-campi-acf-768x512.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/insert-data-oxygen-builder-per-campi-acf-95x63.png 95w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/insert-data-oxygen-builder-per-campi-acf.png 1163w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Si aprir\u00e0 una schermata di selezione in cui potremo cliccare su <em>Advanced Custom Field<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"247\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/oxygen-dynamic-data-advanced-custom-field-1024x247.png\" alt=\"Oxygen Dynamic Data Advanced Custom Field\" class=\"wp-image-44034\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/oxygen-dynamic-data-advanced-custom-field-1024x247.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/oxygen-dynamic-data-advanced-custom-field-300x73.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/oxygen-dynamic-data-advanced-custom-field-768x186.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/oxygen-dynamic-data-advanced-custom-field-120x29.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/oxygen-dynamic-data-advanced-custom-field.png 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Vedremo quindi tutta la lista dei campi che abbiamo creato.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1016\" height=\"204\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/lista-dei-campi-acf-oxygen.png\" alt=\"Lista Dei Campi Acf Oxygen\" class=\"wp-image-44035\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/lista-dei-campi-acf-oxygen.png 1016w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/lista-dei-campi-acf-oxygen-300x60.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/lista-dei-campi-acf-oxygen-768x154.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/lista-dei-campi-acf-oxygen-120x24.png 120w\" sizes=\"auto, (max-width: 1016px) 100vw, 1016px\" \/><\/figure>\n\n\n\n<p>A questo punto in base al <strong>tipo di campo<\/strong> che stiamo inserendo, Oxygen ci permetter\u00e0 di definire delle <strong>opzioni <\/strong>specifiche.<\/p>\n\n\n\n<p>Ad esempio se inseriamo un <strong>campo immagine<\/strong> possiamo scegliere se inserire un elemento immagine e definirne anche le dimensioni prima di inserirlo, come vedi qui:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"565\" height=\"464\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/opzioni-campo-immagine-acf-oxygen.png\" alt=\"Opzioni Campo Immagine Acf Oxygen\" class=\"wp-image-44037\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/opzioni-campo-immagine-acf-oxygen.png 565w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/opzioni-campo-immagine-acf-oxygen-300x246.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/opzioni-campo-immagine-acf-oxygen-77x63.png 77w\" sizes=\"auto, (max-width: 565px) 100vw, 565px\" \/><\/figure>\n\n\n\n<p><strong>Suggerimento<\/strong>: per inserire un campo immagine, \u00e8 preferibile inserire un elemento immagine con Oxygen e poi cliccare sul pulsante &#8220;data&#8221;, come ti mostro qui. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"375\" height=\"401\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/inserire-campo-immagine-di-acf-con-oxygen-builder.png\" alt=\"Inserire Campo Immagine Di Acf Con Oxygen Builder\" class=\"wp-image-44242\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/inserire-campo-immagine-di-acf-con-oxygen-builder.png 375w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/inserire-campo-immagine-di-acf-con-oxygen-builder-281x300.png 281w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/inserire-campo-immagine-di-acf-con-oxygen-builder-59x63.png 59w\" sizes=\"auto, (max-width: 375px) 100vw, 375px\" \/><\/figure>\n\n\n\n<p>Dopodich\u00e9 potrai selezionare &#8220;Advanced custom field&#8221; e poi scegliere il tipo di campo (ti verranno mostrati solo i campi immagine creati con ACF). In questo modo potrai modificare l&#8217;elemento da Oxygen scegliendo la dimensione e tutte le altre impostazioni.<\/p>\n\n\n\n<p>Se stiamo inserendo un <strong>campo che prevede pi\u00f9 opzioni<\/strong> (nel nostro esempio si tratta di un campo di ACF del tipo &#8220;seleziona&#8221;), Oxygen ci permette di scegliere che separatore usare.<\/p>\n\n\n\n<p><strong>Suggerimento<\/strong>: devi inserire nel box separatore anche gli spazi, per esempio una virgola seguita da uno spazio, per separare gli elementi.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"664\" height=\"276\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/opzioni-campi-con-piu-elementi-acf-oxygen.png\" alt=\"Opzioni Campi Con Piu Elementi Acf Oxygen\" class=\"wp-image-44038\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/opzioni-campi-con-piu-elementi-acf-oxygen.png 664w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/opzioni-campi-con-piu-elementi-acf-oxygen-300x125.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/opzioni-campi-con-piu-elementi-acf-oxygen-120x50.png 120w\" sizes=\"auto, (max-width: 664px) 100vw, 664px\" \/><\/figure>\n\n\n\n<p>Quando inseriamo un <strong>campo data<\/strong> possiamo scegliere il formato da usare, come vedi in questo esempio:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"553\" height=\"252\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/opzioni-campo-data-acf-oxygen.png\" alt=\"Opzioni Campo Data Acf Oxygen\" class=\"wp-image-44039\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/opzioni-campo-data-acf-oxygen.png 553w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/opzioni-campo-data-acf-oxygen-300x137.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/opzioni-campo-data-acf-oxygen-120x55.png 120w\" sizes=\"auto, (max-width: 553px) 100vw, 553px\" \/><\/figure>\n\n\n\n<p>Ogni campo che inseriamo viene trasformato in uno shortcode di Oxygen come vedi in questo esempio:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"778\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-di-acf-inseriti-in-oxygen-1024x778.png\" alt=\"Campi Di Acf Inseriti In Oxygen\" class=\"wp-image-44040\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-di-acf-inseriti-in-oxygen-1024x778.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-di-acf-inseriti-in-oxygen-300x228.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-di-acf-inseriti-in-oxygen-768x583.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-di-acf-inseriti-in-oxygen-83x63.png 83w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campi-di-acf-inseriti-in-oxygen.png 1085w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dopo aver inserito i vari campi creati con ACF, possiamo formattare il testo ma anche inserire gli shortcode all&#8217;interno di elenchi puntati, come abbiamo fatto qui:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"783\" height=\"711\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-acf-lista-oxygen.png\" alt=\"Esempio Acf Lista Oxygen\" class=\"wp-image-44041\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-acf-lista-oxygen.png 783w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-acf-lista-oxygen-300x272.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-acf-lista-oxygen-768x697.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/esempio-acf-lista-oxygen-69x63.png 69w\" sizes=\"auto, (max-width: 783px) 100vw, 783px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"alternative-ad-avanced-custom-fields\">Alternative ad Avanced Custom Fields<\/h2>\n\n\n\n<p>Ora che siamo arrivati alla conclusione di questa guida su come usare Avanced Custom Fields, vediamo quali sono le alternative a questo plugin.<\/p>\n\n\n\n<p>Andiamo a vedere altri <a href=\"https:\/\/supporthost.com\/it\/plugin-wordpress\/\" data-type=\"post\" data-id=\"16110\">plugin WordPress<\/a> che ci permettono di creare e gestire campi personalizzati con dei rapidi suggerimenti su come usarli e che funzioni includono.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"pods\">Pods<\/h3>\n\n\n\n<p>Il plugin <a href=\"https:\/\/wordpress.org\/plugins\/pods\/\" rel=\"noopener\">Pods<\/a> ci permette di creare campi personalizzati e custom post types.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"565\" height=\"404\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/plugin-pods-per-campi-personalizzati-wordpress.png\" alt=\"Plugin Pods Per Campi Personalizzati WordPress\" class=\"wp-image-44250\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/plugin-pods-per-campi-personalizzati-wordpress.png 565w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/plugin-pods-per-campi-personalizzati-wordpress-300x215.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/plugin-pods-per-campi-personalizzati-wordpress-88x63.png 88w\" sizes=\"auto, (max-width: 565px) 100vw, 565px\" \/><\/figure>\n\n\n\n<p>Con questo plugin possiamo aggiungere diversi tipi di campi personalizzati e mostrarli nelle pagine e articoli di WordPress in diversi modi. Per esempio usando gli <strong>shortcode <\/strong>oppure direttamente i <strong>blocchi <\/strong>che vengono aggiunti dal plugin nell&#8217;editor di WordPress e che troviamo nella lista dei blocchi.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"493\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/pods-campi-personalizzati-inseriti-come-blocchi-1024x493.png\" alt=\"Pods Campi Personalizzati Inseriti Come Blocchi\" class=\"wp-image-44251\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/pods-campi-personalizzati-inseriti-come-blocchi-1024x493.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/pods-campi-personalizzati-inseriti-come-blocchi-300x145.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/pods-campi-personalizzati-inseriti-come-blocchi-768x370.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/pods-campi-personalizzati-inseriti-come-blocchi-120x58.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/pods-campi-personalizzati-inseriti-come-blocchi.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I campi disponibili sono pi\u00f9 di 20 e includono testo, date, numeri, valute, selettori di colore e cos\u00ec via.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"easy-post-types-and-fields\">Easy Post Types and Fields<\/h3>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/easy-post-types-fields\/\" rel=\"noopener\">Easy Post Types and Fields<\/a> ci permette di creare campi personalizzati e custom post type ai nostri siti WordPress. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"553\" height=\"424\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/easy-post-types-and-fields-plugin-wordpress.png\" alt=\"Easy Post Types And Fields Plugin WordPress\" class=\"wp-image-44253\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/easy-post-types-and-fields-plugin-wordpress.png 553w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/easy-post-types-and-fields-plugin-wordpress-300x230.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/easy-post-types-and-fields-plugin-wordpress-82x63.png 82w\" sizes=\"auto, (max-width: 553px) 100vw, 553px\" \/><\/figure>\n\n\n\n<p>Appena installato si avvia una procedura guidata che ci accompagna nella creazione di un custom post type.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"230\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/procedura-guidata-easy-post-types-and-fields-1024x230.png\" alt=\"Procedura Guidata Easy Post Types And Fields\" class=\"wp-image-44252\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/procedura-guidata-easy-post-types-and-fields-1024x230.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/procedura-guidata-easy-post-types-and-fields-300x67.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/procedura-guidata-easy-post-types-and-fields-768x172.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/procedura-guidata-easy-post-types-and-fields-120x27.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/procedura-guidata-easy-post-types-and-fields.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Il plugin \u00e8 volutamente <strong>semplificato <\/strong>e ci permette di creare due soli tipi di campi personalizzati: &#8220;testo&#8221; o &#8220;visual editor&#8221;, il secondo tipo inserisce un vero e proprio editor come l&#8217;editor classico di WordPress da cui possiamo inserire anche file media.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"230\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-visual-editor-di-easy-post-types-and-fields-1024x230.png\" alt=\"Campo Visual Editor Di Easy Post Types And Fields\" class=\"wp-image-44254\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-visual-editor-di-easy-post-types-and-fields-1024x230.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-visual-editor-di-easy-post-types-and-fields-300x67.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-visual-editor-di-easy-post-types-and-fields-768x172.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-visual-editor-di-easy-post-types-and-fields-120x27.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/campo-visual-editor-di-easy-post-types-and-fields.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>A differenza di ACF, questo plugin non ci permette di creare campi personalizzati pi\u00f9 avanzati come selettori di data o scelte multiple.<\/p>\n\n\n\n<p>Per mostrare i campi personalizzati e i custom post type creati con il plugin Easy Post Types and Fields, viene suggerito l&#8217;uso di un altro plugin &#8220;Posts Table Pro&#8221;, si tratta di un plugin a pagamento che ci permette di mostrare le informazioni inserite nei campi sotto forma di tabella.<\/p>\n\n\n\n<p>Per visualizzare i campi con altri metodi, bisogna fare riferimento alla <a href=\"https:\/\/barn2.com\/kb\/actions-filters-ept\/\" rel=\"noopener\">documentazione del plugin<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"meta-box\">Meta Box<\/h3>\n\n\n\n<p>Un altro plugin che ci permette di aggiunger custom field su WordPress \u00e8 <a href=\"https:\/\/wordpress.org\/plugins\/meta-box\/\" rel=\"noopener\">Meta Box<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"559\" height=\"471\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/meta-box-plugin-wordpress-custom-field.png\" alt=\"Meta Box Plugin WordPress Custom Field\" class=\"wp-image-44255\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/meta-box-plugin-wordpress-custom-field.png 559w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/meta-box-plugin-wordpress-custom-field-300x253.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/meta-box-plugin-wordpress-custom-field-75x63.png 75w\" sizes=\"auto, (max-width: 559px) 100vw, 559px\" \/><\/figure>\n\n\n\n<p>Oltre al plugin principale, \u00e8 possibile utilizzare anche le estensioni degli stessi sviluppatori per mostrare i campi personalizzati nel tema senza dover andare a modificare il codice. Per esempio l&#8217;estensione &#8220;Meta Box &#8211; Beaver Themer Integrator&#8221; consente di mostrare i custom field con Beaver Builder.<\/p>\n\n\n\n<p>\u00c8 possibile anche andare a modificare i template usando le funzioni di Meta Box:<\/p>\n\n\n\n<ul>\n<li>rwmb_get_value(): per prelevare il valore del campo come variabile;<\/li>\n\n\n\n<li>rwmb_the_value(): per mostrare il campo.<\/li>\n<\/ul>\n\n\n\n<p>Puoi trovare tutti i dettagli ed esempi specifici nella <a href=\"https:\/\/docs.metabox.io\/displaying-fields-with-code\/\" rel=\"noopener\">documentazione<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"custom-field-suite\">Custom Field Suite<\/h3>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/custom-field-suite\/\" rel=\"noopener\">Custom Field Suite<\/a> \u00e8 un plugin gratuito di WordPress che ci permette di aggiungere campi personalizzati a post e pagine.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"559\" height=\"476\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/custom-field-suite-plugin-wordpress.png\" alt=\"Custom Field Suite Plugin WordPress\" class=\"wp-image-44256\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/custom-field-suite-plugin-wordpress.png 559w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/custom-field-suite-plugin-wordpress-300x255.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/custom-field-suite-plugin-wordpress-74x63.png 74w\" sizes=\"auto, (max-width: 559px) 100vw, 559px\" \/><\/figure>\n\n\n\n<p>Include <strong>14 tipi di campi<\/strong> tra cui testo, data, colore e selettore. Il funzionamento \u00e8 molto semplice basta creare un gruppo di campi, aggiungere i campi personalizzati e scegliere a che tipo di contenuto associarli (articoli o pagine).<\/p>\n\n\n\n<p>Dopodich\u00e9 per visualizzare i campi nel template si pu\u00f2 usare il metodo <em>get<\/em> con questa funzione:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\necho CFS()-&gt;get( 'field_name' );<\/code><\/pre>\n\n\n\n<p>Andando a sostituire &#8220;field_name&#8221; con il nome del campo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusioni\">Conclusioni<\/h2>\n\n\n\n<p>In questa guida dettagliata abbiamo visto due metodi diversi per aggiungere i custom field al nostro sito WordPress:<\/p>\n\n\n\n<ul>\n<li>usando la <strong>funzione nativa<\/strong>;<\/li>\n\n\n\n<li>utilizzando <strong>Advanced Custom Fields<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>Abbiamo poi fatto una carrellata delle <strong>alternative a ACF<\/strong> e visto quali altri plugin usare per aggiungere custom field al nostro sito.<\/p>\n\n\n\n<p>Adesso sai come creare campi personalizzati, gestirli e mostrarli sul tuo sito WordPress in maniera semplice. <\/p>\n\n\n\n<p>Quale metodo preferisci usare per i campi personalizzati e perch\u00e9? Per cosa li usi sul tuo sito? Lascia un commento per farcelo sapere.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In questa guida ti mostrer\u00f2 come usare Advanced Custom Fields per creare campi personalizzati su WordPress. Creare dei campi da mostrare nel sito non \u00e8 difficile, vedremo degli esempi pratici che ti aiuteranno a farlo con diversi metodi. Per prima cosa, per\u00f2, scopriamo di pi\u00f9 sui campi personalizzati di WordPress e su come attivare la [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":63594,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[33],"tags":[],"class_list":["post-44001","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/44001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/comments?post=44001"}],"version-history":[{"count":6,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/44001\/revisions"}],"predecessor-version":[{"id":73327,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/44001\/revisions\/73327"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media\/63594"}],"wp:attachment":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media?parent=44001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/categories?post=44001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/tags?post=44001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}