Squelette Epona (V1.2)

Ce squelette pourra vous plaire par sa compatibilité avec les différents navigateurs, par son look ou encore par ses fonctions : menu déroulant, agendas , pagination etc.

Ce squelette SPIP fonctionne au moins avec IE, Mozilla, Safari, Opera et Konqueror ; il a quelques particularités que vous pouvez utiliser partiellement ou complètement :

-  ses formes et couleurs bien sûr,
-  l’accueil est sur 3 colonnes,
-  un menu de navigation déroulant (en Javascript) qu’il vous faudra adapter comme indiqué plus loin (facile)
-  le calendrier ; il est dérivé de cette contribution SPIP mais il a été enrichi à plusieurs égards ; là encore une adaptation -voire une ablation- sera nécessaire ; elle est plus ou moins compliquée selon l’usage des mots-clés que l’on souhaite et selon la crainte que PHP vous inspire...,
-  le plan de site, conçu pour limiter la taille et ne privilégier aucun type de tri d’articles,
-  la pagination (rubriques, recherche, forums)
-  indication de réponses aux articles (Sommaire et Rubrique).

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 !

Vous pourrez trouver à cette adresse les évolutions du squelette et de l’article, si vous souhaitez disposer des plus récentes.

Changements

Par rapport à la version 1.1, la nouveauté concerne l’agenda qui peut maintenant être consulté en mode Annuel. Un bug d’affichage a aussi été corrigé et le code nettoyé.

Le calendrier

Le principe de 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].

Ces articles-événements vont être aussi caractérisés par leur rubrique de rattachement et par un mot clé associé, ce qui permettra des filtrages par « thèmes » (c’est à dire une rubrique et ses sous-rubriques) ou par mot-clé.

Ci dessous la miniature du calendrier qui apparaît en page d’accueil :

On va pouvoir accéder aux calendrier annuels et mensuel en cliquant sur le mois ou l’année.

Ici le calendrier 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.

Ici le calendrier en mode annuel avec une présentation en liste pour permettre/le copier coller :

Installation du squelette

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.

Squelette ZIP
Squelette TGZ

Le squelette est fourni sous un répertoire epona-sq. Copiez son contenu dans votre répertoire www sans aucune obligation de copier la totalité de IMG puisque vous aurez à personnaliser images et logo. Notez que le squelette comprend un fichier mes_fonctions.php3 : pensez à sauvegarder le vôtre au cas où vous en auriez un.

Voici la liste du squelette avec un résumé des actions par fichier.

agenda.css
agenda.html   ==> adapter
agenda.php3
article.html
breve.html
habiml.css
menukang.js  ==> adapter
plan.html
recherche.html
resume.html
rubrique.html
rubrique-23.html ==> renommer
sommaire.html  ==> adapter
typoml.css
mes_fonctions.php3
fonctions/
fonctions/coolmenus4.js
fonctions/fleche_menu.gif
IMG/logo2.jpg ==>  remplacer
IMG/rub.png
IMG/next.gif
IMG/prev.gif
IMG/jpg/mindouche.jpg ==>  remplacer
IMG/jpg/jcdroit.jpg   ==>  remplacer
IMG/jpg/minHB.jpg  ==> remplacer

Installation du calendrier

Pour mettre en place le calendrier, il faut :

-  autoriser dans la configuration SPIP des articles, les « dates antérieures » puisqu’elles vont servir à dater les événements du calendrier ;

-  créer une rubrique Agenda sous la racine ; elle peut contenir des sous-rubriques avec leurs logos spécifiques ; l’ensemble forme un secteur dans le jargon SPIP ; c’est dans ce secteur que devront être enregistrés vos articles-événements, Notez le numéro xx de cette rubrique Agenda qui est aussi son numéro de secteur ; lui seul est important (le nom de rubrique est libre)

-  remplacer le id_rubrique=23 (ou id_secteur !=23 ou =23) qui se trouve dans le fichier agenda.html et dans sommaire.html par un numéro correspondant à votre rubrique/secteur Agenda ; notez qu’il y a élimination des événements de la « Une » (choix personnel).

-  renommer rubrique-23.html en rubrique-xx.html, selon votre valeur de xx

-  créer un groupe de mots clés en l’adaptant à votre cas. Pour mon site Hippique j’ai créé le groupe Equidé contenant 3 mot clés (Poney, Cheval, Commun).

Dans le menu de sélection de l’agenda, 3 choix sont proposés : Poney, Cheval et Tout. Si on désire les changer, il faut modifier le fichier agenda.html qui est codé en PHP. Si vous désirez un nombre différent de mot-clés, il vous faudra le coder en vous inspirant du modèle. En fait il y a autant de boucles SPIP que de mot-clés ; pour chacune, le résultat est stocké dans un tableau PHP puis on fusionne les tableaux en fonction de la demande (Si la requête de menu est Poney on va fusionner le tableau associé au mot-clé Poney ainsi que celui associé au mot-clé Commun ; si la requête de menu est Tout, on va fusionner les 3 tableaux). Pour le calendrier annuel introduit en V1.2, le principe est similaire : voir rubrique-23.html.

