SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 293 visiteurs en ce moment

Accueil > Squelettes > Squelettes pour blog > Lebanon > Lebanon : Ajouter un menu (programmation SPIP)

Lebanon : Ajouter un menu (programmation SPIP)

2 novembre 2007 – par erational – commentaires

4 votes

Apprendre à modifier un squelette SPIP pour ajouter un élément tel qu’un menu.
Pour ce tutoriel, nous allons modifier le squelette Lebanon conçu par tetue

Nous allons maintenant modifier le squelette pour l’adapter à nos besoins.

Avant tout, n’oubliez de sauvegarder régulièrement vos modifications pour pouvoir revenir en arrière si besoin.

Objectifs

Nous allons reprendre le squelette pour le transformer en portail. Actuellement on a une présentation de type Blog : les articles sont listés les uns après les autres.

Sur les sites portails, on a souvent les grandes catégories auxquels on peut accéder directement. Nous allons donc ajouter sous l’entête, une barre de navigation horizontale qui reprend les rubriques principales du site.

Ajouter la barre de navigation en HTML

La première étape est d’analyser le squelette pour savoir où nous allons ajouter le code HTML de cette barre de navigation. Cette barre doit être présente sur toutes les pages sur site et donc sur le squelette de toutes les pages : article.html, rubrique.html, recherche.html ....

D’après notre analyse de la feuille de style, l’endroit le plus logique pour placer ce menu est sous le bloc #entete. Nous allons donc y créer un nouveau bloc #menu.

Si on analyse la page article.html, on remarque que l’on ajoute le bloc #entete est ajouté avec l’instruction SPIP INCLURE qui permet d’inclure des bouts de squelettes.

Nous avons donc le choix ici pour ajouter notre nouveau bloc #menu :
-  soit on ajoute le code HTML du menu dans le fichier inc/inc-entete.html
-  soit on crée un nouveau fichier pour placer le code HTML du menu.

On préfère la deuxième solution plus modulaire, on créé donc un fichier inc/inc-menu.html avec le code HTML du menu. Pour l’instant le code est dit statique c’est à dire que on place à le code à la main (il faudra ensuite que SPIP le calcule automatiquement)

Fichier inc/inc-entete.html :

Remarque :

Comme il s’agit d’un bout de code placé à l’intérieur d’une page, nous n’avons pas besoin de tags habituels <html><body> ..... Pour le menu, nous avons choisi les tags <ul><li> car du point de vue sémantique, il s’agit d’une liste de liens

Nous faut maintenant inclure ce bout de code dans toutes les pages du squelette, par exemple dans article.html

Cette opération sera à répéter ensuite sur les fichiers rubrique.html, recherche.html, sommaire.html ...

Dans l’espace public du site, nous allons recalculer la page pour voir le résultat :

C’est bon, la liste apparait ! Il faut maintenant l’habiller ...

Habiller la barre de navigation avec la feuille de style

Comme nous avons un nouveau bloc, rien de plus de facile de l’habiller. Nous allons ajouter sur habillage.css

Et voilà le résultat :


Remarque : comme nous avons utilisé un float:right, il faudra lister les liens à l’envers ....

Programmer une boucle pour avoir un menu dynamique

Notre menu marche maintenant très bien. Le problème est que si nos administrateurs ajoutent une nouvelle rubrique à la racine du site, notre menu ne se mettra pas jour. Nous avons besoin d’un menu dynamique. Nous allons le programmer grâce aux boucles SPIP

On regarde alors la documentation, on veut lister une série de rubriques, on va utiliser la boucle RUBRIQUES dont la syntaxe est

Nous avons utilisé deux critères :

  • {racine} pour lister uniquement les rubriques à la racine du site
  • {par titre} : critère de tri pour lister les rubriques par ordre alphabétique

Le code est donc pour le fichier inc/inc-entete.html

Ce qui donne, lorsqu’on recalcule une page du site :

Youpi ! On obtient le résultat escompté quelque soit le nombre de rubriques à la racine du site.

Résumé

Il s’agit d’un exemple pédagogique. On peut bien sur compléter et affiner ce menu :

  • Mettre en valeur la rubrique courante
  • Utiliser un autre ordre de tri
  • Lister les sous-rubriques ....

Nous vous rappelons la méthode :

  1. Repérer la partie dans lequel vous voulez injecter votre code HTML (une page, un inclure, un nouveau bloc...)
  2. Tester votre HTML d’une façon statique
  3. Eventuellement mettre à jour la CSS pour habiller le nouveau code HTML
  4. Ecrire une boucle SPIP pour rendre votre HTML dynamique
  5. Tester

Nous vous conseillons d’effectuer ce tutorial étape par étape « à la main »

Pour les plus paresseux voici les fichiers du corrigé

Zip - 69.8 ko
Corrigé du tutoriel
ajout d’un menu horizontal sur lebanon

P.-S.

Article préalablement publié sur le site GenerationCyb

Dernière modification de cette page le 2 novembre 2007

Retour en haut de la page

Vos commentaires

  • Le 31 mars 2008 à 01:04, par benzine En réponse à : le menu sort de l’entete

    bonjour

    je n’arrive pas à faire tenir le menu dans l’entete. le probleme se pose au niveau de la ligne : #menu ul li a display:block ; float:left ; background : #666 ; color :#fff ; text-decoration:none ; font-size:0.9em ; padding:4px 12px ;border:1px solid #efefef ; border-top:0 solid #333 ;.
    Cette ligne place le menu sous l’entete alors que je voudrais qu’elle se trouve à l’interieur (en bas a gauche)

    Merci pour votre aide

    Répondre à ce message

  • Le 5 novembre 2007 à 12:15, par marcel En réponse à : Lebanon : Ajouter un menu (programmation SPIP)

    Bonjour à toutes et tous,
    je dois avoir un problème, mes sous rubriques n’apparaissent ni dans le menu vertical, ni par la suite dans l’affichage de la feuille principale ?
    Merci de votre aide
    A bientôt

    • Le 10 novembre 2007 à 15:22, par Loiseau2nuit En réponse à : Lebanon : Ajouter un menu (programmation SPIP)

      Hypothèse n°1 : Est ce que tes sous rubriques contiennent au moins 1 article ou 1 site ou 1 élément publié quelqu’il soit ?

      Hypothèse n°2 : Il doit y avoir un problème au niveau de tes boucles qui ne doivent scanner que le premier niveau ( {parent} ou {racine} ) de ton arborescence, qu’obtiens tu si tu changes ce critère ?

      Hypothèse n°3 : Peux tu poster ta boucle histoire que l’on voit comment elle est faite ?

    Répondre à ce message

  • Le 2 novembre 2007 à 20:01, par Loiseau2nuit En réponse à : Lebanon : Ajouter un menu (programmation SPIP)

    Bien joué :)

    surtout le petit récapitulatif de l’architecture css du squelette. C’est Romy qui va être heureuse :D

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

Ça spipe par là