Create a Word Press Feature Post

Molti di noi utilizzano la piattaforma Word Press per realizzare il proprio Blog o sito Web, ma spesso sfruttiamo al minimo le potenzialità di questo Framework; in rete esistono Plugin per tutto, dunque senza il minimo sforzo possiamo ottenere visualizzazioni particolari di Post, effetti su immagini, relazioni tassonomiche e molto altro.
Come visual designer ritengo che il risultato concordato con il proprio cliente o magari pensato per una soluzione personale, debba essere la fiamma capace di farci prendere delle soluzioni tecniche invece che altre e dunque sfruttare, magari studiando il prodotto preso in considerazione per il lavoro.
Fatta questa premessa, vi presento oggi una soluzione totalmente custom su come realizzare un Featured post utilizzando il codice nativo di Word Press, la vostra fantasia ed esperienza CSS e un comodo e funzionale Plugin per jQuery, chiamato paj.inate

Premessa del tutorial è quella di:

creare una categoria nel vostro Blog che abbia nome Featured (o come volete)
elaborare una formattazione specifica per questo tipo di Post nel vostro CSS
importare o nativamente o manualmente il framework jQuery nel vostro Template
importare il Plugin paj.inate nel vostro Blog
minima conoscenza del codice PHP per eseguire una query specifica

Per quanto riguarda la creazione della categoria non credo abbiate problemi, dunque iniziate ad inserire almeno 3 post nella suddetta categoria con tanto di immagine (stessa grandezza per tutti i post), e del testo.

Nel vostro CSS create la formattazione che meglio credete, ricordandovi che dovrete creare in PHP un Loop che cicli un contenitore per il numero di Post che volete estrarre; il contenitore che si ripeterà dovrà contenere tutto il Post comprensivo di Data, Titolo, prima Immagine ed eventuali altre informazioni anche se nel caso specifico del Tutorial saranno solo queste le informazioni che estrarremo.

Vediamo il codice XHTML per renderci conto di cosa stiamo costruendo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="post">
<div id="featured_pager">
<div class="featured_pager_content">

<div id="featuredpost">

<div class="datafeaturedtab">FEATURED</div>
<img src="" />
<div id="overlay">
<p><a href="" title="Continua a leggere:">titolo Post></a></p>
</div>
</div>

</div>
<div class="alt_page_navigation"></div>
</div>
</div>

Come potete vedere, la struttura è abbastanza semplice anche se annidata; i DIV che ci interessano sono featured_pager che servirà da contenitore per il nostro Plugin pajinate, il DIV featured_pager_content che contiene il contenuto che dovrà essere paginato dal Plugin pajinate e il DIV featuredpost che conterrà appunto il contenuto del Post proveniente dalla categoria Featured e che sarà ciclato per 4 volte dal nostro Loop PHP.

A questo punto riscriviamo lo stesso frammento di codice, ma inserendo appunto il dinamismo PHP per ottenere il risultato:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php if (is_home()) { ?>
<div class="post">
<div id="featured_pager">
<div class="featured_pager_content">
<?php $sliders = new WP_Query();
$sliders->query('category_name=featured&showposts=4&orderby=rand');
while ($sliders->have_posts()) : $sliders->the_post(); ?>
<div id="featuredpost">

<div class="datafeaturedtab">FEATURED</div>
<img src="<?php echo catch_that_image(); ?/>" />
<div id="overlay">
<p><a href="<?php the_permalink(); ?>" title="Continua a leggere: <?php the_title(); ?>"><?php the_title(); ?></a></p>
</div>
</div>
<?php endwhile; ?>
</div>
<div class="alt_page_navigation"></div>
</div>
</div>
<?php } ?>

Il codice interessante è appunto quello subito prima del DIV featuredpost, dove instanziamo una nuova query chiamata sliders e diciamo alla stessa di tirarci fuori 4 post dalla categoria featured; nel mio caso ho anche aggiunto l’istruzione RAND in modo da ottenere 4 Post Random appunto pescati dalla categoria Feature (potete omettere questa istruzione e scegliere magari l’ordinamento ASC o DESC o nulla).

Per quanto riguarda il percorso dell’immagine, notate che viene richiamata una funzione dal nome catch_that_image che non fa altro che visualizzare la prima immagine del mio Post; la funzione è la seguente e andrà scritta nel vostro file functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img .+src=[\'"]([^\'"]+)[\'"].*/>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

if(empty($first_img)){
$first_img = "/images/default.jpg";
}
return $first_img;
}

Il resto del codice non fa altro che richiamare le funzioni native di Word Press per estrarre il titolo del post, e il link al dettaglio del Post.

A questo punto il gioco è fatto, salvate magari il codice della query in un file e chiamatelo featured.php e richiamatelo nella vostra index.php nel punto che volete.

Spero di aver risolto in modo rapido e chiaro la creazione di un Future Post in Word Press senza l’ausilio di alcun Plugin per la piattaforma; questa soluzione, come altri spezzoni di codice che potete elaborare rendono la creazione di un sito o di un Blog con Word Press ancora più divertente e interattivo, facendovi imparare e scoprire cosa si nasconde dietro e dentro le cartelle del Framework.

L’immagine del post che vedete è reperibile sul nostro nuovo sito elements01