Come utilizzare i campi personalizzati in WordPress

Mentre stavi scrivendo il tuo articolo precedente, potresti aver fatto scorrere l'area Campi personalizzati nell'editor dei post.

Questa semplice, ma potente funzionalità di WordPress, potrebbe passare inosservata ai principianti, ma in realtà è una funzionalità che può senza dubbio trasformare il tuo sito Web semplice e chiaro in un portale dinamico che attirerà nuovi visitatori.

Lascia che ti mostriamo di più sui campi personalizzati e su come usarli sul tuo sito.

Cosa sono i campi personalizzati e come funzionano

Cosa sono esattamente i campi personalizzati? Questi piccoli campi consentono a qualsiasi utente di inserire informazioni aggiuntive sul post . Questo è noto come meta-dati, ovvero "dati sui dati" e ti consente di allegare informazioni aggiuntive ai tuoi post. I valori che puoi inserire nei campi personalizzati possono variare da qualcosa di semplice come aggiungere un testo o un numero al tuo post, aggiungere immagini, cambiare stili attraverso il campo o effettivamente fare qualsiasi cosa ti passi per la mente.

Forse tutto sarà più chiaro con un esempio.

Immagina di gestire un sito web dedicato ai videogiochi . Scrivi notizie e pubblichi trailer, giochi con l'hardware di gioco in modo da poterne parlare e, naturalmente, scrivi recensioni dopo l'arrivo di nuovi giochi. Dopo aver scritto una recensione e inserito screenshot e video di gioco nell'articolo, probabilmente vorrai visualizzare informazioni importanti sul gioco.

Invece di nascondere le informazioni più importanti su un gioco nel lungo testo, potresti voler visualizzare il punteggio di un gioco, i nomi di sviluppatori ed editori che si collegano al loro sito Web, la data di rilascio, ecc. Sì, i campi personalizzati sono qualcosa che può aiutarti a fare il Magia.

Se consenti ai tuoi autori di inserire tali informazioni in un campo personalizzato, puoi facilmente estrarre le informazioni e visualizzarle oltre alla recensione . Hai visto infobox sui siti di recensioni. Se lo fai, tutte le recensioni possono avere un modello standardizzato: questo può migliorare l'esperienza dell'utente, sia sul davanti che sul retro.

Seguendo l'esempio del sito di giochi, finiresti per avere diversi campi personalizzati che i tuoi autori possono inserire e che mostri ai tuoi lettori:

Queste sono le informazioni che i tuoi autori inserirebbero nei campi personalizzati e puoi visualizzare le stesse in un post. Ma come?

Visualizza tutti i campi personalizzati:

Se hai solo un campo o vuoi mostrare tutti i tuoi campi nello stesso punto, puoi agganciare i tuoi meta-dati tutti in una volta con una semplice funzione:

1. Apri single.php
2. Trova la funzione the_content() e incolla questo codice prima o dopo di esso (a seconda di dove desideri visualizzare i campi personalizzati):

 <?php the_meta(); ?>

3. Salvare le modifiche

Visualizza campo personalizzato specifico:

Questo è tutto. Quella semplice funzione ora rimarrà agganciata e mostrerà tutti i campi personalizzati da un post. Ma cosa succede se vuoi mostrare un campo diverso in una posizione diversa o se vuoi mostrare solo una chiave specifica? Quindi utilizzerai un approccio leggermente diverso e definirai la chiave che verrà visualizzata:

1. Apri file single.php
2. Trova il contenuto e c/p quanto segue:

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

3. Sostituisci "chiave" con il campo personalizzato effettivo che stai utilizzando in un post. Ad esempio: "Editore"
4. Salvare le modifiche

Questa funzione controllerà ogni singolo post nel ciclo e cercherà un campo personalizzato denominato "Editore". Se la chiave è stata trovata, verrà visualizzato il suo valore . Puoi personalizzare ulteriormente il modo in cui un campo personalizzato viene visualizzato aggiungendovi una classe e modellando la classe con CSS oppure puoi inserire direttamente HTML nel valore del campo.

Campi personalizzati condizionali:

