decitic* Reporting, Data et Webmastering pour les PME

Ajouter des miniatures à son thème WordPress

Toi, lecteur, oui, toi, tu utilises WordPress, et tu te demandes comment, oui, comment fait-on pour générer des miniatures pour ses articles ? Et ceci, en pouvant personnaliser la taille ou la qualité de l’image par exemple; bref, en pouvant bien bidouiller la chose et l’intégrer dans son thème sans problème.

Hé bien voici une manière de faire ceci, avec un script, l’utilisation des champs personnalisés, et une ligne de code.

1. Le script TimThumb

TimThumb, c’est un script qui va permettre de générer les miniatures. Téléchargez-le en faisant clic droit + enregistrer sous sur ce lien: fichier timthumb.php

Ensuite, dans le dossier de votre thème WordPress, créez un dossier « scripts », et mettez le fichier timthumb.php dedans. Créez également un sous-dossier nommé « cache ». Vous devriez donc avoir cette architecture dans le dossier de votre thème:

10-01-17-architecture

Le script va faire appel aux champs personnalisés de WordPress, et à partir d’eux, va générer une miniature qui sera contenue dans le dossier « cache ».

Mais c’est quoi les champs personnalisés ?

2. Le champ personnalisé « thumb »

Les champs personnalisés peuvent servir à de nombreuses choses; ils servent à ajouter des éléments à nos articles, que l’on pourra ensuite afficher ici ou là selon nos préférences.

Dans notre cas, ils vont nous permettre de définir la miniature correspondant à l’article. On va donc, pour chaque article, définir une image qui sera miniaturisée. Dans votre panneau d’administration, et sur la page d’édition de votre article, on va chercher les champs personnalisés. Voici comment faire ensuite:

On ajoute le champ personnalisé « thumb » (s’il n’existe pas déjà), tout en définissant l’image que l’on veut miniaturiser:

10-01-17-champ1

10-01-17-champ2

Puis on valide, et voilà. L’article est maintenant doté d’une miniature. Mais maintenant, il va falloir l’afficher, et pour cela il faut aller bidouiller notre code.

3. Afficher la miniature avec un bout de code

Dans le fichier de notre choix et l’endroit de notre choix dans le thème, il ne nous reste plus qu’à appeler la miniature avec le code suivant, à placer dans la boucle wordpress, ou bien encore dans une requête get_posts:

<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=X&w=Y&zc=1&q=Z" alt="<?php the_title(); ?>" height="X" width="Y" />

Ici, vous pouvez définir 4 variables, dans le bout suivant:

&h=X&w=Y&zc=1&q=Z

w pour width, correspond à la largeur de la miniature,
h pour height, correspond à la hauteur,
zc pour zoomcropping; inscrivez 1 si vous voulez que la miniature rogne l’image, ou 0 sinon,
q pour quality, vous permet de définir une qualité d’image comprise entre 0 et 100 (n’hésitez pas à fixer une valeur plutôt basse, histoire de ne pas surcharger votre site !)

Voici un exemple de ce que j’ai moi-même fait avec ce bidule:

10-01-17-thumbs

Pour chaque article, j’ai à chaque fois défini une image en champ personnalisé, et dans mon thème, j’ai placé le code que l’on a vu de manière à aligner sur la gauche la miniature, et voilou !

Si vous avez des questions ou des remarques, n’hésitez pas à commenter !

2 commentaires
  1. fly64 dit :

    Je ne comprends pas a quoi sert l’architecture script thumb?

    • alexis dit :

      Comment ça ?

      Si je comprend bien la question, oui en effet on pourrait se passer de Timthumb pour faire les miniatures, mais le souci c’est qu’après, si l’image est grosse, on va bouffer de la bande passante.
      Pi aussi, Timthumb permet de cropper les miniatures, de changer leur qualité, etc.

      Pour moi du coup il permet simplement de rendre les choses plus « légères » et plus « propres ».

      Je sais pas si ça répond à la question ? 🙂

Laisser un commentaire