Le guide essentiel des champs personnalisés WordPress

S'il y a une caractéristique de WordPress qui le distingue des autres systèmes de gestion de contenu (CMS), c'est la personnalisation. Les champs personnalisés dans WordPress sont une partie intégrée du CMS qui vous permet non seulement d'étendre les métadonnées et les informations que vous affichez, mais aussi de changer complètement la fonctionnalité et l'utilité d'un article ou d'une page. Nous voulons vous aider à comprendre les fondamentaux. Nous allons discuter de ce qu'est un champ personnalisé, pourquoi ils sont utiles et fournir des exemples concrets de la façon dont ils sont utilisés.

Abonnez-vous à notre chaîne Youtube

Que sont les champs personnalisés WordPress ?

En bref, les champs personnalisés WordPress vous permettent d'ajouter des éléments spécifiques aux pages. Il peut s'agir d'un type spécifique d'image, de signature ou de biographie d'auteur, peut-être une note ou même quelque chose comme, comme le dit l'entrée du Codex sur les champs personnalisés, l'humeur, la lecture, l'écoute ou les boîtes météo en cours.

Ces champs constituent ce qu'on appelle les métadonnées de votre article (essentiellement tout ce qui n'est pas inclus dans le contenu principal de votre article). Par défaut, WordPress a des méta-boîtes pour les informations génériques, comme les balises, les catégories, les permaliens, les images en vedette, etc. Si vous souhaitez en ajouter d'autres, vous utiliserez des champs personnalisés.

Vous voudrez peut-être même ajouter des informations que chacun des rédacteurs de votre équipe doit compléter pour publier un article.

Vous pouvez créer un champ obligatoire qui ne laissera pas la publication être publiée tant que certains critères ne seront pas cochés. Gardez donc à l'esprit que ces champs personnalisés ne sont pas uniquement destinés à des informations sur le front-end. Ils peuvent également être utiles pour le back-end.

Ajouter des champs personnalisés à un article WordPress

Par défaut, les champs personnalisés WordPress sont désactivés dans l'éditeur de page et de publication. Si vous utilisez l'éditeur de blocs, il est facile de les activer. Cliquez simplement sur l' icône d'engrenage dans le coin supérieur droit de l'écran. Sélectionnez Options .

Choisissez ensuite d'activer les champs personnalisés près du bas de l'écran qui s'affiche. Vous devrez recharger la page, alors assurez-vous d'abord d'enregistrer votre travail.

Une fois que vous avez activé et rechargé, vos méta-boîtes de champs personnalisés apparaîtront en bas de l'écran. Sous la partie éditeur de contenu de l'écran.

Alors que les champs personnalisés WordPress sont incroyablement puissants, ceux par défaut sont limités à une valeur de texte. Il faut du PHP et du développement pour les rendre plus robustes. Heureusement, il existe des plugins qui fonctionnent pour vous, et nous allons vous expliquer comment les faire fonctionner. Si tout ce dont vous avez besoin est un champ de texte sur certains articles et que vous ne voulez pas de plugin, n'hésitez pas à sauter ci-dessous sur l'ajout des champs personnalisés WordPress au front-end de votre thème. Cela s'applique aux champs par défaut ainsi qu'à ceux générés par des plugins comme Advanced Custom Fields.

Utilisation du plug-in Advanced Custom Fields

Comme pour la plupart des choses dans WordPress, vous avez deux options pour la mise en œuvre. Vous pouvez modifier manuellement les fichiers PHP pour ajouter des fonctionnalités de champ personnalisé, ou vous pouvez utiliser un plugin. Dans ce cas, nous vous recommandons fortement de suivre la route du plugin. Si, toutefois, vous ressentez le besoin de modifier le PHP et d'entrer dans le code, vous pouvez le faire sous Apparence - Éditeur de thème . Voici la page WP Codex sur les champs personnalisés pour vous aider à démarrer. Il renvoie aux différentes balises et crochets de modèle dont vous aurez besoin pour le faire fonctionner.

