Voulez-vous savoir comment utiliser les champs personnalisés dans les articles d'invités ?
Les champs personnalisés sont une fonctionnalité puissante de WordPress qui vous permet de stocker des informations supplémentaires relatives à des articles spécifiques. Vous pouvez afficher ces informations à côté du contenu de l'article.
Dans cet article
Créez votre formulaire WordPress maintenant
Que sont les champs personnalisés ?
Les champs personnalisés sont des champs supplémentaires que vous utilisez pour collecter et afficher des informations dans WordPress. Ils sont parfois appelés champs "post meta".
Il est probable que votre site dispose déjà de champs personnalisés. Par exemple, le plugin All in One SEO utilise des champs personnalisés pour la méta-description et le méta-titre de la page.
Vous pouvez créer vos propres champs personnalisés pour stocker des informations supplémentaires pour n'importe quel article, page ou type d'article personnalisé. Par exemple, si vous rédigez un commentaire, vous pouvez créer un autre champ pour la note sur dix. Vous pouvez ensuite modifier votre modèle d'article pour afficher votre note au même endroit chaque fois que vous publiez un avis.
Les champs personnalisés sont pratiques si vous le souhaitez :
- Faire des mises en page personnalisées
- Ajouter du contenu à votre flux RSS, comme des publicités ou des logos de marque
- Contrôler le fonctionnement de WordPress avec des automatisations.
Maintenant que nous avons compris à quoi servent les champs personnalisés, créons un formulaire de message d'invité avec des champs personnalisés.
Comment utiliser les champs personnalisés dans les articles invités de WordPress
Nous allons éditer des fichiers WordPress importants plus loin dans ce tutoriel. Avant de commencer, je vous recommande d'utiliser un plugin de sauvegarde pour sauvegarder votre site WordPress.
1. Installer les plugins
Pour ce tutoriel, nous aurons besoin d'installer 3 plugins :
- WPForms Pro
- Le module complémentaire WPForms Post Submissions
- La version gratuite ou payante du plugin Advanced Custom Fields (ACF).
Une fois WPForms Pro installé et activé, naviguez vers WPForms " Addons pour installer Post Submissions.
Faites défiler vers le bas et cliquez pour l'installer.
Enfin, installons le plugin gratuit Advanced Custom Fields. Dans le tableau de bord de WordPress, allez dans Plugins " Ajouter un nouveau.
Recherchez Advanced Custom Fields et cliquez sur le bouton Installer maintenant.
Lorsque le plugin est installé, n'oubliez pas de cliquer sur Activer.
C'est très bien ! Nous avons maintenant tout mis en place. Passons maintenant à la création de notre champ personnalisé.
2. Créer un champ personnalisé dans ACF
Dans cet exemple, nous utiliserons un champ personnalisé pour collecter le nom du site web de notre blogueur invité afin de l'afficher sous son nom.
Pour commencer, allez dans la barre latérale et cliquez sur Champs personnalisés " Ajouter un nouveau.
En haut, donnez un nom à votre nouveau groupe de champs. Ce que vous tapez ici n'a pas d'importance, car il n'apparaîtra pas dans la page d'accueil. Utilisez simplement un nom que vous reconnaîtrez plus tard.
Cliquez maintenant sur Ajouter un champ pour commencer à créer votre champ personnalisé.
Vous remarquerez que certaines options s'affichent en dessous. Vous n'avez pas besoin de toutes les remplir. Voici les deux que nous allons utiliser :
- Libellé du champ - Donnez à votre nouveau champ un nom qui ait du sens pour vous.
- Type de champ - Nous allons utiliser un simple champ de texte, nous avons donc laissé ce paramètre sur Text.
Vous remarquerez que le champ Nom du champ est automatiquement rempli pour vous.
Cliquez sur Publier pour enregistrer votre nouveau champ personnalisé.
Vous pouvez voir ici que le nouveau champ a été enregistré. Notez le nom du champ - vous en aurez besoin à l'étape suivante.
Nous pouvons maintenant créer le formulaire de publication d'un billet d'invité pour l'interface du site.
3. Créez votre formulaire d'article invité
Dans cette étape, nous allons créer un formulaire de soumission d'article invité et y ajouter le nouveau champ afin que le blogueur invité puisse le remplir.
Si vous n'avez pas encore de formulaire pour les articles soumis par les utilisateurs, commencez par cliquer sur WPForms " Add New dans la barre de navigation de WordPress.
Cliquez maintenant sur le formulaire de soumission d'articles de blog pour l'ouvrir.
Si vous avez besoin de modifier les paramètres par défaut, consultez ce guide sur la création d'un formulaire frontal pour les messages soumis par les utilisateurs. Lorsque toutes les bases sont prêtes, revenez à ce tutoriel.
4. Ajouter un champ personnalisé au formulaire du billet d'invité
Maintenant que vous avez un formulaire de post soumis par l'utilisateur, vous devez ajouter le champ personnalisé que nous avons créé à l'étape 2.
Faisons glisser un champ de texte à ligne unique du panneau de gauche vers l'aperçu du formulaire à droite. Nous l'appellerons Nom du site web.
Nous sommes maintenant prêts à faire correspondre le champ au champ que nous avons créé dans le plugin Advanced Custom Fields.
Pour commencer, cliquez sur Paramètres dans la colonne de gauche, puis sur Soumissions d'articles.
Cet écran présente toutes les fonctionnalités et caractéristiques de l'addon Post Submissions. Vous pouvez y définir le statut du message et d'autres paramètres.
Pour ajouter le champ personnalisé, vous devez faire défiler la page jusqu'à la section Custom Post Meta.
A gauche, collez le nom du champ que nous avons créé dans ACF. À droite, choisissez le champ de formulaire Nom du site Web que nous venons de créer dans WPForms.
C'est tout ce que vous avez à faire ! À partir de maintenant, tout ce qui est saisi dans le champ Nom du site Web sera enregistré dans le champ personnalisé afin que vous puissiez l'afficher dans votre modèle d'article.
Cliquez sur Enregistrer pour sauvegarder votre formulaire.
Prêt à publier des articles en tant qu'invité ? Si vous ne l'avez pas encore fait, cliquez sur le bouton Intégrer pour publier votre formulaire. Vous pouvez l'ajouter automatiquement à une page ou utiliser un code court.
Maintenant, lorsque vous affichez le formulaire de soumission de votre article invité sur le frontend, vous verrez le champ supplémentaire que nous avons ajouté plus tôt.
Remplissez le formulaire avec une entrée test. Une fois qu'il est soumis, nous pouvons afficher le champ sur le frontend de votre site.
5. Ajoutez vos champs personnalisés à votre site web
Il existe de nombreuses façons d'afficher les données d'un champ personnalisé dans WordPress. Nous allons vous montrer quelques exemples simples.
Cette première méthode nécessite une certaine connaissance des fichiers de thème de WordPress. Avant de continuer, créez un thème enfant pour votre site web. (Il est également conseillé de sauvegarder votre site à ce stade).
Dans tous ces exemples, nous utiliserons the_field() dans Champs personnalisés avancés.
Tout d'abord, modifions notre modèle d'article unique pour afficher le champ. Allez dans Apparences " Editeur de thème.
Nous avons ouvert le fichier de thème appelé single.php. Dans votre thème, le nom de ce fichier modèle peut être différent.
Trouvez un endroit où afficher votre champ, puis collez ce code. Il s'agit d'un exemple très simple pour commencer :
<?php if( get_field('author_website_name') ): ?>
<h2>Author's Blog: <?php the_field('author_website_name'); ?></h2>
<?php endif; ?>
Ce code signifie que WordPress affichera le nom du site web de l'auteur dans un H2 si cette information existe. Il suffit de changer le nom du champ author_website_name au nom du champ que vous avez créé.
Lorsque vous enregistrez le fichier modèle, votre champ apparaît dans vos articles de blog à l'endroit où vous avez placé le code.
Si cela vous semble un peu compliqué, nous allons rapidement vous montrer une façon plus simple d'utiliser les champs personnalisés avec Elementor.
6. Afficher les champs personnalisés avec Elementor
Avant de terminer le tutoriel sur l'utilisation des champs personnalisés dans les articles soumis par les utilisateurs, nous voulions vous montrer rapidement comment afficher un champ personnalisé dans Elementor.
Cette méthode vous permet de créer facilement des modèles avancés pour le contenu soumis par les utilisateurs.
Dans cet exemple, nous avons un bloc de texte vide dans Elementor. Cliquez sur l'icône en haut qui est étiqueté Dynamic Tags dans cette capture d'écran :
Sélectionnez ensuite ACF Field et choisissez le champ personnalisé que vous avez créé à l'étape 2.
Désormais, le contenu de votre champ personnalisé s'affichera dans vos posts chaque fois que vous utiliserez ce template Elementor. Cela rend très facile l'affichage des données des champs personnalisés que vous collectez dans WPForms.
Créez votre formulaire WordPress maintenant
Prochaine étape : Obtenir plus de soumissions d'articles d'invités
Maintenant que vous avez mis en place un formulaire d'articles invités avec des champs personnalisés, vous voudrez obtenir plus de contenu soumis par les utilisateurs pour votre site. Pour ce faire, consultez ces conseils sur la manière d'obtenir plus d'articles d'invités sur votre blog.
Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de construction de formulaire WordPress le plus facile à utiliser. WPForms Pro inclut l'addon Post Submissions et offre une garantie de remboursement de 14 jours.
Si cet article vous a aidé, n'hésitez pas à nous suivre sur Facebook et Twitter pour d'autres tutoriels et guides gratuits sur WordPress.
Je n'arrive pas à afficher plus que les trois champs qui existaient déjà lors de la soumission de l'article, dans la vue finale de mon blog ! J'ai essayé les champs personnalisés mais je n'ai pas réussi
Bonjour Maryam,
Pour vous aider à y voir plus clair, pourriez-vous nous contacter via le support avec des détails supplémentaires et notre équipe se fera un plaisir de vous aider !
Merci 🙂 .
J'ai besoin d'utiliser un champ personnalisé vrai/faux pour mes soumissions de messages. Actuellement, le résultat est que le champ est toujours vrai parce qu'il envoie toujours une valeur non booléenne au champ. Existe-t-il un moyen simple de faire en sorte que le message envoie une valeur booléenne vrai/faux au champ personnalisé ?
Bonjour Sondre,
Merci de nous avoir contactés ! Pour vous aider à obtenir une réponse complète, veuillez nous contacter via l'assistance et nous serons heureux de vous aider 🙂 .