Anteprima immagine degli ultimi articoli pubblicati. Tutorial wordpress
In molti mi chiedono come si fa a riprodurre l’effetto “Gli ultimi articoli di italianwebdesign” riproposto in fondo alla homepage, in cui oltre a presentare il titolo e data degli ultimi articoli c’è anche l’anteprima dell’immagine usata nel post.
Ebbene, le cose da fare sono principalmente le seguenti:
Predisporre la pagina per gli ultimi articoli
Decidete innanzitutto quanti articoli dovranno vedersi per intero e quanti solo in anteprima. Nel nostro caso sono 2 nella loro interezza e 4 in anteprima, quindi dovremo settare nelle nostre impostazioni di wordpress, dal pannello “impostazioni” – “lettura” appunto, gli ultimi 6 articoli.
A seguire nel template di index.php segnalerete cosa visualizzare nei singoli 6 casi e per fare ciò bisogna modificare leggermente il loop di WordPress che solitamente si usa. Dovremo infatti istituire un contatore che ci permetta di valutare ogni singolo caso ed incrementarsi ogni volta che viene eseguita la scrittura del post.
Esso diventerà infatti:
< ?php if(have_posts()) : ?> < ?php while(have_posts()) : the_post(); ?> < ?php switch ($count++) {
E fra la scrittura di un articolo e l’altro inserirete:
case 0: ?>
Qui scriverete titolo, data, content del post etc...
e poi ricomincia:
< ? case 1: ?>;
Qui scriverete titolo, data, content del post etc...
Per il secondo post.
E veniamo ai 4 articoli di anteprima. Siamo arrivati al case 2, quindi:
< ? case 2: ?>
<h2>GLI ULTIMI ARTICOLI DA ITALIAN WEBDESIGN</h2>
<ul class="anteprime">
<li><img src="<?php echo get_post_meta($post-/>ID, 'thumbnail', true); ?>" alt="" width="80" height="80" class="alignleft" />
<a href="<?php the_permalink() ?>" rel="bookmark" title="< ?php _e('Permanent link to'); ?> < ?php the_title(); ?>">< ?php the_title(); ?></a>
<br />
<small>< ?php the_time('d-m-Y') ?></small>
</li>
< ? break; ?>
< ? case 3: ?>
<li><img src="<?php echo get_post_meta($post-/>ID, 'thumbnail', true); ?>" alt="" width="80" height="80" class="alignleft" />
<a href="<?php the_permalink() ?>" rel="bookmark" title="< ?php _e('Permanent link to'); ?> < ?php the_title(); ?>">< ?php the_title(); ?></a>
<br />
<small>< ?php the_time('d-m-Y') ?></small>
</li>
< ? break; ?>
< ? case 4: ?>
<li><img src="<?php echo get_post_meta($post-/>ID, 'thumbnail', true); ?>" alt="" width="80" height="80" class="alignleft" />
<a href="<?php the_permalink() ?>" rel="bookmark" title="< ?php _e('Permanent link to'); ?> < ?php the_title(); ?>">< ?php the_title(); ?></a>
<br />
<small>< ?php the_time('d-m-Y') ?></small>
</li>
< ? break; ?>
< ? case 5: ?>
<li><img src="<?php echo get_post_meta($post-/>ID, 'thumbnail', true); ?>" alt="" width="80" height="80" class="alignleft" />
<a href="<?php the_permalink() ?>" rel="bookmark" title="< ?php _e('Permanent link to'); ?> < ?php the_title(); ?>">< ?php the_title(); ?></a>
<br />
<small>< ?php the_time('d-m-Y') ?></small>
</li></ul>
< ? break; ?>
< ? } //end of switch ?>
< ?php endwhile; ?> //chiusura del loop di wpMa non finisce qui.
Pubblicare le anteprime di immagini del post
Per far funzionare le anteprime, così come le abbiamo scritte, bisogna, ogni volta che scriviamo un post, andare su "campi personalizzati", selezionare "thumbnail" dall'elenco proposto e inserire come "valore" il link assoluto dell'immagine che abbiamo usato. Cliccate su "aggiungi campo personalizzato" e pubblicate il post.
Provare per credere.
Era un tutorial di Geekissimo di tempo fa, lo provai e voilà.
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
23 Commenti
Grazie infinite! Una domanda:la classe “anteprime” hanno bisogno di una formattazione particolare?
nono, l’ho messa io per comodità per formattarle nel modo che vedi tramite i css. puoi usare classi, id o anche niente, non è vincolante
Usti ho imparato una cosa nuova
non si finisce mai!!
io invece sto ancora impazzendo per usare il plugin degli articoli correlati con immagine.. umpf.. arghh..
Ancora con quel plugin? Io invece non t’ho ancora vista in IWA XD
hehe provvedo subito
eccolo che ne assolda un’altra
evvai!!!
io l’iscrizione l’ho fatta ma devo sempre vedere se m’accettano :p
Scusate l’off topic! Tornando sull’argometo che dire… lodi lodi lodi a Lauryn che diffonde la conoscenza hehe…
Benvenuta
io direi Lodi, Lodi, Lodi, uscita Casalpusterlengo.
oddio regà non c’ho testa ahahah
Sto tutorial me l’avevano chiesto 10.000 persone e ora che l’ho pubblicato sono scomparsi tutti.
me tapina
Ho letto il codice velocemente e non ho appprofondito più di tanto, visto che domattina ho un esame all’università. Volevo dire, la predisposizione della pagina non veniva più velocemente usando query_posts()? Tipo:
//Per i primi due: query_posts('showposts=2'); //lo "stile" dei primi due post //chiusura del loop di wp query_posts('showposts=4&offset=2'); //lo "stile" dei quattro successivi //chiusura del loop di wpP.S.: speriamo che il tag “pre” funzioni nei commenti, altrimenti credo sarà illegibile!!
provo, ma credo che il loop di wp possa essere usato una solta volta nella stessa pagina, altrimenti si ripetono gli stessi articoli.
inoltre credo che con questo sistema si riduca il numero di query a db, è da provare il tuo sistema cmnq magari è meglio.
facci sapere se ti risulta migliore!
che si possa usare più di una volta è testato (una cosa simile a quella che ho scritto l’ho usata per un sito che voleva un layout da “magazine”, con una cover story grande e gli altri articoli in piccolo). Il tuo sistema ha sicuramente il pregio di ridurre le chiamate al db, nel mio l’idea era quella di scrivere meno codice possibile (sono un programmatore pigro…come la maggioranza)
Se volessi anche alcune frasi dell’articolo insieme all’immagine?
è sufficiente aggiungere il tag di wordpress the_excerpt();
Ecco era proprio la modifica che mi serviva, ma mica ho capito come inserirla!! Premesso che non sono proprio a digiuno sul php di wp, ma non riesco proprio a far funzionare la cosa, se inserisco lo “< ?php switch ($count++)” LE restanti istruzione dove cavolo le inserisco? Che significa “E fra la scrittura di un articolo e l’altro inserirete: ” dove nel post o nel php? Oddio sono confuso, mi daresti una mano Lauryn magari invindoti in pvt la index?
Ciao e grazie Sabato
ciao sabato.
praticamente nel tema, fra case 0 e case 1 fagli scrivere titolo del post, etc (i primi due post che ho in homepage sono scritti normalmente, comincia a mettere solo l’anteprima dal 3° al 6°)
spero sia chiaro ora
Faccio prima ad inserirti il sorgente interessato al template:
—————————————-
Articoli Inseriti
<h2 id=”post-”><a href=”" rel=”bookmark” title=”Permanent Link to “>
Scritto da il ,
—————————————-
adesso prova a spiegarmelo in questo modo, purtroppo per la mia deficienza in php faccio decine di prove senza riuscirci (sarà l’età), ti ringrazerei immensamente se mi dici dove inserire e come inserire il tutto.
Ciao Sabato
ooopppsss non vedo l’inserimento fatto
Articoli Inseriti
<h2 id=”post-”><a href=”" rel=”bookmark” title=”Permanent Link to “>
Scritto da il ,
Perdonami volevo inviarti il sorgente della parte interessata del mio template per capire dove inserire le tue istruzioni, ma vedo che col commento non miè possibile, potrei chiederti la cosa per via pvt?? Se si mi indicheresti una email?
Ciao Sabato
scrivimi su info@italianwebdesign.it