RSS
Follow by Email
Facebook
Google+
http://www.responsive-mind.fr/tutoriel-miniatures-avec-wordpress/
Twitter

Logo WordPress

Depuis sa version 2.9, le CMS WordPress offre la possibilité d’utiliser les miniatures des images mises en ligne, par exemple pour enrichir votre page d’accueil ou illustrer votre flux RSS. Cette fonction s’appelle Image à la Une. Mais cette fonctionnalité n’est pas activée dans tous les thèmes (certainement pour de très bonnes raisons), nous allons donc apprendre comment la rendre disponible dans un premier temps. Ensuite nous verrons de quelle façon on peut intégrer une miniature dans une page.

Avant de commencer, gardez bien à l’esprit que ce tutoriel ne s’applique pas aux versions de WordPress antérieures à la 2.9, et que si vous activez les vignettes sur un blog qui a déjà plusieurs dizaines d’articles, il vous faudra un certain temps pour toutes les mettre en ligne. Pour cette raison je vous conseille de procéder dans cet ordre :

  • activez la fonctionnalité thumbnails ;
  • mettez à jour tous vos articles pour y ajouter les miniatures ;
  • modifiez votre thème pour afficher les miniatures.

De cette façon, vos visiteurs n’auront pas l’impression de se retrouver face à un site en travaux mais auront une belle page optimisée à disposition.

points

Activer les miniatures dans votre backoffice WordPress

Ca peut paraître idiot, mais vérifiez avant tout que les vignettes ne sont pas activées : ça n’est pas parce que l’outil n’est pas affiché qu’il n’est pas disponible. Pour cela, affichez le menu « options de l’écran » (en cliquant sur l’onglet tout en haut de l’écran) et regardez s’il existe une case à cocher Image à la Une. Si c’est le cas, cochez là et vous avez terminé ce chapitre.

Sinon il va falloir mettre un peu les mains dans le cambouis : éditez votre ficher « functions.php » pour y ajouter les lignes suivantes :

/**
 * RMG : Enable thumbnails support
 * @link http://www.responsive-mind.fr/tutoriel-miniatures-avec-wordpress
 */
if (function_exists('add_theme_support')) {
 add_theme_support('post-thumbnails');
}

On commence par vérifier qu’il est possible d’ajouter une fonctionnalité au thème avec add_theme_support, et si c’est le cas (depuis la version 2.9 de WordPress) on ajoute la fonctionnalité thumbnails, c’est à dire miniatures ou Image à la Une. C’est aussi simple que ça !

Il ne vous reste plus qu’à afficher la fonctionnalité dans votre backoffice comme décrit plus haut.

points

Définir la miniature d’un article dans WordPress

WordPress : image à la une

Maintenant nous allons mettre en place notre première miniature : il suffit de cliquer sur le lien « Utiliser comme image à la Une »  de la section Image à la Une et de sélectionner la vignette que vous désirez (ou bien d’en envoyer une autre), comme n’importe quelle image d’article.

Pour définir la taille standard de vos vignettes, vous pouvez utiliser l’interface accessible par le menu → réglages → médias.

points

Intégrer une miniature dans vos pages

Vous pouvez intégrer une vignettes à vos pages n’importe où dans votre code, du moment que vous vous trouvez dans une boucle d’article.

Voici ci-dessous un exemple simple de mise en place :

<div class="entry-summary">
  <?php if( function_exists('has_post_thumbnail') && has_post_thumbnail() ):?>
    <div class="index_thumbnail">
      <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'catchbox' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
        <?php the_post_thumbnail(); ?>
      </a>
    </div>
    <div style="float:right; width: 75%"><?php the_excerpt(); ?></div>
  <?php else : ?>
     <div><?php the_excerpt(); ?></div>
   <?php endif; ?>
 </div><!-- .entry-summary -->

Si le la fonction existe et que le post possède une miniature ( has_post_thumbnail() ), on crée un calque dans lequel on pose la vignette ( the_post_thumbnail() ) et un autre calque pour le résumé. Sinon, on ne pose que le résumé.

 Personnaliser les miniatures affichées par WordPress

La fonction the_post_thumbnail possède plusieurs paramètres qui vous permettront d’affiner la façon dont vos vignettes seront affichées.

Vous pouvez par exemple appeler

 the_post_thumbnail('large')

pour afficher la grande taille de votre Image à la Une ou encore