Se lo desideri, puoi utilizzare i campi personalizzati come condizionali. Rimaniamo con l'esempio e diciamo che ci sono volte in cui non sarai in grado di conoscere una data di uscita per il gioco di cui stai scrivendo. Invece di digitare un campo personalizzato, puoi automatizzare il processo e dire a WordPress di scrivere "TBA" (da annunciare) nel campo Data di rilascio se non ci sono dati aggiunti dall'utente:

 <?php $release_date = get_post_meta($post->ID, 
'Data di rilascio', vero);
if ($release_date) {
?>
<?php echo $data_di_rilascio; ?>
<?php } else { ?>
<p>Da annunciare.</p>
<?php } ?>

OK, lo concluderemo da qui. Questo è il modo più semplice per utilizzare i campi personalizzati. Ma ora che hai coperto le basi, puoi effettivamente fare praticamente qualsiasi cosa con loro. Puoi, ad esempio, mostrare il tuo stato d'animo o una canzone che stai ascoltando. Oppure puoi mostrare un elenco di post che contengono una chiave e/o un valore specifici. Il cielo è il limite.

Come elencare i post con un campo personalizzato specifico

I campi personalizzati sono un ottimo modo per estendere le funzionalità dei tuoi post. Invece di lasciare che gli utenti si occupino del codice, puoi consentire loro di inserire un valore in un campo personalizzato e fare qualcosa con quelle informazioni: ci sono infinite possibilità.

A volte, quando stai già utilizzando campi personalizzati specifici, potresti dover elencare i post con quei campi.

Ad esempio, se stai scrivendo recensioni di giochi e hai già diversi campi personalizzati in cui visualizzi editore, genere, punteggio, ecc. in una casella di informazioni separata nella tua recensione, potresti voler visualizzare solo i giochi di quell'editore specifico, i giochi di FPS genere o solo quelle recensioni con un punteggio di 10 .

Questo tipo di informazioni potrebbe essere davvero interessante per il tuo visitatore. Puoi consentire loro di sfogliare le tue recensioni dei giochi in modo molto più dettagliato o consentire loro di vedere i primi 10 giochi classificati sul tuo sito . Anche se non vuoi pubblicare un nuovo elenco, questo metodo può aiutarti con il data mining: invece di creare un articolo da esso, puoi elencare tutti i post con determinate proprietà solo a scopo di ricerca.

A nostro avviso, il modo migliore per elencare i post ordinati in base a un campo personalizzato è creare un nuovo modello di pagina e mostrare un elenco su una nuova pagina . Questo metodo ti consente di organizzare le tue pagine e di utilizzare facilmente una nuova pagina per visualizzare ciò di cui hai bisogno. Nelle righe seguenti, stiamo per mostrarti come trovare tutti i post con un campo personalizzato specifico e/o il suo valore e mostrarlo in una nuova pagina.

1. Crea un modello personalizzato:

Rimaniamo con l'esempio della recensione del gioco in cui vogliamo visualizzare tutti i giochi di Bethesda Softworks (qualcuno ha detto Fallout?). Per cominciare, dovrai creare e preparare un modello personalizzato:

1. Crea un modello di pagina personalizzato e chiamalo bethesda-games.php
2. Copia e incolla il seguente codice nel file:

 <?php
 /*
 Nome modello: giochi Bethesda
 */
 ?>
 <?php get_header(); ?>
 <?div class="contenitore">
 <?div class="indent">
 <?php
 query_posts(array(
 'meta_key' => 'editore',
 'meta_value' => 'Bethesda'
 ));

 if ( have_posts() ) while ( have_posts() ): the_post();
 echo '<?li>';
 il titolo();
 echo '<?/li>';
 alla fine;

 wp_reset_query(); ?>
 <?/div>
 <?/div>
 <?php get_footer(); ?>

3. Salvare le modifiche

Il codice è pronto per passare attraverso tutti i campi personalizzati e per trovare solo le chiavi 'Publisher' con il valore di 'Bethesda'. Puoi cambiare la chiave e il valore in qualsiasi cosa tu voglia. Se desideri visualizzare tutti i post con il campo personalizzato "Publisher" contenente qualsiasi valore, rimuovi semplicemente la riga "meta_value".

Non dimenticare di cambiare il titolo del modello con qualcosa che riconoscerai in seguito.

2. Aggiungi la pagina:

Ora il tuo modello è pronto, quindi puoi continuare a creare l'elenco:

1. Vai a Pagine->Aggiungi nuovo
2. Aggiungi un titolo
3. Sul lato destro, trova "Attributi di pagina"
4. Seleziona il tuo modello dall'elenco a discesa "Modello"
5. Pubblica la pagina

