Tutoriel: Wordpress, les champs personnalisés

A coté du corps de l'article, il est possible d'ajouter sous Wordpress d'autres données et de les afficher à l'endroit voulu à coté du texte. En fait ce champ personnalisé peut être associé à un script et donner lieu à un affichage automatisé élaboré.

Les champs personnalisés sont des ressources définie par l'éditeur du blog, qu'il peut utiliser dans un article ou non.

On définit un champ dans la rubrique Ecrire de l'interface d'administration.
La définition d'un champ personnalisé peut être utilisée une ou plusieurs fois dans un même article et produira alors un ou plusieurs affichages. Elle peut ne pas être utilisée.

Cet article se base sur la version 2.3.2 de Wordpress et suivantes.

Définition d'un champ personnalisé

C'est à partir de la page d'écriture que l'on ajoute un champ personnalisé à un billet. La définition du champ est comme la définition d'une catégorie, elle peut se faire localement dans un article mais devient globale pour le blog. En bas de page on trouve la rubrique "Champs personnalisés".

On définit un champ par une paire clé/valeur.
- La clé sert à identifier le champ, et
- la valeur contient les données affichées ou utilisées pour l'affichage.

Ainsi en créant un billet ou en modifiant un billet on peut:
- réutiliser une clé déjà créée ou
- créer une nouvelle clé,
et dans les deux cas définir une valeur pour le billet.

La clé une fois créée appartient à la base de données et pourra s'utiliser avec tout article.

Réutilisation du champ

A partir du moment de la création d'un champ, lorsque on édite un article ou qu'on en crée un nouveau, le formulaire en bas de page présente la liste de mots-clés des champs personnalisés créés. On choisit donc une clé et on lui associe une valeur pour l'article en cours.

Le champ personnalisé est donc une interface pour passer des valeurs à un script comme on le verra plus loin.

Comment voir s'afficher le contenu du champ personnalisé

Il n'est pas prévu que le champ s'affiche automatiquement, car cela dépend du template choisi et aussi parceque l'administrateur du site peut vouloir choisir l'emplacement où s'affichera ce champ.

Pour ce faire on doit éditer le template principal, on passe par le menu Thème/Editeur de thème et on sélectionne le fichier du corps d'article ("modèle de l'index principal" pour le modèle classic), et on insére dans la boucle la fonction the meta():

<?php the_meta(); ?>

Pour le template classique, le code source pourra ressembler à cela:

<div class="storycontent">
<?php the_content(__('(more...)')); ?>
</div>

<?php the_meta(); ?> 

<div class="feedback">

C'est une disposition possible parmi d'autres.

Code de la page

Supposons que la clé soit: "citation" et la valeur "Rien ne sert de courir".
La fonction the_meta() récupère dans la base de données la clé et la valeur, et fournit ces informations au moteur d'affichage qui les intégre dans la page en code HTML.
Regarder le code source de la page pour voir comment est faite cette intégration, cela a la forme suivante:

<ul class='post-meta'>
<li>
    <span class='post-meta-key'>citation:</span> 
    Rien ne sert de courir
</li>
</ul>

Les classes post-meta et post-meta-key ont des descripteurs prédéfinis dans la feuille de style CSS.
On peut donc modifier le fichier de style (style.css pour le template classic), pour afficher le contenu comme on le désire.

Par exemple, il est possible de ne pas afficher la clé avec ce descripteur:

.post-meta-key: { display:none; }

Et de mettre le texte en vert ainsi:

.post-meta: { color:green; }

Mais l'affichage des champs personnalisés se définit plus efficacement en passant à la programmation, et en utilisant les données clé et valeur dans un script.

Programmation des champs personnalisés

En utilisant le langage PHP et les fonctions internes dédiées aux champs, il est possible de réaliser une implémentation personnelle de l'affichage des champs.

Dans ce cas, on n'utilise pas la fonction standard the_meta(), mais plutôt un script PHP écrit à partir de ces fonctions dédiées, dont voici la liste:

get_post_custom()
Retourne la liste des paires clé/valeur pour le post.
get_post_custom_keys()
Retourne les clés.
get_post_custom_values($key)
Retourne la valeur pour une clé donnée.
get_post_meta($id, $key, $format = false)
Fonction alternative qui retourne la valeur à partir du numéro de billet et de la clé.
Le numéro de billet $id est obtenu automatiquement avec la variable prédéfinie $post->ID.
La clé $key est un texte litéral ou une variable contenant une chaîne obtenue par les fonctions précédentes.
La valeur false de $format commande de retourner un tableau, et true, une chaîne.

Une fois en possession de la valeur qui été entrée à partir de l'éditeur, on applique un traitement défini par le script PHP.
Ce que l'on va voir dans l'exemple ci-dessous...

Exemple de script simple associé à un champ personnalisé

On va remplacer dans la boucle du fichier principal la fonction the_meta() par un script qui affiche uniquement la valeur et non la clé.

<?php 
   $value = get_post_meta($post->ID, "citation", true);
   echo "<ul class='post-meta' >";
   echo "<li>";
   echo $value;
   echo "</li>";
   echo "</ul>";  
?>

Ce script qui n'a qu'un usage purement démonstratif reprend les attributs de style par défaut et affiche simplement la valeur donnée dans l'interface d'édition par l'auteur du blog.

Conclusion

Ce tutoriel donne les bases nécessaires pour l'utilisation des champs personnalisés. On verra dans un article ultérieur comment réaliser quelque chose de plus perfectionné pour son blog, comme par exemple un nuage de tag centré autour de sujet de l'article.