Mais encore une fois, nous vous suggérons fortement d'utiliser le plugin Advanced Custom Fields plutôt que de peaufiner le code. Le plugin permet tout ce que vous voudriez des champs personnalisés (et puis certains), donc nous ne ressentons pas le besoin de réinventer la roue. Quand ça marche, ça marche. Utilise le.

Une fois ACF installé et activé, vous remarquerez une entrée Champs personnalisés dans la barre latérale gauche du panneau d'administration WordPress. Il est livré avec trois options : Groupes de champs , Ajouter un nouveau et Outils .

Les groupes de champs peuvent être considérés comme des ensembles. Tout ce que vous souhaitez afficher dans la même boîte, vous l'inclurez dans le même groupe. Ajouter nouveau vous permettra d'ajouter à la fois un nouveau groupe et un nouveau champ personnalisé. Alors que Tools est l'endroit où vous allez importer et exporter différents ensembles existants de champs personnalisés à partir d'autres sites WordPress.

Les bases d'ACF

La création des champs eux-mêmes est assez simple. Accédez à la fenêtre Ajouter un nouveau .

Quoi qu'il en soit, les champs personnalisés ACF seront inclus dans un groupe de champs . Cela signifie simplement les champs spécifiques contenus dans la même boîte. Vous pouvez donc le nommer comme vous voulez qu'il apparaisse dans l'éditeur de publication. Chaque fois que vous souhaitez ajouter une entrée individuelle au groupe, vous cliquez sur le bouton Ajouter un champ . Faites-le à chaque fois que vous voulez un champ différent dans la même méta-boîte. Les règles d' emplacement déterminent où et quand la boîte apparaîtra. Dans cet exemple, puisque le type de publication est égal à la publication , cela signifie qu'il n'apparaîtra que sur les publications. Pas des pages ou d'autres types de publication personnalisés.

Ensuite, vous devez réellement choisir les paramètres du champ lui-même. Ce qu'il va faire et la fonction qu'il servira sur le site.

