Utiliser les champs personnalisés (Custom Fields)

Niveau : Intermédiaire

Objectif de cette astuce

Comprendre ce que sont les champs personnalisés dans WordPress, savoir les créer et les remplir en back-office, et les afficher sur le front-end de votre site — que vous utilisiez un thème classique ou un thème FSE.

Pourquoi utiliser des champs personnalisés ?

Par défaut, WordPress propose pour chaque contenu un titre, un corps de texte et une image mise en avant. C’est suffisant pour un article de blog, mais pas pour des contenus structurés : une fiche produit, une fiche livre, un profil de membre d’équipe, une fiche recette ou un annuaire.

Les champs personnalisés permettent d’ajouter des informations complémentaires à vos articles, pages ou types de contenu personnalisés (CPT) : un auteur, une année de parution, un ISBN, une image de couverture, un lien d’achat. Ces données sont stockées proprement en base de données, séparément du contenu principal.

Étape 1 — Les champs natifs WordPress

WordPress inclut nativement un système de champs personnalisés. Il est désactivé par défaut mais accessible depuis l’éditeur de blocs.

Pour y accéder, ouvrir un article ou une page dans l’éditeur, cliquer sur ⋮ (options) en haut à droite → Préférences → onglet Général → section Avancé → activer “Champs personnalisés” → cliquer sur “Afficher et recharger la page”.

⚠️ Attention — Cette option peut être absente dans deux situations :

• Thème FSE activé (Twenty Twenty-Five et tout thème bloc) : la section “Avancé” n’apparaît pas. Les champs natifs ne sont pas accessibles dans ce contexte.
• ACF installé et actif : ACF masque le panneau natif par défaut et le remplace par sa propre interface. Pour réafficher les deux simultanément, ajouter dans functions.php du thème enfant : add_filter('acf/settings/remove_wp_meta_box', '__return_false');

Une fois activé, un panneau “Champs personnalisés” apparaît en bas de l’éditeur. Il fonctionne avec un système de clé/valeur : vous saisissez un nom (ex. auteur) et une valeur (ex. Victor Hugo). C’est fonctionnel mais limité : pas de types de champs, pas d’interface guidée, pas d’affichage front-end automatique.

Limite principale : Pour afficher ces valeurs sur le front-end, il faut ajouter du code PHP dans les templates du thème enfant via get_post_meta().

Par exemple pour afficher les champs personnalises auteur et annee__publication vous devez suivre ces étapes

• activer les champs personnalisés dans les paramètres généraux de la page
• créer les deux champs dans la section des champs personnalisés
• aller dans apparence-> éditeur de fichiers des thèmes
• éditer le fichier en-tête qui affiche le titre de la page du thème classique que vous utilisez . Dans notre exemple, c’est le fichier entry-header.php qui est dans le répertoire template-parts ->header du thème Tweny-Ninetheen
• placer le code ci-dessous juste après l’appel du titre

<?php
// Champs personnalisés — juste sous le titre
$auteur            = get_post_meta( get_the_ID(), 'auteur', true );
$annee_publication = get_post_meta( get_the_ID(), 'annee_publication', true );

if ( $auteur || $annee_publication ) : ?>
  <div class="champs-personnalises">
    <?php if ( $auteur ) : ?>
      <p>Auteur : <?= esc_html( $auteur ) ?></p>
    <?php endif; ?>
    <?php if ( $annee_publication ) : ?>
      <p>Année de publication : <?= esc_html( $annee_publication ) ?></p>
    <?php endif; ?>
  </div>
<?php endif; ?>

Ce qui donne en front

Étape 2 — Créer un groupe de champs avec ACF

Le plugin Advanced Custom Fields (ACF) est la solution de référence pour gérer les champs personnalisés. La version gratuite, disponible sur WordPress.org, permet de créer des groupes de champs avec une interface visuelle et de les affecter à des types de contenu précis.

Installation : Extensions → Ajouter → rechercher “Advanced Custom Fields” → Installer → Activer.

Une fois activé, le menu ACF apparaît dans la sidebar. Aller dans ACF → Groupes de champs → Ajouter.

Pour créer un groupe de champs :

1. Donner un nom au groupe (ex. “Fiche livre”)
2. Cliquer sur + Ajouter un champ pour chaque champ nécessaire — choisir le type (Texte, Nombre, Image, URL…) et renseigner le nom du champ
3. Dans la section Règles d’affectation, définir où ce groupe doit apparaître (ex. Type d’article → est égal à → Livres)
4. Cliquer sur Mettre à jour

