Comment utiliser les champs personnalisés dans WordPress

Pendant que vous écriviez votre article précédent, vous avez peut-être fait défiler la zone Champs personnalisés dans l'éditeur de publication.

Cette fonctionnalité WordPress simple, mais si puissante, peut passer inaperçue pour les débutants, mais c'est en fait une fonctionnalité qui peut sans aucun doute transformer votre site Web simple et clair en un portail dynamique qui attirera de nouveaux visiteurs.

Laissez-nous vous montrer plus sur les champs personnalisés et comment les utiliser sur votre site.

Que sont les champs personnalisés et comment fonctionnent-ils

Que sont exactement les champs personnalisés ? Ces petits champs permettent à n'importe quel utilisateur de saisir des informations supplémentaires sur la publication . C'est ce qu'on appelle les métadonnées, c'est-à-dire les « données sur les données » et vous permet de joindre des informations supplémentaires à vos messages. Les valeurs que vous pouvez saisir dans les champs personnalisés peuvent aller de quelque chose de simple comme ajouter un texte ou un numéro à votre message, ajouter des images, modifier les styles dans le champ ou faire tout ce qui vous passe par la tête.

Peut-être que tout sera plus clair avec un exemple.

Imaginez que vous exploitez un site Web dédié aux jeux vidéo . Vous écrivez des nouvelles et publiez des bandes-annonces, jouez avec du matériel de jeu pour pouvoir en parler et, bien sûr, vous écrivez des critiques après l'arrivée de nouveaux jeux. Après avoir rédigé une critique et placé des captures d'écran et des vidéos de gameplay dans l'article, vous souhaiterez probablement afficher des informations importantes sur le jeu.

Au lieu de cacher les informations les plus importantes sur un jeu dans le long texte, vous souhaiterez peut-être afficher le score d'un jeu, les noms des développeurs et des éditeurs liés à leur site Web, la date de sortie, etc. Oui, les champs personnalisés peuvent vous aider à faire le la magie.

Si vous laissez vos auteurs saisir ces informations dans un champ personnalisé, vous pouvez facilement extraire les informations et les afficher en plus de la critique . Vous avez vu des infobox sur des sites d'avis. Si vous le faites, tous les avis peuvent avoir un modèle standardisé, ce qui peut améliorer l'expérience utilisateur, à la fois au recto et au verso.

En suivant l'exemple du site Web de jeux, vous finirez par avoir plusieurs champs personnalisés que vos auteurs peuvent saisir et que vous montrez à vos lecteurs :

Ce sont les informations que vos auteurs entreraient dans des champs personnalisés, et vous pouvez afficher les mêmes dans un article. Mais comment?

Afficher tous les champs personnalisés :

Si vous n'avez qu'un seul champ ou si vous souhaitez afficher tous vos champs au même endroit, vous pouvez accrocher toutes vos métadonnées à la fois avec une fonction simple :

