Bien utiliser les champs personnalisés avec WordPress

Cette semaine nous allons voir comment ajouter des champs personnalisés à vos articles et surtout comment les maîtriser par la suite.

Champs personnalisés, késako ?

Vous avez déjà eu envie d’associer à vos articles ou vos pages des valeurs autres que le titre, l’extrait ou le contenu ?
Comme par exemple le nom du client pour un portfolio, les détails techniques pour une page produit ou encore un lien de téléchargement ?

Les champs personnalisés servent à ça.
Si vous avez une nomenclature à respecter sur tous vos articles ou pages, WordPress pourra les reconnaître et les afficher le cas échéant.

Nous allons prendre comme exemple pour ce tutoriel une fiche produit avec les mentions suivantes :

  • client,
  • date,
  • technique

Ces champs seront donc réutilisés sur tous vos articles.

Ajouter des champs personnalisés à vos articles dans le Back Office.

La première chose à faire est d’ouvrir le module Champs personnalisés dans la page d’ajout d’article de votre Back Office.
De là, entrez un nom à votre champs (qui sera le même pour tous vos articles) et une valeur (qui change en fonction de votre article) :

Le module des champs personnalisés WordPress

Vous devez entrer le nom et la valeur ici

Si ce module n’apparaît pas dans votre page, cliquez sur le bouton Options de l’écran et cochez la case correspondante :

Bouton option de l'écran

Ce bouton se trouve en haut à droite.

options disponibles

Je sais, je dois mettre à jour mon site …

Répétez l’action encore deux fois, pour les deux champs Date et technique.

Ajouter des champs personnalisés dans le code.

Pour ajouter un champ personnalisé, c’est tout simple.
Il suffit d’entrer ce bout de code :

<?php echo get_post_meta($post->ID, 'ICI_MON_TITRE_DE_CHAMPS', true) ?>

N’oubliez pas de remplacer ICI_MON_TITRE_DE_CHAMPS par votre titre en respectant la casse !
Avec ceci, vous aurez la valeur (et uniquement la valeur) qui va s’afficher.
Pour avoir une liste, nous allons entrer :

<ul>
	<li>Client : <strong><?php echo get_post_meta($post->ID, 'client', true) ?></strong></li>
	<li>Date : <strong><?php echo get_post_meta($post->ID, 'date', true) ?></strong></li>
	<li>Technique : <strong><?php echo get_post_meta($post->ID, 'technique', true) ?></strong></li>
</ul>

Ce qui nous donne :

  • Client : Nom du client
  • Date : 2001
  • Technique : une super technique

Et voilà, vous savez maintenant ajouter des champs personnalisés ! Félicitations !

Comment masquer les champs personnalisés inutilisés.

Cette technique est très bien, mais si vous êtes un petit cachotier vous ne voulez pas entrer la technique pour un projet, vous vous trouverez avec ça sur votre page :

  • Client : Nom du client
  • Date : 2001
  • Technique :

En effet, le mot technique étant écrit en dur dans votre code, il apparaîtra quoi qu’il arrive. C’est pas très propre.
On ne va donc afficher les listes que si une valeur est associée au champ personnalisé.
Pour cela, on va commencer à déclarer nos champs :

$client = get_post_meta($post->ID, "client", true);
$date = get_post_meta($post->ID, "date", true);
$technique = get_post_meta($post->ID, "technique", true);

Ensuite, on affiche les listes que si une valeur est entrée dans le BO :

if($client!=NULL){ 
	echo '<li>Client :<strong> '.$client.'</strong></li>'; 
}
if($date!=NULL){ 
	echo '<li>Date :<strong> '.$date.'</strong></li>'; 
}
if($technique!=NULL){ 
	echo '<li>Technique :<strong> '.$technique.'</strong></li>'; 
}

Ce qui vous donne au final :

<ul>
<?php 
	$client = get_post_meta($post->ID, "client", true);
	$date = get_post_meta($post->ID, "date", true);
	$technique = get_post_meta($post->ID, "technique", true);

	if($client!=NULL){ 
		echo '<li>Client :<strong> '.$client.'</strong></li>'; 
	}
	if($date!=NULL){ 
		echo '<li>Date :<strong> '.$date.'</strong></li>'; 
	}
	if($technique!=NULL){ 
		echo '<li>Technique :<strong> '.$technique.'</strong></li>'; 
	}
