Di recente ho iniziato ad utilizzare in maniera più utile ed approfondita una funzionalità molto interessante di Wordpress, i Custom Fields, (o campi personalizzati). Il mio intento era quello di riuscire a migliorare il modo con cui mostrare le schede dei libri delle mie recensioni, riuscendo ad evitare di dover ogni volta andare a modificare ogni singola pagina in caso di modifiche al tema.
I Custom Fields, infatti, sono utilissimi per riproporre dei campi che possiamo utilizzare nel nostro tema per facilitare la presentazione di informazioni che utilizziamo spesso. Inoltre, sono utilizzati in automatico da numerosi plugin laddove si vogliano archiviare informazioni relative ad ogni singolo post. Esempio è Wp-postViews che archivia il numero di visite al post.
Questo tutorial è costituito da tre parti, la prima serve da introduzione, e dimostra un metodo molto semplice di utilizzo. Il secondo post sarà dedicato a mostrare l’utilizzo dei Custom Fields implementato su EcletticaMente. Il terzo invece affronterà una serie di modalità più avanzate.
Introduzione
I Custom Fields sono disponibili ai piedi della schermata di scrittura dell’articolo, come vedete nell’immagine qui sotto.
Sono composti da due elementi, una chiave (name) ed un valore (value) e sono archiviati appunto collegati al vostro specifico post. E’ possibile selezionare tra le chiavi già esistenti utilizzando il menu a tendina di selezione, oppure creare un nuovo elemento cliccando su “enter new”. La comodità è che una volta creato un campo personalizzato, sarà facile accedervi da ogni post, dovendo solo eventualmente indicare il valore che vogliamoa ssociare allo specifico articolo.
Ma per cosa possiamo utilizzare questi campi? Gli usi sono tanti, potrebbe essere utile per associare un indirizzo da mostrare poi in una mappa associata all’articolo, oppure per inserire il proprio “mood”, associare un’immagine, o ancora per inserire la canzone del giorno da far apparire al termine di ogni post. Le soluzioni possono essere tante.
Un esempio semplice: associare un’immagine ad ogni post
Partiamo con un esempio semplice: associare un’immagine ad ogni post. Nel caso di EcletticaMente è ciò che faccio per sfruttare le potenzialità del plugin Featured Content Gallery che trovate in homepage e che mostra un’immagine per ogni articolo.Ma può essere benissimo che vogliamo associarvi un icona, o un thumbnail, o qualcosa per rendere più accattivante il nostro tema.
La prima cosa da fare è associare un’immagine ad ognuno degli articoli. Per fare ciò dobbiamo creare il Custom Field che utilizzeremo poi nel nostro template. Per fare questo andiamo nella porzione “Custom Fields”, e clicchiamo su “Enter New” poco sotto il menu a tendina. Scriviamo un valore per il name che potrebbe essere post-icona
A questo punto specifichiamo il valore che vogliamo assegnare al campo “post-icona”, ad esempio collegandovi l’URL di un’immagine che abbiamo prima reso disponibile sul server.
A questo punto salviamo il post come normalmente facciamo. Ad ogni ulteriore volta che accederemo ad un qualsiasi post del nostro Blog, o quando ne scriveremo uno nuovo, il “custom field” “post-icona” sarà disponibile direttamente dal menu a tendina. Questo ci permette di ricordarci di inserire il valore, e soprattutto di non fare errori nel name del campo. Ecco un esempio qui sotto (gli altri valori sono legati al mio sistema di test).
A questo punto non ci resta che implementare l’uso del custom field all’interno del nostro tema, appunto per mostrare l’immagine in accompagnamento al nostro post. Per richiamare i Custom Field si possono utilizzare due strade. La più semplice (ma non adatta ai nostri fini) è la seguente. Si utilizza la seguente istruzione all’interno del loop Wordpress:
<?php the_meta(); ?>
Che produrrà una lista non ordinata (di tipo ul) contenente tutti i custom fields collegati al nostro post.:
<ul class='post-meta'> <li><span class='post-meta-key'>post-icona:</span> /link/to/image/file</li> <li><span class='post-meta-key'>Titolo:</span> Esempio di testo</li> </ul>
Questo metodo ha lo svantaggio di recuperare tutti i custom field, anche quelli eventualmente assegnati dalle plugin utilizzate sul sito.
Il secondo modo, un po’ più elaborato, ma che permette un maggior controllo sul sistema, utilizza la seguente istruzione all’interno del loop Wordpress:
<?php get_post_meta(); ?>
Questa istruzione permette a Wordpress di ottenere i valori specifici di una chiave che definiremo, attraverso l’imputazione di tre parametri specifici:
- $post_id che è l’ID del post in cui sono archiviati i dati. Normalmente sarà il post che stiamo visualizzando al momento, per cui utilizzeremo il parametro: $post->ID
- $key è una stringa contenente il nome del custom field che vogliamo utilzzare (esattamente quello che abbiamo scritto nel campo “name” sopra).
- $single può essere true oppure false. Se settato su true allora la funzione ritornerà un unico valore come una string. Se settato su false (oppure se omesso) la funzione ritornerà un array dei valori dei campi custom. Questo può essere utile se avete diversi valori con lo stesso nome.
Ecco quindi che, per il nostro esempio, useremo la stringa completa così:
<?php $image = get_post_meta($post->ID, 'post-icona', true); ?>
A questo punto, per utilizzare questo valore nel display del nostro post, sarà sufficiente creare una riga nel nostro template di questo tipo:
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="<?php echo get_post_meta($post->ID, 'post-icona', true); ?>" alt="Icona per il Post #<?php the_ID(); ?>" />
</a>
Come vedete abbiamo semplicemente trasformato l’istruzione di cui sopra con l’aggiunta di un “echo”, di modo che il sistema ci restituisca effettivamente l’url dell’icona che abbiamo inserito nel campo customizzato.
Attenzione, questa formattazione prevede che sia identificato un campo “post-icona” per ogni post sul vostro blog. Nella seconda parte del tutorial affronteremo come realizzare delle formattazioni condizionali, del tipo “se esiste tale custom-field… allora…”.
Questo è ovviamente un esempio molto semplice di utilizzo dei field. Nella seconda parte del tutorial spiegherò come realizzare una formattazione più complessa, spiegando come ho realizzato le schede dei libri di EcletticaMente. La parte 3° del Tutorial sarà invece dedicata ad alcuni utilizzi ancora più avanzati.
A presto!

Popularity: 18% [?]
Articoli e Traduzioni collegati:






October 27th, 2009 at 9:07 am
[...] rimando al primo post per una spiegazione generale sul loro uso e con un semplice esempio. In questo articolo invece [...]