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.

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é.

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.

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.