Come aggiungere caselle Meta personalizzate nei post di WordPress e nei tipi di post

Vuoi creare dei meta box personalizzati per i tuoi post, pagine e tipi di post personalizzati di WordPress? I meta box personalizzati vengono comunemente utilizzati per fornire un'interfaccia utente migliore per l'aggiunta di campi personalizzati (metadati) nei contenuti. In questo articolo, spiegheremo cos'è una meta box personalizzata e come è possibile aggiungere facilmente meta box personalizzati nei post e nei tipi di post di WordPress.

Cos'è una Meta Box personalizzata in WordPress?

La meta box personalizzata è un'interfaccia più intuitiva per aggiungere campi personalizzati (metadati) nei tuoi post, pagine e altri tipi di post personalizzati.

WordPress ha un'interfaccia facile da usare che ti aiuta a creare contenuti come post e pagine o tipi di post personalizzati.

Normalmente, ogni tipo di contenuto è costituito dal contenuto effettivo e dai suoi metadati. I metadati sono informazioni correlate a quel contenuto come data e ora, nome dell'autore, titolo e altro. Puoi anche aggiungere i tuoi metadati utilizzando i campi personalizzati.

Tuttavia, l'aggiunta di metadati utilizzando la casella dei campi personalizzati predefiniti non è molto intuitiva. È qui che entrano in gioco i meta-box personalizzati.

WordPress consente agli sviluppatori di creare e aggiungere i propri meta box personalizzati nelle schermate di post-editing. Ecco come i plug-in più popolari aggiungono diverse opzioni nelle schermate di modifica dei post.

Ad esempio, il titolo SEO e la casella meta description all'interno del plug-in SEO Yoast è una meta box personalizzata:

Detto questo, vediamo come è possibile aggiungere facilmente meta box personalizzati nei post e nei tipi di post di WordPress.

Creazione di Meta Box personalizzate in WordPress

Per prima cosa, devi installare e attivare il plug-in Campi personalizzati avanzati. Per ulteriori dettagli, consulta la nostra guida passo passo su come installare un plug-in di WordPress.

All'attivazione, il plugin aggiunge una nuova voce di menu con l'etichetta "Campi personalizzati" alla barra di amministrazione di WordPress. Cliccando su di esso ti porterà alla pagina dei campi personalizzati.

Questa pagina sarà vuota poiché non hai ancora creato campi personalizzati. Vai avanti e fai clic sul pulsante "Aggiungi nuovo" per continuare.

Verrai indirizzato alla pagina "Aggiungi nuovo gruppo di campi".

Qui è necessario fornire un titolo per il proprio gruppo di campi. Questo titolo sarà usato come titolo della tua meta-scatola.

Dopo di ciò puoi iniziare ad aggiungere i tuoi campi. Basta fare clic sul pulsante '+ Aggiungi campo' per aggiungere il tuo primo campo.

Questo farà apparire il modulo delle impostazioni sul campo. Per prima cosa devi fornire un'etichetta per il tuo campo. Questa etichetta verrà visualizzata nella tua casella di meta prima del campo.

Dopodiché è necessario selezionare il tipo di campo. Il plugin Advanced Fields personalizzati ti consente di scegliere tra una vasta gamma di opzioni. Questo include testo, textarea, pulsanti radio, caselle di controllo, editor WYSIWYG completo, immagini e altro.

Successivamente, è necessario fornire istruzioni sul campo. Queste istruzioni diranno agli utenti cosa aggiungere nel campo.

Sotto, troverai altre opzioni per il tuo campo. È necessario rivedere attentamente queste opzioni e regolarle in base alle proprie esigenze.

Quindi, fare clic sul pulsante Chiudi campo per comprimere il campo.

Se devi aggiungere più campi al tuo metabox, fai clic sul pulsante "+ Aggiungi campo" per aggiungere un altro campo.

Dopo aver aggiunto i campi, è possibile scorrere verso il basso fino alla sezione posizione. Qui è dove puoi definire quando e dove vuoi che venga visualizzata la tua meta-box.

I campi personalizzati avanzati includono una serie di regole predefinite tra cui scegliere. Ad esempio, è possibile selezionare tipi di post, categoria di post, tassonomia, pagina padre e altro.

Successivamente, arrivano le impostazioni delle opzioni di meta box.

