Comment créer un glossaire juste avec Joomla 4 ?

Comment créer un glossaire juste avec Joomla 4 ?

Pourquoi vouloir créer un glossaire juste avec Joomla?

  • Parce que le contenu de votre glossaire sera géré par Joomla
    Vous pourrez le gérer facilement, comme n'importe quel contenu géré par Joomla. Ajouter et/ou modifier les contenus de votre glossaire sera alors très simple.
  • Car il est inutile d'installer et de maintenir une extension tierce
    Pas d'extension à installer et à maintenir. Pas de courbe d'apprentissage. Oubliez les CCK lourds et autres page builders, vous n'avez besoin que de Joomla.
  • Pour développez vos compétences grâce aux overrides
    Tout ce que vous avez à faire est de suivre ce tutoriel pour créer votre glossaire en quelques minutes. Toutes les étapes y sont clairement expliquées et illustrées.
  • Pour que vous gardiez une complète maîtrise de votre SEO
    Parce que votre glossaire est construit avec com_content, vous pourrez gérer facilement chaque balise title et meta description suivant vos objectifs.
  • et parce que Joomla est gratuit pour tous et pour toujours.
    Grâce à la magie de Joomla, créer ce puissant et élégant glossaire est gratuit et vous n'aurez jamais de licence à payer par la suite.

La structure du glossaire

Très simplement, un glossaire est une liste de mots affichés et groupés par ordre alphabétique (comme un dictionnaire).

Une fois que nous avons défini cela, il est plus simple de comprendre comment nous allons créer notre glossaire avec Joomla :

  • chaque lettre initale est une catégorie
  • un mot est le titre d'un article
  • une definition est le contenu de l'article

Afin de pouvoir gérer notre glossaire plus facilement, nous créons d'abord une première catégorie d'articles que l'on nommera "Glossaire" et pour chaque lettre de l'alphabet (A, B, C, D, E, etc.), nous créons autant de catégories enfants qu'il y a de lettres. La structure des catégories devrait ressembler à cela :

Glossaire override

Ensuite, nous ajoutons notre contenu en créant tous les articles de notre glossaire en veillant à bien affecter les articles aux catégories concernées : les articles dont les mots commençant par la lettre A seront rangés dans la catégorie enfant A.

Glossaire override

Affichons maintenant notre glossaire

Dans cet exemple, les initiales, les mots et les définitions sont affichés sur une seule et même page. L'utilisateur aura simplement à lire pour avoir accès à l'information. C'est très basique et c'est un mode de conception à envisager si vous n'avez pas beaucoup de mots et de définitions à afficher dans votre glossaire.

Pour réaliser cela, nous deons afficher tout le contenu sur une page. Donc, nous allons créer un lien de menu "Article", puis un module "Articles - categorie" pour afficher notre glossaire et enfin, nous ferons une override de ce module pour obtenir le desgin escompté.

Créer le lien de menu
  1. Depuis le panne de contrôle de Joomla, cliquez sur Menus dans le menu de gauche.

    Créer un lien de menu
  2. Sélectionnez votre menu et cliquez sur l'icône + pour créer un nouveau lien de menu.

    Création d'un lien de menu
  3. Indiquez le titre de votre lien de menu (p.ex: Glossaire) et si besoin, personnalisez son alias.

  4. Dans Type de lien de menu *, cliquez sur le bouton bleu Sélection pour sélectionner Articles puis Article.

  5. Dans Sélectionner un article *, cliquez sur le bouton + Créer.

  6. Renseignez les informations nécessaires pour votre article. Dans l'exemple, l'article ne continet qu'un bref texte d'introduction.

  7. Réglez les paramètres de l'article et du lien de menu selon vos besoins. Maintenant, vous dveriez obtenir ceci:

    Joomla 4 - Lien de menu créé
  8. Lorsque vous avez terminé, cliquez sur le bouton Enregistrer et fermer.

Créer le module
  1. Depuis le panneau de contrôle de Joomla, cliquez sur l'icône + icon affichée à côté de Module.

    Joomla - Module creation
  2. Dans la liste, sélectionnez le module Articles - Categorie.

    Joomla - Module articles category creation
  3. Indiquez un titre pour votre module (p.ex: Glossaire).

  4. Dans l'onglet Assignation des menus, sélectionnez le lien de menu que vous avez créé à l'étape précédente.

  5. Dans l'onglet Options de filtrage, réglez les paramètres comme suit :

    • Nombre: 0 (tous les articles doivent être affichés)

    • Filtre de catégorie: inclure

    • Catégorie: sélectionnez la catégorie parente Glossaire (si vous l'avez nommé ainsi).

    • Catégories enfants: inclure

    • Niveaux de catégorie: 1

    • Les autres paramètres de cet onglet ne sont pas utilisés.

    Joomla - Module articles category filtering options
  6. Dans l'onglet Ordre d'affichage, nous allons ordonner nos articles alphabétiquement. Règlez les paramètres comme suit :

    • Champ de tri: Titre

    • Sens du tri: Ascendant

  7. Dans l'onglet Options de regroupement, nous allons ordonner nos initales alphabétiquement. Règlez les paramètres comme suit :

    • Regroupement: Catégorie

    • Sens de regroupement: Ascendant

  8. Dans l'onglet Options d'affichage, il faut autoriser l'affichage du texte d'introduction sans limites de caractères :

    • Introduction: Afficher

    • Caractères maximum: 0

  9. Enfin, affichez votre module dans une position du template qui soit en dessous de l'article ou en dessous de la partie composant de votre template.

  10. Lorsque vous avez terminé, cliquez sur le bouton Enregistrer et fermer.

Découvrir les overrides de Joomla

Si vous avez besoin d'inspiration ou de conseils sur les overrides de Joomla, voici plus de +50 exemples gratuits pour vous aider et vous inspirer.

Joomla Overrides
Créer l'override

C'est le point le plus technique de ce tutoriel mais pas de panique, vous allez voir que c'est assez simple :)

  1. Depuis le panneau de contrôle, cliquez sur Systèm dans le menu de gauche.

  2. Dans la partie dédiée aux templates, cliquez sur Site Templates.

  3. Cliquez sur votre template (Cassiopeia, dans notre exemple).

  4. Cliquez sur l'onglet Créer des substitutions.

  5. Dans la liste des modules, cliquez sur mod_articles_category.

  6. Dans la liste de gauche sont affichés les dossiers et les fichiers de votre template. Cliquez sur html puis sur mod_articles_category.

    Ici, vous avez deux fichiers:

    • default.php

    • default_items.php

    Je vous conseille fortement de faire des copies de ces 2 deux fichiers en utilisant le bouton Nouveau fichier et de nommer vos 2 nouveaux fichiers comme ceci :

    • glossaire.php

    • glossaire_item.php

    Template folder structure

    Les contenus des fichiers default.php et default_items.php doivent être exactement les mêmes que glossary.php et glossary_item.php, seuls les noms doivent être differents.

  7. Cliquez sur le fichier glossaire.php pour l'ouvrir dans l'éditeur.

    1. A la ligne 21, ajoutez les classes CSS suivantes à la balise <ul> : list-unstyled blog-items columns-3

    2. A la ligne 24,ajouter la classe CSS suivante dans la balise <li> : p-3

    3. Remplacez la ligne 25 par ce code:

      <div class="mod-articles-category-group"><h3><?php echo Text::_($groupName); ?></h3></div><hr>
    4. Aux lignes 27 et 33, remplacez _items par _item.

  8. Template files editor
  9. Cliquez sur le bouton Enregistrez.

Explications à propos de ces modifications
  • List-unstyled
    Parce que nous ne voulons pas que notre liste s'affiche avec des puces, cette classe CSS va les supprimer.
  • blog-items columns-2
    Nous utilisons ces nouvelles classes CSS propres à Joomla pour afficher notre glossaire sur 2 colonnes. Notez que les classes CSS columns-2 et columns-4 sont aussi disponibles si besoin.
  • P-3
    Cette classs va ajouter du padding tout autour de l'article. Plus d'informations à propos du padding dans la documentation de Bootstrap
La dernière étape...

Maintenant, revenez au module que vous avez créé à létape précédente.

Ouvrez-le et dans l'onglet Paramètres avancés sélectionnez Glossary pour le type de mise en page.

Joomla - Module parameter

Une fois que c'est fait, cliquez sur le bouton Enregistrez et fermer.

Maintenant, votre glossaire doit ressembler à ceci :

Joomla Glossary Override

Améliorations possibles

Si vous avez besoin de créer un glossaire plus important, il serait sans doute plus prudent d'éviter un très long scroll à vos visiteurs. Dans ce cas, vous pourriez considérer une de ces deux solutions.

  1. Collapse. Cette classe JavaScript native de Bootstrap vous permet de jouer avec la visibilité de n'importe quel contenu. Avec cette classe, vous pouvez choisir de n'afficher un élement (la definition, pas exemple) qu'après le clic de l'utilisateur. Plus d'informations ici : Bootstrap Collapse. Dans le cas où vous souhaiteriez l'utilisez dans votre override, n'oubliez pas de paramétrer votre module en consèquence.
  2. Une définition par page. Vous pouvez également décider de n'afficher que les mots sur la page de votre glossaire. L'utilisateur doit alors cliquer sur le mot pour lire la definition dans une nouvelle page. Cette option est à considérer si vous avez beaucoup de mots (et de définitions) et/ou si vous souhaitez pouvoir optimisez plus finement le référencement de chaque terme de votre glossaire.
  3. Voir le résultat

Le Joomla Override Challenge

En partenariat avec Viviana Menzel, nous avons créé le non-officiel Joomla Override Challenge. Notre objectif est de créer chaque mois, une nouvelle override basée sur une extension native de Joomla ou sur un projet. Si vous souhaitez participer, n'hésitez pas à contacter Viviana ou moi :)

Pourquoi vouloir créer un glossaire juste avec Joomla?

  • Parce que le contenu de votre glossaire sera géré par Joomla
    Vous pourrez le gérer facilement, comme n'importe quel contenu géré par Joomla. Ajouter et/ou modifier les contenus de votre glossaire sera alors très simple.
  • Car il est inutile d'installer et de maintenir une extension tierce
    Pas d'extension à installer et à maintenir. Pas de courbe d'apprentissage. Oubliez les CCK lourds et autres page builders, vous n'avez besoin que de Joomla.
  • Pour développez vos compétences grâce aux overrides
    Tout ce que vous avez à faire est de suivre ce tutoriel pour créer votre glossaire en quelques minutes. Toutes les étapes y sont clairement expliquées et illustrées.
  • Pour que vous gardiez une complète maîtrise de votre SEO
    Parce que votre glossaire est construit avec com_content, vous pourrez gérer facilement chaque balise title et meta description suivant vos objectifs.
  • et parce que Joomla est gratuit pour tous et pour toujours.
    Grâce à la magie de Joomla, créer ce puissant et élégant glossaire est gratuit et vous n'aurez jamais de licence à payer par la suite.

La structure du glossaire

Très simplement, un glossaire est une liste de mots affichés et groupés par ordre alphabétique (comme un dictionnaire).

Une fois que nous avons défini cela, il est plus simple de comprendre comment nous allons créer notre glossaire avec Joomla :

  • chaque lettre initale est une catégorie
  • un mot est le titre d'un article
  • une definition est le contenu de l'article

Afin de pouvoir gérer notre glossaire plus facilement, nous créons d'abord une première catégorie d'articles que l'on nommera "Glossaire" et pour chaque lettre de l'alphabet (A, B, C, D, E, etc.), nous créons autant de catégories enfants qu'il y a de lettres. La structure des catégories devrait ressembler à cela :

Glossaire override

Ensuite, nous ajoutons notre contenu en créant tous les articles de notre glossaire en veillant à bien affecter les articles aux catégories concernées : les articles dont les mots commençant par la lettre A seront rangés dans la catégorie enfant A.

Glossaire override