the_post_thumbnail(array(120, 120))

pour définir une taille de 120px par 120px (pour mémoire il est conseiller d’indiquer les tailles de toutes vos images, pour améliorer les performances de vos pages) ;

Vous pouvez aussi ajouter une classe css à appliquer sur l’image ou encore un texte alternatif avec

 the_post_thumbnail('large', array('class' => 'ma_classe_perso', 'alt => 'texte alternatif')

Je vous laisse le soin d’étudier le codex pour comprendre toutes les possibilités offertes par la fonction.

points

Si vous vous demandez quel est le rendu exact du code ci-dessus, vous le verrez en jetant un oeil à la page d’accueil de ce blog, à la différence près que j’ai défini une taille de 150px par 150px pour m’assurer que les vignettes ne sont pas tronquées en hauteur si le texte est trop petit.

Avez-vous intégré vous-même les vignettes sur votre thème ? Ce tutoriel vous a-t-il été utile ? N’hésitez pas à partager vos astuces dans les commentaires.


Sources :

add_theme_support sur le codex WordPress: http://codex.wordpress.org/Function_Reference/add_theme_support
has_post_thumbnail sur le codex WordPress: http://codex.wordpress.org/Function_Reference/has_post_thumbnail
the_post_thumbnail sur le codex WordPress: http://codex.wordpress.org/Function_Reference/the_post_thumbnail

RSS
Follow by Email
Facebook
Google+
http://www.responsive-mind.fr/tutoriel-miniatures-avec-wordpress/
Twitter
Tutoriel WordPress : activer et utiliser les miniatures

7 pesnées sur “Tutoriel WordPress : activer et utiliser les miniatures

  • 29 octobre 2013 à 12:30
    Permalien

    Bonjour,

    J’essaie depuis pas mal de temps de mettre en place des miniatures dans les extraits de mes articles, sans succès!
    Il faut dire que je me heurte à une totale méconnaissance de wordpress!

    Je bloque là :
    « Vous pouvez intégrer une vignettes à vos pages n’importe où dans votre code, du moment que vous vous trouvez dans une boucle d’article. »

    Comment accéder à ce code?
    Dois-je aller dans Apparence / Editeur / Modèle pour la page d’accueil (index.php) ? Ou est-ce à un autre endroit? En tout cas, ce Modèle pour la page d’accueil ne contient pas : ( has_post_thumbnail()

    Là, je dois dire que je suis perdue.

    D’avance merci pour votre aide!

    Victoria

  • 29 octobre 2013 à 21:51
    Permalien

    Oui il faut commencer par aller dans Apparence / Editeur / Modèle pour la page d’accueil (index.php), là tu trouveras un ligne qui ressemble à
    while ( have_posts() ) : the_post();
    et c’est dans ce bloc que les résumés sont insérés, soit directement, soit dans le cas de mon thème en faisant appel à une fonction :
    get_template_part( 'content', get_post_format() );
    qui appelle le fichier content.php (d’où l’argument « content » de la fonction) et c’est dans ce fichier que j’ai inséré le code de ce tutoriel.

    J’espère t’avoir aidée

  • Ping : Wordpress - astuces cms | Pearltrees

  • 22 septembre 2014 à 13:39
    Permalien

    Hello,

    A quel endroit inserer le code dans content.php ? Faut-il inserer le code ou en supprimer une partie et le remplacer par celui-ci ?

    Je ne trouve pas dans content.php l’endroit ou s’affiche le resumé de l’article. J’aimerai arrivé au même resultat que sur ta page d’accueil : image + resumé de l’articile sur la droite de celle-ci.

  • 22 septembre 2014 à 22:41
    Permalien

    Malheureusement, chaque thème fonctionne à sa propre manière donc ce qui s’applique chez moi ne s’appliquera pas chez toi. Néanmoins, si tu veux ajouter une image avant le résumé de l’article, c’est l’appel à la fonction the_excerpt() que tu dois trouver car c’est elle qui affiche le résumé. Il ne te reste qu’à insérer ta vignette avant cet appel.

  • 22 septembre 2014 à 22:45
    Permalien

    J’ai fais un theme enfant du classique twenty twelve. Je vais essayé de trouve ca.
    Merci.

  • 22 septembre 2014 à 22:49
    Permalien

    C’est un plaisir ! Bon courage

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *