Chapitre 7

Voyons maintenant comment créer un nouveau menu. Nous allons choisir le nom Livre JOOMLA! 1.5. Le lien devra mener à la page du site offi ciel de Joomla! en France, http://www.joomla.fr/. Nous ferons apparaître le site dans une autre fenêtre. Le nouveau menu sera présenté sous le menu principal dans la colonne gauche.

Sélectionnez la commande MENUS > GESTION DES MENUS puis cliquez sur NOUVEAU. Dans le champ du type de menu, vous devez indiquer le nom interne du menu. Il faut choisir un nom suggestif sans utiliser d’espace ni de lettre accentuée. Un nom plus suggestif peut être donné dans le champ TITRE. Il apparaîtra sur le site Web. Vous devrez également désigner le module correspondant, et désigner les éléments pour peupler le nouveau menu (voir Figure 7.21).

Figure 7.21 Menus > Gestion des menus – Nouveau.

Type de menu. C’est le nom utilisé dans le code de Joomla!. Vous n’avez pas le droit aux espaces
ni aux lettres accentuées. Choisissons par exemple livre_joomla. Cet Identifiant ne sera jamais
visible sur le site Web. Il sert à établir la connexion logique entre le module et le menu.

Titre. Le nom public du menu. Dans l’exemple, nous indiquons Livre JOOMLA! 1.5.
Description. Une description facultative qui n’apparaît que dans la partie administrative, par exemple
dans les listes.

Titre du module. Le nom public du module. Nous choisissons aussi Livre JOOMLA! 1.5.
Cliquez sur le bouton SAUVER pour provoquer la création d’un nouveau module avec les paramètres choisis. Vous revenez dans la vue globale des menus. Le nouveau menu apparaît, mais il est vide (voir Figure 7.22). Par ailleurs, le nouveau menu a été ajouté au menu général MENUS.

Figure 7.22 Le nouveau menu vide.

Dans la ligne du nouveau lien LIVRE JOOMLA! 1.5, cliquez sur la petite icône de la colonne ÉLÉMENTS DE MENUS (elle symbolise un crayon, mais c’est difficile à voir). Vous accédez ainsi à la page de gestion du contenu de ce menu (voir Figure 7.23).

Figure 7.23 Liste des éléments du nouveau menu.

Pour l’instant, le menu est vide. Cliquez sur le bouton NOUVEAU. Commencez par choisir le type de l’élément parmi les différents domaines proposés (voir Figure 7.24). Pour ne pas nous aventurer
dans quelque chose de trop complexe, nous allons choisir un lien externe simple qui mènera vers le
site joomla.fr.

Figure 7.24 Sélection du type d’élément de menu.

Cliquez donc sur le lien intitulé LIEN EXTERNE. Vous voyez apparaître un page de saisie (voir Figure 7.25).

Figure 7.25 Nouveau lien de menu.

Vous connaissez déjà le contenu de ce formulaire. Voici comment le renseigner dans le cas d’un
élément de menu.

Titre. Le nom du lien qui apparaît dans le menu (Site Web du projet Joomla!).

Alias. Le nom abrégé de l’adresse URL (projet-joomla).

