Comment afficher des champs personnalisés dans les articles invités [Tutoriel WordPress]

Les formulaires de publication d'invités ne collectent généralement que les titres et le contenu, vous laissant le soin de formater manuellement les informations de l'auteur pour chaque soumission.

Cela crée des sections d'auteur incohérentes et vous fait perdre des heures à reformater les détails des blogueurs invités tels que les sites Web, les profils sociaux et les biographies.

Les champs personnalisés résolvent ce problème en collectant automatiquement des données structurées sur l'auteur qui s'affichent de manière professionnelle sur chaque article invité.

Ce tutoriel vous montre comment ajouter des champs personnalisés aux formulaires d'articles invités à l'aide de WPForms et d'Advanced Custom Fields (ACF).

Vous créerez des formulaires qui collectent automatiquement les détails de l'auteur et les affichent de manière cohérente sur les articles publiés, sans les tracas.

Commencez à accepter des articles invités dès aujourd'hui ! :)

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 « méta de publication ».

Votre site dispose probablement déjà de certains 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 écrivez une critique, vous pourriez avoir un autre champ pour la note sur dix.

Vous pouvez ensuite modifier le modèle de votre article pour afficher votre note au même endroit chaque fois que vous publiez une critique. Les champs personnalisés sont utiles si vous souhaitez :

• Créer des mises en page personnalisées
• Ajouter du contenu à votre flux RSS, comme des publicités ou des logos de marque
• Contrôler la façon dont WordPress fonctionne avec des automatisations.

Maintenant que nous comprenons à quoi servent les champs personnalisés, créons un formulaire d'article invité avec des champs personnalisés.

Comment utiliser les champs personnalisés dans les articles invités WordPress

Nous allons modifier des fichiers WordPress importants plus loin dans le tutoriel. Avant de commencer, je vous recommande d'utiliser un plugin de sauvegarde pour sauvegarder votre site WordPress. Une fois terminé, suivez les étapes ci-dessous :

Étape 1 : Installer les plugins requis

Pour ce tutoriel, nous devrons installer 3 plugins :

• WPForms Pro : Crée le formulaire de soumission d'article invité sur le frontend
• Addon Post Submissions : Convertit les soumissions de formulaires en articles WordPress publiés
• Advanced Custom Fields (ACF) : Stocke et affiche des informations personnalisées sur l'auteur

Commencez par installer et activer WPForms Pro. Une fois activé, accédez à WPForms » Addons dans votre tableau de bord WordPress.

Trouvez l'addon Post Submissions et cliquez sur Installer l'Addon. Cet addon est ce qui convertit vos soumissions de formulaires en articles WordPress réels sur votre site Web.

Ensuite, installez le plugin Advanced Custom Fields. Allez dans Plugins » Ajouter dans votre tableau de bord WordPress.

Recherchez Advanced Custom Fields et cliquez sur Installer maintenant pour la version gratuite (la version gratuite contient toutes les fonctionnalités nécessaires à ce tutoriel).

Une fois le plugin installé, n'oubliez pas de cliquer sur Activer. Super ! Nous avons maintenant tout configuré. Passons à la création de notre champ personnalisé.

Étape 2 : Créer un champ personnalisé dans ACF

Vous allez maintenant créer les champs personnalisés qui stockent les informations supplémentaires sur l'auteur invité.

Ces champs définissent les données supplémentaires que vous collectez au-delà du titre et du contenu standard, tels que les sites Web des auteurs, les profils sociaux ou les domaines d'expertise.

Dans la barre latérale de votre WordPress, cliquez sur Champs personnalisés » Ajouter pour créer un nouveau groupe de champs.

Donnez à votre groupe de champs un nom descriptif comme « Informations sur l'auteur invité » ou « Détails de l'article invité ». Ce nom est uniquement destiné à l'organisation interne et n'apparaîtra pas sur le frontend de votre site Web.

Maintenant, cliquez sur Ajouter un champ pour commencer à créer votre champ personnalisé.

Vous remarquerez que certaines options apparaissent en dessous. Vous n'avez pas besoin de tout remplir. Voici les 2 que nous allons utiliser :

• Libellé du champ – Donnez à votre nouveau champ un nom qui a du sens pour vous.
• Type de champ – Nous allons utiliser un champ de texte simple, nous avons donc laissé ce réglage sur Texte.

Vous remarquerez que le champ Nom du champ sera 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 pour l'étape suivante.

Vous allez maintenant créer le formulaire frontend que les blogueurs invités utilisent pour soumettre leur contenu. Ce formulaire collectera à la fois le contenu standard de l'article et les informations des champs personnalisés que vous venez de créer.

Étape 3 : Créer 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 » Ajouter dans la barre de navigation WordPress.

Recherchez le modèle de formulaire de soumission d'article de blog et cliquez sur Utiliser le modèle. Ce modèle pré-conçu comprend les champs essentiels pour la collecte d'articles invités :

• Champ de titre de l'article
• Zone de contenu de l'article (éditeur visuel)
• Nom et e-mail de l'auteur
• Téléchargement de l'image mise en avant
• Sélection de la catégorie de l'article

Si vous avez besoin de modifier les paramètres par défaut, consultez ce guide sur la création d'un formulaire frontend pour les articles soumis par les utilisateurs. Lorsque vous avez les bases prêtes, revenez à ce tutoriel.

Étape 4 : Ajouter un champ personnalisé au formulaire d'article invité

Maintenant que vous avez un formulaire de publication soumis par l'utilisateur, vous voudrez ajouter le champ personnalisé que nous avons créé à l'étape 2.

Faisons glisser un champ de texte d'une seule ligne depuis le panneau de gauche vers l'aperçu du formulaire à droite. Nous appellerons cela Nom du site Web.

Nous sommes maintenant prêts à mapper le champ au champ que nous avons créé dans le plugin Advanced Custom Fields. Pour commencer, cliquez sur Paramètres sur le côté gauche, puis sur Soumissions d'articles.

Cet écran affiche toutes les fonctionnalités et caractéristiques du module complémentaire Post Submissions. Vous pouvez y définir le statut de l'article et d'autres paramètres.

Pour ajouter le champ personnalisé, faites défiler tout en bas jusqu'à la section Méta d'article personnalisé. Sur la gauche, collez le Nom du champ que nous avons créé dans ACF.

Sur la droite, choisissez le champ de formulaire Nom du site Web que nous venons de créer dans WPForms (ou quel que soit son nom) que vous venez d'ajouter à votre formulaire.

C'est tout ce que vous avez à faire ! Désormais, tout ce qui sera tapé 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 à recevoir des articles d'invités ? Vous voudrez cliquer sur le bouton Intégrer pour publier votre formulaire si vous ne l'avez pas déjà fait. Vous pouvez l'ajouter automatiquement à une page ou utiliser un shortcode.

Maintenant, lorsque vous verrez votre formulaire de soumission d'article invité sur le front-end, vous verrez le champ supplémentaire que nous avons ajouté précédemment.

Allez-y et remplissez le formulaire avec une entrée de test. Une fois qu'il est soumis, nous pouvons afficher le champ sur le front-end de votre site.

Étape 5 : Ajouter vos champs personnalisés à votre site Web

Il existe de nombreuses façons différentes d'afficher les données des champs personnalisés dans WordPress. Nous allons vous montrer quelques exemples simples.

Cette première méthode nécessite une certaine connaissance des fichiers de thème WordPress. Avant de continuer, créez un thème enfant pour votre site Web. (Il est également conseillé de sauvegarder à nouveau votre site à ce stade.)

Dans tous ces exemples, nous utiliserons la fonction the_field() dans Advanced Custom Fields. Tout d'abord, modifions notre modèle d'article unique pour afficher le champ. Allez dans Apparences » Éditeur 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 pour afficher votre champ, puis collez ce code. C'est 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 ces informations existent. Changez simplement le nom du champ author_website_name par le nom du champ que vous avez créé.

Lorsque vous enregistrez le fichier modèle, votre champ apparaîtra dans vos articles de blog là où vous avez placé le code.

Si cela vous semble un peu délicat, nous allons vous montrer rapidement une manière plus simple d'utiliser les champs personnalisés avec Elementor.

Étape 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 intitulée Balises dynamiques sur cette capture d'écran :

Sélectionnez maintenant Champ ACF et choisissez le champ personnalisé que vous avez créé à l'étape 2.

Maintenant, le contenu de votre champ personnalisé s'affichera sur vos articles chaque fois que vous utiliserez ce modèle Elementor. Cela rend très facile l'affichage des données de champs personnalisés que vous collectez dans WPForms.

FAQ sur la façon d'afficher les champs personnalisés dans les articles invités

Apprendre à ajouter et afficher des champs personnalisés dans les formulaires d'articles invités est un sujet qui intéresse beaucoup nos lecteurs. Voici les réponses à quelques questions courantes à ce sujet :

Comment intégrer WPForms avec ACF ?

Installez WPForms Pro et Advanced Custom Fields, puis créez d'abord vos champs personnalisés dans ACF. Dans votre formulaire d'article invité WPForms, allez dans Paramètres » Soumissions d'articles et faites défiler jusqu'à la section Métadonnées personnalisées de l'article.

Mappez les noms de vos champs ACF (côté gauche) à vos champs WPForms (côté droit). L'intégration est automatique une fois les deux plugins actifs. Aucune configuration supplémentaire n'est requise.

Comment utiliser les champs personnalisés dans WordPress ?

Les champs personnalisés stockent des informations supplémentaires au-delà du contenu standard de l'article. Dans WordPress, allez dans Champs personnalisés » Ajouter pour créer des groupes de champs, puis ajoutez des champs individuels comme des options de texte, de zone de texte ou de liste déroulante.

Vous pouvez afficher les données des champs personnalisés dans votre thème en utilisant la fonction the_field() ou via des constructeurs de pages comme Elementor en utilisant les balises dynamiques.

Que sont les champs personnalisés dans WordPress ?

Les champs personnalisés sont des zones de stockage de données supplémentaires pour les articles et les pages WordPress. Ils sont également appelés champs "métadonnées d'article". Par exemple, vous pourriez créer des champs personnalisés pour les prix des produits, les biographies d'auteurs ou les notes d'évaluation.

Contrairement au contenu ordinaire, les champs personnalisés stockent des données structurées qui peuvent être affichées de manière cohérente sur votre site Web et utilisées pour le tri, le filtrage ou des mises en page spéciales.

Comment afficher les champs personnalisés dans les articles WordPress ?

Vous pouvez afficher les champs personnalisés à l'aide de code PHP dans les fichiers de votre thème ou via des constructeurs de pages comme Elementor. Pour la méthode de code, utilisez <?php the_field(‘field_name’); ?> là où vous souhaitez que les données apparaissent.

Pour Elementor, ajoutez un widget de texte et utilisez Balises dynamiques » Champ ACF pour importer les données de votre champ personnalisé. Les deux méthodes affichent automatiquement les informations collectées à partir de vos formulaires d'articles invités.

Comment activer les champs personnalisés dans WordPress ?

Les champs personnalisés sont toujours disponibles dans WordPress mais peuvent être masqués dans l'éditeur d'articles. Pour les afficher, modifiez n'importe quel article et cliquez sur Options de l'écran (en haut à droite), puis cochez "Champs personnalisés".

Cependant, pour les soumissions d'articles invités, vous n'avez pas besoin de l'activer. WPForms et ACF gèrent la création et la gestion des champs personnalisés automatiquement via leurs interfaces.

Comment ajouter des champs personnalisés aux pages et articles WordPress ?

Avec ACF installé, les champs personnalisés apparaissent automatiquement lors de la modification des articles. Pour les soumissions d'invités via WPForms, les champs personnalisés se remplissent automatiquement lors de la soumission des formulaires.

Vous ne les ajoutez pas manuellement à des articles individuels – le processus de soumission du formulaire s'en charge. Pour afficher les données, vous modifierez le modèle de votre thème ou utiliserez les fonctionnalités de contenu dynamique d'Elementor.

Puis-je utiliser les soumissions d'articles WPForms pour du contenu généré par les utilisateurs ?

Oui, le module complémentaire Soumissions d'articles est parfait pour tout contenu généré par les utilisateurs, y compris les articles invités, les offres d'emploi, les témoignages ou les soumissions communautaires.

Il crée automatiquement des articles WordPress à partir des soumissions de formulaires, attribue des auteurs, définit des catégories et gère les données des champs personnalisés.

Vous pouvez modérer les soumissions avant publication et conserver un contrôle éditorial complet sur le contenu soumis par les utilisateurs.

Prochaine étape : Obtenez plus de soumissions d'articles invités

Maintenant que vous avez configuré un formulaire d'article invité 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 comment obtenir plus d'articles invités sur votre blog.

Créez votre formulaire WordPress maintenant

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple.  WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.