WordPress Gutenberg Custom Fields Tutorial : Plugin et méthodes manuelles entièrement expliqués

Champs personnalisésest une fonctionnalité puissante qui permet d'ajouter des métadonnées supplémentaires aux articles et aux pages de WordPress. Cette approche vous permet deDévelopper la structure du contenu du site web(math.) genreFournir plus d'informationsLe contenu de votre site web peut être de plusieurs types, comme des profils d'auteurs, des évaluations de produits, des critiques ou d'autres contenus spécifiques à un domaine. Dans cet article, nous allons vous expliquer en détail comment créer un site WordPress Gutenberg Ajouter et afficher des champs personnalisés dans votre site web, couvrant à la fois les méthodes du plugin et les méthodes manuelles avec des étapes et des conseils détaillés.

Que sont les champs personnalisés dans WordPress ?

Les champs personnalisés, également connus sous le nom de métadonnées, permettent d'ajouter des informations supplémentaires spécifiques à chaque article ou page de WordPress. Ces champs ne se contentent pas de stocker des données supplémentaires dans l'administration en arrière-plan, mais peuvent également être affichés aux visiteurs via les pages d'accueil.

L'avantage des champs personnalisés est que des informations uniques peuvent être ajoutées au contenu pour différents besoins sans modifier le modèle ou la structure de la page. Ceci est très utile pour des industries et des utilisations spécifiques telles que le commerce électronique, l'immobilier, les blogs, etc.

Créer des champs personnalisés avec des plugins

Pour la plupart des utilisateurs de WordPress, l'utilisation d'un plugin est le moyen le plus simple de mettre en place des fonctionnalités de champs personnalisés. Prenez Champs personnalisés avancés (ACF) à titre d'exemple, il s'agit de l'un des plugins de champs personnalisés les plus populaires.

Étape 1 : Installer et activer le plug-in ACF

1. Connectez-vous au tableau de bord de WordPress.
2. commutateur à Plugins > Ajouter un nouveau plugin.
3. Tapez dans le champ de recherche Champs personnalisés avancésLorsque vous trouvez le plug-in, cliquez sur le bouton montage en outre activer.

Étape 2 : Créer un groupe de champs personnalisés

1. Après avoir activé le plugin, dans le menu du tableau de bord de WordPress, voyez Champs personnalisés Options. Cliquez dessus pour entrer dans les paramètres du plugin ACF.

2. Dans l'écran ACF, cliquez sur Ajouter un nouveau pour créer un nouveau groupe de champs.

3. Dans l'écran Groupes de champs, saisissez un nom et une description pour le groupe. Créez autant de champs que nécessaire. Les types de champs les plus courants sontcopiesetnumériqueetdatesetcase à cocheretc., le type de champ approprié peut être sélectionné dans le menu déroulant.

4. Spécifiez les étiquettes, les noms et les valeurs par défaut pour chaque champ. L'étiquette est le nom que le front-end affiche à l'utilisateur, et le nom est l'identifiant interne du champ.

5. Pour ajouter plusieurs champs : cliquez sur + Ajouter un champ pour ajouter d'autres champs personnalisés au groupe de champs.

Étape 3 : Définition des règles de positionnement des groupes de champs

existent Règles de positionnement vous pouvez définir des règles pour l'affichage des groupes de champs. Vous pouvez contrôler l'affichage des groupes de champs personnalisés uniquement sur des pages ou des articles spécifiques.

Par exemple, définissez la règle Pages - Equals - Panier d'achatpour s'assurer que les champs ne sont utilisés que dans lechariotLe modèle apparaît dans la page du modèle. D'autres conditions peuvent également être sélectionnées, comme l'affichage de groupes de champs basés sur des catégories, des types de pages ou des modèles personnalisés.

Étape 4 : Sauvegarder le groupe de champs

Une fois les réglages terminés, cliquez sur Enregistrer les modifications le groupe de champs personnalisés sera sauvegardé et activé.

Maintenant qu'un groupe de champs personnalisés a été créé avec succès, ces champs peuvent être ensuiteAppliquer à votre page ou à votre message.

Comment utiliser les champs personnalisés dans un site web Gutenberg

Les champs personnalisés étant créés, la tâche suivante consiste à les ajouter au contenu dans l'éditeur Gutenberg. Dans Gutenberg, la valeur d'un champ personnalisé peut être affichée sur une page grâce à la fonctionnalité Contenu dynamique.

