Comment ajouter des méta-boîtes personnalisées dans les publications WordPress et les types de publication

Voulez-vous créer des méta-boîtes personnalisées pour vos publications, pages et types de publications WordPress? Les méta-boîtes personnalisées sont couramment utilisées pour fournir une meilleure interface utilisateur pour l'ajout de champs personnalisés (métadonnées) à votre contenu. Dans cet article, nous expliquerons ce qu'est une boîte méta personnalisée et comment vous pouvez facilement ajouter des boîtes méta personnalisées dans les publications WordPress et les types de publication..

Qu'est-ce qu'une méta-boîte personnalisée dans WordPress??

La méta-boîte personnalisée est une interface plus conviviale pour ajouter des champs personnalisés (méta-données) à vos publications, pages et autres types de publication personnalisée..

WordPress est livré avec une interface facile à utiliser qui vous aide à créer du contenu tel que des publications et des pages, ou des types de publication personnalisés..

Normalement, chaque type de contenu est constitué du contenu actuel et de ses métadonnées. Les métadonnées sont des informations liées à ce contenu, telles que la date et l'heure, le nom de l'auteur, le titre, etc. Vous pouvez également ajouter vos propres métadonnées à l'aide de champs personnalisés..

Toutefois, l'ajout de métadonnées à l'aide de la zone Champs personnalisés par défaut n'est pas très intuitif. C'est là qu'interviennent les boîtes à méta personnalisées.

WordPress permet aux développeurs de créer et d'ajouter leurs propres boîtes de méta personnalisées sur des écrans de post-édition. C'est ainsi que les plugins les plus populaires ajoutent différentes options sur vos écrans de post-édition.

Par exemple, la zone de titre et de description de méta-description SEO dans le plug-in Yoast SEO est une boîte à méta personnalisée:

Cela dit, voyons comment ajouter facilement des méta-boîtes personnalisées dans les publications WordPress et les types de publication.

Créer des méta-boîtes personnalisées dans WordPress

Tout d’abord, vous devez installer et activer le plug-in Advanced Custom Fields. Pour plus de détails, consultez notre guide étape par étape pour installer un plugin WordPress..

Lors de l'activation, le plug-in ajoute un nouvel élément de menu intitulé "Champs personnalisés" à votre barre d'administration WordPress. En cliquant dessus, vous accédez à la page des champs personnalisés..

Cette page sera vide puisque vous n'avez pas encore créé de champs personnalisés. Allez-y et cliquez sur le bouton 'Ajouter un nouveau' pour continuer.

Vous serez dirigé vers la page "Ajouter un nouveau groupe de champs"..

Ici, vous devez donner un titre à votre groupe de terrain. Ce titre sera utilisé comme titre de votre meta box.

Après cela, vous pouvez commencer à ajouter vos champs. Cliquez simplement sur le bouton '+ Ajouter un champ' pour ajouter votre premier champ.

Cela fera apparaître le formulaire de paramétrage du champ. Vous devez d’abord fournir une étiquette pour votre champ. Cette étiquette sera affichée dans votre meta-box avant le champ.

Après cela, vous devez sélectionner le type de champ. Le plugin Advanced Custom Fields vous permet de choisir parmi toute une gamme d’options. Cela inclut du texte, des zones de texte, des boutons radio, des cases à cocher, un éditeur WYSIWYG complet, des images, etc..

Ensuite, vous devez fournir des instructions sur le terrain. Ces instructions indiqueront aux utilisateurs quoi ajouter dans le champ..

En dessous, vous trouverez d'autres options pour votre domaine. Vous devez examiner attentivement ces options et les ajuster pour répondre à vos besoins..

Ensuite, cliquez sur le bouton de fermeture du champ pour réduire le champ.

Si vous devez ajouter d'autres champs à votre metabox, cliquez sur le bouton "+ Ajouter un champ" pour ajouter un autre champ..

Une fois que vous avez terminé d'ajouter des champs, vous pouvez faire défiler jusqu'à la section emplacement. C'est ici que vous pouvez définir quand et où vous voulez que votre méta-boîte soit affichée..

Les champs personnalisés avancés sont livrés avec une poignée de règles prédéfinies parmi lesquelles vous pouvez choisir. Par exemple, vous pouvez sélectionner des types de publication, une catégorie de publication, une taxonomie, un parent de page, etc..