Affichons maintenant notre glossaire

Dans cet exemple, les initiales, les mots et les définitions sont affichés sur une seule et même page. L'utilisateur aura simplement à lire pour avoir accès à l'information. C'est très basique et c'est un mode de conception à envisager si vous n'avez pas beaucoup de mots et de définitions à afficher dans votre glossaire.

Pour réaliser cela, nous deons afficher tout le contenu sur une page. Donc, nous allons créer un lien de menu "Article", puis un module "Articles - categorie" pour afficher notre glossaire et enfin, nous ferons une override de ce module pour obtenir le desgin escompté.

Créer le lien de menu
  1. Depuis le panne de contrôle de Joomla, cliquez sur Menus dans le menu de gauche.

    Créer un lien de menu
  2. Sélectionnez votre menu et cliquez sur l'icône + pour créer un nouveau lien de menu.

    Création d'un lien de menu
  3. Indiquez le titre de votre lien de menu (p.ex: Glossaire) et si besoin, personnalisez son alias.

  4. Dans Type de lien de menu *, cliquez sur le bouton bleu Sélection pour sélectionner Articles puis Article.

  5. Dans Sélectionner un article *, cliquez sur le bouton + Créer.

  6. Renseignez les informations nécessaires pour votre article. Dans l'exemple, l'article ne continet qu'un bref texte d'introduction.

  7. Réglez les paramètres de l'article et du lien de menu selon vos besoins. Maintenant, vous dveriez obtenir ceci:

    Joomla 4 - Lien de menu créé
  8. Lorsque vous avez terminé, cliquez sur le bouton Enregistrer et fermer.

Créer le module
  1. Depuis le panneau de contrôle de Joomla, cliquez sur l'icône + icon affichée à côté de Module.

    Joomla - Module creation
  2. Dans la liste, sélectionnez le module Articles - Categorie.

    Joomla - Module articles category creation
  3. Indiquez un titre pour votre module (p.ex: Glossaire).

  4. Dans l'onglet Assignation des menus, sélectionnez le lien de menu que vous avez créé à l'étape précédente.

  5. Dans l'onglet Options de filtrage, réglez les paramètres comme suit :

    • Nombre: 0 (tous les articles doivent être affichés)

    • Filtre de catégorie: inclure

    • Catégorie: sélectionnez la catégorie parente Glossaire (si vous l'avez nommé ainsi).

    • Catégories enfants: inclure

    • Niveaux de catégorie: 1

    • Les autres paramètres de cet onglet ne sont pas utilisés.

    Joomla - Module articles category filtering options
  6. Dans l'onglet Ordre d'affichage, nous allons ordonner nos articles alphabétiquement. Règlez les paramètres comme suit :

    • Champ de tri: Titre

    • Sens du tri: Ascendant

  7. Dans l'onglet Options de regroupement, nous allons ordonner nos initales alphabétiquement. Règlez les paramètres comme suit :

    • Regroupement: Catégorie

    • Sens de regroupement: Ascendant

  8. Dans l'onglet Options d'affichage, il faut autoriser l'affichage du texte d'introduction sans limites de caractères :

    • Introduction: Afficher

    • Caractères maximum: 0

  9. Enfin, affichez votre module dans une position du template qui soit en dessous de l'article ou en dessous de la partie composant de votre template.

  10. Lorsque vous avez terminé, cliquez sur le bouton Enregistrer et fermer.

Découvrir les overrides de Joomla

Si vous avez besoin d'inspiration ou de conseils sur les overrides de Joomla, voici plus de +50 exemples gratuits pour vous aider et vous inspirer.

Joomla Overrides
Créer l'override

C'est le point le plus technique de ce tutoriel mais pas de panique, vous allez voir que c'est assez simple :)

  1. Depuis le panneau de contrôle, cliquez sur Systèm dans le menu de gauche.

  2. Dans la partie dédiée aux templates, cliquez sur Site Templates.

  3. Cliquez sur votre template (Cassiopeia, dans notre exemple).

  4. Cliquez sur l'onglet Créer des substitutions.

  5. Dans la liste des modules, cliquez sur mod_articles_category.

  6. Dans la liste de gauche sont affichés les dossiers et les fichiers de votre template. Cliquez sur html puis sur mod_articles_category.

    Ici, vous avez deux fichiers:

    • default.php

    • default_items.php

    Je vous conseille fortement de faire des copies de ces 2 deux fichiers en utilisant le bouton Nouveau fichier et de nommer vos 2 nouveaux fichiers comme ceci :

    • glossaire.php

    • glossaire_item.php

    Template folder structure

    Les contenus des fichiers default.php et default_items.php doivent être exactement les mêmes que glossary.php et glossary_item.php, seuls les noms doivent être differents.

  7. Cliquez sur le fichier glossaire.php pour l'ouvrir dans l'éditeur.

    1. A la ligne 21, ajoutez les classes CSS suivantes à la balise <ul> : list-unstyled blog-items columns-3

    2. A la ligne 24,ajouter la classe CSS suivante dans la balise <li> : p-3

    3. Remplacez la ligne 25 par ce code:

      <div class="mod-articles-category-group"><h3><?php echo Text::_($groupName); ?></h3></div><hr>
    4. Aux lignes 27 et 33, remplacez _items par _item.

  8. Template files editor
  9. Cliquez sur le bouton Enregistrez.

