WordPress e i campi personalizzati

Una guida, una bozza di quel che si può fare utilizzando i campi personalizzati - custom fields - di WordPress per impaginare contenuti e parte di un post.

Avevo espresso questo mio enigma anche sul Forum per Webmaster TPU - Tutti Per Uno

PREMESSA - IL PROBLEMA:

Ho avuto la necessità di trovare la soluzione ad un problema che mi assillava da tempo ovvero poter inserire nello stesso post di un sito basato su WordPress, un oggetto quale per esempio un’ immagine o un video YouTube e variarne le dimensioni a seconda che l’ articolo si trovi in homepage (nel qual caso volevo una thumbnail o il video di dimensioni ridotte in altezza e larghezza) o nella pagina dell’ articolo singolo (nel quel caso volevo mostrare l’ oggetto in questione con le dimensioni originali o comunque ingrandito rispetto alla visualuizzazione in homepage).

ANALISI DEL PROBLEMA:

Approfondendo sono venuto alla conclusione che mi serviva del codice php per poter estrapolare e passare le dimensioni all’ oggetto in questione, a seconda che mi trovassi in home o nella pagina dell’ articolo singolo.

L’ idea di base era che nei 2 blocchi di codice php i tag html per inserire le immagini o i tag per inserire contenuto flash in una pagina web sarebbero stati uguali per tutte le pagine, quindi la variabile sostanziale che avrei dovuto preoccuparmi sarebbe stato solamente il link da dove attingere il contenuto (src per il tag img per le immagini e value ed src per i tag per il video in flash di YouTube).

Per le dimensioni sarebbero state fissate già preventivamente nei due blocchi di codice php inseriti nella home e nella pagina dell’ articolo singolo facilitato dal fatto che nel mio template, come nel 90% dei templates WordPress, esiste il file index.php per la homepage del blog e single.php dove si trova il codice per estrapolare il contenuto del post singolo.

LA SOLUZIONE:

Quindi detto questo, mi serviva solo capire come poter inserire agevolmente il link all’ immagine o al video senza per forza dover a che fare con codice html e php.

WordPress mette a disposizione di default sotto il form, la textarea, in cui scrivere il post, una sezione dedicata ai campi personalizzati, che fino ad oggi non mi ero mai sognato di utilizzare, ma cercando soluzioone al mio problema su Google, quando mi son ricordato “campi personalizzati” mi è scattata la molla rileggendo “personalizzati”… questo significa che se posso inserire etichetta/nome del campo e contenuto dello stesso, si sarebbe registrato nel database ergo avrei potuto estrapolare a mio piacimento e quando avrei avuto la necessità tale contenuto nel template come e dove mi sarebbe piaciuto.

Capito il problema, analizzato… la soluzione si trovava sotto i miei occhi da sempre.

LA PRATICA:

IL CODICE:

Ho aperto con un editor testuale (io utilizzo joe da shell sulla mia postazione Ubuntu :)) index.php del template WordPress che stavo utilizzando;

Subito prima di questo codice che fa comparire il riassunto nella homepage:

<?php the_excerpt() ; ?>

..ho inserito tale codice (primo stralcio per inserire le miniature delle immagini - ed il secondo è per i video YouTube):

<?php // pubblica la immagine se il campo personalizzato ‘immagine’ esiste
$values = get_post_custom_values(”videoyt”);
if ( is_array($values) ) { ?>
<div id=”imgCSS”>
<img src=”<?php $key=”immagine”; echo get_post_meta($post->ID, $key, true); ?>” alt=”<?php the_title(); ?>” width=”150″ height=”100″ />
</div>
<?php } ?>

<?php // pubblica la immagine se il campo personalizzato ‘videoyt’ esiste
$values = get_post_custom_values(”videoyt”);
if ( is_array($values) ) { ?>
<div id=”introVIDEO”>
<object width=”150″ height=”100″>
<param name=”movie” value=”<?php $key=”videoyt”; echo get_post_meta($post->ID, $key, true); ?>”></param>
<param name=”allowFullScreen” value=”true”></param>
<embed src=”<?php $key=”videoyt”; echo get_post_meta($post->ID, $key, true); ?>” type=”application/x-shockwave-flash” allowfullscreen=”true” width=”150″ height=”100″>
</embed>
</object>
</div>
<?php } ?>

Ho aperto il file single.php (il file come detto precedentemente, per estrapolare il contenuto di un post singolo):

<?php the_content(); ?>

Subito dopo questo codice che fa visualizzare tutto il contenuto del post:

…ho inserito il secondo blocco di codice php:

potete copiare il codice inserito nel index.php e variarne i paramentri width e height

Fatte queste modifiche il sistema è funzionante.

Nel momento in cui andrò a scrivere il mio post ed utilizzerò i campi personalizzati accoppiando l’ etichetta immagine + link di dove si trova l’ immagine o videoyt col link di dove si trova il video YouTube che voglio inserire, il codice php inserito nei due file sopra citati, si preoccuperà di estrapolare e far visualizzare le immagini e i video con le dimensioni adattate alla pagina in cui verranno pubblicati.

Un esempio lo potete vedere sul sito del CKF - Canoa Kayak Friuli nel blocco MOVIE a fondo pagina dell’ homepage e cliccando per esempio sul titolo in rosso scuro di tale video, come compare lo stesso video sull’ articolo singolo di tale news.

Ultimi 5 articoli di Davide Tommasin