Premiers pas avec les champs personnalisés WordPress

Les champs personnalisés WordPress sont une fonctionnalité vraiment intéressante qui est souvent négligée. Ils vous permettent d'ajouter des « métadonnées » à une zone de votre page ou publication qui se répète sur toutes les pages ou publications. Cela peut vous faire gagner beaucoup de temps si vous avez un site Web sur lequel vous souhaitez publier le même type d'informations sur plusieurs pages.

Par exemple, jetez un œil à un article de blog régulier sur votre site Web WordPress. Les chances sont que, quelque part sur la page, vous verrez un nom d'auteur et une date indiquant quand l'article a été publié. Il s'agit de métadonnées et elles apparaîtront sur chaque article de votre site Web.

Alors, comment pouvez-vous ajouter vos propres métadonnées à vos publications ou pages ? Facile… en utilisant un champ personnalisé WordPress !

Bien sûr, vous pouvez ajouter manuellement ces informations dans chaque article via l'éditeur de page/article, mais cela prend du temps et nécessite généralement un formatage minutieux si vous voulez vous assurer que tous les articles se ressemblent. Si vous publiez beaucoup de contenu, cela peut devenir fastidieux de devoir le faire à chaque fois.

Les éditeurs de pages et de publications WordPress offrent de nombreuses fonctionnalités et flexibilité dès la sortie de la boîte en ce qui concerne le contenu de base qui apparaît sur une page ou une publication. Mais saviez-vous que WordPress offre également aux utilisateurs un moyen d'ajouter du contenu qui se trouve « en dehors » du contenu principal de la publication ou de la page ? Dans cet article, nous allons accélérer l'utilisation des champs personnalisés WordPress qui vous aideront à la fois à mieux organiser vos publications et à ajouter des informations utiles pour vos lecteurs dans un format attrayant.

Commençons!

Que sont les champs personnalisés et les métadonnées ?

Le contenu comme les publications, les pages, les utilisateurs, les commentaires et les types de publication personnalisés incluent des métadonnées qui sont stockées dans votre base de données sous la table postmeta dans une paire clé/valeur.

Les informations que vous voyez habituellement sous un article ou un titre de page, telles que le nom de l'administrateur, la date ou le compteur de commentaires, sont incluses dans les métadonnées de l'article.

Le champ personnalisé est un champ supplémentaire dans lequel vous pouvez ajouter des informations supplémentaires pour votre publication et fait également partie des métadonnées de la publication.

Les champs personnalisés s'appliquent aux pages, aux publications ou aux types de publication personnalisés et se composent également de paires clé/valeur. La clé est le 'nom' de l'élément de métadonnées et la valeur est les données qui s'associent à la clé et peuvent différer pour chaque publication.

Dans WordPress, vous pouvez ajouter des champs personnalisés en utilisant la fonction de champ personnalisé intégrée ou vous pouvez aller plus loin en utilisant un plugin de champ personnalisé qui améliorera encore le contrôle disponible sur un champ personnalisé. Nous examinerons les deux options dans cet article.

Ajouter des champs personnalisés à l'aide des champs personnalisés WordPress

Les paramètres de champs personnalisés WordPress intégrés sont masqués par défaut, ce qui explique pourquoi vous ne saviez peut-être pas que cette fonction existait. Pour l'utiliser, nous devons d'abord l'activer.

Si vous utilisez l'éditeur WordPress classique (c'est-à-dire pas Gutenberg), ouvrez un nouveau message et dirigez-vous vers le haut de ce message. Vous verrez une boîte sur le côté droit indiquant "Options d'écran". Cliquez dessus et un menu déroulant avec des cases à cocher apparaîtra. Dans celui-ci, vous devriez en voir un qui dit "Champs personnalisés". Cochez cette case pour les activer.

Si vous utilisez Gutenberg, cliquez sur l'icône "trois points" qui apparaît en haut à droite d'un message. Un menu apparaîtra et au bas de ce menu, il devrait dire "Options". Cliquez dessus et un nouveau menu contextuel avec des cases à cocher apparaîtra. Dans cette liste, vous devriez en voir un qui dit "Champs personnalisés". Cochez cette case puis fermez le menu contextuel.

Prochaines étapes - Ajouter vos champs personnalisés

L'ajout de vos champs personnalisés est en fait assez facile. Après les avoir activés comme décrit ci-dessus, dirigez-vous vers le bas de votre message et vous devriez voir une nouvelle section appelée (vous l'avez deviné) "Champs personnalisés".

Vous verrez deux cases dans la section Champs personnalisés, "Nom" et "Valeur". Le champ Nom contient des valeurs par défaut pré-remplies qui se rapportent aux champs existants qui ont été ajoutés à votre site Web WordPress. Dans notre cas, nous voulons ajouter notre propre nouveau champ. Pour ce faire, cliquez sur le texte "Entrer nouveau" qui se trouve sous le champ Nom.