?>
</ul>

Et voilà, tout est dynamique maintenant !

Aller plus loin.

Les champs personnalisés peuvent servir à bien plus que d’afficher de simples métas.
Par exemple, si vous avez un slider, vous pouvez définir un lien avec votre champ personnalisé plutôt qu’avec un permalink.
De cette manière, vous pouvez faire pointer vers n’importe quelle page de votre site ou bien vers un autre site partenaire.

Vous pouvez aussi entrer du contenu html dans un champs personnalisé. Comme un plan google map par exemple ;)
Pratique pour des fiches produit.

Bref, les possibilité sont assez variées et limitées qu’à votre seule ingéniosité ;)

See you space designer

Summary
Article Name
Bien utiliser les champs personnalisés avec Wordpress
Description
Cette semaine nous allons voir comment ajouter des champs personnalisés à vos articles et surtout comment les maîtriser par la suite.
Nicolas AUNE
Nicolas AUNE
PUShAUNE
16 557

Auteur : PUShAUNE

Graphiste freelance, J'ai créé un collectif à Marseille appelé Bison Bleu. Je tiens un blog pour partager mes techniques et mes expériences. Je donne aussi des cours aux élèves de l’école Axe Sud.

28 commentaires

  1. Le , Boby a dit :

    bien expliqué bravo

  2. Le , xrainz a dit :

    Bonjour,
    c’est bien expliqué, mais :
    OU rentre ton ce code? sur une page php du theme (créér par nous même?)
    sur une page php de wordpress?
    dans functions.php?

    Merci de votre réponse.

    • Le , PUShAUNE a dit :

      Bonjour Xrainz,

      Le code est à entrer où tu veux que les métas apparaissent.
      Ça peut être dans le single.php pour la page des articles, les fichiers content-XXX.php pour les extraits d’articles ou tout autre page .php

      • Le , Sisko a dit :

        Oui mais si on entre ce code dans single.php par exemple ça ne fera pas apparaitre systématiquement les champs personnalisés dans l’admin pour la création des posts … Pour ça i faudrait entrer un code dans functions.php sauf erreur … c’est ce que je cherche sans trouver vu que je suis très mauvais en php

        • Le , PUShAUNE a dit :

          En effet, il faut avant tout déclarer tes post format dans ton function.php avec :

          add_theme_support( ‘post-formats’, array( ‘aside’, ‘link’ ) );

  3. Le , Corentin a dit :

    Merci beaucoup pour ce tuto bien expliqué et bien utile :)

  4. Le , webamon a dit :

    Le tuto à l’air super pratique mais je suis bloqué dés le début ^^.

    Ou trouve t’on le module de Champs personnalisés ?

    • Le , PUShAUNE a dit :

      Salut,

      Si le module de champs personnalisés n’apparaît pas dans le BO, tu peut l’ajoute en cliquant sur le bouton en haut à droite « options de l’écran » et en cochant la case correspondante ;)

      • Le , webamon a dit :

        Ok c’est bon maintenant ;).
        Mais du coup hier soir j’ai installé un petit module qui s’appelle Advanced Custom Fields 4.3.8. Et ta méthode fonctionne également avec ce module ^^.
        En tout cas merci pour ta réponse et pour ce tuto très pratique.

        • Le , PUShAUNE a dit :

          Yep en effet, je l’utilise aussi.
          Par contre fait attention il y a un léger soucis avec ce plugin : il consomme beaucoup de ressources et peut mettre à genoux ton serveur -_-

          See ya’

  5. Le , Search/Result Lille a dit :

    Merci beaucoup ! J’ai copié / collé « bêtement » le code proposé dans l’article et tout fonctionne à merveille.

    Question : est-ce que ces champs personnalisés ont une entrée spécifique en BDD ?

  6. Le , PifyZ a dit :

    Merci beaucoup pour ce tutoriel, je ne connaissais pas et ça m’a été très utile pour un site que je développe actuellement. :)

  7. Le , smirko a dit :

    g creer un portfolio et g ajouté pour chaq projet un champs personalisé appelé date et je veux par la suite dans ma page appelé projet (portfolio) , lister les projet par date !!!!!
    ya qq 1 qui peut m’aider

  8. Le , Blondel Seumo a dit :

    Whaouh , et moi qui pensais avoir trouver là une solution à mon éternel problème! Merci de l’éclaircissement. En fait, je pensais utiliser les champs personnaliser pour faire une petite file d’actualité sur mon blog wordpress de façon horizontale.

  9. Le , AJMAGE a dit :

    Bonjour,

    Est-il possible de « customiser » les meta ?
    Je m’explique, je souhaiterais ajouter une div et supprimer les « : » du résultat.

    D’avance merci,

    • Le , AJMAGE a dit :

      Je m’auto répond ;)

      -> oui, la réponse est dans la deuxième partie du tuto :
      J’ai :
      if($client!=NULL){ echo ‘Client : ‘.$client.’‘; }
      et je change en :
      if($client!=NULL){ echo ‘Client ‘.$client. »; }

      Pour ce qui est de la div, je n’ai pas testé mais je suppose que ça fonctionne de la même façon.

      Merci

      • Le , PUShAUNE a dit :

        Bonjour Amage,

        J’étais en train de te répondre ;)
        Super que tu ais trouvé la réponse !

  10. Le , Marie a dit :

    Bonsoir.

    Sur mon site je souhaite afficher des articles sous forme d’agenda.
    La catégorie « AGENDA » a été créée, elle n’attend plus que les articles des différentes dates.
    Pour cela je veux utiliser un champ personnalisé « DATE ».
    Je dois donc aller dans mon single.php, y intégrer le petit bout de code et ensuite aller dans le champ personnalisé de mes articles ?
    Et ensuite la date je la mets sous la forme YYY-MM-DD ?

    Bien à vous.

    • Le , PUShAUNE a dit :

      Salut Marie,

      Exact, tu a tout compris.
      Par contre, ça affichera YYYY-MM-DD sur ton site internet, pas une date avec un bel affichage type « 03 août 1987 »

      Pour ça, deux solutions :
      – tu utilises jQuery pour convertir YYYY-MM-DD en date Fr,
      – tu met dans ton BO « 03 août 1987 » (mais c’est moins évolutif).

      • Le , Marie a dit :

        Bonjour.

        Merci de la réponse.
        Il s’avère que cela ne fonctionne pas comme je le souhaite, alors soit je m’y suis mal prise, soit j’ai mal expliqué ma problématique.

        Mon idée d’agenda est la suivante :
        Je liste les futurs évènements (un évènement par article) et je veux qu’ils disparaissent une fois l’évènement terminé (23h59 le jour en question).
        Je veux entrer la date dans le champ date, que cela n’apparaisse pas sur le site, et que l’évènement s’en aille automatiquement une fois terminé.

        Je pense qu’il y a des manipulations supplémentaires à faire, non ?

        Merci d’avance.

        • Le , PUShAUNE a dit :

          Oh, dans ce cas là le plus simple est de prévoir une date de publication ultérieure avec le module « publier » (en haut à droite)
          :)

  11. Le , Yo a dit :

    Merci pour ce tuto très précis

  12. Le , fraggle435 a dit :

    Bonjour,

    Merci pour ce tuto. Juste une petite question : Je souhaite remplacer la date affichée dans un portfolio plein écran de projets (quand on passe la souris dessus) par l’extrait du projet ou un champ perso. Pourriez-vous me dire ou je dois faire cette modification, s’il vous plait ?

    Merci d’avance.

  13. Le , Juliette a dit :

    Merci marche du premier coup avec l’exemple complet. Il n’y a plus qu’a ajouter du style.

  14. Le , Jolie a dit :

    Bonjour. je suis novice. Je n’ai aucune formation en programmation ni en pph. J’ai vu que l’article est intéressant parce que j’ai essayer d’appliquer et j’ai vu certains changement mais pas forcement ce que je voulais. En fait je voulais ajouter un champ personnalisable identique aux catégories mais que je vas nommer différemment. A chaque saisie d’un nouvel article je veux que ce champs fonctionne exactement comme celui des catégories. Que dois je faire? Merci de votre réponse. Et je rappel que je suis nulle en programmation. Une application simple m’aiderai à avancer. Merci

  15. Le , Mtb a dit :

    Bonjour, merci pour le tuto, y t-il moyen d’afficher les champs dans l’administration par ordre d’ID et non par ordre alphabétique ?

À ton tour de participer :

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.