Pluxopolis

Tout savoir pour devenir un pro de PluXml, mais pas seulement...

Donner du style à la liste des catégories des articles

Rédigé par Stéphane 1 commentaire

Nous allons voir comment changer l'affichage par défaut de la liste des catégories des articles sur la page de lecture du contenu des articles.
L'objectif est d'afficher à partir de la description des catégories un texte et une image d'illustration des catégories afin d'obtenir une présentation semblable à celle-ci:

Actuellement, la liste des catégories d'un article est affichée dans le fichier article.php du thème grâce aux instructions suivantes:

<?php $plxShow->lang('CLASSIFIED_IN') ?> : <?php $plxShow->artCat(); ?>
Le résultat obtenu est:
pour un article classé dans les catégories Rubrique 1, Rubrique 2 et Rubrique 3

Voyons étape par étape pour changer cet affichage et obtenir cette présentation...

Paramétrage des catégories

Avant de nous attaquer à la modification du thème, commençons par renseigner la partie description de nos catégories. L'objectif est d'y ajouter un texte descriptif et une image d'illustration.

À partir de la zone d'administration, aller dans le menu Catégories et cliquez sur le lien Options.

Renseignez la description de la catégorie et ajoutez le code html pour afficher l'image d'illustration de la catégorie.

Exemple:

Ici, l'image correspondant au fichier findingnemo1.png utilisé est stockée dans le dossier data/images/

<img src="http://pluxopolis.net/data/images/findingnemo1.png" alt="" />

Faites de même pour toutes vos autres catégories.

Modification du thème

Nous allons modifier le fichier article.php stocké dans le dossier de notre thème.
Comme toujours, je prends en exemple le thème par défaut livré avec PluXml.

Éditez le fichier article.php de votre thème.

Supprimez la ligne suivante pour ne plus afficher l'ancienne présentation de la liste des catégories de l'article.

<?php $plxShow->lang('CLASSIFIED_IN') ?> : <?php $plxShow->artCat(); ?> -
En dessous des lignes suivantes:

<section>
	<?php $plxShow->artContent(); ?>
</section>
Ajoutez le code suivant:

<section>
<?php
$catIds = $plxShow->artActiveCatIds();
if($catIds) {
	$output = array();
	foreach($catIds as $catId) {
		$desc = isset($plxMotor->aCats[$catId]) ? $plxMotor->aCats[$catId]['description'] : '';
		if($desc!='')
			$output[] = '<li><a title="" href="http://pluxopolis.net/'.$plxShow->catUrl($catId).'"><div>'.$plxMotor->aCats[$catId]['name'].'</div>'.$desc.'</a></li>';
	}
	if($output)
		echo '<ul class="catDesc">'.implode(' ', $output).'</ul>';
	}
?>
</section>
Ce code permet d'afficher la liste des catégories sous forme d'encadré avec:
  • le titre de la catégorie
  • la description de la catégorie contenant un texte descriptif + une image d'illustration

Il ne reste plus qu'à ajouter le code css dans le fichier style.css du thème afin de mettre en forme l'affichage pour avoir l'encradré, le titre de la catégorie en gras et le bon positionnement des blocs avec les images.

Éditez le fichier style.css de votre thème et à la fin du fichier ajoutez les lignes suivantes:


ul.catDesc {
	text-align: center;
}

ul.catDesc li div { 
	font-weight: bold;
	width: 100%;
}

ul.catDesc li {
	list-style-type: none;
	border: 1px solid #dedede;
    width: 200px;
    display: inline-block;
    vertical-align: top;
    *display: inline;
    *zoom: 1;
	font-size: 0.9em;
	margin: 5px;
}

N'oubliez pas de cocher les catégories lors de la rédaction de votre article afin de le classer dans une ou plusieurs catégories.

Nous sommes à la fin de ce tutoriel. N'hésitez pas à me laisser vos remarques en commentaires ou sur le forum de PluXml.

1 commentaire

#1  - Djb a dit :

Très intéressant, ça me donne des idées.

Merci Stéphane,

Répondre

Fil RSS des commentaires de cet article

Écrire un commentaire

Quelle est la deuxième lettre du mot pdqzh ?
Top