Ensuite, vient les paramètres d'options meta box.

Vous devez d’abord choisir le numéro de commande. Si vous avez plusieurs groupes de champs définis pour un seul emplacement, vous pouvez alors sélectionner le numéro de commande à afficher. Si vous n'êtes pas sûr, laissez-le 0.

Ensuite, vous devez choisir la position de la boîte à méta sur la page. Vous pouvez choisir de l'afficher après le contenu, avant le contenu ou dans la colonne de droite..

En dessous, vous devrez choisir un style pour votre méta-boîte. Vous pouvez choisir que ce soit comme toutes les autres boîtes de méta WordPress, ou vous pouvez le choisir pour être transparent (sans aucune boîte de méta).

Si vous n'êtes pas sûr, sélectionnez l'option Standard (boîte WP Meta)..

Enfin, vous verrez une liste de champs normalement affichés sur un écran de post-édition. Si vous souhaitez masquer un champ particulier sur votre écran de modification de publication, vous pouvez le vérifier ici. Si vous n’êtes pas sûr, il est préférable de les laisser décochés..

Une fois que vous avez terminé, cliquez sur le bouton Publier pour faire vivre votre groupe de champs..

Félicitations, vous avez créé avec succès votre méta-boîte personnalisée pour votre message ou type de message WordPress..

En fonction de vos paramètres, vous pouvez maintenant visiter votre publication ou type de publication pour voir votre méta-boîte personnalisée en action..

Vous pouvez utiliser cette méta-boîte personnalisée pour ajouter des méta-données à vos publications ou types de publications. Ces données seront stockées dans votre base de données WordPress lorsque vous enregistrez ou publiez le message..

Affichage de vos données de boîte méta personnalisées dans le thème WordPress

Jusqu'à présent, nous avons réussi à créer une méta-boîte personnalisée et à l'afficher sur notre écran d'édition. L'étape suivante consiste à afficher les données stockées dans ces champs sur votre thème WordPress..

Tout d'abord, vous devez modifier le groupe de champs personnalisé que vous avez créé précédemment. Sur la page "Modifier le groupe de champs", vous verrez vos champs personnalisés et leurs noms..

Vous aurez besoin de ces noms de champs pour les afficher sur votre site web.

Les champs personnalisés avancés vous permettent de le faire de deux manières différentes..

Tout d'abord, vous pouvez utiliser un shortcode pour afficher un champ personnalisé dans votre message..

[acf field = "article_byline"]

Vous pouvez également les afficher en ajoutant du code dans vos fichiers de thème WordPress. Si vous ne l'avez pas déjà fait, consultez notre guide du débutant pour savoir comment copier et coller du code dans WordPress..

Vous devrez éditer le fichier de thème dans lequel vous souhaitez afficher les données de ces champs. Par exemple, single.php, content.php, page.php, etc..

Vous devrez vous assurer que vous ajoutez le code dans la boucle WordPress. Le moyen le plus simple de vous assurer que vous entrez le code dans la boucle est de rechercher une ligne dans votre code qui ressemble à ceci:

Vous pouvez coller votre code après cette ligne et avant la ligne qui termine la boucle:

Votre code de champ personnalisé ressemblerait à ceci:

Ce code affichera les données saisies dans le champ article byline de notre boîte méta personnalisée..

Remarquez comment nous avons encapsulé le code dans un en-tête h2 avec une classe CSS. Cela nous aidera à formater et à styler ultérieurement le champ personnalisé en ajoutant du CSS personnalisé à notre thème..

Voici un autre exemple:

N'oubliez pas de remplacer les noms de champs par vos propres noms de champs.

Vous pouvez maintenant visiter le poste où vous avez déjà saisi les données dans vos champs personnalisés. Vous pourrez voir vos métadonnées personnalisées affichées.

Advanced Custom Fields est un plugin très puissant avec de nombreuses options. Ce tutoriel ne fait qu'effleurer la surface. Si vous avez besoin d’aide supplémentaire, n’oubliez pas de consulter la documentation du plug-in pour savoir comment l’étendre davantage..

Nous espérons que cet article vous a aidé à apprendre comment ajouter des boîtes de méta personnalisées dans les publications WordPress et les types de publication. Vous voudrez peut-être aussi consulter notre guide étape par étape sur la manière d'améliorer la vitesse et les performances de WordPress pour les débutants..

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.