Du HTML dans une page Catégorie WordPress

Aujourd’hui une petite astuce WordPress qui vous permettra d’affiche du code HTML dans une page catégorie WordPress (en plus de vos articles).

Je vous avais parlé de cet article dans mon tutorial pour modifier le titre d’une page catégorie, alors le voila !
Il est facile d’afficher du code HTML en modifiant le fichier archive.php de votre thème (le modèle d’une page catégorie) mais l’idée dans cet article est d’afficher une introduction spécifique au début de chaque page catégorie.

Sur Toolsinweb le résultat est le suivant :

Description page catégorie

Pour cela, il faut :
– Installer le plugin CategoryTinymce
– Modifier la description d’une catégorie
– L’afficher sur la page catégorie

Le plugin CategoryTinymce vous permettra de mettre en forme votre description avec un éditeur WYSIWYG (TinyMCE en l’occurrence). L’avantage, comme pour vos articles, est de pouvoir utiliser la mise en forme HTML sans connaitre le moindre code. Plus besoin des balises h1, h2, li, u …

Avant d’installer ce plugin, si vous modifiez vos catégories, vous voyez ceci pour la description :

page catégorie : Avant categorytinymce

Il suffit d’installer l’extension CategoryTinymce et sans aucun réglage, si vous éditez une catégorie, vous disposez maintenant de l’éditeur.

Après installation, le champ description est devenu ceci :

page catégorie : après categorytinymce

Maintenant que vous pouvez faire de jolies descriptions en HTML et que vous avez l’avez complété dans les catégories, il faut afficher cette description sur la page catégorie.
Pour cela, j’ai suivi une astuce trouvée sur Leblogduwebmaster.

Pour résumer, modifiez votre fichier archive.php (ou category.php en fonction de votre thème).
En dessous du titre de la page que nous avions modifié dans un précédent article, vous pouvez coller le code suivant (nous verrons en dessous comment mettre en peu de mise en forme) :

<?php
	if(!(is_paged())){
	echo category_description();
	}
?>

Maintenant que votre description s’affiche, vous pouvez faire un peu de CSS pour obtenir le résultat que je montrais au début de l’article. Modifiez le fichier style.css de votre thème en ajoutant le code ci-dessous :

.category_description_block{
  background:#F1F1F1;
  border:1px solid #eee;
  margin:10px 0;
  width:96%;
}
.category_description_text{
	color: #333;
	font-size: 16px;
	line-height: 20px;
	margin: 5px;
}

Et dans le fichier archive.php, ajoutez les balises html pour obtenir la mise en forme (uniquement si il y a une description) :

<?php
	if(!(is_paged())){
?>
		<div align="center">
			<div class="category_description_block" style="display: block;">
				<div class="category_description_text">
					<?php
						echo category_description();
					?>
				</div>
			</div>
		</div>
<?php
	}
?>

Maintenant, en plus de la description d’une catégorie, vous pouvez envisager de placer des shortcodes pour mettre par exemple des sliders ou autres widgets que vous aimeriez voir uniquement sur certaines pages catégories.

À propos de Mathieu C.

Travaillant dans l'informatique de gestion, je suis passionné par le web depuis des années.
J'ai choisi de partager mes découvertes et expériences à travers ce blog.

Commentaires

  1. Pierre a écrit :

    Salut,

    Je te remercie pour ton article, il est bien utile.

    Par contre, une petite question sur la notion de contenu dupliqué. Lorsque tu fais une description de la catégorie, elle est bien sur dans la page archive.php, mais elle ressort aussi comme title de la catégorie si ces dernières sont affichés dans la sidebar avec le widget catégorie basique. Cela sous entend donc que cette description est présente sur l’ensemble de tes pages, c’est pas terrible…

    Il y a bien la solution qui consiste à se passer du widget catégorie et faire des liens vers la catégorie en mode texte, mais bon cela demande quelques efforts.

    D’autres pistes ?

    • Salut,

      merci de ton commentaire.
      Je suis étonné car chez moi, le widget catégorie n’affiche pas la description !
      Sinon, tu peux créer ton propre bout de code qui récupère uniquement le titre des catégories.

      A bientôt,
      Mathieu.

Exprimez-vous !

*