Dalla versione Wordpress 1.2 sono stati introdotti i campi personalizzati, grazie ai quali gli autori possono assegnare al singolo articolo, valori differenti. Essi sono gestiti da una coppia chiave/valore, dove la chiave è il titolo del metadato, mentre il valore è appunto il valore arbitrario assegnato dall’autore… andiamo quindi a commentare questa sfilsa di semplici e pratici esempi:

Detto questo, generalmente si associa ai campi personalizzati, l’inserimento di immagine automaticamente ridimensionate e tagliate, mentre invece possiamo trasferire qualunque tipo di valore. Personalmente penso che il miglior modo per imparare qualche cosa è di farla, andiamo quindi a commentare questa sfilsa di semplici e pratici esempi:

1. Inserire Immagine

Uno degli utilizzi più classici dei campi personalizzati è senza ombra di dubbio l’inserimento delle immagine

<?php $thumb = get_post_meta($post->ID, 'Immagine', $single = true); ?>
<?php if($thumb !== '') { ?>
<div class="Immagine-thumb">
<a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php echo $thumb; ?>"  style="border: none;" />
</a>
</div>
<?php } else { echo ''; } ?>

2. Inserire immagine e ridimensionare

Se poi si vuole ridimensionare automaticamente l’immagine, potremmo utilizzare lo script thimthumb

1. Scarica il file thimthumb e copialo all’interno della cartella del tuo tema (wp-content/themes)
2. Sempre all’interno della cartella del tuo tema, crea una cartella di nome cache (è importante che il nome non sia cache) ed imposta i permessi a “777″
3. Ed ora nel file single.php del vostro tema, copiate il seguente codice

<?php $thumb = get_post_meta($post->ID, 'Immagine', $single = true); ?>
<?php if($thumb !== '') { ?>
<div class="Immagine-thumb">
<a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo $thumb; ?>&amp;h=300&amp;w=300&amp;zc=1" alt="<?php if($thumb_alt !== '') { echo $thumb_alt; } else { echo the_title(); } ?>"  style="border: none;" />
</a>
</div>
<?php } else { echo ''; } ?>

Adesso manca solo un tocco decorativo, che potremo dare giocando con i CSS, per questo vi consiglio di leggere questo articolo di WebDesignerWall.

3. YouTube e i campi personalizzati

Come ho già detto, è sbagliato correlare ai campi personalizzati solo l’inserimento delle immagine. Infatti con questo tutorial, vedremo come adattare i campi personalizzati all’inserimento di video con YouTube

Copiate il seguente codice nel file single.php

<?php $video = get_post_meta($post->ID, 'youtube', $single = true); ?>
<?php if($video !== '') { ?>
<div class="youtube">
<object width="500" height="405"><param name="movie" value="http://www.youtube.com/v/<?php echo $video; ?>&hl=it&fs=1&color1=0x5d1719&color2=0xcd311b&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/<?php echo $video; ?>&hl=it&fs=1&color1=0x5d1719&color2=0xcd311b&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="405"></embed></object>
</div>
<?php } else { echo ''; } ?>

Quindi aggiungete dai campi personalizzati il codice del video. Cos’è il codice di un video youtube? Es:

http://www.youtube.com/watch?v=OhtGnCa8×2k – Quello in grassetto è il codice da inserire nel campo personalizzato.

One more link

Ti sono sembrati utili questi esempi? Su questo articolo di ZioSteve.com, ne ho pubblicati altri tre che ti invito a visualizzare.

Autore: Federico Ginosa di Ziosteve.com