Les champs personnalisés permettent d’ajouter des informations avant ou après le contenu de votre billet (dans la boucle WordPress) sans quitter l’interface de rédaction. Il s’agit d’associer une valeur (le contenu) à une clé choisie librement (ou parmi celles que vous avez déjà définie) et d’utiliser la fonction get_post_meta() dans votre thème.

De nombreux thèmes à tendance « magazine » se servent des champs personnalisés pour afficher une image au-dessus d’un billet. Pour cela, on crée la clé illustration et on met l’URL de l’image dans le champs valeur.

Voici un exemple concret :

<?php $image = get_post_meta($post->ID, 'illustration', $single = true); ?>

Le contenu de la clé llustration est placée dans la variable $image pour l’afficher plus loin :

<img src="<?php echo $image; ?>" />

C’est déjà fini ?

Les problèmes commencent

Maintenant, il faut saisir l’URL de votre image dans la section Champs personnalisés en bas de l’interface d’édition du billet.

Oui, mais voilà, cette URL, vous ne l’a connaissez pas encore. En effet, WordPress s’occupe lui-même de l’emplacement de votre image dans un dossier du genre /wp-content/uploads/2008/08/...

1ère solution : télécharger l’image via un client FTP

Certains ont résolu le problème en créant un répertoire dédié pour ces images et en les téléchargeant avec un client FTP. Mais à l’usage, ça reste très lourd au point d’enlever presque tout intérêt à l’affichage d’images par ce moyen.

<img src="mes-images/<?php echo $image; ?>" />

Toutefois, il existe une option sous forme de case à (dé)cocher (organiser mes fichiers envoyés dans des dossiers mensuels et annuels) pour mettre toute les images en vrac dans le dossier /uploads. Comme ça, il suffit d’ajouter le nom du répertoire dans le thème et de saisir le nom de l’image dans le champ valeur :

<img src="uploads/<?php echo $image; ?>" />

Toutefois, ces images en vrac ne sont pas une solution satisfaisante : on risque de créer plus de problèmes sur le long terme que ça en a réglé sur le court terme. Et puis, il est toujours nécessaire de télécharger les images à part, même si l’on économise la création d’un dossier ;)

2ème solution : utiliser la boite de dialogue prévue…

En réfléchissant un peu à la question, j’ai trouvé une petite astuce toute simple pour connaitre cette fameuse URL en évitant de mettre le bazar dans /uploads

1. Ajouter une image comme vous le feriez si vous vouliez l’afficher dans le billet,
2. Copier l’adresse de l’image qui apparait dans la boite de dialogue.
3. Fermer la fenêtre d’importation
4. Coller l’adresse de votre image dans le champ valeur à côté de la clé llustration dans les Champs personnalisé.

Voilà, c’est simple, efficace et sans bavure ;)

MAJ : Dans la version 2.7, l’adresse n’apparait plus dans la boite de dialogue d’importation. Il est nécessaire d’incorporer l’image pour obtenir l’url.

Articles sur le même sujet

• Danse avec les loops #1 : un thème WordPress mis à nu
• WordPress 2.6 — un nouveau "tag" conditionnel avec has_tag()
• WordPress 2.6 — Mes news carburent à "Press This" (chaine inside)
• WordPress — Une meilleure indexation avec Not at All in One SEO
• Quelques notes sur un thème magazine de A à Z — E comme épure