Pluxopolis

Afficher la liste des pages statiques dans la sidebar

---

Rédigé par jack le 19 mars 2014 1 commentairee

Dans la plupart des thèmes disponibles pour PluXml, la liste des pages statiques est affichée horizontalement dans la partie header du site. C'est le cas pour le thème par défaut de PluXml.

Il est tout a fait possible d'afficher cette liste dans la sibebar de façon verticale, en donnant une hiérarchie à deux niveaux si l'on utilise les groupes de pages statiques.
Nous allons donc voir comment obtenir la même présentation que ci-dessous.

Le thème utilisé est celui de PluXml 5.3.1
Les fichiers à modifier sont stockés dans le dossier themes/defaut/ de votre PluXml.

Création des pages statiques

Je vais reprendre la même liste de pages statiques, comme expliqué dans mon article Réaliser des menus déroulants à partir des menus des pages statiques

Nous allons donc réutilisé la liste de pages suivantes:

Menu Animaux:

• Lion
• Tigre
• Léopard

Menu Planètes:

• Mercure
• Vénus
• Terre
• Mars

Modification du thème

La première chose à faire et d'éditer le fichier sidebar.php dans le dossier de son thème et en dessous de la ligne:

<aside role="complementary">

ajoutez le code suivant:

<nav role="navigation">
<h3>Menus</h3>
<ul id="static-nav">
	<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li id="#static_id"><a href="#static_url" class="#static_status" title="#static_name">#static_name</a></li>'); ?>
	<?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>
</ul>
</nav>

Au passage vous pouvez supprimer ce même code du fichier header.php. Nous n'en avons plus besoin à cet endroit.

Pour le moment notre liste ne ressemble à pas grand chose, tout simplement car il faut supprimer du fichier style.css (stocké dans le dossier css du thème), l'ancien code css utilisé pour mettre en forme la liste des pages statiques. Éditez le fichier themes/defaut/css/style.css et supprimez toutes les lignes entre

/* ---------- NAV ---------- */

et

/* ---------- HEADER ---------- */

Notre liste maitentant est un peu plus présentable:

Nous pouvons néanmoins y faire quelques améliorations.

En dessous de la ligne

/* ---------- NAV ---------- */

ajoutez le code suivante:

aside nav ul  {
	margin-bottom: 0;
}
aside nav {
	margin-bottom: 50px;
}

Et voilà le résultat final, qui s'intégre pleinement avec le reste de la sidebar

Petite remarque: si vous ne voulez pas afficher un groupe de pages statiques ou simplement masquer le menu d'une seule page, sélectionnez la valeur Masquer dans la colonne Menu des pages concernées.

DClassé dans : PluXml ,Mots clés : Page statique, Menu, PluXml, Sidebar, Thème

A propos de l'auteur, jack:

Webmestre de PluXopolis de 2018 à Avril 2023.

1 commentaire

rFil RSS des commentaires de cet article