Per prima cosa devi scegliere il numero dell'ordine. Se si dispone di più gruppi di campi definiti per una posizione, è possibile selezionare il numero dell'ordine per visualizzarli. Se non sei sicuro, lascialo come 0.

Successivamente, è necessario scegliere la posizione del meta box sulla pagina. Puoi scegliere di mostrarlo dopo il contenuto, prima del contenuto o nella colonna di destra.

Al di sotto di questo, dovrai scegliere uno stile per la tua meta-scatola. Puoi sceglierlo come tutte le altre meta box di WordPress, oppure puoi scegliere di essere senza cuciture (senza alcuna meta-box).

Se non si è sicuri, selezionare l'opzione Standard (casella WP Meta).

Infine, vedrai una lista di campi normalmente visualizzati in una schermata di modifica del post. Se vuoi nascondere un campo particolare nella schermata di modifica dei post, puoi controllarlo qui. Se non sei sicuro, è meglio lasciarli deselezionati.

Una volta che hai finito, fai clic sul pulsante di pubblicazione per rendere vivo il tuo gruppo di campi.

Complimenti, hai creato con successo la tua meta box personalizzata per il tuo post WordPress o il tipo di post.

A seconda delle impostazioni, ora puoi visitare il tuo post o il tuo tipo per vedere la tua meta-box personalizzata in azione.

Puoi utilizzare questa meta box personalizzata per aggiungere metadati nei tuoi post o tipi di post. Questi dati verranno memorizzati nel database di WordPress quando salvi o pubblichi il post.

Visualizzazione dei dati della casella Meta personalizzata nel tema WordPress

Finora abbiamo creato con successo una meta box personalizzata e l'abbiamo mostrata nella nostra schermata di modifica dei post. Il prossimo passo è visualizzare i dati memorizzati in quei campi sul tema WordPress.

Innanzitutto, è necessario modificare il gruppo di campi personalizzati creato in precedenza. Nella pagina "Modifica gruppo di campi", vedrai i tuoi campi personalizzati e i loro nomi.

Avrai bisogno di questi nomi di campi per visualizzarli sul tuo sito web.

Campi personalizzati avanzati ti consente di farlo in due modi diversi.

Innanzitutto, puoi utilizzare uno shortcode per visualizzare un campo personalizzato nel tuo post.

[acf field = "article_byline"]

Puoi anche visualizzarli aggiungendo il codice nei tuoi file di temi WordPress. Se non lo hai fatto prima, dai un'occhiata alla nostra guida per principianti su come copiare e incollare il codice in WordPress.

Sarà necessario modificare il file del tema in cui si desidera visualizzare i dati da questi campi. Ad esempio, single.php, content.php, page.php e così via.

Dovrai assicurarti di aggiungere il codice all'interno del ciclo di WordPress. Il modo più semplice per assicurarti di inserire il codice all'interno del ciclo è cercare una riga nel tuo codice che assomigli a questa:

Puoi incollare il tuo codice dopo questa riga e prima della linea che termina il ciclo:

Il codice di campo personalizzato sarà simile a questo:

Questo codice mostrerà i dati inseriti nel campo per riga dell'articolo della nostra meta-box personalizzata.

Si noti come abbiamo avvolto il codice in un'intestazione h2 con una classe CSS. Questo ci aiuterà a formattare e personalizzare il campo personalizzato in seguito aggiungendo CSS personalizzati nel nostro tema.

Ecco un altro esempio:

Non dimenticare di sostituire i nomi dei campi con i tuoi nomi di campo.

Ora puoi visitare il post in cui hai già inserito i dati nei tuoi campi personalizzati. Saresti in grado di vedere i tuoi metadati personalizzati visualizzati.

Advanced Custom Fields è un plugin molto potente con molte opzioni. Questo tutorial si limita a graffiare la superficie. Se hai bisogno di ulteriore aiuto, non dimenticare di consultare la documentazione del plugin su come estenderla ulteriormente.

Ci auguriamo che questo articolo ti abbia aiutato ad apprendere come aggiungere caselle meta personalizzate nei post e nei tipi di post di WordPress. Potresti anche voler vedere la nostra guida passo passo su come aumentare la velocità e le prestazioni di WordPress per i principianti.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.