Hébergez votre site web avec Pressidium

GARANTIE DE REMBOURSEMENT DE 60 JOURS

VOIR NOS FORFAITS

Dans cet exemple, nous voulons créer un lien vers un site Web externe qui a été utilisé comme source pour un article que nous avons écrit. Nous appellerons ce champ 'Source'. Cliquez sur le texte "Entrez un nouveau", puis tapez "Source" suivi d'une URL vers un site Web de votre choix dans la section Valeur. Cela ressemblera à ceci :

La prochaine fois, vous n'aurez pas besoin de cliquer sur le texte "Entrer un nouveau" et de saisir manuellement "Source". Il apparaîtra maintenant dans la liste déroulante des valeurs.

Si vous avez accès à votre base de données (par exemple : via phpMyAdmin), vous pouvez ouvrir la table postmeta, filtrer la table par l'identifiant de publication que vous avez modifié et vous devriez voir le nouveau champ personnalisé avec sa valeur.

Maintenant que nous avons confirmé que le champ personnalisé est correctement stocké pour la publication, voyons comment nous pouvons l'afficher sur le devant de notre publication où les visiteurs de notre site Web pourront le voir !

Affichage des valeurs des champs personnalisés

Pour afficher notre nouvelle valeur de champ personnalisé sur notre publication, nous devons ajouter du code à notre fichier de modèle de publication unique. Habituellement, cela se trouve dans le fichier singular.php qui se trouve dans le dossier principal du thème. Dans notre cas (thème Twenty Twenty), il se trouve dans le fichier /wp-content/themes/twentytwenty/template-parts/content.php .

Nous utiliserons la fonction principale get_post_meta par WordPress pour récupérer le champ méta d'une publication à partir de la base de données. La structure de la fonction est la suivante :

 get_post_meta( $post_id, $key, $single )

Le seul argument requis est le $post_id . L'argument $key est la clé méta à récupérer et l'argument $single définit si une seule valeur est renvoyée et est inutile si la $key n'est pas définie du tout.

Si seul le $post_id est déclaré, le résultat sera un tableau avec toutes les clés liées à la publication particulière. Donc, si vous insérez simplement get_post_meta( $post_id ) , vous obtiendrez quelque chose comme ceci :

 Array ( [field1_key] => Array ( [0] => value1 ) [field2_key] => Array ( [0] => value2 ) [field3_key] => Array ( [0] => value3 ) )

Si vous utilisez get_post_meta( $post_id, 'filed1_key' ) vous obtiendrez quelque chose comme Array ( [0] => value1 ) et si vous utilisez get_post_meta( $post_id, 'filed1_key', true ) comme nous l'avons fait avant vous obtiendrez juste value1 .

De plus, dans certaines publications, vous ne voudrez peut-être pas définir le champ source, nous devons donc inclure dans le code une vérification pour voir si le champ existe pour la publication.

Donc, avec tout cela à l'esprit, le code que nous devons utiliser serait le suivant :

 $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?>

Nous allons insérer le code juste après le contenu de l'article afin qu'à l'intérieur de la div HTML avec la classe "entry-content", le code ressemble à ceci :

 <div class="entry-content"> <?php if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) { the_excerpt(); } else { the_content( __( 'Continue reading', 'twentytwenty' ) ); } $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?> </div><!-- .entry-content -->

Voyons maintenant ce que nous avons accompli en ouvrant un nouveau message et en examinant comment ce contenu apparaîtrait sur le front-end.

Nous vous rappelons que si vous rencontrez des difficultés pour localiser le fichier template correspondant à votre vue single post, vous pouvez consulter le diagramme de hiérarchie des templates WordPress.

De toute évidence, il y aura du travail à faire pour styliser cette sortie. Cela dépasse le cadre de cet article, mais nous en parlerons dans un prochain article.

Ajouter des champs personnalisés à l'aide d'un plugin

Le plugin Advanced Custom Fields est l'un des meilleurs plugins disponibles qui vous permet d'ajouter rapidement des champs personnalisés à votre site Web WordPress et offre un contrôle supplémentaire de vos données de champs personnalisés. À l'aide de son générateur, vous pouvez facilement créer des champs personnalisés qui peuvent ensuite être ajoutés à vos publications, utilisateurs, taxonomies, médias, commentaires et même pages d'options personnalisées.

Créez vos champs personnalisés à l'aide d'ACF

Après avoir installé et activé le plugin ACF, allez dans 'Champs personnalisés > Groupes de champs' où les champs enregistrés sont affichés.

Appuyez sur le bouton "Ajouter nouveau" pour commencer à créer vos champs. Ceux-ci peuvent ensuite également être ajoutés dans des groupes.

