Anteprima di un post con immagine nella homepage di WordPress

I lettori che si seguono sempre avranno notato una piccola novità nella homepage: ora le anteprime degli articoli hanno una piccola immagine nella homepage!

Per ottenere questo effetto (che a mio parere rende molto visivamente) ho usato una funzione di WordPress poco conosciuta  e poco usata : i custom field. Ho preferito intervenire sul codice e non usare un plugin perchè i plugin a volte non sono compatibili con il tema, a volte semplicemente non funzionano o perchè per installarli devi mettere mano al db e fare magheggi strani…

Quindi facciamo 2 modifiche a wordpress ed ecco le nostre foto in anteprima nella homepage!

Per creare una thumbnail in WordPress usando i custom field dobbiamo seguire questi passaggi:

  1. Creare un campo Custom Field
  2. Aggiungere del codice al index.php
  3. Eventualmente aggiustare l’allineamento del post nel CSS

Prima di apportare modifiche ricordiamoci sempre di fare un backup! Dopo il backup dei files, ecco come fare:

  • Creiamo un nuovo articolo e in basso  individuiamo la sezione CUSTOM FIELDS.  Compiliamo il secondo campo scrivendo “image”, e specifichiamone il valore inserendo l’indirizzo dell’immagine che vogliamo appaia in anteprima nella home.

Cliccando “Aggiungi campo personalizzato”, memorizzeremo questo valore in wordpress.

  • Nell’editor del tema apriamo il file index.php e sotto la <div class=”PostContent”> aggiungiamo il seguente codice:

<?php $image = get_post_meta($post->ID, ‘image’, true);
if($image) : ?>
<img src=”<?php echo $image; ?>” alt=”<?php the_title(); ?>” style=”padding:12px; margin:0 0px 0 -11; height:125px; float:left;”/>
<?php endif; ?>

  • Salviamo il file index.php.

Se non abbiamo commesso errori ora nella homepage dovrebbe esserci un’immagine di anteprima nel post, le misure le adattate poi al vostro template.

Io ho impostato l’altezza a 125px indipendentemente dal formato originale della foto: in questo modo ci sarà un resize automatico senza perdere le proprorzioni.

Nel caso dopo questa modifica i post dovrebbero sembrare disallineati editate il file CSS del tema e alla fine della voce post aggiungete un text-align : “justify”; in questo modo:

Esempio :     .Post {  padding: 15px 0px; position: relative; clear: left; text-align: justify; }

D’ora in poi quando vorrete far apparire una thumbnail nella homepage basterà semplicemente aggiungere al post il campo “image” inserire l’indirizzo della foto e cliccare su aggiungi!

PS: se qualcuno conosce un metodo diverso per ottenere lo stesso effetto, magari via plugin mi faccia sapere!

