Retour vers la page Tutoriels avec la liste de tous les tutos.
Pour rester informé, abonnez-vous à la newsletter

WordPress :: Utilisation basique d’Advanced Custom Fields (ACF)

ACF : Advanced Custom Fields est un plug-in très puissant et très bien documenté. Il est créé par le jeune développeur australien Elliot Condon. Ce plug-in permet d’ajouter des champs personnalisés à vos articles, pages ou contenus personnalisés. Vous pourriez ainsi créer à la manière d’un formulaire une interface sur mesure pour cadrer le contenu ajouté par les administrateurs du site.

Créer un Groupe de Champs dans ACF

Dans cette première étape nous allons regrouper les différents champs que nous allons ajouter à notre contenu personnalisé Film. Ce contenu a été créé avec le plug-in Post Type UI. Les deux plug-ins sont parfaitement compatibles.

Nouveau groupe de champs ACF

Capture: Nouveau groupe de champs dans Advanced Custom Field

J’ai utilisé ici quelques types de champs: Date, Nombre et Éditeur WYSIWYG. Vous constaterez dans les types de champs qu’il existe de nombreuses possibilités.

Pour chaque groupe de champs, il est possible d’ajouter autant d’éléments que vous le souhaitez. À chaque fois, le procédé sera le même à part les options liées au type de champs.

Capture: Création et modification de champs dans Advanced Custom Field

Affichage du groupe de champs ACF dans le back-office

Ici, comme j’ai appliqué ce groupe de champs aux contenus personnalisés Film, une nouvelle metaboxe apparaît sous ma zone d’édition.

Capture: Affichage des groupes de champs Advanced Custom Field dans le post

Affichage des champs personnalisés ACF dans les articles

Créer du modèle single

Nous voulons afficher les nouveaux personnalisés après le contenu de nos articles. Nous allons créer le modèle en nous reposant sur template WordPress single.php. Après avoir dupliqué ce contenu, je le renomme single-film.php. film étant le nom de mon contenu personnalisé. Pour plus de détail sur le fonctionnement de cette écriture, vous pouvez vous référer à l’article du codex: Template Hierarchy.

Modification de la boucle

La single.phppar défaut fait un appel vers un autre fichier avec la fonction get_template_part( 'loop','single');. Cette fonction est documentée dans cet article: get template part. Pour simplifier le tutoriel, je vais intégrer directement son contenu dans mon nouveau modèle single-film.php. Tout le code de la nouvelle single se trouve un peu plus bas.

Je vais enlever de la boucle classique (loop-single.php) les éléments suivants:

  • les métas du titre (date, auteur)
  • la navigation en haut et en bas
  • la boxe qui présente l’auteur
  • le lien pour le mettre en favori
  • l’appel vers le fichier pour les commentaires

Dans le code, j’ai marqué les éléments classiques de la boucle avec le commentaire <!-- BOUCLE CLASSIQUE -->.

Pour plus d’information sur le fonctionnement de la boucle, vous pouvez lire cet article du codex: The Loop « WordPress Codex

Intégration des champs ACF

Après les contenus classiques de la boucle, j’ai intégré le résultat des champs ACF entre les commentaires <!-- CONTENU ACF -->.
Pour afficher les contenus ACF dans notre cas, rien de plus simple dans notre cas. Vous utilisez la fonction <?php the_field('nom_du_champ');?>.

Si je place tous mes contenus dans une liste, cela donne:

<ul>
    <li><strong>Année de sortie: </strong><?php the_field('gn_ann_sortie'); ?></li>
    <li><strong>Nombre de visiteurs: </strong><?php the_field('gn_nombr_visiteurs'); ?> personnes</li>
    <li><strong>Commentaire: </strong><?php the_field('gn_comment'); ?></li>
</ul>

À chaque fois, le nom_du_champ correspond au nom donné à chaque champ dans mon groupe ACF.

Le résultat final de mon fichier single-film.php donnera:

Et le résultat en ligne

Capture: Affichage des champs Advanced Custom Field sur le site

