Comment créer et utiliser des champs personnalisés dans WordPress

Les champs personnalisés WordPress sont un excellent moyen de développer le contenu typique des publications ou des pages de votre site. Ce sont des éléments de métadonnées qui sont attachés à une publication ou à une page de votre site WordPress, ce qui signifie qu'en utilisant cette méthode, vous pouvez ajouter des informations supplémentaires de toute nature à votre contenu.

Organisés dans un format clé/valeur, les champs personnalisés sont utilisés pour ajouter des données sur plusieurs publications ou pages. La clé est un nom qui assure la cohérence et identifie le champ spécifique, tel que "Article". C'est toujours la même chose. Une valeur est l'information qui sera affichée dans le champ. La valeur sera différente d'une publication à l'autre, en fonction des informations saisies.

Ajouter des champs personnalisés à la publication

Les étapes suivantes vous montreront comment utiliser des champs personnalisés dans vos publications. Si vous préférez les utiliser sur des pages, les mêmes idées s'appliqueront mais devront être implémentées dans des fichiers modèles qui sont responsables de la création de pages plutôt que de publications.

1. Accédez à l'écran de l'éditeur de publication et cochez "Champs personnalisés".

2. Recherchez la zone Champs personnalisés dans le cadre de votre édition de publication. Lorsque vous êtes sur une page de publication, vous verrez une nouvelle section en bas avec le titre "Champs personnalisés".

Examinons maintenant un exemple très basique de champs personnalisés WordPress en action. Les choses prendront forme avec cet exemple pour un blog de fitness. Nous utiliserons les champs personnalisés pour suivre et répertorier les différents types d'activité physique sur les publications.

3. Ajoutez la clé, qui dans ce cas est "Type d'exercice". Nous utiliserons cette case pour ajouter des détails spécifiques à la publication. Cliquez sur "Entrer nouveau" et tapez la clé dans le champ.

4. Ajoutez la valeur. Allons-y avec Zumba pour celui-ci. Gardez à l'esprit que cela n'apparaîtra que sur ce message spécifique. Sur un autre poste, vous pouvez entrer une valeur différente, quelque chose comme "Elliptique" ou un autre type d'exercice.

5. Enregistrez la publication.

En ce moment, vous ne verrez pas grand-chose. Vous devez encore ajouter une mise en forme pour afficher les informations. Jusqu'à présent, ces informations supplémentaires sont stockées dans la base de données, de sorte qu'elles peuvent être appelées à être affichées. Pour ce didacticiel, j'ai choisi d'afficher ces champs personnalisés sur les publications (au lieu des pages), je vais donc passer par la manière la plus simple de tout formater.

Afficher les champs personnalisés sur la publication

L'utilisation de modifications de modèle pour ajouter les champs personnalisés en tant que données de site récurrentes est un moyen efficace de procéder. Supposons que vous commenciez par afficher les champs personnalisés au début de votre message, mais que vous décidiez plus tard que cela serait mieux en bas. En utilisant des modifications de modèle, ce changement est facile à faire car la modification du modèle mettra à jour l'ensemble du site. Si vous n'utilisiez pas cette méthode et que vous enregistriez à la place les informations individuellement dans chaque message, vous devrez modifier chaque message pour effectuer le changement, ce qui rendra les changements beaucoup plus difficiles.

Pour cet exemple, le champ personnalisé sera affiché avant l'article afin que le lecteur puisse voir le type d'exercice juste avant de lire l'intégralité de l'article. Pour l'afficher ainsi, les données seront appelées avant la boucle WordPress.

Remarque : Ces personnalisations doivent être effectuées dans un thème enfant, bien sûr, et nous utiliserons le fichier single.php . Comme toujours, les personnalisations comme celles-ci sont mieux testées dans un environnement de développement.

1. Ouvrez le fichier single.php et ajoutez ce code en dehors de la boucle WordPress :

 <?php the_meta(); ?>

Il affichera quelque chose comme ceci :

Si vous préférez l'afficher ailleurs sur la page, essayez de placer cet extrait dans la boucle ou après la boucle. Par exemple, en plaçant la fonction dans la balise <main> , les informations du champ personnalisé seront affichées dans le cadre du contenu principal.

 <div class="content-area"> <main class="site-main" role="main">

Cette approche fonctionnera pour afficher également d'autres champs personnalisés que vous avez créés.

Une chose à mentionner à propos de cet exemple : le thème enfant a été créé à partir du thème parent WordPress Twenty Fifteen, qui est très populaire. Si vous expérimentez où afficher les champs personnalisés, il se peut que vous ayez besoin d'autres modèles dans votre thème enfant en plus du fichier single.php . Pour afficher les informations dans le message, un content.php a été ajouté au thème enfant. L'extrait ci-dessus a été placé dans le contenu de la page afin qu'il apparaisse dans le cadre de la publication.

