Guide d’initiation aux champs personnalisés dans WordPress : Explication + Tutoriel

Il peut être long d’ajouter sans cesse la même information à plusieurs messages, en particulier pour les sites à fort contenu comme les blogs. C’est une tâche que vous pouvez accomplir beaucoup plus rapidement en utilisant des champs personnalisés dans WordPress.

Avec les champs personnalisés, vous pouvez créer un endroit dans l’éditeur pour ajouter un type d’information spécifique à chacun de vos messages ou pages. Par exemple, vous pouvez incorporer une note de produit pour les critiques ou une clause de non-responsabilité pour le contenu des affiliés.

Une introduction aux champs personnalisés (et où les trouver dans WordPress)

Le la fonction de champs personnalisés est caché par défaut dans WordPress, mais il peut être une option utile à connaître. En bref, elle vous permet de personnaliser vos articles et vos pages en y ajoutant des métadonnées supplémentaires.

Par exemple, supposons que vous dirigiez un site web affilié et que vous publiiez fréquemment des critiques de nouveaux produits. Vous pouvez ajouter un champ « score » personnalisé à vos messages afin d’afficher clairement une note pour chaque produit :

Dans l’exemple ci-dessus, le nom du champ personnalisé est Score de l’examenet la valeur est le score lui-même (par exemple 3.5/5). Lorsqu’ils sont ajoutés à un message, les champs personnalisés sont stockés sous forme de « métadonnées ». Il s’agit d’informations associées à un contenu particulier (comme les titres des articles, les méta descriptions et d’autres éléments).

Après avoir stocké et classé vos métadonnées personnalisées, vous pouvez les afficher sur le site afin que les utilisateurs de votre site puissent les voir. Dans l’exemple de note d’évaluation ci-dessus, par exemple, vous pouvez afficher la note de votre produit en utilisant un système d’étoiles (c’est ainsi que fonctionnent la plupart des plugins d’évaluation, en bref).

Si tout cela vous semble un peu abstrait, ne vous inquiétez pas. Nous continuerons à démontrer le fonctionnement des champs personnalisés dans la suite de ce billet.

Comment utiliser les champs personnalisés dans WordPress (en trois étapes)

Un petit mot : Dans cette section, nous allons vous montrer comment utiliser la fonction de champs personnalisés de WordPress en natif, car il est utile d’en comprendre les principes de base. Cependant, la plupart des gens trouvent plus facile d’utiliser les plugins de champs personnalisés tels que Advanced Custom Fields (ACF), Pods, Toolset, ou Meta Box. Plus d’informations à ce sujet plus tard.

Il y a deux façons d’ajouter des champs personnalisés dans WordPress. La première consiste à utiliser un plugin, tel que Advanced Custom Fields (champs personnalisés avancés). La seconde est d’utiliser la fonctionnalité native de WordPress. Ce n’est pas aussi simple, mais si vous vous attaquez aux champs personnalisés manuellement, vous avez une liberté absolue sur les métadonnées que vous incluez. Même si vous utilisez un plugin, il est également utile de comprendre ce qui se passe sous le capot.

Nous avons montré ci-dessous comment accéder à cette fonction et l’utiliser. Notez que nous allons éditer certains des fichiers principaux de votre thème au cours de ces étapes. Nous vous recommandons donc d’avoir une sauvegarde récente en place et d’utiliser un thème enfant. Si possible, essayez d’abord sur un site de mise en scène.

Étape 1 : Activer l’option des champs personnalisés dans l’éditeur WordPress

Comme nous l’avons mentionné, vous devez généralement activer les champs personnalisés dans WordPress avant de pouvoir les voir.

Dans l’éditeur de bloc, cliquez sur l’icône à trois points pour ouvrir le menu des paramètres :

Sélectionnez ensuite Options:

Une fenêtre contextuelle s’ouvrira alors. Sélectionnez le Champs personnalisés puis cliquez sur la case à cocher Activer bouton :

Rechargez le poste, et vous trouverez la section des champs personnalisés sous l’éditeur :

Maintenant que la fonction de champs personnalisés de WordPress est visible, vous pouvez commencer à ajouter des métadonnées.

Étape 2 : Ajouter un nouveau champ personnalisé

Pour créer un champ personnalisé, cliquez sur le bouton Entrer Nouveau dans la section des champs personnalisés sous l’éditeur :

Donnez-lui ensuite un nom et une valeur. Par exemple, disons que vous souhaitez ajouter un bref avertissement à vos messages parrainés. Vous pourriez appeler le champ associé Poste sponsorisé:

Dans le Valeur vous pouvez saisir les métadonnées spécifiques au poste que vous êtes en train de traiter. Dans ce cas, il s’agira d’une simple Oui ou Nonpour indiquer si le poste est parrainé ou non. Ensuite, cliquez sur Ajouter un champ personnalisé pour sauvegarder ces informations (n’oubliez pas de sauvegarder ou de mettre à jour le poste lui-même également).

Une fois que vous aurez fait cela, le même champ personnalisé sera disponible pour ajouter à tout autre poste ou page du Nom menu déroulant :

Cela signifie que pour chaque nouveau poste, vous pouvez simplement sélectionner votre champ personnalisé et remplir la valeur de façon appropriée.

Étape 3 : Indiquez à votre thème comment afficher les métadonnées de votre champ personnalisé

⚠️ Important: Veillez à sauvegarder votre site avant de continuer. Vous éditerez directement vos fichiers de thème, ce qui a toujours une chance de casser quelque chose.

La création d’un champ personnalisé vous permet d’ajouter des métadonnées à l’arrière-plan. Toutefois, si vous souhaitez afficher ces données en tête de page, vous devrez modifier les fichiers de votre thème actif.

Dans votre tableau de bord WordPress, naviguez vers Apparition > Rédacteur du thème. Vous devrez être très prudent ici, car cette section vous permet d’apporter des modifications directement aux fichiers de votre site. Dans la barre de droite, cherchez Poste unique (single.php):

Le single.php comprend le modèle que votre thème utilise pour les différents articles de blog. Ouvrez-le et recherchez la ligne qui se lit /* Start the Loop */. Le site boucle est le code que WordPress utilise pour décider des articles de blog à charger pour chaque page, en fonction de sa configuration.

Nous sommes pas va modifier la boucle pour votre modèle de message individuel, mais plutôt ajouter quelques nouvelles lignes de code juste avant la fin de celui-ci. Vous pouvez ajouter n’importe quel code pour indiquer à WordPress ce qu’il doit faire des données dans vos champs personnalisés. Par exemple, voici un extrait que vous pourriez utiliser :





Remarquez qu’il y a une valeur qui se lit clé dans la première ligne de code. Il s’agit d’un espace réservé que vous devez écraser en utilisant le nom du champ personnalisé que vous avez créé lors de la première étape. Dans notre exemple, ce serait Poste sponsorisé:

Ce code indique à WordPress de rechercher le Poste sponsorisé champ personnalisé et vérifier sa valeur. S’il trouve ce champ personnalisé pour un poste spécifique, il affichera sa valeur :

Vous trouverez d’autres exemples de codes de ce type dans le Entrée des champs personnalisés du Codex WordPress.

Si vous le souhaitez, vous pouvez également expérimenter de placer le code en dehors de la boucle WordPress, afin de pouvoir contrôler son emplacement. Vous risquez de passer un certain temps à modifier ce fichier jusqu’à ce que vous obteniez le placement parfait, c’est précisément pourquoi nous vous recommandons d’avoir une sauvegarde sous la main.

Conclusion

Dans ce guide, nous vous avons montré comment utiliser les champs personnalisés dans WordPress en trois étapes :

1. Activez les champs personnalisés dans l’éditeur WordPress.
2. Ajouter un nouveau champ personnalisé.
3. Configurez votre thème pour afficher les métadonnées de votre champ personnalisé.

Cependant, la plupart des gens ne travaillent pas directement avec la fonction de champs personnalisés indigènes comme nous vous l’avons montré dans ce post. Au lieu de cela, la plupart des gens utilisent un plugin.

Maintenant que vous comprenez les bases des champs personnalisés, consultez notre tutoriel pour le plugin des champs personnalisés avancés afin d’apprendre une façon plus simple d’utiliser les champs personnalisés sur votre site web.

Vous avez des questions sur l’utilisation des champs personnalisés dans WordPress ? Faites-le nous savoir dans la section commentaires ci-dessous !