Champs personnalisés

Champs personnalisés

Tutoriel publié en novembre 2011 par Galdon dans la catégorie Wordpress

Les posts wordpress sont pourvus d'un nombre bien déterminé d'attributs :

  • titre
  • contenu
  • extrait
  • date de publication
  • status (brouillon, privé, publié...)
  • permalien
  • ...

C'est assez contraignant, selon ce qu'on fait de wordpress, on peut avoir besoin de champs supplémentaires. Voici quelques exemples qui nécessitent des champs additionnels :

  • un champ nb_vues pour compter le nombre de fois qu' un article est affiché
  • un champ image qui permettrait d'affecter à chaque post une image miniature qui serait utilisée dans les listing de posts (index, catégories)

On pourrait bien sûr modifier la structure de la table wp_posts pour ajouter ces attributs, mais c'est une mauvaise idée car on utiliserait alors une version modifiée de wordpress (donc impossibilité de mettre à jour, problèmes de compatibilité, bugs...).

Heureusement, Wordpress dispose d'une fonctionnalité permettant d'ajouter autant d'attributs que nécessaire à un article : les champs personnalisés (ou métas).

Dans ce chapitre, nous allons apprendre à utiliser les champs personnalisés, d'abord côté utilisateur, puis côté programmation.

Ajout de métas

Dans la partie administration de wordpress, allez sur la page d'édition d'un article. Si tout se passe bien, vous voyez le formulaire d'édition, qui vous permet de définir le titre et de saisir le contenu de l'article, et en dessous vous trouverez une zone intitulée Champs personnalisés.

Champs personnalisés Wordpress

N.B. Si ça n'est pas le cas, c'est que cette zone est masquée par wordpress, pour l'afficher il suffit de cliquer sur Options de l’écran en haut à droite de l'écran, puis de cocher la case Champs personnalisés.

Afficher les champs personnalisés

Le principe des champs personnalisés est assez simple, un champ personnalisé est défini par deux choses :

  • une clé (le nom du champ)
  • une valeur

Reprenons notre exemple d'image miniature, on pourrait créer un champ personnalisé nommé image et ayant pour valeur l' URL de l'image miniature.

Faites donc ça, ajoutez ce champ personnalisé à un de vos posts :

Ajouter un champ personnalisé

Cliquez sur Ajouter un champ personnalisé, et votre champ personnalisé est ajouté !

Pour info, wordpress enregistre les champs personnalisés en base dans la table wp_postmeta, selon le modèle entité attribut valeur, c'est grâce à ce modèle de données qu'on peut ajouter un nombre indéterminé d'attributs, sans modifier la structure des tables.

Utiliser les métas en PHP

Passons maintenant à l'aspect programmation des champs personnalisés. Car l'intérêt d'ajouter des métas à nos posts dans la partie administration, c'est de pouvoir les utiliser côté visiteur (front-office), dans les templates..

Pour cela, wordpress propose un certain nombre de fonctions qui permettent de lire et de modifier les métas :

Certaines d'entre elles ne peuvent être utilisées qu'à l'intérieur de la boucle.

Ici, nous allons simplement ajouter la miniature du post entre le titre et le contenu dans le listing (index.php).

Ouvez donc votre template index.php, et ajoutez ces 2 lignes de code entre le titre (the_title()) et le contenu (the_content()) :

<h1 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>
<!-- [...] -->

<pre>
<?php
$exemple_metas = get_post_custom();
print_r( $exemple_metas );
?>
</pre>

<!-- [...] -->
<?php the_content(); ?>

J'utilise la fonction get_post_custom() qui retourne un tableau de tous les champs personnalisés pour le post en cours (dans la boucle).

Maintenant allez voir sur la page d'accueil, vous verrez le contenu du tableau $exemple_metas :

Debug métadonnées Wordpress

On voit bien le champ personnalisé qu'on a ajouté dans la partie administration : image. Mais il y a également d'autres champs dont le nom commence par un underscore (_).

Ces champs sont utilisés par wordpress, ne vous en occupez pas.

Revenons à notre objectif : afficher l'image. Il suffit d'utiliser la balise <img> et l'url fournie par le tableau $exemple_metas :

<?php
$exemple_metas = get_post_custom();
if( isset($exemple_metas['image'][0]) ){
echo '<img src="'.$exemple_metas['image'][0].'" alt="" />';
}
?>

Voilà ce que ça donne à l'affichage en front :

Métadonnées Wordpress

Et voilà, vous savez maintenant utiliser les champs personnalisés.

Pensez à la sérialisation avec les fonctions php serialize() et unserialize() qui permettent de stocker des objets complexes (tableaux...) et donc non atomiques, en utilisant un seul champ personnalisé.

Fini de lire cette page ? allez faire un tour ici : effet sin city sur une photo, ça peut vous intéresser.

Ce tutoriel fait partie d'un cours : aller au sommaire pour voir les autres chapitres.

Tags
6 commentaires :
commentaire n°2237 par Serge-Henri Saint-Michel
Serge-Henri Saint-Michel jeudi 17 mai 2012, 15:24
Merci, cela faisait qq minutes que je cherchais le "screen optins"...
commentaire n°2243 par Olivier C
Olivier C jeudi 24 mai 2012, 00:04
Bonjour,

Et si le champ n'est pas renseigné, peut-on exclure le code par une condition ? Et si oui laquelle ? Je cherche une solution depuis un moment sans trouver...

Bien à vous
commentaire n°2389 par darknote
darknote vendredi 19 octobre 2012, 18:01
pourquoi ne pas utiliser la fonction "image à la une" ?
commentaire n°2402 par Galdon
Galdon mercredi 7 novembre 2012, 11:15
@darknote : déjà cette fonction est assez récente dans Wordpress, et surtout, ça n'est qu'un exemple.

Même si maintenant on a plus besoin d'utiliser les champs personnalisés pour ajouter une image, ça peut quand même servir pour un tas d'autre choses.

Sur photoshoptuto.com par exemple, je m'en sers pour stocker l'URL des tutos, et aussi les différentes taille d'image (miniature, full).
commentaire n°2529 par Styllx
Styllx mercredi 27 mars 2013, 23:00
Merci je trouvai pas "Champs personnalisé"
commentaire n°3015 par puffonly
puffonly dimanche 1 mars 2015, 12:40
Bonjour ,
Est ce que je peut l utiliser pour ajout d une vidéo dans un article?
merci
facultatif
Facebook Twitter RSS Email
Forum Excel
Venez découvrir le nouveau forum excel question/réponse à la stackoverflow.com !
Forum Excel
hit parade n'en a rien a foutre du W3C Positionnement et Statistiques Gratuites Vincent Paré