2. Stylisez les champs. Si vous allez dans l'inspecteur, vous verrez de nouvelles classes ajoutées à la page.

Voici à quoi ressemble l'exemple avec les deux champs personnalisés différents :

• Type d'exercice : Zumba
• Moment de la journée : Matin

C'est assez simple de travailler avec une liste. Avec un peu de style, il semblera plus intégré au style du site. Avec seulement quelques modifications CSS simples, nous pouvons ajuster la couleur du texte et le style de la liste.

 ul.post-meta li { color: #898989; list-style-type: none; } ul.post-meta li span.post-meta-key { color: #1fc3d2; font-weight: bold; }

Plus de personnalisations de champs personnalisés

Le style de l'exemple précédent fonctionnera très bien, mais nous en faisons plus. Les exemples suivants vous montreront comment les champs personnalisés peuvent être ajustés avec des options d'affichage supplémentaires pour des cas d'utilisation spécifiques. Faire en sorte que le champ personnalisé soit lu dans le cadre de la publication et définir le contexte avec un titre utile sera un excellent ajout à la publication. Si vous suivez étape par étape, assurez-vous de commenter le <?php the_meta(); ?> <?php the_meta(); ?> que vous avez ajouté dans l'exemple précédent.

Pour cet exemple, les choses ont été légèrement modifiées. La clé a été simplifiée en "exercices" afin qu'elle puisse être ajoutée au modèle plus facilement, et l'extrait de code a été ajouté dans le fichier content.php du thème enfant afin qu'il apparaisse dans le contenu de la publication, au lieu d'être avant ou après. .

 <?php $exercises = get_post_meta($post->ID, 'exercises', false); ?> <h3>Today's exercise:</h3> <ul> <?php foreach($exercises as $exercise) { echo '<li>'.$exercise.'</li>'; } ?> </ul>

Le champ personnalisé s'affiche désormais sous l'en-tête intitulé "Exercice du jour :" sous forme de liste. Cela a été défini comme un <h3> mais peut être facilement ajusté pour être un autre style de titre ou de paragraphe. Si vous ne le souhaitez pas sous forme de liste, cela peut également être structuré comme vous le souhaitez.

Personnalisé conditionnel

Des champs

Il peut arriver que le champ personnalisé ne soit pas inclus. Supposons, par exemple, qu'il y ait un message sans valeur d'exercice. Cela vous permettra d'afficher des informations de secours, afin qu'elles ne soient pas simplement laissées en blanc.

 <?php $exercises = get_post_meta($post->ID, 'exercises', true); ?> <h3>Today's exercise:</h3> <ul> <?php if ($exercises) { ?> <?php echo '<li>' .$exercises. '</li>'; ?> <?php } //if there is nothing for exercises then display else { ?> <li>Today was a rest day.</li>

Le plugin de champs personnalisés avancés

En suivant ce didacticiel, vous pouvez facilement mettre en place des champs personnalisés. Si vous préférez utiliser un plugin pour ajouter des champs personnalisés, des options sont également disponibles pour cela. Les champs personnalisés avancés sont une option très populaire. Cela remplace l'interface des champs personnalisés par défaut dans WordPress. Le produit final créé à partir de ce tutoriel pourrait également être créé avec ce plugin.

Groupes de champs

Le plug-in Advanced Custom Fields autorise les groupes de champs, ce qui mérite d'être mentionné car ils sont étroitement liés au didacticiel ci-dessus. Essentiellement, nous avons créé une version très basique d'un mini groupe de terrain. Les groupes Champs personnalisés avancés contiennent des champs personnalisés, des règles d'emplacement et des options d'affichage. Chaque groupe de champs utilisera ses règles d'emplacement pour afficher les champs en cas de besoin, au bon endroit. Comme la manière manuelle de faire les choses, ces options d'affichage vous permettent de personnaliser la page comme vous le souhaitez. Il existe de nombreux groupes de champs parmi lesquels choisir avec ce plugin.

Cela effleure à peine la surface de ce qui peut être fait avec ce plugin. Pour obtenir une image complète, assurez-vous de visiter le site Web Advanced Custom Fields.

Les champs personnalisés sont une fonctionnalité prête à l'emploi de WordPress. En apportant quelques modifications au modèle, vous pouvez facilement ajouter cette fonctionnalité à votre site Web. Ces étapes couvrent les bases et avec un peu d'expérimentation, vous comprendrez clairement comment implémenter des champs personnalisés. Lors de la planification de votre prochain projet, assurez-vous de tenir compte de la flexibilité offerte par les champs personnalisés. Ils peuvent accueillir différents types de contenu tout en facilitant les modifications à l'échelle du site.