Questo è tutto! Ora se apri la tua nuova pagina, puoi vedere l'elenco di tutti i tuoi post che contengono campi personalizzati con i valori che hai scelto.

Ora devi aggiungere del testo alla tua nuova pagina, modellare l'elenco e trovare il modo migliore per mostrarlo ai tuoi visitatori. Speriamo che questo metodo ti aiuti a ordinare i tuoi post su un altro livello e che ti piacerà.

Mostra la barra laterale utilizzando i campi personalizzati

Una barra laterale è stata introdotta nella versione 2.2 di WordPress. Da allora, è diventato un modo popolare per mostrare contenuti extra e il più delle volte, i temi di WordPress ne avranno uno per impostazione predefinita in cui puoi posizionare tutti i widget che desideri.

Sebbene sia molto utile, non vuoi che la tua barra laterale sia presente ovunque . Di solito, queste barre vengono mostrate ovunque tranne che nella home page. E non esiste una tale opzione per attivare e disattivare facilmente la barra laterale.

Quindi, perché non farlo da soli. In questa parte dell'articolo, ti mostreremo come inserire la barra laterale in un campo personalizzato e chiamarla solo per i post che desideri.

1. Prepara il modello:

1. Apri il file page.php o single.php
2. Trova il seguente codice: <?php get_sidebar(); ?>
3. Sostituisci il codice con questo:

 <?php $sidebar = get_post_meta($post->ID, 
"barra laterale", vero);
get_sidebar($barra laterale);
?>

4. Salvare le modifiche
5. Crea un modello personalizzato dove sarà la tua barra laterale
6. Apri il file sidebar.php
7. Copia tutto da sidebar.php e incollalo nel tuo file modello personalizzato
8. Salvare le modifiche.

Ora devi aprire un post o una pagina in cui puoi trovare "campi personalizzati" sotto l'editor di testo/visuale. Per aggiungere una barra laterale a quel post/pagina, procedi come segue.

2. Utilizzo della barra laterale nei campi personalizzati:

• Digita "barra laterale" sotto il nome del tuo campo personalizzato
• Digita il nome del tuo modello personalizzato come valore di campo

Questo è tutto. Se hai lasciato vuoti i tuoi campi personalizzati, il tuo post sarà senza barra laterale mentre nell'altro caso, la tua barra laterale dovrebbe caricarsi se hai fatto tutto correttamente.

Modifica intestazione, piè di pagina o barra laterale per i singoli post con campi personalizzati

Di solito, un sito Web WordPress avrà solo un'intestazione, un piè di pagina e una barra laterale già definiti dal tema che stai utilizzando. Ognuno ha le sue funzioni e il suo design archiviati in file separati che vengono chiamati dal tema e quindi visualizzati sul sito dove necessario. Poiché ogni parte del tema è memorizzata in un file diverso, puoi modificarle facilmente senza preoccuparti di rovinare l'intero sito e puoi cambiare il modo in cui si comportano solo un'intestazione, un piè di pagina o una barra laterale sul tuo sito.

Ma a volte, un elemento non sarà sufficiente e, ad esempio, vorrai cambiare l'intestazione. Se vuoi cambiarlo per l'intero sito, sei già pronto per partire: apri header.php e modificalo nel modo desiderato. Ma cosa succede se volessi aggiungere un annuncio in un'intestazione solo per i tuoi singoli post? O forse modificare l'intestazione solo per un post nell'intera raccolta senza cambiare il resto?

Ancora una volta, i campi personalizzati ti aiuteranno.

1. Prepara il file:

Prima di utilizzare un campo personalizzato per modificare intestazioni, piè di pagina o barre laterali, dovresti aver preparato un file. Diciamo che vuoi cambiare un'intestazione per uno o due post e hai creato un nuovo file chiamato header-header2.php dove hai cambiato il design o inserito un annuncio specifico nel post. Prima di poter continuare con la creazione di un campo personalizzato, assicurati che il file sia codificato correttamente e funzioni sul tuo sito. Una volta che il file è pronto, puoi procedere.

2. Sostituire il codice:

