Comment ajouter des méta-boîtes personnalisées dans WordPress

L’utilisation de boîtes méta personnalisées est un excellent moyen d’insérer des métadonnées supplémentaires dans votre contenu. À savoir, en ajoutant différentes méta-boîtes personnalisées à vos pages, publications et/ou types de publication personnalisés WordPress, vous pourrez rendre votre interface d’édition plus organisée et plus conviviale dans son ensemble. En fait, de nombreux développeurs de plugins les utilisent pour créer et ajouter des méta-boîtes de plugins personnalisées.

Nous devons également mentionner tout de suite que chaque type de contenu dans WordPress possède son propre ensemble de métadonnées utilisées pour fournir plus d’informations sur le contenu en question (comme la date, le titre, etc.). Et bien que WordPress soit livré avec la zone de champ personnalisé par défaut que vous pouvez utiliser pour ajouter vos propres méta-boîtes et métadonnées personnalisées, cette méta-boîte n’offre pas autant d’options en général.

Ainsi, nous avons décidé de vous montrer comment ajouter des méta-boîtes personnalisées dans les publications et les types de publication WordPress à l’aide de l’un des plugins les plus populaires de cette catégorie – le plugin Advanced Custom Fields. Restez avec nous pendant que nous vous expliquons comment créer et ajouter des boîtes méta personnalisées à votre contenu WordPress, aussi bien que comment afficher les métadonnées de vos champs personnalisés sur votre site.

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

Le plugin que nous recommandons pour cette tâche s’appelle Champs personnalisés avancés. Il s’agit d’une option de plugin assez populaire et complète pour générer des champs personnalisés sur votre site, et pour une bonne raison. Si vous utilisez ce plugin, vous pourrez ajouter vos champs personnalisés pratiquement n’importe où sur votre site (y compris les pages, les articles, les taxonomies, les utilisateurs, etc.), et vous pourrez le faire rapidement et facilement.

Une fois le plugin installé et activé, vous pourrez voir un nouvel élément de menu appelé Les champs personnalisés dans votre barre d’administration. Aller à Champs personnalisés >> Ajouter un nouveau pour créer votre champ personnalisé. Ce faisant, vous serez redirigé vers la page appelée Ajouter un nouveau groupe de champs.

Ajoutez un titre à votre groupe de champs (ce sera le titre de votre boîte méta). Puis, appuyez sur le bouton « + Ajouter un champ » pour créer un nouveau champ. Cela ouvrira une toute nouvelle ligne de paramètres.

le Étiquette de champ L’option vous permet de définir un nom pour votre boîte méta. Ce sera le nom de la section entière qui apparaîtra dans le backend de la page lui-même.

le Nom de domaine L’option vous permet de saisir un nom supplémentaire pour votre champ. Il doit s’agir d’un seul mot sans espace (bien que vous puissiez utiliser des traits de soulignement et des tirets). Vous copierez ce nom pour afficher les métadonnées de votre champ personnalisé sur votre site, mais vous en reparlerez plus tard.

Ensuite, vous pourrez sélectionner le Type de champ. Vous aurez de nombreuses options à votre disposition – du texte, des boutons radio, des cases à cocher et des nombres aux images, fichiers, utilisateurs, taxonomies et bien plus encore.

Vous pourrez également insérer un champ Instructions cela peut être particulièrement utile car ils indiquent à l’utilisateur ce qu’il doit insérer dans le champ donné.

Ensuite, vous pourrez définir tout un tas d’autres options telles que la valeur par défaut, le texte d’espace réservé, la limite de caractères, etc.

Frappez le Fermer le champ bouton pour le masquer une fois que vous avez terminé de définir vos options.

Si vous avez besoin de plus de champs dans votre boîte méta, appuyez simplement à nouveau sur le bouton « + Ajouter un champ » et ajustez ses options en fonction de vos préférences.

Ensuite, le Emplacement vous permettra de définir les règles qui détermineront les types d’écrans d’édition sur lesquels votre boîte méta personnalisée sera affichée. Vous pourrez sélectionner différents types de publications, catégories de publications, taxonomies, etc.

Maintenant, dans le Réglages champ, vous pourrez choisir la boîte méta Style (standard ou sans couture). Nous vous recommandons de le régler sur Standard.

