Pourquoi et comment adapter Joomla à ses clients ?

L'expérience utilisateur est aujourd'hui un facteur essentiel et grâce à cela, la majorité des créateurs de site Web prennent grand soin de la partie visible du site et du parcours des visiteurs du site. Seulement, un site Web construit avec un CMS comme Joomla possède également une partie 'administration' et si vous vous souciez du bien-être de vos clients, alors cette interface doit également mériter toute votre attention.

C'est ce que je vous propose de voir en détail aujourd'hui.

Pourquoi améliorer l'expérience utilisateur sur le panneau d'administration de Joomla 4 ?

En lisant cette question, vous pourriez penser que je remet en cause les qualités natives du panneau d'administration de Joomla 4. Pas du tout ! S'il y a bien quelques détails qui mériteraient d'être revus, je trouve Atum (le template d'administration) très clair et très accessible dans son ensemble. Aussi et pour éviter toute ambiguïté, j'aurais sans doute dû dire adapter au lieu d'améliorer.

Découvrir un nouvel environnement est très souvent une période délicate pour l'utilisateur. Si vous avez déjà changé de système d'exploitation sur votre ordinateur (iOs, Linux ou Windows) ou sur votre mobile (iOs, Android, BlackBerry, etc.), vous savez de quoi je parle. Il faut parfois plusieurs jours d'adaptation pour retrouver ses marques.

Dans le Web, c'est exactement pareil. Quand un client nous contacte pour faire ou refaire son site Web, il arrive parfois qu'il faille changer de CMS (Wordpress, Drupal, joomla, etc.) et cette étape est peut être la plus crispante pour nos client/es. Il est de notre responsabilité de les accompagner en douceur dans ce changement.

Si nous obligeons nos clients à effectuer des actions dont ils ne veulent pas ou dont ils n'ont pas besoin, nous perdrons ces clients à coup sûr. Qui plus est, cela donnera une mauvaise image de Joomla qui n'y est pour rien.

D'après mon expérience de webmaster, il y a - au moins - 2 choses que nos clients n'aiment vraiment pas :

• Réfléchir: ne me faites pas dire ce que je n'ai pas dit puisqu'on parle ici d'expérience utilisateur. En effet, la couche utilisateur doit être la plus simple et la plus soignée possible. Si nos clients ont besoin de plusieurs minutes à trouver où ils doivent aller pour ajouter un nouvel article, nous perdrons ces clients tôt ou tard. Faire simple ne veut pas dire simpliste car il suffit d'offrir une interface adapté à l'utilisateur pour lui offrir une expérience réussie.
• Cliquer: là aussi, il faut offrir aux utilisateurs du panneau d'administration, une navigation qui soit la plus rapide et la plus intuitive possible. Mes clients sont des professionnels et ils n'ont pas de temps à perdre à cliquer sans arret dans leur site web pour effectuer une opération banale. Il est grand temps - et notre reponsabilité - de donner enfin à nos clients les sites Web qu'ils méritent.

Dans le même ordre d'idées, je conseille de limiter l'emploi de composants compliqués et aux interfaces alambiquées au possible. Croyez-vous que ce soit encore à l'utilisateur de s'adapter à l'outil ? Pensez-vous que vos clients ont envie de se former pour se servir d'un outil pour ajouter des articles ou pour gérer leurs contenus ? Non.
Aussi, n'installez sur le site de vos clients uniquement ce qui est réellement nécessaire, sans plus.

Par ailleurs, je vois parfois passer sur les réseaux sociaux, des critiques à propos du panneau d'administration de Joomla. Même si ces critiques visent probablement les anciennes versions du CMS, ce n'est pas Joomla qui est en cause ici mais plutôt:

• la personne qui découvre ou qui n'utilise que très rarement Joomla, car elle aura une expérience dégradée du fait de sa méconnaissance du CMS
• la personne qui a créé le site car il/elle n'a peut-être pas pris la peine d'adapter le panneau d'administration du site à l'utilisateur final

Car oui, c'est bien de ça dont il sagit ici.
Tout comme nous adaptons le template frontal à la charte graphique de notre client, nous devons également adapter l'administration des sites que nous créons pour nos clients afin de leur offrir une expérience qui soit la plus adaptée à leurs besoins. Tout cela doit être intuitif et fluide et la bonne nouvelle, c'est que nous pouvons avoir tout ceci nativement grâce à Joomla 4.

Comment améliorer l'expérience utilisateur des clients sur l'administration de Joomla 4 ?

Joomla 4 est disponible depuis août 2021 et cette nouvelle version du célèbre CMS étrenne pour l'occasion, un tout nouveau panneau d'administration complètement repensé. Tableaux de bord, barres latérales et icônes rapides, quel changement par rapport à Joomla 3! Pour les développeurs et les intégrateurs, nous pouvons tirer pleinement parti de toutes ces fonctionnalités, mais nos clients peuvent se sentir dépassés par toutes ces options disponibles par défaut pour les super utilisateurs :

Cela fait beaucoup d'informations et très franchement, nos clients n'ont généralement pas besoin de voir tout cela et d'accéder à certaines parties.

À la fin de cet article, nous aurons un backend rationalisé et optimisé pour nos clients où toutes leurs tâches les plus courantes seront à portée de main... et tout ce qu'ils n'ont pas besoin de voir sera caché.

Cet article passe en revue les bases de l'ajout d'un groupe d'utilisateurs personnalisé et du niveau d'accès à la vue pour vos clients afin que vous puissiez contrôler avec précision ce qu'ils voient. C'est à peu de chose près identique à Joomla 3, donc si vous êtes déjà à l'aise avec ces notions, n'hésitez pas à passer à la partie suivante.

Utilisateurs, groupes d'utilisateurs et affichage des niveaux d'accès dans l'administration de Joomla

Vous le savez, Joomla est très puissant et vous permet de contrôler très finement les autorisations des utilisateurs. Si vous avez quelques difficultés avec les différents termes et notions sur ce sujet, voici une introduction rapide (ou une piqure de rappel).

Un utilisateur est un accès individuel. Chaque personne doit avoir son propre utilisateur ; un compte utilisateur ne doit pas être partagé entre plusieurs personnes pour des raisons évidentes de sécurité.

Un groupe d'utilisateurs est... un groupe d'utilisateurs. Les groupes d'utilisateurs déterminent ce qu'un utilisateur peut faire. Un utilisateur peut appartenir à plusieurs groupes d'utilisateurs. Joomla est configuré nativement avec des groupes d'utilisateurs prédéfinis pour plus de commodité :

Comme vous pouvez le constater, les groupes d'utilisateurs sont imbriqués les uns dans les autres et s'appuient les uns sur les autres. Ainsi, par exemple, "Enregistré" a des autorisations de base, "Auteur" a toutes ces autorisations plus quelques autres, "Éditeur" a les mêmes autorisations que "Auteur" plus d'autres, et ainsi de suite.

Les "super utilisateurs" peuvent tout faire sur le site ; leurs autorisations ne peuvent pas être restreintes. Il est préférable d'avoir le moins de "super utilisateurs" possible et de désactiver régulièrement les comptes "super utilisateur" inactifs.

Enfin, les niveaux d'accès déterminent ce que les utilisateurs peuvent voir, en fonction de leur groupe d'utilisateurs. Comme les groupes d'utilisateurs, Joomla est livré avec plusieurs niveaux d'accès préconfigurés pour plus de commodité :

Les groupes d'utilisateurs peuvent être affectés à plusieurs niveaux d'accès. Avant de charger une page dans le front ou le back-end, Joomla vérifie si l'utilisateur est connecté, à quels groupes d'utilisateurs il appartient et s'il dispose d'un niveau d'accès lui permettant de visualiser le contenu de la page.

D'accord mais qu'est-ce que cela implique pour nos clients?

Eh bien, vous pouvez commencer avec l'un des groupes d'utilisateurs par défaut si vous le souhaitez - le niveau "gestionnaire" étant probablement le plus proche des besoins standards - mais dans cet exemple, nous allons créer un groupe utilisateur de zéro afin de pouvoir comprendre le mécanisme et pouvoir le modifier au fur et à mesure.

Création d'un groupe d'utilisateurs personnalisé et d'un niveau d'accès

Étape 1 : Créez un nouveau groupe d'utilisateurs.

Dans le menu latéral de gauche, allez dans Utilisateurs > Groupes, puis cliquez sur le bouton Nouveau.

Indiquez le nom du nouveau groupe d'utilisateurs. Dans cet exercice, nous utiliserons "Client". Assurez-vous que le groupe parent est "Public", afin que nous partions d'une feuille vierge au niveau des autorisations. Ensuite, cliquez sur le bouton le bouton Enregistrer et fermer.

Étape 2 : Créez un nouveau niveau d'accès et ajoutez-y votre nouveau groupe d'utilisateurs.

Dans le menu latéral de gauche, allez dans Utilisateurs > Niveaux d'accès, puis cliquez sur le bouton Nouveau.

Nommez le niveau d'accès dans le premier onglet. Pour faire simple, nous allons utiliser le même nom que le groupe d'utilisateurs que nous venons de créer à l'étape précédente : "Client".

Dans le deuxième onglet, cochez le groupe d'utilisateurs "Client" pour l'ajouter à ce niveau, puis cliquez sur le bouton Enregistrer et fermer.

Concrétement, cela signifie que seuls les membres du groupe clients pourront voir tout ce qui est défini sur le niveau d'accès Client ; personne d'autre, pas même les super utilisateurs, ne le verra. Dans la plupart des cas, c'est une bonne pratique car cela vous permet de créer des modules réservés à vos clients sans encombrer votre propre interface.

Cependant, il peut y avoir des situations où vous voudrez afficher des éléments à la fois aux clients et aux super utilisateurs. C'est ce que nous allons voir maintenant.

Étape 3 : Ajoutez le groupe d'utilisateurs Client au niveau d'accès Spécial.

De retour dans la liste des niveaux d'accès, cliquez sur Spécial pour l'éditer.

Ouvrez le second onglet et assurez-vous de cocher Client.

Sauvegarder et fermer.

Désormais, tout ce qui dispose d'un accès Spécial sur le site sera vu à la fois par les utilisateurs Client et les super utilisateurs (ainsi que par les gestionnaires et les auteurs, par défaut).

Accorder les droits appropriés au nouveau groupe d'utilisateurs

Nous avons créé un groupe d'utilisateurs et un niveau d'accès approprié, mais nous ne les avons pas encore utilisés. En effet si nous ajoutons un nouvel utilisateur et que nous l'attribuons au groupe Client, il ne pourra pas se connecter au site ! Nous allons nous occuper de cela maintenant.

Accéder à la configuration globale et mettre à jour les autorisations

Dans Joomla 4, le moyen le plus rapide pour faire cela est d'ouvrir le panneau d'administration et de cliquer sur l'icône de configuration globale.

Cliquez sur Droits, puis cliquez sur Client. Vous verrez tout de suite que tout est hérité, ce qui veut dire que rien n'est permis.

Sélectionnez les paramètres qui correspondent à vos besoins. Pour cet exemple, nous autorisons les utilisateurs Client à "Connexion administrateur", "Interface d'administration d'accès" et "Modifier la valeur du champ personnalisé" et laissons le reste tel quel.

Cliquez simplement sur "Enregistrer dans la barre d'outils, et non sur Enregistrer et fermer. En effet, il est plus facile de mettre à jour les autorisations pour les autres composants ici au lieu d'ouvrir chaque composant individuellement.

Mettre à jour les droits d'utilisation des composants (si nécessaire)

Il n'y a pas de cas général car cela dépend vraiment des composants installés sur le site. Donc nous ne détaillerons pas chaque composant ici. Tout comme les autorisations globales, vous devez cliquer sur le nom du composant, cliquer sur l'onglet Autorisations, puis les mettre à jour si nécessaire afin que les utilisateurs Client disposent des accès dont ils ont besoin et uniquement ceux-là.

À titre d'exemple, voici comment vous pouvez configurer les droits pour les Articles:

Je vous recommande de vérifier les droits de chaque composant installé avant d'aller plus loin. N'oubliez pas que si vous ne souhaitez pas que le client puisse accéder à un composant, il vous suffit de définir les droits pour Accès à l'interface d'administration sur Refusé.

Ajout d'un utilisateur client de test dans Joomla 4

À ce stade, je vous recommande de créer un utilisateur factice au groupe Client afin de pouvoir vérifier et s'assurer que tout fonctionne comme prévu.

Étape 1 : Depuis le panneau d'administration, cliquez sur Utilisateurs dans la section Site, puis cliquez sur l'icône + à côté de gérer pour créer un nouvel utilisateur.

Si vous préférez ne pas utiliser l'icône rapide, vous pouvez également cliquer sur "Gérer", puis sur "Nouveau".

Étape 2 : Remplissez les informations du faux compte.

Pour l'identifier immediatement, vous pouvez par exemple écrire son nom en lettres majuscules. Comme il ne s'agit pas d'un vrai compte, vous pouvez utiliser une fausse adresse e-mail et saisir un mot de passe très basique.

Assurez-vous de noter l'identifiant et le mot de passe car vous en aurez besoin pour vous connecter ultérieurement.

Étape 3 : Dans le deuxième onglet, cochez le groupe d'utilisateurs "Client".

Par défaut, Joomla attribue également les nouveaux utilisateurs au groupe Enregistré. Par souci de simplicité, je le supprime mais c'est facultatif dans le cas présent.

Sauvegarder et fermer.

Ca y est, c'est déjà terminé!
Vous pouvez maintenant ouvrir une fenêtre privée dans votre navigateur et vous connecter en tant qu'utilisateur Client avec votre faux compte afin de vérifier que tout est conforme à ce que vous attendez.

Pour aller un peu plus loin

L'article Explore the core! The Joomla 4 Dashboard de Viviana Mentzel explore le panneau d'administration de Joomla 4 et aborde les bases de l'ajout de nouveaux modules.

L'article Joomla 4: Customising Admin Dashboards de Patrick Jackson explique comment customiser le panneau d'administration de Joomla 4.

Dans la partie suivante, nous allons voir comment modifier l'écran d'accueil du panneau d'administration de Joomla 4 pour l'adapter aux couleurs de vos clients, comment créer un menu d'administration personnalisé pour vos clients, comment ajouter des pages de tableau de bord personnalisées et comment affiner l'expérience utilisateur de vos clients avec Joomla 4.

Nous avons maintenant la possibilité de contrôler totalement l'expérience d'édition de nos utilisateurs Client, bien au-delà de ce que nous pouvions faire avec le panneau d'administration de Joomla 3. Dans cette deuxième partie, nous allons voir comment customiser l'écran d'accueil du backend, comment configurer un profil client dans l'éditeur de texte, comment créer un menu d'administration personnalisé ainsi que la création de pages de tableau de bord à partir de zéro.

Customiser l'écran d'accueil du panneau d'administration de Joomla 4

Modifier l'aspect esthétique de l'administration de Joomla est certes facultatif mais tellement nécessaire si l'on souhaite que nos clients s'approprient leur site Web et se sentent chez eux. Cette adaptation de l'administration de Joomla aux couleurs de vos clients évite les crispations évoquées en introduction d'autant qu'elle est devenue une quasi formalité comparé à Joomla 3 !

Étape 1 : Modifier les couleurs du panneau d'administration de Joomla 4

Pour cela, rien de plus simple ! Ouvrez l'onglet Paramètres de couleur dans les réglages du template d'administration Atum.

En changeant les paramètres ici, vous pouvez complétement modifier l'apparence graphique de l'administration de Joomla.
Par exemple, changeons le paramètre Teinte des éléments sombres (fond des liens/boutons) de 214 à 89 puis enregistrez votre modification pour constater immédiatement les effets :

Ainsi, vous constatez toute l'intelligence de la conception de ce template qui vous permet de modifier les couleurs du tableau de bord sans avoir à coder ou à installer une extension tierce. Expérimentez et jouez avec les autres paramètres pour voir ce que vous obtenez. Ajustez-les jusqu'à ce que vous ayez obtenu la gamme chromatique souhaitée.

Étape 2 : Changer les logos du panneau d'administration de Joomla 4

Pour cette partie, vous aurez besoin des nouveaux trois fichiers, de préférence au format vectoriel SVG. Les fichiers vectoriels ne se déforment pas et n'ont pas besoin d'avoir des dimensions fixes comme les fichiers bitmaps (JPG, PNG, GIF, etc.).

• Un fichier login.svg qui sera affiché dans le module de connexion du panneau d'administration de Joomla 4,

  

• Un fichier brand-large.svg qui sera affiché en haut du menu latéral dans le panneau d'administration de Joomla 4,

  

• Un fichier brand-small.svg qui sera affiché en haut du menu latéral lorsque celui-ci est réduit,

  

Maintenant, utilisez votre client FTP et connectez-vous au serveur où est hébergé votre site Joomla 4.

Localisez et ouvrez le dossier media/templates/administrator/atum/images/logos. Vous y trouverez les fichiers suivants :

Supprimez-les ou renommez-les. Puis, téléversez les trois nouveaux fichiers dans ce dossier.

Il vous faudra peut-être vider le cache de votre navigateur mais tous les logos du panneau d'administration de votre site Joomla 4 ont été changés.

Si vous n'avez pas la possibilité d'utiliser des fichiers vectoriels, voici les dimensions conseillées pour ces trois fichiers :

• fichier Logo de connexion : une image horizontale de 180 x 100px de haut est conseillée

• fichier Logo principal : une image horizontale de 100px de haut est conseillée

• fichier Logo miniature : une image carrée d'au moins 100px est préférable

Ouvrez votre panneau d'administration Joomla 4 puis dans le menu latéral, cliquez sur Système. Dans la rubrique Templates, cliquez sur Styles des templates de l'administration :

Dans la liste des templates, cliquez sur votre template d'administration (ici, nous supposerons que vous utilisez Atum) :

Ouvrez l'onglet Images du logo où vous trouvez trois rubriques correspondantes aux trois logos :

Logo de connexion

Logo principal du site

Logo miniature du site

Pour personnaliser l'administration du site avec le logo de vos clients, importez chaque nouveau fichier dans sa rubrique respective puis cliquez sur Enregistrer & Fermer.

Création d'un profil d'éditeur simplifié

TinyMCE, l'éditeur de texte par défaut de Joomla, a encore été enrichi pour Joomla 4. L'ensemble des icônes affiché par défaut pour les super utilisateurs peut être écrasant pour nos clients (et pour être honnête, toutes ces icônes me perturbent également!).

Beaucoup d'utilisateurs oublient que TinyMCE prend en charge différents ensembles d'icônes pour différents groupes d'utilisateurs. Et cela rend l'expérience d'édition beaucoup plus simple et plus douce pour les clients.

Depuis le tableau de bord d'accueil, cliquez sur l'icône rapide Plugins dans la rubrique Site.

Vous pouvez également accéder à Système > Gérer > Plugins, mais l'icône rapide est plus rapide.

Dans la barre de recherche, tapez TinyMCE (ou simplement "tiny"), puis sélectionnez Editor - TinyMCE.

Vous devriez voir quelque chose comme ceci:

Il y a 3 ensembles d'icônes, chacun étant assigné à un ou plusieurs groupes d'utilisateurs.
Vous pouvez ajouter ou supprimer des icônes à n'importe quel ensemble ici. En général, je supprime ceux que je n'utilise pas de l'ensemble 0, mais pour le moment concentrons-nous sur l'ensemble 1.

Cet ensemble plus confortable. On pourrait sans doute supprimer certaines icônes, mais pour l'instant, cela est plus simple pour nos clients. Nous allons maintenant assigner l'ensemble 1 au groupe d'utilisateurs Client que nous avons créé précédemment.

Tapez ou sélectionnez Client (ou le nom de votre groupe d'utilisateurs) dans la case à côté de Assigner cet ensemble à.

Apportez les modifications souhaitées aux outils ou à l'ordre des icônes, puis enregistrez votre saisie et refermez le plug-in.

Création d'un menu et éléments de menu personnalisés pour le panneau d'administration

Le menu d'administration par défaut de Joomla 4 convient si votre site gère un seul type de contenus (comme un blog, par exemple). Mais dès que vous commencez à avoir différentes catégories pour différents types de contenu, expliquer à votre client comment modifier les bons éléments peut rapidement devenir compliqué.

C'est là que la création d'un menu d'administration personnalisé peut vraiment s'avérer utile. Vous pouvez créer des liens vers les composants de votre choix et créer des vues précises dont vos clients ont le plus besoin et masquer tout le reste.

Étape 1 : Cliquez sur Menus dans le menu latéral de gauche et sélectionnez Gestion des menus.

Étape 2 : Sélectionnez le menu déroulant qui indique Site et sélectionnez Administration.

Étape 3 : Sélectionnez Nouveau et remplissez les différents champs.

Si vous sélectionnez un préréglage, Joomla créera automatiquement les éléments de menu pour vous en fonction de ce préréglage. Ici, nous commençons à zéro, donc je le laisse sur aucun. Une fois que vous avez terminé, enregistrez et fermez.

Étape 4 : Ajoutez des éléments de menu dans votre menu client.

Vous avez remarqué que lorsque vous cliquez sur Menus dans le menu latéral de gauche, il y a une nouvelle section intitulée Administration contenant le menu que vous venez de créer (fig.34). Cliquez sur le signe à côté pour ajouter un nouvel élément de menu.

Créez un nouvel élément de menu comme vous le faites pour un menu frontal. À titre d'exemple, nous allons créer un élément de menu qui ouvre le panneau d'administration.

Pour le paramètre Type de lien de menu *, cliquez sur le bouton bleu Sélectionnez puis dans la liste des choix possibles, sélectionnez Panneau d'administration. Ajoutez un titre pour votre élément de menu - dans cet exemple, j'ai utilisé l'intitulé Tableau de bord.

En ouvrant le second onglet (Type de lien), vous verrez un champ intitulé Classe d'icône de lien. Ce champ vous permet d'ajouter une icône Font Awesome à votre élément de menu. Bonne nouvelle, Joomla 4 a déjà chargé les icônes gratuites Font Awesome 5 dans le backend. Découvrez toutes les icônes ici.

Dans cet exemple, j'ai décidé d'avoir une icône d'accueil pour le tableau de bord. J'ai donc indiqué fas fa-home comme classe d'icônes. (Notez que vous devez inclure la classe d'icônes de remplissage pour que Joomla sache quelle icône Font Awesome afficher.

Une fois que vous avez terminé votre saisie, cliquez sur le bouton Enregistrer & fermer.

Ajoutez autant d'éléments de menu que nécessaire, puis passez à l'étape suivante.

Étape 5 : Créez un nouveau module de menu.

Nous allons maintenant créer un module de menu pour afficher notre menu Client. Pour cela, cliquez sur Contenus dans le menu latéral de gauche, puis cliquez sur Modules 'administration'.

Avant de créer ce nouveau module de menu, nous allons d'abord masquer celui par défaut à nos clients.

Cliquez sur le bouton bleu Filtres d'affichage, puis cliquez sur le menu déroulant Position pour sélectionner la position de module Menu.

Vous remarquerez que l'accès de ce module est actuellement Spécial. Nous avons au début de cet article que cela signifie que les super utilisateurs ET les clients le verront. Comme nous voulons créer un module de menu uniquement réservé aux utilisateurs Client, nous devrons donc changer cela.

Cliquez sur Admin menu pour le modifier.

Parmi les options de la colonne de droite, trouvez le menu déroulant Accès puis sélectionnez Super Users. Cliquez enfin sur le bouton Enregistrez & fermez.

Nous pouvons maintenant créer un nouveau module de menu réservé aux utilisateurs Client.

Cliquez sur le bouton Nouveau dans la barre d'outils puis dans l'écran suivant, cliquez sur Menu d'administration :

Nommez votre module de menu.

Pour le paramètre Menu à afficher, sélectionnez le menu que nous venons de créer dans la liste déroulante. Assurez-vous de changer Vérifier le menu sur Non, sinon vos utilisateurs Client recevront une notification pour revenir au menu par défaut.

Dans les paramètres de la colonne de droite, repérez la liste déroulante d'accès et sélectionnez le niveau d'accès à la vue Client que nous avons créé précédemment.

Comme nous avions déjà filtré les modules administrateur sur la position menu, assurez-vous que le module est bien sur cette position de module.

Votre écran devrait ressembler à ceci :

Lorsque vous avez terminé, cliquez sur le bouton Enregistrez & fermez.

Ca y est, cette partie est maintenant terminée. Il est temps de vous connecter dans une fenêtre privée avec votre utilisateur client pour vérifier que tout fonctionne comme prévu.

Le client de test doit voir ceci maintenant :

Avant de terminer cette partie, nous allons uniformiser le titre de la page avec l'élement de menu que nous avons créé afin d'éviter une confusion :

Dans le menu latéral de gauche, cliquez sur Système puis cliquez sur Substitutions de traduction dans la rubrique Gestion :

Dans la liste déroulante - Langue & Client -, sélectionnez French (fr-FR) - Administration puis cliquez sur le bouton Nouveau.

Dans la partie Recherche du texte que vous voulez substituer (à droite de votre page), indiquez Panneau d'administration comme valeur et lancez la recherche.

Parmi les résultats, cliquez sur COM_CPANEL_DASHBOARD_BASE_TITLE

Dans la partie Créer une nouvelle substitution (à gauche de votre page), remplacez le texte par celui de votre choix: Tableau de bord dans cet exemple.

Avec votre utilisateur Client rafraîchissez la page d'accueil pour constater que le titre a bien été changé comme attendu :

Bravo, vous savez maintenant adapter le design, ajouter des liens, de nouveaux menus avec des éléments de menu imbriqués, changer les titres pour construire le panneau d'administration parfait et idéalement adapté à vos clients.

Il nous reste une dernière partie à étudier et vous allez voir que cela vous sera très utile pour améliorer l'expérience utilisateur de vos clients.

Création de nouvelles pages pour le panneau d'administration

Les pages du tpanneau d'administration sont totalement nouvelles dans Joomla 4 et utilisent un nouveau composant appelé com_cpanel. C'est ce que vous voyez lorsque vous cliquez sur les petites icônes fenêtre dans le menu d'administration par défaut :

A ma connaissance, il existe 7 pages de tableau de bord principales :

• Panneau d'administration
• Contenus
• Menus
• Composants
• Utilisateurs
• Système
• Aide

Les extensions tierces peuvent également choisir de s'intégrer à com_cpanel et d'afficher leurs propres tableaux de bord.

Ce que vous ne savez peut-être pas, c'est que si vous créez votre propre menu d'administration, vous pouvez également ajouter vos propres pages de tableau de bord, en plus des 7 pages par défaut de Joomla... et cela ne nécessite aucun codage.

C'est super utile car les tableaux de bord de Joomla sont organisés par fonction ou par composant ; cela a du sens pour nous en tant qu'intégrateurs ou créateurs de sites car nous connaissons et comprenons Joomla. Cependant, nos clients ont un modèle mental différent de leur site, et cela dépend probablement de la façon dont le contenu est catégorisé sur le site (plutôt que du type de contenu).

Pour la majorité des clients, et même si les articles d'actualité et les pages du site sont tous deux des "articles", ils voient cela différemment et ce n'est pas intuitif pour eux d'accéder à ces "articles" de la même manière.

Pour résoudre ce scénario hypothétique, nous allons construire un tableau de bord pour la partie "Actualités" du site de notre client.

Etape 1 : Sélectionnez Nouveau pour créer un nouvel élément de menu dans le menu Client.

Etape 2 :Indiquez le titre du menu - "Actualités" dans cet exemple.

Etape 3 : Pour le paramètre type d'élément de menu, cliquez sur le bouton bleu Sélectionner, puis dans la liste, cliquez sur Liens divers et sélectionnez Titre de sous-menu.

Cet élément de menu créera une liste déroulante pour la section, et c'est l'élément de menu que l'icône fenêtre affichera à côté.

Etape 4 : Ouvrez le second onglet Type de liens, faites défiler la page vers le bas et recherchez le paramètre Panneau d'administration.

Et c'est là que la magie commence à opérer. Le texte d'aide indique ici : Si un identifiant est fourni, un tableau de bord sera créé pour cet élément de menu..

Sélectionnez un identifiant avec soin, c'est à dire qu'il ne soit pas identique à celui d'un composant. Il ne doit pas non plus contenir d'espaces ou de caractères spéciaux en dehors des traits de soulignement ou des tirets. Pour plus de sécurité, je vous conseille d'utiliser la syntaxe client-. Donc dans ce cas, utilisons client-actualites.

Enregistrez et fermer l'élément de menu

Ajoutez au moins un élément de menu imbriqué.

Ceci est nécessaire sinon l'en-tête du menu que nous venons de créer ne s'affichera pas. Pour cet exemple, nous allons "lister tous les articles" dans la catégorie "Actualités". Assurez-vous de sélectionner l'en-tête de menu que nous venons de créer en tant qu'"élément parent", comme ceci :

Enregistrez et fermez l'élément de menu.

Maintenant, si nous nous connectons avec notre client de test, nous verrons ce qui suit :

Nous avons réussi mais ce n'est pas encore terminé !

Si vous cliquez sur l'icône Fenêtre en face d'Actualités, vous verrez ce qui suit :

Maintenant, nous pouvons ajouter les modules dont le client aura besoin à cet endroit. Cela permet de créer des tableaux de bord entièrement personnalisés. Enfin presque...

Si vous regardez attentivement l'en-tête supérieur (fig.51), vous constaterez que l'icône d'accueil et la mention Tableau de bord sont présents. Or, nous voulons afficher un titre qui soit en rapport avec le tableau de bord sur lequel se trouve le client !

Ce n'est pas un gros problème et si nous faisons ce travail de personnalisaion et d'adaptation, faisons-le correctement.

De retour dans votre compte super utilisateur, cliquez sur Système puis sur Substitutions de traduction, comme vu précédemment.

Dans le menu déroulant - Langue & Client -, sélectionnez French (fr-FR) - Administration".

N'oubliez pas que vous devrez le faire pour chaque langue dans laquelle vous souhaitez fournir des tableaux de bord personnalisés.

Cliquez sur Nouveau pour créer une nouvelle substitution de langue.

L'icône et le titre sont traités séparément.

Pour définir une icône, votre constante de langage est :

COM_[IDENTIFIER]_DASHBOARD_ICON

Remplacez [IDENTIFIER] par l'identifiant que nous avons créé ci-dessus. Dans ce cas, nous utilisons la constante de langage COM_CLIENT-ACTUALITES_DASHBOARD_ICON.

Dans Texte, mettez les classes Font Awesome de l'icône que vous souhaitez utiliser pour votre titre. Pour avoir la même icône que le menu Actualités, on utilise les classes far fa-newspaper.
Enregistrer et fermer.

Pour définir le titre, votre constante de langue est :

COM_CPANEL_DASHBOARD_[IDENTIFIER]_TITLE

Comme ci-dessus, remplacez [IDENTIFIER] par l'identifiant que nous avons créé. Donc, notre constante de langue est COM_CPANEL_DASHBOARD_CLIENT-ACTUALITES_TITLE.

Dans Texte, ajoutez le titre que vous souhaitez utiliser. Dans cet exemple, j'ai utilisé Gestion des actualités.
Enregistrer et fermer.

Une fois que vous avez ajouté les deux, vous devriez voir quelque chose comme ceci :

Revenons à notre compte client test pour vérifier ce qui s'affiche maintenant...

C'est bien mais ce tableau de bord est un peu... vide, non?

Ajoutons maintenant quelques modules à notre nouveau tableau de bord.

Si vous créez de nouveaux modules à partir du compte client de test, ils pourront les modifier (accidentellement ou pas). Pour éviter cela, revenons à notre compte Super User.

Cliquez sur Contenus dans le menu latéral de gauche, puis sélectionnez l'icône à côté de Modules 'Administration' pour créer un nouveau module.

Sélectionnez un type de modules. Pour cet exemple, je crée un module Personnalisé.

Configurez votre module comme vous le souhaitez. Assurez-vous que sa position soit cpanel-[identifier].

Pour créer cette position de module, vous devrez la saisir manuellement, puis appuyer sur "Entrée" pour l'ajouter. Pour cet exemple, la position est cpanel-client-news.

Enregistrez votre saisie mais ne fermez pas votre module.

Ouvrez maintenant l'onglet Droits puis cliquez sur Client.

Pour éviter que vos utilisateurs Client ne puissent modifier ou dépublier un module, il faut régler leurs permissions en conséquences. En effet, si ils sont autorisés à modifier les modules frontend, ils auront également la permission de modifier les modules d'administration.

Enregistrer et fermer.

Revenons à notre connexion client test et voyons ce qui s'affiche maintenant...

Superbe!

Vous pouvez répéter les étapes ci-dessus autant que nécessaire pour ajouter d'autres modules à ce tableau de bord, ajouter d'autres tableaux de bord pour personnaliser l'administration du site de vos clients et ainsi, améliorer leurs expériences utilisateurs.

Ressources utiles

Pour terminer, je vous partage une série de ressources qui m'ont aidé à rédiger cer aticle et qui vous aideront - je l'espère - à adapter et personnaliser l'administration des sites Joomla de vos clients.

N'hésitez pas à me signaler un lien intéressant à rajouter ou un lien brisé à remplacer.

Articles, liens et tutoriels

1. Templates d'administration pour Joomla 4 - C'est - à ma connaissance - le plus grand annuaire de templates pour Joomla 4. Vous y trouverez naturellement des templates gratuits pour le panneau d'administration.

2. Série de tutoriels sur Atum, le template d'administration de Joomla 4 (FR) par web-eau.net

3. Joomla 4 for Clients, Part 1: Managing Users, Access, & Permissions (EN) par Crystal Dionysopoulos

4. Joomla 4 for Clients, Part 2: Creating a Streamlined Admin Experience (EN) par Crystal Dionysopoulos

5. Joomla 4: Customising Admin Dashboards (EN) par Patrick Jackson

6. Customizing The Joomla Administrator Template (Atum) (EN) par Kevin Olson

Livres

1. Joomla 4 Masterclass

Régidé par Luca Marzo, secrétaire d'Open Source Matters et Joomler bien connu, ce livre est déjà considéré comme la Bible de Joomla 4. Inutile de chercher plus loin si vous souhaitez tout savoir sur le sujet.

Vidéos

1. Transform Your Joomla Projects with Custom Fields and Layout Overrides par Adam Melcher (EN)

2. How to add Custom CSS to the Admin Template of Your Joomla 4 Website par Tim Davis (EN)

3. XiroAdmin Administrator Template for Joomla par Tim Davis (EN)

4. How to Fully Customize the Joomla 4 Admin Login Screen par Bankert Marketing Inc. (EN)

Conclusion

Comme nous l'avons vu au cours de cet article, les possibilités natives de personnalisation sont quasiment infinies. J'espère que cet article vous donnera envie d'adapter l'administration des sites que vous créez pour vos clients afin d'améliorer leur expérience utilisateur.

Bien que chaque cas soit particulier et pour gagner du temps, vous pouvez vous créer un site matrice avec une série de réglages et de paramètres pré-définis que vous utiliserez comme base de départ pour chacun de vos projets.

Si vous avez des astuces en la matière, n'hésitez pas à les partager soit dans les commentaires ci-dessous, soit par mail. Je me ferai un plaisir de les rajouter aux ressources.