1. Apri file single.php
2. Cerca get_header(); parte del codice che di solito si trova nella parte superiore della pagina single.php
3. Sostituisci la funzione con la seguente:

 globale $wp_query;
 $postid = $wp_query->post->ID;
 $header = get_post_meta($postid, "header", true);
 if (!empty($header)) {
 get_header($header);
 } altro {
 get_header();
 }
 wp_reset_query();

1. Salvare le modifiche

Con questo codice, hai detto a WordPress di controllare un campo personalizzato di "intestazione" in ogni singolo post. Se è stato trovato un campo personalizzato con quel nome, WordPress prenderà il suo valore e utilizzerà il nome del file come intestazione solo per quel post.

3. Modificare un'intestazione tramite un campo personalizzato:

Se hai caricato header-header2.php nel tuo tema, ora puoi chiamarlo in un campo personalizzato:

1. Apri un post di cui vuoi modificare un'intestazione
2. Scorri verso il basso e vai ai campi personalizzati
3. Inserisci un nuovo campo e chiamalo "intestazione"
4. Digita "header2.php" nel valore del campo
5. Aggiorna o pubblica il post

Se non ci sono errori nel tuo file header-header2.php , la nuova intestazione dovrebbe apparire in cima al post per il quale hai apportato la modifica . Tuttavia, tutti gli altri post caricheranno il tuo file di intestazione standard definito dal tema.

Come avrai notato, devi solo digitare il nome del file del tuo nuovo file di intestazione dopo la parte "intestazione-". Per questo motivo, è importante nominare correttamente il nuovo file di intestazione e aggiungere la parte " intestazione- " prima del nome effettivo che stai utilizzando nel campo personalizzato.

Lo stesso vale per il file della barra laterale o del piè di pagina, ovviamente, cambiando get_sidebar() e get_footer() parte del codice.

Implementa più facilmente i campi personalizzati avanzati con il codice tema ACF

I campi personalizzati sono la parte inevitabile di praticamente tutti i temi WordPress disponibili. Questi campi consentono a tutti di includere informazioni extra sul post, ma sfortunatamente questa funzione WP standard è piuttosto grezza. I principianti hanno bisogno di un po' di tempo per abituarsi all'utilizzo di campi personalizzati e gli sviluppatori devono dedicare molto tempo extra quando si codificano intorno a loro.

Questo è il motivo per cui il plug-in Advanced Custom Fields (ACF) è così popolare tra gli utenti di WordPress in tutto il mondo. Questo plugin gratuito conta più di 1 milione di installazioni attive in questo momento e non vediamo perché il numero inizierà a diminuire. ACF ti consente di creare campi personalizzati potenti, professionali e intuitivi attraverso un editor visivo .

Sebbene sia abbastanza popolare, ACF richiede ancora conoscenze di codifica e molto tempo se prevedi di implementare quei campi in un tema. Sì, creare un gruppo di campi è facile, ma visualizzare quei campi non è un gioco da ragazzi. Ed è qui che entra in gioco ACF Theme Code per salvare gli sviluppatori.

Codice tema ACF

PREZZO: Gratuito

Questo fantastico plugin è il prodotto di due sviluppatori che hanno deciso che è ora di smettere di perdere tempo a scrivere ripetutamente lo stesso codice più e più volte. Quando si sviluppa un tema o se ne modifica uno esistente, Advanced Custom Fields richiede che uno sviluppatore implementi il ​​codice giusto nel posto giusto all'interno di un tema. Poiché non esisteva un modo più semplice, uno sviluppatore doveva memorizzare lo snippet e tutte le funzionalità di un'API per svolgere il lavoro.

Aaron Rutley, uno dei creatori, ha spiegato sul suo blog:

Ed è qui che ACF Theme Code può aiutare uno sviluppatore. Dopo aver installato questo plug-in gratuito che ora viene scaricato più di 4.000 volte, puoi risparmiare tempo quando gestisci il codice . Ogni volta che pubblichi, modifichi o aggiorni un gruppo di campi in Advanced Custom Fields, questo fantastico plugin genererà automaticamente il codice necessario per implementare i campi in qualsiasi tema.

Troverai questo codice reso in fondo alla pagina. Accanto a ogni frammento, troverai un'icona degli appunti che renderà più facile copiare il codice. Ora non devi memorizzare nulla e puoi rilassarti quando lavori con i campi personalizzati.