Les types de champs disponibles en version gratuite couvrent l’essentiel : Texte, Zone de texte, Nombre, Email, URL, Mot de passe, Image, Fichier, Éditeur WYSIWYG, Lien, Taxonomie, Utilisateur, Select, Checkbox, Bouton radio, Bouton groupe, Vrai/Faux, Date.

Étape 3 — Saisir les champs en back-office

Une fois le groupe de champs créé et publié, il apparaît automatiquement dans l’interface d’édition des contenus concernés — sous la forme d’un formulaire structuré, bien plus lisible que le panneau clé/valeur natif.

Le groupe “Fiche livre” s’affiche sous l’éditeur de contenu. Le rédacteur n’a plus qu’à remplir les champs comme un formulaire : auteur, année de parution, ISBN, couverture (via la médiathèque), lien d’achat. L’expérience est claire et guidée, même pour un utilisateur non technique.

Conseil : Cocher le champ “Requis” (✓) pour les informations indispensables — ACF empêchera la publication si ce champ est vide.

Étape 4 — Afficher les champs sur le front-end (thème classique)

Avec un thème classique (Astra, GeneratePress, OceanWP, Twenty Nineteen…), les champs ACF s’affichent en front-end via du code PHP dans les fichiers template du thème enfant. Comme dans la méthode précédente mais on utilise get_field à la place de get-meta
ce qui donne :

<?php
// Champs personnalisés ACF — juste sous le titre
$auteur            = get_field('auteur');
$annee_de_parution = get_field('annee_de_parution');
$couverture        = get_field('couverture'); // retourne un tableau

if ( $auteur || $annee_de_parution || $couverture ) : ?>
  <div class="champs-personnalises">

    <?php if ( $couverture ) : ?>
      <img src="<?= esc_url( $couverture['url'] ) ?>"
           alt="<?= esc_attr( $couverture['alt'] ) ?>" />
    <?php endif; ?>

    <?php if ( $auteur ) : ?>
      <p>Auteur : <?= esc_html( $auteur ) ?></p>
    <?php endif; ?>

    <?php if ( $annee_de_parution ) : ?>
      <p>Année de parution : <?= esc_html( $annee_de_parution ) ?></p>
    <?php endif; ?>

  </div>
<?php endif; ?>

Toujours échapper les valeurs avant affichage : esc_html() pour le texte, esc_url() pour les liens, esc_attr() pour les attributs HTML. C’est une bonne pratique de sécurité indispensable.

Champ Image : Un champ de type Image ACF retourne un tableau avec les clés url, alt, width, height, caption… selon le format de retour configuré dans ACF.

Étape 5 — Afficher les champs en FSE (thème bloc)

Avec un thème FSE (Twenty Twenty-Five et tout thème bloc), il n’est pas possible d’utiliser des fichiers template PHP. Pour afficher des champs ACF dans les templates de l’éditeur de site, il faut un plugin bridge.

Le plugin recommandé est Meta Field Block (gratuit, disponible sur WordPress.org). Il permet d’insérer les valeurs de champs ACF directement dans l’éditeur de site via un bloc, sans écrire une ligne de code.

Installation du bridge : Extensions → Ajouter → rechercher “Meta Field Block” → Installer → Activer.

Marche à suivre :

1. Aller dans Apparence → Éditeur → Modèles et ouvrir le modèle correspondant (ex. “Article unique : Livres”)
2. Dans le canvas, cliquer sur ⊕ pour ajouter un bloc → rechercher “Meta Field Block” → l’insérer
3. Dans la sidebar droite, configurer le bloc :
   • Source du champ → sélectionner “ACF”
   • Nom du champ → sélectionner le champ à afficher (ex. auteur)
4. Le bloc affiche automatiquement la valeur du champ pour chaque contenu
5. Répéter pour chaque champ à afficher, puis cliquer sur Enregistrer

Meta Field Block fonctionne aussi dans le bloc Boucle de requête (Query Loop), ce qui permet d’afficher des champs ACF dans des listes d’articles — un cas d’usage très fréquent pour des catalogues ou des annuaires.

Une alternative à Meta Field Block est Blocks for ACF Fields (gratuit), également compatible FSE et Secure Custom Fields (SCF).

Récapitulatif — Quelle approche selon votre contexte ?

Ce qu’il faut retenir

Les champs personnalisés sont le socle des sites WordPress complexes : fiches produits, catalogues, annuaires, portfolios, fiches recettes. Le plugin ACF (version gratuite) simplifie considérablement leur création et leur saisie. L’affichage front-end diffère selon le type de thème : code PHP avec get_field() pour les thèmes classiques, plugin bridge comme Meta Field Block pour les thèmes FSE. Dans tous les cas, penser à toujours travailler dans un thème enfant pour ne pas perdre les modifications lors des mises à jour.