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.

Dans cet article, nous allons expliquer ce que sont les champs personnalisés dans WordPress et comment ils fonctionnent. Nous vous guiderons également dans le processus d’ajout et d’utilisation de ces champs. Bien que cette technique soit un peu avancée, elle est plus simple que vous ne le pensez. Mettons-nous au travail !

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 :

Un exemple de champ personnalisé à l'arrière.

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 :

Ouverture du menu des paramètres de l'éditeur de bloc.

Sélectionnez ensuite Options:

Ouverture des options de l'éditeur de bloc.

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

Activation des champs personnalisés dans l'éditeur de bloc.

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

Une section vide de champs personnalisés dans l'éditeur de bloc.

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 :

L'option Entrer dans un nouveau champ personnalisé.

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é:

Ajout d'un nouveau champ personnalisé dans WordPress.

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 :

Sélection d'un champ personnalisé dans la liste déroulante.

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):

L'éditeur du thème WordPress.

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 :

Exemple de champs personnalisés dans WordPress sur le front-end

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

Au fur et à mesure que vous vous familiarisez avec WordPress, vous pouvez commencer à utiliser certaines de ses fonctions plus avancées. Les champs personnalisés en sont l’exemple parfait – une option cachée qui élargit considérablement votre contrôle sur votre contenu.

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 !