Ús de camps personalitzats

Què són els camps personalitzats?

Els camps personalitzats (custom fields ) són variables que ens permeten afegir informació extra en els nostres articles i pàgines de WordPress. A través d’un nom i un valor podem mostrar qualsevol cosa que desitgem, imatges, text, codi …

Com definir un custom field

El primer que hem de fer és entrar al nostre panell d’administració i crear una nova entrada o pàgina. Veurem una caixa anomenada “Camps personalitzats” a la part inferior de la nostra pantalla. Podem diferenciar dos camps essencials, que haurem d’omplir degudament, Nom i Valor:

El camp Nom definirà el nom de la nostre variable i al camp Valor serà on guardarem la informació amb la que volem treballar.

Per crear un nou camp personalitzat crearem una entrada nova que es digui “Producte1” seguirem els següents passos.

El camp nom posarem “Preu” (text sense cometes). Acabem de crear una variable que és diu Preu.
Ara li hem de donar un valor al camp personalitzat en aquest exemple posarem “10€” emplenant la casella Valor
Per acabar fem clic al botó Afegeix un camp personalitzat (Add Custom Field) per guardar aquesta informació sobre l’entrada del bloc.

Com ha exercici crearem un altre camp personalitzat que es digui “Estoc” i li donarem valor “15”.

Ens ha de quedar una cosa similar a això:

Si ara creem una altre entrada que es digui Producte2 veurem que els camps creats ja ens apareixen a l’apartat Camps personalitzats-> Nom. Donarem un valor als dos camps per aquesta entrada.

Mostrant els camps personalitzats

Per mostrar el camp personalitzat a cada entrada, utilitzarem la funció de plantilla the_meta(). La funció ha d’anar dins del Loop per funcionar com cal. Per tant, obrirem en fitxer single.php i just a sota de

[php]
<?php the_content(); ?>
[/php]

Afegirem:

[php]
<?php the_meta(); ?>
[/php]

Ara ja podem obrir l’entrada Producte 1 i veure el resultat. Si mirem el codi que ens ha generat serà el següent:

[php]
<ul class="post-meta">
<li><span class="post-meta-key">Preu:</span> 10€</li>
<li><span class="post-meta-key">Estoc:</span> 15</li>
</ul>
[/php]

Per tant, si li volem donar estil ho podem fer afegint el següent codi a la nostra fulla d’estils style.css:

[css]
/*CAMPS PERSONALITZATS*/

.post-meta {font-variant: small-caps; color: maroon; }
.post-meta-key {color: green; font-weight: bold; font-size: 110%; }

[/css]

Si a una entrada no lo donem valor a les variables no es mostrarà res per pantalla, ni tant sols el nom del camp. Si volem que es mostri li em donar un valor.

Recordar que un cop creada una variable al generar una nova entrada trobarem aquesta variable ja creada a l’apartat Camps personalitzats-> Nom.

Tècniques avançades

Per obtenir la informació emmagatzemada a un camp personalitzat farem servir la funció get_post_meta():

[php]
get_post_meta($post_id, $key, $single);
[/php]

$post_id és el número identificador de l’entrada de la qual vols obtenir les metadades. Utilitzarem $post-> ID per obtenir el número d’identificació de l’entrada.
$key és una cadena que conté el nom de la metadada que vols obtenir.
$single pot ser varitable (true) o fals (false). Si es declara com a varitable la funció retornarà un sol resultat com una cadena. Si és declarat fals (o no es declara) la funció retorna una matriu amb els camps personalitzats.

Veurem un exemple per que quedi més clar. Si volguéssim recuperar només el valor que tenim emmagatzemat al camp personalitzat “Preu” hauriem de fer:

[php]
<?php echo get_post_meta($post->ID, ‘Preu’, true); ?>
[/php]

Per veure com queda al nostre tema. Obrim l’arxiu single.php i a sota de

[php]
<?php the_meta(); ?>
[/php]

Afegirem aquesta linea:

[php]
<p>Preu:<?php echo get_post_meta($post->ID, ‘Preu’, true); ?></p>
[/php]