25 commenti su “Anteprima di un post con immagine nella homepage di WordPress

  1. Io ho un index-php un po’ diverso:

    <div id=”post-“>

    <a href="” rel=”bookmark” title=”Permanent Link to “>

    <!– by –>

    Nessun Risultato

    Dove posso metter il codice da te indicato?

  2. Io Ho provato ad inserire il codice da te indicato, quindi ora il mio odice è:

    ID, ‘image’, true);
    if($image) : ?>
    <img src=”” alt=”” style=”padding:12px; margin:0 0px 0 -11; height:125px; float:left;”/>

    Ma non funziona, ho poi letto in più posti che bisogna inserire nel file function.php sempre nel template la riga

    add_theme_support( 'post-thumbnails' ); // aggiungi supporto al tema, feature post thumbnail
    ma anche così non va ….

    suggerimenti??

    Grazie del disturbo
    Fulvio

  3. non ho capito perchè mi ha troncato il messaggio… ad ogni modo, dicevo il codice nellla mia pagina index nel template ora è:

    ________________________________________

    ID, ‘image’, true);
    if($image) : ?>
    <img src=”” alt=”” style=”padding:12px; margin:0 0px 0 -11; height:125px; float:left;”/>

    _____________________-

    Thanks
    Fulvio :D

  4. niente … tronca il messaggio … elimina tutto …

    rirpovo mettendo un * prima dei div e del codice PHP

    ID, ‘image’, true);
    if($image) : ?>
    <*img src=”” alt=”” style=”padding:12px; margin:0 0px 0 -11; height:125px; float:left;”/>

    _____________________-

    Thanks
    Fulvio :D

    • Fulvio quello che chiedi ti danneggerebbe gravemente lato SEO, poichè poi ci sarebbero nella tua home i link duplicati verso ogni articolo,non è consigliabile affatto

  5. Riprendo questo post di qualche mese fa perchè in effetti non riesco a “riuscirci” :)
    Se dai o date uo occhiata al mio blog vi sarà tutto più chiaro.
    Vorrei in effetti far in modo che in qualche post (non in tutti, sarebbe semplice) l’anteprima dell’immagine fosse più grande, che so prendesse tutto lo spazio che adesso occupa il testo.
    Ho provato vari codice, compreso il tuo ma niente.
    Qualcuno mi darebbe qualche dritta?
    Un altra cosa, iu una risposta ValeTheGeek dice: Fulvio quello che chiedi ti danneggerebbe gravemente lato SEO, poichè poi ci sarebbero nella tua home i link duplicati verso ogni articolo,non è consigliabile affatto
    Ma io addirittura in ogni post (di default) ho tre dico tre link al post, il titolo la foto e la scritta CONTINUA.
    Ciao e grazie.

    camalliforever.com

  6. ciao a tutti avrei una domanda da farvi ho un sito  web  ed vorrei togliere le righe che si trovano su una immagine  che inserisco nel articolo voi mi sapreste darmi alcune dritte grazie il sito e http://www.ipadevsdk.com/     se volete dargli un occhiata.

    ciao e grazie .

    • adesso si!
      vai nel tuo tema, e apri il file style.css
      trova questa riga :
      .entry img {
      border:1px solid #CCCCCC;
      padding:5px;
      }

      basterà cancellare la riga col border

  7. Ma….quella è la risposta x Antonio infatti si parla di “border”.
    Se invece la risposta c’è, e sto prendendo una cantonata, chiedo scusa fin da adesso.

    Giamluca

  8. Grazie ragazzi per il vostro intervento , vi vorrei comunicare che ho risolto il problema bisogna togliere tutta riga entry img {
    border:1px solid #CCCCCC;
    padding:5px;

    Ed inserire

    Grazie di nuovo per il vostro intervento .

    :)

  9. Un mio collega, che se la cava abbastanza con worpress, mi chiede come procedere per completare una mia idea: home page con dei riquadri contenti ciascuno una delle categorie, con relativa anteprima delle immagini, ogni riquadro apre a sua volta la pagina delle sottocategorie, identica come l’home page, ossia con riguadri delle sottocategorie che sono di numero congruo per entrare nella pagina…poi se uno clicca su una sottocategoria si trova indirizzato nella classica pagina di wordpress con articoli, colonne ecc.ecc.
    Vi prego datemi un consiglio su come consigliare il mio amico che mi sta dando una mano per portare a termine un progetto, con dei nobili fini….

    • mi sa che per questo tipo di funzionalità devi cercare un tema progettato proprio in questo modo, in quanto si tratta di sfruttare appieno il codex di wordpress ed integrarlo in un tema gia fatto

  10. Ma non c’è un modo per far si che cià avvenga ogni volta automaticamente senza dover ogni volta aggiungere un’immagine al custom field?

  11. Io devo realizzare un tema per il mio sito. Ho delle conoscenze molto basiche di WordPress. Quello che voglio realizzare è una front page in cui vengano riassunti i vari contenuti del sito e in più gli ultimi 10 articoli scritti con anteprima delle immagini. Gli articoli per intero invece, dovrebbero essere mostrati in una pagina denominata NEWS. Fin qui nessun problema. Quello che non riesco a realizzare è proprio l’anteprima degli ultimi 10 articoli scritti..

    Quello del custom field è senza ombra di dubbio un’ottima soluzione, ma il sito è gestito anche da persone che non hanno competenze così approfondite ecco perchè mi chiedevo se ci fosse una soluzione che facesse tutto ciò in modo automatico.

    • io proverei con un tema free che abbia tutte le caratteristiche che ti servono. oppure puoi usare questa funzione per mostrare solo gli ultimi 10 (devi metterla nella sidebar al punto giusto!)
      < ?php $args = array( 'posts_per_page' => 10, 'order'=> 'ASC', 'orderby' => 'title' );
      $postslist = get_posts( $args );
      foreach ($postslist as $post) : setup_postdata($post); ?>

      < ?php the_date(); ?>

      < ?php the_title(); ?>
      < ?php the_excerpt(); ?>

      < ?php endforeach; ?>

Lascia un commento

I have read the privacy policy and I accept the treatment of my personal data in compliance with the Italian Legislative Decree 196/2003.

This site uses Akismet to reduce spam. Learn how your comment data is processed.