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
- Scarica il file thimthumb e copialo all’interno della cartella del tuo tema (wp-content/themes)
- 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?
- 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; ?>&h=300&w=300&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 name="allowFullScreen" value="true"/><param name="allowscriptaccess" value="always"/><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"></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.
Autore: Federico Ginosa