Quando scriviamo nel nostro sito in WordPress abbiamo, in certe occasioni, la necessità di inserire dei dati particolari:
Cosa sono i custom fields di WordPress
Esempio
Blog di ricette di cucina
A molti di noi è capitato di imbatterci in un blog/ricettario, vuoi perchè non sai come fare un uovo sodo (questo sono io), vuoi per fare bella figura preparando la cena per gli amici.
Avrete notato come, in alcuni casi, il post che descrive la ricetta abbia, all’inizio oppure alla fine, alcuni elementi importanti
Tempo di cottura
Livello di abilità
Ingredienti
Bene, molto spesso, questi elementi sono inseriti utilizzando i custom fields, ovvero campi personalizzati.
Come si usano
A primo acchito sembra semplicissimo, crei una pagina o un articolo, scorri verso il basso e trovi una finestra che si chiama “Custom fields” o “campi personalizzati”.
La prima volta che me li sono trovati davanti ho inserito un nome, ho inserito il valore e ho cliccato su “Aggiungi campo personalizzato“, Pubblica e…nulla, nessuna traccia di quello che avevo appena aggiunto!
Sì, perchè, in questo caso, non è tutto così facile ed intuitivo:
Prima di avere la possibilità di vedere i nostri campi personalizzati apparire insieme all’articolo da pubblicare, dobbiamo inserire qualche riga di codice.
Al lavoro!
Apriamo il file single.php dal tema corrente dell’installazione WordPress con il nostro editor preferito (come Notepad++) o con l’editor di WordPress.
Stabiliamo dove vogliamo visualizzare i campi personalizzati (nel caso del blog di cucina potrebbe essere all’inizio del post)
Inseriamo questa riga di codice php:
?php the_meta(); ?
Adesso possiamo scrivere i nostri campi:
Torniamo al nostro articolo e diamo un nome ed un valore, come da screenshot
Abilità -> Non devi essere uno chef provetto
Cottura ->10 minuti circa
Ingredienti -> Acqua,un uovo
Pubblichiamo l’articolo e avremo i campi personalizzati appena creati in bella mostra, mmmh, non sono un granchè, vero?
Chiaramente, inserendo questa riga “nuda e cruda” verrà fuori una cosina non bella da
vedere:
Però, se inseriamo questa riga all’interno di un suo contenitore, una classe (div class) preferibilmente, abbiamo la possibilità di sbizzarrirci con gli stili CSS.
Lo fa per noi WordPress, che inserisce automaticamente i custom fields in una lista non ordinata (ul), quindi abbiamo anche il selettore già pronto per dare un tono al “tempo di cottura“:
Ho preparato qualcosa:
.post-meta {
border: 1px solid grey;
margin-bottom: 20px;
max-width: 55%;
padding: 15px;
}
.post-meta li {
color: #6361A1;
font-size: 0.9em;
padding: 5px;
text-transform: uppercase;
}
Inserite queste righe nel foglio di stile del vostro tema e questo è il risultato:
D’ora in poi ogni volta che scriverete un articolo vi basterà selezionare il campo personalizzato che preferite dal menu a tendina (dove troverete quelli già creati) o crearne di nuovi ed inserire il valore.
La fantasia farà il resto 🙂
Nota: l’articolo non da ritenersi esaustivo sull’argomento, mi riservo di scrivere a proposito degli utilizzi più complessi dei campi personalizzati in un secondo tempo.