1. Ouvrez single.php
2. Recherchez la fonction the_content() et collez ce code avant ou après (selon l'endroit où vous souhaitez afficher les champs personnalisés) :

 <?php the_meta(); ?>

3. Sauvegarder les modifications

Afficher un champ personnalisé spécifique :

C'est ça. Cette fonction simple restera désormais accrochée et affichera tous les champs personnalisés d'une publication. Mais que se passe-t-il si vous souhaitez afficher un champ différent dans une position différente ou si vous ne souhaitez afficher qu'une clé spécifique ? Ensuite, vous utiliserez une approche légèrement différente et définirez la clé qui sera affichée :

1. Ouvrez le fichier single.php
2. Trouvez le contenu et c/p ce qui suit :

 <?php echo get_post_meta($post->ID, 'clé', true); ?>

3. Remplacez « clé » par le champ personnalisé que vous utilisez dans une publication. Par exemple : "Éditeur"
4. Sauvegarder les modifications

Cette fonction vérifiera chaque publication dans la boucle et recherchera un champ personnalisé nommé « Publisher ». Si la clé a été trouvée, sa valeur sera affichée . Vous pouvez personnaliser davantage la façon dont un champ personnalisé est affiché en y ajoutant une classe et en stylisant la classe avec CSS ou vous pouvez entrer directement du HTML dans la valeur du champ.

Champs personnalisés conditionnels :

Si vous le souhaitez, vous pouvez utiliser des champs personnalisés comme conditionnels. Restons sur l'exemple et disons qu'il y a des moments où vous ne pourrez pas connaître la date de sortie du jeu sur lequel vous écrivez. Au lieu de taper un champ personnalisé, vous pouvez automatiser le processus et dire à WordPress d'écrire « TBA » (à annoncer) dans le champ Date de sortie s'il n'y a pas de données ajoutées par l'utilisateur :

 <?php $release_date = get_post_meta($post->ID, 
« Date de sortie », vrai );
si ($release_date) {
?>
<?php echo $release_date; ?>
<?php } else { ?>
<p>À annoncer.</p>
<?php } ?>

OK, nous allons terminer à partir d'ici. C'est la manière la plus basique d'utiliser les champs personnalisés. Mais maintenant que vous avez couvert les bases, vous pouvez en fait faire à peu près n'importe quoi avec eux. Vous pouvez, par exemple, montrer votre humeur ou une chanson que vous écoutez. Ou, vous pouvez afficher une liste de messages qui contiennent une clé et/ou une valeur spécifique. Le ciel est la limite.

Comment répertorier les publications avec un champ personnalisé spécifique

Les champs personnalisés sont un excellent moyen d'étendre les fonctionnalités de vos publications. Au lieu de laisser les utilisateurs gérer le code, vous pouvez les laisser entrer une valeur dans un champ personnalisé et faire quelque chose avec ces informations - les possibilités sont infinies.

Parfois, lorsque vous utilisez déjà des champs personnalisés spécifiques, vous devrez peut-être répertorier les publications avec ces champs.

Par exemple, si vous écrivez des critiques de jeux et ont déjà différents champs personnalisés où vous affichez l' éditeur, genre, partition, etc. dans une boîte d'information distincte dans votre avis, vous pouvez afficher uniquement les jeux de cet éditeur spécifique, des jeux de FPS genre ou seulement les critiques avec un score de 10 .

Ce genre d'information pourrait vraiment être intéressant pour votre visiteur. Vous pouvez leur permettre de parcourir vos critiques de jeux avec beaucoup plus de détails ou leur permettre de voir les 10 jeux les mieux notés sur votre site . Même si vous ne souhaitez pas publier une nouvelle liste, cette méthode peut vous aider dans l'exploration de données. Au lieu de créer un article à partir de celle-ci, vous pouvez répertorier tous les articles avec certaines propriétés à des fins de recherche uniquement.

À notre avis, la meilleure façon de répertorier les publications triées par un champ personnalisé consiste à créer un nouveau modèle de page et à afficher une liste sur une nouvelle page . Cette méthode vous permet d'organiser vos pages et d'utiliser facilement une nouvelle page pour afficher ce dont vous avez besoin. Dans les lignes suivantes, nous allons vous montrer comment trouver toutes les publications avec un champ personnalisé spécifique et/ou sa valeur et l'afficher sur une nouvelle page.

1. Créez un modèle personnalisé :

Restons avec l'exemple de revue de jeu où nous voulons afficher tous les jeux de Bethesda Softworks (quelqu'un a dit Fallout ?). Pour commencer, vous devrez créer et préparer un modèle personnalisé :

1. Créez un modèle de page personnalisé et nommez-le bethesda-games.php
2. Copiez et collez le code suivant dans le fichier :

 <?php
 /*
 Nom du modèle : jeux Bethesda
 */
 ?>
 <?php get_header(); ?>
 <?div class="conteneur">
 <?div class="indent">
 <?php
 query_posts(array(
 'meta_key' => 'éditeur',
 'meta_value' => 'Bethesda'
 ));

 if ( have_posts() ) while ( have_posts() ) : the_post();
 echo '<?li>';
 le titre();
 echo '<?/li>';
 à la fin ;

 wp_reset_query(); ?>
 </div>
 </div>
 <?php get_footer(); ?>

3. Sauvegarder les modifications

Le code est prêt à parcourir tous les champs personnalisés et à ne trouver que les clés « Publisher » avec la valeur « Bethesda ». Vous pouvez changer la clé et la valeur à tout ce que vous voulez. Si vous souhaitez afficher toutes les publications avec un champ personnalisé « Publisher » contenant une valeur, supprimez simplement entièrement la ligne « meta_value ».

N'oubliez pas de changer le titre du modèle en quelque chose que vous reconnaîtrez plus tard.

2. Ajoutez la page :

Maintenant que votre modèle est prêt, vous pouvez continuer à créer la liste :

1. Accédez à Pages-> Ajouter un nouveau
2. Ajouter un titre
3. Sur le côté droit, recherchez « Attributs de page »
4. Sélectionnez votre modèle dans la liste déroulante « Modèle »
5. Publier la page

C'est ça! Maintenant, si vous ouvrez votre nouvelle page, vous pouvez voir la liste de tous vos messages qui contiennent des champs personnalisés avec les valeurs que vous avez choisies.

Vous devez maintenant ajouter du texte à votre nouvelle page, styliser la liste et trouver la meilleure façon de la montrer à vos visiteurs. Nous espérons que cette méthode vous aidera à trier vos publications à un tout autre niveau et que vous l'apprécierez.

Afficher la barre latérale en utilisant des champs personnalisés

Une barre latérale a été introduite dans WordPress version 2.2. Depuis lors, c'est devenu un moyen populaire d'afficher du contenu supplémentaire et le plus souvent, les thèmes WordPress en auront un par défaut où vous pourrez placer tous les widgets de votre choix.

Bien que très utile, vous ne voulez pas que votre barre latérale soit présente partout . Habituellement, ces barres sont affichées n'importe où, sauf sur la page d'accueil. Et il n'y a pas une telle option pour activer et désactiver facilement la barre latérale.

Alors, pourquoi ne pas le faire vous-même. Dans cette partie de l'article, nous allons vous montrer comment mettre votre barre latérale dans un champ personnalisé et l'appeler uniquement pour les publications que vous souhaitez.

1. Préparez le modèle :

1. Ouvrez le fichier page.php ou single.php
2. Trouvez le code suivant : <?php get_sidebar(); ?>
3. Remplacez le code par celui-ci :

 <?php $sidebar = get_post_meta($post->ID, 
"barre latérale", vrai);
get_sidebar($barre latérale);
?>

4. Sauvegarder les modifications
5. Créez un modèle personnalisé où votre barre latérale sera
6. Ouvrez le fichier sidebar.php
7. Copiez tout de sidebar.php et collez-le dans votre fichier de modèle personnalisé
8. Sauvegarder les modifications.

Vous devez maintenant ouvrir un article ou une page où vous pouvez trouver des « champs personnalisés » sous l'éditeur de texte/visuel. Pour ajouter une barre latérale à cette publication/page, procédez comme suit.

2. Utilisation de la barre latérale dans les champs personnalisés :

• Tapez « sidebar » sous le nom de votre champ personnalisé
• Tapez le nom de votre modèle personnalisé comme valeur de champ

C'est ça. Si vous avez laissé vos champs personnalisés vides, votre publication sera sans barre latérale tandis que dans l'autre cas, votre barre latérale devrait se charger si vous avez tout fait correctement.

Modifier l'en-tête, le pied de page ou la barre latérale pour les publications individuelles avec des champs personnalisés

Habituellement, un site Web WordPress n'aura qu'un seul en-tête, pied de page et barre latérale déjà définis par le thème que vous utilisez. Chacun a ses fonctions et son design stockés dans des fichiers séparés qui sont appelés par le thème, puis affichés sur le site si nécessaire. Étant donné que chaque partie du thème est stockée dans un fichier différent, vous pouvez facilement les modifier sans craindre de gâcher l'ensemble du site, et vous pouvez modifier le comportement d'un en-tête, d'un pied de page ou d'une barre latérale sur votre site.

Mais parfois, un élément ne suffira pas et par exemple, vous voudrez changer votre entête. Si vous souhaitez le modifier pour l'ensemble du site, vous êtes déjà prêt à partir - ouvrez header.php et modifiez-le comme vous le souhaitez. Mais que se passe-t-il si vous souhaitez ajouter une annonce dans un en-tête uniquement pour vos publications uniques ? Ou peut-être ne modifiez l'en-tête que d'un seul article de votre collection sans modifier le reste ?

Encore une fois, les champs personnalisés vous aideront.

1. Préparez le fichier :

Avant d'utiliser un champ personnalisé pour modifier les en-têtes, les pieds de page ou les barres latérales, vous devez préparer un fichier. Supposons que vous souhaitiez modifier l'en-tête d'un message ou deux et que vous ayez créé un nouveau fichier appelé header-header2.php dans lequel vous avez modifié le design ou inséré une publicité spécifique dans le message. Avant de pouvoir continuer à créer un champ personnalisé, assurez-vous que le fichier est correctement codé et fonctionne sur votre site. Une fois que le fichier est prêt et prêt, vous pouvez continuer.

2. Remplacez le code :

1. Ouvrez le fichier single.php
2. Recherchez get_header(); partie du code qui se trouve généralement tout en haut de la page single.php
3. Remplacez la fonction par la suivante :

 global $wp_query ;
 $postid = $wp_query->post->ID ;
 $header = get_post_meta($postid, "header", true);
 if (!vide($header)) {
 get_header($header);
 } autre {
 get_header();
 }
 wp_reset_query();

1. Sauvegarder les modifications

Avec ce code, vous avez demandé à WordPress de rechercher un champ personnalisé « en-tête » dans chaque publication. Si un champ personnalisé portant ce nom a été trouvé, WordPress prendra sa valeur et utilisera le nom de fichier comme en-tête pour cette publication uniquement.

3. Modifiez un en-tête via un champ personnalisé :

Si vous avez uploadé header-header2.php dans votre thème, vous pouvez maintenant l'appeler dans un champ personnalisé :

1. Ouvrez un article dont vous souhaitez modifier un en-tête
2. Faites défiler vers le bas et accédez aux champs personnalisés
3. Entrez un nouveau champ et nommez-le « en-tête »
4. Tapez "header2.php" dans la valeur du champ
5. Mettre à jour ou publier la publication

S'il n'y a pas d'erreurs dans votre fichier header-header2.php , le nouvel en-tête devrait apparaître au-dessus de la publication pour laquelle vous avez effectué la modification . Néanmoins, tous les autres articles chargeront votre fichier d'en-tête standard défini par le thème.

Comme vous l'avez peut-être remarqué, il vous suffit de saisir le nom de fichier de votre nouveau fichier d'en-tête après la partie "en-tête-". Pour cette raison, il est important de nommer correctement votre nouveau fichier d'en-tête et d'ajouter la partie "en-tête-" avant le nom réel que vous utilisez dans le champ personnalisé.

Il en va de même pour la barre latérale ou le fichier de pied de page, bien sûr, en modifiant la partie get_sidebar() et get_footer() du code.

Implémentez plus facilement les champs personnalisés avancés avec le code de thème ACF

Les champs personnalisés sont la partie inévitable de pratiquement tous les thèmes WordPress. Ces champs permettent à tout le monde d'inclure des informations supplémentaires sur la publication, mais malheureusement, cette fonctionnalité WP standard est assez brute. Les débutants ont besoin de temps pour s'habituer à l'utilisation des champs personnalisés et les développeurs doivent passer beaucoup de temps supplémentaire à coder autour d'eux.

C'est la raison pour laquelle le plugin Advanced Custom Fields (ACF) est si populaire parmi les utilisateurs de WordPress du monde entier. Ce plugin gratuit compte plus d'un million d'installations actives en ce moment, et nous ne voyons pas pourquoi le nombre commencera à baisser. ACF vous permet de créer des champs personnalisés puissants, professionnels et intuitifs via un éditeur visuel .

Bien que très populaire, ACF nécessite toujours des connaissances en codage et beaucoup de votre temps si vous prévoyez d'implémenter ces champs dans un thème. Oui, créer un groupe de champs est facile, mais afficher ces champs n'est pas si simple. Et c'est là qu'ACF Theme Code intervient pour sauver les développeurs.

Code thématique ACF

PRIX : Gratuit

Ce plugin génial est le produit de deux développeurs qui ont décidé qu'il était temps d'arrêter de perdre du temps à écrire à plusieurs reprises le même code encore et encore. Lors du développement d'un thème ou de la modification d'un thème existant, Advanced Custom Fields nécessite qu'un développeur implémente le bon code au bon endroit dans un thème. Puisqu'il n'y avait pas de moyen plus simple, un développeur devait mémoriser un extrait et toutes les fonctionnalités d'une API afin de faire le travail.

Aaron Rutley, l'un des créateurs, a expliqué sur son blog :

Et c'est là qu'ACF Theme Code peut aider un développeur. Après avoir installé ce plugin gratuit qui est maintenant téléchargé plus de 4 000 fois, vous pouvez gagner du temps lors du traitement du code . Chaque fois que vous publiez, modifiez ou mettez à jour un groupe de champs dans Advanced Custom Fields, cet incroyable plugin générera automatiquement le code nécessaire pour implémenter les champs dans n'importe quel thème.

Vous trouverez ce code rendu en bas de la page. À côté de chaque extrait, vous trouverez une icône de presse-papiers qui facilitera la copie du code. Désormais, vous n'avez plus rien à mémoriser et vous pouvez vous détendre lorsque vous travaillez avec des champs personnalisés.

