1.Présentation
Ce squelette, basé sur la distribution SPIP 1.7, fonctionne en différentes résolutions au moins avec IE, Mozilla, Safari, Opera et Konqueror. Il a les particularités suivantes :
- ses formes et couleurs bien sûr,
- l’accueil est sur 3 colonnes,
- navigation par menu déroulant,
- un agenda,
- pages auteurs (liste + fiches),
- pages statistiques (visites/popularité d’articles),
- pagination systématique (forums, recherche etc.),
- un plan de site avec décompte articles,
- indication de réponses aux articles,
- affichage ’host name’ pour les messages de forum anonymes,
- exclusion sélective d’articles et leurs forums.
D’un point de vue Webmestre, le squelette :
- s’installe très rapidement.
- est modulaire et facile à personnaliser
- fonctionne en local au moins avec EasyPhp/Windows et Linux
- respecte la distribution officielle de SPIP (pas de modifications noyau, utilisation maximale de boucles etc.)
Le site est visible à cette adresse http://clairiere-epona.org. C’est un centre hippique ; si vous le visitez, soyez gentil de ne pas laisser de message lié à SPIP (ou à l’informatique) car c’est d’un intérêt moyen pour des cavaliers !
Changements
Le menu peut maintenant être calculé automatiquement. Accessoirement, quelques renommages et découpes ont été effectués pour clarifier le squelette.
Le menu de navigation
Ce menu déroulant est automatiquement calculé de manière à refléter l’organisation du site en terme de rubriques. Rien n’empêche toutefois de le réorganiser manuellement, selon ce que l’on souhaite voir apparaître.
L’agenda
Le principe du calendrier est d’utiliser les articles comme événements et de dater ces événements par la « date antérieure » qui est un des attributs attachés aux articles.
[1]. Il n’y a pas de notion d’événement sur plusieurs jours.
Ces articles-événements vont être aussi caractérisés par leur rubrique de rattachement (le thème) et par un mot clé associé.
Ici l’agenda miniature tel qu’il apparaît en page d’accueil. Les jours à événement contiennent un lien vers l’article événement s’il est unique, ou vers la vue mensuelle lorsqu’il y a plusieurs événements.
Ci dessous, le calendrier en mode mensuel ; à noter le Menu de requête (positionné sur « Tout ») qui va permettre la navigation par mot clé et, tout en bas, la « Légende » qui permet une sélection de thèmes. En jouant sur ces thèmes et sur la requête on obtient des visions sélectives de l’agenda relativement élaborées. Notez que le choix d’un thème inclut la visualisation des sous-thèmes.
Dans le calendrier annuel ci-après, on retrouve le même principe de navigation qu’en mode mensuel. Cette présentation en liste permet le copier/coller.
Squelette détaillé
Voici la liste du squelette avec un résumé des actions à effectuer chez vous pour une personnalisation minimum.
Fichier | Module | Personnalisation |
---|---|---|
agenda.css | Agenda | |
agen_min.html/php3 | Agenda | |
agenda.html/php3 | Agenda | |
agen_an.html/php3 | Agenda | |
IMG/next.gif | Agenda | |
IMG/prev.gif | Agenda | |
article.html | Base | |
breve.html | Base | |
forum.html | Base | |
habiml.css | Base | |
plan.html | Base | |
recherche.html | Base | |
rubrique.html | Base | |
sommaire.html | Base | |
typoml.css | Base | |
IMG/rub.png | Base | |
mes_fonctions.php3 | Base | |
resume.html | Statistiques | |
visites.html/php3 | Statistiques | |
menu.css | Menu | |
makem.php3/html | Menu | |
menukang.js | Menu | |
coolmenus4.js | Menu | |
IMG/fleche_menu.gif | Menu | |
auteur.html/php3 | Auteurs | |
auteurs.html/php3 | Auteurs | |
bandeau.html/php3 | Logo | Adapter |
logo.html/php3 | Logo | Adapter |
IMG/logo2.jpg | Logo | Remplacer |
IMG/minbat.jpg | Logo | Remplacer |
IMG/jcdroit.jpg | Logo | Remplacer |
IMG/minHB.jpg | Logo | Remplacer |
2. Installation
Tout d’abord, SPIP (version 1.7 au moins) doit avoir été installé sur votre site.
Copier les fichiers (1 min.)
Les 2 PJ suivantes sont identiques, seul le format de compression diffère (.zip ou .tgz). Sous Linux, faites tar zxf epona-sq.tgz ou unzip epona-sq.zip suivant le format choisi.
Le squelette est fourni sous un répertoire epona-sq. Copiez son contenu dans votre répertoire www après avoir effectué vos sauvegardes éventuelles.
==> A cette étape, le menu s’affiche, mais ne reflète pas l’organisation de votre site
Génerer le menu (1 min.)
- Appeler http://votre_site/makem.php3 : vous obtiendrez instantanément un message de confirmation du calcul [2].
- demandez à SPIP le recalcul de la page d’accueil,
- puis rafraîchissez cette page avec le bouton idoine de votre navigateur.
==> le menu est fonctionnel et reflète la structure de votre site en terme de rubriques. Il pourra être regénéré à volonté, en particulier à chaque création de rubrique.
Activer l’agenda (3 min.)
Pour cela, il suffit de se rendre dans la partie privée de SPIP (Administration / Configuration / Contenu) pour :
- autoriser dans la configuration SPIP des articles, les « dates antérieures » puisqu’elles vont servir à dater les événements du calendrier ;
- autoriser la configuration SPIP avancée des mots clé car nous allons avoir besoin de lier un mot clé à la rubrique Agenda,
- passer dans la partie Edition du site pour créer la rubrique Agenda avec le nom qui vous conviendra ; elle peut contenir des sous-rubriques avec leurs logos spécifiques ; l’ensemble forme une branche dans le jargon SPIP ; c’est dans cette branche que devront être enregistrés vos articles-événements,
- créer un groupe de mots clés nommé _Agenda. Il vous suffit de créer ensuite autant de mots-clés que vous désirez dans ce groupe. Ils apparaîtront dans le menu de sélection de l’agenda. Pour mon site Hippique j’ai créé 2 mot clés (Poney, Cheval) dans ce groupe _Agenda.
- créer un groupe de mot-clé nommé Agenda (ne pas confondre avec le précédent _Agenda) et le lier à la rubrique Agenda ; pour cela il faudra cocher la case Rubrique de ce groupe puis créer un mot clé nommé Agenda dans ce groupe Agenda. Se rendre ensuite dans la rubrique Agenda pour lui ajouter ce mot clé.
==> Tout est prêt pour garnir l’agenda, comme indiqué plus loin. Le calendrier doit s’afficher en page d’accueil (Recalcul)
Exclure des articles (immédiat)
Les articles qui auront été marqués avec le mot clé cacher n’apparaîtront pas à la une. Si des réponses (Forum) sont faites, elles n’apparaîtront pas davantage ; c’est ainsi que sur mon site hippique, j’ai créé un coin technique dédié à SPIP qui reste discret. Installer cette fonction revient donc à créer ou pas le mot clé, ce qui est quasiment immédiat si vous êtes encore dans la partie privée relative aux mots clés.
==> A cette étape, le squelette est techniquement installé et pleinement fonctionnel : il vous reste à lui donner sa personnalité.
3. Personnalisation
Le Logo
Changer le logo (images, texte) est l’étape la plus longue à cause des images, mais c’est une étape incontournable, même avec la distribution SPIP officielle. Avec notre squelette, c’est localisé dans le module Logo constitué de :
- logo.html pour le logo vertical, c’est à dire l’image en haut à gauche et les informations sur le Club (nom, adresse). Ne pas oublier en changeant l’image de respecter largeur et hauteur, faute de quoi il faudrait retoucher les CSS.
- bandeau.html pour le logo horizontal avec ses 3 images ; respecter la hauteur (147 pixels max).
Feuilles de style
Si vous souhaitez d’autres formes et couleurs (celles d’origine sont #ffffb0 pour le fond jaune clair et #cc4f4f pour le menu en bordeaux), vous pourrez modifier typoml.css et habiml.css, ma déclinaison personnelle de typographie.css et habillage.css qui ont été très peu changés ; de même vous pouvez aussi éditer agenda.css et menu.css pour donner votre touche à l’agenda et au menu.
Pour ne pas multiplier inutilement les fichiers css (petite entorse à la modularité), les styles propres au Logo sont restés dans habiml.css, avec un commentaire.
Modules
Si vous ne souhaitez pas utiliser un module, ne le référencez pas, sachant que l’appel se fait au moyen de l’instruction makeMenu (cas du menu), des balises INCLURE, de la balise link (pour la feuille de style correspondante) ou de la balise script.
Module | Fichier appelant | Instruction appelante |
---|---|---|
Agenda | sommaire.html | INCLURE, link |
Auteurs | menukang.js | makeMenu |
Statistiques | menukang.js | makeMenu |
Menu | tous les HTML | INCLURE, link, script |
Logo | tous les HTML | INCLURE |
Pagination
Elle peut être adaptée à votre goût en modifiant les constantes SPIP (le YY dans debut_xxx,YY) et PHP (TRANCHE) qui sont en général fixées à 25 ; recherchez ces valeurs dans rubrique.html article.html, recherche.html, resume.html, visites.html.
Contrôle manuel du menu
Le menu de navigation est décrit dans menukang.js que vous pourrez editer si, comme moi, l’organisation automatique ne vous convient pas. Dans ce cas, effacez le script de calcul automatique makem.php3 afin qu’il ne soit plus en accès public.
- chaque ligne makeMenu correspond à un choix de menu : elle contient un libellé, une URL, l’identité de l’élément ainsi que celle de son parent s’il existe. Ci après un exemple avec l’Agenda (1 parent, 2 fils) :
oCMenu.makeMenu('m3','','Agenda','agenda.php3?id_rubrique=23');
oCMenu.makeMenu('m8','m3','Mensuel','agenda.php3?id_rubrique=23');
oCMenu.makeMenu('m12','m3','Annuel','agen_an.php3?id_rubrique=23');
- Suivant le nombre d’éléments du menu de navigation il peut être nécessaire de refixer la hauteur de la « boîte » qui le contient (« .menukang » dans menu.css). L’exemple correspond à un menu de 12 éléments de 20px chacun avec une marge de 40px :
.menukang {
background-color: #ffffb0;
font-size: 9;
text-align:center;
padding-bottom: 280px;
}
- plus généralement on peut indiquer d’autres paramètres comme les chemins du répertoire www en local et sur le site ou les coordonnées de placement du menu. Les lignes sont assez explicites.
Ne pas oublier que ce menu est en Javascript et qu’on le réactualise avec le bouton de rafraîchissement du navigateur et pas seulement avec le bouton Recalculer de SPIP. Avec certains navigateurs susceptibles, un redémarrage navigateur peut-être nécessaire en cas d’erreur.
4. Utiliser l’agenda
Une fois l’agenda activé comme décrit plus haut, il faut le remplir en procédant comme suit pour chaque événement :
- créer un article ordinaire dans l’une des rubriques du secteur qui a été réservé à l’Agenda,
- valider la saisie avant de pouvoir passer à la suite,
- renseigner la « date antérieure » avec la date de l’événement (déplier le menu, cocher Afficher puis renseigner J-M-A),
- lui donner un (ou plusieurs) des mot-clés prévus,
- et enfin publier l’article en partie publique.
Il y a donc 2 actions supplémentaires par rapport à un article ordinaire, mais si une seule de ces conditions manque, l’événement ne sera pas affiché.
5. Restrictions
- Mon hébergeur Online.net ne supportait pas la très basique fonction PHP in_array qui se trouve dans le calendrier. Plutôt que de la recoder à la main, j’ai changé d’hébergeur, car de toute manière leur version de PHP, décidemment obsolète, ne supporte pas SPIP 1.7
- Les squelettes Epona V1 et V1.2 utilisaient un principe légérement différent de sélection de mots-clés calendrier (existence d’un mot clé commun) ; toutefois, la procédure actuelle reste compatible avec cette ancienne organisation : il suffit de renommer l’ancien nom de groupe (Equidé chez moi) en _Agenda, puis pour tous les articles ayant le mot clé commun, le remplacer par la suite des mots clés qui le représentent (Poney et cheval dans mon cas).
6. Remerciements
Si la manip pose problème, écrivez moi ; si vous êtes contents remerciez moi aussi :-).
Pour ma part je me suis inspiré de « Réaliser un agenda avec SPIP » et, indirectement, de « Menu DHTML multi-niveaux » pour le Menu Javascript d’origine dhtmlcentral.com ; j’en remercie bien sincèrement leurs auteurs, ainsi que Jacques PYRAT qui m’a aidé à rendre générique l’installation de l’agenda.
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |