Wordpress - Créer des vignettes dynamiquement

Pour insérer des vignettes, j’utilisais jusqu’à récemment le plugin “Thumbnail For Excerpts”. Mais ne pouvant choisir quelle image serait insérer comme vignette, je me suis lancé.
J’ai recherché en premier un code créant des vignettes : j’ai fini par choisir TimThumb pour sa simplicité de mise en oeuvre.

1. Installation de TimThumb.php

1. Tout d’abord, vous allez télécharger le script qui se trouve ici.
2. Ensuite, dans votre répertoire de templates créer ces deux répertoires /wp-content/themes/[nom du template]/scripts et /wp-content/themes/[nom du template]/scripts/cache
3. Déposer le fichier timthumb.php dans le répertoire scripts
4. Modifier les droits du répertoire cache créer précédemment à 777

2. Utilisation de TimThumb.php

Pour utiliser ce script, il suffit d’insérer un appel vers le timthumb.php avant l’image et d’ajouter quelques paramètres.
Exemple :

1

<img src="scripts/timthumb.php?src=essai.php&h=50&w=50&zc=1"/>

Ce script utilise les paramètres suivant:
w: largeur
h: hauteur
zc: zoom crop (0 or 1)
q: qualité du jpeg (par défaut 75 et le max est 100)

3. Intégration dans le template

Maintenant que nous savons comment l’utiliser et le paramétrer voyons son intégration dans Wordpress.

a. Création d’une fonction

Ajouter cette fonction dans le fichier functions.php de votre template :

1
2
3
4
5
6
7

function getpost_thumb($postId) {
	$values = get_post_custom_values("image"); 
	$image  = $values[0];
	if ($image) {
		return $image;
	}
}

Cette fonction récupère le chemin de l’image stockée dans un champ personnalisé “image” de votre article. Donc lors de la création de votre article il suffira d’uploader une image dans votre article et ensuite d’insérer son chemin dans ce champ personnalisé.
Exemple:
Pour une image uploadé à cet endroit: /wp-content/uploads/2009/04/champ_perso.png il suffit d’indiquer dans le champ personnalisé : /2009/04/champ_perso.png.

Cette image ne sera pas forcément insérer dans l’article pour que cela fonctionne.

3. Insertion dans les boucles

Maintenant il suffit d’ajouter ces lignes dans la boucle d’affichage des articles de vos fichier index.php ou archives.php

1
2
3
4

< ?php $img = getpost_thumb($post->ID);
if ($img) : ?>
	<img class="thumb" src="<?php echo get_bloginfo('template_url');?/>/scripts/timthumb.php?src=/wp-content/uploads/< ?php echo $img ; ?>&h=50&w=50&zc=1">
< ?php endif; ?>

Pour customiser son affichage intégrer ces quelques lignes dans votre fichier style.css

1
2
3
4
5
6

.thumb {
	float:left;
	margin: 10px;
	border: 1px solid #000;
	padding:2px;
}

Nous pouvons même étendre cette fonctionnalité, en intégrant dans une zone de votre page d’accueil du code javascript affichant les articles importants. Ceci fera l’objet d’un prochain article.

Vous avez apprécié cet article alors votez :

Partagez:

Add on Yoolink

Autres articles:

1. Si comme moi, vous voulez contrôler complètement ce qui apparaît...
2. Par défaut, vos articles ont comme url quelque chose comme...
3. Créer un blog c'est vouloir parler de soi, d'une association...