Bien que le plugin soit déjà un incontournable pour tout développeur, Aaron dit qu'ils prévoient déjà d'étendre ACF Theme Code :

Bien que le plugin soit gratuit lorsqu'il est associé à la version gratuite d'ACF, vous aurez besoin d'une version PRO si vous utilisez une version étendue d'Advanced Custom Fields. ACF Theme Code Pro génère du code pour tous les autres types de champs ACF Pro tels que les champs Clone, Gallery, Repeater et Flexible Content.

Affichez votre humeur ou une chanson avec des champs personnalisés

Bloguer doit être amusant. Même si vous écrivez des articles sur des sujets sérieux, votre blog peut toujours avoir cette ou deux choses qui le rendent un peu plus amusant pour un lecteur moyen. Cela peut être n'importe quoi - une petite note de l'auteur, une image amusante ou vous pouvez peut-être ajouter une humeur dans laquelle vous étiez pendant que vous écriviez l'article. Peut-être voudriez-vous même ajouter un titre de chanson que vous écoutiez.

Dans cette partie, nous allons vous montrer comment implémenter facilement une fonctionnalité pour afficher une humeur/une chanson dans vos publications . Vous n'aurez pas à installer de plugins supplémentaires et la fonctionnalité ne prendra pas beaucoup de place. Il s'agit d'une simple ligne de texte qui peut être ajoutée automatiquement en haut ou en bas de votre message.

1. Ajoutons une « fonction d'humeur » :

1. Ouvrez le fichier single.php
2. Copiez et collez le code suivant à l'endroit où vous souhaitez afficher votre humeur :

 $customField = get_post_custom_values("humeur");
if (isset($customField[0])) {
echo "<span class='my_mood'>" . "Humeur: " 
.$customField[0] . "</span>";
}

3. Sauvegarder les modifications

Maintenant que vous avez préparé WordPress pour vos humeurs, vous êtes prêt à les afficher dans n'importe quel article de votre choix. Par défaut, WordPress n'affichera pas votre humeur et il n'y aura aucune humeur par défaut qu'il chargera jusqu'à ce que vous décidiez d'en afficher une. Si vous souhaitez ajouter une chanson à la place, changez simplement « l'humeur » en « chanson » sur la première ligne de code et vous pouvez également modifier le nom de la classe sur la troisième ligne.

2. Ajoutez votre humeur/chanson à un post :

Pour saisir une ambiance ou une chanson, vous devrez l'écrire dans un champ personnalisé :

1. Ouvrez un article pour lequel vous souhaitez écrire une humeur
2. Faites défiler jusqu'à ce que vous voyiez « Champs personnalisés ».

3. Écrivez « humeur » dans le champ du nom ou « chanson » si vous avez décidé de l'accepter
4. Écrivez tout ce que vous voulez dans le champ "Valeur" - ce sera l'ambiance / la chanson affichée dans votre message
5. Cliquez sur le bouton « Ajouter un champ personnalisé »
6. Publiez votre article

3. Stylisez-le :

Comme vous pouvez déjà le voir à partir de seulement trois lignes du code, il s'agit de la forme la plus simple d'ajout d'un nouveau champ personnalisé. Si vous souhaitez styliser votre humeur avec du CSS, vous pouvez voir que le code a déjà ajouté la classe "my_mood" à votre texte. Pour modifier le style, procédez comme suit :

1. Ouvrir le fichier style.css
2. Copiez et collez le code :

 .mon humeur {
 Couleur bleue;
 }

3. Ajoutez n'importe quel style CSS que vous aimez
4. Sauvegarder les modifications.

Espérons que cela suffira pour vous permettre de commencer à personnaliser « la fonction humeur/chanson » pour votre propre blog et nous espérons que le « bleu » ne sera pas une valeur fréquente avec laquelle vous traiterez. Si vous ne souhaitez pas publier votre humeur, n'écrivez simplement rien dans le champ personnalisé « humeur ».

En résumé

Si quelqu'un d'autre a créé un champ personnalisé pour vous (comme un développeur de thème ou de plugin), il est assez facile de l'utiliser pour améliorer votre blog. Mais nous espérons que cet article vous a aidé à personnaliser les champs par vous-même.

Avec de simples modifications du code, nous vous avons montré que vous pouvez créer et gérer vos propres champs personnalisés qui vous aideront à générer un blog unique. Vous serez en mesure d'extraire les informations dont vous avez besoin et vous simplifierez le processus de rédaction et de génération de contenu. Que pensez-vous des champs personnalisés dans WordPress ?