Installez et activez le plugin GutenKit

1. Le plugin GutenKit est une extension pour l'éditeur Gutenberg qui offre des fonctionnalités supplémentaires, notamment l'intégration de champs personnalisés.
2. Installez et activez le plugin GutenKit (Pro) pour utiliser davantage de fonctionnalités de contenu dynamique dans l'éditeur Gutenberg.

Ajouter des champs personnalisés avec GutenKit

1. Créez ou modifiez unPage ou messageDans l'éditeur Gutenberg, ajoutez un GutenKit Bloc-titre.

2. Dans le panneau des paramètres du bloc, cliquez sur contenu dynamique (généralement située dans la barre d'outils).

3. option Champs personnalisés avancés (ACF) le système affiche tous les groupes de champs et tous les champs disponibles.

4. Sélectionnez le champ que vous souhaitez afficher dans la liste déroulante en cliquant sur le bouton format de candidature.

L'ajout de champs personnalisés à une page Gutenberg a été effectué avec succès. De cette manière, il est possible de créer des champs personnalisés qui sont associés dynamiquement au contenu de la page, en affichant des métadonnées spécifiques.

Voir les résultats

Après avoir enregistré votre page, vous pouvez la prévisualiser pour vérifier si les champs personnalisés s'affichent correctement.

Configurer manuellement les champs personnalisés (sans plugin)

Si vous souhaitez ajouter manuellement des champs personnalisés à une page Gutenberg sans utiliser le plugin, vous devez modifier les fichiers du thème. Cette méthode convient aux développeurs, mais n'est pas recommandée aux débutants, car une mauvaise manipulation peut entraîner des erreurs sur le site.

Activation des champs personnalisés par défaut de WordPress

1. Lors de la modification d'une page ou d'un message, cliquez sur le coin supérieur droit de l'icône menu en trois points(plus d'options).

2. option préférenceset activez-la dans la fenêtre pop-up Champs personnalisés Options.

3. Après avoir enregistré les paramètres, le panneau Champs personnalisés s'affiche au bas de la page d'édition.

Ajout de champs personnalisés

1. Dans le panneau Champs personnalisés, cliquez sur Ajout de champs personnalisésSaisissez le nom et la valeur du champ.
2. Si plusieurs champs sont requis, vous pouvez continuer à cliquer sur Ajout de champs personnalisés pour ajouter d'autres champs.

Afficher les champs personnalisés (manuel)

1. Ouvrez le dossier de votre thème, trouvez et modifiez functions.php Documentation.
2. utiliser get_post_meta() récupère la valeur du champ personnalisé dans la base de données.
3. Dans le fichier modèle, utilisez l'option écho Affiche la valeur d'un champ personnalisé.

Exemple :

<?php 
$value = get_post_meta(get_the_ID(), 'your_custom_field', true) ;
echo $value.
?>

Ce code permet d'obtenir et d'afficher le contenu de l'article ou de la page en cours. votre_champ_personnalisé La valeur du champ.

Questions fréquemment posées

Comment ajouter des champs méta personnalisés dans WordPress sans utiliser de plugin ?

Vous pouvez utiliser le add_meta_box() répondre en chantant update_post_meta() dans la fonction functions.php Les champs personnalisés sont ajoutés manuellement dans le fichier. La méthode manuelle convient aux développeurs ayant de l'expérience en matière de codage, mais pour la plupart des utilisateurs, l'optionL'approche "plug-in" est plus simple.

Comment ajouter des champs méta personnalisés dans WordPress ?

Tout comme les champs de page ou de message, les champs d'utilisateur personnalisés peuvent être créés via un plugin (tel que ACF) à l'aide de l'optionRègles de positionnementAttribuez-les à des rôles d'utilisateurs spécifiques.

Comment ajouter plusieurs valeurs à un champ personnalisé ?

Lorsque vous utilisez le plugin ACF, vous pouvez ajouter plusieurs valeurs à un groupe de champs en utilisant la condition "and" et les afficher sur le front-end.

Comment afficher une barre latérale à l'aide d'un champ personnalisé ?

Vous pouvez choisir d'afficher les champs dans la barre latérale dans le groupe de champs du plugin ACF, etRéglage de la position de l'affichage par des règles de position(ACF Pro).