De nombreuses options vous sont proposées pour améliorer le comportement de vos champs personnalisés. Outre la configuration de base qui inclut l'étiquette et le nom du champ, vous pouvez également définir le type du champ, définir si le champ est obligatoire, modifier la valeur par défaut, le texte de l'espace réservé et bien sûr choisir les types de publication où il sera inclus par en utilisant un argument logique.

En outre, il existe d'autres paramètres disponibles qui vous permettent de modifier l'apparence du champ (très utile) et une liste de cases à cocher pour vous permettre de définir ce qui doit être masqué sur les écrans d'édition correspondants.

Génial, non ?

De plus, dans le menu Outils ACF, vous pouvez exporter ou importer des groupes de champs au format JSON pour accélérer les choses si ceux-ci ont déjà été créés ailleurs.

Un exemple concret utilisant des champs personnalisés avancés

Supposons que nous ayons créé un type de publication personnalisé nommé "Livres" et que nous souhaitons ajouter des champs personnalisés à chaque publication de livre, tels que le genre, l'auteur du livre et l'année de publication. La première chose à faire est de créer le groupe de champs et les champs conteneurs comme ceci :

Comme vous pouvez le voir, tous les champs n'utilisent pas le même type.

• Le champ Auteur est un simple champ de texte où nous remplirons le nom complet de l'auteur.
• Le champ Genre est un champ de sélection et doit accepter plusieurs valeurs. Un livre peut être lié à plusieurs genres.
• Les choix prédéfinis pour le genre doivent être insérés dans la case Choix chacun dans sa propre ligne.

Le champ de couverture doit également être un champ de sélection à valeur unique avec les choix prédéfinis.

Maintenant, allons-y et éditons un article de livre. Les champs apparaîtront bien regroupés dans la barre latérale.

Si vous souhaitez modifier la position du groupe de champs, veuillez vous rendre dans les paramètres correspondants :

Remplissez les champs ainsi que du contenu de test pour l'article et mettez à jour le message. À ce stade, si vous visitez la vue de face du Book Post, vous remarquerez que rien ne s'affiche toujours concernant nos champs personnalisés.

Affichez vos champs personnalisés ACF

Vous pouvez facilement afficher les champs personnalisés dans le modèle de votre thème en utilisant les fonctions conviviales fournies par le plugin ACF. Deux d'entre eux sont :

• get_field() – Renvoie la valeur d'un champ spécifique.
• the_field() – Affiche la valeur d'un champ spécifique.

Ce sont les fonctions les plus couramment utilisées avec le plugin ACF. Si vous voulez voir la liste complète des fonctions du plugin, vous pouvez visiter la documentation officielle pour en savoir plus.

Ainsi, pour générer votre champ personnalisé dans le modèle de vue de publication, vous devrez ajouter du code comme nous l'avons fait lors de l'utilisation des champs personnalisés WordPress par défaut. Au lieu de cela, cette fois, nous utiliserons les fonctions du plugin ACF. Puisque nous utilisons le thème Twenty Twenty, nous devons éditer le fichier content.php sous le dossier twentytwenty/template-parts/ . Juste après la fermeture de la section interne, nous avons ajouté les lignes suivantes :

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . get_field( 'genre' ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

Dans la vue de face, nous pouvons maintenant voir les champs personnalisés.

Cependant le champ genre ne s'affiche pas correctement. C'est parce qu'il contient plusieurs valeurs, donc la fonction get_field renvoie un tableau. Pour résoudre ce problème, nous devrons convertir le tableau en une série de ses valeurs. C'est facile en PHP en utilisant la fonction implode() .

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . implode( ", ", get_field( 'genre' ) ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

Si vous souhaitez afficher de manière sélective certains champs mais pas tous dans certains messages, vous pouvez le faire en utilisant certains codes abrégés ACF. Pour ce faire, ouvrez votre message, puis ajoutez un bloc Gutenberg de shortcode pour chaque champ et mettez un shortcode comme celui-ci :

 [acf field="MY_CUSTOM_FIELD"/]

Remplacez MY_CUSTOM_FIELD par le nom du champ et cela devrait fonctionner parfaitement.

Comme nous pouvons le constater, l'utilisation du plug-in Advanced Custom Fields nous offre une flexibilité fantastique pour créer des champs personnalisés et les afficher où nous le souhaitons.

Conclusion

La fonction Champs personnalisés de WordPress est utilisée par les développeurs de l'ensemble du secteur afin d'offrir une meilleure structure et une meilleure lisibilité à leurs sites Web. C'est une autre fonction WordPress remarquable qui aide encore une fois à expliquer pourquoi WordPress est si populaire. J'espère que cet article vous a donné les informations dont vous avez besoin pour ajouter vos propres champs personnalisés à votre site Web. Bon développement !

Voir également

Tableaux de liste d'administration WordPress : ajouter des filtres personnalisés
Ajout de champs personnalisés aux éléments de menu WordPress