Les thèmes, quant à eux, correspondent directement aux rubriques du secteur Agenda.

Si vous arrivez à vos fins, éditez le fichier agenda.css pour donner votre touche graphique finale ...

Garnissage du calendrier

Ensuite il faudra créer les événements dans le calendrier comme suit :

-  créer un article ordinaire dans l’une des rubriques du secteur Agenda,
-  le valider avant de pouvoir passer à la suite,
-  pour cet article, 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 des mot-clés prévus

Si une seule des conditions manque, l’événement ne sera pas affiché !

Le menu de navigation

Ce Menu de navigation en Javascript, est facile à personnaliser à partir du modèle (voir le fichier menukang.js). Il suffit d’indiquer pour chaque ligne, un libellé, une URL et l’identité de l’item de menu (ainsi que celui du parent s’il existe) en veillant à donner à chaque item un numéro unique. Pour les coordonnées du menu, c’est juste au dessus (facile à repérer) ; quant aux couleurs c’est dans chaque squelette entre les balises « style ».

Toujours dans le fichier menukang.js, Il faut indiquer les chemins du répertoire www en local et sur le site ; voici les 2 lignes à adapter (exemple local pour Linux) :

 
oCMenu.offlineRoot="/var/www/epona/"
oCMenu.onlineRoot=""

L’inconvénient de ce menu est qu’il faut le retoucher à chaque changement dans l’organisation. D’un autre coté les solutions intégrées à SPIP (voir « Arborescence dynamique et contextuelle » et « Menu DHTML multi-niveaux ») ont l’inconvénient d’imposer comme menu de navigation la structure du site en rubrique. Or, on peut désirer autre chose, par exemple masquer certaines rubriques ou mixer : articles, rubriques, pages externes (Audience...) ou spéciales (agenda...)

Les autres personnalisations

En dehors des fichiers précédemment mentionnés, il faudra retoucher au minimum les suivants :

-  sommaire.html : pour ce qui concerne les informations sur le Club (adresse etc...) ainsi que les images du bandeau d’accueil (IMG/jpg/*)
-  IMG/logo2.jpg,

Vous pourrez aussi modifier
-  typoml.css et habiml.css, ma déclinaison personelle de typographie.css et habillage.css, si vous souhaitez d’autres formes et couleurs

Les autres particularités sont utilisables telles quelles ; notez toutefois que la pagination peut être adaptée à votre goût en modifiant les constantes SPIP et PHP ; pour rubrique.html recherchez 25. Procédez de manière analogue pour article.html et recherche.html

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

Me contacter

Si la manip pose problème, écrivez moi ; si vous êtes contents remerciez moi aussi :-) Dans tous les cas contactez moi par email.

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 les beta-testeurs qui m’ont aidé à clarifier cet article.

mlebas@labeille.net

Notes

[1Le fait d’utiliser la date antérieure pour un événement futur est un détournement d’usage a priori sans conséquence et de toute manière limité aux articles de l’ Agenda

Discussion

6 discussions

  • 1

    salut
    félicitation pour ce superbe travail.
    je souhaiterai adapter le mini calendrier.
    en effet je travaille sur un agenda pour mon site en me servant des agendas de spip et j’ai utilisé le mini agenda d’épona pour la page d’accueil, tout fonctionne bien excèpté le renvoi vers l’article concerné.
    en effet je souhaiterai que les évênements (sélectionnés par mots clef) soient soulignés et renvoient directement vers l’article mais je sèche.
    avez vous une idée du paramètre à modifier ?

    Répondre à ce message

  • 1
    vincent

    oulala je debute en spip et j’ai installé epona
    mais j’avoue que je suis un peu dépassé
    y’ a quelqu’un pour m’aider ?

    vincent

    • Marcopol

      Prends la version 2.2 c’est tout automatique !

    Répondre à ce message

  • Salut !

    Bravo pour ce squelette superbe. J’aurais voulu savoir comment faire pour arrondir le bord du menu, car ç’est un peu agressif en rectangle.

    Merci d’avance et encore bravo.

    Répondre à ce message

  • Version 2 disponible

    Le menu peut maintenant être calculé automatiquement ce qui rend l’installation du squelette très rapide.

    Répondre à ce message

  • Version 1.4 disponible

    Par rapport à la version précédente voilà ce qui change :
    -  installation rapide en moins de 10 minutes,
    -  exclusion sélective d’articles et leur forums,
    -  code épuré, plus homogène et mieux commenté.

    Répondre à ce message

  • Marcopol

    Une version 1.3 est disponible :

    Changements

    Par rapport à la version précédente la nouveauté concerne :
    -  l’agenda qui ne nécessite plus aucune adaptation de squelette ; cette simplification très appréciable est obtenue notamment par une boucle sur les mots clés, dûe à Jacques PYRAT
    -  accès direct aux événements depuis l’agenda miniature quand il n’y a aucune ambigüité,
    -  pages d’auteurs et de statistiques
    -  affichage ’host name’
    -  une procédure d’installation simplifiée et améliorée,
    -  des directives d’aménagement optionelles (Agenda sans mot clé etc.),

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom