PluxThèmes

Le fil de fer

Dans le précédent article, nous avons vu qu'il semblais relativement facile de mettre un vieux thème à jour. En fait ce n'est qu'une première étape, celle ci vous permet de le tester et de visualiser la page d’accueil, les catégories et les articles. Si à ce stade cela vous convient,néanmoins il est temps d'entrer dans le code et les fonctions d'affichage de PluXml. Vous avez peut-être manqué quelque chose :)

Aller plus loin

Miettes de pain.

Ce thème que l'on vient de ranimé est incomplet pour les versions actuelles de PluXml et n'utilise pas toutes les fonctions d'affichages utiles, même si en l'état ils vous convient, il y a au moins une chose à insérer au thème , c'est ce que l'on appelle : le fil d'Ariane (ou chemin de fer ou breadcrumbs).

Ce fil d'Ariane s'affiche en principe dans les pages catégories, tags (mots clés) et archives. Les pages articles, dites statiques et la page d’accueil en sont dépourvues.

Ajout du fil d'Ariane

Pour voir comment faire, commençons avec la page 'categorie'.

Pour l'instant, le thème a ce fichier( template) : categorie.php, C'est ce fichier qui est chargée par PluXml lorsque vous affichez les articles d'une catégorie. C'est dans ce fichier qu'il faut ajouter la fonction pour afficher le fil d'Ariane.

Il s'agit d'une liste .voici le code par défaut de cette fonction:

<ul class="repertory menu breadcrumb">
	<li><a href="<?php $plxShow->racine() ?>"><?php $plxShow->lang('HOME'); ?></a></li>
	<li><?php $plxShow->catName(); ?></li>
</ul>

À quoi ressemble le code de la page categorie.php ?

Note: les fichiers home.php, categorie.php, archives.php et tags.php sont très similaire dans leur code et leur fonctionnement.

<?php include(dirname(__FILE__).'/header.php'); # On insère le header ?>
	<div id="page">
	<div id="content">
	<?php while($plxShow->plxMotor->plxRecord_arts->loop()): # On boucle sur les articles ?>
	<div class="post">
	<h2 class="title"><?php $plxShow->artTitle('link'); ?></h2>
	<p class="post-info">Catégorie : <?php $plxShow->artCat(); ?> | le <?php $plxShow->artDate('#day #num_day #month #num_year(4)'); ?></p>
	<?php $plxShow->artChapo(); ?>
	<p class="comment_nb"><?php $plxShow->artNbCom(); ?></p>
	</div>
	<?php endwhile; # Fin de la boucle sur les articles ?>
	<?php # On affiche le fil Atom de cet article ?>
	<div class="feed_categorie"><?php $plxShow->artFeed('atom',$plxShow->catId()); ?></div>
	<?php # On affiche la pagination ?>
	<p id="pagination"><?php $plxShow->pagination(); ?></p>
	</div>
	<?php include(dirname(__FILE__).'/sidebar.php'); # On insere la sidebar ?>
	</div>
<?php include(dirname(__FILE__).'/footer.php'); # On insere le footer ?>

Ce code date de 2009 et est toujours fonctionnel.

Le fichier inclus d'autre fichiers du thème, ce sont les fichiers, parties de page communes à toutes les pages du site.

Que se passe t-il dans ce fichier?

Ce fichier filtre les articles d'une catégorie. en effectuant une boucle sur chacun d'eux, il affiche le titre et les premiers textes de chaque articles ainsi que d'autres informations: catégorie(s) de l'article, date de publication, etc ... Cette boucle se retrouve dans d'autre pages: accueil, catégories, tags et archives. Ne pas y toucher ! Elle commence à :

<?php while($plxShow->plxMotor->plxRecord_arts->loop()): # On boucle sur les articles ?>

et se termine à :

<?php endwhile; # Fin de la boucle sur les articles ?>

Le code est affublé de commentaires, les noms d'ID et de CLASS sont aussi assez explicites, ce n'est pas toujours le cas et il peut-être plus difficile de s'y retrouvé. familiarisez vous avec les noms des fonctions autant que vous pouvez.

Retrouvez les fonctions que vos thèmes peuvent utiliser sur la doc officiel: Fonctions plxShow.

En regardant le code, on voit rapidement qu'il n'y a que deux options où insérer le fil d'Ariane:

<div id="page"><-- ici -->
<div id="content"><-- ou là -->

Qu'elle différence entre ses deux endroits ?

1. juste après <div id="page"> le fil d’Ariane s'affichera au dessus de la boucle des articles et de la sidebar.
2. juste aprés <div id="content"> le fil d’Ariane s'affichera au début de la boucle des articles , au coté de la sidebar.

Ce choix vous appartient, j'opte ici pour <div id="content">.

<div id="page">
	<div id="content">
	<ul class="repertory menu breadcrumb">
	<li><a href="<?php $plxShow->racine() ?>"><?php $plxShow->lang('HOME'); ?></a></li>
	<li><?php $plxShow->catName(); ?></li>
</ul>

Testons le rendu visuel:

Une liste s'affiche bien, mais ne s’intègre pas au mieux dans le thème.

Le code par défaut insérer comporte des class que nous pouvons utiliser pour appliquer des styles.

nos sélecteurs CSS pour cibler cette liste et ses éléments peuvent être:

	ul.repertory.breadcrumb{
	/* styles de la liste ici */
	}
	ul.repertory.breadcrumb li{
	/* styles des items de liste ici */
	}
	ul.repertory.breadcrumb li a{
	/* styles di lien de la liste ici */
}

Pour faire simple et concis, enlevons la puce, passons la liste en une ligne et ajoutons une barre oblique entre les deux items, ce qui donnerait

	ul.repertory.breadcrumb{
	list-style:none;/* retire les puces */
	}
	ul.repertory.breadcrumb li{
	display:inline-block; /* affiche en ligne */
	}
	ul.repertory.breadcrumb li + li:before{ /* exclu le premier item */
	content:'/ ';/* insere une barre oblique*/
}

Mettre à jour le fichier des styles

Pour appliquer ces styles, il faut modifier le fichier style.css du thème.

Ouvrez le fichier dans votre editeur et rechercher

/* --------------------- 
	Zone de contenu (#content)  
--------------------- */

et insérer juste dessous les nouveaux sélecteurs, enregistrer.
Rafraichissez la page , si les styles ne s'appliquent pas, il faudra vider le cache de votre navigateur.

Résultat :

Note chaque feuille de styles sera organisé de façon différentes et selon les habitudes ou convention qu'aura utilisé l'auteur. Il est généralement aisé de s'y retrouvé, même si les commentaires sont succincts ou manquants, les class et id serviront de repères.

Cette seconde étape passée, il est temps de passé à l'étape suivante, celle des fichier de template manquants.
C'est dans le prochain article.

Lire l'article suivant de la série.

"Si vous trouvez dans ce texte des fautes ou des erreurs, merci de me le signaler."GC-nomade