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
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.
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.
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
NOTE: Cette partie du module est extraite de cet article en ligne où nous pouvons échanger avec les commentaires.
A propos de l'auteur
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.
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
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 ^^,
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.
Je vais essayer cette solution ! Je n’y avais pas pensé, j’étais (trop) concentré sur les Custom Post Type. J’ai hâte de lire votre prochain tutoriel.
Encore merci ^^,
C’est fait. Le nouveau tuto ACF est en ligne
En fait Olivier, je t’ai eu comme stagiaire aux Gobelins? N’est-ce pas. J’ai reconnu ton avatar sur G+. Tu aurais pu te présenter
Oui lu ton dernier tuto, mais je n’ai pas encore eu le temps de le mettre en pratique, car un nouveau projet vient de me tomber dessus.
Cela dit, pas simple WordPress quand on s’y connait pas en PHP. Si tu es d’accord, je pourrai t’envoyer un mail, présentant mieux mon projet de blog BD collectif, et les fonctionnalités à inclure, pour avoir ton avis, des conseils ? Ce serait super, mais uniquement si tu as le temps. En attendant, je persévère dans ma quête de connaissance en webdesign ^^,
Si tu es intéressé, je donne des modules sur la personnalisation de thèmes WordPress au centre de Formation Apaxxdesigns.
Oui, envoie moi un email et je jetterai un coup d’oeil.
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.
Pas de souci. Tu as bien avancé sur tes sites ^^
Est-ce que le nouveau tuto ACF t’a aidé?
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
Bonjour,
Merci pour le retour. Un tuto est prévu sur ce sujet. Patience
bon c ok pour moi j’ai trouvé …
..
Mais je serai curieux de voir comment tu fait de a à z parce que en utilisant la méthode empirique c’est long et fastidieux…
@JBL Cool. La doc en ligne est bien faite en tout cas.
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 !
Salut Merci pour ton retour.
Je n’ai pas encore eu l’occasion de tester pour les cases à cocher. La doc en ligne n’est-elle pas suffisante?
Je vais jeter un coup d’oeil.
J’ai exactement le même problème ! De quoi ça peut venir ?
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
@Nems
Salut. Merci pour ton retour. Je vais faire plusieurs tests la semaine prochaine. D’autres tutoriels sont en cours sur ACF.
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!
Merci!
J’ai corrigé la coquille sur le code.