NOTE: Cette partie du module est extraite de cet article en ligne où nous pouvons échanger avec les commentaires.

Commentaires

  1. Olivier a écrit

    Bonjour,
    Excellent tutoriel !

    Est-il possible d’exploiter les champs renseignés ?

    Cas concret : je planche actuellement sur un blog BD collectif, ou chaque membre (auteur) pourra créer son personnage, et des articles sur son personnage.

    J’aimerai présenter tous les personnages créés sur une page « personnages ».
    Pour cela, en plus de « ACF » j’utilise le plugin « Custom Post Type UI ».

    J’ai déjà défini les champs à renseigner (nom, descriptif, clan, avatar) et j’ai créé un template de page qui affiche tous les personnages des différents auteurs, et automatiquement les nouveaux.

    Mais la ou je bloque (je ne suis pas développeur, mais graphiste), c’est comment exploiter ces résultats ?
    J’aimerai que quand on clique sur le nom, ou l’icône d’un personnage : wordpress affiche les articles relatifs à ce personnage.
    (genre « retrouvez toutes les aventures de X »)

    Est-ce possible ?

    Je précise que j’ai créé un thème enfant de Twenty Twelve.
    Je bosse en local, avec XAMPP, WordPress 3.42 (en attendant la 3.5 ^^)

    Pourriez-vous m’aider ? Je suis preneur pour tout conseil, et orientation.
    Merci beaucoup, et encore bravo pour votre excellent site.

    Olivier.

    • a écrit

      Salut Olivier
      Merci pour ton retour.
      J’ai besoin de précisions. Quand tu dis que tu as créé des champs (nom, clan…). Est-ce ceux-ci que tu n’arrives pas à exploiter dans ton Template (pour les afficher)?
      Pour les articles relatifs, j’ai justement un tutoriel en préparation avec ACF. À suivre

      • Olivier a écrit

        J’ai créer un Custom Post Type « Personnages », et avec ACF, j’ai créé 3 champs : « descriptif « (texte), « avatar » (image), et « aspiration » (choix entre « gentil », ou « méchant »).
        Ensuite, j’ai créé un template pour la page « personnage » qui affiche tous les personnages créés. Cette page fait partie du menu principal.

        Exemple : pour l’avatar de chaque personnage, j’ai utilisé le code qui affiche bien l’image des personnages.

        Mais comment afficher l’ensemble des histoires de ce personnage, en cliquant sur l’avatar ? Une sorte d’archive de ses aventures, dans l’ordre chronologique (1er épisode en haut de page).

        Je creuse le sujet un peu partout… mais je tombe toujours sur des tuto niveau avancé, pour développeurs, qui ajoutent des fonctions… mais aucun tuto basé sur les plugins ACF et CPTUI.

        Merci pour vos conseils ^^,

        • a écrit

          Le plus simple dans votre cas est de créer un nouveau contenu avec Custom Post UI et un champ WYSIWYG ACF dans lequel vous listez toute les histoires.
          Ensuite il s’agit d’appeler ces contenus avec le shortcode que permet ACF. L’avantage de la méthode vous permet d’afficher ces contenus à plusieurs endroits.
          J’ai un tuto presque fini exactement sur le sujet. Je devrai le mettre en ligne cette semaine.

        • Olivier a écrit

          Tu m’as eu ^^, Oui, j’aurai dû me présenter… Désolé ! En fait, j’ai préféré poser directement ma question, pour qui lira ce sujet par la suite.

  2. JBL a écrit

    Bonjour,
    excellent tuto ça m’a bcp aidé .. je me demandais juste s’il avit été possible d’avoir un exemple avec un repeater car ça fait 2 jrs que je galere.
    Merci pour tout
    :)

  3. a écrit

    Bonjour et merci pour cette excellent article, il m’a bien aidé !
    Mais……… tout marche sauf les case à cocher ! Elle n’apparaissent pas !
    Alors que lorsque je rentre les même choses pour les boutons radios, tout fonctionne !

  4. Nems a écrit

    Bonjour et merci pour vos tutos très clairs !

    J’ai une question cependant. Est-il possible d’appeler dans un champs une taxinomies ?
    Exemple :
    Sur mon blog, j’ai créé le CustomPostType « Films ». J’ai également créé la CustomTaxonomy « Genre du film ». J’ai inséré dans mon CPT « Films » le champs « Genre ».
    Ce que je souhaiterais, c’est lorsque je crée un nouvel article « Films », que je puisse entrer dans mon champs « Genre » la taxinomie « Genre du film ».
    Pour l’instant, dans l’édition du champs « Genre », j’ai essayé de mettre « Relation » ou « Objet:article » (je ne saisis d’ailleurs pas la différence entre les 2^^) qui me propose de filtrer par taxinomie, mais je peux sélectionner soit « tout » soit l’un des mots-clés entré dans la taxinomie « Genre du film » (donc Comédie, Horreur, etc…)

    Pour sélectionner le genre du film à mettre dans mon champs « Genre », je voudrais pouvoir sélectionner l’un des mot-clé que j’aurais ajouté dans la taxinomie « genre du film » (que je peux créer d’ailleurs dans l’édition de mon nouveau post).

    Est-ce possible ?

    Merci

  5. WebMaxterKeep a écrit

    Hello,
    Je ne fais que passer, dans un premier temps félicitation pour ton Tuto (Et je le pense!).
    Pour finir, j’ai utilisé ton tuto pour l’affichage des champs personnalisés, et dans le bout de code que tu donne en premier il y a une petite faute au niveau du « the_field() », il manque le « d ».
    Bonne continuation! ;)

  6. a écrit

    Bonjour, Tout d’abord merci pour la procédure. J’ai essayé de la reproduire, mon problème est que j’utilise le thème Leaf et je n’arrive pas à reproduire un visuel cohérant. Y a t il une manipulation spécifique pour des thèmes autres que ceux par défaut ? Merci d’avance pour votre réponse.
    PS : j’ai le titre qui se retrouve sous les commentaires par exemple.

  7. Isma a écrit

    Salut,
    Ou puis je trouver le lien du image intégrer avec ACF ?

    J’ai l’image, le champs mais je ne sais pas où se trouve le lien où renvoi l’image quand on clic dessus !

    Merci

  8. Sacha a écrit

    Bonjour Grégoire,
    Merci pour tout tes bon conseils.
    Utilisant actuellement ACF pour la création d’un site, j’ai un petit souci concernant mon header et footer.
    J’ai intégrer des champs dans un groupe header et footer, et je lui ai appliquée la règle si page est égal a accueil.
    Les champs s’appliquent bien sur la page d’accueil mais j’aimerai les dupliquer sur toutes les autres pages?
    Serais-tu comment s’y prendre ?
    Merci beaucoup!
    Sacha

  9. nono935 a écrit

    Bonjour,

    J’aurais une petite question. Est il possible de créer des champs à répétition ? Je m’explique : je dois créer une page avec une liste de fleurs et on m’a conseillé acf pour rentrer le nom de la fleur et la miniature à coté.

    L’idéal serait que je puisse créer un modèle de page avec la possibilité d’avoir des champs nom et photo qui se répéteraient à l’infini.

    Je travaille à partir d’un thème enfant issu de twentythirtheen.

    Merci d’avance.

  10. Gab a écrit

    Bonjour
    Merci pour cet excellent tutorial..
    Mais je bloque sur l’aspect Créer du modèle single.
    J’ai presque réussi, mais le rendu visuel est moche. N’existe t il pas des extensions pour éviter la programmation ?
    De plus, je me suis ajouté un champs lieu sur la base google. En BO le rendu est exactement ce que je cherchais. En ligne, je me retrouve avec les codes gps.
    En fait le résultat que je souhaite ce trouve : http://www.act-consultants.fr/reference/guide-conception-plates-formes-multimodales-fluviales
    Mais c’est du Drupal, et je ne souhaite pas me lancer sur ce CMS qui semble plus complexe à appréhender.
    Merci

  11. Malko64 a écrit

    Bonjour,

    Est il possible de créer des champs dans les produits, de telle sorte qu’a chaque ajout d’un produit dans le panier , l’acheteur soit inviter à saisir un champ (un numéro de tél, un num de série, de licence) pour chaque produits ajouté.
    ??

  12. Beton a écrit

    Bonsoir à tous,
    Avant tout merci à toi pour ce super tuto qui de plus ma permis de découvrir ACF, j’ai tout fait comme c’est écrit et ça marche !!! du moins comme ci-dessus. Je but sur l’ajout d’un lien, je m’explique :

    Je souhaite ajouter un lien sur ma page, j’utilise donc :

    le champ « texte » et ajoute « mon site (mon_site) »
    dans ma page, j’insère le code «  »
    dans mon formulaire j’inscris mon site « www.jaipasdesite.fr »
    et ça marche Pô !, le résultat est « www.jaipasdesite.fr\www.jaipasdesite.fr ».

    Cela double l’adresse.

    Les options « Convertir le HTML en tags » et « aucun formatage » ne change rien, j’ai tout essayé, enfin j’espère que non :)

    Merci à tous pour votre aide.

  13. a écrit

    Bonjour,

    J’ai téléchargé installé et commencé à utiliser ACF. Super tout fonctionne. Problème j’utilise un thème acheté (AIT), et je ne parviens pas à modifier page.php pour insérer les balises de ACF. J’ai bien fait une copier de page.php, je l’ai renomé, j’ai copier le source de page.php dedans mais je ne parviens pas à saisir leur code. Avez vous une manière de faire particulière pour procèder ?

    Merci

