Premier vol
Voilà , vous y êtes, Plume s'est installé comme une fleur sur votre serveur et attend impatiemment votre prose. Vous éditez une première catégorie à propos d'oiseaux diurnes, puis une seconde qui regroupera les nocturnes et, dans la précipitation, une troisième sur les espèces en voie de disparition. Plein d'enthousiasme, vous voilà rédigeant votre premier article décrivant en détail la Fairywren sauvage. Fier du résultat, vous enchaînez par la vie trépidante de la Supercilious owl. Au bout du dixième article, rempli d'allégresse, vous décidez de voir le site. Seulement voilà , les gabarits proposés par défaut vous semblent tristounets et vous aviez en tête de faire un site un peu plus funky. Vos oiseaux méritent bien cela tout de même !
Fonctionnement de Plume :
Plume est un gestionnaire de contenu. A ce titre, il génère automatiquement une page web avec les articles que vous saisissez grâce au manager. Par défaut (nous considérerons pour la suite une installation qui sent encore la peinture fraîche) ;-), il vous affiche un jeu de gabarits prédéfinis. Rien de magique là dedans, Plume va simplement chercher le modèle que vous lui indiquez à la fin du formulaire de saisie. Vous retrouvez le code de ce gabarit dans le dossier /mon/dossier/racine/manager/template/default/. Vous trouverez plus de précisions sur ce sujet dans l'article de Gilles.
Le tour du nid (sans style) :
�ditons pour commencer le fichier category_homepage.php. Supprimons sans hésiter tout le code situé entre <body class="category"> et </body>. Puisque vous êtes décidé à faire les choses correctement, nous allons séparer le site en quatre parties, balisées par des <div></div> :
- L'entête, que vous retrouverez sur toutes les pages du site référencées "category_homepage.php et qui contiendra le logo du site et la barre de navigation dans les catégories de votre site.
- Le contenu, où s'affichera le titre et l'introduction du dernier article, puis la liste des cinq derniers articles décrivant nos oiseaux préférés.
- Les "news", qui affichera les 3 dernières news résumant en détails vos observations de terrain, jumelles en bandoulière.
- Le pied de page, pour les infos légales du site que nous précisons là encore sur toutes les pages du site ayant category_homepage.php pour gabarit.
Ce qui nous donne
<body class="category">
<div id="entete">
</div>
<div id="contenu">
<div id="dernier_article">
</div>
<div id="liste_article">
</div>
</div>
<div id="news">
</div>
<div id="pied">
</div>
</body>
Les boucles aux oiseaux :
� présent nous allons indiquer à Plume CMS ce qu'il doit nous afficher automatiquement dans ces quatre parties. Nous allons utiliser les fonctions offertes par Plume pour afficher de façon ordonnée les ressources rédigées dans le manager.
Débutons par la partie "entete". Nous allons ajouter une image en guise de logo puis une liste non ordonnée (<ul>). Dans les éléments de cette liste (<li>), nous ferons apparaître automatiquement les liens vers nos trois catégories d'oiseaux.
Nous ajoutons donc :
<img src="mon/repertoire/image/supercilious.jpg" alt="Logo du site" title="Chouette, la Supercilious !" />
<?php pxPrimaryCategories('<ul>%s</ul>'); ?>
La fonction pxPrimaryCategories('$s' - chaîne de substitution) est une fonction informative qui fait tout le travail pour nous. Elle construit automatiquement notre liste non ordonnée. Remarquez que nous aurions pu indiquer '<ol>%s</ol>' et obtenir ainsi une liste ordonnée. Mais pour des oiseaux sauvage, cela n'était pas vraiment indiqué. ;-)
Voici donc pour l'entête du site.
Passons à présent à la partie "contenu". Dans un premier temps, c'est le dernier article publié qui nous intéresse. Nous voulons son titre, son auteur, sa date de dernière modification et sa description. Il s'agit ici de "boucler" sur toutes les catégories. Comme nous sommes sur un gabarit du type "page d'accueil", nous allons utiliser la boucle $last, fonction de boucle qui sâutilise dans tous les types de patrons. Il nous faut lâinitialiser auparavant avec la fonction pxGetLastRessources(), encore et toujours une fonction de boucle. Vous noterez les paramètres indiqués à la fonction: '1' ressource, du type 'articles' et '' pour prendre en compte toutes les catégories.
Notre code devient alors :
<div id="contenu">
<?php pxGetLastResources('1', 'articles', '') ; ?>
<?php while ( !$last->EOF() ) : ?>
<div id="dernier_article">
<!-- Affichons la date de dernière modification de lâ??article -->
Le <?php pxLastResDateModification('%d/%m/%Y') ; ?>
<!-- On obtient et affiche le titre, sous forme de liens -->
<h1><a href="<?php pxLastResPath(); ?>"><?php pxLastResTitle(); ?></a></h1>
<!-- Affichons lâauteur sous forme de lien mailto avec lâadresse encodée pour éviter le spam -->
<a href="<?php pxLastResAuthorEmail('%s','link'); ?>">par <?php pxLastResAuthor(); ?></a>
<!-- et enfin, la description de lâ??article, le « chapô » -->
<p><?php pxLastResDescription() ; ?>
</div>
< ?php
$last->moveNext() ;
endwhile ; ?>
<!-- fin de la boucle dâ??affichage pour la balise id="dernier article". -->
<div id="liste_article">
<!-- pas dâ??oiseaux ici pour le moment. -->
</div>
</div>
Voilà pour la première section. Entamons à présent la « liste_article » des cinq derniers volatiles numérisés. Ici, il faut indiquer à la boucle que nous ne nous intéressons plus quâ??aux cinq derniers articles. Nous utilisons pour cela les paramètres de la fonction pxGetLast Ressource() pour lui préciser que nous travaillerons sur les cinq dernières ressources, en excluant les brèves, et pour toutes les catégories disponibles. Un petit souci apparaît alors. Nous affichons déjà le dernier article paru dans notre première section. Il faut donc utiliser le php pour exclure de la boucle le premier article. Nous allons afficher le résultat uniquement après la première boucle en utilisant un compteur. Ce qui nous donne pour le code entre les balises <div id="liste_article"></div> :
<div id="liste_article">
<?php pxGetLastResources('5','articles','') ;
$i=1; //compteur
while ( !$last->EOF() ) : ?>
<?php if($i >1): ?>
<h1><a href="<?php pxLastResPath(); ?>"><?php pxLastResTitle(); ?></a></h1>
<a href="<?php pxLastResAuthorEmail('%s','link'); ?>">par <?php pxLastResAuthor(); ?></a>
<?php endif; ?>
<?php
$last->moveNext();
$i++; //compteur incrémente de 1
endwhile;
?>
</div>
<!-- fin de la boucle dâ??affichage pour la balise id="liste_article". -->
Une véritable volière ! Il ne nous reste plus quâ??à utiliser le même principe pour les brèves. Un changement de paramètre, de type de fonction et le tour est joué. On peut alors faire :
<div id="news">
<ul>
<?php pxGetLastResources('10','news',''); ?>
<?php while ( !$last->EOF() ) : ?>
<li>
<a href="<?php pxLastResPath(); ?>"><?php pxLastResTitle(); ?></a>
<!-- on affiche la/les catégorie(s) d'appartenance de la brève -->
<div class="cat"># <?php pxLastResCategories('%s',', ',' et '); ?></div>
</li>
<?php
$last->moveNext() ;
endwhile ; ?>
</ul> <!-- fin de la boucle dâ??affichage pour la balise id="news". -->
</div>
Le pied de page restera des plus simple, avec juste le nom du site fourni par la fonction informative php pxInfo() pour afficher le nom du site et le logo de Plume CMS.
<div id="pied">
<a href="http://www.pxsystem.sourceforge.net/">
<img src="<?php pxInfo('filesurl'); ?>theme/plume-cms-powered.png" alt="powered by Plume CMS!" /></a>
Merci à <a href="http://fr.wikipedia.org/wiki/Georges_Cuvier" title="en savoir plus avec Wikipédia">George Cuvier</a>
pour les illustrations utilisées pour ce <?php pxInfo('name'); ?>
<a href="http://brainministry.net/">
<img src="<?php pxInfo('filesurl'); ?>theme/brain.png" alt="Ministry of Brain" />
</div>
Votre page, malgré son allure, est valide. Vous êtes certain que vos oiseaux arriveront à bon port et s'afficheront.
Des plumes et du style :
Nous avons à présent l'essentiel du site, la sémantique. Attaquons nous maintenant à l'aspect purement visuel : la mise en page avec une feuille de style. Vous remarquerez dans l'entête de la page, entre les balises <head> </head>, la ligne <link rel="stylesheet" type="text/css" href="/xmedia/theme/style.css" />. Celle-ci nous indique que nous importons un lien identifié en tant que "stylesheet", du type text/css, et qui se trouve dans /mon/dossier/racine/xmedia/theme/ sous le nom style.css. Ce fichier va faire correspondre divers attributs à chaque balise rencontrée dans notre premier gabarit. Créons un fichier plume.css dans ce même dossier au moyen de votre éditeur de texte favori. Celui-ci viendra remplacer le style par défaut lors du chargement de la page, à condition bien sur de renommer "/xmedia/theme/style.css" en "/xmedia/theme/plume.css"
/* ---------- Style generaux ------------- */
body {
padding: 10px; /* on fixe la position du cadre principal */
background-color: #fff; /* on fixe aussi la couleur de fond */
}
.categorie {
background-color: #fff; /* pour etre certain que le fond soit blanc */
font-family: verdana,arial,helvetica,sans-serif; /*definition de la police de caractere pour la page entiere */
}
a {
text-decoration: none; /* suppression du soulignement par defaut pour les liens */
}
a:hover {
color: #BCE; /* couleur du lien au survol */
}
img {
margin: 0 10px 0px 10px;
border: 0;
}
.cat {
font-size: 0.7em;
}
/* ---------- Entete ------------- */
#entete img {
margin-left: 350px;
padding: 0;
}
#entete h1 {
text-align: right;
margin: 0 10px 0 0;
padding: 0 10px 0 0;
}
#entete {
clear: both; /* Pour isoler le bloc entete sur une ligne */
padding-bottom: 30px; /* positionnement du bloc entete */
}
#entete ul li {
display: inline; /* alignement des elements de liste, par defaut du type bloc */
padding: 15px;
margin: 5px; /* definition de la marge du texte */
font-size: 1.7em; /* grossissement local de la police de caractere */
background-color: #CDE;
border: 3px solid #BCE;
}
/* ---------- Contenu ------------- */
#contenu {
width: 600px; /* largeur du bloc contenu */
float: left; /* positionnement a gauche du bloc */
margin: 0 10px 30px 30px; /* positionnement du bloc */
background-color: #BCE; /* couleur du fond */
border: 3px solid #CDE;
}
#dernier_article {
margin: 10px;
padding: 10px;
text-align: justify;
background-color: #CDE;
}
#dernier_article h1 {
margin-bottom: 0; /* rapprochement vertical du texte */
}
#liste_article ul li {
list-style: none; /* Suppression des puces par defaut pour les listes */
}
#liste_article h1 {
margin-bottom: 0;
}
#liste_article {
margin-left: 20px; /* decalage du texte sur la droite (marge a gauche) */
margin-bottom: 10px;
}
#liste_article a:hover {
color: #CDE;
}
#news {
width: 280px;
float: right;
background-color: #BCE;
border: 3px solid #CDE;
}
#news ul {
padding-left: 3px;
}
#news ul li {
margin: 10px 10px 0 10px; /* espacement haut, droite, bas, gauche pour le bloc li */
padding: 10px;
list-style: none;
background-color: #CDE;
}
/* ---------- pied de page ------------- */
#pied {
clear: both;
text-align: center;
background-color: #CDE;
border: 3px solid #BCE;
height: 35px;
padding-top: 10px;
}
L'oiseau fait l'article.
Voilà , notre page d'accueil est terminée. Elle invite à lire plus précisemment l'article qui intéresse votre visiteur. Celui-ci cliquera avec joie sur le titre de l'article afin d'en savoir plus sur ce drôle d'oiseau. Pour aller plus loin ou commencer un élevage, il vous reste à présent à faire la même chose pour afficher la ressource "article" dans toute sa splendeur.
Lors d'un prochain article et afin d'avoir un site "complet", nous utiliserons les gabarits de rubrique et d'article fournis par défaut pour modifier l'apparence du site uniquement par les feuilles de style. D'ici là , bon vol !
Téléchargez les fichiers de l'article
Partagez vos idées sur cet article.