Vous pourrez également sélectionner la position de la boîte méta dans le backend de la page (après le contenu, avant ou dans la colonne de droite).

De plus, vous pourrez définir la position de votre placement d’étiquette et d’instruction et choisir le numéro de commande (le numéro qui définira l’ordre de votre champ). Ce dernier est utile si vous avez plusieurs groupes de champs définis sur un emplacement (sinon, vous pouvez définir cette option sur 0).

Finalement, le Masquer à l’écran L’option vous permettra de cocher ou de décocher certains champs de la boîte méta pour les afficher ou les masquer sur votre écran d’édition de publication ou de page.

Frappez le Publier (situé dans le coin supérieur droit de votre écran) une fois que vous avez terminé.

N’hésitez pas à aller de l’avant et à visiter le backend de l’une de vos pages/articles pour voir à quoi ressemble votre boîte méta personnalisée en direct. Une fois là-bas, vous pourrez également utiliser vos nouvelles boîtes méta pour ajouter vos métadonnées personnalisées.

Affichage de vos données de méta-boîtes personnalisées sur votre site

Maintenant que vous avez réussi à créer votre boîte méta personnalisée, il est temps d’afficher les données que vous avez saisies dans vos champs sur votre site lui-même (c’est-à-dire votre page, votre article, etc.).

Allez au Groupes de champs page. Une fois là-bas, vous pourrez accéder à vos champs personnalisés. Ce que vous devez faire est de copier le texte affiché sous le champ « Nom » :

Désormais, pour afficher les données saisies dans vos champs personnalisés sur votre site, vous pouvez utiliser deux options différentes. Tu peux soit ajoutez-les via un shortcode ou en utilisant un code PHP.

Pour afficher vos données de champ personnalisé sur une seule page ou publication, ajoutez simplement ce shortcode dans votre contenu :

[acf field="weather"]

Bien sûr, vous devez ajouter le nom de votre propre champ dans les guillemets.

Une autre façon de procéder consiste à insérer une ligne de code dans l’un de vos fichiers de thème. Cette méthode est idéale si vous souhaitez que les métadonnées apparaissent automatiquement sur toutes les pages d’un certain type.

Accédez au fichier de thème que vous souhaitez éditer en allant sur Apparence >> Éditeur de thème. Le fichier que vous modifierez dépend de l’endroit où vous souhaitez afficher vos données. Il peut s’agir de fichiers tels que single.php, blog.php, page.php, etc.

Nous avons utilisé notre propre thème Qi gratuit pour notre exemple, nous avons donc inséré notre code dans le fichier modèle blog.php. Bien sûr, vous devriez vous sentir libre d’ajouter votre propre code où vous le souhaitez.

Saisissez le code suivant :

<h2 class="weather"><?php the_field('weather'); ?></h2>

Cela affichera les métadonnées de notre boîte méta personnalisée « météo » en tant que titre H2 sur notre page. Bien sûr, vous devez remplacer le nom que nous avons ajouté entre guillemets par votre propre nom de champ personnalisé et ajuster le code HTML en fonction de vos besoins.

Le code que vous avez inséré dans votre fichier de thème affichera les données que vous insérez dans votre champ méta personnalisé sur toutes les pages qui utilisent le modèle de page spécifique que vous avez décidé de modifier.

Frappez le Fichier de mise à jour une fois que vous avez terminé et allez-y pour voir à quoi ressemblent vos métadonnées affichées sur votre page/post.

Conclusion

Que vous ayez besoin d’insérer une simple ligne de texte ou d’ajouter des métadonnées plus avancées, les boîtes méta personnalisées sont un excellent moyen de tirer le meilleur parti de votre écran d’édition tout en le rendant aussi intuitif et convivial que possible. Nous vous recommandons d’utiliser le plug-in Advanced Custom Fields pour créer et ajouter des champs méta personnalisés à l’un de vos écrans d’édition. Ce plugin est livré avec un ensemble complet d’options qui vous permettront de personnaliser l’apparence de vos boîtes méta personnalisées de toutes sortes de manières. Assurez-vous de suivre attentivement nos instructions pour apprendre à personnaliser en détail vos méta-boîtes personnalisées et afficher facilement vos métadonnées sur votre site WordPress.