Pré-requis pour ce tutoriel

  • Une installation WordPress (2.8.x de préférence)
  • Des bases dans le développement PHP
  • Des bases dans le templating sous WordPress

Mais c’est quoi un champ personnalisé ?

Si vous lisez cet article il est possible que vous n’ayez jamais entendu parler des champs personnalisés. Pour faire simple un champ personnalisé vous permet d’ajouter des données qui n’étaient pas présentes par défaut dans la « structure » d’un article et de pouvoir les utiliser comme bon vous semble. Ce peut être :

  • Une miniature
  • Le niveau de difficulté de l’article
  • La source de votre article
  • Etc.

Il faut l’avouer dans un article, à part le titre, le contenu, le résumé, des catégories et des tags, il n’y a plus grand chose d’autre pour ajouter des informations associées à votre article.

Imaginez donc que vous souhaitez ajouter une miniature à notre article, il est vrai que l’on pourrait très bien l’ajouter au début de l’article puisque dans une certaine mesure il s’agit de son contenu. Cependant en utilisant une telle solution nous serions énormément limité dans la mise en forme. En effet, que faire si vous souhaitez afficher cette miniature uniquement sur votre page d’accueil ? Vous ne pourrez pas le faire en ajoutant directement l’image dans le contenu de l’article ; vous aurez besoin d’un champ personnalisé !

Ajouter un champ personnalisé

L’ajout d’un champ personnalisé est sans doute ce qu’il y a de plus facile, il suffit de créer un nouvel article et de descendre en bas de la page de rédaction pour trouver le formulaire suivant :

wordpress-custom-fields-1

En cliquant sur « Saisissez-en un nouveau » un champ texte apparaitra, c’est ici que vous allez définir le nom de votre champ personnalisé, pour notre exemple nous allons prendre « thumbnail » (ce qui veut dire miniature en anglais ;) ). Et pour la valeur en face il vous suffira d’insérer l’URL de votre image !

Comment connaître l’URL de votre image ? Rien de plus simple ! Il vous suffit d’ajouter une image comme vous le feriez habituellement, mais au lieu de l’insérer dans votre article vous allez cliquer sur le bouton « Adresse du fichier » et copier/coller l’adresse qui vient d’être affichée dans le champ de saisie au dessus du bouton. N’insérer par l’image, contentez-vous de refermer la fenêtre d’ajout.

wordpress-custom-fields-2
Trois astuces pour le prix d’une :

  • cliquez sur le bouton « aucun » une fois que vous avez copier/coller l’adresse de votre fichier sinon WordPress enregistrera votre préférence et ajoutera un lien vers votre image chaque fois que vous en insérerez une !
  • évitez de copier le nom de domaine dans l’URL, de cette manière si vous deviez en changer, vous ne seriez pas obligé de tout modifier à la main !
  • maintenant que vous avez créer le champ personnalisé « thumbnail » celui-ci est ajouté à la liste des valeurs possibles, vous n’aurez plus qu’à le sélectionner dans la liste la prochaine fois !

Ajouter la miniature à vos articles

Maintenant que nous avons enregistré l’adresse de notre miniature il ne nous reste plus qu’à l’ajouter dans l’affichage de notre article. Nous allons devoir éditer le fichier « index.php » qui se trouve dans le répertoire de votre thème WordPress, recherchez les lignes suivantes :

<?php while (have_posts()) : the_post(); ?>  
// ...  
<?php endwhile; ?>  

Le code se trouvant entre ses deux lignes est appelé par les développeurs WordPress « The Loop » car il permet de boucler sur les articles devant s’afficher dans la page. Au sein de cette boucle vous pourrez appeler toutes les méthodes relatives à l’article.

Ainsi pour insérer la miniature il nous suffit de faire :

<img src="<?php echo get_post_meta($post->ID, "thumbnail", true);?>" /> 

Si vous avez suivi ma recommandation tout à l’heure et que vous n’avez pas copier/coller l’adresse de votre serveur dans l’adresse de l’image dans ce cas vous allez pouvoir utiliser la variable d’environnement $_SERVER['HTTP_HOST'].

Vous pouvez insérer ces lignes de code où bon vous semble à partir du moment qu’elles sont dans « The Loop », libre à vous de positionner votre image en flottant à gauche, à droite, etc.

Et si vous souhaitez l’insérer dans l’article en lui même, ouvrez le fichier single.php et insérer le code suivant dans « The Loop » :

<img src="<?php echo $_SERVER['HTTP_HOST'],get_post_meta($post->ID, "thumbnail", true); ?>" /> 

Utilisation des champs personnalisés au sein d’un plugin

Il n’est pas rare de voir des plugins utiliser des champs personnalisés pour stocker des informations de paramétrage dont le plugin se sert pour afficher ses résultats. Dans ce cas l’utilisateur risque de voir apparaître les champs utilisé par le plugin dans la liste des champs disponibles !

Vous conviendrez que ce n’est pas très correct vis à vis de l’utilisateur et que cela pourrait occasionner des erreurs si l’utilisateur se mettait à saisir n’importe quelle information dedans. Fort heureusement il existe une parade pour empêcher l’utilisateur de voir les champs personnalisés ajoutés par un plugin, il suffit de préfixer le nom du champ par un underscore « _ » et le tour est joué.

Pour finir

Voilà vous savez tout (ou presque) sur les champs personnalisés. Libre à vous de leurs trouver de nouvelles utilités. N’hésitez par à poser des questions si j’ai manqué de clarté par moment.