Ajouter des Champs Personnalisés avec ACF dans WordPress

Créer et afficher des champs personnalisés
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Wordpress 3.x
Revoir le teaser Je m'abonne
Transcription

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

- Apprendre à utiliser le plugin ACF.
- Ajouter des champs personnalisés dans WordPress.
- Intégrer ces champs dans les modèles de pages.
- Afficher dynamiquement les données saisies sur le front-end.

Apprenez à enrichir vos pages WordPress en ajoutant des champs de saisie personnalisés grâce au plugin Advanced Custom Fields (ACF).

Dans ce tutoriel, nous allons explorer l'intégration du plugin ACF (Advanced Custom Fields) pour ajouter des champs de saisie personnalisés à l'interface de WordPress. Nous commencerons par installer et activer le plugin, puis nous créerons des champs de saisie supplémentaires qui apparaîtront dans les pages spécifiques.

Ensuite, vous apprendrez à créer un modèle de page personnalisé, à insérer le code nécessaire au bon affichage des nouveaux champs, et à récupérer les valeurs de ces champs pour les afficher de manière dynamique sur le front-end de votre site. Ce processus comprend des étapes spécifiques, telles que la modification du code PHP de votre thème enfant et l'utilisation de shortcodes pour styliser le contenu de manière visuelle.

Ce tutoriel vous guidera également à travers la documentation ACF pour récupérer et utiliser les bonnes instructions PHP afin de gérer les champs personnalisés efficacement.

Voir plus
Questions réponses
Quels sont les avantages d'utiliser ACF dans WordPress ?
ACF permet d'ajouter des champs personnalisés facilement et d'enrichir les pages ou articles avec des données spécifiques sans avoir besoin de coder des fonctions complexes.
Comment peut-on styliser les champs personnalisés affichés sur le front-end ?
On peut utiliser des shortcodes, du CSS et modifier les modèles de pages dans le thème de WordPress pour styliser les champs personnalisés.
Pourquoi est-il important d'utiliser un thème enfant pour ces modifications ?
Utiliser un thème enfant permet de préserver les modifications lors des mises à jour du thème principal, évitant ainsi la perte de personnalisation.
Avant de créer notre nouveau type de contenu, notre custom post type, nous allons d'abord chercher à rajouter des champs de saisie dans notre interface. Pour rajouter des champs de saisie dans notre interface, le plus simple naturellement c'est d'utiliser un plugin et le plugin ACF pour Advanced Custom Field fait vraiment très bien son travail. Donc ce plugin, je l'ai installé, je l'ai activé et il est disponible ici en bas de mon menu. Ce qu'on va chercher à faire, c'est de rajouter des champs de saisie dans nos pages et peut-être de les afficher que dans certains modèles de pages. Donc ça va nous permettre aussi d'avoir un modèle de page. Ensuite on verra comment les appliquer à un nouveau type de contenu. Pour l'instant, on va simplement chercher à les rajouter à la saisie. Ici, quand on fait ajouter une nouvelle page, ça la discussion on l'enlève. Quand on saisit ici du texte, je veux en dessous avoir un champ peut-être descriptif. Et avoir un champ lien vers le site internet. Et ensuite peut-être faire en sorte que ça apparaisse d'une façon plutôt visuelle comme ça, en utilisant les shortcodes qui sont à notre disposition. Voilà donc dans un premier temps, on va créer ici les champs. Donc pour ça on va utiliser Advanced Custom Field et on fait ajouter. On va leur donner un nom, c'est pour les pages. Et maintenant c'est une interface qui est plutôt conviviale, où on va cliquer ici sur ajouter. Titre du champ, descriptif. C'est un champ zone de texte. Recu, tout ça on laisse. Très bien, je peux le fermer et je vais en ajouter un autre. Celui-là va s'appeler site internet. C'est aussi une zone de texte. Je peux fermer mon champ. Donc très bien, donc j'ai créé une zone de texte et juste une ligne de texte ici. Je veux que ces champs supplémentaires apparaissent pour mes pages. Voilà, c'est ici que ça se remplit. Après j'ai d'autres options. Par exemple, je peux cacher des choses sur l'écran de cette page-là. Je vais laisser et je fais publier. Maintenant ici, quand je clique sur Custom Field, je retrouve pour les pages que je viens de créer. Et maintenant si j'actualise ici une saisie de pages, regardez, en dessous j'ai un champ descriptif et un champ site internet. Si je mets ici un descriptif et si je mets une adresse ici, et que je publie, naturellement si j'affiche la page, c'est vide. Ces champs n'apparaissent pas. Il me faut pour ça récupérer du code pour permettre l'affichage public. Alors je vais mettre un titre aussi quand même. Et c'est du plugin ACF. Je vais récupérer du texte comme ça ici vite fait. Voilà, très bien. Et je mets à jour. Maintenant, donc on a créé une page très bien avec ce champ de saisie. Donc ce champ de saisie maintenant apparaît pour toutes les pages. Ce qu'on va faire, c'est qu'ici on va créer un modèle de page justement pour ce plugin qui lui va intégrer des instructions pour afficher le descriptif et le site internet. Et puis on fera en sorte que la description apparaisse ici et le site internet apparaisse dans le lien ici. Quand on est de voir le site, de ne pas voir l'adresse s'afficher. Donc pour ça, il faut aller sur notre serveur. Et dans notre serveur, on va dupliquer la page. Vous vous souvenez qu'on a déjà modifié, là je suis dans le thème enfant, on a déjà modifié cette page pour enlever les commentaires. On souhaite toujours ne pas voir de commentaires. Et là on va le renommer page ACF. Et on va le remettre sur le serveur. Si je retourne en ligne, apparence éditeur, j'ai ma page qui s'affiche là. Et cette page là en fait je vais indiquer que c'est une page template. C'est un modèle de page. Donc pour ça ici j'ai un petit bout de code. Ici on modifie l'entête PHP avec l'instruction template name et on va mettre ACF. Et c'est ici en fait dans mon code, après le content, avant la fin de la boucle du loop ici, que l'on va mettre le code d'affichage pour que l'on puisse visualiser le descriptif et le site internet. Pour ça, on va aller sur le site ACF, dans documentation. Et là vous avez des exemples de codes. Vous voyez ici c'est tout simple PHP the field, field name, c'est à dire nom du champ. Il y a des instructions un peu plus complexes, mais nous on va simplement récupérer celle-ci. Voilà ici et ici. Bien sûr maintenant il faut qu'on aille chercher le nom des champs. Et le nom des champs en fait c'est ici. Descriptif et site internet. Donc on va le mettre là, site internet et descriptif. Et là je mets à jour. Je retourne sur ma page que j'ai déjà saisie. Ah et c'est du plugin. Celle-là je vais la modifier. Et ce que je vais faire ici pour afficher mes deux variables du bas, c'est que je vais changer le modèle et je vais dire ACF, mettre à jour. Et si je l'affiche, regardez, j'ai ici mon contenu supplémentaire et puis j'ai ici mon lien. On a perdu la colonne latérale, mais c'est pas grave. Et maintenant ce que je vais faire, c'est que je veux faire une mise en forme comme ces boutons. Et pour faire ça, regardez, je vais tout sélectionner ici. Clique droit, code source de la sélection. Et là je vais simplement prendre ici, bon le code il n'est pas super propre, mais des codes comme ça avec des instructions de couleur, enfin bref, on va prendre ce code là. Ici, depuis là, jusque là, on va prendre tout ce code et on va remplacer le texte par nos variables. Donc je retourne dans apparence éditeur, dans le modèle de page. Donc là j'ai mes variables, je colle tout ça. Donc là on a un petit peu de mal à s'y retrouver, mais vous allez voir ça va être rapide. Je prends ma variable là, descriptif, je la mets à la place du texte de remplissage. Je prends ma variable adresse du site internet, et cette variable je vais le mettre dans le lien ahref, c'est-à-dire l'adresse, l'url du lien. Et je mets à jour. Maintenant si j'actualise, voilà j'ai un joli bloc qui va être géré d'une façon différente à chaque fois avec ici. Le lien vers le site internet.

Programme détaillé de la formation

Nos dernières formations WordPress