Vous choisissez essentiellement votre emplacement (sous le contenu de la publication dans l'éditeur, la barre latérale, au-dessus du contenu, etc.), ainsi que l'emplacement du texte et des champs eux-mêmes. La zone Masquer à l'écran est la plus intéressante. Selon la façon dont vous devez utiliser vos champs personnalisés, vous pouvez exclure toutes les autres méta-boîtes de vos brouillons. Sélectionnez les conditions d'apparence de ce champ personnalisé, puis déterminez les autres cases qui l'accompagnent, le cas échéant. Plusieurs fois, vous ne vous en soucierez même pas.

Création de champs personnalisés avec ACF

Une fois que vous avez nommé votre groupe de champs, vous pouvez cliquer sur le bouton Ajouter un champ . Vous pouvez avoir n'importe quel nombre de champs dans le même groupe, mais assurez-vous de les garder tous liés les uns aux autres. Vous pouvez créer presque n'importe quel type de champ de saisie que vous pouvez imaginer avec ACF.

Pour cet exemple, supposons que nous gérons un site WordPress de culture pop qui examine les films et souhaite que les champs personnalisés affichent une note, indiquent si le film est en streaming et, si oui, où le trouver.

Ceux-ci seraient tous sous le même groupe de champs, mais des champs différents. Comme vous pouvez le voir ci-dessus, Is It Streaming? Le champ est configuré pour être un bouton radio avec un sélecteur oui/non qui est requis avant la publication. De plus, nous voulons qu'un champ conditionnel s'affiche si le champ est marqué comme Oui. Cela se fait simplement en appuyant à nouveau sur Ajouter un champ .

Avec la bascule Logique conditionnelle activée, il vous suffit de sélectionner le champ auquel il est soumis et quelle doit être la valeur. Dans ce cas, est-ce du streaming ? doit être égal à Oui.

Dans l'éditeur de publication, l'entrée des champs personnalisés ressemblera à ceci :

Et lorsque vous publiez votre article, les métadonnées que vous avez saisies feront partie de l'article. Mais il y a encore un problème. Vous ne pouvez pas le voir, ni vos visiteurs.

Comment afficher des champs personnalisés sur le front-end WordPress

Même si vous avez parfaitement fait tout cela, les données que vous avez saisies n'apparaîtront pas sur le front-end de votre site sans un petit ajustement. Après tout, où cela apparaîtrait-il ? Plusieurs fois, votre thème aura un moyen d'afficher des métadonnées et des champs personnalisés, mais ceux-ci diffèrent thème par thème. Vérifiez vos options de thème pour la documentation.

Les shortcodes ACF intégrés sont une autre façon d'afficher des champs personnalisés sur le front-end. Bien qu'il n'y ait pas de personnalisateur ou de générateur intégré à ACF, vous pouvez utiliser le shortcode suivant pour les champs de texte uniquement .

Mais comme il est limité aux champs de texte, il peut avoir une utilité limitée pour de nombreuses personnes. Vous pouvez également aller dans le PHP et utiliser le code ACF, comme dans leurs exemples de documentation. Vous pouvez également passer à ACF Pro et accéder au bloc Gutenberg intégré qui affiche le champ personnalisé exactement comme vous le stylisez dans le générateur.

Mais comme nous l'avons dit, de nombreux thèmes sont livrés avec une intégration de champs personnalisés de nos jours, et nous vous montrerons comment cela est géré dans Divi.

Comment afficher des champs personnalisés sur le front-end à l'aide de Divi

Tout d'abord, rappelez-vous que de nombreux modules Divi peuvent restituer des shortcodes. Tant de fois, vos champs de texte personnalisés créés dans ACF peuvent simplement être insérés à l'aide de leurs codes courts, comme nous l'avons mentionné ci-dessus.

Pour notre exemple ci-dessus qui utilise une logique conditionnelle et des boutons radio, nous utiliserons la fonctionnalité de contenu dynamique de Divi. C'est aussi super facile à utiliser. Nous vous le montrerons via le générateur de thème Divi, mais vous pouvez l'utiliser dans littéralement n'importe quel module qui le prend en charge dans le générateur Divi standard. Cliquez sur le Black + et sélectionnez le module que vous souhaitez. Pour cela, c'est le Module Texte .

Ensuite, recherchez la partie du module dans laquelle vous souhaitez insérer le champ personnalisé. Recherchez l'icône de contenu dynamique sur le côté droit de n'importe quel endroit qui prend en charge la fonctionnalité.

Cliquez dessus pour sélectionner dans le menu déroulant tous les types de contenu dynamique disponibles, y compris tous les champs personnalisés. Ils peuvent être tout en bas.

Divi vous donne la possibilité d'ajouter essentiellement des étiquettes avant/après au contenu de votre champ. Nous voulons que le nôtre soit lu naturellement dans le cadre de la publication, alors ce film est-il disponible en streaming en ligne ? sera placé avant la valeur lorsque le champ est rendu. De plus, nous avons ajouté un espace de fin à la fin pour séparer notre étiquette de la valeur ACF.

Étant donné que vous ne pouvez avoir qu'un seul élément de contenu dynamique par zone de module, répétez ce processus pour les autres champs. Notez toutefois que même si le champ personnalisé est conditionnel, le module Divi ne l'est pas . Donc, si vous utilisez une étiquette avant/après sur un champ conditionnel, vous verrez toujours cette étiquette. Si vous les laissez vides, aucune valeur ne sera rendue.

De plus, l'option Activer le HTML brut permettra le rendu de tout code que vous placez dans le champ ACF, comme des liens vers les différentes plates-formes, etc.

Emballer

Comme vous pouvez le voir, même si cela semble assez compliqué, les champs personnalisés WordPress sont une fonctionnalité qui ne prend pas un développeur pour bien comprendre. Installez simplement ACF et commencez à personnaliser la façon dont vous et votre équipe saisissez les informations. Qu'il s'agisse d'un site d'avis, d'un marché de commerce électronique ou même d'un simple blog convivial où vous souhaitez partager ce qui se passe dans votre vie, être capable de peaufiner et de perfectionner les métadonnées de vos articles et pages peut élever votre site Web à de nouveaux niveaux.

Pourquoi utilisez-vous les champs personnalisés WordPress ?

Image présentée par SurfsUp / shutterstock.com