Si obriu l’entrada Projecte 1 el resultat serà:

Preu:10€

Proveu de fer el mateix amb el camp personalitzat Estoc.

Per veure altres utilitats dels camps personalitzats farem un segon exemple. Implementarem el Nivo Slider de la classe anterior utilitzant els camps personalitzats.

Crearem tres noves entrades anomenades Nivo Slider 1, 2, 3 respectivament i les afegirem a una nova categoria nivoslider.

A cada entrada afegirem un camp personalitzat que es digui nivoimage i al valor li posarem el link d’una de les imatges que vam fer servir a la classe anterior pel nostre slider.

També afegirem un camp anomenat nivolink i al valor posarem un link que vagi a una pàgina qualsevol de la nostra web, a ser possible tres pàgines diferents.

Finalment afegirem un camp anomenat nivotitle on posarem els valors dels títols de les pàgines a les quals lincarà l’enllaç anterior.

Fet això anem a veure com implementar el slider. Per no perdre la informació que tenim al index utilitzarem per l’exercici l’arxiu home.

Obrim el home i busquem el div nivoslider:

[php]
<div id="nivoslider">

</div><!– end of nivoslider –>
[/php]

I ho substituim pel següent codi:

[php]
<div id="nivoslider">
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<?php query_posts(‘category_name=nivoslider’ );
while ( have_posts() ) : the_post(); ?>
<a href="<?php echo get_post_meta($post->ID, ‘nivolink’, true); ?>">
<img src="<?php echo get_post_meta($post->ID, ‘nivoimage’, true); ?>" alt="" title="<?php echo get_post_meta($post->ID, ‘nivotitle’, true); ?>" /></a>
<?php endwhile; wp_reset_query(); ?>
</div>
</div>
</div><!– end of nivoslider –>
[/php]

Guardarem l’arxiu home com ha home.php. El resultat que veurem serà un slider que tindrà tres imatges amb un link que ens portarà a una pàgina concreta diferent a l’entrada a l’entrada a on hi ha guardada la imatge amb el camp personalitzat i un títol corresponent al que hi hagi guardat a la variable “nivotitle”.

Per tant, si ens fixem en el codi veurem que per obtenir les metadades dels nostres camps personalitzats ho hem fet així:

[php]
<?php echo get_post_meta($post->ID, ‘nivolink’, true); ?>
<?php echo get_post_meta($post->ID, ‘nivoimage’, true); ?>
<?php echo get_post_meta($post->ID, ‘nivotitle’, true); ?>
[/php]

Si al slider heu fet servir imatges de tamany diferent a 960px per 130px veure que es deforma ja que el sistema que hem utilitzat no les talla. Com ha exercici podriem provar de millorar aquest slider agafant les imatges de la secció “Imatges Destacades”. D’aquesta manera facilitarien la gestió de les imatges i a més es re-dimensionarien a la mida desitjada gràcies a la funció crop que vam definir al functions.php.

Llavors el codi que hauriem de posar seria el següent:

[php]
<div id="nivoslider">
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<?php query_posts(‘category_name=nivoslider’ );
while ( have_posts() ) : the_post(); ?>
<a href="<?php echo get_post_meta($post->ID, ‘nivolink’, true); ?>" title="<?php echo get_post_meta($post->ID, ‘nivotitle’, true); ?>"><?php the_post_thumbnail( ‘homepage-slider’, array(‘title’ => ”.get_post_meta($post->ID, ‘nivotitle’, true).” )); ?></a>
<?php endwhile; wp_reset_query(); ?>
</div>
</div>
</div><!– end of nivoslider –>

[/php]

Una altre cosa interessant a provar seria mostrar al slider el text que guardem al extracte o al contingut de la nostra entrada. Per fer-ho només hauriem de substituir :

[php]
get_post_meta($post->ID, ‘nivotitle’, true)
[/php]

Per

[php]
get_the_content()
[/php]

Si volem mostrar el contingut o per

[php]
get_the_excerpt()
[/php]

Si volem mostrar el resum.

Podeu descarregar les modificacions del tema aquí:

[download id=”754″]