Lien. Le lien qui mène à la page Web (http://www.joomla.fr)

Afficher dans. Nous allons l’Afficher dans notre nouveau menu, Livre JOOMLA! 1.5.
Élément parent. Il n’y en a pas encore car c’est le premier élément.
Publié. Vous allez décider de publier ce menu ? (Oui).

Ordre. Puisque c’est le premier élément, il n’y a pas encore de tri possible. En général, les nouveaux
éléments sont ajoutés à la fin des menus. Vous pourrez modifier l’ordre après avoir utilisé Sauver.

Niveau d’accès. Choisissez de rendre le menu accessible à tous les visiteurs (Public), à ce qui sont
Enregistré ou au groupe Spécial.

En cliquant, ouvrir dans. Choisissez de faire apparaître la cible du lien dans une nouvelle fenêtre
de navigateur. Si vous cliquez sur APPLIQUER, vous restez dans la même page. Cliquez sur SAUVER pour enregistrer les donnée et quitter cette page.

Le menu est dorénavant peuplé d’un élément. Il n’est pas encore visible dans la partie publique. Il
faut de nouveau publier le module correspondant. Choisissez la commande EXTENSIONS > GESTION DES MODULES (voir Figure 7.26). Cliquez dans la croix rouge de la colonne ENABLED (ACTIVÉ). Notez les petits triangles qui permettent d’intervenir sur l’ordre. N’y touchez pas.

Figure 7.26 Extensions > Gestion des modules.

Vous pouvez dorénavant accéder à votre site Web (pensez à réactualiser par F5). Vous devriez voir
apparaître le nouveau menu LIVRE JOOMLA! 1.5 (voir Figure 7.27).

Figure 7.27 Le nouveau menu Livre JOOMLA! 1.5 sur le site.

Mais le nouveau menu n’a pas le même aspect que le menu principal. Il n’a pas ce cadre bleu caractéristique. La présentation dépend du fichier CSS du template. Il nous reste à relier logiquement notre nouveau menu au même template que celui du menu principal. Il faut que le module fasse référence à une classe de style CSS bien précise. Pour l’instant, notre menu est associé à la classe nommée module. Il suffit d’accéder au code source HTML de la page pour le vérifi er (Listing 7.1).

<div class=”module”><div><div><div>
<h3>Livre JOOMLA! 1.5</h3>
<ul class=”menu”>
<li class=”item54”>
<a href=”http://www.joomla.fr” target=”_blank”>
<span>Site Web du projet Joomla!</span>
</a>
</li>
</ul>
</div></div></div></div>

Listing 7.1 : Code source du nouveau sous-menu

En comparaison, le menu principal fait référence à la classe intitulée module_menu (Listing 7.2).

<div class= ”module_menu”><div><div><div>
<h3>Menu principal</h3>
<ul class=”menu”>
<li id=”current” class=”active item1”>
<a href=”http://localhost/joomla150/”>
<span>Accueil</span>
</a>
</li>
 ... autres liens ...
</ul>
</div></div></div></div>

Listing 7.2 : Code source du menu principal Main Menu

Il faut accéder à la gestion des modules pour créer la bonne liaison entre le menu et la classe CSS.
Choisissez à nouveau EXTENSIONS > GESTION DES MODULES > LIVRE JOOMLA! 1.5. Accédez aux détails du volet des paramètres avancés. Dans le champ SUFFIXE DE CLASSE DE MODULE, saisissez l’Identifiant suivant (voir Figure 7.28) :
_menu

Figure 7.28 Modification du suffixe de classe CSS

Accédez à nouveau à votre site Web. Le menu est correctement mis en forme (voir Figure 7.29).
Si vous cliquez sur l’unique lien du menu (SITE WEB DU PROJET JOOMLA!), la page d’accueil du site cible apparaît.

Figure 7.29 Le nouveau menu avec un style CSS adapté.

La Corbeille de menu dresse la liste de tous les éléments de menu qui ont été supprimés (voir
Figure 7.19). Vous pouvez sélectionner un ou plusieurs éléments puis cliquer sur le bouton RESTAURER pour les récupérer (voir Figure 7.20). La suppression définitive se fait avec le bouton SUPPRIMER.

Figure 7.19 Menus > Corbeille de menu.

Figure 7.20 Menus > Corbeille de menu > Restaurer.

Pour une première prise en main, découvrons les menus existants. La procédure qui suit s’applique
à tous les menus. Choisissez par exemple la commande MENUS > MAIN MENU. Vous voyez apparaître les éléments de menu qui sont rassemblés dans ce menu principal (voir Figure 7.5).

Si vous avez suivi nos exemples du Chapitre 4, vous avez déjà francisé l’élément Home en Accueil. Dans cette liste, vous pouvez lancer différentes commandes à la souris. En cliquant une fois dans la coche verte, vous désactivez l’élément. Cliquez à nouveau pour le réactiver. Vous pouvez modifier l’ordre des éléments dans le menu en utilisant les petits triangles verts ou en modifi ant les chiffres dans les champs voisins. Si vous adoptez la méthode des chiffres, il faut penser à cliquer ensuite sur la petite icône représentant une disquette à droite de l’intitulé de colonne ORDRE afin de faire prendre en compte la modification.

Figure 7.5 Gestionnaire d’élément de menu > Menu principal Main Menu.

La colonne ACCÈS permet par clics successifs de basculer l’élément entre l’état public, l’état de réservation aux utilisateurs enregistrés (Enregistré) ou la limitation d’accès au groupe d’utilisateurs particuliers (Spécial). En fonction des droits d’accès, le visiteur verra ou ne verra pas certains éléments de menus.

7.2.1 Le bouton Menus

Ce bouton permet tout simplement de revenir à la vue globale du menu concerné.

7.2.2 Le bouton Défaut

Dans le menu principal, l’élément qui contient une étoile jaune dans sa ligne est celui qui sera affi ché
en guise de bienvenue lorsque le visiteur saisit l’adresse URL du site. Par défaut, il s’agit de l’élément
Accueil. Vous pouvez en choisir un autre pour en faire votre page d’accueil. Il suffit de cocher
la case pour sélectionner puis de cliquer sur le bouton DÉFAUT.

7.2.3 Les boutons Publier/Dépublier

Un élément de contenu peut être soit visible, (c’est-à-dire publié), soit invisible (dépublié). Vous
basculez entre les deux états en cliquant sur la coche verte ou la croix rouge. Vous pouvez aussi
sélectionner la ligne puis cliquer sur le bouton approprié en haut à droite. Cette seconde approche
permet d’appliquer l’opération à plusieurs éléments à la fois.

7.2.4 Le bouton Déplacer

Ce bouton permet de déplacer un élément en un autre endroit d’un menu. Prenons le cas de l’élément dont le titre est More about Joomla!. Sélectionnez cette ligne puis cliquez sur le bouton DÉPLACER. Vous voyez apparaître un formulaire présentant tous les menus disponibles. À droite sont présentés les éléments à déplacer (voir Figure 7.6).

Figure 7.6 Menus > Main Menu > Déplacer.

Sélectionnez le menu qui doit devenir le parent de l’élément concerné. Vérifi ez ensuite le résultat
dans la partie publique du site (voir Figure 7.7).

Figure 7.7 Création d’un sousmenu dans Top Menu.

7.2.5 Le bouton Copier

Vous pouvez bien sûr copier un élément de menu. Sélectionnez-le (ou plusieurs) avant d’utiliser le
bouton COPIER. Vous voyez apparaître un formulaire qui présente comme pour le déplacement les
différents menus disponibles. Il suffit de sélectionner le menu destinataire.

7.2.6 Le bouton Corbeille

Pour offrir un peu plus de sécurité, les éléments de menus que vous supprimez ne sont pas immédiatement détruits. Ils sont envoyés dans la Corbeille qui constitue une zone temporaire.
Pour supprimer un élément, sélectionnez-le puis cliquez sur le bouton CORBEILLE. Vous pouvez ensuite visualiser le contenu de la Corbeille des menus au moyen de la commande MENUS > CORBEILLE DE MENU.

7.2.7 Le bouton Éditer (édition d’élément de menu)

Cette commande permet de modifier un menu existant. Prenons comme exemple l’élément intitulé
Web Links. Sélectionnez la ligne appropriée puis cliquez sur le bouton ÉDITER, ou bien cliquez directement sur le nom dans la colonne LIEN DE MENU. Vous voyez apparaître un formulaire d’édition (voir Figure 7.8).

Figure 7.8 Main Menu > Accueil > Éditer.

Ce formulaire compte trois sections :

• Type de l'élément de menu ;
• Détails de l’élément de menu ;
• Paramètres – Basique, Composant, Système.

Type de l’élément de menu

Tout élément de menu possède un type. Nous y reviendrons lors de la création d’un élément de
menu. Un élément peut par exemple faire référence à un composant intégré à Joomla! ou à un
élément de contenu. Il peut aussi représenter un lien menant à un site Web externe, entre autres
choses. Cette section de la page permet de connaître le type du lien. Dans notre exemple, c’est un
lien vers le composant Weblinks de Joomla! (voir Figure 7.9).

Figure 7.9 Édition d’élément de menu > Changer l’élément de menu.

Ce gestionnaire est une nouveauté de la version 1.5 de Joomla!. Dans la version 1.0.x, vous ne
pouviez pas modifier le type des éléments de menu. Il fallait supprimer tous les éléments d’un menu
pour en créer un nouveau. Dorénavant, vous pouvez modifier le type pour chaque catégorie ou pour
un élément de menu, ce qui permet aux visiteurs de proposer de nouveaux liens externes.
Vous pouvez ensuite refermer l’éditeur. Nous y reviendrons lors de la création d’un élément de menu
en fin de chapitre.

Édition d’élément de menu – Détails

ID. Pour que les choses soient bien gérées, elles doivent toutes être identifi ées de façon unique. C’est donc aussi le cas de nos éléments de menu. Dans l’exemple, l’élément possède l’Identifiant 48. La valeur est fournie par Joomla! lors de la création de l’élément. Son usage est purement interne et
vous ne pouvez la modifier.

Titre. C’est le nom du menu tel qu’il apparaît sur le site Web public.

Alias. Il s’agit d’un nom ajouté dans l’adresse URL après le nom de domaine, dans un but d’optimisation par rapport aux moteurs de recherches. Si le mécanisme est activé (revoyez le Chapitre 6 à ce sujet), voici comment se présente l’adresse URL de cet élément de menu :
http://localhost/joomla150/web-links

Figure 7.10 Édition d’élément de menu > Détails.

Lien. Ce paramètre concerne le composant, c’est-à-dire la portion de l’adresse URL qui est située
après le nom de domaine. Dans notre exemple, ce lien s’écrit :

index.php?option=com_weblinks&view=categories

Afficher dans. Cette option modifie le lieu d’apparition de l’élément, ce qui le déplace dans un autre
menu. La liste associée permet de choisir parmi les menus existants.

Élément parent. Vous pouvez bien sûr mettre en place une structure arborescente de menus et sousmenus. Dans la liste, la mention Haut signifie que l’élément va apparaître au plus haut niveau. Les
autres lignes correspondent à des sous-menus. Si nous faisons descendre le lien Web Links pour qu’il soit sous News, l’affichage dans la liste devient celui de la Figure 7.11. Le site Web prend alors l’aspect de la Figure 7.12. Après l’opération, Web Links devient un sous-menu de News. Notez qu’il faut d’abord cliquer sur News pour accéder à ces détails et voir Web Links. Vous pouvez ainsi créer une structure complexe de menus et de sous-menus.

Publié. Permet de rendre l’élément visible ou non.

Ordre. Vous choisissez ici la position de l’élément relativement aux autres.

Niveau d’accès. Vous pouvez décider d’autoriser l’accès à tout le monde, aux utilisateurs enregistrés ou seulement à ceux du groupe spécial.

Figure 7.11 Arborescence dans le Gestionnaire des éléments de menus.

Figure 7.12 Arborescence sur le site Web public.

En cliquant, ouvrir dans. Cette option très pratique permet de choisir de faire apparaître la cible du
lien (de la commande) dans la même fenêtre du navigateur ou dans une nouvelle fenêtre. La nouvelle
fenêtre peut être ouverte avec ou sans éléments de navigation.

Édition d’élément de menu – Paramètres

Les paramètres d’un élément de menu dépendent de son type. Un lien simple contient moins de
paramètres qu’une liste personnalisable ou que le lien de la page d’accueil.

Dans notre exemple, il s’agit d’un lien de catégorie (nous présentons ce type de composants au
Chapitre 9). Pour accéder aux détails d’un volet de paramètres, il suffit de cliquer dans sa ligne de
titre. Vous voyez le petit triangle vert orienté soit à droite, soit vers le bas.

Paramètres – Basique

Ce groupe réunit les paramètres qui s’appliquent à tous les types d’éléments de menu (voir Figure 7.13).

Figure 7.13 Édition d’élément de menu > Paramètres – Basique.

Image. Permet de désigner un fichier d’image qui doit se trouver dans la racine du Gestionnaire de
médias (/images/stories/). En fonction du modèle, l’image sera présentée à côté de l’élément de
menu, dans un format dépendant du modèle en vigueur.

Alignement de l’image. Permet de décider de faire apparaître l’image à gauche ou à droite.
Show a Feed Link (Afficher un lien de fil RSS). Il est devenu possible dans Joomla! 1.5 de générer
un fil d’informations RSS pour chaque affichage de liste. Cette option n’est pas pertinente pour tous
les types de listes. Si cette option est active, des liens de fil RSS sont affi chés dans le navigateur. Ils
contiennent les éléments de la liste.

Paramètres – Composant

Ce sous-groupe de paramètres concerne le composant qui est associé à un lien ou élément de menu.
Dans notre exemple il s’agit du composant nommé Weblinks. Ce composant s’installe en plusieurs
étapes. Après le premier clic, nous voyons apparaître dans notreConfiguration les différentes catégories avec un texte standard (voir Figure 7.14).

Figure 7.14 Les catégories du composant Weblinks dans la partie publique.

En cliquant sur une catégorie, vous voyez apparaître un tableau contenant tous les liens correspondants (voir Figure 7.15).

Vous pouvez intervenir sur les paramètres du composant (voir Figure 7.16).

Description. Permet d’Afficher ou de masquer les titres des catégories.

Intro des liens Web. Permet de saisir un titre spécifique à une entrée (voir Figure 7.17).
Hits (accès). Vous disposez d’un compteur de visites dans une colonne de la liste pour chaque page.
Vous pouvez Afficher ou masquer cette colonne.

Figure 7.15 affichage sous forme de tableau d’une série de liens.

Figure 7.16 Édition d’élément de menu > Paramètres Composant.

Figure 7.17 Exemple de texte personnalisé dans l’affichage d’une catégorie.

Description des liens. Permet d’Afficher ou de masquer la description située sous le lien dans la liste.

Autres catégories. Lorsque vous êtes dans l’affichage sous forme de tableau des liens, vous voyez
apparaître soit le texte standard, soit celui saisi dans les paramètres. Vous trouvez en dessous une
liste de catégories et de sections (s’il y en a d’autres). Cette option permet d’Afficher ou de masquer
cette liste.

En-têtes du tableau. Permet d’Afficher ou de masquer les titres des colonnes du tableau au-dessus
des liens.

Paramètres – Système

Les paramètres réunis dans ce groupe concernent l’aspect du lien de menu. La séparation logique
entre les paramètres basiques et les paramètres système n’est pas toujours facile à comprendre.
Titre de la page. Ce champ permet d’indiquer le texte du titre tel qu’il apparaîtra sur le site Web et
dans le haut du navigateur.

Afficher le titre. Permet d’Afficher ou de masquer le titre.

Suffixe de classe CSS. Ce champ est destiné à recevoir une chaîne de texte spéciale, par exemple mon_elementmenu. Ce texte est ajouté à la fin des noms de classe dans le code HTML généré. Vous devez définir au niveau du fichier des styles CSS une classe portant le même nom pour pouvoir
intervenir sur la présentation du menu concerné.

SSL actif. Permet d’utiliser le protocole de dialogue sécurisé HTTPS. Le mécanisme suppose que
le serveur dispose d’un environnement SSL opérationnel. Dans l’environnement local XAMPP lite,
la sécurisation SSL fonctionne sans problème.

Figure 7.18 Édition d’élément de menu > Paramètres Système.

7.2.8 Bouton Nouveau

Ce bouton sert à créer un nouveau menu, comme nous l’expliquons un peu plus loin.

Cette commande donne accès à une vue globale des menus actuellement définis (voir Figure 7.4).
Vous pouvez accéder aux contenus des sous-menus par l’une des commandes MENUS > MAIN MENU, OTHER MENU, etc. Vous pouvez aussi cliquer directement dans la ligne correspondant au menu désirédans cette vue globale.

Figure 7.4 Menus > Gestion des menus.

Cet affichage global permet d’apprendre quels sont les éléments de menu actuellement visibles
(publiés) ou non (dépubliés). Vous apprenez également le nombre d’éléments qui sont en attente de
suppression dans la corbeille de menu ainsi que l’Identifiant ID de chaque élément.
C’est à ce niveau que vous pouvez par exemple copier un menu ou en créer un nouveau.

La partie publique du site propose plusieurs menus qui se présentent en général sous forme de cadres indépendants réunissant une série de commandes (voir Figure 7.1).

Figure 7.1 Exemple de menu vertical (Main Menu).

Il est cependant possible de créer des menus de listes de commandes horizontales. Ces menus sont
moins fréquents et sont moins aisément reconnus en tant que tels (voir Figure 7.2).

Figure 7.2 Exemple de menu horizontal (Top Menu).

Il existe enfin des menus CSS, avec parfois un effet de transparence. Voici un exemple tiré de
joomlart.com (voir Figure 7.3).

Figure 7.3 Exemple de menu déroulant.

Dans Joomla!, les contenus de ces menus sont extraits à la volée d’une base de données. La gestion
passe, en même temps que celle des objets qui sont liés à ces éléments de menus, par le menu d’administration intitulé MENUS. Les données d’exemples comptent six menus : MAIN MENU, TOP MENU, OTHER MENU, USER MENU, EXAMPLE PAGES et KEY CONCEPTS. Le Top Menu est un menu horizontal, tous les autres étant des menus classiques verticaux. Chaque menu est associé à un module dont la gestion est réalisée au niveau du Gestionnaire des modules (décrit au Chapitre 10).