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

Les formulaires d'envoi de messages d'invités ne recueillent généralement que les titres et le contenu, vous laissant le soin de formater manuellement les informations relatives à l'auteur pour chaque envoi.

Cela crée des sections d'auteurs incohérentes et 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 d'auteur structurées 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 en utilisant WPForms et Advanced Custom Fields (ACF).

Vous créerez des formulaires qui recueillent automatiquement les coordonnées de l'auteur et les affichent de manière cohérente sur les articles publiés, sans aucune difficulté.

Commencez à accepter des articles d'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 "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 avis, vous pouvez créer un autre champ pour la note sur dix.

Vous pouvez ensuite modifier votre modèle de message pour afficher votre évaluation 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. Une fois que c'est fait, suivez les étapes ci-dessous :

Étape 1 : Installer les plugins nécessaires

Pour ce tutoriel, nous aurons besoin d'installer 3 plugins :

• WPForms Pro: Crée le formulaire de soumission d'un billet d'invité
• Post Submissions Addon : Convertit les soumissions de formulaires en articles WordPress publiés
• Champs personnalisés avancés (ACF) : Stocke et affiche des informations personnalisées sur les auteurs

Commencez par installer et activer WPForms Pro. Une fois activé, naviguez vers WPForms " Addons dans votre tableau de bord WordPress.

Trouvez le module complémentaire Post Submissions et cliquez sur Install Addon. Ce module convertit les soumissions de formulaires en articles WordPress sur votre site web.

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

Recherchez Advanced Custom Fields et cliquez sur Install Now sur la version gratuite (la version gratuite possède toutes les fonctionnalités nécessaires pour ce tutoriel).

Lorsque le plugin est installé, n'oubliez pas de cliquer sur Activer. C'est très bien ! Tout est maintenant en place. Passons maintenant à 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 des informations supplémentaires sur les auteurs invités.

Ces champs définissent les données supplémentaires que vous collectez en plus du titre et du contenu standard, telles que les sites web des auteurs, les profils sociaux ou les domaines d'expertise.

Dans votre barre latérale WordPress, cliquez sur Champs personnalisés " Ajouter un nouveau 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 sur l'article invité". Ce nom est réservé à l'organisation interne et n'apparaîtra pas sur la page d'accueil de votre site web.

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.

Vous allez maintenant créer le formulaire frontal que les blogueurs invités utiliseront pour soumettre leur contenu. Ce formulaire recueillera à la fois le contenu standard de l'article et les informations du champ personnalisé 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 " Add New dans la barre de navigation de WordPress.

Recherchez le modèle de formulaire de soumission d'articles de blog et cliquez sur Utiliser le modèle. Ce modèle préconstruit comprend des champs essentiels pour la collecte de billets d'invités :

• Champ du titre de l'article
• Zone de contenu de l'article (éditeur visuel)
• Nom et adresse électronique de l'auteur
• Chargement d'images vedettes
• 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 frontal pour les messages soumis par les utilisateurs. Lorsque toutes les bases sont prêtes, revenez à ce tutoriel.

Étape 4 : Ajouter un champ personnalisé au formulaire d'envoi d'un 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 sur le côté gauche, puis sur Soumissions de messages.

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 descendre jusqu'à la section Custom Post Meta. 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 le nom que vous lui avez donné) et que vous venez d'ajouter à votre formulaire.

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.

Étape 5 : Ajouter 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 à 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.

É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 l'utilisateur. 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.

FAQ sur l'affichage des champs personnalisés dans les articles invités

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

Comment intégrer WPForms à ACF ?

Installez WPForms Pro et Advanced Custom Fields, puis créez vos champs personnalisés dans ACF en premier. Dans votre formulaire WPForms guest post, allez dans Settings " Post Submissions et faites défiler jusqu'à la section Custom Post Meta.

Faites correspondre les noms de vos champs ACF (à gauche) à vos champs WPForms (à droite). L'intégration est automatique une fois que les deux plugins sont actifs. Aucune configuration supplémentaire n'est nécessaire.

Comment utiliser les champs personnalisés dans WordPress ?

Les champs personnalisés stockent des informations supplémentaires par rapport au contenu standard des articles. Dans WordPress, allez dans Champs personnalisés " Ajouter un nouveau pour créer des groupes de champs, puis ajoutez des champs individuels comme du texte, des zones de texte ou des options de liste déroulante.

Vous pouvez afficher les données des champs personnalisés dans votre thème à l'aide de la fonction the_field() ou par l'intermédiaire de constructeurs de pages comme Elementor en utilisant des 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 de WordPress. Ils sont également appelés champs "méta de l'article". Par exemple, vous pouvez créer des champs personnalisés pour les prix des produits, les biographies des auteurs ou les évaluations.

Contrairement au contenu normal, 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 de WordPress ?

You can display custom fields using PHP code in your theme files or through page builders like Elementor. For code method, use <?php the_field(‘field_name’); ?> where you want the data to appear.

Pour Elementor, ajoutez un widget texte et utilisez Dynamic Tags " ACF Field pour récupérer les données de votre champ personnalisé. Ces deux méthodes permettent d'afficher automatiquement les informations collectées dans les formulaires de vos billets d'invité.

Comment activer les champs personnalisés dans WordPress ?

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

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

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

Avec ACF installé, les champs personnalisés apparaissent automatiquement lors de l'édition des articles. Pour les soumissions d'invités via WPForms, les champs personnalisés se remplissent automatiquement lorsque les formulaires sont soumis.

Vous ne les ajoutez pas manuellement aux 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 fonctions de contenu dynamique d'Elementor.

Puis-je utiliser WPForms Post Submissions pour du contenu généré par l'utilisateur ?

Oui, le module complémentaire Post Submissions est parfait pour tout contenu généré par l'utilisateur, y compris les messages d'invités, les offres d'emploi, les témoignages ou les soumissions de la communauté.

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 de les publier et conserver un contrôle éditorial total sur le contenu soumis par les utilisateurs.

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.

Créez votre formulaire Wordpress maintenant

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 de nombreux modèles gratuits 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.