Ce tutoriel est la suite directe de « Créer un champ personnalisé sur WordPress » . Maintenant que nous avons créé le champ, il va falloir l’afficher, lui dire de s’afficher si et seulement si un contenu est présent et enfin le mettre en forme. Après ce tutoriel, vous saurez parfaitement gérer les champs personnalisés. Prêts ? C’est parti !

Avant Propos

Ces différents codes seront à placer sur les fichiers php qui affichent vos posts et/ou pages là où vous désirez dans la div comportant post-content la plupart du temps.

Afficher un champ personnalisé sur WordPress

Pour cette étape, nous allons reprendre une partie du code qui se trouve dans le fichier function.php de notre thème WP et le transformer afin de pouvoir l’afficher. Ce qui nous donnera le résultat suivant :

Ce code s’explique très simplement. Il dit « Affiche le contenu du champ personnalisé qui porte le nom [xxx] correspondant à l’ID de l’article qui est actuellement en cours de lecture ». Voila, en gros, ce que le code fait.

Maintenant que le champ personnalisé est affiché, nous allons passons à un peu de mise en page.

Allez plus loin !

Afin de faciliter la mise en page du champ personnalisé, nous allons créer une variable pour englober le contenu du get_post_meta();. Mettons ensuite un peu texte et quelques balises pour agrémenter le tout.

Pensez à concaténer le texte avec la variable. Voila à quoi doit ressembler votre code :

Mais un petit problème se pose à nous… En effet, votre champ s’affiche correctement et est mis en page MAIS ! Que faire si aucun contenu ne se trouve dans la champ personnalisé que nous avons créé?

Allez encore plus loin !

Si vous affichez tout le temps vos champs personnalisés, vous allez avoir des problèmes sur certaines pages car vous aurez des blancs juste après les deux points MAIS nous allons remédier à tout cela. Vous allez entourer votre echo avec un if comme ci-dessous :

Ce petit rajout de code nous informe que : « Si la variable du champ personnalisé n’est pas vide, alors on affiche la variable ».

Conclusion

Et voila, la boucle est bouclée si je puis dire, vous savez maintenant comment créer et afficher un champ personnalisé ET le programmer afin qu’il ne s’affiche que si un contenu est présent. J’espère que cela vous sera utile dans un avenir proche. :)

Si vous avez la moindre question ou problème sur ce tutoriel, n’hésitez pas à me le dire à la suite de cet article. ;)