Sebbene il plug-in sia già un must per qualsiasi sviluppatore, Aaron afferma che stanno già pianificando di espandere il codice del tema ACF:

Sebbene il plug-in sia gratuito se abbinato alla versione gratuita di ACF, avrai bisogno di una versione PRO se utilizzi una versione estesa di Advanced Custom Fields. ACF Theme Code Pro genera codice per tutti gli altri tipi di campo ACF Pro come il campo Clona, ​​Galleria, Ripetitore e Contenuto flessibile.

Mostra il tuo stato d'animo o una canzone con campi personalizzati

Il blog dovrebbe essere divertente. Anche se stai scrivendo articoli su argomenti seri, il tuo blog potrebbe comunque avere quella cosa o due che lo rendono un po' più divertente per un lettore medio. Può essere qualsiasi cosa: una piccola nota dell'autore, un'immagine divertente o forse puoi aggiungere uno stato d'animo in cui ti trovavi mentre scrivevi l'articolo. Forse vorresti anche aggiungere il titolo di una canzone che stavi ascoltando.

In questa parte, stiamo per mostrarti come implementare facilmente una funzione per visualizzare uno stato d'animo/canzone nei tuoi post . Non dovrai installare alcun plug-in aggiuntivo e la funzione non occuperà molto spazio. È una semplice riga di testo che può essere aggiunta automaticamente in cima o in fondo al tuo post.

1. Aggiungiamo una "funzione dell'umore":

1. Apri file single.php
2. Copia e incolla il seguente codice nel punto in cui desideri visualizzare il tuo stato d'animo:

 $customField = get_post_custom_values("umore");
if (isset($customField[0])) {
echo "<span class='my_mood'>" . "Stato d'animo: " 
.$customField[0] . "</span>";
}

3. Salvare le modifiche

Ora che hai preparato WordPress per i tuoi stati d'animo, sei pronto per visualizzarli in qualsiasi post tu voglia. Per impostazione predefinita, WordPress non mostrerà il tuo stato d'animo e non ci saranno stati d'animo predefiniti che caricherà fino a quando non decidi di mostrarne uno. Se invece volessi aggiungere una canzone, cambia semplicemente il "mood" in "song" sulla prima riga di codice e puoi anche cambiare il nome della classe sulla terza riga.

2. Aggiungi il tuo umore/canzone a un post:

Per inserire uno stato d'animo o una canzone, dovrai scriverlo in un campo personalizzato:

1. Apri un post per il quale vuoi scrivere uno stato d'animo
2. Scorri verso il basso fino a visualizzare "Campi personalizzati".

3. Scrivi "mood" nel campo del nome o "canzone" se hai deciso di seguirlo
4. Scrivi quello che vuoi nel campo "Valore": questo sarà lo stato d'animo/canzone visualizzato nel tuo post
5. Fare clic sul pulsante "Aggiungi campo personalizzato"
6. Pubblica il tuo post

3. Stile:

Come puoi già vedere da sole tre righe di codice, questa è la forma più semplice per aggiungere un nuovo campo personalizzato. Se vuoi modellare il tuo stato d'animo con un po' di CSS, puoi vedere che il codice ha già aggiunto la classe "my_mood" al tuo testo. Per modificare lo stile, procedi come segue:

1. Apri il file style.css
2. Copia e incolla il codice:

 .il mio umore {
 colore blu;
 }

3. Aggiungi qualsiasi stile CSS che ti piace
4. Salvare le modifiche.

Si spera che questo sia sufficiente per iniziare a personalizzare la "funzione mood/song" per il tuo blog e speriamo che il "blu" non sia un valore frequente con cui hai a che fare. Se non vuoi pubblicare il tuo stato d'animo, semplicemente non scrivere nulla nel campo personalizzato "umore".

Riassumendo

Se qualcun altro ha creato un campo personalizzato per te (come uno sviluppatore di temi o plugin), utilizzarlo per migliorare il tuo blog è abbastanza semplice. Ma speriamo che questo articolo ti abbia aiutato a personalizzare i campi da solo.

Con semplici modifiche al codice, ti abbiamo mostrato, puoi creare e gestire i tuoi campi personalizzati che ti aiuteranno a generare un blog unico. Sarai in grado di estrarre le informazioni di cui hai bisogno e semplificherai il processo di scrittura e generazione di contenuti. Cosa ne pensi dei campi personalizzati in WordPress?