Explications à propos de ces modifications
  • List-unstyled
    Parce que nous ne voulons pas que notre liste s'affiche avec des puces, cette classe CSS va les supprimer.
  • blog-items columns-2
    Nous utilisons ces nouvelles classes CSS propres à Joomla pour afficher notre glossaire sur 2 colonnes. Notez que les classes CSS columns-2 et columns-4 sont aussi disponibles si besoin.
  • P-3
    Cette classs va ajouter du padding tout autour de l'article. Plus d'informations à propos du padding dans la documentation de Bootstrap
La dernière étape...

Maintenant, revenez au module que vous avez créé à létape précédente.

Ouvrez-le et dans l'onglet Paramètres avancés sélectionnez Glossary pour le type de mise en page.

Joomla - Module parameter

Une fois que c'est fait, cliquez sur le bouton Enregistrez et fermer.

Maintenant, votre glossaire doit ressembler à ceci :

Joomla Glossary Override

Améliorations possibles

Si vous avez besoin de créer un glossaire plus important, il serait sans doute plus prudent d'éviter un très long scroll à vos visiteurs. Dans ce cas, vous pourriez considérer une de ces deux solutions.

  1. Collapse. Cette classe JavaScript native de Bootstrap vous permet de jouer avec la visibilité de n'importe quel contenu. Avec cette classe, vous pouvez choisir de n'afficher un élement (la definition, pas exemple) qu'après le clic de l'utilisateur. Plus d'informations ici : Bootstrap Collapse. Dans le cas où vous souhaiteriez l'utilisez dans votre override, n'oubliez pas de paramétrer votre module en consèquence.
  2. Une définition par page. Vous pouvez également décider de n'afficher que les mots sur la page de votre glossaire. L'utilisateur doit alors cliquer sur le mot pour lire la definition dans une nouvelle page. Cette option est à considérer si vous avez beaucoup de mots (et de définitions) et/ou si vous souhaitez pouvoir optimisez plus finement le référencement de chaque terme de votre glossaire.
  3. Voir le résultat

Le Joomla Override Challenge

En partenariat avec Viviana Menzel, nous avons créé le non-officiel Joomla Override Challenge. Notre objectif est de créer chaque mois, une nouvelle override basée sur une extension native de Joomla ou sur un projet. Si vous souhaitez participer, n'hésitez pas à contacter Viviana ou moi :)

Daniel Dubois - auteur à web-eau.net

A propos de Daniel

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort de son expérience, il partage ses connaissances dans un état d'esprit open source. Très impliqué en faveur du CMS Joomla depuis 2014, il est également conférencier et fondateur du Joomla User Group Breizh.

web-eau.net

29800 Landerneau

06 74 50 27 99

daniel@web-eau.net