Trackbacks

  1. […] WordPress :: Utilisation basique d'Advanced … – Grégoire Noyelle jQuery(document).ready(function() { var postView = jQuery("#post_3391766991 .postView"); jQuery(" .image .thisistherealimage", postView).slimScroll({ height: '700' }); }); From http://www.gregoirenoyelle.com – Today, 12:40 PM Dans ce tutoriel, nous verrons comme faire une utilisation simple du très bon plug-in WordPress Advanced Custom Fields. […]

  2. […] WordPress :: Utilisation basique d'Advanced … – Grégoire Noyelle jQuery(document).ready(function() { var postView = jQuery("#post_3391767040 .postView"); jQuery(" .image .thisistherealimage", postView).slimScroll({ height: '700' }); }); From http://www.gregoirenoyelle.com – Today, 9:15 AM Dans ce tutoriel, nous verrons comme faire une utilisation simple du très bon plug-in WordPress Advanced Custom Fields. […]

  3. […] WordPress :: Utilisation basique d'Advanced … – Grégoire Noyelle jQuery(document).ready(function() { var postView = jQuery("#post_3408503227 .postView"); jQuery(" .image .thisistherealimage", postView).slimScroll({ height: '700' }); }); From http://www.gregoirenoyelle.com – Today, 9:16 AM Dans ce tutoriel, nous verrons comme faire une utilisation simple du très bon plug-in WordPress Advanced Custom Fields. Via Patrick Van Hoof […]

  4. […] Créer et gérer ses premiers champs avec Advanced Custom Fields dans WordPress jQuery(document).ready(function() { var postView = jQuery("#post_3492321585 .postView"); jQuery(" .image .thisistherealimage", postView).slimScroll({ height: '700' }); }); From http://www.gregoirenoyelle.com – Today, 2:09 AM Dans ce tutoriel, nous verrons comme faire une utilisation simple du très bon plug-in WordPress Advanced Custom Fields. […]

  5. […] sous le nom de meta-données. Ces meta-données peuvent contenir des informations telles que : Créer et gérer ses premiers champs personnalisés avec Advanced Custom Fields dans WordPress. ACF : Advanced Custom Fields est un plug-in très puissant et très bien […]

Laisser un commentaire

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

A noter : Les commentaires supportent le format Markdown.

Article / Page: WordPress :: Utilisation basique d’Advanced Custom Fields (ACF) :: retour vers l'accueil