Vous êtes sur la page 1sur 285

✐ ✐

“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page I — #1


✐ ✐

✐ ✐

✐ ✐
Toutes les marques citées dans cet ouvrage sont des
marques déposées par leurs propriétaires respectifs.

Couverture : Rachid Maraï

© Dunod, 2013, 2015


5 rue Laromiguière, 75005 Paris

ISBN 978-2-10-072396-6
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page III — #3
✐ ✐

Table des matières

Remerciements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XIII

Avant-propos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XV

À propos des auteurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XXI

Les fichiers téléchargeables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XXIII

Première partie – Installer, paramétrer et découvrir Joomla!

Chapitre 1 – Installer votre Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3


1.1 Prérequis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Un éditeur de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Un client FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Un logiciel de décompression de fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Plusieurs navigateurs Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Installer des serveurs sur votre poste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Travailler directement en environnement de production . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.2 L’installation maîtrisée, pas à pas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Votre nom de domaine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Déposer votre archive au bon endroit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Créer votre base de données. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Trouver la page de l’installateur Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Démarrer l’installation de Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Votre première connexion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.3 L’installation experte : les contraintes serveurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Comprendre l’architecture et le code de Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Versions précédentes, « mode legacy », nouveautés techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Serveur Apache : ne pas jouer les Sioux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Serveur MySQL : les données en sécurité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page IV — #4
✐ ✐

IV Créez votre sites Web avec Joomla!

Procédures et qualité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
1.4 Transférer votre site chez votre hébergeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Découvrir le monde de l’hébergement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Effectuer la migration de vos données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
1.5 Mettre à jour son site Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Qu’est-ce qu’une mise à jour ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Est-il nécessaire de faire une mise à jour ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Anticiper les problèmes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Mise à jour facile et automatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Mettre à jour son site manuellement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Chapitre 2 – Prise en main . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33


2.1 Comprendre la gestion de contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Le principe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Une grande famille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2.2 Joomla! le fils prodigue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Un CMS souple et modulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
L’accessibilité de Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Séparer la forme du contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
2.3 Apprendre le vocabulaire Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Quelques termes utilisés côté site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Quelques termes utilisés côté administration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
2.4 Visite guidée du site de démo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Plusieurs sites en un seul . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Des outils omniprésents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
2.5 Visite guidée de l’administration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Le panneau d’administration. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Les différents menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Les icônes d’accès rapide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Les modules de l’administrateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Chapitre 3 – Paramétrer votre Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47


3.1 Onglet site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Paramètres du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Paramètres SEO et paramètres des métadonnées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Paramètres des cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
3.2 Onglet système . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Paramètres système . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Paramètres de débogage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Paramètres du cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page V — #5
✐ ✐

Table des matières V

Configuration des sessions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53


3.3 Onglet serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Paramètres du serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Localisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Paramètres FTP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Paramètres du proxy. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Paramètres de la base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Réglages e-mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
3.4 Onglets droits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
3.5 Onglets filtres de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
3.6 Les informations sur le système . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Deuxième partie – Gérer et publier vos contenus

Chapitre 4 – Organiser votre site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61


4.1 Définir l’arborescence de votre site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Contenant et contenu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Sémantique : être compris de ses visiteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
4.2 Agencer votre contenu : les catégories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Le gestionnaire de catégories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Ajouter une catégorie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Action sur les catégories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
4.3 Les paramètres de gestion et d’affichage des contenus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Paramètres d’affichage de vos articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Paramètres d’agencement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Paramètres d’affichage des catégories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Réglages pour l’affichage « Blog » ou « En vedette » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Réglages pour l’affichage en liste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Paramètres partagés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Paramètres d’intégration (des flux RSS) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
La gestion des droits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
4.4 La page d’accueil (frontpage). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Afficher vos articles sur la page d’accueil. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Penser les modules de la page d’accueil. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Chapitre 5 – Créer et modifier ses textes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79


5.1 Créer son premier article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Le gestionnaire d’articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Mon premier article en deux clics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page VI — #6
✐ ✐

VI Créez votre sites Web avec Joomla!

5.2 Gérer un article dans les moindres détails. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83


La structure d’un article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
La face cachée de votre texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Maîtriser le cycle de vie d’un article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
5.3 Gestion de versions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
5.4 Écrire et mettre en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Utiliser un éditeur WYSIWYG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Insérer un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Favoriser la navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Donner du style à vos contenus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Chapitre 6 – Multimédia et réseaux sociaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97


6.1 La gestion des médias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Généralités sur les images Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Prendre en main le gestionnaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Aménager votre bibliothèque virtuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
6.2 Insérer et mettre en forme vos images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Picasa, un logiciel de retouche d’image gratuit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Insérer une image dans un article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Afficher un slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
6.3 Diffuser vos vidéos et vos présentations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Prérequis, lever les interdits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Insérer une vidéo YouTube ou Dailymotion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
6.4 Partager vos contenus sur les réseaux sociaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Installer l’extension ITP Share . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Paramétrer le module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Affichage du module ITP Share. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

Troisième partie – Administrer votre Joomla!

Chapitre 7 – Utilisateurs, groupes et permissions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125


7.1 ABC du webmaster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Comprendre comment ça marche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
7.2 La gestion des utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Les filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Les tris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
La recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Votre compte de super-utilisateur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Créer un nouvel utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Mettre à jour une fiche utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page VII — #7
✐ ✐

Table des matières VII

Bloquer un utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128


Supprimer un utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Déconnecter un utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Ajouter des notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Contacter vos utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Mots de passe et sécurité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
7.3 La gestion des groupes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Utilité des groupes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Les groupes existants et leurs rôles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Créer de nouveaux groupes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Assigner et retirer des groupes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Supprimer un groupe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
7.4 La gestion des niveaux d’accès. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Les niveaux d’accès existants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Créer un niveau d’accès . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Supprimer un niveau d’accès. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
7.5 La gestion des permissions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Les options générales. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

Chapitre 8 – Gérer vos menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139


8.1 Maîtriser l’ergonomie de votre site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Favoriser la navigation en un clic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Créer votre arborescence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Un ou plusieurs menus ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
8.2 Le gestionnaire de menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Liens de menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
La gestion des droits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Les types de liens de menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Créer un nouveau lien de menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Modifier un lien de menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Créer un sous-menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Modifier la position dans le menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Copier ou déplacer des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Supprimer un lien. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Récupérer un lien de menu supprimé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Vider la corbeille (supprimer définitivement) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
8.3 Le menu principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Le menu le plus important . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
L’élément « Accueil » ou « Home » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page VIII — #8
✐ ✐

VIII Créez votre sites Web avec Joomla!

8.4 Le menu haut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152


8.5 Le menu membre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Les fonctionnalités par défaut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
8.6 Créer un nouveau menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Ajouter un nouveau menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Modifier un menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Supprimer un menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Ajouter des fonctionnalités . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Chapitre 9 – Référencer votre Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157


9.1 État des lieux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Les règles de l’art . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Vous voulez exister sur le Web ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
9.2 Joomla! et le référencement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Les réglages SEO et SEF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Les métadonnées des articles et catégories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
La réécriture d’URL dans le détail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
9.3 Statistiques avec Google Analytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Découvrir et installer Google Analytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Pour bien utiliser Google Analytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

Chapitre 10 – Gérer les extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171


10.1 Comprendre le système Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
10.2 Les types d’extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
10.3 Installer/supprimer une extension . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Installer une extension . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Désactiver/supprimer une extension . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
10.4 Droits de gestion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

Chapitre 11 – Gérer les composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177


11.1 Votre régie publicitaire : les bannières. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Comment fonctionne le système de bannières ?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Les paramètres et droits par défaut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Gérer les clients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Gérer les catégories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Créer et modifier des bannières . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
11.2 Votre répertoire de contacts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Un mot sur les droits et paramètres par défaut. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Créer des catégories de contacts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Créer/modifier des contacts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page IX — #9
✐ ✐

Table des matières IX

11.3 Fils d’actualité – RSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181


Qu’est-ce qu’un flux RSS ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Comment fonctionne un flux RSS ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Créer des catégories de flux RSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Gérer des flux RSS sur son site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
11.4 Gérer vos liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Créer des catégories de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Créer des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
11.5 Votre messagerie privée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
11.6 Mise à jour de Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
11.7 Recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
11.8 Recherche avancée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
11.9 Redirection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Pourquoi faire des redirections ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Comment fonctionne une redirection ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
11.10 Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Des tags pourquoi faire ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Comment les utiliser au mieux ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
11.11 Cas pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Installer un gestionnaire de sauvegardes : Akeeba Backup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Prise en main. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

Quatrième partie – Booster votre Joomla!

Chapitre 12 – Gérer les templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193


12.1 Habiller son site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Ergonomie visuelle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Un design adaptatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Un template, plusieurs styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
12.2 Changer le template du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Définir un template par défaut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Assigner un template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Modification d’un template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Prévisualisation et sécurité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
12.3 Cas pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Mise en œuvre d’un nouveau template : Joomspirit_76. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Installation du template. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Paramètres du template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Pour aller plus loin avec JoomSpirit_76 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page X — #10
✐ ✐

X Créez votre sites Web avec Joomla!

Chapitre 13 – Gérer les modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207


13.1 Les modules dans tous leurs états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Le gestionnaire de module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
La liste des modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Visibilité d’un module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Les positions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Un mot sur la sécurité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
13.2 Les modules par défaut du site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Affichage en liste d’articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Affichage en liste de catégories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Articles archivés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Articles en relation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Articles les plus consultés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Bannières . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Changement de langue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Connexion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Contenu personnalisé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Copyright de Joomla!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Derniers articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Derniers inscrits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Fenêtre intégrée (iFrame) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Fil d’actualité RSS/RDF/ATOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Fil de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Flash d’information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Image aléatoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Lien de flux RSS ou ATOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Liens Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Qui est en ligne ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Recherche avancée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Statistiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Tags populaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Tags similaires. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
13.3 Les modules de l’administration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
13.4 Ajouter ou modifier un module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
13.5 Dupliquer un module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
13.6 Publier/dépublier un module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page XI — #11
✐ ✐

Table des matières XI

13.7 Cas pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223


Installation d’un carrousel d’images, Flexslider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

Chapitre 14 – Gérer les plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229


14.1 Les plugins existants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Authentication. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Captcha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Editors-xtd . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Extension . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Finder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Installer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Quick icon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Twofactorauth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
14.2 Cas pratiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Mise en place de l’éditeur de texte JCK Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Utilisation d’une galerie d’images au sein d’un article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234

Chapitre 15 – Gérer les langues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239


15.1 Gestion des langues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Langue(s) installée(s) – Site et Administration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Langues de contenus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Substitutions de traduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
15.2 Installer une nouvelle langue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
15.3 Cas pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Mise en œuvre d’un site multilingue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Ajouter une nouvelle langue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Le plugin de filtrage des langues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Dupliquer le contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Dupliquer les modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Ajouter le module de changement de langue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Vérifier le statut multilingue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

Chapitre 16 – Maintenance : la gestion au quotidien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251


16.1 La messagerie interne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
16.2 Déverrouillage du contenu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page XII — #12
✐ ✐

XII Créez votre sites Web avec Joomla!

16.3 Nettoyer le cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252


16.4 Vider la corbeille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
16.5 Archivage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
16.6 Gestion de versions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
16.7 Les avertissements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
16.8 Mises à jour . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
16.9 La sécurité des composants tiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
16.10 Revue des permissions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256

Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page XIII — #13
✐ ✐

Remerciements

Parce que Joomla! est un projet construit par des développeurs bénévoles et qu’il est le fruit du
travail d’une communauté, nous tenons ici à remercier et à féliciter l’ensemble des développeurs
ayant pris part au projet. Merci également aux millions d’utilisateurs quotidiens dont les retours
permettent l’amélioration continue de ce projet collaboratif. Ils contribuent avec les 3 millions de
messages sur le forum de www.joomla.org à l’émergence d’idées nouvelles et à l’amélioration
continue de ce logiciel de gestion de contenu.
Merci à la communauté francophone de Joomla! Ce site est une mine d’information et nous
invitons tous les utilisateurs de Joomla! à parcourir les différents espaces : portail, extensions,
aide, communautés et supports, les forums bien sûr dans lesquels vous trouverez bien des
réponses à vos problèmes.
Plus particulièrement nous tenons à dédicacer ce livre aux administrateurs et modérateurs
du site www.joomla.fr et aux membres de l’AFUJ (Association Francophone des Utilisateurs de
Joomla) qui nous ont permis d’apprendre, tout simplement, à utiliser et apprécier ce CMS si
polyvalent.
À la communauté française de Joomla!

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page XIV — #14
✐ ✐

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page XV — #15
✐ ✐

Avant-propos

Joomla! c’est quoi ?


« Joomla! c’est un CMS. », « Joomla! est un noyau open source ! », « Joomla! c’est un logiciel sur
Internet qui permet de gérer un site ».
Toutes ces définitions de Joomla! sont exactes, mais entrons maintenant dans les détails pour
y voir un peu plus clair. Un CMS (abréviation de Content Management System) se traduit en
français par « système de gestion de contenu ». Il s’agit donc bien d’un logiciel au sens littéral du
terme. Joomla! est un « noyau » : si vous imaginez votre site Web comme un abricot par exemple,
vos contenus en seront la chair, la charte graphique en sera la peau et Joomla! en sera le noyau.
C’est lui qui vous permettra d’agencer vos contenus. C’est un gestionnaire de contenu à l’image
d’un classeur dans lequel vous disposeriez des intercalaires (catégories) permettant de retrouver
vos feuilles (pages du site).
Joomla! est un logiciel « open source », ce qui n’a rien à voir avec sa gratuité. Cela signifie
simplement que le code qui le compose est ouvert, que vous pouvez y avoir accès et que vous
avez le droit de le modifier pour vos besoins, même à titre commercial (sous réserve que vous
respectiez les termes de la licence GNU/GPL).

Pour la petite histoire, le projet Joomla! est hérité du projet Mambo, qui existe toujours.
Créé en août 2005 par une bonne partie des développeurs du projet Mambo qui ont opéré
une scission avec la société propriétaire du nom, Joomla! a très rapidement bénéficié du
soutien des utilisateurs et d’une excellente notoriété. Le 1er septembre 2005, le nom du
projet devient « Joomla ». Il s’agit de l’orthographe anglaise du mot arabe « jumla » qui
peut être traduit par « phrase ». Le mot existe également en swahili et en urdu et signifie
« tous ensemble », c’est la traduction retenue par la communauté. Nous invitons ceux
parmi vous qui s’intéresseraient à la genèse du projet à lire ce rappel des faits qui date
de l’époque de la scission : http://forum.joomla.fr/showthread.php?1738-Mambo-part-en-
vrille&p=8500#post8500.

Avertissement
Le nom JoomlaTM (www.joomla.org) est utilisé sous licence limitée de Open Source Matters
(opensourcematters.org), le propriétaire mondial de la marque de commerce. Le présent ouvrage
n’est ni affilié à Open Source Matters ou au projet Joomla! ni approuvé par l’un ou par l’autre.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page XVI — #16
✐ ✐

XVI Créez votre sites Web avec Joomla!

Avez-vous besoin de Joomla! ?


Comme nous l’avons vu, Joomla! est un gestionnaire de contenu. C’est l’outil idéal pour
administrer un site Web en toute simplicité, mais il est également utilisé pour bien d’autres
applications : Intranet d’entreprise, site de e-commerce, portfolio, GED (Gestion électronique des
documents), site multilingue, portail communautaire, mashup, blogs, et même micro-blogging.
La vraie question que nous souhaitons vous poser, ce n’est pas tant « Est-ce que vous
avez besoin de Joomla! ? », mais plutôt « Est-ce que Joomla! répond le mieux à vos besoins
fonctionnels ? ». Par exemple, si vous voulez uniquement mettre à jour un espace de micro-
blogging, nous vous recommandons plutôt d’utiliser Twitter qui a été conçu pour cette tâche ;
le recours à Joomla! s’avérant disproportionné dans ce cadre. Si vous cherchez un outil pour
publier votre blog personnel, Joomla! est moins intéressant que WordPress, qui est un moteur de
blog conçu pour ça.
En revanche, si vous cherchez un outil qui vous permette à la fois de gérer votre site Web et
votre blog « corporate » (comme une partie à part dans votre site par exemple), alors choisissez
Joomla!. Vous pourrez ainsi administrer un grand nombre de fonctionnalités avec un seul outil.

Comment Joomla! fonctionne-t-il ?


Bien qu’étant un logiciel, Joomla! n’est pas pour autant un « exécutable », comme le serait par
exemple un logiciel de traitement de texte, où le simple fait de cliquer sur un bouton ferait
apparaître l’interface. Joomla! est composé de fichiers (des scripts), constitués de lignes de code
dans un langage de programmation qui s’appelle PHP. Ces fichiers sont interprétés par un
serveur (Apache en général). Ce serveur fonctionne sur un système d’exploitation qui s’appelle
Linux le plus souvent, mais qui peut aussi fonctionner en environnement Windows et Macintosh.
Une partie des données (le texte, les rubriques, les droits des utilisateurs...) que vous créez sont
enregistrées dans une base de données, qui est elle aussi sur un serveur (MySQL le plus souvent,
mais aussi Microsoft SQL Server si vous le souhaitez). Joomla! lit et écrit dans sa base de données.
Enfin, les pièces jointes au sens larges : photos, documents, fichiers audio et vidéo, sont stockées
sur le serveur Web, dans un répertoire prévu à cet effet.
Joomla! est ce que l’on appelle un logiciel « client-serveur » : il est le « client » qui demande
des informations à des « serveurs » (un pour le langage de programmation et un pour les
données). À titre de comparaison, aujourd’hui, un simple « blog », parce qu’il fonctionne sur le
même principe, est un logiciel client-serveur. Par analogie, votre smartphone utilise également
un certain nombre de logiciels client-serveur. Parmi ceux-ci, le plus utilisé est sans doute celui
qui vous permet d’envoyer et de recevoir SMS et MMS. Votre smartphone est le client qui
envoie ou demande au serveur de messagerie de votre opérateur des informations binaires. Ces
informations sont ensuite affichées de manière intelligible sur votre écran.

Vous pouvez administrer votre site sans jamais voir une seule ligne de code : c’est ce qui a fait la
popularité de Joomla!. Cela veut dire que pour la mise à jour des contenus de votre site, vous n’êtes
plus obligé de posséder les compétences d’un développeur ou d’y faire appel.

Est-ce que Joomla! fonctionne bien ?


Les quelque 20 000 téléchargements par jour sur le site officiel sont un indice important de la
fiabilité et de la popularité de Joomla!. Aujourd’hui, Joomla! a dépassé la barre des 35 millions
de téléchargements, avec près d’un million de téléchargements supplémentaires tous les mois.
Alors oui, Joomla! fonctionne très bien. Le projet en lui-même a remporté de nombreux prix,
comme l’Award de gestion de contenu open source en 2006, 2007, 2011 et 2014, mais c’est
surtout l’utilisation courante d’un site Joomla! qui va vous convaincre de son efficacité.
Pour vous faire une idée des possibilités de Joomla!, la meilleure manière est bien
évidemment de visiter quelques sites réalisés grâce à ce logiciel. Des plus volumineux comme le

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page XVII — #17
✐ ✐

Avant-propos XVII

site « Centre régional d’information des Nations Unies pour l’Europe occidentale » des Nations
Unies, au plus culturel à l’image du site du château de Versailles, en passant par le site du
constructeur automobile Peugeot, découvrez, naviguez : souvent, des exemples valent mieux que
des mots.

Centre régional d’information des Nations Unies pour l’Europe occidentale – Le centre (UNRIC), ouvert en
2004, fournit des informations et de la documentation aux pays suivants : Allemagne, Belgique, Chypre, Danemark,
Espagne, Finlande, France, Grèce, Irlande, Islande, Italie, Luxembourg, Malte, Monaco, Norvège, Pays-Bas, Portugal,
Royaume-Uni, Saint-Marin, Saint-Siège et Suède. Ce site Joomla! est accessible en 13 langues : http://www.unric.org

Vous trouverez d’autres sites réalisés avec Joomla! sur l’annuaire des sites Joomla! : http://community.
joomla.org/showcase.

Qui programme Joomla ?


Joomla! est développé par une équipe internationale de développeurs répartie en différentes
équipes. Sa pérennité est assurée par une communauté de plus de 200 000 utilisateurs et
contributeurs qui compte par ailleurs deux Français (Christophe Demko et Jean-Marie Simonet)
dans l’équipe principale de développement.
Joomla! est une marque qui appartient à Open Source Matters. Il s’agit d’une organisation à
but non lucratif basée aux États-Unis, dont la mission est de fournir une structure légale et finan-
cière au projet. Les statuts de l’organisation sont consultables sur : http://www.opensourcematters.
org.
Il y a plus de 80 groupes d’utilisateurs Joomla! à travers le monde. En France, la
communauté se regroupe autour de l’AFUJ, l’Association Francophone des Utilisateurs de
Joomla!. L’association anime le site www.joomla.fr, les forums, organise des JoomlaDay et des
JoomApéros.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page XVIII — #18
✐ ✐

XVIII Créez votre sites Web avec Joomla!

Musée Geggenheim – Musée d’art de renommée internationale mais également une des plus importantes icônes
architecturales du XXe siècle, le Musée Guggenheim est à la fois un centre culturel, un établissement d’enseignement et
le cœur d’un réseau international de musées : http://www.guggenheim.org

Château de Versailles – Le château de Versailles se relooke avec un Joomla! en trois langues dont le chinois. Achetez
vos billets en ligne, naviguez entre le Grand Trianon et les jardins grâce à une carte interactive, une vraie splendeur (le
site aussi bien sûr) : http://www.chateauversailles.fr

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page XIX — #19
✐ ✐

Avant-propos XIX

Peugeot – Découvrez le site officiel du constructeur français dans sa livrée multilingue et plein écran :
http://www.peugeot.com

Combien coûte Joomla! ?


Joomla! est un logiciel gratuit distribué sous licence GNU/GPL. Cela signifie que vous pouvez
vous procurer la dernière version du logiciel gratuitement sur www.joomla.org ou sur le site de
la communauté française : www.joomla.fr.

En aucun cas, un prestataire ne peut vous faire payer le logiciel Joomla!. Par contre, vous pouvez
tout à fait acheter une prestation comprenant l’installation, le paramétrage ou bien une formation.
Vous trouverez toutes ces informations dans ce livre.

Le logiciel Apache (le serveur Web) est également gratuit, tout comme Linux et le logiciel
MySQL (le serveur de base de données). En revanche, vous allez devoir acheter un espace
disque (pour stocker les fichiers de Joomla! et les vôtres), de la bande passante (pour faire
transiter vos données) et payer pour certaines fonctionnalités telles que l’administration de vos
noms de domaines, l’accès FTP (qui vous permet d’envoyer vos fichiers sur le serveur Web) et
quelques autres dont nous parlerons plus loin : tout ceci faisant référence à ce que l’on appelle
habituellement l’« hébergement ». Il existe différents types d’hébergement, mais presque tous les
hébergeurs en proposent un de type LAMP (Linux + Apache + MySQL + PHP). C’est précisément
ce qu’il vous faut !

Ce que vous trouverez dans le livre


Joomla évolue et pour la rentrée 2012, les équipes de développement ont mis à disposition une
nouvelle mouture de notre CMS préféré : la version 3. Régulièrement mise à jour depuis, une
réédition de cet ouvrage s’avérait nécessaire, munie de toutes les nouveautés intégrées depuis.
Si vous avez encore un site en 1.5, il faut définitivement le migrer vers le nouveau noyau de
Joomla!, d’autant que le support de cette ancienne version est définitivement arrêté depuis fin
2012. Si vous êtes administrateur d’un site Joomla! mis en œuvre avec les versions 1.6,1.7,1.8,
ou 2.5, vous n’avez pas de souci à vous faire car vous pourrez facilement migrer vers la version
3, qui est une version importante de Joomla!.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page XX — #20
✐ ✐

XX Créez votre sites Web avec Joomla!

À partir de la version 1.6, nous avions eu droit à une refonte en profondeur des fonc-
tionnalités majeures : la gestion des droits des utilisateurs, l’arborescence des contenus et de
nombreuses améliorations du code. Les nouveautés proposées depuis la version 3 vont vous
permettre d’aller encore plus loin et encore plus facilement.
Vous pouvez enfin profiter des templates « Responsive », ces chartes graphiques qui adaptent
leur ergonomie en fonction de la taille de l’écran du navigateur. Cela vous permet de proposer
votre site aussi bien pour des utilisateurs sur ordinateur que pour les utilisateurs dotés de tablettes
et de smartphones. La version 3 de Joomla! est d’ailleurs livrée avec un template responsive côté
administration et un template responsive côté utilisateur.
Côté développeur, en plus de l’interopérabilité avec « Microsoft SQL Server », Joomla est
maintenant utilisable avec une base de données PostgreSQL. Les développeurs seront ravis
d’apprendre l’intégration du Bootstrap de Twitter dans le JUI (l’interface graphique de Joomla!),
sous la forme d’un SDK.
D’autre part, la raison d’être de Joomla! étant de gérer du contenu, il nous a semblé
important de concevoir un ouvrage non seulement consacré à la mise en ligne et à la publication
des contenus multimédia, mais également à ce qui est le fer de lance des webmestres, à savoir
le référencement au sens large.

À qui s’adresse ce livre ?


À tous ceux qui ont envie de mettre en ligne et d’administrer leur site Web à l’aide de cet excellent
outil qu’est Joomla!.
Que vous vous lanciez dans l’aventure ou que vous mettiez en place votre quarantième site
Joomla!, vous trouverez dans ce livre des informations utiles et 100 % pratiques pour l’installation,
la gestion de vos contenus textes, images, sons et l’administration au quotidien de votre site.
De nombreux trucs et astuces issus d’expériences professionnelles vous permettront de
réaliser votre site Web dans les meilleures conditions.

Quatre parties pour quatre objectifs


Dans la première partie, vous allez découvrir Joomla!. Nous vous expliquerons comment installer
rapidement votre site, en local sur votre ordinateur ou sur un hébergement distant.
Dans la deuxième partie, vous apprendrez à mettre en ligne vos contenus textes, images et
vidéos.
La troisième partie est consacrée à l’administration de votre site. Des pas à pas vous
permettront d’organiser différents niveaux de lecture dans votre site pour vos clients, vos
membres, de gérer l’arborescence physique du site avec les menus, de référencer votre site,
d’utiliser les composants natifs de Joomla!.
Enfin la quatrième partie vous permettra de booster votre site en manipulant template,
module, plugins et gestion des langues au moyen de cas pratiques.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page XXI — #21
✐ ✐

À propos des auteurs

• Guillaume-Nicolas MEYER
Diplômé en informatique et en communication Guillaume-Nicolas Meyer a exercé comme
développeur, chef de projet web et chargé de communication digitale, en web-agency,
SSII, PME et chez des institutionnels. Utilisateur de Joomla! depuis sa création, il y a
10 ans, l’auteur a conçu par exemple un portail multilingue suite à une subvention
de la commission européenne, un site marchand pour 100 000 clients, des actions de
positionnement numérique, des portails de veille, etc. Intervenant à l’université et en école
de commerce (Licence, Master), il est actuellement manager chez ERDF.

• David PAULY
Développeur informatique de formation, David Pauly est aujourd’hui responsable des
applications collaboratives au sein d’un grand groupe industriel. Spécialiste en intégration
des systèmes d’information, il est autodidacte et passionné des technologies Web depuis
plus de quinze ans. Habitué à gérer des volumes de données conséquents, il lui fallait
un gestionnaire de contenu capable de répondre à tous les cas de figures. Aujourd’hui,
avec sa version 3, Joomla! est pour lui sans conteste le CMS le plus pratique et le plus
polyvalent du marché.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page XXII — #22
✐ ✐

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page XXIII — #23
✐ ✐

Les fichiers
téléchargeables

Sur www.dunod.com/contenus-complémentaires/9782100720934, sur la page dédiée à l’ou-


vrage, vous pourrez télécharger quelques fichiers utilisés tout au long de la progression et qui
vous permettront de vous lancer avec Joomla! :
• plugins
• composants
• modules
• templates

Vous trouverez également quelques liens utiles vous permettant de télécharger :


• Le logiciel FTP FileZilla (Mac ou PC)
• le serveur local MAMP (mac) ou WAMP (PC)
• les navigateurs Internet libres : Firefox, Chrome, Opera
• les éditeurs de texte Notepad ++ et Sublime Text
• la dernière version de Joomla!

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page XXIV — #24
✐ ✐

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 1 — #25
✐ ✐

PREMIÈRE PARTIE

Installer, paramétrer
et découvrir Joomla!

Bienvenue dans le monde du Web facile. En adoptant Joomla!, vous faites beaucoup plus que
de simplement choisir un nouveau logiciel : vous entrez dans le monde de l’open source, du
logiciel libre et vous faites désormais partie de la communauté de Joomla!, qui, en plus des
développeurs, compte de nombreux utilisateurs prêts à vous aider.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 2 — #26
✐ ✐

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 3 — #27
✐ ✐

1
Installer votre Joomla!

Objectif
Ce chapitre va vous aider à mettre en place un Joomla! opérationnel et prêt à l’emploi. Que
vous n’ayez aucune connaissance technique ou que vous soyez le roi du php.ini, vous aurez,
à l’issue de ce chapitre, installé le gestionnaire de contenu le plus populaire et efficace du
moment.

Quelle installation allez-vous choisir ?


Nous vous proposons deux possibilités d’installation, correspondant chacune à des compétences et
à un objectif différents.
La première est la plus rapide et la moins technique. Elle vous permet, en quelques clics d’avoir un
site Web Joomla! installé et prêt à fonctionner, grâce à l’installateur de Joomla!.
La seconde possibilité est plutôt à destination des développeurs et administrateurs réseaux mais peut
également convenir à un utilisateur qui n’aurait pas peur du jargon technique ou à celui qui souhaite
comprendre dans les détails ce qui se passe. Si vous avez en charge l’installation d’un ou plusieurs
sites Joomla! dans leur environnement de production et que vous ne connaissez pas les contraintes
techniques de Joomla! ni les réglages serveurs, alors cette partie est faite pour vous.

1.1 PRÉREQUIS
Avant de vous lancer dans l’installation de Joomla!, et quelle que soit l’option que vous choisirez
(chez l’hébergeur ou en local), il vous faut au minimum quatre outils pour travailler : un éditeur
de texte, un client FTP, un logiciel de décompression et un navigateur Web, et ce, quel que
soit votre système d’exploitation (Windows, Macintosh, Linux). Les prérequis suivants sont pour
Windows, mais il existe des équivalents pour Macintosh et Linux.

Note aux utilisateurs de Joomla! 1.5 à 2.5 : sachez que l’installation n’a pas spécialement changé.
Notez néanmoins que vous pouvez désormais définir vous-même l’identifiant du super-administrateur.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 4 — #28
✐ ✐

4 Chapitre 1. Installer votre Joomla!

Un éditeur de texte
Un éditeur de texte est un logiciel qui lit « comme du texte » un langage de programmation. Le
code lu n’est pas interprété ou exécuté, il est seulement présenté dans l’éditeur pour être modifié.
Rassurez-vous, vous n’avez rien à programmer dans Joomla! : il n’est donc pas nécessaire de
connaître un langage de développement. Néanmoins, un tel programme vous sera toujours
utile, par exemple pour modifier le fichier de configuration de Joomla!, ce qui sera le cas si vous
décidez d’installer Joomla! en local et que vous le transférez ensuite chez un hébergeur.
Nous vous proposons d’utiliser un outil gratuit et très performant favorisé par de nombreux
développeurs en environnement professionnel : Notepad++. Ce petit éditeur est extrêmement
polyvalent puisqu’il vous permet d’éditer plus d’une vingtaine de langages de programmation
différents. Il propose de surcroît la coloration syntaxique pour chaque langage : les balises,
fonctions et textes sont ainsi présentés dans différentes couleurs.

Un client FTP
Un client FTP permet de se connecter à distance sur un serveur pour y télécharger des fichiers. On
parle de « client » en opposition au « serveur » FTP, parce qu’il dépose (« upload ») ou récupère
(« download ») des fichiers sur le serveur.
Sans client FTP, vous ne pourrez pas déposer les fichiers chez votre hébergeur ni mettre à
jour les fichiers d’un site. Le deuxième prérequis est donc l’installation d’un client FTP sur votre
poste. Pour cela, nous vous proposons l’utilisation de FileZilla, gratuit et rapide.
Vous trouverez sur le site www.filezilla.fr toutes les explications pour son installation et son
utilisation ainsi que des tutoriels courts ou des vidéos.

Un logiciel de décompression de fichier


Avez-vous déjà vu un fichier avec l’extension .zip ou .rar, ou encore .tar ? Il s’agit d’un ou
plusieurs fichiers qui ont été « compressés » pour réduire le poids et faciliter les échanges de
fichiers. On appelle cela une archive.
Lorsque vous téléchargez Joomla!, le fichier obtenu est un fichier compressé qui contient
les centaines de fichiers nécessaires pour présenter et administrer votre site (fichiers de
programmation, templates, images, etc.).
Vous n’avez besoin de rien de particulier pour récupérer une archive, qu’il s’agisse de celle
de Joomla! ou d’une autre, comme un template ou une extension. En revanche, pour ouvrir cette
archive et la « décompresser », vous devez disposer d’un logiciel de décompression de fichier.
Les plus connus sont WinZip et WinRar, mais nous vous proposons le logiciel 7-Zip, encore plus
efficace à notre goût et de surcroît gratuit.

Conseil : si vous disposez déjà d’un logiciel de décompression de fichier, réalisez la


manipulation suivante pour que 7-Zip s’occupe à l’avenir de toutes vos « archives ». Une fois
l’installation de 7-Zip terminée, lancez le programme, puis allez dans le menu « Outils » et
sélectionnez le sous-menu « Options ». Sélectionnez toutes les extensions et validez. 7-Zip est
désormais votre logiciel par défaut pour ouvrir, décompresser et compresser vos archives.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 5 — #29
✐ ✐

1.1 Prérequis 5

Plusieurs navigateurs Web


Un navigateur Web est un logiciel qui interprète du code HTML pour vous présenter une charte
graphique, du texte mis en forme, des photos, etc. Sans navigateur Web, le site du quotidien Le
Monde (www.lemonde.fr) ressemblerait à ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Le Monde.fr : Actualité à la Une</title>
<meta name="description" content="Le Monde.fr - 1er site d'information. Les articles du
journal et toute l'actualité en continu : International, France, Société, Economie, Culture,
Environnement, Blogs..." />
<meta name="ROBOTS" content="INDEX,FOLLOW,NOARCHIVE" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Avouez que c’est moins facile à lire... Par ailleurs, vous n’avez ni image, ni vidéo, ni son, ni
lien, ce qui limite tout de suite l’intérêt du Web.
L’une des règles de l’art que doit suivre tout site Web est de pouvoir être lisible sous différents
navigateurs et différents systèmes d’exploitation. Pourquoi est-il important de souligner cette
évidence ? Tout simplement parce que le code source d’une page n’est pas interprété à l’identique
suivant que vous êtes sur Windows ou Linux, et que vous utilisez Internet Explorer, Mozilla
Firefox ou Google Chrome. Le code « valide » est défini par le W3C, un consortium qui définit
quelles normes le code doit adopter. L’écriture du code ne respecte pas toujours ces normes (les
développeurs n’ont pas tous le même niveau) et les navigateurs n’interprètent pas forcément le
code comme ils le devraient (eux aussi n’ont pas tous le même niveau).
S’il est plus difficile d’avoir trois ordinateurs à la maison ou au bureau pour tester Windows,
Linux et Macintosh, vous pouvez tout à fait installer plusieurs navigateurs sur un même poste.
Nous vous conseillons toutefois la dernière version d’Internet Explorer, Mozilla Firefox et Google
Chrome.

Astuce : pour vérifier à quoi ressemblera votre site sous différents navigateurs et systèmes d’exploita-
tion, vous pouvez utiliser le site http://browsershots.org qui vous créera à la volée des copies écran
du rendu en fonction des environnements choisis. Même si le processus est très lent, il s’avère très
pratique.

Installer des serveurs sur votre poste


Vous n’avez besoin de serveurs que si vous souhaitez installer Joomla! sur votre ordinateur. Vous
pourrez alors prendre le temps de tester un maximum de fonctionnalités et de mise en forme
avant de mettre votre site en ligne, chez votre hébergeur.
Si vous êtes inquiet pour la sécurité de vos données, c’est la solution à retenir : dans la
mesure où vous travaillez sur votre poste, rien ne transitera par Internet et personne à part vous
ne pourra accéder à votre site.

Conseil : pour fonctionner, Joomla! a besoin de trois éléments : un serveur Web, un serveur
de base de données et les librairies du langage PHP (utilisé pour interpréter le code de
Joomla!). Si vous ne savez pas à quoi servent ces éléments, rendez-vous à la section
« Comment Joomla! fonctionne-t-il ? » de l’Avant-propos.

Fort heureusement, des packs regroupant tout ce qu’il vous faut pour travailler existent pour
les systèmes d’exploitation Windows, Macintosh et Linux.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 6 — #30
✐ ✐

6 Chapitre 1. Installer votre Joomla!

Que vous soyez sur Windows, Linux ou Macintosh, nous vous proposons d’utiliser un
environnement qui inclut le serveur Web « Apache », le serveur de base de données « MySQL »
et les librairies du langage « PHP ». Nous vous présentons ci-après l’installation de la suite
WampServer sur Windows.

Installation de WampServer 2.5


Comme vous allez le voir, WampServer s’installe facilement et son utilisation très intuitive permet
de le configurer très rapidement (sans connaissances techniques particulières). Son principal
avantage est que vous pouvez reproduire la configuration de votre hébergeur (telle version du
serveur Apache avec telle version du serveur MySQL et telle version de PHP).
Vous trouverez la dernière version de WampServer sur le site http://www.wampserver.com,
ainsi que sur tout un panel de sites le proposant en téléchargement gratuit.
Une fois téléchargé, double-cliquez sur le fichier d’installation et laissez vous guider. Tout est
géré par l’installeur de WampServer. Par défaut, WampServer est livré avec les toutes dernières
versions d’Apache, MySQL et PHP.
Une fois l’installation achevée, vous pouvez ajouter d’autres versions de PHP, d’Apache ou de
MySQL toujours en les téléchargeant sur le site www.wampserver.com. Elles apparaîtront alors
dans le menu de WampServer et un simple clic vous permettra de basculer d’une version à une
autre. C’est tout simplement très pratique.

Paramétrage de WampServer
Chaque version d’Apache, de MySQL et de PHP dispose de sa propre configuration et de
ses propres fichiers (données pour MySQL). Cela signifie que vous pouvez changer de version
d’Apache, de MySQL ou de PHP au sein même de WampServer, ce qui vous permet de reproduire
votre environnement de production au détail près.
WampServer dispose d’un « TrayIcon » (une icône dans la zone de notification rapide de
Windows) vous permettant de gérer et de configurer simplement vos serveurs, sans toucher aux
fichiers de configuration.

Figure 1.1 — Éléments de menu de WampServer

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 7 — #31
✐ ✐

1.1 Prérequis 7

Avec un clic droit, vous pouvez changer la langue du menu de WampServer. Avec un clic
gauche sur l’icône de WampServer, vous pouvez notamment (figure 1.1) :
• gérer les services d’Apache et de MySQL ;
• passer en mode « en ligne » / « hors ligne » (accessible à tous ou limité à localhost) ;
• installer et changer de version d’Apache, de MySQL et de PHP ;
• activer et désactiver les extensions PHP dont vous avez besoin ;
• gérer les paramètres de configuration de vos serveurs ;
• accéder à vos logs.

Préparer WampServer pour Joomla!


Pour profiter de toutes les fonctionnalités de Joomla!, il va falloir que vous désactiviez deux
options PHP, « display errors » et « output buffering ». Pas d’inquiétude, WampServer vous facilite
la vie, il suffit d’un clic. Une fois WampServer lancé, faites un clic gauche sur son icone (verte),
positionnez le curseur sur « PHP », puis « Configuration PHP » et cliquez sur « output buffering »
comme indiqué sur la figure 1.2.
Attention, cela va redémarrer les serveurs. Attendez que l’icône de WampServer soit de
nouveau verte pour répéter l’opération pour « display errors ».

Figure 1.2 — Désactiver des options de WampServer

Travailler directement en environnement de production


C’est du vécu : lorsqu’une société se crée, elle achète désormais son nom de domaine éponyme
pour pouvoir disposer un jour de son site Web. Pour éviter de refaire vos cartes de visite, vos
plaquettes commerciales et tout votre pack de communication initial, il vous suffit d’installer
Joomla!, de le mettre « offline » et de modifier la page d’attente. Vous disposerez ainsi dès
le départ d’une page sur laquelle faire du buzz autour d’un teasing par exemple. Cela vous
permettra, côté back-office et via l’interface sécurisée, de pouvoir commencer à remplir le site et
à former les futurs auteurs dans des conditions réelles avant que celui-ci n’ouvre. Lorsque vous
lancerez votre site, il sera déjà référencé et opérationnel, ce qui facilitera votre communication.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 8 — #32
✐ ✐

8 Chapitre 1. Installer votre Joomla!

Ce que l’on appelle ici « un environnement de production » a la même signification que


dans le monde de l’industrie. Dans le cas de Joomla!, l’environnement de production est bien
entendu constitué par les serveurs (Apache, MySQL) sur lesquels il tourne, mais également par
le système d’exploitation.
Habituellement, la règle est de surtout ne jamais rien faire « en prod » (entendez par là,
l’environnement de production), car cela peut s’avérer « dangereux ». Dans le cas d’un logiciel
client-serveur exécuté sur un serveur distant, vous imaginez bien les inquiétudes (légitimes) des
responsables sécurité. En règle générale, on travaille donc dans un environnement de test (un
serveur local installé sur son poste, comme nous le verrons par la suite) ; puis, une fois que le
site est stable et prêt, on opère une migration sur son environnement de production.
Pourtant, dans le cas de Joomla!, nous vous préconisons exactement le contraire, et cela
pour trois raisons :
• pas de migration à effectuer ;
• gain de productivité ;
• pas de temps perdu en référencement.

Pas de migration
Ce n’est pas un petit travail que vous vous épargnez là. Il faut en effet savoir que beaucoup
de problèmes durables sur un site ont pour origine une mauvaise migration ou les bugs en
résultant. Si tout se passe bien, vous avez juste à « uploader » vos fichiers sur un coin de serveur
et à importer votre base de données. Quelques paramétrages dans le fichier de configuration
de Joomla! et le tour est joué... Mais il est vraiment rare que cela se passe ainsi.
En général, vous ne travaillez pas sous Linux, ni avec les mêmes versions d’Apache de
MySQL, de PHP, ni les mêmes « librairies » PHP, vous imaginez donc qu’il peut facilement y avoir
des problèmes de compatibilité.
Le problème le plus fréquent est celui de l’encodage. Les caractères sont encodés sous un
certain format dans votre base de données locale et lorsque vous les importez sur le serveur de
production, il y a une différence à l’affichage (par exemple des caractères bizarres remplacent
les lettres accentuées, rendant un texte de présentation ou un article illisibles). Nous verrons plus
loin comment corriger ce problème.
Un autre problème majeur est l’interopérabilité : imaginons que vous soyez amené à créer
votre site en local, c’est-à-dire sur votre poste, dans l’idée de saisir vos contenus tranquillement
et de tester vos fonctionnalités. Vous utilisez un composant qui permet de générer des images
miniatures à partir de photos que vous lui envoyez, puis de les afficher sur le site via une galerie
d’images qui propose dynamiquement différentes tailles d’images à télécharger. Une fois votre
site terminé, vous opérez une migration de l’ensemble sur votre serveur de production. Vous
vous apercevez alors que votre composant ne fonctionne pas du tout. Ce n’est pas un simple
bug : il ne fonctionne pas car la « librairie PHP » qui est installée chez vous n’est tout simplement
pas présente sur le serveur de votre hébergeur. Ne vous imaginez pas qu’il suffit de contacter
votre hébergeur pour qu’il rajoute un « package » et redémarre un serveur sur lequel tournent
déjà de nombreux autres sites Web...

Gain de productivité
L’autre avantage de travailler directement en production est de gagner du temps. Par exemple,
dans le cas où votre site est censé être mis à jour par différentes personnes, il est rare que
celles-ci soient toutes géographiquement présentes au même endroit. Mettre votre Joomla! en
ligne en offrant la possibilité aux auteurs concernés de pouvoir commencer directement à saisir
leur contribution vous permettra de gagner du temps, ce qui ne vous empêchera pas de travailler
sur des ajustements de la charte graphique ou sur des fonctionnalités.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 9 — #33
✐ ✐

1.2 L’installation maîtrisée, pas à pas 9

En travaillant en production, vous pourrez former les utilisateurs, leur permettre de commen-
cer à saisir, vous assurez que tout ce que vous mettez en œuvre fonctionnera à l’identique – ce
qui est vraiment important – tout en vous assurant une présence sur Internet.

Pas de temps perdu en référencement


Qu’il s’agisse de la refonte ou de la création d’un nouveau site, vous avez tout intérêt à annoncer
son lancement. En installant votre site sur les serveurs de production, vous travaillerez bien
entendu « hors ligne » et seule votre page d’attente sera visible. Cette page peut vous rendre un
certain nombre de services. Nous vous invitons à y apporter le plus grand soin. Tout d’abord
vous pouvez lui donner une apparence très sympathique et attirante pour susciter la curiosité,
mais vous pouvez surtout y présenter la future activité de votre site, en indiquant éventuellement
une date d’ouverture (par précaution, prévoyez large).
Là où cela devient intéressant pour votre future communication, c’est que votre site existe
déjà : cette simple page va vous permettre de commencer les démarches de référencement sur
les différents moteurs de recherche. Vous pouvez déjà commencer à communiquer (carte de
visite, signatures électroniques, etc.) et à remplir cette page des mots-clés constituant votre cœur
de métier.

1.2 L’INSTALLATION MAÎTRISÉE, PAS À PAS


Vous souhaitez maîtriser l’installation de Joomla! dans ses moindres détails et comprendre ce qui
se passe ? Alors choisissez l’installation pas à pas ! Dans cette section, nous allons voir, étape
par étape, comment partir du dernier téléchargement de Joomla! (un dossier compressé) pour
arriver à un site Web opérationnel.
Nous verrons ici comment installer Joomla! aussi bien sur votre poste que chez un hébergeur
distant.

Votre site en 10 minutes ? Joomla! est devenu si populaire que les professionnels de l’hébergement
proposent maintenant de vous le pré-installer, prêt à l’emploi. Les hébergeurs populaires en France
comme OVH ou 1&1 vous expliqueront dans leur interface comment, en quelques clics, installer le
CMS Joomla! sur un espace que vous aurez acheté.

Votre nom de domaine


Le nom de domaine et l’hébergement sont deux éléments complémentaires mais différents. Le
nom de domaine est l’adresse de votre site, il est déposé pour 12 mois auprès d’une autorité
qui varie selon l’extension (les .fr sont déposés auprès de l’AFNIC, les .com auprès de l’ICANN,
etc.). Si vous souhaitez protéger le nom d’une marque déposée ou de votre entreprise, il est
d’usage d’acheter plusieurs extensions : .fr pour une entité française, .org s’il s’agit du site d’une
association, .com s’il s’agit d’un site à vocation commerciale, .eu si vous travaillez avec un ou
plusieurs pays européens, etc.
L’hébergement comprend aussi bien l’emplacement que vous louez sur les serveurs, la bande
passante (les tuyaux pour faire circuler l’information) que les services (gestion des domaines,
gestion des e-mails, technologies à disposition, support).
Sans hébergement, vous ne pouvez avoir de site Internet, même si vous possédez un nom
de domaine. Sans nom de domaine, vous pouvez souscrire à un hébergement mutualisé ; vous
obtiendrez alors une adresse par défaut de type votrelogin.monhebergeur.fr. Ce type d’adresse
n’est pas très efficace pour une bonne communication sur le Web, surtout que le coût d’un nom
de domaine classique (.fr, .com) est de moins de 10 euros par an.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 10 — #34
✐ ✐

10 Chapitre 1. Installer votre Joomla!

Pour le choix de votre nom de domaine, optez pour quelque chose de simple et facile
à retenir comme www.joomla.fr plutôt que d’essayer de décrire votre activité aux moteurs
de recherche comme www.lassociation-des-utilisateurs-de-joomla-qui-sont-vraiment-gentils.org.
Même si cette façon de faire était à la mode pendant un moment, les moteurs de recherche,
Google notamment, indiquaient en septembre 2012 que le poids de ce critère avait diminué
dans son algorithme. Un bon nom de domaine est toujours important (un ou deux mots-clés),
en revanche fini les phrases à rallonge qui tentent de répondre à une requête précise.

Déposer votre archive au bon endroit


Sur votre PC, en local
Créez-vous un dossier (par exemple « monsite ») dans le répertoire « www » de WampServer.
Téléchargez la dernière version en vigueur de l’archive de Joomla! disponible sur www.
joomla.fr.
Décompressez l’archive en faisant un clic droit sur celle-ci : 7-Zip > Extract Here (ou
Décompressez ici si vous avez paramétré le français comme langue par défaut).
Supprimez maintenant l’archive du dossier. Vos fichiers sont désormais disponibles. Il vous
reste alors à créer votre base de données et vous pourrez lancer l’installateur de Joomla!.

Chez votre hébergeur


Suivez les mêmes instructions que pour l’installation en local jusqu’à la fin, puis revenez ici.
Connectez-vous : lancez FileZilla et connectez-vous à votre espace FTP avec vos identifiants,
votre mot de passe et l’adresse de votre hôte (fournis par votre hébergeur) (figure 1.3).

Figure 1.3 — Initier une connexion FTP

Créez un répertoire : une fois que vous êtes à la racine de votre hébergement, faites
un clic droit dans la fenêtre de votre site distant et choisissez Nouveau dossier. Nommez-le
« joomla », par exemple, puis appuyez sur la touche Entrée.
Uploadez les fichiers Joomla! : vous allez maintenant envoyer les fichiers Joomla! chez
votre hébergeur. Dans la fenêtre « Site local », à gauche, ouvrez le répertoire dans lequel l’archive
de la dernière version de Joomla! a été décompressée. Sélectionnez les fichiers, faites un clic
droit et cliquez sur Envoyer (figure 1.4).
La zone du bas va se remplir de tous les fichiers à uploader et la zone du haut va afficher
les opérations effectuées par FileZilla. Attendez que la zone du bas soit complètement vide. Il
peut arriver que la zone de droite « Site distant » n’affiche pas tous les fichiers et dossiers, cliquez
alors dans la zone, puis pressez sur la touche F5 pour rafraîchir l’écran.
Vous pouvez maintenant passer à l’étape suivante.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 11 — #35
✐ ✐

1.2 L’installation maîtrisée, pas à pas 11

Figure 1.4 — Transfert de fichiers en FTP

Créer votre base de données

Astuce : pour le nom de votre base de données, veillez à ne pas utiliser de caractères spéciaux, de
lettres accentuées, de point, de caractères d’échappement comme les « », les / ou les \. Préférez les
intitulés en minuscules avec des « underscores » pour que cela soit plus lisible : « joomla_site_test ».

Sur votre PC, en local


Si vous avez installé WampServer, faites un clic gauche sur son icône. Vous verrez alors apparaître
un menu contextuel. Choisissez phpMyAdmin et celui-ci se lancera automatiquement dans votre
navigateur par défaut. Normalement son URL est http://localhost/phpmyadmin/.
Sur la page d’accueil, cliquez sur l’onglet « Base de données » dans le menu du haut.
L’interface vous propose alors de créer une base de données. Saisissez le nom de votre base
dans Créer une base de données, comme par exemple « j3_demo ». Il vous faut maintenant
choisir un interclassement, autrement dit choisir le type d’encodage des caractères de votre
base. Nous vous recommandons de choisir le type « utf8_general_ci ». Cliquez ensuite sur le
bouton Créer (figure 1.5). C’est fini ! Votre base de données est désormais créée ! Vous disposez
maintenant de tous les éléments nécessaires pour procéder à l’installation de Joomla!.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 12 — #36
✐ ✐

12 Chapitre 1. Installer votre Joomla!

Figure 1.5 — Création de la base de données

Chez votre hébergeur


Chaque hébergeur propose son propre chemin d’accès à l’interface de phpMyAdmin et sa
propre gestion des bases. Connectez-vous à l’espace d’administration mis à votre disposition et
consultez le mode d’emploi fourni par l’hébergeur ou sa foire aux questions. À l’issue de cette
étape, vous aurez mis en place tous les éléments nécessaires à l’installation de Joomla!.

Trouver la page de l’installateur Joomla!


Joomla! est vraiment facile à installer : suivez son installateur pas à pas et votre site sera
opérationnel très rapidement. Dans la mesure où il est impossible d’aborder tous les cas
particuliers, nous vous invitons, en cas de problème, à consulter les forums de l’équipe de
Joomla! France sur http://forum.joomla.fr. qui traitent de l’installation et des mises à jour.
• Sur votre PC, en local : une fois que votre serveur local est installé et démarré,
lancez votre navigateur et saisissez http://localhost/nom_du_repertoire_joomla. Joomla!
se positionnera alors automatiquement sur la page de l’installateur.
• Chez votre hébergeur : si vous avez installé les fichiers de Joomla! à la racine de votre
répertoire FTP et que votre nom de domaine pointe sur celui-ci, rendez-vous à l’adresse :
http://mondomaine.fr.

Démarrer l’installation de Joomla!


Que vous décidiez d’installer Joomla! sur votre PC ou chez votre hébergeur, la procédure est la
même. Seuls quelques paramètres changent. Nous les préciserons à chaque fois. L’installateur
de Joomla! est composé de trois étapes : la première permet la configuration de votre site,
la deuxième est liée aux paramètres techniques (base de données notamment) et la troisième
propose une vue d’ensemble des éléments indispensables pour faire fonctionner votre site.
Vous aurez besoin à l’étape 2 du nom de votre base de données ainsi que de vos identifiants
et mot de passe (pour une installation distante). À tout moment, vous pourrez revenir sur vos pas
grâce au bouton « précédent ».

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 13 — #37
✐ ✐

1.2 L’installation maîtrisée, pas à pas 13

Étape 1 : la configuration principale


Ce nouvel écran va vous permettre de régler les éléments essentiels de votre site. Vous
remarquerez que l’interface a sélectionné le français comme langue par défaut (figure 1.6).
Si cela vous convient, passez à la partie « configuration », sinon, choisissez une autre langue.

Figure 1.6 — Choix de la langue d’installation

Les données de configuration : il s’agit de données très importantes, puisque c’est dans
cette partie que vous allez saisir le nom de votre site et sa description (voir le chapitre 9 sur le
référencement pour plus de détails). C’est également là que vous allez saisir les informations
du compte du « super-administrateur », c’est-à-dire du compte qui a « tous les droits » : adresse
e-mail, identifiant et mot de passe (figure 1.7).

Conseil : n’oubliez pas qu’un mot de passe trop simple est plus facile à mettre en échec.

Attention, il s’agit du mot de passe de « super-administrateur » de Joomla!. Si vous le perdez,


vous ne pourrez plus accéder à l’administration de votre site. Veillez tout de même à choisir un
mot de passe contenant des chiffres, des lettres, voire des caractères spéciaux.

Figure 1.7 — Les données de configuration

Site hors-ligne : ce bouton est extrêmement pratique (figure 1.8) car il vous permet de
basculer votre site « hors-ligne ». C’est-à-dire que votre site présente une page d’accueil avec
un message que vous pourrez paramétrer une fois l’installation terminée et un logo. Cela vous

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 14 — #38
✐ ✐

14 Chapitre 1. Installer votre Joomla!

permet de travailler dans votre environnement de production, sans pour autant que votre site
soit accessible. En effet, seules les personnes authentifiées peuvent accéder au site.
Si vous installez votre site sur un hébergement distant, nous vous recommandons d’activer
cette option.

Figure 1.8 — Votre site est « hors-ligne »

Une fois tous les champs remplis, cliquez sur le bouton « suivant ».

Étape 2 : la configuration de la base de données


Avant de commencer cette étape, assurez-vous que vous avez bien créé votre base de données,
comme indiqué au début de ce chapitre. Comme il est précisé sur la figure 1.9, sauf indication
différente de votre hébergeur, le type de base de données est MySQLi. Remplissez ensuite les
champs « nom du serveur », « nom d’utilisateur », « mot de passe » et « nom de la base de
données ».
• Sur votre PC, en local : votre serveur de base de données s’appelle généralement
« localhost ». Si vous n’avez pas créé de compte utilisateur spécifique sur phpMyAdmin,
le compte par défaut s’appelle « root » et il n’a pas de mot de passe. Pour le nom de la
base de données, saisissez celui créé précédemment.
• Chez votre hébergeur : saisissez les informations fournies par votre hébergeur.

Figure 1.9 — Données de connexion à la base de données

L’interface va ensuite vous demander un « préfixe des tables ». Par défaut, l’installateur de
Joomla! va générer un code aléatoire qui servira à préfixer les tables de la base de données. Il
s’agit d’une mesure de sécurité et nous vous invitons à ne pas modifier ce champ (figure 1.10).
Pour les utilisateurs qui souhaitent utiliser plusieurs CMS sur la même base de données (un
Joomla! et un WordPress par exemple), nous vous conseillons de choisir vous-même le préfixe

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 15 — #39
✐ ✐

1.2 L’installation maîtrisée, pas à pas 15

des tables. Indiquez par exemple « j_site_a_ » pour votre site « A ». Si vous devez un jour modifier
des éléments directement dans la base de données ou exporter une partie de celle-ci, vous
pourrez ainsi vous y retrouver plus facilement.

Figure 1.10 — Préfixe de tables et installation précédente

Enfin les boutons « Sauvegarder » ou « Supprimer » sont utiles si vous avez déjà procédé à
l’installation d’un site Joomla! sur votre espace d’hébergement.

Étape 3 : la vue d’ensemble


Vous êtes en train de finaliser l’installation de Joomla!, félicitations. Pour vous aider à prendre en
main un gestionnaire de contenu, rien ne vaut... du contenu. C’est ainsi que l’installateur vous
propose un certain nombre de scénarios de données préchargées. Nous vous recommandons
d’opter pour l’option « Données exemples pour apprendre Joomla!, en français ».
Enfin l’interface vous demande si vous désirez recevoir un e-mail avec les données de
configuration à l’adresse e-mail que vous avez indiquée précédemment (figure 1.11).

Figure 1.11 — Vue d’ensemble, finalisation de l’installation.

Configuration principale : vous retrouverez ici les éléments saisis à l’étape 1, n’hésitez
pas à utiliser le bouton « précédent », en haut de page pour modifier ces informations. Vous
pourrez également les modifier, une fois l’installation terminée.
Configuration de la base de données : cette partie affiche tous les paramètres
nécessaires à la bonne utilisation de la base de données.
Pré-installation : cette rubrique recense des informations du serveur web sur lequel vous
procédez à l’installation. Vous y trouverez en autre la version du langage PHP utilisée (notez-la
quelque part, elle vous sera demandée si vous posez des questions sur un forum). Le dernier
point est important, il vous indique si le fichier configuration.php (celui qui contient toutes les
informations ci-dessus et bien d’autres) est modifiable. Si ce n’est pas le cas, vous ne pourrez
pas modifier la configuration de votre site dans l’administration de Joomla!. Tous les boutons
devraient être au vert.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 16 — #40
✐ ✐

16 Chapitre 1. Installer votre Joomla!

Paramètres recommandés
À ce stade, un contrôle de la configuration du serveur Web (le vôtre en local ou celui de votre
hébergeur) est effectué, avec des paramètres qui sont obligatoires et d’autres recommandés. Si
tous les éléments indispensables sont au vert, continuez en cliquant sur le bouton Suivant.
Si vous êtes en local et que les boutons « Afficher les erreurs » et « Output buffering » sont en
orange (figure 1.12), c’est que vous n’avez pas préparé votre serveur Wamp pour Joomla! et nous vous
invitons à consulter, la sous-partie « préparer WampServer pour Joomla! » au début de ce chapitre.
Pour tout autre problème, et comme il est impossible de traiter tous les cas particuliers,
orientez-vous vers les forums de la communauté française de Joomla! qui recensent, entre
autres, de nombreux cas particuliers chez les hébergeurs les plus connus (1&1, Free, OVH, etc.).

Figure 1.12 — Les paramètres recommandés de Joomla!

L’installation est terminée !


Félicitations, vous êtes arrivé au terme de cette installation très rapide de Joomla! et une barre
de progression (figure 1.13) vous indique les étapes réalisées par l’installateur de Joomla!.

Figure 1.13 — Barre de progression de l’installateur

L’écran final de l’installateur s’est chargé (figure 1.14) et il vous annonce que Joomla! est
installé. Pour autant, il vous reste une dernière tâche à effectuer avant de profiter de votre site. Il
va falloir que vous supprimiez le répertoire « Installation », situé à la racine du site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 17 — #41
✐ ✐

1.2 L’installation maîtrisée, pas à pas 17

Une fois que ce sera fait, vous pourrez vous connecter à votre site et à son espace
d’administration.
Depuis l’écran final de l’installateur, cliquez sur le bouton « Supprimer le répertoire
d’installation » (figure 1.14).

Figure 1.14 — Supprimer le répertoire d’installation

Votre première connexion


Se connecter pour la première fois à son espace d’administration est toujours un moment
magique, même si, tout comme nous, vous avez sans doute réalisé cette opération des milliers
de fois (figure 1.15).

Figure 1.15 — Page de connexion à l’administration

L’écran d’authentification
C’est un écran auquel vous allez devoir vous habituer. En effet, dès que vous voudrez intervenir
dans votre espace d’administration, il faudra passer par l’étape d’authentification. Saisissez votre
identifiant et votre mot de passe et cliquez sur « Connexion ».

Petite astuce : quel que soit votre navigateur, enregistrez l’adresse de l’espace d’administration dans
vos favoris (marque-pages, bookmarks), vous pourrez ainsi y accéder rapidement (même en local).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 18 — #42
✐ ✐

18 Chapitre 1. Installer votre Joomla!

La page d’accueil de votre espace d’administration


Ça y est, vous êtes désormais dans l’espace d’administration de votre site (figure 1.16). Si vous
connaissez déjà Joomla!, rendez-vous au chapitre 3 pour le paramétrage, sinon apprenez à
prendre en main votre site Joomla! Pour cela, rendez-vous au chapitre 2.

Figure 1.16 — Espace d’administration

1.3 L’INSTALLATION EXPERTE : LES CONTRAINTES SERVEURS


Cette partie s’adresse plus particulièrement aux développeurs et administrateurs réseaux qui
s’occupent de l’installation ou de la mise à jour de scripts.

Comprendre l’architecture et le code de Joomla!


Si vous êtes développeur et que vous n’êtes pas familier du code de Joomla!, nous allons vous
rassurer en vous apprenant que, depuis la version 1.5 de Joomla!, un Framework est en place.
Ce cadre de développement vous permettra notamment de créer votre propre composant en vous
appuyant sur la méthode de conception MVC (Modèle vue contrôleur). Pour plus d’informations,
visitez le site dédié aux développeurs de Joomla! : http://developer.joomla.org/.
La communauté Joomla! est fière de vous annoncer qu’en 2012, encore une fois, plusieurs
étudiants internationaux, dont un français (Florian Voutzinos), ont participés au prestigieux
« Google Summer of Code », signe de l’engouement toujours croissant pour ce projet open
source.
Sachez également que le code de Joomla! 2.5 a fait l’objet d’une profonde mise à niveau :
les objets Joomla!, la gestion des droits et l’interface cliente ont été entièrement repensés. Pour
comprendre en détail les contraintes des nouvelles « librairies » (PHP, JavaScript, etc.), les objets
ACL et les contraintes de portabilités de vos développements existants pour Joomla! 3, nous
vous invitons à consulter la documentation officielle du code de Joomla!. Si vous cherchez à
savoir comment créer un composant avec la méthodologie MVC de Joomla!, suivez ce lien :
http://docs.joomla.org.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 19 — #43
✐ ✐

1.3 L’installation experte : les contraintes serveurs 19

Versions précédentes, « mode legacy », nouveautés techniques


1.0, 1.5, 1.6, comment s’y retrouver ?
Très longtemps, les versions 1.0 et 1.5 de Joomla! ont cohabité. C’est à cause de l’héritage de
Mambo et des centaines d’extensions faites à l’époque que la version 1.0 a eu une telle longévité
et que certains s’y sont « accrochés ». Le 22 juillet 2009, le support de la série 1.0 s’est arrêté au
profit de la version 1.5.
Joomla! 1.5 proposait pourtant une compatibilité ascendante (la couche « legacy »), que l’on
pouvait activer ou non. Comprenez par là que d’un simple clic, Joomla! 1.5 était capable de
gérer la majorité des extensions conçues pour la version 1.0.
À partir de la version 1.6, il a été décidé de faire table rase de toutes les extensions et bouts
de code créés pour la série 1.0 et c’est bien mieux ainsi. Ces vieux codes n’étaient plus à jour et
n’exploitaient pas toutes la puissance des nouveaux Framework et librairies. Le seul problème,
c’est que les équipes de développement Joomla! ont opté pour un nommage des versions qui
ne permet pas à l’utilisateur de s’y retrouver facilement. En effet les versions « majeures » sont
en fait les 1.6, 2.5 puis 3.5.
Si vous avez encore un site qui tourne en 1.5, sachez que le support a été définitivement
abandonné en fin d’année 2012. Il est vraiment temps de passer à autre chose.

Migration de la 2.5 vers la 3


N’ayez aucune crainte, vous pourrez migrer très facilement votre site Joomla! 2.5 en Joomla! 3.
Le site www.joomla.fr propose d’ailleurs des patchs de migration et un tutoriel à cet effet.

Bootstrap Twitter
L’intégration du Bootstrap de Twitter dans l’architecture de Joomla! (JUI) a donné un coup de
fouet aux développements car ce SDK est vraiment conçu comme une couche web. Il propose en
effet d’implémenter facilement HTML 5, CSS3 et des requêtes JQuery (javascript) pour concevoir
des interfaces homme machine (IHM) « responsive » (figure 1.17), c’est-à-dire que la charte
graphique de votre site s’adapte au support de navigation (écran 22 pouces, 10 pouces, tablette,
smartphone) de façon intelligente.

Figure 1.17 — Une charte graphique « responsive »

Il s’appuie pour cela sur une grille (voyez-la comme un tableau Microsoft Excel), qui va vous
permettre de jouer sur les emplacements et leur taille, pour avoir toujours un rendu graphique
qui soit visuellement accessible. Découvrez Bootstrap sur http://twitter.github.com/bootstrap/.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 20 — #44
✐ ✐

20 Chapitre 1. Installer votre Joomla!

Serveur Apache : ne pas jouer les Sioux


Le serveur Apache est le logiciel qui va interpréter le code PHP de Joomla! et restituer à votre
visiteur du code HTML. Sans lui ou avec de mauvais réglages, votre site n’est pas exploitable.
C’est pourquoi, sur un hébergement mutualisé, vous n’y avez pas accès. Certains hébergeurs
simulent quelques fonctions avec lesquelles les développeurs peuvent « jouer » sans danger.

Reproduisez votre environnement de production en local : avant de faire une manipulation sur
votre serveur de production, testez-la en toute sécurité sur un environnement similaire. Installez par
exemple WampServer (disponible sur www.wampserver.com).

Contraintes d’hébergement sur un serveur Apache


Joomla! 3 requiert la configuration suivante pour pouvoir fonctionner : un serveur Apache 2.x
avec PHP 5.3.1. Attention les « Magic Quotes » doivent être désactivés (off). Côté base de
données, si vous optez pour MySQL (le cas le plus fréquent), il vous faudra au minimum une
version en 5.1 et si vous optez pour du PostgreSQL, alors c’est une version 8.3.18 au minimum.

Contraintes d’hébergement sur un serveur IIS


Dans ce cas, Joomla! 3 requiert la configuration suivante pour pouvoir fonctionner : un serveur
IIS en version 7.x minimum sur lequel seront installés PHP 5.3.1 et MS SQL Server, en version
10.50.1600.1 au minimum.

Librairies indispensables
Les éléments suivants sont nécessaires à l’installation de Joomla!. Si l’un de ces éléments n’est
pas disponible chez votre hébergeur, Joomla! ne fonctionnera pas correctement. La configuration
doit supporter : la compression Zlib (mod_zlib), XML (mod_xml), MySQL –mod_mysql), le parseur
INI et JSON. De plus, la directive MB Language doit être sélectionnée par défaut, MB String
Overload doit être défini à « Off », et le fichier « configuration.php » doit être disponible en
écriture.

Paramètres PHP recommandés


Les paramètres PHP suivants devront être définis ainsi (figure 1.18) :
• safe_mode : Off
• display_error : Off
• file_uploads : On
• magic_quotes_runtime : Off
• register_globals : Off
• output_buffering : Off
• session.auto_start : Off

Normalement ces paramètres ne sont pas indispensables, mais ils peuvent gêner certains
fonctionnements.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 21 — #45
✐ ✐

1.3 L’installation experte : les contraintes serveurs 21

Figure 1.18 — Les paramètres PHP

Serveur MySQL : les données en sécurité

Conseil : n’allez pas trop vite, prenez votre temps. Il n’y a rien de plus frustrant que de
supprimer une base par erreur, sans sauvegarde... Nous en savons quelque chose, cela nous
a valu quelques cheveux blancs.

Plusieurs Joomla! sur la même base


Il est tout à fait possible d’avoir plusieurs sites Joomla! sur une même base de données. En effet,
lors de l’installation de Joomla!, vous pouvez modifier le préfixe des tables constituant la base de
données. Lors de la configuration de la base de données (étape 2), l’interface vous propose par
défaut une chaîne de caractère pour servir de préfixe aux tables de cette installation. Remplacez
le préfixe par défaut par celui de votre choix pour vous y retrouver. Optez pour des préfixes
intelligibles et parlants comme « livres_ » pour votre site de vente de livres ou « demo_ » pour un
site de démonstration (figure 1.19), par contre évitez « joomla_ » par mesure de sécurité.

Figure 1.19 — Le préfixage des tables de la base de données

En cas de mise à jour


En cas de réinstallation ou de mise à jour de votre Joomla!, n’oubliez pas de reprendre les
paramètres existants de la base de données (préfixe, identifiant et mot de passe de l’utilisateur,
adresse du serveur). La procédure d’installation détectera alors la base de données existante et

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 22 — #46
✐ ✐

22 Chapitre 1. Installer votre Joomla!

se connectera sur celle-ci. Vous pouvez demander au programme d’installation de supprimer les
tables de l’ancienne base de données ou de les renommer. Si vous choisissez de les renommer,
le préfixe en place sera remplacé par le préfixe « bak_ ».

Procédures et qualité
Si vous êtes un professionnel, nous ne saurions que trop vous conseiller la rédaction d’une
procédure d’installation. Cette procédure devrait s’inscrire dans vos processus qualité. Si vous
n’en avez pas, c’est le moment d’en mettre une en place.
Si vous savez répondre aux questions suivantes, vous n’avez pas besoin de conseils, sinon...
• Comment allez-vous faire pour vous remémorer toutes les étapes d’une installation qui
date de six mois ?
• Comment allez-vous transmettre les informations nécessaires à une tierce personne (un
autre développeur par exemple) sans rien oublier d’important ?
• Comment allez-vous stocker les backups de bases de données que vous avez planifiés
régulièrement ?
• Comment allez-vous gérer le « versioning » des documents (images, pdf, etc.) que vous
mettez à disposition sur votre site ?

Conseil : la rédaction d’une procédure d’installation vous permettra de résoudre tous ces
cas concrets de la vie d’un projet. Le temps que vous passerez à la rédiger sera largement
récupéré lorsque vous devrez faire face à l’une ou l’autre de ces situations, le plus souvent
dans l’urgence.

Procédure d’installation
L’idéal est d’archiver toutes les opérations que vous avez effectuées lors de l’installation et de la
configuration de votre site et lors de l’installation des données, car vous en aurez besoin à de
nombreuses occasions.
Tout d’abord notez les modifications que vous effectuez dans la configuration de Joomla!.
Référencez ensuite chaque extension que vous installez, sa version et les dates de mise à jour.
Listez également dans votre procédure les points à vérifier après une mise à jour ou la
modification d’éléments de configuration (liens vers les catégories, certains libellés, formulaires
de contact, réécriture d’URL, etc.).

1.4 TRANSFÉRER VOTRE SITE CHEZ VOTRE HÉBERGEUR

Vous avez terminé votre site Joomla! sur votre poste, en local. Le temps est désormais venu de le
mettre en production. Pour ce faire, vous allez copier votre base de données et vos fichiers sur
l’espace mis à disposition chez votre hébergeur. Il ne vous restera alors plus qu’à modifier la
configuration de votre site pour qu’il fonctionne. Allons-y étape par étape.

Attention ! Avant de choisir votre hébergeur, vérifiez qu’il supporte bien Joomla! en proposant PHP
5.3.1 et MySQL 5.1 au minimum.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 23 — #47
✐ ✐

1.4 Transférer votre site chez votre hébergeur 23

Découvrir le monde de l’hébergement


Si vous n’êtes pas familier du monde de l’hébergement, prenez connaissance des termes les plus
fréquemment employés, vous serez tout de suite moins perdu.

Le vocabulaire
• Adresse IP : une adresse IP (pour Internet Protocol en anglais) est un numéro qui
permet d’identifier chaque matériel informatique (ordinateur, serveur, routeur, imprimante,
etc.) connecté à un réseau informatique utilisant l’Internet Protocol. C’est-à-dire que
votre ordinateur personnel (directement connecté à votre fournisseur d’accès) et votre
ordinateur d’entreprise (connecté à son réseau interne) utilisent le même protocole et ont
deux adresses différentes. Il existe deux versions pour écrire les adresses IP, la plus utilisée
comprend quatre nombres compris entre 0 et 254 séparés par des points. Par exemple :
72.249.159.57 désigne le serveur hébergeant le site joomla.org.
• DNS : il s’agit du système de résolution de nom de domaine (DNS pour Domain Name
System en anglais) permettant d’établir une correspondance entre une adresse IP et un
nom de domaine.
• Nom de domaine : vous en connaissez des dizaines de tête (ebay.fr, facebook.com,
lemonde.fr, etc.). Un nom de domaine est un « masque » vers une adresse IP. Per-
sonne ne se souviendrait de 72.249.159.57, alors que tout le monde se souvient de
www.joomla.org.
• Pointer : synonyme de « diriger vers ». On dit qu’on fait « pointer » un nom de domaine
vers une adresse IP.
• Serveur mutualisé ou hébergement mutualisé : dans le cadre d’un hébergement
mutualisé, vous partagez les ressources et le matériel de votre hébergement (mémoire
vive, espace disque, bande passante, etc.) avec les autres clients.
• Serveur dédié : dans le cadre d’un hébergement dédié, vous louez à votre hébergeur
un serveur uniquement dédié à vos sites ou applications. Vous et vous seul utilisez la
puissance de calcul du serveur, sa mémoire, etc.
• TTL : si vous entendez parler de TTL, c’est que vous avez fait une redirection de votre
nom de domaine et que vous vous demandez à quel moment il va pointer au bon endroit.
L’acronyme TTL (pour Time To Live en anglais) est utilisé par les serveurs DNS et désigne
le temps pendant lequel une information donnée doit être conservée en cache par le
serveur (il s’agit le plus souvent de l’adresse IP ou du répertoire vers lequel pointe un nom
de domaine ou un autre serveur DNS). Passé ce délai, l’information doit être considérée
comme obsolète et être mise à jour. Certains hébergeurs ont des TTL de 10 minutes,
d’autres de 24 heures ; c’est pourquoi il faut anticiper ce genre de manipulation en vous
renseignant auprès de votre hébergeur.

Effectuer la migration de vos données


Exporter votre base de données locale
Pour sauvegarder votre base de données, vous allez utiliser le même logiciel que pour sa
création : phpMyAdmin. L’export de votre base de données va en fait stocker des instructions
SQL (le langage de requête utilisé pour la gestion des bases de données) dans un fichier texte
au format .sql. Ces requêtes comprennent des instructions telles que la création d’une base, de
tables et l’insertion des données.
Lancez phpMyAdmin (clic gauche sur l’icône de WampServer puis cliquez sur phpMyAdmin).
Dans la colonne de gauche, cliquez sur votre base de données puis sur l’onglet du haut Exporter.
L’interface vous propose alors (figure 1.20) une méthode rapide et une méthode personnalisée.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 24 — #48
✐ ✐

24 Chapitre 1. Installer votre Joomla!

Si vous n’êtes pas développeur ou formé aux bases de données, gardez la méthode rapide et
cliquez sur « Exécuter ».

Figure 1.20 — Paramètres d’export de la base de données

Votre navigateur va alors vous demander à quel endroit enregistrer le fichier d’export. Nous
vous conseillons de vous faire un répertoire à part, uniquement pour cette occasion. Vous y
stockerez aussi bien le fichier d’export que votre copie de Joomla!.

Créer une base de données sur le serveur d’hébergement


Chaque hébergeur propose sa propre interface pour gérer les bases de données. Aussi, il sera
difficile ici de vous donner un exemple précis de la marche à suivre en fonction de chacun
d’eux. Toutefois, parmi les étapes nécessaires, vous en retrouverez des connues comme la
création d’une base de données et la connexion à phpMyAdmin. Vous pourrez notamment
consulter pour cela les sites d’assistance comme http://assistance.1and1.fr ou bien encore
http://www.ovh.com/fr/hebergement-web/guides/

Importer vos données


Une fois dans phpMyAdmin, cliquez sur votre base de données, puis sur le bouton « Importer »
dans le menu du haut. Retrouvez votre fichier d’export dans le répertoire créé pour l’occasion et
cliquez sur le bouton Exécuter situé en bas à droite.
Une fois l’import terminé, la page devrait se recharger et afficher dans la colonne de gauche
les tables de votre base de données.

À savoir : chez certains hébergeurs, les serveurs de bases de données sont lents (disponibilité
du serveur, bande passante...). Si vous avez un gros volume de données à importer, sachez
que l’opération peut prendre plusieurs secondes.

Modifier votre fichier configuration.php


Avant toute modification, faites une copie de votre fichier de configuration. Vous pourrez ainsi
revenir en arrière plus facilement.
Votre site étant configuré pour fonctionner en local, il va falloir modifier certains paramètres
pour qu’il fonctionne chez votre hébergeur. Ouvrez votre fichier avec votre éditeur de texte (voir
la section de ce chapitre dédiée aux prérequis).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 25 — #49
✐ ✐

1.5 Mettre à jour son site Joomla! 25

Les paramètres de connexion à la base de données : si vous avez installé votre site
en local, il y a de fortes chances que les paramètres de connexion à votre base de données
ressemblent à ceci :

public $host = 'localhost';


public $user = 'root';
public $password = '';
public $db = 'demo_joomla';

Remplacez « localhost » par le nom du serveur de base de données indiqué par votre
hébergeur puis remplacez « root » par votre identifiant de connexion. Indiquez ensuite dans le
champ $password, votre mot de passe et remplacez « demo_joomla » par le nom de la base de
données créée chez votre hébergeur.
Modifier les chemins : Joomla! utilise deux « chemins » vers des répertoires pour sa gestion
courante. Il va falloir que vous lui indiquiez où il va trouver son répertoire de journalisation (log)
et son répertoire temporaire (tmp).
Configuration en local :

public $log_path = 'C:\\wamp\\www\\monsite/logs';


public $tmp_path = 'C:\\wamp\\www\\monsite/tmp';

Attention ! En local si vous utilisez Windows, le chemin sera indiqué avec des « \ », alors
que, à distance, votre serveur fonctionne probablement sous Linux et utilise lui des « / ».

Voici un exemple de chemin chez un hébergeur.

$log_path = '/httpdocs/monsite/www/logs';
$tmp_path = '/httpdocs/monsite/www/tmp';

Les autres paramètres : ne vous inquiétez pas à ce stade du nom de votre site, de
l’adresse e-mail utilisée par le site et autres paramètres qui vous semblent importants. Vous
pourrez les modifier dans la configuration générale de votre site, une fois que celui-ci sera en
ligne. L’important dans une migration, c’est de récupérer correctement vos données et que votre
site fonctionne.

Transférer vos fichiers vers le serveur d’hébergement


Vous allez maintenant envoyer les fichiers Joomla! chez votre hébergeur. Dans la fenêtre « Site
local », à gauche, ouvrez le répertoire dans lequel vous avez décompressé l’archive de la
dernière version de Joomla!. Sélectionnez les fichiers, faites un clic droit et cliquez sur Envoyer
(figure 1.21).
La zone du bas va se remplir de tous les fichiers à uploader et la zone du haut va afficher
les opérations effectuées par FileZilla. Attendez que la zone du bas soit complètement vide. Il
peut arriver que la zone de droite « Site distant » n’affiche pas tous les fichiers et dossiers, cliquez
alors dans la zone, puis pressez sur la touche F5 pour rafraîchir l’écran. Vous pouvez ensuite
passer à l’étape suivante.

1.5 METTRE À JOUR SON SITE JOOMLA!

Qu’est-ce qu’une mise à jour ?


Joomla! est un projet qui évolue quotidiennement ou presque. Des mises à jour très importantes
existent, comme le passage de la version 2.5 à la version 3, tandis que d’autres sont plus

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 26 — #50
✐ ✐

26 Chapitre 1. Installer votre Joomla!

Figure 1.21 — Transfert de fichiers FTP

secondaires. Il y a eu plus de 20 versions de la 1.5 par exemple. Chacune d’entre elles (de
la 1.5.1 à la 1.5.26) a apporté son lot de mises à jour de sécurité, de correction de bug,
d’amélioration de l’interopérabilité, etc.
Une mise à jour comprend l’intégralité du code Joomla!, c’est beaucoup plus pratique
que de transmettre uniquement les fichiers mis à jour. Il suffit généralement de remplacer vos
fichiers de production par les nouveaux fichiers. Pour chaque mise à jour, le site www.joomla.fr
rédige un article expliquant pourquoi il est pertinent de passer à la nouvelle version. Presque
systématiquement, la communauté met en place des packs spécifiques pour passer d’une version
à une autre.
Quoi qu’il en soit, une mise à jour apporte plus de sécurité à votre site et n’en modifie en
rien son fonctionnement. Si vous avez travaillé sur certains fichiers ou que vous avez réalisé des
développements spécifiques, faites toujours une sauvegarde.

Est-il nécessaire de faire une mise à jour ?


À chaque nouvelle version de Joomla!, il est tentant de vouloir mettre à jour son site
immédiatement. Bien que ce livre ait été écrit pour la version 3, nous allons vous faire les
mêmes recommandations que la communauté : avez-vous besoin de la nouvelle version ? Si la
question ne se pose pas pour un nouveau site, vous devez, avec un site en production, bien y
réfléchir. Lorsqu’une nouvelle version sort, elle est dite « stable », c’est-à-dire que tout fonctionne
« normalement » ; mais cette version n’a pas encore été testée avec les milliers de composants,
plugins, templates et extensions en tout genre. Si vous utilisez des composants tiers, comme un
template ou un composant d’e-commerce, vous devez d’abord vérifier qu’ils sont compatibles
avec la mise à jour.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 27 — #51
✐ ✐

1.5 Mettre à jour son site Joomla! 27

En général, les retours des utilisateurs sont très rapidement pris en compte, mais si vous avez
un site en production et qu’il est stable, nous vous recommandons d’attendre trois mois environ
pour effectuer une migration vers une nouvelle version de Joomla! 3. Durant ce laps de temps,
la majorité des petits bugs restant aura été identifiée et corrigée et vous pourrez passer sans
crainte à cette nouvelle version de Joomla! qui apporte tant de fonctionnalités nouvelles.

Conseil : si vous ne voyez pas l’intérêt fonctionnel de mettre à jour votre site ou si vous jugez
cela trop contraignant, dites-vous bien qu’à chaque nouvelle version, votre site devient plus
vulnérable et que, lorsque vous vous déciderez, la mise à jour sera plus compliquée. C’est
pourquoi nous vous recommandons, lors de la sortie d’une nouvelle version, de mettre vos
sites à jour sans trop attendre. Vous trouverez les meilleures recommandations à propos des
mises à jour sur le site www.joomla.fr.

Anticiper les problèmes


Mon hébergement va-t-il supporter la nouvelle version ?
C’est relativement rare, mais il peut arriver (ce fut le cas avec la version 3) qu’une mise à jour de
Joomla! modifie les prérequis techniques de l’hébergement. En clair, la version 3 nécessite par
exemple PHP 5.3.1 et MySQL 5.1 pour pouvoir fonctionner (voir l’ensemble des prérequis pour
les autres bases de données et les serveurs au début de ce chapitre). Si vous faites une mise à
jour sans vérifier que votre hébergement est à jour de ces versions, votre site ne fonctionnera
tout simplement plus.
En règle générale, le logiciel open source Joomla! suit les standards d’hébergement du
marché pour ne pas imposer de version trop contraignantes, mais beaucoup d’hébergeurs
traînent à effectuer des mises à jour de leurs serveurs. Nous vous recommandons d’être vigilants
à ce sujet.
Chez certains hébergeurs comme 1&1 par exemple, la version 5.3.1 de PHP n’était pas
disponible mais pas par défaut. Il vous fallait dans ce cas, modifier le fichier htaccess pour
activer cette version de PHP. Ceci n’est plus d’actualité depuis l’automne 2014. Dans tous les cas,
rapprochez-vous de votre hébergeur et de ses sites d’assistance.

Mes extensions sont-elles compatibles ?


Si votre site utilise des extensions qui sont importantes pour son bon fonctionnement, ne vous
précipitez pas sur la nouvelle version de Joomla! mais plutôt sur les sites des extensions en
question. Voyez ce que préconisent les auteurs (ils font souvent un billet lors de nouvelle version
de Joomla!) et agissez en conséquence. Il est parfois préférable d’attendre un mois ou deux, le
temps que l’extension soit mise à jour, plutôt que de se retrouver dans la situation désagréable
de devoir faire un « downgrade » (le contraire de « upgrade », c’est-à-dire revenir à la version
précédente).

Mon template va-t-il être modifié ?


Lorsqu’une mise à jour est effectuée, il est tentant de ne se concentrer que sur les fichiers de
la nouvelle version et éventuellement sur la base de données s’il y a des modifications (ce qui
est rare). On oublie parfois que même le template contient des appels aux fonctions Joomla!
(affichage de tel module à tel endroit par exemple...).
En principe, les mises à jour de Joomla! n’affectent pas l’affichage, pourtant pour la
version 3 c’est le cas. La nouvelle version base ses templates sur le Bootstrap de Twitter, qui
inclut, entre autre, une grille sur laquelle se construit le template. Cela leur permet d’être
« responsive », c’est-à-dire qu’ils vont s’adapter non seulement au navigateur mais aussi à l’écran

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 28 — #52
✐ ✐

28 Chapitre 1. Installer votre Joomla!

utilisé (ordinateur, tablette, smartphone), permettant ainsi d’offrir une meilleure expérience de
navigation à l’utilisateur.
Si vous avez créé votre template à partir d’un des templates de base et que vous n’avez pas
changé son nom, prenez garde, celui-ci sera écrasé et vous perdrez votre mise en page.

Mise à jour facile et automatique

Le choix des pros : nous avons fait le choix de vous proposer la solution la plus facile et la plus
conviviale pour mettre à jour votre site Joomla!.

Grande nouveauté depuis la version 3, l’interface d’administration propose désormais la


mise à jour automatique de votre Joomla! en quelques clics, depuis le panneau d’administration.

Rechercher les mises à jour


La procédure est simplissime, connectez-vous à l’espace d’administration, allez dans le menu
« composants » et cliquez sur le sous-menu « Mise à jour de Joomla! » (figure 1.22).

Figure 1.22 — Recherche de mise à jour

Appliquer une mise à jour


Si une mise à jour est disponible, l’interface va vous l’indiquer comme sur la figure 1.23. Pour le
besoin de notre exemple, nous avions installé Joomla en version 3.3.0. Le système de mise à
jour automatique nous indique que la version 3.3.6 est disponible et indique l’URL à laquelle va
être téléchargé le patch.
Vous avez le choix entre deux méthodes d’installation : le transfert direct et par FTP. Cliquez
simplement sur le bouton « Mettre à jour ». L’interface va alors vous informer de la progression
de la mise à jour (figure 1.24) et vous délivrer le message final « Votre site a été mis à jour avec
succès. La version de Joomla! est actuellement 3.3.6. »

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 29 — #53
✐ ✐

1.5 Mettre à jour son site Joomla! 29

Figure 1.23 — Mise à jour automatique de Joomla!

Figure 1.24 — Mise à jour automatique de Joomla!

Mettre à jour son site manuellement


La première chose à faire si vous désirez mettre à jour votre site manuellement, c’est de
tout sauvegarder : fichiers et base de données. Vous allez devoir ensuite effectuer une série
d’opérations, dans un ordre déterminé. Pour que tout se passe bien, organisez-vous, prévoyez
du temps pour toutes ces opérations qui doivent être effectuées minutieusement. Ne planifiez
jamais de mises à jour un vendredi après-midi, si quelque chose se passe mal, vous n’aurez
personne sous la main pour vous dépanner.

Conseil : si vous en avez la possibilité, regardez vos statistiques pour savoir à quel moment vous avez
le moins de visites et planifiez votre mise à jour en conséquence.

Voici, dans l’ordre, la liste des opérations que vous allez effectuer :
• mettre votre site hors ligne ;
• purger votre cache ;
• sauvegarder votre base de données ;
• sauvegarder vos fichiers ;
• écraser les fichiers Joomla! par ceux de la nouvelle version.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 30 — #54
✐ ✐

30 Chapitre 1. Installer votre Joomla!

Mettre votre site hors ligne


C’est la première opération à effectuer, pour que la base de données cesse d’être modifiée à un
instant T. Prévenez les personnes qui travaillent dans l’espace d’administration que vous allez
effectuer une mise à jour (utilisez pour cela la messagerie interne de Joomla!) et que le site
va être indisponible. Dites-leur de ne pas se reconnecter tant qu’ils n’ont pas reçu d’e-mail les
avertissant de la fin de l’opération. Si vous ne mettez pas votre site hors ligne, un client peut
passer une commande après la sauvegarde de votre base de données, un auteur peut écrire
un nouvel article, un utilisateur peut mettre son profil à jour. Toutes ces informations courent le
risque d’être perdues.

Conseil : mieux vaut un site « en maintenance » pendant une heure que la perte de la
commande d’un client.

Dans l’espace d’administration, rendez-vous dans le menu « Système » et cliquez sur le sous-
menu « Configuration ». Dans la zone des paramètres du site, indiquez « oui » pour site hors-ligne
(figure 1.25). Nous vous conseillons d’indiquer autant que possible la date ou l’heure à laquelle
vous comptez réouvrir le site (prévoyez large) et sauvegardez. Votre site affiche maintenant un
message d’indisponibilité. Vous avez la possibilité d’ajouter votre logo en sélectionnant une
image dans le champ « Image hors-ligne ». Vous pouvez même demander à un webdesigner
de modifier cette page pour qu’elle ait l’apparence du reste de votre site. Cliquez ensuite sur le
bouton « Enregistrer » en haut à gauche de la page pour valider le changement.

Figure 1.25 — Mettre son site hors-ligne

Dans un nouvel onglet, vérifiez que votre site est bien hors-ligne et qu’il affiche le message
convenu (figure 1.26).

Purger votre cache


Si vous ne savez pas ce qu’est un cache en général, et plus spécifiquement dans Joomla!,
rendez-vous au chapitre 16.
Pour vider votre cache, rendez-vous dans le menu Système, choisissez Purger le cache. Vous
allez arriver sur la page de maintenance vous permettant de purger de cache qui va alors lister,

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 31 — #55
✐ ✐

1.5 Mettre à jour son site Joomla! 31

Figure 1.26 — Site hors-ligne

pour chaque composant et chaque module du système, le nombre de fichiers mis en cache. Par
exemple, la figure 1.27 nous indique que le groupe « thumbs », a 77 fichiers dans le cache, ce
qui représente un poids de 474,65 kb. Cliquez sur la case à cocher en haut à gauche de la liste
pour tout sélectionner, puis cliquez sur le bouton Supprimer situé en haut à gauche (figure 1.27).

Figure 1.27 — Gestion du cache de Joomla!

Sauvegarder votre base de données


Qui dit mise à jour, dit sauvegarde. Il faut que vous puissiez toujours revenir à un état stable de
votre système.
En local ou chez votre hébergeur, ouvrez l’interface phpMyAdmin et sélectionnez votre base
de données. Cliquez sur l’onglet Exporter dans le menu haut, choisissez la méthode d’exportation
« Personnalisée », et vérifiez que la case à cocher « structure et données » est bien sélectionnée,
puis cliquez sur le bouton Exécuter en bas de page.

Conseil : sauvegardez le fichier généré sur votre site, dans un répertoire spécifique, pour
être sûr de ne pas le supprimer par erreur.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 32 — #56
✐ ✐

32 Chapitre 1. Installer votre Joomla!

Sauvegarder vos fichiers


Le plus simple pour sauvegarder vos fichiers est de vous connecter en FTP à votre hébergeur et
de télécharger l’intégralité de votre site. Même s’il est volumineux, dites-vous bien que ce n’est
pas tous les jours que vous réaliserez cette opération.
Lancez FileZilla et connectez-vous au serveur FTP de votre hébergeur. Créez un nouveau
répertoire sur votre disque dur que vous nommerez de la date du jour suivi d’un intitulé clair
tel que « 2014_31_12_sauvegarde_joomla ». Dans la fenêtre « Site local », à gauche, ouvrez
le répertoire que vous venez de créer. Dans la fenêtre de droite « Site distant », sélectionnez les
fichiers avec la souris ou en faisant Ctrl + A, puis faites un clic droit et cliquez sur Télécharger.
La zone du bas va se remplir de tous les fichiers à uploader et la zone du haut va afficher les
opérations effectuées par FileZilla. Attendez que la zone du bas soit complètement vide. Si votre
site est volumineux vous pouvez aller boire un café, voire plusieurs, en fonction de la bande
passante disponible.

Mettre en place la nouvelle version


Dans un répertoire spécifique de votre disque dur, décompressez la dernière version de Joomla!.
Ouvrez votre logiciel FTP ; puis, dans la fenêtre de gauche « Site local » positionnez-vous sur le
dossier que vous venez de créer. Une fois connecté à votre hébergeur, positionnez-vous dans la
fenêtre de droite « Site distant » dans le répertoire contenant votre Joomla!
Sélectionnez alors à la souris ou en faisant Ctrl + A l’ensemble des fichiers de la nouvelle
version, faites un clic droit sur les fichiers en surbrillance et choisissez Envoyer. Selon la
configuration, votre logiciel FTP peut vous demander de confirmer l’écrasement.
Une fois que l’opération est terminée, identifiez-vous sur votre site (Front-end), et testez vos
fonctionnalités principales. Si tout fonctionne, connectez-vous à votre espace d’administration et
remettez votre site en ligne.

Conseil : Certains hébergeurs fournissent une interface de transfert de fichier FTP depuis leur
interface de gestion, évitant ainsi d’avoir recours à FIleZilla pour de longs transferts. Dans le cas de
1&1 notamment, leur interface propose la décompression de fichier archive Zip. Ceci vous permet
ainsi de ne faire le chargement que d’un seul gros fichier, que leurs serveurs se chargent ensuite de
décompresser.

En résumé
Vous avez maintenant effectué les opérations les plus techniques requises par Joomla! et vous
allez enfin pouvoir en apprécier toute la puissance. N’hésitez pas à passer du temps sur la prise
en main, afin de ne pas passer à côté d’une fonctionnalité qui pourrait vous rendre service ou
tout simplement pour bien profiter de toutes les options offertes par le logiciel.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 33 — #57
✐ ✐

2
Prise en main

Objectif
À l’issue de ce chapitre, non seulement vous ne serez plus perdu dans Joomla!, mais vous
pourrez également en expliquer le fonctionnement à un collègue. Les informations dont nous
nous sommes servis ici nous ont permis de former des dizaines d’utilisateurs à Joomla!.
Beaucoup évoluaient jusqu’alors dans un environnement bureautique simple : traitement de
texte, tableur, messagerie e-mail ; ils sont désormais tous auteurs ou webmestres gérant au
quotidien leur site en le mettant à jour et en rajoutant des pages.

2.1 COMPRENDRE LA GESTION DE CONTENU

Le principe
Les systèmes de gestion de contenu sont légions et vous en utilisez tous les jours.
Leur caractéristique commune est d’offrir un système permettant à plusieurs auteurs de
gérer (création, modification, publication, suppression) des contenus (textes, images, éléments
multimédias). Pour réaliser cette prouesse technique, plusieurs briques sont indispensables : il en
faut une pour gérer les utilisateurs et leurs différents droits, une pour gérer la chaîne éditoriale
(workflow), une pour le traitement des données et enfin, une pour l’affichage.

Rappel : aujourd’hui, tous les CMS séparent la forme du contenu, c’est ainsi que vous pouvez
travailler sur vos données, sans vous préoccuper de la façon dont elles vont être restituées. Vous
pouvez donc confier à vos experts métier la rédaction des pages les concernant et parallèlement
demander à votre webdesigner de modifier la typographie utilisée, voire même la charte graphique
dans son ensemble.

Il existe différents types de systèmes, offrant des niveaux très variables de fonctionnalités,
de facilités d’utilisation et de modularité. Au sens systémique, un tableau noir d’école avec ses
craies est un système de gestion de contenu. Bien sûr, avec un tel système, vous aurez sans

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 34 — #58
✐ ✐

34 Chapitre 2. Prise en main

doute des problèmes de diffusion (surtout si le tableau n’a pas de roulettes) et des problèmes de
sécurisation des données (une éponge peut détruire vos données). Par analogie, un classeur, un
bloc de Post-it, un logiciel de traitement de texte ou un tableur de gestion des stocks sont autant
de systèmes de gestion de contenu.

Une grande famille


L’une des branches de cette famille est appelée CMS (Content Management System). L’équivalent
français existe, il s’agit de SGC (Système de gestion de contenu), mais il est peu utilisé, le terme
anglais étant très populaire.
Les deux autres branches de la famille regroupent d’un côté les moteurs de blogs et de
l’autre les ECM (Entreprise Content Management). Les premiers ont a priori une capacité limitée
en termes de fonctionnalité, mais un volume impressionnant, puisqu’on estime à près de
200 millions le nombre de blogs à travers le monde. Les seconds sont beaucoup plus puissants
puisqu’ils ont pour vocation de traiter tous les documents d’une entreprise, et pas seulement son
contenu Web.
Un ECM doit être capable de gérer aussi bien une note de service dématérialisée que vos
devis, vos factures et avoirs, les documents reçus et scannés dans une GED (Gestion électronique
des documents), vos sites Web... Autrement dit, tous les documents de votre entreprise. Ce genre
de démarche reste toutefois l’apanage de grandes sociétés ou bien de celles brassant de grands
volumes de contenus.

2.2 JOOMLA! LE FILS PRODIGUE

Dans la famille des CMS, Joomla! est sans doute le plus polyvalent des outils. C’est aussi le plus
important, car les sites Web varient énormément d’une culture à une autre, d’un secteur à un
autre, d’une langue à une autre. Voyons maintenant les différentes briques qui le composent.

Un CMS souple et modulaire


La gestion des utilisateurs : depuis la version 1.6 de Joomla!, la gestion des utilisateurs est
vraiment puissante. Vous pouvez attribuer les droits que vous souhaitez à un utilisateur ou un
à groupe. Avec la version 3, vous avez bien sûr toute latitude pour créer autant d’utilisateurs et
de groupes que vous le désirez. En gérant ainsi les niveaux d’accès, vous pouvez autoriser une
seule personne à modifier une page importante et permettre dans le même temps à un groupe
d’auteur de mettre à jour toutes les pages d’une catégorie donnée, voir d’une seule page.
La gestion du contenu : Joomla! est organisé en catégories. Chaque page ou article créé
doit être rattaché à une catégorie. Les catégories peuvent être imbriquées entre elles. Ce mode
de fonctionnement vous permet de retrouver et de gérer plus facilement vos articles. Vous pouvez
également créer des pages « indépendantes ». C’est vous qui créez votre propre arborescence.
Vous pouvez donc recréer les catégories de votre catalogue produits. Vous avez la possibilité de
créer autant de niveaux de catégories et sous-catégories que vous le désirez ; et bien sûr autant
de pages dont vous avez besoin.
La gestion de la chaîne éditoriale : si vous êtes tout seul à gérer votre site, vous aurez
à charge de créer, modifier, valider et mettre en ligne vos contenus sans intermédiaire. En
revanche, si vous intervenez à plusieurs, vous avez la possibilité de définir très précisément qui
fait quoi et comment. Ainsi vous pouvez avoir des auteurs qui vont créer de nouveaux articles,
mais ne pourront pas les publier ; des modérateurs qui pourront seulement les modifier (pas

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 35 — #59
✐ ✐

2.2 Joomla! le fils prodigue 35

de suppression par erreurs) et des éditeurs qui pourront mettre en ligne. Tout ceci s’appelle une
chaîne éditoriale.
La gestion de la restitution graphique : dans un CMS, votre contenu est stocké dans
une base de données sous forme de code. Cela signifie qu’il est « appelé » puis mis en forme par
Joomla!. Une charte graphique dans Joomla! est modifiable avec un minimum de connaissances
techniques. Pour autant, l’aspect graphique d’un site ayant toute son importance, nous vous
conseillons de faire appel à des professionnels du webdesign possédant des notions de couleur,
de typographie, d’ergonomie et de webmarketing. Si vous souhaitez tout gérer vous-même,
sachez qu’il existe de nombreux « templates » payant, à moins de 50 €, conçus pour s’adapter à
vos contraintes et totalement administrables sans compétences techniques particulières.

L’accessibilité de Joomla!

Conseil : pour ne pas tout confondre entre sémantique, CSS, accessibilité et XHTML, lisez
l’article de Raphaël Goetter sur Alsacréations : http://www.alsacreations.com/article/lire/575-
XHTML-CSS-accessibilite-confusions-et-amalgames.html.

Dans toutes les langues : Joomla! est un projet international : des développeurs du
monde entier participent à l’élaboration de nouvelles fonctionnalités et les besoins, parfois
spécifiques, d’une culture viennent enrichir chaque jour ce projet. C’est ainsi que depuis la
version 1.5 de Joomla! (en 2006), l’internationalisation permet de traduire tous les textes
statiques d’un site (côté visiteur et côté administration). Cela vous permet par exemple d’offrir un
site en chinois (grâce à un encodage UTF-8 des caractères au format Unicode 16), administré
en arabe (support de l’écriture de droite à gauche). Avec la version 3 vous allez découvrir à quel
point il est facile d’éditer un site multilingue avec des menus et des contenus spécifiques pour
chaque langue.
Tableless : depuis la version 1.6 de Joomla! (2010), les développeurs peuvent lire dans
les explications du code « Tableless com_content layouts » ; ce qui signifie qu’il n’y a plus de
tableaux HTML utilisés pour afficher les articles et les pages de votre site (mis à part ceux que
vous y mettrez). Les tableaux (invisibles à l’internaute) étaient utilisés pour gérer la disposition
des emplacements sur le site (par exemple : une colonne à droite, un module en haut à gauche
et un en haut à droite, un en-tête et un pied de page).
L’accessibilité, une nécessité : les experts en optimisation pensent depuis plusieurs années
que l’accessibilité des pages à une réelle incidence sur le référencement d’un site. Nous vous
invitons à lire le très bon article d’Andy Hagans à ce sujet intitulé : « Vous aimez l’accessibilité ?
Les moteurs de recherche aussi ! » disponible à cette adresse :
http://www.pompage.net/traduction/accesibilitemoteursderecherche.
C’est tellement vrai qu’en 2007, Charl van Niederk s’est vu récompensé au Google « Summer
of Code » pour son projet sur la production du code généré par Joomla! au format XHTML.
C’est dire si Google et les moteurs de recherche en général apprécient les sites qui respectent
les standards et favorisent l’apparition de ce que l’on appelle désormais le Web sémantique.
Responsive web design : entre 2005 et 2008, les webmasters qui regardent les résolutions
d’écran de leurs visiteurs ont pu compter jusqu’à 400 résolutions d’écran différentes, ce qui
correspond à la multitude d’écrans disponibles sur le marché, aussi bien pour les ordinateurs,
que les tablettes ou les smartphones. Pour s’adapter, il a fallu repenser la façon dont on réalisait
techniquement le design des sites web, de là est née l’idée du responsive web design.
Avec la version 3.0 de Joomla! (2012), les développeurs ont décidé de se baser sur le
Bootstrap fourni par Twitter (http://twitter.github.com/bootstrap) pour concevoir les nouveaux
templates Joomla!. Cela ne signifie pas que tous les templates Joomla! s’adapteront aux

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 36 — #60
✐ ✐

36 Chapitre 2. Prise en main

smartphones ou tablettes, mais que les intégrateurs chargés de transformer un dessin en charte
graphique auront l’opportunité de le faire.
Si vous souhaitez en savoir plus sur le responsive web design, je vous propose de consulter
l’article de Gaétan Weltzer disponible sur http://designspartan.com/info_generale/responsive-
design-definition-fonctionnement-ressources-et-tutoriels/.

Séparer la forme du contenu


Comme nous l’avons vu au point précédent, les CMS séparent la forme du contenu, ce qui, vous
l’avez déjà compris, permet d’offrir des présentations très différentes pour un même contenu.
Cela signifie aussi que les auteurs n’ont plus qu’à se préoccuper de leurs textes, les développeurs
des fonctionnalités à coder et les webdesigners de la charte graphique. Cette séparation des
couches rend beaucoup plus facile la conception, la réalisation et la maintenance d’un site.
Joomla! est découpé en deux parties distinctes : la partie visible par les internautes, vos
membres, vos clients, vos visiteurs, c’est le site ; et la partie invisible, réservée à vous-même, à
vos auteurs et modérateurs, c’est l’espace d’administration.
Il y a donc la partie d’administration qui est sécurisée (figure 2.1).

Figure 2.1 — Connexion à l’administration

Et le site en lui-même, visible par vos visiteurs (figure 2.2).


Nous détaillerons le fonctionnement des templates dans le chapitre 12.

Conseils : travaillez systématiquement avec deux espaces (fenêtre ou onglet) de votre


navigateur : l’un pour votre espace d’administration (back-office) et l’autre pour votre site
(front-office). Vous pourrez ainsi rapidement recharger la page ou l’onglet du site afin de
visualiser les modifications que vous venez d’effectuer dans la partie administration.

2.3 APPRENDRE LE VOCABULAIRE JOOMLA!

Pour bien commencer, il faut s’approprier les termes utilisés dans Joomla! que nous reprenons
dans ce livre. Comme nous l’avons vu, il est important de savoir qu’il y a deux espaces distincts
dans votre site Joomla!. Le premier, c’est le site en lui-même, visible par les internautes ; le
second, c’est l’espace d’administration, qui est un espace fermé, accessible uniquement avec

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 37 — #61
✐ ✐

2.3 Apprendre le vocabulaire Joomla! 37

Figure 2.2 — Le site livré avec les données d’exemple

un mot de passe. C’est dans l’espace d’administration que vous allez gérer vos contenus et vos
utilisateurs.

Conseil : pour chercher un terme précis dans ce livre, référez-vous à l’index à la fin de
l’ouvrage.

Quelques termes utilisés côté site


Page d’accueil : la page d’accueil est la première page, et la page par défaut que tous vos
visiteurs verront. Elle est donc particulièrement importante et c’est pourquoi elle peut être très
différente des autres pages de navigation.
Menu : le menu est primordial dans l’ergonomie générale de votre site. C’est grâce à
lui que l’on peut accéder aux différentes rubriques. Il s’agit d’une liste d’éléments cliquables,
ordonnés verticalement ou horizontalement. Joomla! vous permet d’en créer plusieurs, d’en
réserver certains à vos membres, etc.
Template : c’est un élément important de votre site puisqu’il s’agit de votre charte
graphique ! Le template est composé de plusieurs fichiers dont des feuilles de style (CSS) et
les images utilisées par votre charte graphique. Nous verrons dans le chapitre 12, toutes les

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 38 — #62
✐ ✐

38 Chapitre 2. Prise en main

fonctionnalités liées aux templates, mais sachez déjà que vous pouvez en faire coexister plusieurs
sur le même site, ce qui s’avère très utile pour créer des « univers » différents. Vous pouvez
ainsi afficher une page d’accueil verte et avoir un espace dédié (accessible ou non après
authentification) en rouge.

Quelques termes utilisés côté administration


Article/Page : dans Joomla!, toutes les pages de votre site sont des articles. Un article peut
avoir différents types de contenus : textes, images, liens, vidéos, sons. Un article se définit par de
nombreuses caractéristiques, mais les plus essentielles sont : son titre, sa catégorie (voir ci-après),
son contenu et son état (publié, non publié, dans la corbeille, archivé).
Catégorie : pour présenter vos contenus de manière logique et accessible, chaque article
est rangé dans une catégorie. Imaginez un classeur. Pour vous repérer parmi les multiples feuilles
qui composent vos différents cours, vous utilisez des intercalaires, afin de regrouper les feuilles
qui traitent du même sujet. Une catégorie dans Joomla! fonctionne de la même manière. Si vous
publiez des articles de décoration de votre maison, vous ferez une rubrique « cuisine », une autre
« salon », etc. Vous pouvez non seulement créer autant de catégories que vous le désirez, mais
également les imbriquer à plusieurs niveaux comme le montre la figure 2.3 avec les catégories
des données d’exemple si vous avez les avez installées (voir chapitre 1).

Figure 2.3 — L’imbrication des catégories des données d’exemple

Publier/Dépublier : il s’agit d’une notion importante et qui est valable pour tous les CMS.
Lorsque vous créez un article dans l’espace d’administration, il est stocké dans la base de
données. Cela ne veut pas dire pour autant qu’il est visible sur votre site Web ! En publiant votre
article, votre catégorie ou votre menu, vous les rendez visibles. En dépubliant, vous ne supprimez
pas l’élément concerné, vous le rendez simplement invisible pour le visiteur. Sachez que vous
avez la possibilité de programmer la publication d’un article (date de début et de fin). Il vous est
également possible de programmer la publication d’un module, comme vos dernières actualités.
Enregistrer : lorsque vous avez modifié un article ou un élément de menu et que vous
souhaitez vérifier la modification sur le site, cliquez sur Enregistrer et rechargez la page du site sur
laquelle vous travaillez : vous pourrez ainsi visualiser les modifications. Si vous souhaitez créer
plusieurs articles, catégories ou modules à la suite, vous apprécierez vite le bouton « Enregistrer &
nouveau ».

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 39 — #63
✐ ✐

2.4 Visite guidée du site de démo 39

2.4 VISITE GUIDÉE DU SITE DE DÉMO


Voyons un petit peu à quoi ressemble un site Joomla! avec les « Données exemples pour
apprendre Joomla!, en français » (voir chapitre 1). Si vous n’avez pas choisi des données
d’exemple lors de l’installation, votre site sera tout simplement... vide. Or un logiciel de gestion
de contenu est plus facile à prendre en main avec du contenu. Si vous avez suivi l’installation du
chapitre 1, votre site ressemblera à ceci (figure 2.4).

Figure 2.4 — Explications du site exemple

Comme vous pouvez le constater, votre site est déjà constitué de plusieurs éléments. Vous
y trouverez plusieurs menus qui vous permettront de naviguer dans le site, des éléments
d’ergonomie, un moteur de recherche interne qui offre à vos visiteurs la possibilité de chercher
dans votre site et différents articles à la une. Promenez-vous dans le site afin d’avoir une idée de
l’environnement de vos futurs contenus.

Plusieurs sites en un seul


Vous avez besoin de créer des « espaces » différents ? Que ce soit pour des types de visiteurs ou
des « univers produits », vous allez maintenant voir ce qu’il est possible de faire avec un Joomla!.
Les données d’exemple contiennent en fait trois sites, très différents en ergonomie, charte
graphique et contenu : le site qui présente Joomla! que nous venons de voir, un site sur les parcs
australiens et un site pour une boutique de fruits.
Site sur les parcs australiens : dans le menu du haut, cliquez sur le menu Sites exemples
puis sur Parcs australiens pour commencer la visite.
Ce site se présente comme un blog. Le contenu est au centre, avec un menu en haut et une
barre latérale à droite dans laquelle on retrouve d’autres éléments de navigation : les derniers
articles écrits, des liens vers le blog, les galeries photos et un annuaire de liens (figure 2.5).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 40 — #64
✐ ✐

40 Chapitre 2. Prise en main

Figure 2.5 — Site d’exemple sur les parcs australiens

Regardez maintenant comment les composants pré-installés de Joomla! peuvent vous aider
à construire votre site. Cliquez sur Galerie Photo puis sur Animaux pour afficher les albums
photos des parcs australiens (figure 2.6).

Figure 2.6 — Une galerie photo

Pour réaliser cette galerie photos, rudimentaire, mais efficace, créez une catégorie d’articles
« album 1 » par exemple. Créez plusieurs articles et insérez-y la miniature d’une de vos photos,
un lien « lire la suite », puis la photo en grande taille (attention toutefois aux dimensions de
l’image et à son poids pour un affichage correct). Paramétrez l’affichage de la catégorie pour
que le texte d’introduction ne soit pas visible une fois « rentré » dans l’article. Pour rendre plus
dynamique cette galerie, vous pouvez également ajouter un lien hypertexte vers la photo de
grande taille sur la miniature.
Site de boutique de fruits : pour visiter ce second site, cliquez sur Sites exemples dans le
menu haut puis sur Boutique de fruits (figure 2.7).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 41 — #65
✐ ✐

2.4 Visite guidée du site de démo 41

Ce site n’est pas un site d’e-commerce (voir à ce sujet l’extension spécifique VirtueMart sur
www.joomla.fr), mais il est suffisant pour présenter l’activité d’une boutique : ses produits, les
recettes associées, un plan d’accès et un formulaire de contact. Le site permet également de
renseigner ses clients et offre même un accès privatif aux fournisseurs.

Figure 2.7 — Site exemple d’une boutique de fruits

Des outils omniprésents


Pour bien profiter de Joomla!, il y a quelques règles simples à garder à l’esprit, notamment celle-
ci : l’essentiel des fonctionnalités dont vous pouvez avoir besoin est déjà présent dans Joomla!.
Comme vous avez pu le voir en naviguant dans les deux sites d’exemple, les composants,
modules et plugins pré-installés s’avèrent très utiles. Vous verrez au chapitre 6 comment enrichir
vos contenus et au chapitre 10 comment rajouter des extensions tierces pour augmenter les
fonctionnalités de votre site. Passons maintenant en revue quelques exemples pratiques.
Le fil d’Ariane/fil de navigation : lorsque l’on parle d’ergonomie ou de proxémie, on
veille généralement à ce que les utilisateurs sachent toujours où ils sont. Un fil d’Ariane ou
« breadcrumbs » en anglais est une succession de liens qui permet à vos internautes de savoir
dans quelle partie de votre site ils se trouvent. Plus que cela, la succession de liens d’un fil
d’Ariane renseigne sur l’imbrication des catégories et donc sur la logique de catégorisation de
vos contenus. Aussi utile que discret, nous vous recommandons fortement d’activer ce module
sur tous vos sites (figure 2.8).

Figure 2.8 — Le fil d’Ariane ou breadcrumbs

Le moteur de recherche : parce que les utilisateurs ont pris l’habitude de se servir d’un
moteur de recherche, c’est un outil qu’il ne faut pas négliger et qu’il convient de proposer
systématiquement à vos visiteurs, d’autant que celui de Joomla! 3 est très performant.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 42 — #66
✐ ✐

42 Chapitre 2. Prise en main

2.5 VISITE GUIDÉE DE L’ADMINISTRATION

L’espace d’administration se situe à une adresse Web différente de la page d’accueil de votre
site et est régi par des règles d’accès qui permettent à des utilisateurs de s’y connecter et d’y
effectuer les tâches pour lesquelles vous leur avez donné des droits (créer une nouvelle catégorie,
une actualité, un nouveau produit, etc.). Tout ce que vous y ferez se répercutera sur la partie
visible du site.
Rendez-vous, en local ou sur le Web, à l’adresse de votre site. Saisissez pour cela le nom du
site suivi de « /administrator » :

http://localhost/monsite/administrator
ou
http://www.mon-site.fr/administrator

Identifiez-vous puis parcourez le panneau d’administration.

Le panneau d’administration
Le panneau d’administration est un carrefour que vous emprunterez souvent. Il vous permet
en effet d’accéder à tout ce qui est administrable dans Joomla! : configuration, gestion des
utilisateurs, des articles, des medias, des extensions, etc. Le panneau d’administration (figure 2.9)
est composé d’une barre de menu, d’icônes d’accès rapides et de modules présentant les
utilisateurs connectés et les articles populaires de votre site.

Figure 2.9 — Tableau de bord de Joomla!

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 43 — #67
✐ ✐

2.5 Visite guidée de l’administration 43

Les différents menus


Système : dans ce menu, vous accéderez aux réglages du « moteur » de Joomla! : la configura-
tion, les opérations de maintenance et les informations sur le système.
Utilisateurs : nous l’avons déjà évoqué, la gestion des utilisateurs est un élément crucial de
votre site. Avec cette nouvelle version de Joomla!, vous avez à votre disposition un système encore
plus puissant de gestion des groupes d’utilisateurs et des niveaux d’accès. C’est naturellement
dans cette partie que vous allez créer et gérer vos comptes utilisateurs (droits, mots de passe,
mises à jour du compte).
Menus : l’une des forces de Joomla! (force qui rend parfois difficile de s’approprier sa
logique) est d’avoir dissocié le contenu, des liens vers le contenu, à savoir les menus. Vous
pouvez en effet créer autant de contenus que vous le désirez et le « publier ». Si vous ne faites
pas de lien vers vos contenus, ils ne seront tout simplement pas accessibles.
Via ce menu, vous pourrez créer de nouveaux menus et les gérer dans leurs moindres détails :
liens vers vos articles, vos catégories, liens vers les extensions que vous aurez installées, etc. Le
menu principal contenant l’élément « Accueil » permet également un certain nombre de réglages
de la page d’accueil ; page qui est souvent très différente des autres pages du site.
Contenu : il s’agit bien entendu du menu le plus sollicité de Joomla! dans la mesure où il
permet de gérer l’ensemble de vos contenus. C’est dans ce menu que vous allez créer et gérer
vos catégories, puis vos « articles » ou « pages », en fonction de la manière dont vous les appelez,
ainsi que vos éléments multimédias (images, vidéos, documents).
Composants : Joomla! est livré avec des composants par défaut comme un composant de
gestion des bannières publicitaires ou un gestionnaire de contact. Vous pouvez en ajouter autant
que vous le voulez, pourvu qu’ils soient compatibles entre eux. Chaque composant a sa propre
interface de gestion. On y accède à partir du menu « Composants ». Vous découvrirez à partir
du chapitre 10 dédié aux extensions les fonctionnalités des différents composants par défaut et
dans la quatrième partie des cas pratiques.
Extensions : avec ce menu, vous accédez à la gestion de tous les composants supplémen-
taires :
• Le premier élément, Gestion des extensions, vous permet d’ajouter ou de supprimer des
extensions – composants, modules, plugins et templates.
• Avec l’élément Gestion des modules, vous pourrez gérer les modules du site pour les
visiteurs (le front-end), mais aussi ceux de la partie administration du site (le backend).
Vous pourrez choisir de les publier ou non, de les placer au bon endroit (dans la colonne
de gauche ou de droite, en haut, en bas...), de les ordonner les uns par rapport aux
autres et de les paramétrer.
• L’élément Gestion des plugins permet, comme son nom l’indique, de gérer les plugins.
Les plugins sont de petits bouts de code qui peuvent s’avérer extrêmement utiles.
• L’élément Gestion des templates vous permet d’assigner un template particulier à une
partie de votre site, comme un univers rouge et jaune pour vos visiteurs espagnols et un
univers bleu et jaune pour vos visiteurs suédois. Depuis l’arrivée du framework (brique
logicielle) Bootstrap de Twitter, Joomla! 3 vous permet dorénavant (pour les templates
compatibles) de modifier l’ergonomie de votre template sans connaissance technique
particulière. Si vous cliquez sur Gestion des templates, puis sur Beez3 – Boutique de
fruits et enfin l’onglet Paramètres avancés, vous accéderez aux paramètres avancés du
template. Regardez sur la figure 2.10, vous verrez que vous pouvez modifier la largeur de
la colonne principale de votre site. Là où auparavant il fallait des compétences techniques
pointues, Joomla! vous permet de prendre la main.
• L’élément Gestion des langues permet de choisir la langue par défaut côté site et côté
administration. Vous pouvez très bien avoir un site dont l’administration est en français et
dont la partie visible est en trois langues : français, anglais, allemand. Dans ce cas, si vous

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 44 — #68
✐ ✐

44 Chapitre 2. Prise en main

Figure 2.10 — Gestion fine des paramètres d’un template

avez à votre charge la traduction des contenus, sachez que 59 langues sont disponibles
pour l’interface de Joomla! 3, y compris des langues avec des alphabets autres que latin,
comme le cyrillique, et même des langues se lisant de droite à gauche comme l’arabe.
Avoir plusieurs de ces langues dans un même site ne pose aucun problème. Si vous
cliquez sur le menu Extensions, puis Gestion des langues, vous verrez (figure 2.11) que
les données d’exemple ont bien installé deux langues : le français et l’anglais. L’interface
vous informe que le français est la langue par défaut.

Figure 2.11 — Gestion fine des paramètres d’un template

Aide : ce menu est une mine de ressources en ligne. Parmi ces ressources, la plus pratique
est sans doute « l’Aide de Joomla! » qui ouvre, dans l’administration de votre site, un lien vers
l’aide française. Les autres liens vous orientent vers la communauté internationale de Joomla!
(forums et wikis de la documentation, en anglais). Vous trouverez également dans ce menu des
liens vers les extensions, les traductions, les ressources, le portail communautaire, le centre de
sécurité, les ressources pour les développeurs et la boutique Joomla!.

Le Forum de support officiel est en anglais tandis que le Forum joomla.fr est en français.

À droite du menu du haut, vous trouverez le module de déconnexion à l’espace d’admi-


nistration (figure 2.12). Ce module permet également d’accéder à la gestion de votre compte
utilisateur.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 45 — #69
✐ ✐

2.5 Visite guidée de l’administration 45

Figure 2.12 — Bandeau d’information dans l’administration

Les icônes d’accès rapide


Les icônes d’accès rapides présentes sur la page d’accueil du panneau d’administration
constituent, au même titre que les menus, une forme d’accès. Vous y retrouverez l’ensemble
des fonctionnalités les plus utiles comme : « Ajouter un article » ou « Gestion médias », et même
savoir si une mise à jour est disponible.

Les modules de l’administrateur

Astuce : vous pouvez composer le panneau d’administration qui vous convient en activant ou en
désactivant certains modules (figure 2.13). Rendez-vous pour cela dans le menu « Extensions » puis
dans « Gestion des modules ». Sur le premier filtre situé à gauche, choisissez « Administration ». Les
seuls modules qui s’afficheront alors seront ceux réservés à l’administrateur. Si vous ne voulez plus
afficher les « Utilisateurs connectés » par exemple, il vous suffit de dépublier le module du même
nom en cliquant simplement sur la coche verte.

Figure 2.13 — Composer son panneau d’administration

Utilisateurs connectés : s’affichent ici les cinq derniers utilisateurs connectés sur le site à
l’instant où la page se charge. Vous les identifiez par leur nom d’utilisateur, l’endroit où ils se
trouvent (sur le site ou dans l’espace d’administration) et leur identifiant. Pour charger la fiche
d’un utilisateur, il suffit de cliquer sur son nom.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 46 — #70
✐ ✐

46 Chapitre 2. Prise en main

Articles populaires : vous pouvez utiliser cette liste comme un écran de statistiques
basiques. Les cinq articles les plus populaires sont listés ici, par ordre du nombre de clics.
Vous trouverez ici le nom de l’article, sa date de création et le nombre de clics. On parle de
« statistiques basiques » car le nombre de requêtes n’est en effet pas synonyme de nombre de
visiteurs ou de nombre de pages vues. Nous vous conseillons donc d’installer un système de
statistiques plus évolué de type « Google Analytics » (voir le chapitre 9 sur le référencement).
Articles les plus récents : ce sont tout simplement les cinq derniers articles ajoutés, listés
du plus récent au plus ancien. Ils sont identifiés par leur nom, leur auteur et leur date de création.

En résumé
Comme avec tout nouvel outil, vous passerez par une période d’apprentissage. Cette période
sera grandement facilitée par l’ergonomie intuitive de Joomla!. Une fois que vous vous serez
approprié la logique de cet excellent CMS, il ne s’agira plus d’un Joomla!, mais de votre site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 47 — #71
✐ ✐

3
Paramétrer
votre Joomla!

Objectif
Paramétrer votre site Joomla! revient en fait à effectuer toute une série de réglages pour que
le site fonctionne à votre manière. À la fin de ce chapitre un peu plus technique que les
autres, vous aurez pris connaissance de toute une série de variables qui optimisent certaines
fonctionnalités et qui en interdisent d’autres. Votre site sera alors prêt à être utilisé, en toute
sécurité.

Une fois que votre Joomla! est installé, certains paramètres doivent être configurés immédia-
tement. Pourquoi ? Parce qu’ils conditionnent le fonctionnement d’un certain nombre d’éléments
qui ne sont pas anodins. Rien n’étant figé dans le marbre, vous pourrez bien entendu revenir
ultérieurement sur ces paramètres et ainsi modifier vos premiers choix.
Même si vous souhaitez publier tout de suite votre premier article, ce serait une erreur de ne
pas modifier ou de ne pas prendre connaissance de ces éléments importants. En effet, ceux-ci
déterminent de manière significative l’usage de votre site et impactent aussi bien sa mise en
page que son positionnement sur les pages de résultats des moteurs de recherches.
Pour accéder à ces différents réglages, cliquez sur Configuration dans le menu Système ou
bien, sur le panneau d’administration (page d’accueil une fois que vous êtes connecté dans le
back-office), cliquez sur Configuration dans le bandeau de gauche. L’espace de configuration
est composée de 5 onglets : Site, Système, Serveur, Droits et Filtre de texte.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 48 — #72
✐ ✐

48 Chapitre 3. Paramétrer votre Joomla!

Le fichier de configuration
Le fichier de configuration est un élément vital de votre site, car il contient notamment les identifiants
et adresses permettant la connexion de Joomla! au serveur de base de données. Soyez donc prudent
dans les modifications que vous y apporterez.

3.1 ONGLET SITE

Paramètres du site
Dans les réglages du site, on rencontre des paramètres fondamentaux, comme le nom de votre
site ou, plus simplement, son statut : « en ligne » ou « hors ligne ».
Nom du site : le nom de votre site va s’afficher à différents endroits : dans la barre de titre
du navigateur, dans l’en-tête des e-mails que le système envoie (par exemple dans le cas de la
création d’un compte ou du renouvellement d’un mot de passe). Le nom sera également repris
dans les flux RSS propulsés par le site et il pourra, si le template y fait appel, s’afficher sur toutes
les pages du site, à côté de votre logo par exemple. C’est le cas du template par défaut livré
avec Joomla! 3 comme le montre la figure 3.1. Si vous faites une modification, appuyez sur le
bouton vert Enregistrer en haut à gauche et allez voir sur le site pour constater les changements.

Figure 3.1 — Modifier le nom de votre site

Site hors ligne : Joomla! vous offre la possibilité, en un simple clic, de mettre votre site
hors ligne. Cette fonctionnalité peut s’avérer très pratique lorsque vous installez un nouveau
composant et que vous voulez le tester avant de le proposer à vos visiteurs, ou bien dans le cas
d’une opération de maintenance ou d’un changement de template. Sans aucune incidence sur
vos données, le site affichera alors le message que vous aurez saisi dans cette rubrique.
Pour faire basculer votre site hors ligne, cliquez simplement sur le bouton Oui et sauvegardez.
Dans la fenêtre de votre navigateur, visitez alors votre site pour voir à quoi il ressemble. Cette
manipulation ne bloque en rien l’accès à l’espace d’administration, ce qui permet à vos auteurs
et à vous-même de continuer à travailler et même de naviguer dans le site puisqu’il suffit
de vous authentifier pour y accéder (même identifiant et mot de passe que pour accéder à
l’administration).
Message hors-ligne : vous avez le choix de ne pas faire apparaître de texte, hormis le
nom de votre site et le formulaire d’authentification, ou de sélectionner un message spécifique.
Si vous avez un site multilingue, sélectionnez plutôt l’option « Message défini par la langue du
site », ainsi, en fonction de la langue du navigateur, Joomla! affichera le message par défaut :
« Ce site est en maintenance. Merci de revenir ultérieurement. »
Message spécifique : nous vous conseillons de mentionner en quelques mots les raisons
pour lesquelles le site est hors ligne ainsi qu’une adresse e-mail ou un numéro de téléphone pour
que les visiteurs puissent poser des questions ou se renseigner en cas d’urgence (figure 3.2).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 49 — #73
✐ ✐

3.1 Onglet site 49

Figure 3.2 — Préparer la mise hors-ligne de son site

Image hors ligne : pour customiser votre page d’attente et la mettre à vos couleurs (logos,
charte graphique), vous pouvez y ajouter une image. Imaginez qu’il s’agit de la devanture d’un
magasin en travaux. Mieux vaut une belle affiche avec une date d’ouverture que des cartons qui
laissent à penser que le magasin n’ouvrira jamais.
Essayons avec une image disponible depuis votre ordinateur. Cliquez sur le bouton
Sélectionner, une fenêtre pop-up va s’ouvrir. Dans la partie basse de la fenêtre, cliquez sur
le bouton parcourir (figure 3.3) puis naviguez sur votre ordinateur à la recherche d’une image et
sélectionnez-la. Cliquez sur Ouvrir puis, dans la fenêtre pop-up sur le bouton bleu Démarrez
l’envoi. Votre image va alors être transférée et apparaître dans le répertoire d’images de Joomla!.

Figure 3.3 — Ajouter une image pour la page d’attente

Cliquez ensuite sur l’image que vous venez d’ajouter, son URL va s’afficher dans le champ
juste en dessous. Cliquez sur le bouton bleu Insérer situé en haut à droite et la fenêtre pop-up se
refermera. Cliquez sur le bouton vert Enregistrer en haut à gauche de la page et allez voir sur
votre site. N’oubliez pas de rafraîchir la page en appuyant sur F5.
Éditeur par défaut : Joomla! est compatible avec plusieurs éditeurs de texte. Il faut en
choisir un par défaut qui sera alors l’éditeur courant utilisé sur votre site. Vous pouvez bien sûr
ajouter d’autres éditeurs, tels que JCE par exemple.
Un éditeur de texte ou WYSIWYG (What you see is what you get) vous permet d’obtenir le
rendu écran de ce que vous avez saisi. L’éditeur est extrêmement important pour vous et vos
auteurs, car c’est lui qui vous permet de mettre vos contenus en forme (gras, italique, couleur,
image, lien hypertexte, etc.), sans aucune connaissance en HTML ou en CSS. Les éditeurs de
texte d’aujourd’hui proposent des interfaces comparables à celles des logiciels de traitement de
texte que nous utilisons quotidiennement ; et c’est une des raisons de la popularité des CMS.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 50 — #74
✐ ✐

50 Chapitre 3. Paramétrer votre Joomla!

Figure 3.4 — Une page hors-ligne bien préparée

Figure 3.5 — L’éditeur texte TinyMCE

Par défaut, Joomla! vous propose d’utiliser l’éditeur TinyMCE (figure 3.5).
Pour utiliser un autre éditeur de texte (notre préférence va à JCE), installez-le via le menu
Extensions, puis revenez ici pour le sélectionner par défaut. Si plusieurs éditeurs sont installés
sur votre Joomla!, ceux-ci seront accessibles à vos auteurs, éditeurs et modérateurs. Ils pourront
alors sélectionner celui qu’ils préfèrent dans leur profil utilisateur.
Captcha par défaut : depuis la version 2.5, Joomla! est livré avec le captcha « ReCaptcha »
(figure 3.6) mis au point par des chercheurs de l’Université Carnegie-Mellon et qui est, depuis
2009, propriété de Google. Google s’en sert notamment sur les formulaires de mises à jour de
Google Street View. L’objectif du captcha est de différencier un humain d’un robot et donc de
diminuer les phénomènes de SPAM. Si vous souhaitez utiliser le captcha sur vos formulaires de
contact généré par Joomla!, vous devrez vous créer un compte (gratuit) sur l’interface de Google
et déclarer votre site (communiquer son URL).
Accès par défaut : il s’agit du niveau d’accès par défaut qui sera attribué à un nouvel
utilisateur. Cette option n’est pas importante si vous gérez vous-même la création de compte. En
revanche, si vous autorisez la création automatisée des comptes utilisateurs via l’interface du site
prévue à cet effet, faites bien attention à ce que vous choisissez !

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 51 — #75
✐ ✐

3.2 Onglet système 51

Figure 3.6 — ReCaptcha en action sur un formulaire de contact

Longueur des listes : dans l’administration de Joomla!, de nombreuses pages affichent


des listes déroulantes. Vous pouvez régler par défaut le nombre d’éléments que les listes doivent
afficher. Si vous avez une faible bande passante ou des problèmes de connexion Internet, nous
vous conseillons de n’afficher que peu d’éléments, cela accélérera le chargement de vos pages.
Fils RSS/ATOM : il s’agit du nombre d’articles que vont afficher vos flux RSS et/ou Atom.
10 est un bon nombre.
E-mails des fils : les flux RSS et Atom de votre site incluent une adresse électronique. Vous
pouvez choisir ici de publier celle de l’auteur(e) de l’article, celle du site, ou aucune.

Paramètres SEO et paramètres des métadonnées


Afin de centraliser l’ensemble des opérations de référencement au même endroit, les explications
relatives aux réglages des métadonnées et aux réglages d’optimisation pour les moteurs de
recherche sont présentées au chapitre 9 sur le référencement.

Paramètres des cookies


Si vous pensez accéder à une recette de biscuits américains, ne touchez à rien ; sinon, c’est ici
que vous allez pouvoir indiquer, de manière facultative, les réglages liés aux cookies créés par
votre site.
Domaine du cookie : indiquez ici le nom de domaine utilisé pour les cookies de session.
Si vous désirez appliquer le nom de domaine à tous les sous-domaines, faites précéder le nom
de domaine d’un point (.).
Chemin des cookies : indiquez ici un chemin particulier pour stocker les cookies.

3.2 ONGLET SYSTÈME


Les paramètres du système Joomla! sont des éléments techniques complexes, mais ils sont tout à
fait à la portée d’un curieux.

Paramètres système
Dossier « logs » : les « logs » ou fichiers de journalisation en français peuvent vous être
extrêmement utiles si vous avez un souci avec un composant ou autre. Sauf si vous savez
ce que vous faites, ne modifiez pas ce chemin d’accès.
Serveur d’aide : à partir de la version anglaise officielle, de nombreuses communautés
internationales ont créé leur version d’aide en ligne. Sélectionnez la version française ou la
langue que vous désirez.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 52 — #76
✐ ✐

52 Chapitre 3. Paramétrer votre Joomla!

Paramètres de débogage
Sous le nom un peu barbare de « débogage » se cache en fait une histoire poétique. Le débogage
est l’équivalent français du fait d’enlever des « bugs ». Dans les années 1950, les premiers
ordinateurs étaient équipés de grosses ampoules. De tout petits moustiques (« bug » en anglais)
les faisaient claquer, rendant ainsi les calculateurs hors d’usage. Héritage de cette époque,
lorsqu’une fonction fait « planter » un système, on parle alors de « bug » ou de « bog » ; d’où un
« débogage » qui permet aux développeurs de trouver la source d’un problème.

Attention ! Un débogage en production peut nuire à votre image. En effet, il pourrait sembler non
professionnel, voire dangereux, d’afficher en production des informations sur les fonctions utilisées,
un composant qui ne fonctionnerait pas bien ou sur des chemins d’accès (path) à votre système.

Débogage système : activez cette option si vous désirez voir s’afficher les erreurs SQL.
Attention, elles seront affichées aussi bien dans l’administration que sur votre site, dans un encart,
en bas de page.
Débogage de langue : Joomla! est traduit dans presque toutes les langues, avec des
qualités parfois variables. Si vous désirez modifier un fichier de langue, activez ce débogueur.

Paramètres du cache
Pour plus de détails sur ce qu’est le cache, rendez-vous au chapitre 16 dédié à la maintenance.
Cache : Joomla! vous propose deux niveaux de cache si vous souhaitez l’activer : le cache
conservateur et le cache progressif. Dès lors que vous aurez plusieurs centaines de visiteurs
uniques par jour, vous risquez de rencontrer un problème vis-à-vis de votre hébergeur (surtout si
vous êtes en mutualisé) car votre site va effectuer autant de requête PHP, ce qui risque de saturer
le serveur.
La méthode du cache conservateur ne met en cache que certains éléments d’une page de
votre site comme le contenu d’un article par exemple. Cette option permet de diviser par 2 ou 3
le temps de chargement d’une page.
Le cache progressif, lui, met un maximum d’éléments de votre site en cache tels que les
modules et menus, en plus des contenus. Ce système est vraiment pour les gros sites, néanmoins
il nécessite un plus grand espace disque.

Attention ! Si vous créez une nouvelle page, le cache va automatiquement se régénérer,


sauf dans le cas d’une publication programmée. Nous avons noté que dans ce cas, le cache
ne se régénère pas tout de suite. Si vous faites une modification sur un module ou un menu
et que vous êtes en cache progressif, alors videz votre cache après chaque mise à jour (menu
système, sous-menu Purger le cache).

Gestion du cache : dans Joomla! 3, seul le système de gestion par fichier est disponible.
Attention, il faut que ces fichiers soient accessibles en écriture. Si vous avez un doute, lancer
Filezilla et faite un clic droit sur le répertoire cache, à la racine de votre site. Les droits doivent
correspondre au CHMOD 777.
Durée du cache : elle est exprimée en minute. C’est ici que vous pouvez jouer sur la durée
de conservation du cache avant qu’il ne doive être renouvelé. Si vous faites peu de mises à jour,
vous pouvez opter pour un cache de 2880 minutes, ce qui correspond à 2 jours. Si vous faites
des mises à jour fréquentes, comme plusieurs news par jour, optez pour 60 minutes.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 53 — #77
✐ ✐

3.3 Onglet serveur 53

Configuration des sessions


Les sessions sont utilisées dans beaucoup de sites Web. Elles augmentent la sécurité d’un espace
à accès restreint. Lorsque vous vous connectez à l’espace d’administration de votre site, vous
ouvrez une nouvelle session. À chaque fois que vous cliquez, Joomla! vérifie que votre session
est toujours valide. Si c’est le cas, cela prolonge la durée de la session (15 minutes par défaut).
Si vous ne faites rien pendant toute la durée de la session puis que vous cliquez sur un bouton,
le gestionnaire de session va estimer que la session a expiré et va donc vous déconnecter et vous
renvoyer vers la page d’authentification.
Durée : cette option vous permet de modifier la durée de la session. Si vous êtes tenté
d’augmenter la durée de vos sessions par confort, parce que vous restez régulièrement sur une
page de l’administration pour y revenir une heure plus tard, gardez à l’esprit qu’une session de
courte durée augmente la sécurité de votre site.
Méthode : vous pouvez choisir de faire gérer vos sessions à Joomla!, soit dans un fichier,
soit dans une base de données. Nous vous conseillons la base de données, surtout si votre site
est bien fréquenté.

3.3 ONGLET SERVEUR

Tout comme les paramètres du système, les réglages du serveur sont des éléments sensibles qu’il
faut manier avec précaution. Si vous n’êtes pas développeur ou administrateur de serveur, nous
vous recommandons de ne pas modifier les paramètres par défaut.

Paramètres du serveur
Dossier temporaire : le dossier « Temp » pour « temporaire » est un dossier utilisé par Joomla!
pour y stocker de façon temporaire des fichiers, par exemple lorsque vous mettez une extension
à jour. Vous pouvez indiquer ici un chemin vers ce dossier.
Compression GZIP : ce mécanisme provoque la compression des pages avant de les
renvoyer au navigateur du client. Il faut que le navigateur et le serveur Web sachent exploiter
cette fonction. Elle est conseillée lorsque les visiteurs sont nombreux à ne pas disposer d’une
connexion ADSL. En revanche, si le serveur commence à être surchargé, il vaut mieux ne pas
activer cette option. Elle oblige à un traitement supplémentaire, sauf si la librairie de fonctions
GZIP a été intégrée directement dans le code du serveur. Pour certaines configurations de serveur,
le fonctionnement est plus rapide sans cette fonction !
Rapport d’erreurs : cela vous permet d’ajuster la densité des messages d’erreurs issues
du système de gestion d’erreurs de PHP.
Le réglage « par défaut » prend en compte les paramètres du fichier de configuration
php.ini. « Aucun » n’affiche aucune des erreurs remontées. « Simple » remonte les erreurs et les
avertissements et correspond à :

error_reporting(E_ERROR|E_WARNING|E_PARSE

« Maximum » remonte les erreurs, les avertissements et les conseils. Cela correspond à :

error_reporting(E_ALL

Attention ! Les messages d’erreur sont affichés à l’écran. Nous vous conseillons de sélectionner
« aucun » pour un site en production.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 54 — #78
✐ ✐

54 Chapitre 3. Paramétrer votre Joomla!

Forcer SSL : si vous ne savez pas ce qu’est un protocole sécurisé, ne modifiez pas la
configuration par défaut. Vous pouvez régler ce paramètre pour forcer la prise en charge SSL
seulement pour l’espace d’administration ou pour votre site tout entier.

Attention ! Pour activer la navigation par protocole sécurisé (HTTPS), il vous faut disposer
d’un certificat SSL chez votre hébergeur, ce qui n’est presque jamais le cas chez un hébergeur
mutualisé.

Localisation
Ils permettent d’indiquer le fuseau horaire dont va se servir votre site. Si vous hébergez un site
à destination d’un public français sur un serveur américain, choisissez « Paris » comme fuseau
horaire, sinon, c’est l’heure américaine qui servira de référence à votre site. Cela peut s’avérer
gênant si vous programmez la publication automatique d’articles ou d’actualités.

Paramètres FTP
Activer le FTP : certains serveurs (donc certains hébergeurs) font la différence entre un utilisateur
FTP et un utilisateur HTTP. C’est ainsi que votre site Joomla! peut se retrouver dans l’incapacité
de télécharger des fichiers, n’ayant pas les droits FTP. Dans ces cas-là, activez le FTP.
Serveur FTP : saisissez ici le nom du serveur FTP (fourni par votre hébergeur).
Port FTP : indiquez ici le port spécifié par votre hébergeur (autre que le port 21).
Identifiant FTP : saisissez votre identifiant FTP.
Mot de passe FTP : saisissez votre mot de passe FTP.
Racine FTP : lorsque vous vous connectez via FTP, vous êtes dirigé vers un dossier bien
précis, qui change selon le fournisseur d’accès. Indiquez ici le chemin d’accès à votre installation
Joomla!. On parle de « racine FTP » lorsqu’on mentionne le dossier le plus élevé auquel vous
avez accès.

Paramètres du proxy
Activer un proxy : en environnement d’entreprise, un proxy permet de faciliter et d’accélérer
la navigation vers Internet, et également d’accroître la sécurité du réseau local. Si tel est le cas,
il vous sera peut-être nécessaire de paramétrer l’accès vers le serveur proxy installé au sein de
votre entreprise.
Hôte du proxy : saisissez ici le nom du serveur assurant la fonction de proxy (fourni par
votre service informatique).
Port du proxy : indiquez ici le port spécifié par votre service informatique.
Identifiant du proxy : saisissez votre identifiant pour accéder au service.
Mot de passe du proxy : saisissez votre mot de passe pour accéder au service.

Paramètres de la base de données


Vous pouvez modifier ici les paramètres d’accès à votre base de données.

Attention ! La moindre erreur de saisie dans cette section peut rendre votre site Joomla! inutilisable.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 55 — #79
✐ ✐

3.4 Onglets droits 55

En effet, vous ne pourriez plus accéder à l’interface d’administration. Si vous n’êtes pas
développeur ou habitué à manipuler des variables de serveurs, ne faites aucunes modifications.
Type : Joomla! vous propose deux types de bases de données différents : MySQL et MySQLi.
Vous n’aurez besoin de modifier ce champ qu’en cas de transfert de site.
Serveur hôte : indiquez ici le nom du serveur de votre base de données. Attention, la
majorité des hébergeurs interdit l’accès à une base de données en dehors de leurs serveurs.
Utilisateur : saisissez ici votre identifiant pour le serveur de base de données.
Nom de la base : indiquez ici le nom de la base de données.
Préfixe des tables : vous pouvez indiquer ici un préfixe différent de celui par défaut. Utile
si vous avez plusieurs sites Joomla! installés sur la même base de données.

Réglages e-mail
Serveur de mail : cela vous permet de choisir le mode d’envoi de vos e-mails. Vous pouvez
opter pour la fonction de messagerie intégrée à PHP (si votre hébergeur le permet), le programme
Sendmail, ou bien un serveur de messagerie externe.
E-mail du site : il s’agit de l’adresse de messagerie qui sera mentionnée comme étant
celle de l’expéditeur pour les messages générés automatiquement par Joomla!.
Nom de l’expéditeur : il s’agit du nom de l’expéditeur qui sera spécifié dans un message
envoyé par votre site. Profitez-en pour choisir un intitulé explicite, ainsi, les gens recevant un
message de la part de votre site seront moins tentés de le considérer comme du spam.
Accès à Sendmail : si vous désirez utiliser à la place de la fonction Mail de PHP le
programme disponible sur tous les serveurs Linux nommés Sendmail, vous devez indiquer ici le
chemin d’accès à ce programme.
Identification SMTP : si votre serveur de messagerie externe nécessite une identification,
indiquez Oui.
Sécurité SMTP : indiquez ici le type de modèle de sécurité utilisé par le serveur SMTP (SSL
ou TTL).
Port SMTP : saisissez le numéro de port utilisé par le serveur SMTP.
Utilisateur SMTP : indiquez le nom d’utilisateur fourni par votre fournisseur de messagerie
externe.
Mot de passe SMTP : indiquez le mot de passe fourni par votre fournisseur de messagerie
externe.
Serveur SMTP : il s’agit du nom du serveur SMTP de votre fournisseur de messagerie
externe.

3.4 ONGLETS DROITS


Avec Joomla! 3, vous pouvez affecter des permissions différentes et très précises pour chaque
élément ou presque de Joomla!.
Vous souhaitez qu’une page de votre site ne soit modifiable que par vous, qu’un module
montrant le nombre de clients ne s’affiche qu’à vos commerciaux, que seuls vos modérateurs
puissent créer de nouvelles catégories ? C’est désormais possible.
À ce stade du paramétrage, vous n’avez aucune opération à effectuer. Vous trouverez tous les
détails au chapitre 7 « Utilisateurs, groupes et permissions ». Nous reviendrons sur cette notion
à chaque fois que vous aurez une possibilité de mettre en œuvre ces nouvelles permissions,
notamment pour la gestion du contenu.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 56 — #80
✐ ✐

56 Chapitre 3. Paramétrer votre Joomla!

3.5 ONGLETS FILTRES DE TEXTE

Les filtres de texte permettent, comme leur nom l’indique, d’autoriser ou d’interdire certaines
chaînes de caractère dans les zones de contenu passant par un éditeur WYSIWYG. On pense
évidemment aux balises HTML, certaines vont être autorisées et d’autres non. Les filtres par
défaut proposés par Joomla! vous garantissent un bon niveau de protection.
Pour chaque groupe existant (public, invité, gestionnaire, etc.) vous pouvez définir un niveau
de filtre spécifique. Il existe 5 niveaux différents, du plus rigide au plus permissif : aucun filtre,
pas de HTML, Liste blanche, Liste noire personnalisée, Liste noire par défaut.
Les filtres de texte sont un élément important de votre sécurité. Et permettre aux auteurs de
gérer leur contenu sans filtres, par confort ou commodité, peut entraîner une faille de sécurité.
Dans l’exemple ci-dessous (figure 3.7), nous avons attribué une liste noire personnalisée au
groupe des gestionnaires.

Figure 3.7 — Utiliser les filtres de textes pour protéger son site

Cette liste noire d’exemple autorise un utilisateur membre du groupe des gestionnaires à
insérer n’importe quelle balise HTML à l’exception de celles mentionnées dans le champ de
filtre : iframe, applet, frame et script.

3.6 LES INFORMATIONS SUR LE SYSTÈME

Les éléments qui suivent ne sont pas dans la configuration du site mais constituent des éléments
indépendants, très utiles quand on rencontre un problème technique. Pour y accéder, rendez-vous
sur l’accueil du panneau d’administration (cliquez sur l’icône Joomla pour y revenir) ou bien sur
Informations système dans le menu Système.
Informations système : les informations système vont vous renseigner sur le type de
serveur Web utilisé, son nom, la version de PHP, la version du serveur de base de données, son
interclassement et la version de Joomla!.
Paramètres PHP : c’est ici que vous allez pouvoir trouver des réponses pour votre
débogage de niveau 0, à savoir si « Safe Mode », « Magic quotes » et « Register Globals » sont
activés. Quinze paramètres sont affichés dont « Open basedir », « Display Errors », « Short open

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 57 — #81
✐ ✐

3.6 Les informations sur le système 57

tags », « File Uploads », « Output Buffering », « Session Save Path », « Session auto start », « XML
activé », « Zlib activé », « Disabled functions », « Mbstring actif », « Iconv activé ».
Fichier de configuration : le fichier de configuration est un élément vital de votre site car il
contient notamment les identifiants et adresses pour que Joomla! se connecte au serveur de base
de données. Certaines valeurs affichées dans cet onglet sont masquées, par mesure de sécurité.

Conseil : une fois votre Joomla! installé, vous pouvez « verrouiller » le fichier de configuration
de votre site. En faisant cela, vous ôtez les droits à toutes personnes ou système (vous y
compris) de modifier les données de configuration. C’est ce que nous vous conseillons de
faire une fois que vous aurez établi votre configuration finale. Via votre logiciel FTP, modifiez
les attributs du fichier pour en interdire l’écriture.

Permissions des dossiers : cet onglet vous présente la liste des dossiers sur lesquels
Joomla! est amené à effectuer des modifications ainsi que leur état. Si l’un d’eux n’est pas
modifiable, Joomla! ne pourra pas effectuer certaines opérations, comme l’installation d’une
extension ou l’ajout d’une image par exemple. C’est souvent de là que viennent les problèmes,
soyez vigilant.
Informations PHP : élément essentiel en cas de débogage, le résultat de la fameuse
fonction phpinfo(). Si vous arrivez ici, c’est que vous êtes développeur et ce n’est pas l’objet de
ce livre que de vous expliquer où trouver l’activation de la librairie gd ou openssl.

En résumé
Prenez le temps de paramétrer convenablement votre Joomla!. Ce n’est pas tous les jours que
vous lancerez un site. Si vous ne comprenez pas certains termes, ignorez-les, le plus important
est que vous soyez à l’aise. Joomla! est comme une montre de précision, vous pouvez vous
contenter de la remonter de temps en temps, mais vous avez aussi la possibilité d’explorer le
mécanisme et de mettre vos doigts dedans. Les résultats sont les mêmes qu’en horlogerie : si
vous ne savez pas ce que vous faites, vous risquez de ne plus avoir de montre... ou de site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 58 — #82
✐ ✐

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 59 — #83
✐ ✐

DEUXIÈME PARTIE

Gérer et publier
vos contenus

Parce que Joomla! est avant tout un gestionnaire de contenu, nous allons voir ensemble tout ce
que vous pouvez faire avec.
Qu’il s’agisse de texte ou de contenus multimédias, tous constituent le cœur du métier de
webmestre et la vie quotidienne d’un site, d’un blog ou d’un portail. Sans contenu, votre site
n’est rien d’autre qu’une enveloppe vide et fort heureusement, Joomla! vous offre plein d’outils
pour mettre en forme et valoriser vos créations.
Vous voulez présenter votre entreprise ou votre association ? Vous voulez diffuser vos vidéos
publiées sur YouTube ou Dailymotion ? Vous voulez mettre à la disposition de vos clients vos
catalogues produits et des galeries d’images ? Vous voulez relayer sur Twitter ou Facebook votre
actualité, vos événements ou ce qu’on dit de vous dans la presse ? Vous voulez afficher la météo
de votre région, proposer une banque de CV, créer vos propres formulaires d’inscription, insérer
des cartes dynamiques ou gérer votre communauté ?
C’est ici !

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 60 — #84
✐ ✐

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 61 — #85
✐ ✐

4
Organiser votre site

Objectif
Ce chapitre doit vous permettre non seulement d’organiser vos contenus, ce qui est extrême-
ment important dans un site, mais également d’agencer votre page d’accueil ainsi que la façon
dont vont se présenter les pages de votre site Web.
Pour bien utiliser Joomla!, il faut bien comprendre qu’il y a une différence entre vos contenus
et la manière d’y accéder. Si vous créez des catégories avec une seule page à l’intérieur, par
exemple, cela se verra sur le site et risquera de pénaliser la navigation.
Soyez le plus organisé possible pour que votre site soit le plus clair possible.

4.1 DÉFINIR L’ARBORESCENCE DE VOTRE SITE


Pour qu’un site soit agréable à visiter, il faut qu’il soit bien conçu. Imaginez un site d’e-commerce
qui catégoriserait mal ses articles. Après une ou deux recherches fastidieuses, un client potentiel
changera de site pour celui d’un concurrent.
C’est une vérité qui s’applique également aux sites dits « vitrine » ou « institutionnels ». Des
rapports introuvables, des pages qui ne sont pas au bon endroit : une véritable « usine à gaz »...
Il s’agit là d’autant d’éléments qui donnent une mauvaise image du site et, par extension, de
l’entreprise elle-même.
Il n’y a qu’une recette : vous organiser ! Le plus simple reste encore de lister tous les contenus
que vous souhaitez afficher sur votre site. Les classer logiquement vous facilitera la création de
l’arborescence. Pour rester logique, il suffit de repenser à vos classeurs d’écoliers. Auriez-vous
cherché un cours de français dans votre classeur de mathématiques ? Les catégories de Joomla!
fonctionnent comme des classeurs. Créez-les, ajoutez-y des intercalaires (des sous-catégories),
et enfin vos pages.

Astuce de pro : n’hésitez pas à faire un petit sondage auprès de vos clients pour savoir ce qu’ils
voudraient absolument retrouver sur votre site et ce qui les intéresse moins. Vous serez surpris du

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 62 — #86
✐ ✐

62 Chapitre 4. Organiser votre site

résultat et cela vous permettra de répondre plus précisément à vos attentes. Si vous êtes connu dans
un secteur particulier ou dans une zone géographique limitée, vous pouvez également interroger des
prospects pour savoir quelle image ils ont de vous. Savoir quelle est la réputation de votre entreprise
peut conditionner les informations à afficher sur la page d’accueil. Une entreprise qui souffrirait d’un
manque d’identification de son activité aurait tout intérêt à présenter celle-ci visuellement sur sa
« une » et à y consacrer une page entière par exemple.

Contenant et contenu
L’avantage principal des CMS est de séparer le contenant du contenu. Vous pouvez mettre à jour
le noyau Joomla! sans que cela n’affecte vos contenus. De même, si vous changez de template,
votre site sera complètement différent et vous n’aurez pourtant pas touché au contenu ni ajouté
d’extensions tierces.
En toute logique, nous devrions vous conseiller d’adapter votre contenant à votre contenu,
mais nous allons voir que, parfois, il peut falloir faire l’inverse. En effet, il y a encore quelques
années, un site ne possédait que son propre contenu : les pages qui le composaient. Aujourd’hui
un site présente du contenu que ses auteurs n’ont pas rédigé ou ne contrôlent pas. Un site
d’e-commerce par exemple affiche les appréciations des clients sur leurs produits et un site
communautaire met en avant les commentaires de ses membres.
Bien entendu, les publicités, fils d’informations RSS et autres contenus en provenance des
réseaux sociaux (Twitter, Facebook, Viadeo, LinkedIn) sont autant d’exemples de contenus
présents sur un site, qui peuvent impacter votre contenant.

Sémantique : être compris de ses visiteurs


On parle beaucoup de sémantique dès lors qu’on évoque le Web 3.0, puisque ce serait
l’avènement du Web « intelligent ». Nous l’aborderons ici sous l’angle plus pragmatique de
ceux qui veulent être compris par leurs visiteurs : il ne faut pas seulement être compris, il faut
être bien compris. C’est ce qui fait, entre autres, la différence entre deux sites Web traitant du
même sujet. Vous préférez l’un à l’autre, sans doute parce que vous y trouvez plus facilement ce
que vous y cherchez, que les termes employés vous « parlent » plus.

Si tout le monde se souvient de la phrase culte du monde de la presse : « Le poids des mots,
le choc des photos », c’est moins vrai pour le monde du Web.

En effet, les premiers éléments que nous percevons d’un site Web, ce sont les titres des
pages qui le composent. Quand nous lançons une recherche via un moteur de recherche, nous
ne voyons pas encore les sites, seulement une liste de liens hypertextes et leurs descriptions
associées. Le titre de votre site est donc à ce niveau votre principal vecteur de visites. D’un point
de vue général, chaque titre est important puisque chacune de vos pages est indexée dans les
moteurs de recherche et peut donc servir de point d’entrée à votre site.

4.2 AGENCER VOTRE CONTENU : LES CATÉGORIES

Les catégories sont des dossiers virtuels dans lesquels vous allez « ranger » vos pages ou articles.
Par exemple sur un site d’e-commerce, pour trouver une pelle, vous iriez dans la catégorie
« Jardin » puis dans la sous-catégorie « Outillage ». Un site bien organisé permet à vos internautes
de trouver facilement ce qu’ils cherchent.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 63 — #87
✐ ✐

4.2 Agencer votre contenu : les catégories 63

À l’heure où tous vos concurrents ont des sites Web, c’est un critère à ne pas prendre à la
légère.

Le gestionnaire de catégories
Pour accéder au gestionnaire de catégories, allez sur le menu « Contenu », puis cliquez sur
Gestion de catégories. C’est là que vous pourrez créer, modifier et supprimer vos catégories.
Si vous avez installé les données d’exemple, vous trouverez dans votre gestionnaire toute
une série de catégories, imbriquées les unes dans les autres.
Sur la partie gauche se trouve un menu muni de trois liens. Le gestionnaire de catégories,
le deuxième, est sélectionné. Le premier sert à passer au gestionnaire d’articles et le dernier au
gestionnaire des articles affichés sur la page d’accueil (articles en vedette).

Les colonnes du gestionnaire


La première colonne est constituée par de petites icônes symbolisant trois petits carrés noirs
verticaux. Ceux-ci représentent « l’arbre des catégories », leur hiérarchie. En restant cliqué sur
l’une de ces icônes, vous pouvez alors modifier cette hiérarchie par simple déplacement, vers le
haut, ou vers le bas.
La seconde colonne est constituée de cases à cocher. Elles permettent de sélectionner
plusieurs catégories pour les publier, les dépublier, les archiver ou les mettre à la corbeille.

Astuce pratique : en cliquant sur un titre de colonne, comme par exemple le « titre », Joomla! va
trier le tableau selon ce critère par ordre descendant (alphabétique). Un second clic triera le tableau
par ordre ascendant (alphabétique inversé).

Le statut : cette colonne vous indique l’état de publication d’une catégorie. Une catégorie
est publiée ou ne l’est pas. Une coche verte signifie que la catégorie est publiée, un rond rouge
signifie que la catégorie n’est pas publiée.
Titre : dans cette colonne apparaissent le titre de la catégorie et son alias (en plus petit sur
la droite).
Accès : indique le niveau d’accès de la catégorie. Une catégorie peut en effet être accessible
par tout le monde (accès public) ou bien être réservée seulement aux membres du site (utilisateurs
enregistrés), aux modérateurs ou administrateurs (utilisateurs spéciaux). Nous vous rappelons
que vous avez la possibilité de créer vos propres niveaux d’accès ainsi que vos propres groupes
d’utilisateurs. Une catégorie peut donc n’être accessible qu’à un niveau d’accès que vous auriez
vous-même défini (voir au chapitre 7).
Langue : dans le cadre d’un site multilingue, et pour retrouver facilement les articles rédigés
dans telle ou telle langue, le gestionnaire de catégories vous affiche la langue de la catégorie.
Vous pouvez ainsi avoir une arborescence différente d’une langue à l’autre.
ID : l’identifiant ou ID d’une catégorie est une valeur d’enregistrement interne à Joomla! : il
permet l’identification de la catégorie au sein de la base de données.

Les filtres
Vous trouverez au-dessus un filtre de recherche rapide, ainsi qu’un bouton Outils de recherche,
faisant apparaître d’autres filtres selon le niveau, le statut (publié ou non), le niveau d’accès, la
langue et les tags. Ces filtres sont très pratiques quand vous devez retrouver une catégorie dans
une grande arborescence. Cliquez sur la coche verte d’une catégorie pour la dépublier puis
sélectionnez dans le filtre le statut Non publié (figure 4.1). La page va se recharger en n’affichant
que les catégories dépubliées.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 64 — #88
✐ ✐

64 Chapitre 4. Organiser votre site

Figure 4.1 — Utilisation des filtres

Ajouter une catégorie


Une catégorie doit être compréhensible par vos visiteurs, mais également par vos auteurs,
modérateurs et administrateurs. Assurez-vous d’avoir réalisé la meilleure classification possible
de vos produits ou pages pour que chacun les retrouve facilement.
Quand vous êtes dans le gestionnaire de catégories, cliquez sur le bouton Nouveau situé
dans la barre d’action. Saisissez le titre de la catégorie puis cliquez sur Enregistrer & Fermer.
Vous apprendrez plus loin dans le livre comment enrichir la présentation de vos catégories avec
des images, des liens, etc.

Détails
Dans l’onglet des détails, seul le titre de catégorie est obligatoire, tout le reste est optionnel
(figure 4.2).
Alias : l’alias d’une catégorie est important puisqu’il peut apparaître dans l’URL de vos
pages en fonction des réglages effectués dans la configuration.
Description : la description de votre catégorie est importante, surtout si les articles que vous
y rattachez traitent de vos produits. Vous pouvez inclure dans votre description des images, des
liens hypertextes, des tableaux, etc.
Parent : pour créer votre arborescence, vous pouvez avoir besoin d’imbriquer une catégorie
dans une autre. Pour rattacher une catégorie à une autre (relation parent-enfant), sélectionnez
une catégorie déjà existante dans la liste.
Tags : cette option vous permet de tagger vos catégories avec un ou plusieurs tags que vous
choisissez (voir la Gestion des Tags au chapitre 11).
Statut : par défaut une nouvelle catégorie est publiée. Vous pouvez changer son état grâce
à la liste déroulante.
Accès : niveau d’accès à la catégorie : public, uniquement accessible aux membres
(enregistrés), aux modérateurs et administrateurs (utilisateurs spéciaux) ou à un groupe que
vous auriez vous-même créé (clients).
Langue : sélectionnez la langue pour laquelle est créée cette catégorie. Les langues listées
sont celles définies dans le gestionnaire de langues.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 65 — #89
✐ ✐

4.2 Agencer votre contenu : les catégories 65

Figure 4.2 — Ajout d’une catégorie

Note : vous pouvez saisir une note à l’attention des autres personnes ayant accès à la
gestion des catégories. Cette note ne sera pas visible sur la partie publique du site.
Note de version : grâce à la gestion d’historique de version, vous pouvez laisser une note
correspondant à la version en cours.

Paramètres de publication
Créé par : la seule véritable option à cette étape est le choix de l’utilisateur qui crée la catégorie.
Si vous cliquez sur le bouton muni d’un petit personnage, une fenêtre pop-up va s’ouvrir avec
la liste de tous vos utilisateurs. Comme vous êtes un super-utilisateur, vous pouvez attribuer la
création d’une catégorie à quelqu’un d’autre (figure 4.3).

Figure 4.3 — Choisir un auteur

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 66 — #90
✐ ✐

66 Chapitre 4. Organiser votre site

Clics : lorsque celle-ci est utilisée comme critère de navigation, ce compteur indique le
nombre de fois où la catégorie aura fait l’objet d’une visite.
ID : ne vous préoccupez pas de ce champ, il est à zéro par défaut. Un identifiant ne sera
attribué à la catégorie que lorsque vous la sauvegarderez.
Afin de centraliser l’ensemble des opérations de référencement au même endroit, les
explications relatives aux métadonnées (description, mots-clés, auteur, robots) sont présentées
au chapitre 9 dédié au référencement.

Paramètres
Type de mise en page : vous pourrez définir dans la partie 4.3, comment se présenteront
vos catégories « par défaut ». Pour autant, vous pouvez avoir envie que l’une ou l’autre de vos
catégories échappe à ce comportement par défaut. C’est pourquoi vous pouvez indiquer ici si la
catégorie se présentera comme un « blog » ou comme une « liste ».
Image : vous pouvez choisir une image pour représenter cette catégorie.

Droits de la catégorie
Cet espace regroupe la gestion des règles d’accès à une catégorie. Vous avez ainsi accès à une
gestion extrêmement fine des droits. Vous pouvez par exemple permettre à un auteur de n’écrire
que sur une catégorie, à un modérateur de modifier et supprimer deux ou trois catégories et à
un éditeur de mettre en ligne l’intégralité de vos contenus.

Par défaut, les droits des groupes sur une nouvelle catégorie sont hérités des droits définis au niveau
de chaque groupe. Si vous avez défini que les membres de votre groupe « auteurs » ne pouvaient
pas créer de catégorie, vous n’avez pas besoin de le repréciser lors de la création d’une nouvelle
catégorie. Celle-ci « hérite » des droits du groupe. En revanche, vous pouvez leur permettre de créer
des catégories uniquement pour une catégorie parente donnée.

Cliquez sur le nom d’un groupe (partie de gauche) pour afficher ses droits (partie de droite).
Les différentes actions possibles du workflow sont listées : Créer, Supprimer, Modifier, Modifier le
statut, Modifier ses éléments. Pour chaque action, sélectionnez ce que vous autorisez ou pas, ou
bien laissez les permissions attribuées aux groupes (Hérité) (figure 4.4). Cliquez sur Enregistrer
pour voir s’appliquer vos modifications.
Les explications sur l’ensemble de la gestion des droits sont présentées au chapitre 7.

Action sur les catégories


Modifier : pour modifier une catégorie, cliquez simplement sur son titre dans le gestionnaire
de catégories ou bien cochez la case précédent son titre et cliquez sur le bouton d’action
Modifier. N’oubliez pas d’enregistrer vos modifications en cliquant sur un des boutons supérieurs
(Enregistrer, Enregistrer & Fermer, Enregistrer & Nouveau ou Enregistrer une copie).
Publier : pour publier une catégorie, cliquez simplement sur le petit rond rouge indiquant
un état non publié ou bien cochez la case précédant le titre de la catégorie et cliquez sur le
bouton Publier.
Dépublier : pour dépublier une catégorie, cliquez simplement sur la coche verte indiquant
un état publié ou bien cochez la case précédant le titre de la catégorie et cliquez sur le bouton
Dépublier.

Pratique : lorsque vous publiez ou dépubliez une catégorie parente, les catégories qui lui sont
rattachées subissent la même modification.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 67 — #91
✐ ✐

4.2 Agencer votre contenu : les catégories 67

Figure 4.4 — Gestion des permissions

Archiver : l’archivage est abordé plus en détail au chapitre 5.


Déverrouiller : si vous voyez un cadenas devant une catégorie, c’est que Joomla! l’a
verrouillée par mesure de sécurité. Cela peut également arriver pour un article. Par exemple, si
vous êtes en train de modifier une catégorie et que vous fermez votre navigateur, Joomla! vous
avertit alors qu’une action inattendue a eu lieu. En passant la souris sur le cadenas, un petit
encart vous indique par qui et quand l’action a eu lieu (figure 4.5).

Figure 4.5 — Une catégorie verrouillée

Pour déverrouiller la catégorie, cochez la case précédant le statut et cliquez, soit directement
sur le cadenas ou sur le bouton d’action Déverrouiller.
Mettre à la corbeille : attention, vous pouvez mettre à la corbeille une catégorie, même si
des articles y sont rattachés. Les articles de la catégorie supprimée ne sont pas supprimés, mais
ils deviennent inaccessibles sur votre site jusqu’à ce que vous les rattachiez à une autre catégorie.
En cas d’erreur, vous pouvez toujours récupérer une catégorie supprimée (voir ci-après).
Récupérer une catégorie supprimée : la corbeille est un espace très utile de Joomla!
puisque, comme dans votre ordinateur par exemple, tout y est conservé, tant que vous ne la videz

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 68 — #92
✐ ✐

68 Chapitre 4. Organiser votre site

pas. Si vous avez supprimé par erreur une catégorie, vous pouvez la « restaurer » en vous rendant
dans le gestionnaire de catégorie et en sélectionnant dans le filtre de statut Dans la corbeille. La
page va se recharger et afficher uniquement les catégories passées à la corbeille. Cliquez sur le
titre de la catégorie à restaurer, modifiez son état en publié ou dépublié et sauvegardez. Vous
pouvez aussi cliquer sur la case à cocher devant le nom et utiliser les boutons d’action Publier
ou Dépublier.
Vider la corbeille (supprimer définitivement un élément) : pour supprimer défini-
tivement un élément, utilisez le filtre des statuts et sélectionnez Dans la corbeille. La page va
se recharger et afficher uniquement les catégories présentes dans la corbeille. Sélectionnez les
catégories à supprimer en cochant la case devant leur nom puis cliquez sur le bouton « Vider la
corbeille ».
La case à cocher située comme un titre de colonne permet de tout sélectionner, un second
clic désélectionne tout. Vous ne pouvez pas supprimer (définitivement) une catégorie contenant
des articles, il vous faut d’abord les rattacher à une autre catégorie.
Déplacer ou Copier une catégorie : si vous souhaitez déplacer ou copier une catégorie,
vous pouvez le faire en modifiant sa fiche comme nous venons de le voir. Si vous souhaitez traiter
plusieurs catégories de la même manière, c’est possible. Sélectionnez par exemple les catégories
nommées « Beez3 » et « Protostar » en cochant la case devant leur nom. Cliquez ensuite sur le
bouton d’action Traitement.
Dans la nouvelle fenêtre, sélectionnez dans la liste déroulante la catégorie vers laquelle vous
voulez envoyer les catégories sélectionnées. Choisissez ensuite entre Copier ou Déplacer, puis
cliquez sur Traitement (figure 4.6).

Figure 4.6 — Copier une catégorie

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 69 — #93
✐ ✐

4.3 Les paramètres de gestion et d’affichage des contenus 69

4.3 LES PARAMÈTRES DE GESTION ET D’AFFICHAGE DES CONTENUS

Vous pouvez accéder à ces paramètres par les pages de gestion des catégories, de gestion des
articles et de gestion des articles en vedette. Cliquez sur le bouton Paramètres, situé à droite dans
la barre de boutons d’action. Une nouvelle fenêtre s’ouvre avec différents onglets. C’est ici que
vous allez effectuer l’ensemble des réglages concernant l’affichage de vos articles et catégories
(figure 4.7).

Figure 4.7 — Paramètres d’affichage des articles

Comme pour tous les éléments administrables dans Joomla!, vous allez définir des règles générales,
mais rien ne vous empêche de définir des règles spécifiques pour un article ou une catégorie donnée.

Après vos modifications, n’oubliez pas de cliquer sur Enregistrer & Fermer.

Paramètres d’affichage de vos articles


Pour maîtriser tous ces réglages, nous vous conseillons de « jouer » avec, afin que vous vous
rendiez mieux compte de quoi il s’agit. Ouvrez une deuxième fenêtre dans votre navigateur
et regardez la une de votre site ou bien une page de catégorie listant des articles. Activez et
désactivez les fonctions présentées ci-après, vous saurez alors où vont vos préférences.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 70 — #94
✐ ✐

70 Chapitre 4. Organiser votre site

Ergonomie générale de présentation d’un article


Titre de l’article : si l’option est activée, cela affiche tout simplement le titre de l’article dans la
page.
Titre cliquable (article) : cette option insère des liens dans les titres des articles vers ces
articles. Depuis la page d’accueil ou une page de catégorie qui liste les articles ou qui en présente
un extrait, vos visiteurs peuvent donc cliquer sur le titre pour accéder à l’article entier. Comme
c’est le mode de fonctionnement de la plupart des blogs et que les gens s’y sont habitués, nous
vous conseillons d’activer cette option.
Texte d’introduction : affiche ou non le texte d’introduction lorsque l’article est affiché en
mode « complet » (après avoir cliqué sur son titre par exemple).
Position des informations : Affiche les informations sur l’article, au-dessus, au-dessous,
ou de manière séparée par rapport au texte même de l’article.
Titre de la catégorie : cette option peut s’avérer utile sur la page d’accueil, car elle permet
d’identifier la « famille » de l’article. Nous vous conseillons de l’afficher, surtout si vous avez des
articles « à la une » de catégories différentes, cela permet de se repérer.
Titre cliquable (catégorie article) : cette option fait un lien sur la catégorie de l’article afin
de la rendre cliquable. En cliquant sur le nom d’une catégorie on navigue vers sa présentation
qui liste également l’ensemble des articles qu’elle contient. Il faut bien sûr que l’option « Titre de
la catégorie » soit activée pour la voir.
Titre de catégorie parente : il s’agit ici de la catégorie « parente » dans laquelle se trouve
votre article. Cela peut s’avérer utile dans certains cas de catégorisation complexe ou lorsque
vous avez une arborescence qui peut prêter à confusion.
Titre cliquable (catégorie parente) : cette option fait un lien sur la catégorie « parente »
de l’article afin de la rendre cliquable. En cliquant sur le nom d’une catégorie on navigue vers
sa présentation qui liste également l’ensemble des articles qu’elle contient. Il faut bien sûr que
l’option « Titre de catégorie parente » soit affichée pour voir le lien.

Informations complémentaires sur un article


Auteur de l’article : affiche l’auteur de l’article si celui-ci est renseigné.
Lien de contact : cette option insère un lien sur le nom de l’auteur, vers sa fiche de contact.
Si aucune fiche de contact n’a été créée (composants/contacts), le lien ne se crée pas.
Date de création : affiche la date de création d’un article. Attention, si vous avez créé
un article il y a un mois et que vous le mettez en ligne seulement aujourd’hui, cela créera une
confusion.
Date de modification : affiche la date de la dernière modification d’un article. Peu d’intérêt,
sauf si vous faites un suivi de version.
Date de publication : affiche la date de publication d’un article. C’est généralement le
mode choisi pour les blogs, mais c’est intéressant en règle générale de publier la date, car les
gens apprécient de pouvoir situer dans le temps une information.
Navigation entre articles : la « navigation » au sein des articles est en fait composée de
deux boutons que vous connaissez certainement pour les avoir vus ailleurs : Suivant et Précédent.
Ces deux boutons vous permettent de naviguer d’un article à l’autre.
Vote sur les articles : cela permet aux utilisateurs de voir les votes et à ceux qui en ont les
droits, de participer à l’évaluation d’un article.
Lire la suite... : affiche un bouton « lire la suite » en dessous de chaque article. Si dans
votre article vous avez inséré une balise « lire la suite », Joomla! s’en servira comme repère et
considérera tout ce qui se trouve avant cette balise comme le texte d’introduction de l’article.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 71 — #95
✐ ✐

4.3 Les paramètres de gestion et d’affichage des contenus 71

Cela améliore l’ergonomie du site et incite à cliquer. Nous vous conseillons de coupler cette
option avec les titres cliquables.
Titre de l’article : affiche le titre de l’article à la place de « lire la suite ».
Nombre de caractères : si l’option « titre de l’article » ci-dessus est affichée, vous pouvez
indiquer ici le nombre de caractères à afficher. Utile si vous avez régulièrement des titres à
rallonge ou pour maîtriser votre affichage.
Afficher les tags : Permet de faire apparaître les tags saisis dans l’article.

Icônes et nombre de clics sur un article


Icônes de l’article : activez cette option pour afficher des icônes dans vos articles. Nous vous
recommandons de le faire, car c’est un standard d’ergonomie et de fonctionnalité. Les icônes
s’affichent à la place des liens texte.
Icône « Imprimer » : si vous voulez permettre à vos visiteurs d’imprimer vos pages sans
passer par le navigateur, activez cette option.
Icône « E-mail » : permet à vos visiteurs de « suggérer » par e-mail l’adresse de la page
consultée. Très pratique pour favoriser le référencement naturel, nous vous recommandons
d’activer cette option.
Nombre d’affichages : affiche le nombre de fois qu’un article a été affiché. Réservez cette
option à vos statistiques personnelles, ou pour un site d’e-commerce.
Liens non autorisés : affiche ou non les liens vers les articles nécessitant d’être authentifié
pour les visionner. En dehors de cas particulier, nous vous recommandons de ne pas les afficher,
cela fruste l’internaute de voir qu’un article est disponible et qu’il n’y a pas accès.
Position des liens : définit la position d’affichage des liens, soit au-dessus, soit en dessous
du contenu de l’article.

Paramètres d’agencement
Paramètres de publication : si désactivée, cette option masquera les paramètres de
publication en mode création et modification d’articles. Vous empêchez ainsi le changement de
dates (de création ou de publication) ainsi que de l’auteur de l’article (figure 4.8).
Paramètres d’article : de la même manière, vous avez la possibilité de bloquer la
modification des paramétrages d’un article en création comme en modification. Vous garantissez
ainsi une publication homogène de vos articles quels qu’en soient les auteurs.
Sauvegarder l’historique : permet d’activer ou désactiver la gestion de version de vos
contenus.
Versions maximum : définit le nombre maximum de versions conservées.
Images et liens en frontal : vous autorisez l’utilisation des options standards d’insertion
d’images et de liens depuis l’interface frontale du site, pour les articles rédigés ou modifiés
depuis cette interface.
Images et lien en admin : dans le même esprit, l’accès à ces mêmes options standards
peut être retiré depuis l’interface d’administration.
Cible de l’URL A, B, et C : lorsque les options standards d’ajout de liens sont disponibles,
permet de spécifier le comportement de renvoi du lien fourni : ouverture dans la même fenêtre
(remplace l’affichage actuel), s’ouvre dans une nouvelle fenêtre de navigation, dans une fenêtre
sans navigation (de type popup), ou dans une fenêtre modale. Ce dernier choix permet d’ouvrir
une fenêtre en avant-plan, il sera nécessaire de fermer celle-ci pour reprendre la main sur
l’affichage courant du site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 72 — #96
✐ ✐

72 Chapitre 4. Organiser votre site

Figure 4.8 — Paramètres d’agencement des articles

Image en texte d’intro, en texte complet : lorsque des images d’introduction ou de


texte complet ont été spécifiées (voir plus haut images et liens), définit la position d’affichage de
ces dernières, à gauche, droite, ou masquées.

Paramètres d’affichage des catégories


Deux onglets, Catégorie et Catégories, sont à disposition afin de paramétrer le comportement
de ces dernières, soit uniques, soit lorsqu’elles forment une hiérarchie.
Mise en page : choisissez si vous voulez que vos catégories s’affichent en mode « blog » ou
en mode « liste ». Excepté dans certains cas où cela peut s’avérer justifié, nous vous conseillons
le mode « blog », plus ergonomique.
Texte des sous-catégories : permet d’afficher les sous-catégories en tant que sous-titre
de la page (balise <h3> pour les connaisseurs).
Titre de la catégorie : si affiché, le titre de la catégorie s’affichera comme sous-titre de
page (balise <h2>).
Description : cela affichera dans la page de présentation de la catégorie la description que
vous en aurez faite.
Image : si vous avez activé l’affichage de la description de la catégorie et que vous avez
sélectionné une image pour représenter la catégorie, activez cette option pour l’afficher.
Sous-catégories : si vous avez beaucoup de sous-catégories imbriquées les unes dans les
autres, il peut être judicieux de n’afficher qu’un ou deux sous-niveaux. Au-delà, cela risque de
perturber la lisibilité de votre site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 73 — #97
✐ ✐

4.3 Les paramètres de gestion et d’affichage des contenus 73

Catégories vides : voulez-vous afficher à vos visiteurs vos catégories vides ? Cela peut se
justifier dans certains cas, comme pour l’ouverture d’une nouvelle catégorie ou l’arrivée d’articles
imminents, mais sinon, évitez.
Message d’alerte : affiche un message lorsque la catégorie ne contient aucun article.
Cette option va de pair avec l’affichage des catégories vides.
Desc. sous-catégories : affiche la description des catégories « enfants ».
Nombre d’articles : affiche le nombre d’articles que contient une catégorie.
Afficher les tags : permet de faire apparaître les tags saisis pour la catégorie.

Réglages pour l’affichage « Blog » ou « En vedette »


Vous allez définir ici comment s’affiche une page quand elle est présentée comme un blog.
Certaines pages sur votre site, notamment votre page « actualités » ont tout intérêt à se présenter
comme un blog.
Articles en pleine largeur : il s’agit du nombre d’articles qui seront affichés dans leur
intégralité. Si vous avez des articles longs, nous vous conseillons d’indiquer 0, afin de ne pas
rendre votre page d’accueil illisible.
Introduction des articles : il s’agit du nombre d’articles qui seront affichés avec simple-
ment leur introduction : c’est-à-dire jusqu’à la balise « lire la suite » que vous avez vous-même
placée dans l’article.
Nombre de colonnes : vous choisissez ici le nombre de colonnes pour l’affichage de vos
articles. Deux ou trois colonnes donnent un air de journal. En mettre plus diminue la lisibilité,
sauf si vous avez un template conçu spécialement pour cela.
Titres avec liens : il s’agit du nombre de liens vers les articles qui seront affichés sur la
page. Les liens reprendront les titres des articles.
Succession des articles : vous indiquez ici si les articles doivent se succéder en ligne ou
en colonne.
Inclure les sous-catégories : ce paramètre vous permet d’inclure dans l’affichage les
articles des sous-catégories. Choisissez dans la liste déroulante à jusqu’à quel niveau vous voulez
descendre (2 pour deux niveaux de sous-catégorie).

Réglages pour l’affichage en liste


Lorsque vous affichez une catégorie en liste, vous avez la possibilité d’inclure des sélecteurs
d’affichage (figure 4.9) qui vont se présenter sous forme d’une liste déroulante vous permettant
de filtrer les articles.
Sélecteur d’affichage : choisissez si vous voulez afficher ou masquer le sélecteur d’affi-
chage.
Champ filtre : vous pouvez activer un champ de filtre supplémentaire tel que le titre, l’auteur
ou le nombre de requêtes. N’activez cette option que si vous avez un nombre important d’articles
dans une catégorie.
En-têtes du tableau : indiquez ici si vous voulez que les noms des colonnes du tableau
qui liste les articles s’affichent sous forme d’en-têtes.
Afficher la date : voulez-vous afficher une date ? Si oui, choisissez laquelle dans la liste
déroulante : date de création, date de modification ou date de publication. Nous vous conseillons
la date de publication, afin que le visiteur sache de quand date l’article qu’il lit, cela permet
d’évaluer la pertinence d’une information.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 74 — #98
✐ ✐

74 Chapitre 4. Organiser votre site

Figure 4.9 — Paramètres d’affichage en liste

Format de date : si vous affichez une date, vous pouvez choisir son formatage. Une date
peut être notée « 24/01/2011 » ou « lundi 24 janvier 2011 ». À vous de choisir.
Nombre d’affichages : une « requête » d’article indique en fait son affichage. Si vous
souhaitez afficher le nombre de fois qu’un article a été lu, activez cette option.
Auteur : affichez cette information uniquement si vous avez un site multi-auteur, sinon ça
n’a pas tellement de sens.

Paramètres partagés
Ordre des catégories : vous pouvez choisir ici l’ordre l’affichage des catégories entre elles :
alphabétique, alphabétique inversé ou bien l’ordre de votre arbre des catégories.
Ordre des articles : choisissez maintenant l’ordre de présentation des articles. Nous vous
conseillons les plus récents en premier, cela attire l’attention de vos visiteurs sur votre actualité
du moment et encourage à la navigation. Vous avez le choix entre neuf possibilités basées sur
les dates des articles (voir ci-dessous), leurs titres, le nom des auteurs, la popularité des articles
et l’ordre tel qu’il existe dans le gestionnaire d’article.
Classement par date : si dans le paramètre ci-dessus, vous optez pour un classement par
date « les plus récents » ou « les plus anciens », vous pouvez choisir ici le type de date à retenir :
date de création, date de modification ou date de publication. Nous vous conseillons la date de
publication.
Pagination : si vous avez beaucoup d’articles, vous voudrez peut-être offrir à vos visiteurs
la possibilité de naviguer d’une page à l’autre. La pagination va rajouter en bas de page les
boutons Suivant et Précédent.
Position de pagination : la position de pagination ajoute en fait une information pour vos
visiteurs. Elle indique le nombre de pages de résultat et la position de la page dans l’ensemble
des résultats (page 1 sur 5, 2 sur 5, etc.).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 75 — #99
✐ ✐

4.4 La page d’accueil (frontpage) 75

Paramètres d’intégration (des flux RSS)


Lien de fil RSS : si vous désirez offrir à vos visiteurs la possibilité de suivre vos actualités via
un flux RSS, activez cette option. La popularité des flux RSS et leur lecture via des applications
comme Netvibes ou Google Reader les a rendus indispensable. Nous vous conseillons d’afficher
votre flux RSS.
Flux à transmettre : vous pouvez soit afficher le texte d’introduction, soit afficher l’article
complet. Nous vous conseillons de ne publier que le texte d’introduction, cela incitera les lecteurs
du flux RSS à venir sur votre site.
Afficher « Lire la suite » : si seul le texte d’introduction est affiché, permet d’ajouter un
lien invitant vos visiteurs à consulter l’intégralité de l’article.

La gestion des droits


Les explications sur l’ensemble de la gestion des droits sont présentées au chapitre 7 : « Utilisa-
teurs, groupes et permissions ».

4.4 LA PAGE D’ACCUEIL (FRONTPAGE)


À contenu équivalent, le choix d’un site plutôt qu’un autre se fait en moins de trois secondes.
Durant ce laps de temps, le cerveau d’un internaute va apprécier les couleurs, la disposition,
les images, les emplacements des éléments incontournables (menu, recherche, contenu), la
typographie (couleur, taille des caractères) des contenus, des titres et des liens hypertextes,
l’emplacement, la taille et la pertinence des visuels. À aucun moment durant ces trois secondes
vous ne pouvez vous glisser derrière son oreille pour lui dire à quel point votre site est génial.
Un internaute juge très vite et si cela ne lui plaît pas, il va ailleurs.

Conseil des auteurs : une page d’accueil qui ne donne pas envie aux visiteurs réduit les
visites, les ventes, la fréquentation et la participation. Dès votre page d’accueil, vous devez
répondre à toutes ces questions : qui êtes-vous, qu’est-ce que vous faites, qu’est-ce que vous
proposez ?

Afficher vos articles sur la page d’accueil


Composez votre « Une »
Imaginez votre page d’accueil comme la « Une » d’un journal, vous pouvez la modifier très
rapidement dans le gestionnaire d’article en y ajoutant des articles ou en les supprimant.
Vous pouvez mettre à la « Une » autant d’articles que vous le désirez. Les articles sélectionnés
peuvent être dans des catégories différentes, mais nous vous recommandons qu’ils aient la
même apparence. S’ils contiennent des visuels, harmonisez les tailles et les emplacements, cela
donnera plus de cohérence à votre site et améliorera son ergonomie générale.
Pour afficher un article sur la page d’accueil, rendez-vous dans le gestionnaire de contenu,
puis utilisez les filtres si besoin, pour retrouver l’article que vous voulez valoriser. Vous n’avez pas
besoin d’ouvrir l’article pour l’afficher sur la page d’accueil, il vous suffit de cliquer sur la petite
étoile grise à droite de l’indication de publication. Une fois cliquée, l’icône change pour faire
apparaître une étoile orange (figure 4.10), votre article est à présent « mis en vedette ».

Pour être visible sur la page d’accueil, votre article doit bien sûr être publié !

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 76 — #100
✐ ✐

76 Chapitre 4. Organiser votre site

Figure 4.10 — Mettre un article en vedette

Mise en page de votre page d’accueil


Alors que tous les paramètres d’affichage sont regroupés ensemble, la gestion de la page
d’accueil est un peu particulière dans Joomla!. Pour accéder à ces réglages, rendez-vous dans
la gestion des menus et cliquez sur Menu Principal. L’ensemble des liens de menu va s’afficher.
Cliquez sur le lien Accueil, c’est l’élément avec une étoile orange dans la colonne accueil
(figure 4.11).

Figure 4.11 — La gestion de la page d’accueil

Les options d’affichage qui permettent de réaliser des modifications sur la structure de la page
d’accueil se trouvent dans l’onglet Affichage. Nous allons maintenant changer la présentation
de la page d’accueil. Avant tout, ouvrez une nouvelle fenêtre ou un nouvel onglet de votre
navigateur pour avoir un œil sur votre page d’accueil.
Saisissez 0 pour « Articles complet », 4 pour « Introduction des articles » et 2 pour le « Nombre
de colonnes » (figure 4.12). Cliquez sur Enregistrer et rechargez votre page d’accueil (touche F5)
pour constater les changements.
Testez différentes mises en page, puis faites les valider par un groupe d’utilisateurs restreint
ou des clients privilégiés : ils vous orienteront vers votre page d’accueil idéale.

Paramètres d’affichage des articles sur votre page d’accueil


Sur votre page d’accueil, il convient de cacher certains éléments qui pourraient venir perturber
la lisibilité de cette page si importante, comme les icônes par exemple. À l’inverse, le fait de
rendre les titres cliquables, d’afficher les textes d’introduction suivis d’un « lire la suite » améliore

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 77 — #101
✐ ✐

4.4 La page d’accueil (frontpage) 77

Figure 4.12 — Nombre d’articles sur la page d’accueil

l’ergonomie générale de la page. Pour accéder à ces réglages, toujours depuis le lien Accueil
du menu principal, rendez-vous dans l’onglet Paramètres pour voir s’afficher tous les réglages
disponibles (figure 4.13).

Conseil des auteurs : pour obtenir la page d’accueil la plus lisible possible, affichez les titres de vos
articles et rendez les cliquables. Tous les autres paramètres peuvent être masqués.

Figure 4.13 — Les paramètres de la page d’accueil

Penser les modules de la page d’accueil


Comme nous l’avons dit, votre page d’accueil est vraiment différente des autres pages de votre
site. Vous aurez peut-être envie d’afficher la liste des derniers articles parus ou bien ceux qui
sont le plus consultés. Pour faire cela, vous allez avoir besoin des modules. Il en existe pour tout
un tas de fonctionnalités et vous pouvez même créer le vôtre. Dans Joomla!, tout est modulaire.
Si vous voulez afficher un module uniquement sur la page d’accueil, c’est possible. À l’inverse,
si vous souhaitez qu’un module s’affiche partout sauf sur la page d’accueil, c’est également

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 78 — #102
✐ ✐

78 Chapitre 4. Organiser votre site

possible. Gardez à l’esprit cette souplesse d’usage. Pour tout savoir sur les modules et leurs
usages, rendez-vous au chapitre 13 : « Gérer les modules ».

En résumé
Vos contenus sont ce que vous voulez offrir, présenter, valoriser pour vos visiteurs. Pour qu’ils
soient facilement accessibles, pour qu’un internaute comprenne rapidement la logique de votre
site et à quel endroit il va pouvoir trouver l’information qui l’intéresse, prenez le temps de bien
concevoir l’arborescence de votre site. Maintenant que votre contenant est prêt, rendez-vous
au chapitre suivant pour gérer vos contenus.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 79 — #103
✐ ✐

5
Créer et modifier
ses textes

Objectif
Qu’il s’agisse de recettes de cuisine, de votre catalogue produit ou d’articles d’actualité, votre
contenu textuel est très important. C’est bien sûr l’information première que retiendront vos
visiteurs. C’est également ce qui servira de base au référencement et au positionnement de
votre site Web. Vous allez apprendre dans ce chapitre à prendre en main l’outil de publication
de contenu proprement dit. Nous verrons au chapitre suivant comment enrichir votre contenu.

5.1 CRÉER SON PREMIER ARTICLE

Le gestionnaire d’articles
L’interface du gestionnaire d’articles s’est constamment améliorée depuis les premières versions
de Joomla!. Elle offre maintenant une ergonomie vraiment intéressante qui facilite la prise en
main de l’outil. Pour y accéder, rendez-vous dans le menu « Contenu », puis cliquez sur Gestion
des articles. C’est ici que vous allez créer, modifier et supprimer vos articles.
Si vous avez installé les données d’exemple, vous trouverez dans votre gestionnaire toute
une série d’articles traitant de Joomla!, de koalas et de boutique de fruits.
Les données d’exemple contiennent trois sites en un : le premier présente des indications
générales sur Joomla! et la communauté, le deuxième est un mini-site pour une boutique de
fruits et le troisième est en réalité un blog de voyage sur les parcs australiens.

Cliquez simplement sur le titre d’un article pour le modifier.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 80 — #104
✐ ✐

80 Chapitre 5. Créer et modifier ses textes

Une fois dans la « Gestion des articles », vous trouverez trois éléments de menu sur la gauche,
le premier sélectionné étant « Articles », c’est l’endroit où vous vous trouvez. Le deuxième sert à
passer au gestionnaire de catégories et le troisième au gestionnaire des articles affichés sur la
page d’accueil (articles en vedette).

Les colonnes du gestionnaire


La première colonne est constituée par de petites icônes symbolisant trois petits carrés noirs
verticaux. Ceux-ci représentent la hiérarchie, l’arbre, entre les articles. En restant cliqué sur l’une
de ces icônes, vous pouvez alors modifier cette hiérarchie par simple glissement, vers le haut, ou
vers le bas.
La seconde colonne est constituée de cases à cocher. Celles-ci permettent de sélectionner
plusieurs articles pour les publier, les dépublier, les archiver ou les mettre à la corbeille.

Astuce pratique : en cliquant sur un titre de colonne, comme par exemple le « titre », Joomla! va
trier le tableau selon ce critère par ordre descendant (alphabétique). Un second clic triera le tableau
par ordre ascendant (alphabétique inversé).

Statut : cette colonne vous indique l’état de publication des articles. Un article est publié ou
ne l’est pas. Une coche verte signifie que l’article est publié, un rond rouge signifie que l’article
n’est pas publié.
Un second élément de statut est présent dans cette même colonne : celui de la mise en
vedette de l’article, symbolisé par une petite étoile. Tour à tour grise ou orange, il s’agit d’une
option permettant une mise en avant d’articles en page d’accueil du site.
Un troisième élément est présent sous forme d’un petit triangle vers le bas, indiquant la
présence d’un petit menu déroulant. En cliquant sur ce petit triangle, il vous sera proposé des
options directes permettant d’archiver ou de mettre à la corbeille l’article en cours.
Le titre : dans cette colonne apparaissent le titre de l’article ainsi que sa catégorie et son
alias (écrits en plus petit).
Accès : indique le niveau d’accès de l’article. Un article peut en effet être accessible par
tout le monde (accès public) ou bien être réservé seulement aux membres du site (utilisateurs
enregistrés), aux modérateurs ou administrateurs (utilisateurs spéciaux). Nous vous rappelons
que vous avez la possibilité de créer vos propres niveaux d’accès ainsi que vos propres groupes
d’utilisateurs. Une catégorie peut donc n’être accessible qu’à un niveau d’accès que vous auriez
vous-même défini (voir le chapitre 7).
Auteur : affiche le nom de l’auteur qui a créé l’article.
Langue : Joomla! offre nativement la possibilité de créer un site multilingue. Pour retrouver
facilement les articles rédigés dans telle ou telle langue, le gestionnaire d’articles vous indique
la langue de référence.
Date : indique la date de création de l’article. La présence de cette colonne vous permet
donc de trier les articles pour arriver aux plus récents ou aux plus anciens.
Clics : indique le nombre de clics (ou visites) de l’article.
ID : l’identifiant ou ID d’un article est un élément numérique attribué automatiquement par
Joomla!. Vous pouvez en avoir besoin si vous souhaitez afficher des modules sur une seule page
donnée par exemple.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 81 — #105
✐ ✐

5.1 Créer son premier article 81

Les outils de recherche


Au-dessus des titres de colonnes, vous trouverez le champ de recherche puis, à sa droite,
un bouton permettant de faire apparaître les filtres selon le statut (publié, archivé, etc.), la
catégorie, le nombre de niveaux de catégories, le niveau d’accès, l’auteur, la langue et même
les tags. Ils s’avèrent très pratiques lorsque vous devez retrouver une catégorie dans une grande
arborescence.
Dès que vous avez un peu de contenu, les filtres se révèlent d’indispensables alliés. En effet,
en combinant plusieurs filtres (les articles publiés de la catégorie « Joomla! » par exemple), le
gestionnaire d’articles va rapidement vous présenter les articles que vous cherchez.

Le workflow ou les différents états d’un article


Nous le mentionnions précédemment, vous avez la possibilité de créer autant de groupes
utilisateurs que vous le désirez. Combiné avec les différents états des articles, cela vous permet
de gérer vos contenus comme un flux de travail éditorial classique.
Publié : l’article est publié. Pour autant, n’oubliez pas que si vous ne faites pas de lien vers
cet article ou la catégorie qui le contient, personne ne pourra y accéder.
Non Publié : un article non publié n’est pas accessible à vos visiteurs, vous pouvez donc
prendre tout votre temps pour le modifier.
En vedette : les articles « En vedette » sont ceux affichés sur la page d’accueil. Il faut qu’ils
soient publiés pour être visibles.
Archivé : les articles archivés sont toujours accessibles sur votre site, mais ils n’apparaissent
plus dans le gestionnaire d’article, ce qui est pratique quand vous avez beaucoup de pages. Par
exemple, la page affichant vos mentions légales peut être archivée une fois finalisée, elle ne
changera pas souvent.
Dans la corbeille : les articles à la corbeille ne s’affichent plus sur le site.

Mon premier article en deux clics


Écrire et publier
Si vous êtes pressé de mettre en ligne votre premier article, vous allez vous apercevoir qu’il
est très facile et très rapide de publier dans Joomla! : les informations minimales sont un titre,
le choix d’une catégorie, et la rédaction de votre contenu. Dans le menu « Contenu », mettez
le pointeur de la souris sur « Gestion des articles », puis cliquez sur le sous-menu « Ajouter un
article » (figure 5.1).
Normalement, le seul prérequis à cette étape est la création d’une catégorie, mais on va
supposer que vous êtes extrêmement pressé et l’article sera donc « non catégorisé ».

Un titre, du contenu et vous sauvegardez


Saisissez le titre de votre article, choisissez « non catégorisé » en fin de liste déroulante des
catégories, saisissez quelques lignes de contenu, puis cliquez sur Enregistrer & Fermer. Ça y est,
votre premier article est créé !
Le gestionnaire d’articles vous annonce d’ailleurs « Article enregistré avec succès ». Utilisez le
filtre sur votre gauche (le deuxième en partant du haut) pour filtrer la catégorie « non catégorisé »
et afficher votre premier article (figure 5.2).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 82 — #106
✐ ✐

82 Chapitre 5. Créer et modifier ses textes

Figure 5.1 — Ajout d’un article

Figure 5.2 — Utilisation des filtres dans la gestion des articles

Figure 5.3 — Ajout d’un élément de menu

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 83 — #107
✐ ✐

5.2 Gérer un article dans les moindres détails 83

Vous voulez voir l’article sur votre site ?


Vous verrez en détail la gestion des menus au chapitre 8, mais comme vous ne pouvez pas
résister à vérifier que tout fonctionne bien, nous allons voir en quelques clics comment faire un
lien vers l’article que vous venez de créer. Dans la barre de menu, mettez votre pointeur de souris
sur « Menus » puis « Menu Principal » et cliquez sur le sous-menu « Ajouter un lien de menu »
(figure 5.3).
Cliquez sur le bouton Sélection pour le type de lien de menu et choisissez la section « Articles »
puis « Article » dans la fenêtre en pop-up. Un nouveau champ de saisie, lié au choix de l’article
apparaîtra alors. Cliquez sur le bouton Sélection. Aidez-vous du filtre par catégorie pour retrouver
votre article « non catégorisé » et sélectionnez-le dans la liste. De retour dans la fenêtre principale,
indiquez un titre à votre lien de menu comme « test de mon article » par exemple. Enfin, cliquez
sur Enregistrer & Fermer.
Ouvrez maintenant une deuxième fenêtre pour naviguer sur votre site. Si votre fenêtre ou un
onglet était déjà ouvert, rechargez la page (Ctrl + F5). Dans le menu « Ce site » (si vous avez
installé les données d’exemple), vous devriez voir apparaître votre lien de menu. Cliquez dessus
pour accéder à votre article (figure 5.4).

Figure 5.4 — Visualiser le nouvel élément de menu

5.2 GÉRER UN ARTICLE DANS LES MOINDRES DÉTAILS

La structure d’un article


Nous allons passer en revue ici l’ensemble des éléments disponibles pour un article. Pour cela,
ouvrez un article depuis le Gestionnaire de contenu.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 84 — #108
✐ ✐

84 Chapitre 5. Créer et modifier ses textes

Les détails de l’article


Titre : élément indispensable et obligatoire, c’est lui qui va donner envie de lire votre article,
alors soignez-le.
Alias : l’alias d’un article est utilisé pour le positionnement des pages (voir le chapitre 9 sur
le référencement). Si vous ne saisissez rien, Joomla! va le créer automatiquement en minuscules,
sans accents et sans espaces. C’est l’alias d’un article qui apparaîtra si vous activez la réécriture
d’URL.
Zone de texte de l’article : saisissez ici vos contenus textuels et multimédias.
Catégorie : comme nous l’avons vu au chapitre précédent pour la création et la gestion
des catégories, c’est ici que vous allez rattacher l’article à une famille, qui peut très bien être
celle des « non catégorisés ».
Tags : cette option vous permet de tagger vos articles avec un ou plusieurs tags que vous
choisissez (voir la Gestion des Tags au chapitre 11).
Statut : affiche le statut de publication de l’article.
En vedette : vous pouvez spécifier dès la création de l’article si vous voulez qu’il s’affiche
sur la page d’accueil de votre site.
Accès : c’est ici que vous allez définir le niveau d’accès à un article. Si vous n’avez pas
encore consulté le chapitre 7, laissez l’accès par défaut sur « public ».
Langue : Joomla! vous permet de gérer plusieurs langues dans le même site. Ce paramètre
vous indique la langue sélectionnée ou « Toutes » par défaut.
Note de version : grâce à la gestion d’historique de version, vous pouvez laisser une note
correspondant à la version de l’article en cours.

Les paramètres de publication


Début de publication : si rien n’est spécifié, la date de début de publication est la date de
création, sinon vous pouvez cliquer sur le petit calendrier pour en choisir une différente.
Fin de publication : indiquez une date de fin de publication et l’article se « dépubliera »
de lui-même à la date choisie.
Date de création : il s’agit de la date à laquelle l’article a été créé.
Créé par : par défaut, l’auteur d’un article est l’utilisateur qui le crée, mais vous pouvez très
bien en affecter un autre en cliquant sur le bouton muni d’un petit personnage.
Nom de remplacement : vous pouvez saisir ici le nom réel d’un auteur, ce qui peut
s’avérer utile si vous reproduisez sur votre site un article écrit par un autre.
Date de modification / modifié par : date et auteur des dernières modifications sur
l’article.
Révision : indique le nombre de fois que l’article a été modifié depuis sa création.
Clics : permet de savoir combien de fois l’article a été consulté depuis sa publication.
ID : il s’agit de l’identifiant attribué à l’article par Joomla! pour être stocké dans la base de
données. Lors de la création, cette valeur est toujours à 0.

Les paramètres des métadonnées


Toujours dans l’onglet Publication, se trouvent les paramètres de métadonnées (partie droite de
la page). Afin de centraliser l’ensemble des opérations de référencement au même endroit, les
explications relatives aux réglages des métadonnées des articles sont présentées au chapitre 9.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 85 — #109
✐ ✐

5.2 Gérer un article dans les moindres détails 85

Images et liens
Nous évoquions au chapitre précédent la possibilité d’insérer des images prenant place lors
des modes d’affichage d’introduction ou bien complet. Celles-ci peuvent ainsi être spécifiées
en dessous du texte principal de l’article. De la même manière, les trois liens URL pourront être
indiqués à cet emplacement.

Les paramètres de l’article


Comme nous l’avons vu dans les paramètres généraux d’affichage des articles au chapitre 4,
vous pouvez définir des règles d’affichage pour tous vos articles. Il peut arriver cependant que
vous souhaitiez traiter une rubrique, une catégorie ou un article différemment, c’est pourquoi
chaque article, ou page de votre site peut être paramétré avec ses propres options. Si vous
souhaitez des détails sur tel ou tel paramètre, rendez-vous à la partie 4.3

Les paramètres de création/modification


Nous avons également vu au chapitre précédent, toujours en partie 4.3, que des paramètres
d’agencement nous permettent de garantir une uniformité des articles en création ou modifica-
tion, et ce, en mode admin ou en frontal du site (partie publique). Nous avons ici le loisir de
faire exception à ce qui a été défini globalement, pour le seul article en cours.

Les droits sur les articles


Cet espace regroupe la gestion des règles d’accès à un article. Joomla! apporte une gestion
extrêmement fine des droits. Vous pouvez ainsi permettre à un auteur de n’écrire que sur un
article, à un modérateur de modifier et supprimer les articles d’une catégorie donnée et à un
éditeur de mettre en ligne l’intégralité de vos contenus.

Par défaut, les droits des groupes sur un nouvel article sont hérités des droits définis au niveau de
chaque groupe. Si vous avez défini que les membres de votre groupe « auteurs » ne pouvaient pas créer
d’articles, vous n’avez pas besoin de le repréciser à la création d’un nouvel article. Celui-ci « hérite »
des droits du groupe. En revanche, vous pouvez leur permettre de créer des articles uniquement pour
une catégorie donnée.

Cliquez sur le nom d’un groupe (partie de gauche) pour afficher ses droits (partie de droite).
Les différentes actions possibles du flux de travail sont listées : supprimer, modifier, modifier
le statut. Pour chaque action, sélectionnez ce que vous autorisez ou pas, ou bien laissez les
permissions attribuées aux groupes (Hérité). Cliquez sur Enregistrer pour voir s’appliquer vos
modifications.

Les explications sur l’ensemble de la gestion des droits sont présentées au chapitre 7 :
« Utilisateurs, groupes et permissions ».

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 86 — #110
✐ ✐

86 Chapitre 5. Créer et modifier ses textes

La face cachée de votre texte


CSS

Explication d’un expert : Raphaël Goetter 1 d’Alsacréations


« Les CSS, c’est un peu le "frère jumeau caché" de HTML : né – presque – en même temps que
HTML (1994 pour HTML 1 et 1996 pour CSS 1), le langage CSS a été créé pour mettre en
forme les différents éléments de structure définis par HTML : typographie, arrière-plans, habillage
mais aussi positionnement et effets visuels (CSS3 apporte les notions de rotation, de transparence,
d’arrondis, de transitions...).
Longtemps délaissés en raison de mauvaises interprétations des navigateurs, les styles CSS sont
devenus depuis quelques années un composant essentiel à tout design de site Web. »

HTML
Derrière un mot en gras, un paragraphe justifié, une image, il y a du code. Ce code est interprété
par votre navigateur Internet (Internet Explorer, Mozilla Firefox, Chrome, Safari, Opera, etc.) qui
convertit les éléments du code en éléments visibles. Ainsi <strong>bonjour</strong> s’interprète
bonjour en gras.
Le HTML est une norme définie par le W3C (le World Wild Web Consortium), organisme
qui a pour objectif de standardiser Internet en imposant des normes aux développeurs,
intégrateurs, webdesigner et surtout aux navigateurs Internet. Pour ceux qui connaissent le
HTML, il est souvent plus rapide de modifier le code pour régler un problème de mise en page.
Si vous souhaitez en savoir plus sur cette norme qui évolue tout le temps, nous vous
conseillons d’aller visiter le site du W3C dont une grande partie est accessible en français.

Maîtriser le cycle de vie d’un article


Un des points forts de Joomla! est la facilité qu’il offre à manipuler les articles. Voyez votre site
comme la « Une » d’un journal, vous pouvez déplacer les articles sur la page d’accueil pour
composer votre « Une », les publier, les dépublier, prévoir quand s’afficheront vos prochaines
news et quand elles se dépublieront.

Astuce de pro : servez-vous de votre plan média ! Si vous savez en début d’année, ou en début
d’exercice, quels vont être vos événements importants, pourquoi ne pas écrire une brève ou un article
dès maintenant et planifier sa publication ? Vous ne manquerez plus d’annoncer votre participation
à une foire, un congrès et vous pourrez même programmer plusieurs articles sur un mois, afin de créer
un effet « teasing ».

Publier et dépublier un article


Si vous souhaitez ne plus afficher une page ou un article temporairement ou définitivement, il
vous suffit de le dépublier en cliquant sur la coche verte correspondant, dans la colonne « Statut ».
Celui-ci sera toujours dans votre liste et vous pourrez toujours le modifier, mais il ne sera plus
accessible à vos visiteurs. Regardez les différents états de publication sur la figure 5.5.

1. Raphaël Goetter est co-gérant de la société Alsacreations.fr, auteur de plusieurs ouvrages sur les CSS
(Mémento CSS3, CSS avancées – vers HTML5 et CSS3, CSS2 Pratique du design Web, Memento CSS, Memento
XHTML) et membre du collectif Openweb, référence francophone en matière de standards Web.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 87 — #111
✐ ✐

5.2 Gérer un article dans les moindres détails 87

Figure 5.5 — État de publication des articles

Programmer la publication d’un article


Quand vous connaissez plusieurs mois à l’avance tous les détails d’un événement, à quoi sert
d’attendre pour le traiter ? Profitez de la possibilité de programmer la publication d’une page,
d’un article ou d’une actualité pour traiter l’information dès que vous l’avez. Cliquez sur le
titre de l’article pour le modifier. Dans l’onglet « Publication », cliquez sur l’icône de calendrier
à droite du champ « Début de publication ». Choisissez la date du lendemain. Une fois que
vous avez cliqué sur la date dans la fenêtre de calendrier, vous pouvez également modifier
l’heure de publication. La figure 5.6 montre une date de début de publication correspondant au
16 septembre 2015 à 06h00.

Publier un article pendant 15 jours


Vous souhaitez afficher une offre promotionnelle pendant une durée limitée ? Rien de plus simple,
indiquez une date de départ de publication et une date de fin de publication. À cette date, votre
article se « dépubliera » de lui-même, vous évitant ainsi un fastidieux travail de vérification de la
pertinence de vos contenus. La figure 5.6 ci-dessous montre un article qui se « dépubliera » le
30 septembre 2015 à 23 h 50.

Figure 5.6 — Programmer une période de publication

Copier un article
Vous avez passé du temps sur une mise en page et vous ne souhaitez pas tout recommencer
pour un article similaire : il vous suffit de copier l’article. Joomla! dupliquera l’intégralité de
son contenu (textes, images, liens, etc.), vous n’aurez ensuite qu’a mettre à jour la copie pour
créer un article complètement indépendant. Pour ce faire, cliquez sur le titre de l’article que vous
souhaitez copier. Une fois en modification, saisissez le nouveau titre, supprimez l’alias (Joomla!
en créera un autre) dans le second onglet puis cliquez sur Enregistrer une copie (figure 5.7).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 88 — #112
✐ ✐

88 Chapitre 5. Créer et modifier ses textes

Figure 5.7 — Menu de gestion des articles

Mettre un article sur la page d’accueil


Vous n’avez pas besoin d’ouvrir un article pour l’afficher sur la page d’accueil. Si vous êtes
dans la gestion des articles, il vous suffit de cliquer sur l’étoile grise dans la colonne « Statut ».
Si vous êtes dans l’article, sélectionnez « Oui » pour le champ « En vedette » situé à droite, puis
enregistrez. Une fois l’article en vedette, l’icône change pour faire apparaître une étoile orange.

Déverrouiller un article
Si vous voyez un cadenas devant un article, comme sur la figure 5.8, c’est que Joomla! l’a
verrouillé par mesure de sécurité. Par exemple, si vous étiez en train de modifier un article et
que vous fermiez d’un coup votre navigateur, Joomla! vous avertit qu’une action potentiellement
dangereuse a eu lieu.

Figure 5.8 — Déverrouiller un article

Pour déverrouiller l’article, cliquez directement sur le cadenas ou bien cochez la case
précédant son titre, puis cliquez sur le bouton Déverrouiller depuis la barre d’action.

Archiver un article
Vous avez trop d’articles dans votre gestionnaire d’articles, archivez les plus vieux ou ceux que
vous ne modifiez que très rarement. Pour ce faire, une fois dans la gestion des articles, cochez la
case précédant le statut d’un article et cliquez sur le bouton d’action « Archiver ». L’article va
disparaître du gestionnaire d’articles, mais il n’est ni supprimé ni dépublié pour
autant. Pour accéder aux articles archivés, sélectionnez « Archivé » dans la liste déroulante
située dans les filtres au-dessus de l’écran (figure 5.9).

Mettre un article à la corbeille


Si vous n’avez plus besoin d’un article, vous pouvez le mettre à la corbeille. Celui-ci ne sera
pas totalement supprimé mais automatiquement dépublié. Si vous êtes dans le gestionnaire
d’articles, cochez la case précédant le statut de l’article concerné et cliquez sur l’élément de
menu « Corbeille ».

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 89 — #113
✐ ✐

5.2 Gérer un article dans les moindres détails 89

Figure 5.9 — Visualiser les articles archivés

Récupérer un article dans la corbeille


Si vous ou un de vos utilisateurs avez malencontreusement mis un article à la corbeille, il existe un
moyen de le récupérer. Comme dans votre explorateur Windows, les articles mis à la corbeille ne
sont pas supprimés, tant que vous ne la videz pas, vous pouvez donc y récupérer tous les articles
qui s’y trouvent. Dans la liste déroulante du filtre sur le statut des articles, sélectionnez « Dans la
corbeille ». Le gestionnaire d’articles vous affiche alors tous les articles mis à la corbeille. Cochez
la case précédant le statut de chaque article que vous voulez récupérer (figure 5.10) puis cliquez
sur Publier ou Dépublier suivant que vous vouliez que les articles soient visibles ou non.

Figure 5.10 — Récupérer des articles mis à la corbeille

Vider la corbeille (supprimer définitivement)


Vider la corbeille est une opération à ne pas prendre à la légère. En effet, une fois la corbeille
vidée, vous ne pourrez plus récupérer vos articles. Pour accéder à cette option, il faut vous
rendre dans le gestionnaire d’article. Dans la liste déroulante du filtre, sur le statut des
articles, sélectionnez « Corbeille ». Un nouvel élément de menu apparaît « Vider la corbeille ».
Sélectionnez les articles que vous voulez définitivement supprimer de votre base de données puis
cliquez sur Vider la corbeille (figure 5.10).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 90 — #114
✐ ✐

90 Chapitre 5. Créer et modifier ses textes

5.3 GESTION DE VERSIONS

Une évolution notable depuis la version 3 est l’ajout d’une fonction de gestion de version,
également appelée Versioning de contenu.

Prenons quelques exemples : Vous venez de supprimer un paragraphe d’un de vos articles et avez
enregistré. Vous regrettez cette modification mais vous ne pouvez plus revenir en arrière, le texte
supprimé est perdu. Vous avez plusieurs auteurs et vous constatez que des contenus de vos articles
sont erronés ou partiellement supprimés. Que faire ?

Aujourd’hui Joomla! palie ces défauts en vous permettant de retrouver, et même de restaurer
ces contenus perdus.
Nous avons vu au chapitre précédent (partie 4.3) des options d’agencement du contenu
permettant d’activer une sauvegarde de l’historique des contenus ainsi qu’un nombre maximal
de versions à retenir. Il s’agit là de la gestion des versions.
Une fois cette option activée, tout nouvel article se verra attribuer une version à chaque
nouvel enregistrement. Joomla! gardera alors en base de données des sauvegardes de chacun
de ces contenus.
Depuis la gestion des articles, prenez un article en édition en vous assurant qu’il ait déjà
subi des modifications. Au besoin, modifiez un paramètre de celui-ci et cliquez sur le bouton
Enregistrer. Vous constaterez qu’un bouton Versions est présent dans la barre de boutons
d’actions (figure 5.11).

Figure 5.11 — Bouton des versions

Ce bouton vous donne alors accès à une fenêtre vous permettant différentes actions sur les
versions précédemment enregistrées de cet article (figure 5.12).
Rétablir : en cochant une version de la liste et en cliquant sur ce bouton, vous chargez la
version sélectionnée dans l’éditeur et vous la restaurez comme la version en cours.
Prévisualisation : cette option vous permet de consulter une version sauvegardée sans
avoir besoin de la restaurer.
Comparer : en sélectionnant deux versions, Joomla! vous présentera une comparaison
champ à champ des modifications apportées entre ces versions. Vous aurez notamment la
possibilité de filtrer sur les seuls changements apportés par le biais d’un bouton situé en haut à
droite de la fenêtre proposée. Cette fonction est notamment très utile et très rapide pour détecter
les modifications réalisées par vos auteurs sur leurs contenus.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 91 — #115
✐ ✐

5.4 Écrire et mettre en forme 91

Figure 5.12 — Gestion des versions

Activer/désactiver « Garder pour toujours » : Cette option permet d’outrepasser la


limite de rétention placée sur la sauvegarde de version en spécifiant que la ou les versions
sélectionnées ne pourront être supprimées par le gestionnaire de version. Vous pourrez à tout
moment inverser cette option.
Supprimer : Comme son nom l’indique vous pouvez directement supprimer la ou les
versions sélectionnées.

Astuce de pro : Trop de versions tuent... les versions ! Faites un usage judicieux de cette
fonctionnalité. En effet, chaque version enregistrée, même pour une simple virgule ajoutée, augmente
la taille de votre contenu global. Veillez à dimensionner le nombre de versions sauvegardées afin de
ne pas voir votre base de données enfler inutilement.

5.4 ÉCRIRE ET METTRE EN FORME

Utiliser un éditeur WYSIWYG


TinyMCE
Définition : un WYSIWYG (What You See Is What You Get, ce que vous voyez est ce que vous
obtenez) est un éditeur HTML qui ressemble à un mini-logiciel de bureautique et qui vous permet
de mettre en forme un texte, sans aucune connaissance en HTML. Les modifications que vous
ferez dans l’éditeur sont celles qui seront présentées à vos visiteurs.
Éditeur de texte par défaut : par défaut Joomla! vous propose l’éditeur TinyMCE, mais il en
existe de nombreux autres. Nous vous proposerons par ailleurs le remplacement de ce dernier
au chapitre 14, consacré aux plugins.

Prise en main de l’éditeur


Un éditeur de texte est composé de plusieurs boutons répartis sur plusieurs lignes. Regardez sur
la figure 5.13 comment se présente l’éditeur TinyMCE. Si certains boutons vous sont familiers
comme les trois premiers (gras, italique et souligné), d’autres le sont un peu moins.

Fonctionnalités
Grâce à cet éditeur de texte, vous pourrez notamment mettre un passage en gras, insérer une
image ou créer un lien hypertexte. Vous l’aurez compris, un éditeur HTML est l’un des outils
permettant de démocratiser les mises à jour de site Web pour les non professionnels du métier.
Là où il fallait auparavant des compétences en HTML, CSS, éventuellement en PHP et JavaScript,

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 92 — #116
✐ ✐

92 Chapitre 5. Créer et modifier ses textes

Figure 5.13 — L’éditeur par défaut dans Joomla!

FTP, paramètres réseau et serveur ; il suffit maintenant de savoir saisir son identifiant et mot de
passe, de choisir la page que l’on désire modifier, puis d’utiliser un éditeur de type WYSIWYG.

Faire un copier-coller depuis Word


Il faut savoir qu’un logiciel de traitement de texte comme Microsoft Word crée une multitude de
codes pour mettre en page du texte, codes qui ne sont pas les bienvenus dans le monde du Web.
Afin d’éviter que ces codes ne soient pris en compte par l’éditeur HTML et ne modifient votre
mise en page de façon brutale, nous vous recommandons très fortement de prendre
l’habitude de saisir votre contenu directement dans Joomla! ou bien d’utiliser un
éditeur de texte tiers ayant un bouton Coller depuis Word, Joomla! effectuera alors un
nettoyage automatique de ces codes indigestes.
En règle générale, mieux vaut éviter de copier des tableaux, images et objets créés dans
Microsoft Word, le résultat obtenu vous ferait perdre beaucoup de temps...

Attention, ne pas effectuer cette simple opération peut créer le chaos le plus total dans la mise en
page de votre site.

Insérer un tableau
Créer le tableau
Pour créer un tableau dans une page de votre site, positionnez le curseur dans l’éditeur à
l’endroit où vous voulez le créer. Cliquez ensuite sur le menu Tableau puis Insérer un tableau. Un
sous-menu va s’ouvrir (figure 5.14). Sélectionnez le nombre de colonnes (5 dans notre exemple)
et de lignes (4) que vous souhaitez, vous pourrez en ajouter ou en supprimer par la suite. Un
bouton d’accès rapide représentant un petit tableau est également présent dans les icônes
générales et vous amène au même résultat.

Fusionner des cellules


Pour fusionner deux cellules entre elles, sélectionnez-les, puis cliquez sur le menu Tableau puis
Cellule, et enfin Fusionner les cellules. Dans l’exemple de la figure 5.15, nous avons sélectionné
les cellules « 2.1 » et « 3.1 », qui passent alors en surbrillance bleue. Le contenu de chaque
cellule est préservé lors d’une fusion.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 93 — #117
✐ ✐

5.4 Écrire et mettre en forme 93

Figure 5.14 — Insertion d’un tableau HTML

Figure 5.15 — Fusion des cellules d’un tableau HTML

Favoriser la navigation
Faire un lien hypertexte
Dès que l’on parle Web, les liens sont omniprésents : ils permettent la navigation, ils vous offrent
un point de départ vers une information. Si vous souhaitez savoir ce que d’autres lecteurs pensent
de ce livre, saisissez son titre dans un moteur de recherche et suivez un des liens des résultats
proposés.
Un lien vous permet de lier une adresse à un mot, une phrase ou une image. Cette
adresse (URL) est un chemin vers une autre page de votre site, un document (fichier à ouvrir ou
télécharger), une galerie d’image, ou bien un autre site (on parle alors de lien sortant).
Pour créer un lien, saisissez du texte, sélectionnez un ou plusieurs mots (en surbrillance), puis
cliquez sur le bouton Insérer/Éditer un lien sous forme de maillons de chaîne, comme le montre
la figure 5.16. Une fenêtre pop-up va s’ouvrir. Saisissez simplement l’URL de destination comme
http://www.joomla.fr, puis cliquez sur le bouton OK.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 94 — #118
✐ ✐

94 Chapitre 5. Créer et modifier ses textes

Figure 5.16 — Ajout d’un lien hypertexte

Naviguer entre vos articles


Une des fonctionnalités qui améliore l’ergonomie d’un site consiste à faire un lien vers une autre
page du site. En faisant cela, vous offrez un itinéraire « balisé » à vos visiteurs. Vous
pouvez en profiter pour promouvoir certaines pages ou articles peu visités ou plus simplement
pour inciter à naviguer dans votre site. Les développeurs Joomla! ont bien compris l’utilité de la
démarche puisqu’ils ont prévu un bouton spécialement conçu à cet effet, situé sous l’éditeur de
texte (figure 5.17).

Figure 5.17 — Favoriser la navigation entre ses pages

Cliquez sur le bouton Article pour faire apparaître une fenêtre pop-up de sélection d’article.
Utilisez les filtres pour choisir, comme dans notre exemple de la figure 5.18 l’article « Boutique
de fruits » de la catégorie du même nom.

Figure 5.18 — Sélection d’un article

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 95 — #119
✐ ✐

5.4 Écrire et mettre en forme 95

Donner du style à vos contenus


Choisir sa typographie
1
Explications et conseils d’un infographiste expert : Laurent Frauli
Sur votre site Web, il y a deux niveaux de typographie : la typographie ornementale et la typographie
de lecture. La typographie ornementale est souvent celle utilisée pour les titres de page, elle a
pour vocation d’habiller votre page en plus de donner une information. La typographie de lecture
constitue l’ensemble des autres éléments textuels. Soyez vigilant sur le choix de votre typographie
ornementale, car on a souvent tendance à rechercher des polices assez exotiques ou rares, qui
ne seront malheureusement pas reconnues en tant que police système et donc bien souvent pas
déchiffrées par le navigateur de vos visiteurs. Vous pouvez transformer vos titres en images, mais
cela nuira à votre référencement naturel, car les moteurs de recherche verront une image à la place
d’un texte intelligible. Une autre solution est de vous mettre au CSS3 et je vous oriente pour cela
vers les ouvrages de Raphaël Goetter.
Pour le reste de votre site, respectez plusieurs règles de bon sens et vous vous en sortirez très bien :
une et une seule typographie pour l’ensemble de vos contenus, privilégiez une police lisible à petit,
moyen ou grand corps, qui ne fatigue pas trop l’internaute. J’ai l’habitude d’utiliser pour cela des
polices « sans serif » (ou sans empattements), qui s’avèrent plus faciles à déchiffrer, car privées de
leurs ornements superflus. Dernier conseil : testez, testez, testez !

Créer une hiérarchie dans les titres de son article


Les moteurs de recherche, comme nous, apprécient ce qui est bien structuré. Si le contenu de
votre page est présenté sur un seul niveau, aucune information ne ressort et ni un visiteur ni
un moteur de recherche ne peut donner plus de « poids » à telle partie de votre page qu’a une
autre... dommage. Une action améliorant votre référencement naturel va être de structurer vos
titres à l’aide de format prévu à cet effet.
Comme le montre la figure 5.19, affectez le format « titre 1 » à vos grandes parties puis le
format « titre 2 » à vos sous-parties. Ces formats correspondent aux balises <h1>, <h2>, etc.
pour les connaisseurs.

Figure 5.19 — Les titres dans une page

1. Laurent Frauli est un spécialiste de la communication graphique. Positionné chez l’annonceur, il conçoit les
identités visuelles et est le garant de leur usage dans une stratégie de communication multicanal.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 96 — #120
✐ ✐

96 Chapitre 5. Créer et modifier ses textes

En résumé
Votre contenu est ce qu’il y a de plus important, non seulement pour vos clients, prospects, par-
tenaires, salariés, amis, membres de l’association ou de votre communauté, mais aussi pour les
moteurs de recherche. Un beau site qui n’offrirait que des informations insipides serait condamné
à être abandonné. D’un autre côté, un site ayant une information très intéressante mais mal
agencée ou pas mise en valeur ne retiendrait pas l’internaute. Tout est affaire d’équilibre.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 97 — #121
✐ ✐

6
Multimédia
et réseaux sociaux

Objectif
Vous allez apprendre à mettre en ligne sur votre site tous les types de fichiers supportés par
Joomla! via le gestionnaire de médias. Ensuite, nous verrons ensemble comment afficher un
magnifique diaporama et faire interagir votre Joomla! avec les réseaux sociaux. Nous allons
vous donner les outils nécessaires pour redimensionner à la volée un répertoire de plusieurs
images, les charger sur votre site et en faire une galerie d’images.

6.1 LA GESTION DES MÉDIAS

Généralités sur les images Web


Les formats d’image
Le format préconisé pour le Web est le format jpeg, qui est le plus optimisé en termes de taille
du fichier et de rendu de couleurs.
Le format png est généralement utilisé pour gérer des effets de transparence, mais le
navigateur Internet Explorer (qui a été longtemps la référence du marché) avait toujours mal
géré ce format, transformant la transparence en fond noir... ce qui évidemment ne plaisait guère
aux webdesigners.
Le format gif est adapté pour l’affichage de schémas. Ce format a été popularisé par
les images animées, mais heureusement personne n’ose encore en proposer sur un site
professionnel, tant cette manière de faire est empreinte d’amateurisme.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 98 — #122
✐ ✐

98 Chapitre 6. Multimédia et réseaux sociaux

Attention ! Pour éviter tout problème, faites attention aux noms que vous donnez à vos
fichiers : évitez les caractères spéciaux, les accents, les espaces et les majuscules.

Taille et dimension
Dans 95 % des cas, vos images n’ont pas besoin d’être plus large que 800 pixels, ce qui assure
une bonne visibilité sur la majorité des écrans. Les images doivent donc être redimensionnées.
Quand on compare la taille des images sur un site Web avec la taille des photos d’un
appareil numérique, on constate que les images sur un site Web sont toutes petites. Les outils
proposés par Joomla! permettent de redimensionner (mettre à la bonne taille d’affichage) les
images mais il vaut mieux réduire les images (diminuer la taille et donc le poids de la photo)
avant de les télécharger.

Astuce de pro pour éviter que votre webmestre ne fasse des cauchemars : ne missionnez pas
quelqu’un pour mettre des articles en ligne s’il ne sait pas « retailler » des images. Vous risquez de
vous retrouver sur votre site avec des photos de 5 Mo et d’une taille démesurée (4 000 pixels sur
5 000 par exemple). Outre un temps de chargement très long pour la page concernée, votre site va
voir sa charte graphique déformée, donnant ainsi une image non professionnelle.

La vérité sur la taille des écrans


Bien entendu, il n’y a pas de vérité unique sur ce sujet. Ce qui est clair, c’est que la résolution des
écrans d’ordinateur ne fait qu’augmenter partout dans le monde tandis que celle des tablettes
et des smartphones est très variable. Pour les postes fixes, même si l’équipement change d’un
continent à un autre, vous pouvez retenir comme base de travail la résolution 1 024 pixels
sur 768. Ne réalisez pas votre charte graphique en fonction de la taille des écrans de votre
entreprise, elle n’est pas (toujours) représentative (à moins que le projet soit un Intranet).
Grâce à l’intégration du Bootstrap de Twitter, les webdesigners peuvent enfin concevoir une
charte graphique pour Joomla! 3, en pensant dès le départ aux éléments qui seront visibles sur
une tablette ou un smartphone. Bien sûr, c’est plus de travail durant la phase de conception du
projet, mais le rendu en vaut la peine : une cohérence graphique sur tous les supports et une
navigation et une ergonomie pensée pour chaque support.

Astuce : nous verrons au chapitre 9 comment installer Google Analytics. Ce logiciel gratuit de
statistiques vous permettra de savoir précisément quelles sont les résolutions utilisées par vos visiteurs.

Prendre en main le gestionnaire


Il faut concevoir le gestionnaire de médias de Joomla! comme une vaste bibliothèque. C’est
pourquoi, nous vous invitons à penser dès le départ à un mode de classement. Comment
allez-vous retrouver l’image que vous cherchez dans un dossier où vous en avez rangé trois
cents ?
La méthode la plus sûre consiste à créer un répertoire dans votre explorateur Windows et d’y
ranger vos différents médias selon la logique de votre site. Si vous avez douze rubriques, créez
douze répertoires.

Astuce de pro : pour ne pas devoir renommer vos répertoires une fois qu’ils seront transférés dans
votre Joomla!, veillez à les nommer uniquement avec des minuscules, sans espace ni caractères
spéciaux, comme par exemple « rubrique_aperitifs », « rubrique_entrees », « rubrique_plats » et
« rubrique_desserts ».

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 99 — #123
✐ ✐

6.1 La gestion des médias 99

Présentation de l’interface
Dans le menu « Contenu », cliquez sur Gestion des médias. L’interface peut se présenter sous
deux aspects, soit en affichant les « Miniatures » des images, soit en affichant leurs « Détails »
(dimensions en pixels et taille du fichier). Vous pouvez passer d’un mode à un autre en cliquant
sur les onglets des mêmes noms, situés en haut de la page.
La partie de gauche présente la liste des dossiers contenus dans le gestionnaire d’article,
vous pouvez afficher le contenu d’un dossier en cliquant sur son nom. La partie de droite affiche
ce qui est contenu dans chaque dossier, c’est-à-dire les fichiers. Si vous avez installé les données
d’exemple, ouvrez tous les dossiers et sous dossiers possibles pour accéder au dossier « animals »
et cliquez dessus (figure 6.1).

Figure 6.1 — Le gestionnaire de médias en vue « détails »

Le premier élément des fichiers, la flèche vers le haut, permet en cliquant dessus de remonter
dans le dossier parent. Cliquez dessus plusieurs fois pour remonter à la racine, le dossier Média.

Les paramètres de gestion des médias


Lorsque vous êtes dans la « Gestion des médias », cliquez sur le bouton Paramètres situé en haut
à droite pour accéder aux différents réglages possibles proposés par Joomla! 3.
Afin d’avoir une meilleure approche des droits dans Joomla! 3, nous avons regroupé cette
partie dans le chapitre 7, Utilisateurs, groupes et permissions. C’est pour cette raison que l’onglet
Droits du gestionnaire de médias ne sera pas abordé, il suit les mêmes règles que le reste du
site. Dans l’onglet Composant, vous trouverez les éléments suivants (figure 6.2).
Extensions autorisées : liste tous les types de fichiers que le gestionnaire de médias
acceptera de transférer sur le serveur. Si vous essayez de transférer un fichier mp3 par exemple,
l’extension n’étant pas autorisée, le fichier sera refusé.
Taille maximale : elle est exprimée en méga-octets (Mo). Attention, des contraintes au
niveau du serveur Web peuvent vous empêcher de charger des fichiers moins lourds. Rapprochez-
vous alors de votre administrateur système ou de votre hébergeur.
Chemin du dossier des fichiers et Chemin du dossier des images : ces deux chemins
doivent pointer sur le même répertoire. Si vous souhaitez le changer, faites le juste après la
création du site, sinon vous risquez de rompre des liens pointant vers ces fichiers.
Restreindre les envois : par défaut cette option est à Oui, ce qui interdit aux utilisateurs
ayant un rôle « inférieur » à celui de Gestionnaire (Invité et Public) d’ajouter des fichiers à la
bibliothèque de médias.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 100 — #124
✐ ✐

100 Chapitre 6. Multimédia et réseaux sociaux

Figure 6.2 — Paramétrer la gestion des médias

Vérifier les types MIME : vérifie les types MIME de vos fichiers. Le type MIME (pour
Multipurpose Internet Mail Extensions) est un identifiant de format de données à l’origine utilisé
pour vérifier les formats d’e-mails et maintenant utilisé par le protocole HTTP.
Images autorisées : vous allez spécifier ici les formats d’images que vous autorisez à
l’envoi.
Extensions ignorées : préciser ici les extensions pour lesquelles vous ne voulez pas qu’il y
ait de vérification du type MIME.
Types MIME autorisés et Types MIME interdits : spécifier dans ces champs les types
MIME que vous autorisez et ceux que vous interdisez.

Soyez vigilant : si vous avez un doute sur une option, enregistrez et testez le comportement de votre
site. Au moindre signe inhabituel (impossible d’ajouter un fichier d’un certain format), revenez à
cette rubrique et vérifiez vos paramètres.

Aménager votre bibliothèque virtuelle


Créer un dossier
Pour aménager la bibliothèque virtuelle de votre site Joomla!, nous allons voir ensemble comment
créer un rayonnage, une étagère, etc., le tout sous forme de dossiers imbriqués les uns dans les
autres.
Quand vous ouvrez le Gestionnaire de médias, l’arborescence des dossiers s’affiche dans
une barre latérale à gauche. Cliquez sur le répertoire « animals » qui est un sous-dossier de
« parks », lui-même un sous-dossier du répertoire « sampledata ». Cliquez sur le bouton Créer
un dossier. Une ligne présentant l’arborescence réelle du gestionnaire de médias (là où sont
physiquement vos dossiers sur le serveur Web) va s’afficher. En local, ce chemin ressemble à
« C:\wamp\www\monsite/images/sampledata/parks/animals ».
Dans le champ de saisie, à droite, saisissez le nom du dossier à créer comme « chats » puis
cliquez sur le bouton Créer un dossier comme le montre la figure 6.3.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 101 — #125
✐ ✐

6.1 La gestion des médias 101

Figure 6.3 — Création d’un dossier dans le gestionnaire de médias

Le gestionnaire de médias vous indique que la création est terminée avec un message en
surbrillance vert et il se recharge : votre nouveau dossier apparaît. Cliquez dessus (dans la partie
gauche ou la partie centrale de l’écran) pour entrer à l’intérieur. Recommencez l’opération en
créant un autre sous-dossier « chiens » au même niveau et deux sous-dossiers « exotiques » et
« automne » dans le répertoire « fruitshop » pour arriver au résultat de la figure 6.4. Attention,
regardez bien quel niveau vous avez sélectionné avant de créer un dossier.

Figure 6.4 — Arborescence du gestionnaire de médias

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 102 — #126
✐ ✐

102 Chapitre 6. Multimédia et réseaux sociaux

Supprimer un dossier
Pour pouvoir supprimer un dossier, positionnez-vous dans son dossier parent (exemple sur le
répertoire parks si vous voulez supprimer le répertoire landscape). Que vous soyez en affichage
« Miniatures » ou « Détails », vous trouverez une icône de suppression (croix grise) à côté du nom
du dossier. Cliquez dessus pour supprimer le dossier. Attention, le gestionnaire ne vous
demande pas confirmation et l’opération est irréversible. Vérifiez bien qu’il s’agit du
bon dossier, sinon vous devrez le créer à nouveau.
Si vous avez plusieurs dossiers à supprimer d’un coup, cochez les cases précédant leur nom
et cliquez dans le menu du haut sur le bouton Supprimer. Si un dossier contient des images, il
ne peut être supprimé et vous obtiendrez alors un message d’erreur (figure 6.5).

Figure 6.5 — Erreur lors de la suppression d’un répertoire

Ajouter une image à la bibliothèque


Votre arborescence est prête ? Alors voyons comment ajouter une image. Pour notre exemple,
nous vous proposons de télécharger au préalable une sélection d’images libres de droit sur le
site www.morguefile.com.
Dans le gestionnaire de média, cliquez sur le dossier où vous voulez ajouter la ou les images,
par exemple le répertoire « chats » que vous venez de créer. Cliquez sur le bouton vert Transférer
en haut à gauche de l’écran, puis sur le bouton Parcourir... sélectionnez ensuite une ou plusieurs
images de tailles légères. Depuis votre interface Windows, vous pouvez rester appuyé sur la
touche CTRL pour faire une sélection multiple d’images (Figure 6.6). Enfin, cliquez sur le bouton
Démarrer l’envoi. Soyez patient durant le chargement, le temps de ce dernier varie suivant le
nombre d’images et leurs poids respectifs.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 103 — #127
✐ ✐

6.1 La gestion des médias 103

Figure 6.6 — Sélection de plusieurs fichiers images

Supprimer une ou plusieurs images


Que vous soyez en affichage « Miniatures » ou « Détails », vous trouverez une icône de
suppression (croix grise) à côté du nom du fichier. Cliquez dessus pour supprimer l’image.
Attention, le gestionnaire ne vous demande pas confirmation et l’opération est
irréversible. Vérifiez bien qu’il s’agit de la bonne image et du bon répertoire, sinon vous devrez
charger cette image une nouvelle fois.
Si vous avez plusieurs images à supprimer d’un coup, cochez les fichiers que vous voulez
supprimer et cliquez dans le menu du haut sur le bouton Supprimer.

Ajouter un lot d’images par FTP


Si votre site est dans son environnement de production (chez votre hébergeur), vous aurez parfois
intérêt à utiliser votre logiciel FTP pour transférer un grand nombre d’images de votre ordinateur
vers le dossier Media de votre site. Nous vous invitons ainsi à réutiliser le logiciel FileZilla déjà
évoqué au chapitre 1 lors de l’installation de Joomla!.
Lancez FileZilla et connectez-vous à votre serveur. Positionnez le « site local » à l’endroit
où vous avez copié vos images afin de les voir dans la zone « Nom de fichier ». Sur le « Site
distant », rendez-vous sur le répertoire « chats ». Depuis le site local, sélectionnez les images
souhaitées, puis faites un clic droit sur l’une d’elles, cliquez enfin sur Envoyer (figure 6.7). Une
fois l’opération terminée, cliquez sur la touche F5 pour recharger l’affichage. Vous devriez voir
les images transférées dans le répertoire « chats ».
Vous venez de charger quelques photos sur votre site. Hormis les délais de chargement, vous
pouvez effectuer la même opération avec un répertoire d’une centaine d’images ou l’intégralité
de votre catalogue.

Attention ! Avant tout ajout de répertoire entier d’images via l’interface FTP, vérifiez bien le nom
de vos images, qui ne doivent comporter ni espace, ni caractères spéciaux.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 104 — #128
✐ ✐

104 Chapitre 6. Multimédia et réseaux sociaux

Figure 6.7 — Chargement d’un lot d’images sur votre site

6.2 INSÉRER ET METTRE EN FORME VOS IMAGES

Le problème de retouche, recadrage et redimensionnement des images se posera forcément si


vous n’avez ni les compétences, ni les logiciels qui vous permettent de réaliser ces opérations.
Nous vous proposons d’utiliser le logiciel Picasa, disponible aussi bien pour Windows, Linux que
Macintosh.

Picasa, un logiciel de retouche d’image gratuit


Picasa est un logiciel gratuit distribué par Google. Une fois installé, il va recenser automatique-
ment toutes les photos présentes sur votre ordinateur, les classer, et, c’est ce qui nous intéresse,
vous permettre de réduire un répertoire entier de photos à la volée. Ce logiciel vous permet de
faire beaucoup d’autres choses, comme de corriger l’effet yeux rouges, de modifier le contraste et
la luminosité d’une photo, de recadrer et redresser une photo. Vous pouvez également transférer
directement vos photos sur des services de tirage en ligne comme Snapfish.fr, myPix.com ou
Foto.com.

Installation
Rendez-vous sur le site http://picasa.google.fr/ pour télécharger la dernière version.

Classification de vos photos


Lors du premier lancement, le logiciel va vous demander dans quel dossier il doit regarder pour
indexer vos images. À vous de voir si vous voulez qu’il indexe toutes vos images ou seulement
une partie. Une fois l’opération finie, allez dans le menu Affichage, puis « Affichage des dossiers »
tout en bas, et choisissez un « affichage hiérarchique », vous retrouverez ainsi sur la gauche une
présentation similaire à celle de votre explorateur de documents.

Réduire un lot de 100 photos en quelques clics


Imaginons que vous ayez beaucoup d’images à redimensionner et à charger sur votre site.
Prenez un de vos répertoires images, tirées d’un appareil photo par exemple. La plupart de
ces photos sont certainement de très grande taille, et représentent individuellement un poids
conséquent. Il faut absolument les réduire avant de pouvoir les utiliser sur votre site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 105 — #129
✐ ✐

6.2 Insérer et mettre en forme vos images 105

Dans Picasa, recherchez puis sélectionnez le dossier contenant les images à réduire. Si ce
répertoire n’apparaît pas, dans le menu Fichier, cliquez sur Ajouter un dossier à Picasa, la fenêtre
suivante vous permettra de relancer la recherche sur votre ordinateur.
Une fois le répertoire d’images sélectionné, depuis le menu en bas de l’écran, cliquez
sur le bouton Exporter. Une fenêtre « Exporter vers le dossier » va alors s’ouvrir. Indiquez
un emplacement d’exportation sur votre disque dur ainsi que le nom du dossier exporté
(en minuscules, sans accents ni caractères spéciaux). Comme sur l’exemple de la figure 6.8,
choisissez de redimensionner les images en 300 pixels (pour avoir des miniatures légères et pas
trop encombrantes pour les articles du site) et indiquez une qualité d’image à 85 %.
Vous avez également la possibilité d’inclure un filigrane sur vos photos afin de les protéger.
Cliquez enfin sur le bouton Exporter. Picasa va exporter une à une vos images dans le dossier
indiqué.
Référez-vous ensuite à la partie 6.1 pour voir comment ajouter un répertoire entier d’images
dans le gestionnaire de médias de Joomla! 3.

Figure 6.8 — Exporter un lot d’images dans Picasa

Insérer une image dans un article


Insérer à partir de votre bibliothèque de média
Dans le gestionnaire d’article, utilisez le filtre des catégories pour afficher les articles de la
catégorie Joomla!. Cliquez sur l’article Débutants pour l’ouvrir. Positionnez le curseur devant
le premier mot du premier paragraphe. Sous le texte de l’article, vous trouverez une barre de
menu (figure 6.9).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 106 — #130
✐ ✐

106 Chapitre 6. Multimédia et réseaux sociaux

Figure 6.9 — Ajouter une image dans un article

Cliquez sur le bouton Image pour ouvrir la fenêtre pop-up du gestionnaire de médias. Si
vous avez créé et uploadé le répertoire « miniatures » créé précédemment avec Picasa, utilisez-le,
sinon utilisez une image des données d’exemple. Cliquez sur le dossier « miniatures », ou bien le
répertoire « chats » du sous-répertoire « animals ». Choisissez une image à afficher sur votre site
et cliquez dessus, son nom va s’afficher dans le champ URL (figure 6.10). Afin d’aider à un bon
référencement, dont vous verrez toutes les subtilités au chapitre 9, nous vous invitons à saisir une
description et un titre à votre image (dans la partie basse de la fenêtre pop-up). Cliquez ensuite
sur le bouton bleu Insérer, situé en haut à droite de la fenêtre.
Enregistrez votre article et allez voir sur votre site si cela vous convient. L’article « débutants »
est accessible dès la page d’accueil du site. Cliquez sur son titre.

Redimensionnement de l’image
Pour redimensionner votre image directement dans votre article, cliquez une fois sur l’image.
L’éditeur de texte va afficher des petits carrés blancs sur les bords de l’image. Vous pouvez vous
en servir comme de poignées pour étirer l’image dans une direction ou dans une autre. La boîte
grise dynamique qui s’affiche au cours du redimensionnement vous indique de combien de pixels
vous augmentez ou diminuez l’image par rapport à sa largeur et hauteur d’origine (figure 6.11).

Pratique : pour déplacer une image dans le corps d’un article, il suffit de rester cliqué dessus et de
faire un glisser-déplacer là où vous le souhaitez. Dans l’article « Débutants », faites glisser votre image
devant le paragraphe commençant par « Vous aurez peut-être aussi envie de... » et enregistrez.

Il est bien entendu possible d’insérer plus d’une image dans un article ; vous devez alors
répéter les opérations d’insertion et placement autant de fois qu’il y a d’images à insérer.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 107 — #131
✐ ✐

6.2 Insérer et mettre en forme vos images 107

Figure 6.10 — Positionner une image dans du texte

Figure 6.11 — Redimensionnement d’une image

L’éditeur JoomlaCK et les paramètres particuliers d’une image


Si vous vous projetez au chapitre 14, vous trouverez l’explication d’un cas pratique vous
permettant d’installer un autre éditeur de texte. Dans notre exemple, nous utilisons JoomlaCK.
L’utilité d’un éditeur alternatif est d’offrir plus de possibilités de mises en page que l’actuel
TinyMCE.
En l’occurrence, JoomlaCK vous permet de revenir plus facilement sur le dimensionnement
de votre image, par le biais d’un clic droit de la souris, vous offrant un menu contextuel. En
accédant aux Propriétés de l’image (figure 6.12), vous pourrez ainsi redéfinir au pixel près la
taille de votre image, et son positionnement.
Nous vous conseillons fortement de saisir une description, sinon l’image ne sera
pas visible par les moteurs de recherche. Terminez votre saisie en cliquant sur le bouton OK et
bien sûr enregistrez les modifications de votre article.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 108 — #132
✐ ✐

108 Chapitre 6. Multimédia et réseaux sociaux

Figure 6.12 — Modifier les propriétés d’une image avec JoomlaCK

Créer une marge autour de l’image


Pour mettre en valeur une image, vous aurez sans doute envie de l’espacer un peu plus du
texte de votre article et d’y ajouter une bordure. Nul besoin pour cela de modifier votre photo
avec un logiciel particulier. Grâce à JoomlaCK, double- cliquez simplement sur votre image.
Comme dans notre exemple de la figure 6.13, indiquez une bordure de 5, et un espace vertical
et horizontal de 10 par exemple. Les valeurs sont exprimées en pixels et l’aperçu sur la droite se
modifie en fonction des valeurs que vous saisissez.
Cliquez sur le bouton OK puis enregistrez les modifications de votre article. Rendez-vous
ensuite sur votre site pour voir le résultat (figure 6.14).

Afficher un slideshow
Même si Joomla! permet de créer une galerie d’images, comme nous l’avons vu sur le site des
Parcs Australiens fourni avec les données d’exemple, il existe toutefois un moyen beaucoup
plus simple de faire mieux et plus rapidement. Nous allons utiliser pour cela le module
« Slideshow CK » qui génère un slideshow, aussi appelé diaporama. Vous en trouverez une
présentation sur le site www.joomla.fr : http://extensions.joomla.fr/categories/joomla-3-x-et-2-5/
photos-videos/slideshow-ck.html. Vous pouvez en voir une démonstration sur le site http://www.
joomlack.fr/extensions-joomla/slideshow-ck.

Installer le module Slideshow CK


Le module « Slideshow CK » permet d’afficher vos images et vidéos et il est de plus « responsive »
design, c’est-à-dire qu’il est compatible avec les mobiles.
Rendez-vous à l’adresse suivante : http://www.joomlack.fr/en/download-joomla-extensions/
doc_download/59-slideshow-ck pour télécharger la dernière version du module.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 109 — #133
✐ ✐

6.2 Insérer et mettre en forme vos images 109

Figure 6.13 — Créer une marge autour d’une image

Figure 6.14 — Article avec une image mise en page

Ensuite, dans le gestionnaire d’extensions, dans l’onglet Archive à envoyer, cliquez sur
parcourir et sélectionnez l’archive depuis l’emplacement où vous l’avez téléchargé. Appuyez
enfin sur le bouton bleu Envoyer & Installer.
Maintenant que le module est installé, nous allons le paramétrer.

Publier le module
Le module est bien installé, mais vous ne pourrez pas le voir sur votre site tant qu’il ne sera
pas publié. Dans le gestionnaire de modules, saisissez « slide » dans le moteur de recherche
des modules et lancer la recherche. Le module Slideshow CK va s’afficher. Comme le montre la

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 110 — #134
✐ ✐

110 Chapitre 6. Multimédia et réseaux sociaux

croix en rouge devant son nom, le module n’est pas publié. Cliquez sur la croix pour publier le
module puis cliquez sur le titre pour modifier les paramètres.

Positionner l’affichage du module


Même publié, votre module ne va pas s’afficher, car vous ne lui avez pas encore dit où il devait
s’afficher. Dans chaque template, les modules peuvent s’afficher à plusieurs endroits prédéfinis.
Cliquez sur le bouton Masquer du champ Montrer le titre. Sélectionnez la position « Haut centré
[position-3] du template Protostar et cliquez sur Enregistrer. Votre module ne va toujours pas
s’afficher. Pas d’inquiétude, il faut maintenant lui préciser sur quelle(s) page(s) vous souhaitez
qu’il soit visible.

Affecter le slideshow à une page


Comme il s’agit d’un élément graphique important de notre site, nous comptons l’afficher
dès la page d’accueil. Mais comme il prend de la place et afin de gagner en lisibilité, nous
ne l’afficherons pas sur les autres pages. Il va donc falloir l’afficher uniquement sur la page
d’accueil.

Figure 6.15 — Affecter le module de slideshow à une seule page

Dans la gestion des modules, cliquez sur le module Slideshow CK puis rendez-vous sur
l’onglet « Assignation des menus ». Par défaut, Joomla! affecte les nouveaux modules à « Aucune
page ». Dans la liste déroulante, choisissez l’option « Seulement les liens sélectionnés ». Comme
vous le voyez, toute l’arborescence est cochée. Cliquez sur « Aucun » en dessous de la liste
déroulante pour tout décocher (figure 6.15).
Réduisez les menus (en cliquant sur le signe juste avant le nom) afin de vous repérer
plus facilement dans l’arborescence. Cochez la case de l’élément « Accueil » du menu « Menu
Principal » et cliquez sur le bouton vert Enregistrer.
Ouvrez un nouvel onglet pour consulter la page d’accueil de votre site, qui devrait ressembler
à la figure 6.16.
Avec un tel élément graphique sur la page d’accueil, autant dire que le bandeau d’origine fait
pâle figure. Nous vous proposons de le dépublier afin de valoriser encore plus votre slideshow.
Retournez dans le gestionnaire de modules et utilisez les filtres de gauche pour n’afficher que les
modules de la position 3. Dépublier ensuite le module « Module Image » en cliquant simplement
sur la coche verte de la colonne Statut (figure 6.17).
Votre site ressemble maintenant à la figure 6.18. Pour mettre à jour les slides avec vos propres
images et vidéos, ouvrez le module et cliquez sur l’onglet « Gestionnaire des slides ». Pour utiliser
encore mieux ce module, nous vous recommandons d’essayer différentes apparences (onglet

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 111 — #135
✐ ✐

6.3 Diffuser vos vidéos et vos présentations 111

« Options de styles ») ou bien différents effets de Transition (onglet « Options des effets »). Vous
pouvez également spécifier si vous voulez une lecture automatique ou manuelle, une pause au
survol du curseur, etc. Amusez-vous bien et surtout, mettez-en plein à la vue à vos visiteurs.

Figure 6.16 — Le module Slideshow CK en action

Figure 6.17 — Dépublier le module image de la page d’accueil

6.3 DIFFUSER VOS VIDÉOS ET VOS PRÉSENTATIONS

Prérequis, lever les interdits


Par mesure de sécurité, l’éditeur de texte TinyMCE, livré par défaut avec Joomla!, interdit un
certain nombre de balises. Cela permet d’éviter la saisie de code XHTML non-conforme aux
normes ainsi que des balises potentiellement dangereuses. Pour pouvoir intégrer des vidéos dans
les pages de votre site, et si TinyMCE reste votre éditeur de texte par défaut, il va donc falloir
modifier ses paramètres.
Dans le menu « Extensions », cliquez sur Gestion des plugins. Retrouvez celui qui se nomme
« Editeur – TinyMCE » (saisissez tinymce dans le moteur de recherche des plugins) et cliquez
dessus (figure 6.19).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 112 — #136
✐ ✐

112 Chapitre 6. Multimédia et réseaux sociaux

Figure 6.18 — Un slideshow dès la page d’accueil

Figure 6.19 — Trouver le plug-in TinyMCE

Dans l’onglet Plugin, vérifiez que le champ « Élément prohibés » ne contienne pas la balise
« iframe ». Si c’est le cas, supprimez là et enregistrer. En effet, les plates-formes de diffusion de
vidéos utilisent presque toutes cette balise.

Insérer une vidéo YouTube ou Dailymotion


Qu’il s’agisse d’une vidéo YouTube, Dailymotion ou Vimeo, l’opération va être la même : nous
allons récupérer un code relatif à une vidéo donnée sur la plate-forme concernée et nous allons
l’insérer dans un article. C’est une méthode qui fonctionne pour de nombreuses plates-formes,
puisque presque toutes proposent désormais ces codes afin de partager le plus possible les
vidéos.

Récupérer un code sur YouTube


La vidéo d’exemple choisie sur YouTube est une vidéo de présentation de notre CMS préféré
réalisée en juin 2012. Vous la trouverez à l’adresse suivante : http://www.youtube.com/watch?v=
Qjnc0H8utks.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 113 — #137
✐ ✐

6.3 Diffuser vos vidéos et vos présentations 113

Pour obtenir le code d’intégration de la vidéo, cliquez sur le bouton Partager (figure 6.20),
puis sur le bouton Intégrer qui apparaîtra ensuite.

Figure 6.20 — Code d’intégration YouTube

Récupérer un code sur Dailymotion


La vidéo choisie sur Dailymotion est une interview de Christophe Demko, un des
rares développeurs français du noyau Joomla!, Elle est disponible à cette adresse :
http://www.dailymotion.com/video/xcqc3f_interview-de-christophe-demko-jooml_tech.

Pour obtenir le code d’intégration, positionnez le curseur de votre souris sur la vidéo, puis
cliquez sur le bouton Export (figure 6.21). Cela va faire apparaître trois options sur la vidéo.
Cliquez sur </> (le symbole de la balise embed, que l’on pourrait traduire par « lecteur
exportable »). L’interface vous annonce que le code est copié. L’étape suivante va consister à
l’insérer dans l’article.

Insérer le code d’intégration dans un article


Une fois que vous avez copié le code fourni, allez dans le gestionnaire d’articles et modifier
l’article « Habitués » (gestion des articles, catégorie Joomla!, niveau maximum 1). Une fois
dans la page de modification de l’article, utilisez le menu Outils, puis Code source de l’éditeur
TinyMCE. Cela va ouvrir une nouvelle fenêtre en pop-up avec du code HTML (figure 6.22). Pas
d’inquiétude si vous ne savez pas vous y repérer. Positionnez votre curseur avant le premier
élément de la page et faites un Ctrl + V afin de coller le code d’insertion de la vidéo. Si vous
essayez de coller ce code, directement dans l’aperçu de l’article, le code d’intégration de la
vidéo sera considéré comme du texte et ne sera pas interprété. Une fois le lien inséré, cliquez
sur le bouton OK dans la fenêtre en pop-up pour valider l’insertion.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 114 — #138
✐ ✐

114 Chapitre 6. Multimédia et réseaux sociaux

Figure 6.21 — Récupérer un code d’intégration sur Dailymotion

Figure 6.22 — Intégration d’un code vidéo dans un article

Regarder la vidéo sur votre site


L’article « Habitués » est accessible dès la page d’accueil, bien que la vidéo figure également
en page d’accueil, cliquez sur le titre pour y accéder dans son intégralité. La vidéo contient les
mêmes éléments de lecture (lecture, pause, balance du son, plein écran) que le site original
(figure 6.23).

Encore plus simple, l’extension VidéoJS


Si ces manipulations vous ont paru compliquées, sachez qu’il existe des extensions tierces
permettant avec un simple copier-coller du code de votre vidéo de la publier sur votre site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 115 — #139
✐ ✐

6.4 Partager vos contenus sur les réseaux sociaux 115

Figure 6.23 — Une vidéo dans un article

Nous vous conseillons d’essayer le lecteur « VideoJS », téléchargeable sur http://www.


boeschung.de/en/joomla/bo-videojs/video-js-v320. Cette extension, composée d’un plugin,
vous propose en plus un lecteur au format HTML5, dernier standard du Web. Vous trouverez des
exemples et des tutoriels sur le site www.videojs.com.
Pour utiliser cette extension, rendez-vous dans le gestionnaire d’extensions, dans l’onglet
Archive à envoyer, cliquez sur Parcourir et cherchez le fichier préalablement téléchargé. Cliquez
sur le bouton bleu Envoyer & Installer. Faites un copier-coller du code présenté par l’interface,
avec les accolades.

Attention ! Cette extension est composée d’un plugin. Si vous n’activez pas le plugin, le lecteur
ne fonctionnera pas. Dans la gestion des plugins, chercher le plugin Content - bo:VideoJS (en
cherchant vidéo), et activez-le (cliquez sur la croix en rouge de statut).

Dans le gestionnaire d’article, éditez l’article « Habitués » et collez votre code avant le dernier
paragraphe. Vous n’avez ici pas besoin de passer par l’option Code Source. Le code à insérer est
directement compris et interprété par Joomla! grâce au plugin nouvellement installé. Enregistrez
et allez voir sur votre site le rendu, qui devrait correspondre à la figure 6.24.

6.4 PARTAGER VOS CONTENUS SUR LES RÉSEAUX SOCIAUX

Vous voulez que vos visiteurs puissent facilement partager vos contenus sur les réseaux sociaux ?
Nous vous proposons d’installer des boutons sur chacune de vos pages afin de vous permettre
de faire un lien en un clic vers vos profils Facebook, Twitter, LinkedIn et quelques autres.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 116 — #140
✐ ✐

116 Chapitre 6. Multimédia et réseaux sociaux

Figure 6.24 — Le lecteur VideoJS en HTML5 dans un article

Installer l’extension ITP Share


L’extension « ITP Share » fera apparaître sur vos pages une barre de boutons (différents formats
possibles) vers les applications sociales les plus en vogue telles que Facebook, Twitter, Google +
ou encore le réseau social professionnel LinkedIn (figure 6.25).

Figure 6.25 — Des boutons vers des applications sociales

Vous pouvez avoir un aperçu des différents réglages possibles de l’extension sur la page
http://itprism.com/free-joomla-extensions/social-marketing-seo/socialmedia-multi-share. L’ex-
tension est disponible en téléchargement sur cette même adresse. Pour notre exemple, nous
téléchargerons la partie Module de cette extension. Ensuite, pour l’installer, rendez-vous dans
la « Gestion des extensions », onglet Archive à envoyer, puis cliquez sur le bouton Parcourir.
Recherchez le fichier préalablement téléchargé, cliquez dessus puis sur le bouton « Envoyer &
Installer » (figure 6.26).
L’interface d’administration va vous confirmer par un message que l’installation est réussie.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 117 — #141
✐ ✐

6.4 Partager vos contenus sur les réseaux sociaux 117

Figure 6.26 — Installation du module ITP Share

Paramétrer le module
Le module est bien installé, mais il restera inerte tant qu’il ne sera pas publié. Dans le menu
« Extensions », cliquez sur Gestion des modules. Comme vous pouvez le voir sur la figure 6.27,
le module ITPShare n’est pas publié (icône rouge du statut) et n’a aucune position d’affichage
ou pages affectées.

Figure 6.27 — Le module ITP Share dans le gestionnaire de modules

Réglages de base du module


Nous allons tout d’abord paramétrer le module. Il va falloir déterminer quel bouton vous allez
choisir d’afficher, à quel emplacement et sur quelle page.
Cliquez sur ITPShare pour ouvrir la gestion du module, nous allons y effectuer une série
d’opérations (figure 6.28). Nous vous proposons tout d’abord de désactiver l’affichage du titre
du module, afin de ne pas apporter de confusion à vos lecteurs. Cliquez sur Masquer pour
l’option « Montrer le titre ».
Un module doit être publié à un emplacement prédéfini dans le template. En l’occurrence
nous vous proposons d’afficher cette barre de boutons sociaux dans le Fil de navigation [position-
2] du template Protostar (template par défaut après l’installation de Joomla!).

Paramètres des boutons


Dans notre exemple, nous souhaitons afficher les boutons Twitter, LinkedIn, Pinterest et Google+.
Dans l’onglet Twitter, cliquez sur Oui pour le champ Dispay Button. Saisissez ensuite le nom de
votre compte Twitter (sans le @), éventuellement un compte Twitter que vous recommandez et
même des hashtags (sans le #), comme le montre la figure 6.29.
Vous verrez sur la figure 6.30 ce que donnera la fenêtre pop-up si vous cliquez sur le bouton
Twitter. La page en cours est l’article « Débutants ».

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 118 — #142
✐ ✐

118 Chapitre 6. Multimédia et réseaux sociaux

Figure 6.28 — Préparer l’affichage du module ITP Share

Figure 6.29 — Paramètres du bouton Twitter de ITP Share

Faites de même pour tous les boutons qui vous intéressent, puis dans le premier Module,
sélectionnez le statut Publié, et n’oubliez pas de sauvegarder.

Affichage du module ITP Share


Position du module
Maintenant que vous avez fini de paramétrer les boutons du module ITP Share qui vous
intéressent, il faut indiquer à Joomla! où vous souhaitez faire apparaître les boutons. Dans
les paramètres du module, cliquez sur l’onglet Assignation des menus. Si vous n’avez pas encore
vu sur votre site à quoi le module ressemble, choisissez « Sur toutes les pages » et enregistrer.
Allez ensuite voir sur votre site comment est positionné le module. Comme vous pouvez le voir
sur la figure 6.31, le module est positionné sous le fil de navigation.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 119 — #143
✐ ✐

6.4 Partager vos contenus sur les réseaux sociaux 119

Figure 6.30 — Le module ITP Share en action avec Twitter

Figure 6.31 — Le module ITP Share dans une page d’article

Pour modifier le positionnement du module et le faire passer au-dessus du fil de navigation,


rendez-vous dans le gestionnaire de modules et filtrez tous les modules de la position 2 (filtre
position sur la gauche). Cliquez sur l’icône d’ordre (référence en rouge dans la figure 6.32)
et faites passer la ligne du module ITP Share en première position par mouvement de glisser-
déplacer en restant appuyé sur le symbole représentant trois petits carrés verticaux.
Cliquez de nouveau sur l’icône de l’ordre et allez voir sur votre site. Votre module doit
apparaître au-dessus du fil de navigation.

Affichage sur certaines pages


Peut-être que vous souhaitez faire apparaître votre barre de boutons sociaux uniquement sur
certaines pages. Dans le gestionnaire de module, éditez le module ITP Share et allez dans
l’onglet « Assignation des menus ». Nous voulons faire apparaître le module uniquement sur le
sous-site dédié à la boutique de fruits. Dans la liste déroulante, nous allons choisir « Seulement
les liens sélectionnés ». L’interface nous présente alors toute l’arborescence du site avec les
données d’exemple.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 120 — #144
✐ ✐

120 Chapitre 6. Multimédia et réseaux sociaux

Figure 6.32 — Déplacer le module ITP Share au-dessus du fil de navigation

Cliquez sur Aucun en dessous de la liste déroulante pour que le module ne soit plus affecté
à aucune page. Pour une meilleure lisibilité, cliquez sur les symboles situés devant chaque
menu sauf celui de la boutique de fruit. Dans la liste déroulante située à droite, cliquez sur
« Sélection » (figure 6.33), ce qui aura pour effet de cocher tous les éléments de la Boutique de
fruits. Enregistrez et allez voir sur le site.

Figure 6.33 — Affectation du module à certaines pages

Attention ! Nous avions publié ce module sur l’emplacement Fil de navigation [position-2] du
template Protostar or la Boutique de fruits fonctionne avec le template Beez3 et son propre style
(Boutique de fruits). Veillez donc à affecter le module à un emplacement compatible avec ce template
comme « Milieu en haut – position 12 ».

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 121 — #145
✐ ✐

6.4 Partager vos contenus sur les réseaux sociaux 121

En résumé
On ne pouvait pas vous proposer un livre sur Joomla! qui ne parle que de Joomla!, tout
simplement parce qu’aujourd’hui sur le Web, les interconnexions sont si nombreuses et si
efficientes qu’il aurait été dangereux pour vous de croire que votre site pouvait exister dans une
bulle indépendante. Nous espérons que cet éclairage sur vos contenus multimédias et sur les
liens que vous pouvez tisser avec les réseaux sociaux vous donnera des idées pour concevoir
une communication digitale efficace et percutante.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 122 — #146
✐ ✐

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 123 — #147
✐ ✐

TROISIÈME PARTIE

Administrer
votre Joomla!

Une administration aisée et intuitive


L’adoption de l’interface Bootstrap, utilisée notamment par Twitter, a ouvert la voie vers
une refonte graphique de l’interface d’administration. La nouvelle iconographie et l’ergonomie
générale de l’administration ont été grandement repensées. Pour autant, on ne se sent pas
dépaysé.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 124 — #148
✐ ✐

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 125 — #149
✐ ✐

7
Utilisateurs, groupes
et permissions

Objectif
Les utilisateurs d’un site en sont les principaux acteurs. Ce sont eux qui vous diront ce qui ne
fonctionne pas, ce qu’ils aimeraient y voir et ce qu’ils en attendent. Il est très important de
rester à leur écoute pour faire évoluer votre site.
À l’issue de ce chapitre, vous serez capable de créer des groupes d’utilisateurs, de gérer les
comptes de tous vos visiteurs ainsi que leurs niveaux d’accès et de permissions.

7.1 ABC DU WEBMASTER

Comprendre comment ça marche


Quelle que soit la nature de votre site Web, vous éprouverez sûrement un jour l’envie ou le besoin
que des visiteurs y aient accès pour autre chose que la simple consultation de vos pages. Qu’il
s’agisse d’auteurs, de modérateurs, d’administrateurs, de membres, de clients, de prospects,
d’abonnés à votre newsletter : tous sont autant d’utilisateurs différents de votre site. Il va donc
s’agir de permettre à chacun d’eux d’y accéder.
Dans Joomla!, il existe deux grandes familles d’utilisateurs : ceux qui peuvent accéder à
l’espace d’administration et ceux qui ne le peuvent pas. Tous vos visiteurs, clients et prospects
n’ont aucune raison d’y accéder. En revanche, votre webmestre, vos commerciaux, vos auteurs,
vos secrétaires, tous les gens qui vont vous aider à administrer votre site ont besoin de pouvoir
accéder à l’interface d’administration.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 126 — #150
✐ ✐

126 Chapitre 7. Utilisateurs, groupes et permissions

Vous maîtrisez bien évidemment tout le processus de création de compte et vous pouvez
à tout instant suspendre un compte ou le supprimer. Vous pouvez également automatiser une
partie du processus de création de compte en permettant à des utilisateurs de créer leur propre
compte (avec ou sans validation de votre part).
Il reste à définir une stratégie afin de sécuriser l’ensemble. Joomla! utilise pour cela trois
paramètres dans sa gestion de la sécurité : les droits, les niveaux d’accès et les groupes. Vous
serez ainsi amené à donner des droits d’accès sur certains de vos contenus. Ces droits feront
partie de niveaux d’accès (des niveaux d’accréditations) que vous affecterez ensuite à vos
utilisateurs rassemblés sous forme de groupes.
Rendez-vous dès maintenant dans le menu Utilisateurs pour gérer tous vos intervenants.

7.2 LA GESTION DES UTILISATEURS

Tout d’abord, familiarisons-nous avec cette partie de l’espace d’administration. Au moment de


la création de votre site, vous êtes le seul utilisateur et vous avez en plus un rôle très particulier :
vous êtes un « super-utilisateur ». Vous avez en effet tous les droits, y compris celui de supprimer
tout élément de votre site...
Le gestionnaire d’utilisateurs est constitué de trois espaces : le menu supérieur avec les
boutons d’action, le menu de gauche et la zone principale affichant l’élément du menu gauche
sélectionné, qui est par défaut la liste des utilisateurs. Le menu supérieur vous propose entre
autres de créer un nouvel utilisateur, de le modifier, de le bloquer, de le supprimer, d’accéder
aux paramètres ainsi qu’à l’aide. Le menu situé sur la gauche vous permet de changer de vue :
liste des utilisateurs, liste des groupes, liste des niveaux d’accès, notes utilisateurs et catégories
de notes. Nous verrons un peu plus tard et plus en détail les principes de groupes, de niveaux
d’accès et les notes associées ; mais auparavant, attardons-nous un peu sur tout ce que vous
pouvez faire avec vos utilisateurs.

Soyez vigilant sur les droits que vous accordez. Une personne n’étant pas à l’aise avec les
outils informatiques ne devrait jamais être administrateur.

Les filtres
Comme dans chaque espace de gestion de l’administration de Joomla!, des filtres vont vous
simplifier la vie. Bien sûr, quand on est le seul utilisateur, cela peut sembler superflu, mais quand
vous aurez deux cents utilisateurs abonnés à votre newsletter, cinquante clients, deux auteurs
et huit commerciaux, vous serez ravis d’apprendre à n’afficher que certains utilisateurs plutôt
que de devoir les chercher tous. Pour ce faire, rien de plus simple, cliquez sur le bouton Outils
de Recherche. Ce dernier fera apparaître les options de filtrages : choisissez un état particulier
dans une liste sur votre gauche, par exemple le groupe Enregistré ; et l’interface filtrera alors
directement la liste des utilisateurs sur ce critère.

Les tris
Une autre manière rapide de s’y retrouver est de trier les utilisateurs grâce aux en-têtes de
colonnes de la liste (nom, identifiant, actif, etc.).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 127 — #151
✐ ✐

7.2 La gestion des utilisateurs 127

La recherche
Vous pouvez également saisir un nom dans la zone de recherche des utilisateurs et cliquer sur
la petite loupe de recherche. Cette fonctionnalité est très pratique si vous avez beaucoup de
comptes. Elle peut en outre vous permettre de trouver des doublons ou des homonymes.

Votre compte de super-utilisateur


Comme il s’agit du compte le plus important, nous allons dans un premier temps le person-
naliser : depuis le Gestionnaire des utilisateurs, cliquez sur votre identifiant pour ouvrir votre
profil.
Trois onglets sont à votre disposition. Dans le premier, vous pouvez modifier votre nom, votre
identifiant, votre mot de passe ou encore votre e-mail. C’est également dans votre profil que
vous allez indiquer au site si vous êtes destinataire des messages système, par exemple pour
valider la création d’un compte utilisateur. Vous retrouvez dans le second onglet votre affectation
au groupe des Super Utilisateurs. Dans le troisième enfin, vous pouvez également modifier votre
fuseau horaire, vos préférences linguistiques par défaut et votre site d’aide Joomla!. C’est très
pratique si vous êtes plusieurs à intervenir sur le site depuis différents pays : chacun peut en
effet avoir l’administration dans sa langue et les fichiers d’aide de son pays. Vous pouvez même
modifier le template d’administration ainsi que l’éditeur de texte par défaut.

Créer un nouvel utilisateur


Les éléments d’un compte vous étant plus familiers à présent, nous pouvons procéder à la
création d’un nouvel utilisateur. Pour cela, depuis le menu Utilisateurs/Gestion des utilisateurs,
sélectionnez Ajouter un utilisateur, ou bien depuis la liste des utilisateurs existants, cliquez sur le
bouton Nouveau.
De la même manière que pour votre propre compte, définissez tour à tour un nom, un
identifiant de connexion, un mot de passe, un e-mail (figure 7.1).
Par défaut, le compte sera activé, bien que l’utilisateur ne se soit encore jamais connecté. En
vous rendant dans le second onglet, groupes utilisateurs assignés, vous verrez que l’utilisateur
appartiendra par défaut au groupe d’utilisateurs « enregistrés ». Nous reviendrons sur les groupes
et leur affectation à l’étape 7.3.
Enfin, le troisième onglet vous donnera accès aux paramètres de langue, éditeurs de texte et
les autres options vues sur votre propre profil.
Il ne vous reste plus qu’à enregistrer votre nouvel utilisateur. Pour cela, trois possibilités
s’offrent à vous :
• cliquez sur Enregistrer, ce qui sauvegardera les informations partiellement saisies et vous
permettra de continuer la saisie dans le même écran ;
• cliquez sur Enregistrer & Fermer, afin de terminer la saisie et sauvegarder votre nouvel
utilisateur ;
• cliquez sur Enregistrer & Nouveau, ce qui, en plus de sauvegarder le nouvel utilisateur en
cours, vous permettra de démarrer la création de l’utilisateur suivant.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 128 — #152
✐ ✐

128 Chapitre 7. Utilisateurs, groupes et permissions

Figure 7.1 — Création d’un nouvel utilisateur

Mettre à jour une fiche utilisateur


Mettre à jour la fiche d’un utilisateur revient à effectuer les mêmes opérations que celles que
nous avons réalisées précédemment sur le compte de super-utilisateur.
Pour accéder à la fiche d’un utilisateur existant, sélectionnez celui-ci dans la liste en cliquant
sur son nom, ou bien cochez la case à gauche du nom et cliquez sur le bouton Modifier.

Bloquer un utilisateur
Bloquer un utilisateur revient à l’empêcher de se connecter sur le site, quel que soit son niveau
d’accès. Son compte ne sera pas supprimé, mais simplement inutilisable, tel que le serait votre
téléphone après trois codes secrets erronés.
Ceci peut vous servir à bannir temporairement ou définitivement un utilisateur de votre site.
Pour bloquer un utilisateur, cliquez sur son icône de blocage dans la colonne Actif, ou bien
sélectionnez l’utilisateur en cochant la case à gauche du nom et cliquez sur le bouton Bloquer.
Si l’utilisateur visé se trouvait connecté au site, il serait alors immédiatement déconnecté.

Supprimer un utilisateur
Cette fonction ne doit pas être confondue avec la déconnexion (voir paragraphe suivant) ou le
blocage, la suppression d’un utilisateur étant une opération définitive et irréversible.
Pour supprimer un utilisateur, sélectionnez celui-ci en cochant la case à gauche du nom puis
cliquez sur le bouton Supprimer.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 129 — #153
✐ ✐

7.2 La gestion des utilisateurs 129

Déconnecter un utilisateur
En tant que modérateur vous pouvez être amené à canaliser certains utilisateurs sortant parfois
des règles établies sur le site. À ce titre, il peut être fort utile de couper court à leurs agissements.
Déconnecter un utilisateur met fin à sa session : il n’est alors plus authentifié sur le site, mais cela
ne l’empêche pas de se reconnecter ultérieurement. Nous vous conseillons plutôt de bloquer son
compte.
Dans un autre contexte, lors de maintenances à effectuer sur le site par exemple, il peut être
nécessaire de déconnecter ses utilisateurs. Ainsi vous-même ou un webmestre aurez peut-être à
recourir à cette fonction afin de limiter les accès au site temporairement.
Pour déconnecter un utilisateur, rendez-vous sur le panneau d’administration du site, en
sélectionnant le petit logo Joomla! visible en haut à gauche de l’écran. La page affichée vous
montrera alors les utilisateurs connectés soit dans la partie administration, soit dans la partie
site. Une croix à gauche du nom de l’utilisateur permet d’un simple clic de le déconnecter
instantanément.

Ajouter des notes


De retour dans la gestion des utilisateurs, et à la suite des niveaux d’accès dans le menu de
gauche, vous trouvez un système d’adjonction de notes aux utilisateurs permettant de façon
simple et rapide d’ajouter des appréciations aux profils de vos utilisateurs.
Ces notes sont visibles des seules personnes habilitées à administrer les utilisateurs et ne sont
pas visibles des utilisateurs eux-mêmes. Néanmoins, j’attire votre attention sur le côté éthique de
ces appréciations, toute critique bonne ou mauvaise sur un utilisateur se doit d’être dénuée de
tout caractère péjoratif ou déplacé.
Pourquoi utiliser ces notes ? Votre site est de plus en plus fréquenté. Vous avez des utilisateurs
actifs, qui vous aident par leurs contributions à enrichir le contenu de votre site ou à mettre de
l’ordre au sein de votre communauté d’utilisateurs. En notant les initiatives de ces derniers, vous
constituez un historique de vos remarques sur ces utilisateurs. En définitive, cela vous amènera
peut-être à donner ou retirer des privilèges à certains (droits de publication ou d’administration
du contenu, de modération d’un forum).
Ces notes peuvent, qui plus est, faire l’objet d’une classification, par le biais de catégories
personnalisables.

Contacter vos utilisateurs


Vous serez peut-être amené à faire des annonces aux utilisateurs possédant un compte sur votre
site : maintenances ou bien tout simplement des messages d’information générale sur la vie
même du site, son évolution. Pour cela, un envoi de message groupé est proposé.
Depuis le menu Utilisateurs, cliquez sur Envoi d’e-mails en nombre pour accéder à cette
fonction.

Les paramètres du message


La définition du message en lui-même est relativement minimaliste. Il est composé d’un titre
(objet) et d’un corps de message.

Si votre message est réellement important, veillez à apporter un soin particulier au titre du
message afin que celui-ci ne soit pas considéré comme un courrier indésirable.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 130 — #154
✐ ✐

130 Chapitre 7. Utilisateurs, groupes et permissions

Les options d’envoi


Sur votre droite sont définies les préférences générales d’envoi du message ainsi que les
destinataires.
Envoyer aux groupes utilisateurs enfants : en fonction du groupe d’utilisateur
sélectionné comme destinataire, vous pouvez indiquer si les sous-groupes en relation recevront
également le message ou non (Voir l’étape 7.3 : La gestion des groupes).
Envoyer en HTML : ce paramètre permettra l’envoi du message au format HTML désormais
disponible et activé dans la plupart des outils de messagerie.
Envoyer aux utilisateurs désactivés : les utilisateurs dont les comptes sont inactivés
recevront tout de même l’e-mail.
Destinataires en copie cachée (BCC) : chaque utilisateur recevra dans ce cas le message
en copie cachée, c’est-à-dire sans mention des autres destinataires. Une option vivement
recommandée pour la confidentialité par exemple de vos listes d’abonnés.
Groupe : ce paramètre permettra la sélection du groupe destinataire du message. La
sélection, par exemple du groupe Auteur, ainsi que l’activation de l’option Envoyer aux groupes
utilisateurs enfants permettra un envoi massif à tous les groupes héritant du groupe sélectionné.

Mots de passe et sécurité


Nous vivons aujourd’hui entourés de codes et de mots de passe. Ce sont autant de choses à
retenir au quotidien. Bien choisir son mot de passe est une chose essentielle. Même si cela peut
paraître évident pour beaucoup d’entre nous, peu de personnes se doutent du réel danger que
représente ce simple défaut de vigilance. Les moyens de sécurité les plus sophistiqués peuvent
être mis en place, mais ceux-ci ne serviront à rien si le mot de passe – même celui d’un seul
administrateur du site – est trouvé.
Dans Joomla!, les mots de passe, une fois définis, ne sont pas accessibles, ils sont stockés de
manière cryptée. Il est par conséquent impossible de les retrouver s’ils ont été perdus. Néanmoins,
une option, si tant est qu’elle soit active sur le site (voir étape 8.2), permet de demander depuis
le menu de connexion utilisateur l’envoi d’un e-mail à l’utilisateur. Cet e-mail comporte un code
de confirmation, servant à vérifier l’identité du demandeur avant de pouvoir définir un nouveau
mot de passe.
Qu’est-ce qu’un bon mot de passe ? C’est une suite de caractères simple à retenir pour vous
et compliquée à trouver pour une personne mal intentionnée.
Un mauvais mot de passe est constitué d’éléments qui se réfèrent à votre environnement
personnel et qui sont donc facilement accessibles sur Internet : nom, prénoms, date de naissance,
anniversaire de mariage, etc. Ce sont les premières informations testées lorsqu’il s’agit de nuire.
Dans les recommandations d’usage, vous trouverez le minimum de caractères à prévoir, au
moins 6 à 8 caractères, voire plus, l’idéal étant un mélange de lettres et de chiffres. Vous pouvez
par exemple vous servir d’une phrase ou d’une citation dont on ne retiendrait que les initiales de
chaque mot. Pour compliquer un peu plus, on peut y mélanger minuscules et majuscules, ainsi
que des caractères spéciaux ou des accents.
L’identifiant de connexion a également son importance dans la sécurité de votre site. Ainsi
on évitera tout particulièrement de définir un identifiant du type « admin », ou « administrateur »,
encore trop communs de nos jours.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 131 — #155
✐ ✐

7.3 La gestion des groupes 131

7.3 LA GESTION DES GROUPES

Utilité des groupes


Il y a deux catégories d’utilisateurs : ceux qui accèdent à la partie classique et publique du
site (vos visiteurs, vos clients, vos membres), et ceux qui ont accès à l’espace d’administration
(vous-même en tant qu’administrateurs, vos auteurs, vos commerciaux, etc.).

Les groupes existants et leurs rôles


Un certain nombre de groupes existent par défaut lors de l’installation du site (figure 7.2). Dans
bien des cas, ces seuls groupes suffisent à délimiter le périmètre d’action de chacun. Chaque
groupe fait partie d’une hiérarchie qui hérite des droits du groupe précédent. On peut ainsi faire
évoluer certains de ses utilisateurs au fil du temps en leur octroyant plus ou moins de droits.

Figure 7.2 — Groupes utilisateurs

Les groupes publics


Public : groupe ne possédant aucun droit spécifique autre que la consultation.
Invité, Enregistré : tout visiteur de votre site est considéré comme un utilisateur public.
Ainsi la plupart des contenus du site sont accessibles aux yeux de tous. Néanmoins, on peut
choisir de limiter l’accès à certaines publications ou contenus à des utilisateurs identifiés et par
conséquent accrédités (les membres d’une association, d’un conseil d’administration, vos clients
premium, vos distributeurs et revendeurs, etc.).
Auteur : l’auteur peut créer et rédiger du contenu. Il lui est également possible de modifier
du contenu issu de ses propres créations.
Rédacteur : le rédacteur peut réaliser les mêmes opérations que l’auteur, mais peut
également modifier tous les contenus.
Éditeur : l’éditeur dispose des droits du rédacteur et la possibilité de valider les contenus en
vue de leur publication.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 132 — #156
✐ ✐

132 Chapitre 7. Utilisateurs, groupes et permissions

À noter : deux groupes supplémentaires sont également fournis à titre d’exemple, Client et
Fournisseur. Héritant respectivement des groupes Auteur et Enregistré, ceux-ci vous permettent
de vous faire la main dans le cadre d’un site dédié au commerce en ligne. Libre à vous de
les conserver ou de créer vos propres groupes.

Les groupes d’administration


Gestionnaire : le gestionnaire, peut également générer et publier du contenu, tout comme
l’éditeur. Il est également en mesure de visualiser les informations du système.
Administrateur : l’administrateur constitue, avec le super-utilisateur, la clef de l’administra-
tion proprement dite du site. Il est en mesure non seulement de générer et publier du contenu,
mais également :
• de gérer l’ensemble des utilisateurs hormis les super-utilisateurs ;
• d’envoyer des messages aux utilisateurs ;
• de gérer les menus du site ;
• de gérer l’installation d’extensions, templates et langues supplémentaires.

Super-utilisateur : le super-utilisateur est le seul à avoir le contrôle total de l’ensemble


des fonctions d’administration du site, y compris la configuration système de ce dernier. Il est
également le seul à pouvoir créer ou promouvoir un nouveau super-utilisateur.

Attention ! Tous les droits des différents groupes présentés ici donnent une représentation
globale de leur niveau d’accès sur le site. Nous verrons un peu plus tard que nous pouvons
affiner leurs droits et niveaux d’accès sur chaque secteur d’administration en fonction de
besoins particuliers.

Créer de nouveaux groupes


Si vous avez des profils d’utilisateurs très différents, vous trouverez intéressant de prévoir dès le
départ de nouveaux groupes, en fonction de leurs actions sur le site.
Prenons un exemple dans lequel vous êtes à la tête d’une entreprise ayant plusieurs secteurs
d’activité. Vous pouvez segmenter l’accès de vos commerciaux ou spécialistes métiers selon leurs
domaines respectifs. Chaque équipe de commerciaux ou spécialistes aura alors son propre
groupe.
Nous verrons également un peu plus tard que, dans le même esprit, nous pourrons
augmenter ou au contraire restreindre ces accès définis par défaut, selon d’autres critères.
Vous pourrez enfin, par ce biais, cibler vos communications internes envers vos utilisateurs
par secteur, évitant ainsi d’inonder de messages des personnes non concernées.
Depuis le menu de gauche du gestionnaire des utilisateurs, sélectionnez Groupes utilisateurs
et cliquez sur le bouton Nouveau.
Saisissez un titre significatif, puis choisissez le groupe hiérarchique « parent » dont il héritera
les droits ; enfin, enregistrez. Ce groupe nouvellement créé n’a pour l’instant pas de différence
avec son groupe parent. La différence se fera lors de l’assignation des niveaux d’accès, à l’étape
7.4.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 133 — #157
✐ ✐

7.4 La gestion des niveaux d’accès 133

Assigner et retirer des groupes


Pour assigner et retirer des groupes, rendez-vous dans la fiche d’un utilisateur. Vous constaterez
que chaque utilisateur créé peut se voir attribué un ou plusieurs groupes. Pour cela, il vous suffit
de cocher ou décocher chacun des groupes souhaités.

Supprimer un groupe
Tout d’abord une mise en garde s’impose : supprimer un groupe signifie non seulement
supprimer le groupe sélectionné, mais également supprimer tous les groupes qui en héritent ou
en dépendent. Par ailleurs, tout utilisateur affilié au(x) groupe(s) visés se verrait dépourvu des
accès ainsi supprimés. Vous courrez alors le risque de vous retrouver avec des utilisateurs sans
aucun accès.
Il est donc important de prendre le temps de mesurer l’impact éventuel d’une telle
suppression, d’autant que celle-ci est irréversible.
Depuis le menu de gauche du gestionnaire des utilisateurs, sélectionnez Groupes utilisateurs,
sélectionnez le groupe à supprimer, puis cliquez sur le bouton Supprimer.

7.4 LA GESTION DES NIVEAUX D’ACCÈS

Les niveaux d’accès constituent la seconde notion de groupage dans Joomla! Il s’agit en réalité
d’assembler différents groupes précédemment créés et de définir qui aura le droit de consulter
telle ou telle partie du site, aussi bien dans sa forme que dans son contenu. Vous pourrez ainsi
empêcher l’affichage de menus, modules, ou toute autre extension, ainsi que l’affichage de leurs
contenus respectifs.

Les niveaux d’accès existants


Accès Public : l’accès de niveau public est le niveau par défaut d’accès au site pour toute
nouvelle publication.
Accès Invité : dérivé du modèle public, ce niveau permet l’accès à du contenu réservé aux
invités déclarés du site.
Accès Enregistré : l’accès de niveau enregistré regroupe à la fois les groupes Enregistré, les
Gestionnaires et Super-utilisateurs. Tout contenu publié avec ce niveau ne sera par conséquent
accessible que depuis les groupes sélectionnés et les groupes héritant de ces permissions.
Accès Spécial : tout contenu publié avec ce niveau ne sera par défaut accessible que depuis
les Gestionnaires, Auteurs et Super-utilisateurs.
Accès Super Utilisateur : en dernier lieu, et comme son nom l’indique, ce niveau propose
des accès spécifiques aux super-utilisateurs.

Créer un niveau d’accès


Cliquez sur le bouton Nouveau. Donnez un titre, puis sélectionnez-le ou les groupes devant
appartenir au niveau d’accès souhaité ; enfin, enregistrez.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 134 — #158
✐ ✐

134 Chapitre 7. Utilisateurs, groupes et permissions

Supprimer un niveau d’accès


Sélectionnez le niveau d’accès en cochant la case à côté du nom, puis cliquez sur le bouton
Supprimer. À noter que vous ne pourrez supprimer un niveau d’accès tant qu’il est affecté à du
contenu.

7.5 LA GESTION DES PERMISSIONS

Les options générales


Vous noterez que nous n’avons pas encore abordé le bouton Paramètres, situé tout à droite dans
les boutons d’action. Ce bouton vous donne accès à des options définissant le comportement
général du site vis-à-vis de vos utilisateurs.
Nous retrouverons par ailleurs ce même bouton, pourvu de fonctions similaires, tout au long
de l’administration du site, tel que dans la gestion des menus, contenus et extensions notamment.
À noter que Joomla! 3 regroupe maintenant toutes les options en un seul et même endroit
disponible depuis le menu Système, puis Configuration.

Les paramètres de composant


Ce premier onglet définit si vous autorisez ou non les visiteurs de votre site à créer eux-mêmes
des comptes utilisateurs. Rassurez-vous, ce n’est pas pour autant qu’ils vont prendre le contrôle
du navire.
Autoriser l’inscription des utilisateurs : vous autorisez ou non la création de comptes
par vos visiteurs.
Groupe des inscrits : vous définissez ici le groupe d’appartenance lors de la création du
compte, par défaut, il s’agit du groupe Enregistré.
Groupe des visiteurs : vous définissez ici le groupe d’appartenance par défaut de tous
visiteurs (public) du site, par défaut, il s’agit du groupe Invité.
Inclure mot de passe : permet d’ajouter le mot de passe initial dans le message de
confirmation de création.
Activation du compte du nouvel utilisateur : trois modes d’activation d’un compte
nouvellement créé sont possibles. Vous pouvez définir qu’aucune confirmation d’activation n’est
nécessaire ou bien qu’une procédure d’auto-activation est engagée au moyen d’un message
contenant un lien envoyé à l’utilisateur ; soit qu’une personne, en l’occurrence un administrateur
ou vous-même en tant que super-utilisateur, valide manuellement le compte.
Chaque mode présente des avantages. Le mode sans confirmation évite un contrôle
systématique des nouveaux utilisateurs, surtout dans le cas d’un site générant beaucoup de
nouvelles inscriptions. Ceci évite également à l’utilisateur de patienter selon le bon vouloir d’un
administrateur concernant le traitement des demandes en attente.
Le mode Administrateur, en revanche, est plus approprié pour des sites plus sensibles en
termes de contenu. On pourra ainsi contrôler et réévaluer les groupes et niveaux d’accès des
nouveaux utilisateurs ou abonnés.
Notification e-mail : ce paramètre permet d’envoyer un message aux administrateurs du
site lors de la création d’un nouveau compte, quel que soit le mode d’activation des comptes en
vigueur.
Captcha : demande la saisie d’un code de confirmation avant la validation du formulaire
de création ou lors d’une récupération d’identifiant ou mot de passe.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 135 — #159
✐ ✐

7.5 La gestion des permissions 135

Paramètres dans le profil : cette option permet aux utilisateurs l’accès aux paramètres de
gestion de compte, de choix de langue, d’éditeur de texte et de site d’aide lors d’une connexion
depuis la partie publique du site.
Langue du site : ceci permet à l’utilisateur de redéfinir si besoin la langue qu’il souhaite
utiliser lors de la navigation, idéal pour les sites multilingues notamment.
Changement d’identifiant : vous autorisez ainsi les utilisateurs à changer d’identifiant de
connexion, sans avoir à recréer un nouveau compte.
Nombre de réinitialisations, durée du compteur : ceci permet un nombre maximum
de réinitialisation de mots de passe sur une durée donnée.
Données liées aux mots de passe : longueur minimum, nombre de chiffres, symboles
et majuscules sont autant d’options importantes proposées. Elles vous permettent d’imposer un
certain nombre de règles à vos utilisateurs en matière de sécurité. Cela décourage également
certains systèmes de création automatisée de comptes, tentant d’infiltrer votre site.

Les paramètres de version


Lorsque vous modifiez les informations d’un utilisateur, Joomla! vous propose un historique
des modifications effectuées, appelée « gestion de version », tout comme celle présente dans la
gestion des articles. Ceci vous permet de garder non seulement un historique des modifications
effectuées, mais également de pouvoir les consulter, voire les restaurer si besoin. Vous pouvez
ainsi spécifier le nombre de versions antérieures à conserver.

Les paramètres d’envoi d’e-mails en nombre


Cet onglet permet d’ajouter deux options supplémentaires lors de l’envoi de messages aux
utilisateurs.
Préfixe de l’objet : ceci permet d’ajouter un en-tête de titre par défaut à chaque message
envoyé. Vous pouvez par exemple annoter le titre du message par un niveau d’importance ou
d’urgence.
Suffixe du message : cette zone vous permet de définir un texte à placer en fin de message.
Vous pouvez de cette manière donner un certain nombre d’indications générales comme de ne
pas répondre à ce message automatique, ou au contraire ajouter des informations de contact,
au même titre qu’une signature.

Les paramètres des droits


Il s’agit là d’une partie essentielle de la gestion des droits que nous allons à présent détailler.

Les types de droits


Souvenez-vous, les possibilités de vos utilisateurs sont définies par les groupes auxquels ils
appartiennent. En réalité, les groupes donnent une ligne générale des accès et héritages auxquels
vos utilisateurs ont « droit ». Par le biais des droits, vous êtes à présent en mesure d’accroître ou
de limiter ces accès au coup par coup (figure 7.3).
Ainsi, les administrateurs ont par défaut la possibilité de modifier tous les contenus, au
même titre que les gestionnaires qui héritent de ce droit. Si, pour une raison particulière, vous
souhaitez que vos administrateurs soient de simples garants du bon fonctionnement du système,
et éviter qu’ils n’interviennent dans le contenu de votre site, il est vous est tout à fait possible
de leur « refuser » le droit de gérer le contenu, soit en refusant la création, la modification, la
suppression, ou la publication, soit tout en même temps.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 136 — #160
✐ ✐

136 Chapitre 7. Utilisateurs, groupes et permissions

Astuce : si vous souhaitez gérer votre contenu en toute indépendance et faire appel à un développeur
ponctuellement pour des opérations de maintenance par exemple, créez-lui un compte administrateur
en refusant la création, l’édition, la suppression et la publication de tout votre contenu. Vous dissociez
ainsi prudemment la sphère technique de la sphère éditoriale.

Diviser pour mieux sécuriser


Du bon octroi des droits, dépend votre tranquillité. Nous évoquions un peu plus tôt le cas
d’une entreprise avec différents secteurs d’activités et autant d’utilisateurs interagissant avec son
contenu.
Vous pouvez maintenant grâce aux possibilités offertes par Joomla!, définir plusieurs groupes
de type Auteur, dont un en particulier aurait non seulement les permissions initiales de création
et de modification de contenu, mais également celle de publication de leurs articles.

Figure 7.3 — Types de droits

Conseil : les problèmes les plus complexes de gestion des droits peuvent être résolus avec
une feuille de papier et un crayon, n’hésitez pas à dessiner des groupes de « droits » et de
faire l’inventaire de toutes les possibilités. Posez des questions aux experts métiers : « Est-ce
que Monsieur M. pourra faire cela ? », « Y a-t-il des cas ou Madame N. devra faire ceci ? »,
« Comment ferez-vous quand Monsieur M. et Madame N. seront absents ? ». Les questions
les plus simples vous permettront de ne pas passer à côté de nombreux cas pratiques.
Quand toutes les possibilités auront été envisagées et « rentreront » dans tous vos groupes de
« droits », vous aurez fini.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 137 — #161
✐ ✐

7.5 La gestion des permissions 137

En résumé
L’écoute de vos utilisateurs et la gestion de leurs accès sont parmi les clefs de la réussite de
votre site. Il faut avant tout être préparé et méthodique dans la hiérarchie des actions autorisées.
Il ne s’agit pas de sombrer dans la paranoïa de la sécurité à tout prix, mais plutôt de cerner
d’emblée quels moyens d’actions seront donnés à vos utilisateurs suivant leurs domaines de
compétence.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 138 — #162
✐ ✐

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 139 — #163
✐ ✐

8
Gérer vos menus

Objectif : accéder à l’information !


La gestion des menus est encore plus stratégique que la gestion de vos contenus. Imaginez la
plus pertinente des informations, avec la plus pertinente des images et les meilleurs mots-clés...
Celle-ci existe, mais le chemin pour y parvenir n’est ni clair, ni intuitif... Dommage non ?
Dans ce chapitre vous apprendrez comment offrir à vos visiteurs le chemin le plus
simple pour accéder aux informations qu’ils recherchent. Vous saurez à quoi sert un
menu et comment faire pour que vos visiteurs s’y retrouvent et naviguent aisément dans votre
site.

8.1 MAÎTRISER L’ERGONOMIE DE VOTRE SITE

Favoriser la navigation en un clic


L’une des règles de base en interface homme-machine (IHM) appliquée au Web est de permettre
à vos visiteurs d’accéder à l’ensemble (ou la majorité) des contenus en un clic. Pour les sites
proposant des centaines ou des milliers de pages, ce n’est évidemment pas possible, néanmoins
le but dans ce cas-là est que le menu permette d’atteindre des « nœuds » d’information,
c’est-à-dire des pages stratégiques faisant office de relais. Si vous avez vraiment un gros
volume d’information, vous pouvez également scinder le site en plusieurs « espaces » (particuliers,
professionnels, collectivités, homme, femme, enfant...) et utiliser différents menus secondaires,
plus exhaustifs et ciblés que le menu principal.
L’application pratique du menu en un clic est d’offrir un menu dynamique, qui permette d’un
simple survol de la souris d’accéder au sous-niveau AA, puis à l’élément AA11 par exemple.
Attention toutefois à ne pas proposer un menu imbriquant plus de quatre niveaux, trois étant
une limite raisonnable. Imaginez un client ou un prospect qui maîtriserait mal la souris ou qui
aurait des problèmes de vision : cela deviendrait alors un vrai jeu de précision que d’utiliser
votre menu...

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 140 — #164
✐ ✐

140 Chapitre 8. Gérer vos menus

Créer votre arborescence


Joomla! permet de réaliser très simplement des hiérarchies de menus se basant sur une relation
de liens parents à liens enfants.
Si l’on se place dans le cadre d’un site d’entreprise regroupant la présentation de différents
secteurs d’activités, l’utilisation d’un seul et même menu comportant la liste de l’ensemble des
liens utiliserait non seulement trop de place, mais lasserait rapidement le visiteur, en raison d’une
recherche longue et confuse à l’écran.

Figure 8.1 — Arborescence de menu

La meilleure solution dans ce cas précis serait d’utiliser des sous-menus. Par exemple, chaque
lien parent du menu serait un secteur d’activité, chaque sous-menu enfant, un élément de cette
activité (figure 8.1).
Pour aller plus loin et faciliter encore un peu plus la lisibilité, il serait même envisageable de
créer plusieurs menus. Dans ce cas de figure, chaque menu représenterait un secteur commercial,
chaque lien parent de menu un élément représentatif du secteur d’activité, et certains sous-menus
enfants des liens vers des familles de produits ou services.

Un ou plusieurs menus ?
Nous venons de le voir, l’utilisation d’un ou plusieurs menus dépend principalement de la
simplicité de navigation que vous souhaitez offrir à vos visiteurs. Les exemples par défaut mis en
place lors de l’installation de Joomla! offrent déjà une représentation utilisant plusieurs menus.
Vous trouverez ainsi des menus verticaux, tels que le Menu principal, À propos de Joomla!,
Boutique de fruits, Parcs Australiens, Menu membre, ou bien des menus horizontaux tels que le
Menu Haut.
Mais en dehors de la seule navigation, l’utilisation de menus différents relève également de
la sécurité du site. En effet, vous pouvez tout à fait décider que certaines parties du site ne seront
accessibles qu’à un nombre restreint ou privilégié de vos utilisateurs.
On pourra, dans le cadre d’un site commercial, mettre en place un accès public à un premier
menu comportant des informations sur l’entreprise, ses domaines d’activité, ses services, son

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 141 — #165
✐ ✐

8.2 Le gestionnaire de menu 141

actualité, et donner un accès restreint à un second menu réservé à ses commerciaux, muni
d’un annuaire client, de la possibilité de télécharger des documents contractuels, de remplir des
formulaires de saisie de prospects. Ce second menu ne s’affichant que lorsque l’utilisateur se
sera authentifié.

8.2 LE GESTIONNAIRE DE MENU

Depuis le panneau d’administration du site, ou bien depuis le menu Menus, cliquez sur Gestion
des menus. Deux éléments sont alors à votre disposition dans le menu de gauche pour assurer
cette gestion.

Menus
Depuis cette partie, vous aurez accès à l’ensemble des menus présents sur le site (figure 8.2).
Une barre de boutons située en haut à gauche vous donne accès aux principales fonctions :
Nouveau, Modifier, Supprimer, Reconstruire, Aide et Paramètres.

À noter : la suppression d’un menu supprime l’intégralité des éléments associés. À manier
par conséquent avec une extrême précaution. Le bouton reconstruire, permet quant à lui, de
récupérer une structure de menus qui aurait été altérée. Normalement, cette éventualité ne
devrait jamais se présenter.

Figure 8.2 — Menus par défaut

Dans la partie principale de la page affichée, vous retrouverez la liste des menus actuels
avec différentes informations sur leur état : leur titre, leur type, des statistiques sur le nombre
d’éléments existants aussi bien publiés, dépubliés que mis à la corbeille, le nom du ou des
modules liés à chaque menu sous forme de liste à cliquer, et en dernier lieu, l’identifiant de
chaque menu dans la base de données.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 142 — #166
✐ ✐

142 Chapitre 8. Gérer vos menus

Liens de menus
Dans cette seconde partie, vous aurez accès à l’ensemble des éléments de menus présents sur
le site (figure 8.3) menu par menu. La barre de boutons d’action située sur le dessus diffère de
celle vue précédemment dans la partie Menus.

Figure 8.3 — Liens de menus

Outre les boutons classiques tels que Nouveau, Modifier, Corbeille (supprimer) ou encore
Aide, certaines autres fonctionnalités nécessitent quelques éclaircissements.
Publier/Dépublier : ces boutons vous permettent d’ajouter ou de retirer un lien de menu
du contenu visible du site. Il est par ailleurs possible de changer l’état d’un lien en cliquant
directement sur la coche verte ou le rond rouge selon son état initial.
Déverrouiller : ce bouton vous permet de déverrouiller d’éventuels liens de menus restés
bloqués par erreur. Voir à l’étape 16.2 la partie dédiée au déverrouillage du contenu.
Accueil : ce bouton vous permet de déterminer si le lien de menu est défini comme l’élément
principal d’accueil du site. Un et un seul de tous les liens de menus peut recevoir cette option
pour une langue donnée.
Reconstruire : ce bouton permet de reconstruire l’arborescence d’un menu lorsque la
hiérarchie de celui-ci est brisée, lors de suppressions malencontreuses de liens par exemple.
Traitement : ce bouton très pratique permet, après avoir sélectionné des éléments de
menus, de les copier ou les déplacer vers un autre menu du site.
Le tableau d’affichage général fournit différentes informations sur les liens de menus : leur
statut de publication, leur titre bien sûr, leur définition ou non en tant qu’élément d’accueil, leur
niveau d’accès, leur affectation de langue, ainsi que leur identifiant dans la base de données.

La gestion des droits


Nous avons vu au chapitre 7 qu’une gestion des droits nous permet de définir de manière fine
le niveau d’accès appliqué à chaque contenu du site. Dans le cas des menus, cette gestion
spécifique des droits est également au rendez-vous (figure 8.4).
Grâce au bouton Paramètres disponible depuis la liste des menus, vous êtes en mesure
d’interagir sur les niveaux d’accès, soit directs, soit hérités des niveaux supérieurs et ainsi limiter
l’accès aux fonctions de création ou de gestion, selon le niveau de vos groupes d’utilisateurs.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 143 — #167
✐ ✐

8.2 Le gestionnaire de menu 143

Figure 8.4 — Gestion des droits

Les types de liens de menus


Un lien de menu est avant tout caractérisé par son type. Le type définit l’action à réaliser. On
pourra par exemple définir des liens de menus associés à la gestion des articles, des contacts,
de fils d’actualités, etc. Joomla! propose par défaut un certain nombre de types prédéfinis que
nous allons maintenant détailler. À noter que la liste évoluera en fonction de certaines extensions
supplémentaires que vous installeriez par la suite.

Articles
Article : affiche un article en particulier, sélectionné dans la liste globale.
Articles archivés : liste l’ensemble des articles archivés du site. Inclut une possibilité de
recherche par date. Pour de plus amples détails sur l’archivage des articles rendez-vous au
chapitre 16, paragraphe 5.
Blog d’une catégorie : affiche une catégorie au format blog, avec le détail des articles la
composant.
Blog des articles en vedette : selon activation, affiche les articles munis de l’option de
mise en vedette sous format blog.
Créer un article : propose la possibilité de soumettre un article. Cette action étant soumise
à autorisation en fonction du niveau d’accès, on proposera essentiellement cette possibilité aux
utilisateurs déjà authentifiés. Nous verrons ultérieurement que nous pouvons également définir
le niveau d’accès nécessaire à l’affichage de l’élément de menu.
Liste de toutes les catégories : à partir d’une catégorie sélectionnée, fournit la liste des
sous-catégories rattachées ainsi que leurs descriptions éventuelles. Chaque lien de catégorie
conduit à l’affichage de la liste des articles contenus.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 144 — #168
✐ ✐

144 Chapitre 8. Gérer vos menus

Liste des articles d’une catégorie : affiche les articles de la catégorie sélectionnée sous
forme de tableau ainsi que la liste des sous-catégories rattachées.

Fenêtre intégrée (IFrame) : un site dans votre site


Le type Contenu externe permet d’afficher tout ou partie d’un autre site par le biais d’une fenêtre
intégrée, appelée Iframe, au sein de la page.

Fiches de contacts
Contact : affiche les détails d’un contact en particulier.
Contacts en vedette : pour les contacts ayant l’option activée, liste les contacts sélectionnés
comme favoris. Le détail de chaque contact comportera alors non seulement des informations
d’identification et de localisation, mais également selon les options choisies, un formulaire de
contact dédié ainsi que le texte descriptif du contact.
Liste des catégories de fiches de contacts : liste l’ensemble des catégories et sous-
catégories de contacts, avec la possibilité de sélectionner la catégorie servant de point de départ.
Liste des fiches de contacts d’une catégorie : liste l’ensemble des contacts d’une
catégorie sélectionnée.

Fils d’actualité
Fil d’actualité : affiche l’ensemble du flux d’actualités sélectionné, au sein du site, sans recourir
à l’affichage externe du site de la source.
Liste des catégories de fils d’actualité : affiche l’ensemble des catégories de flux sous
forme de liste.
Liste des fils d’actualité d’une catégorie : liste sous forme de tableau l’ensemble des
flux pour une catégorie donnée.

Gestionnaire de configuration
Afficher les options de configuration du site : affiche les paramètres généraux du site
(nom, accès par défaut, longueur de listes), ainsi que les paramètres de métadonnées et de
réécriture d’URLs.
Afficher les options du template : Si ce dernier en est pourvu, les options de templates
sont alors accessibles par ce biais (couleurs, logos, paramètres propres).

Liens divers
Alias de lien de menu : permet un renvoi vers un autre élément de menu existant du site.
L’alias effectue un rappel, ou un renvoi vers une partie du site qui n’est pas accessible directement.
Ceci favorise l’accès direct de l’utilisateur en lui épargnant une navigation supplémentaire sur le
menu du site.
Séparateur : facilite la présentation et la lisibilité d’un menu en créant une séparation entre
les éléments présents, selon son emplacement.
Titre de sous-menu : en complément du séparateur précédent, le titre de sous-menu
permet un titrage par partie de votre menu.
URL externe... on quitte votre site : permet de rediriger l’utilisateur vers un autre site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 145 — #169
✐ ✐

8.2 Le gestionnaire de menu 145

Liens Web – un annuaire de liens


Liste des liens d’une catégorie : affiche les liens Web d’une catégorie choisie.
Liste des liens de toutes les catégories : liste l’ensemble des catégories et sous
catégories de liens Web définis sur le site, à partir d’une catégorie de départ.
Proposer un lien web : en fonction du niveau d’accès utilisateur défini pour cette action,
permet de soumettre un lien Web sur le site.

Recherche
Formulaire de recherche / Résultats de recherche : affiche le module de recherche simple,
basé sur la recherche spécifique des mots demandés. Moins performante que la version indexée,
ce mode de recherche est toujours disponible.

Recherche avancée
Recherche : affiche le module de recherche indexée. Ce mode permet une recherche sur
l’ensemble du contenu du site qui aura au préalable été « analysé » en vue d’optimiser
les résultats de recherche proposés. Nous verrons ce mode d’indexation plus en détail au
chapitre 11.

Tags
Liste compacte des éléments taggés : permet l’affichage synthétique des contenus faisant
l’objet d’un marquage à l’aide de tags que vous pourrez sélectionner. Vous pourrez ainsi mesurer
l’impact de tags précis sur vos contenus.
Liste de tous les tags : affiche l’ensemble des tags utilisés sur vos contenus sous forme
d’un nuage agrégé.
Éléments taggés : Dans le même esprit que la liste compacte, cet affichage vous identifie
pour des tags sélectionnés le contenu marqué, avec le début du texte de ces derniers.

Utilisateurs
Connexion : permet l’affichage du formulaire de connexion utilisateur.
Enregistrement : propose la création d’un compte sur le site.
Modification d’un profil : permet un accès direct à la modification du profil de l’utilisateur,
toujours sous condition de connexion préalable.
Profil de l’utilisateur : affiche le détail du profil de l’utilisateur connecté au site, ainsi
qu’un accès à la modification des informations. L’utilisateur doit pour cela être connecté au site.
À défaut, le formulaire de connexion sera affiché.
Rappel de l’identifiant : en cas de perte, permet la demande de renvoi du nom de
connexion à l’adresse e-mail spécifiée, si celle-ci correspond à un utilisateur inscrit.
Réinitialisation du mot de passe : en cas de perte, permet la demande de réinitialisation
du mot de passe d’un utilisateur. Un e-mail lui est alors envoyé contenant un code d’identification
temporaire à saisir sur la page en cours du site. Une fois l’identité de l’utilisateur vérifiée, celui-ci
est invité à saisir un nouveau mot de passe.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 146 — #170
✐ ✐

146 Chapitre 8. Gérer vos menus

Créer un nouveau lien de menu


Depuis la Gestion des menus, dans la partie gauche Liens de menus, cliquez sur le bouton
Nouveau (figure 8.5).

Figure 8.5 — Nouveau lien de menu

Détails et position du lien


Tout d’abord, le premier onglet Détails vous invitera à définir de quel type de lien de menu il va
s’agir, ainsi que certaines options de renvoi et de placements.
Titre de menu : il s’agit du nom de l’élément de menu. Soyez concis : des noms trop longs
peuvent nuire à la disposition du menu, en étant tronqués par le template ou en s’affichant par
exemple sur deux lignes.
Alias : lorsque l’option de réécriture explicite des URL est activée (SEF) dans la configuration
globale du site, ce qui est le cas par défaut, voir chapitre 9, paragraphe 2, l’alias est utilisé
comme composante de l’adresse affichée. Ceci permet un référencement optimal de la page
par les moteurs de recherche. Il faut notamment éviter de saisir des espaces ou des caractères
spéciaux. Si aucun alias n’est précisé, Joomla! en constituera un à partir du titre.
Type de lien de menu : sélectionnez le type d’action réalisée par l’élément de menu :
affichage d’un article, d’une catégorie d’articles, d’un formulaire de contact ou de connexion,
lien vers un autre site, etc. Cliquez sur le bouton Sélection pour accéder à la liste des types
disponibles. À noter que la liste proposée évoluera en fonction des extensions supplémentaires
que vous installerez par la suite.
URL du lien : il s’agit d’un constituant de l’adresse URL, précisant le composant, le type et
l’élément auxquels Joomla! doit se référer pour afficher la page. Le lien est généré par Joomla!
et ne peut être modifié, hormis dans le cas d’un lien vers un site Web externe. Nous traiterons
justement cet exemple un peu plus tard.
Dans notre écran (figure 8.6) il s’agit d’afficher une catégorie de contenu au format blog :

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 147 — #171
✐ ✐

8.2 Le gestionnaire de menu 147

index.php?option=com_content&view=category&layout=blog

Figure 8.6 — Lien blog de catégorie

Fenêtre-cible : la page à afficher peut être vue de trois façons différentes :


• elle peut remplacer la page actuelle vue par le visiteur et devient alors le « parent »
affiché ;
• elle peut être ouverte dans un nouveau navigateur totalement indépendant de celui
actuellement utilisé (nouvelle fenêtre avec barre de navigation) ;
• elle peut également être ouverte dans une nouvelle fenêtre dépourvue de menu ou barre
de navigation, à la manière d’une fenêtre « pop-up » (nouvelle fenêtre sans barre de
navigation).

Style du template : un template différent peut être assigné pour la mise en forme de la
page, en lieu et place de celui par défaut.
Menus : il est possible de modifier le menu auquel le lien est affecté. Pour cela, sélectionnez
un menu différent parmi la liste proposée.
Lien parent : c’est ici que vous définissez l’arborescence. Ainsi, chaque lien se voit affecter
une position dans la hiérarchie du menu. Si vous sélectionnez Lien de menu racine, le lien créé
sera un élément « parent » du menu.
Toute autre sélection dans la liste créera un sous-menu « enfant » dépendant de l’élément
« parent » sélectionné.
Statut : vous définissez ici si l’élément sera publié ou non ou mis à la corbeille.
Page par défaut : vous déterminez ici si la page à afficher est la page d’accueil du site.
À noter qu’un, et seulement un seul élément de menu parmi tous ceux existant pour la même
langue peut recevoir cet attribut.
Accès : il s’agit de donner un niveau d’accréditation minimum nécessaire pour accéder
au contenu, voir à l’étape 7.4 pour de plus amples détails sur les niveaux d’accès. Par défaut,
l’accès est public.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 148 — #172
✐ ✐

148 Chapitre 8. Gérer vos menus

Langue : vous pouvez définir si la langue utilisée pour le lien est différente de la langue par
défaut du site. Ceci pourra être utilisé dans le cadre d’un site multilingue en vue de paramétrer
des éléments de menus dans chaque langue disponible.
Note : le champ note permet de saisir une courte description du lien créé. Cette note ne
sera pas visible des utilisateurs.

Paramètres avancés
Un ou plusieurs onglets additionnels sont à compléter, variant selon le type de lien de menu
choisi. Nous vous proposons ici quelques cas pratiques détaillés.

Sections spécifiques selon le type d’élément de menu


Lien articles : Article
Onglet Paramètres : vous permet de redéfinir, pour l’article sélectionné, certaines options de
publication générales, telles que l’affichage de la catégorie, de l’auteur, de la date de publication
ou de modification, ainsi que le positionnement même de ces informations.

Lien articles : Blog d’une catégorie


Onglet Catégorie : vous permet de sélectionner des options propres à l’affichage de la
catégorie, telles que notamment :
• l’affichage du titre de la catégorie ;
• l’affichage du texte de description des catégories ;
• l’affichage d’image représentant éventuellement la catégorie ;
• le nombre de sous-niveaux de catégories à prendre en compte ;
• l’affichage ou non des catégories vides ;
• ou encore le nombre d’articles contenus.

Onglet Affichage du blog : vous donne la possibilité de personnaliser l’affichage des


articles :
• le nombre d’articles complets, s’affichant intégralement sur la largeur totale à disposition ;
• le nombre d’articles supplémentaires affichés sur la page, dont seules les introductions
seront affichées ;
• le nombre de colonnes pour l’affichage des articles supplémentaires ;
• le nombre de liens vers les articles supplémentaires qui seront affichés ;
• les options de succession d’affichage en colonne ou en ligne ;
• l’ordre d’affichage des sous-catégories, alphabétique, inverse, ou selon l’ordre défini
dans le gestionnaire de catégories ;
• l’ordre d’affichage des articles : par ancienneté, mise en vedette, par ordre alphabétique
des titres, des auteurs, par nombre de clics, etc. ;
• le classement par date de création, de modification, de publication ;
• l’affichage de la pagination et du nombre d’éléments trouvés.

Onglet Paramètres (des articles) : tout comme dans le cas d’un lien vers un seul article,
comme vu précédemment, vous permet de redéfinir pour l’ensemble des articles de la catégorie
sélectionnée certaines options de publication générales.
Onglet Intégration : dans le cas de catégories ou sous-catégories comportant des flux
d’actualités, on pourra définir, pour ces derniers, l’affichage d’une icône dans la barre d’adresse,
ainsi que l’affichage du texte : texte intégral ou texte de l’introduction uniquement.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 149 — #173
✐ ✐

8.2 Le gestionnaire de menu 149

Lien fiches de contact : Contact


Onglet Affichage des fiches de contact : dans le même esprit que pour le lien vers un article,
permet de redéfinir les options de publication des informations du contact (format, catégorie,
nom, fonction, e-mail...).
Onglet Paramètres de l’e-mail : cette section permet de préciser les options permettant
l’envoi d’un e-mail au contact :
• l’affichage ou non du formulaire d’envoi d’un l’e-mail ;
• l’envoi d’une copie de l’e-mail à l’expéditeur ;
• les options de filtrage permettant de bannir l’envoi, en se référant à l’adresse e-mail
de l’expéditeur, à certains sujets ou mots pouvant être considérés comme interdits ou
offensants ;
• la vérification de la session de l’expéditeur, rendant ainsi impossible l’envoi si l’utilisateur
n’a pas autorisé l’utilisation de cookies sur son navigateur ;
• l’activation ou non de la réponse personnalisée à l’expéditeur. La page suivant l’envoi de
l’e-mail sera ou non directement gérée par le composant de contact. Sa désactivation
permet entre autre l’utilisation d’extensions tierces ;
• la redirection, manuelle cette fois, de l’utilisateur après envoi de la demande de contact.
Cette redirection par URL pourra se faire dans ou hors de votre site.

Liens divers : URL externe


Dans ce cas précis, il vous faudra compléter l’un des champs que nous avons vus lors de la
présentation générale des options de création, à savoir le champ « URL du lien » situé sur le
premier onglet Détails. Le lien, normalement généré par Joomla! est ici modifiable et vous
servira à définir l’adresse du site vers lequel faire pointer l’élément de menu.
Pour notre exemple, complétez ou éventuellement remplacez l’intégralité du lien affiché par :

http://www.joomla.fr

Conseil : modifiez également la fenêtre cible pour cet élément. Ouvrez le lien dans une
« nouvelle fenêtre avec barre de navigation ». Ceci aura pour effet d’ouvrir un nouveau
navigateur Web pour le lien externe, au lieu de remplacer l’affichage de votre site, et donc
de le quitter.

Sections communes
D’autres onglets, communs cette fois, quel que soit le type d’élément de menu en cours de
création sont également au rendez-vous.
Paramètres du type de liens : cette section ajoute des définitions supplémentaires à
l’élément de menu :
• un attribut personnalisé du titre de l’élément de menu. Celui-ci s’affiche sous forme d’une
bulle d’information lors du passage de la souris ;
• un style personnalisé de la présentation de l’élément visé, par le biais des styles CSS ;
• l’utilisation d’une image pour le titre ;
• la possibilité de faire figurer le texte et l’image choisis en tant que titre.

Paramètres d’affichage de la page : cette section vous donne la possibilité de


personnaliser l’affichage de la page ciblée :
• le titre de page et de barre de titre du navigateur ainsi que dans l’en-tête de page (code
HTML de la page) ;

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 150 — #174
✐ ✐

150 Chapitre 8. Gérer vos menus

• la personnalisation des styles (classe CSS) de présentations du contenu.

Paramètres des Métadonnées : il s’agit ici de personnaliser les informations destinées au


référencement de la page par les moteurs de recherche ainsi que les directives lors du passage
des robots référenceurs.

Assignation de modules à ce lien de menu


Ce dernier onglet vous donne la possibilité de consulter et éventuellement redéfinir l’affichage
des modules pour ce lien de menu.
Il suffit pour cela de cliquer sur un des modules, d’aller dans l’onglet Assignation des menus,
puis de changer le type d’assignation.

Modifier un lien de menu


Depuis l’affichage général des liens de votre menu, cliquez sur le titre du lien souhaité, ceci
l’ouvrira en modification. Vous pouvez par ce biais modifier l’ensemble des informations de ce
lien, y compris son type.
Sauvegardez les modifications en cliquant sur le bouton Enregistrer & Fermer.

Créer un sous-menu
Créer un sous-menu revient à créer un lien de menu tel que nous l’avons vu précédemment,
à ceci près que vous définissez sa position dans le menu en sélectionnant un « Lien parent »
différent de Lien de menu racine.

Modifier la position dans le menu


La nouvelle interface de Joomla! 3 simplifie grandement l’organisation des menus. Vous noterez
à gauche de chaque élément de menu trois petits carrés noirs verticaux. En restant cliqué sur ce
petit pictogramme, vous pourrez alors déplacer l’élément sélectionné par simple glisser-déplacer,
et ainsi modifier très facilement l’ordonnancement de votre menu (figure 8.7) au sein d’un même
niveau. Si vous deviez par contre changer le niveau d’un élément pour l’intégrer à un sous-menu,
il vous faudrait alors l’éditer et changer soit le « Lien parent » comme évoqué auparavant, soit
l’« Ordre d’affichage » au sein du sous-menu.

Copier ou déplacer des liens


Nous avons vu un peu en amont qu’un bouton Traitement était disponible dans la barre de
boutons d’action afin d’effectuer des copies ou déplacement par lots. Il vous suffit de sélectionner
un ou plusieurs éléments de menu et de cliquer sur ce bouton pour initier l’opération. Il vous
faudra alors définir le menu de destination ainsi que les éventuelles modifications de niveau
d’accès et de langue d’affichage.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 151 — #175
✐ ✐

8.3 Le menu principal 151

Figure 8.7 — Position d’un lien de menu

Supprimer un lien
Depuis la liste des liens de menus, sélectionner le ou les éléments souhaités, puis cliquez sur le
bouton Corbeille. Ceci aura pour effet de les placer dans la dite corbeille en tant qu’éléments
supprimés. La mise à la corbeille est en réalité un état supplémentaire de l’élément au même
titre que « publié » ou « non publié ». De ce fait, la suppression n’est pas effective ; seul le fait de
demander à vider la corbeille ordonnera leur suppression définitive.

Récupérer un lien de menu supprimé


Lors d’une erreur de manipulation, les liens de menus mis à la corbeille peuvent être récupérés.
Ainsi, au moyen du bouton Outils de recherche situé en haut de page, et de la même manière
que l’on filtrerait sur le statut de publication, « publié » ou « non publié », il est possible de
sélectionner le statut « Dans la corbeille ».
En sélectionnant un élément de la liste ainsi filtrée, vous avez la possibilité de cliquer sur le
bouton Publier ou Dépublier pour lui assigner l’état correspondant.

Vider la corbeille (supprimer définitivement)


Tout comme lors d’une récupération de liens supprimés, filtrez la liste sur le statut « Dans la
corbeille ». Un bouton situé dans la barre d’action en haut de la page vous permettra de « Vider
la corbeille ». La suppression des liens sera alors définitive.

8.3 LE MENU PRINCIPAL

Le menu le plus important


Le menu principal, également appelé « Main menu », est l’une des clefs majeures de votre site
(figure 8.8). Il est omniprésent et comporte généralement le lien qui permet de revenir à l’écran
d’accueil du site.
Une partie importante de l’ergonomie de votre site dépend de sa lisibilité et de sa simplicité
d’utilisation. Si la navigation s’avère difficile ou complexe, le visiteur se sentira comme perdu et
ne consacrera que peu de temps à chercher son information, quitte à la chercher... ailleurs.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 152 — #176
✐ ✐

152 Chapitre 8. Gérer vos menus

Figure 8.8 — Menu principal

L’élément « Accueil » ou « Home »


L’élément d’accueil est votre vitrine, votre atout maître. Les premières secondes de visite sur votre
site sont déterminantes et doivent permettre de capter l’attention de vos visiteurs.
Rendez-vous à l’étape 4.4 pour la définition de votre page d’accueil.

8.4 LE MENU HAUT

Joomla! propose un menu placé en haut de page (figure 8.9). Généralement visible sur toutes
les pages, ce menu a pour but de permettre un accès rapide à des parties essentielles de votre
site : liste de raccourcis thématiques, retour à l’écran d’accueil, actualités, liens, localisation,
formulaire de contact...

Figure 8.9 — Menu Haut

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 153 — #177
✐ ✐

8.5 Le menu membre 153

8.5 LE MENU MEMBRE

Le menu Membre est un élément invisible pour de simples visiteurs. Il est en revanche visible
de vos utilisateurs, une fois connectés. Son niveau d’accès par défaut nécessite d’être parmi les
utilisateurs « Enregistrés ».
C’est, entre autres, par le biais de ce menu que vous pouvez définir ce que vos utilisateurs
auront ou non la possibilité de réaliser sur votre site.

Les fonctionnalités par défaut


Votre profil
Par cet élément de menu, l’utilisateur accède au détail de son profil utilisateur. Un bouton lui
permet également de modifier ses informations ainsi que de changer son mot de passe.

Proposer un article
En fonction des droits assignés à cette action (voir chapitre 7 sur la gestion des utilisateurs,
groupes et permissions), un lien est mis à la disposition des utilisateurs permettant de créer et de
proposer un article en vue de sa publication. Par défaut, un utilisateur « Enregistré » ne verra pas
ce lien.

Proposer un lien Web


De la même façon que pour un article, et toujours sous condition d’accès, un élément du menu
permet de soumettre la publication d’un lien Web.

8.6 CRÉER UN NOUVEAU MENU

Ajouter un nouveau menu


Lors de l’installation de Joomla!, les menus existants sont publiés et affichés sur le site. On peut
ainsi, soit modifier les menus existants, soit en créer de nouveaux. Chaque menu est en fait
composé de deux parties, l’une étant le menu à proprement parler, avec ses liens, et l’autre
étant un « module ». Ce module agit comme un conteneur dans lequel se trouve le menu. On
décide ensuite si ce conteneur est affiché sur le site, et à quel emplacement au sein du template
en vigueur.
Créer un nouveau menu équivaut donc à créer non seulement le menu et ses liens, mais
aussi son module.
Depuis la Gestion des menus, dans la partie Menus, cliquez sur le bouton Nouveau. Une
nouvelle fenêtre apparaît alors avec seulement trois informations à saisir ; le titre du menu, son
type et sa description (figure 8.10).
Titre : le titre n’est pas celui qui sera affiché sur le site, il s’agit d’une identification interne à
Joomla!.
Type de menu : le type de menu doit être unique et ne doit pas correspondre à celui d’un
menu existant. Ainsi, si vous tentez de donner un type « mainmenu », par exemple, l’appellation
vous sera refusée. De la même manière, si vous utilisez des espaces, ils seront remplacés
automatiquement par des tirets (-), les caractères spéciaux, s’il y en a, seront quant à eux
supprimés, lors de l’enregistrement.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 154 — #178
✐ ✐

154 Chapitre 8. Gérer vos menus

Figure 8.10 — Création d’un nouveau menu

Description : la description vous permet de donner des précisions sur le menu, son contenu,
sa fonction.
Cliquez ensuite sur le bouton Enregistrer & Fermer. En revenant à la liste des menus, votre
nouveau menu sera présent en fin de liste, mais vous noterez, que le module associé, son
conteneur, n’a pas été créé. Il vous faut pour cela soit cliquer sur le lien Assigner un module à ce
menu, soit vous rendre ultérieurement dans la Gestion des modules, au chapitre 13.

Modifier un menu
Toujours depuis la partie Menus, sélectionnez un menu en cochant la case à côté de son titre,
puis cliquez sur le bouton Modifier. Il vous est également possible de cliquer directement sur le
lien « type de menu » situé sous le titre.

Supprimer un menu

Attention ! La suppression d’un menu est à manipuler avec précaution. En effet, la


suppression concerne à la fois le menu en lui-même, l’intégralité de ses éléments, mais
également, le ou les modules qui lui sont liés. Une suppression hâtive peut entraîner avec elle
un pan entier de la navigation sur votre site.

Pour supprimer un menu, sélectionnez le menu en cochant la case se trouvant à gauche


de son titre, puis cliquez sur le bouton Supprimer. Un message d’alerte vous demandera de
confirmer la suppression.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 155 — #179
✐ ✐

8.6 Créer un nouveau menu 155

Ajouter des fonctionnalités


Vous pouvez ajouter autant de liens de menu personnalisés – et donc d’interactivité – que vous
le souhaitez en installant de nouvelles extensions, à condition toutefois d’avoir mis en place les
permissions d’accès nécessaires pour les actions souhaitées, comme nous l’avons vu dans le
chapitre 7 dédié à la sécurité des utilisateurs.
Il vous est par conséquent possible de personnaliser vos menus, en faisant figurer des liens
ou sous-menus, en fonction des niveaux d’accès affectés.

En résumé
La gestion des menus est un point à ne pas négliger lors de la réalisation de votre site. Le
contenu proposé peut être le meilleur qui soit, mais si sa présentation et son accès se révèlent
difficiles pour vos visiteurs, votre site restera un trésor perdu nécessitant un aventurier intrépide
afin de se lancer à sa recherche.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 156 — #180
✐ ✐

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 157 — #181
✐ ✐

9
Référencer
votre Joomla!

Objectif
Vous venez de réaliser votre site, il est magnifique : une superbe charte graphique, des contenus
dynamiques et de qualité, mais lorsque vous regardez vos statistiques, vous vous apercevez
que personne ne vient le visiter. Dommage non ?
L’objectif de ce chapitre est de vous donner les clés pour référencer votre contenu, le positionner
et « faire du buzz ». Le challenge aujourd’hui n’est plus seulement de créer des
contenus pertinents, mais bien de les positionner !
Après la lecture de ce chapitre, vous serez également capable de distinguer une véritable offre
de référencement d’une fausse.
Nous vous proposons de faire le tour des règles de l’art en la matière, de voir ensuite ce que
nous propose nativement Joomla!, puis d’explorer les pistes d’amélioration.

9.1 ÉTAT DES LIEUX

Les règles de l’art


Savoir de quoi on parle
Tout d’abord, nous allons vous expliquer les différents termes utilisés dans ce que l’on appelle
communément le référencement.
Référencer son site : on référence son site quand on l’inscrit dans les annuaires et qu’on
donne l’URL (l’adresse) de son site aux moteurs de recherche. On dit alors que l’on a référencé
son site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 158 — #182
✐ ✐

158 Chapitre 9. Référencer votre Joomla!

Attention ! Le fait d’être présent dans un annuaire ne vous garantit pas d’être trouvé.

Exemple concret : vous êtes un artisan et vous vous inscrivez dans les pages jaunes. Si
vous êtes le quatrième dans une liste pour une même activité, la probabilité que vous soyez
contacté a déjà baissé significativement. Elle chute encore plus si l’un de vos concurrents a
choisi d’apparaître avec une taille de caractères plus importante que les autres annonces et une
bordure rouge. On dira alors que votre concurrent s’est positionné. En d’autres termes, il s’est
démarqué des autres.
Positionner son site : souvent confondu avec le référencement, qui est une étape
obligatoire et très simple de la vie marketing d’un site Web, le positionnement reflète le niveau
de visibilité sur une recherche (requête) donnée. Plus vous êtes positionné, plus vous êtes visible,
ce qui accroît logiquement le nombre de visites. Le positionnement est un système complexe qui
s’appuie sur de nombreux paramètres. Nous n’aborderons dans ce livre que ceux sur lesquels
Joomla! peut vous permettre d’agir directement.
Buzzer sur son site : littéralement « faire du bruit ». Sur le Net, cela équivaut à une
campagne de publicité. Il s’agit de faire apparaître son site sur un maximum de plates-formes
et/ou d’une manière qui retienne l’attention. Les grandes marques font du « buzz » (ou du « bruit »
si l’on francise le terme) pour attirer l’attention sur leurs nouveaux produits par exemple. Faites
de même pour votre site, préparez un communiqué de presse et contactez les blogs spécialisés,
les forums traitant de votre secteur d’activité et les sites proposant des communiqués de presse
gratuits. Un buzz digne de ce nom est évidemment relayé sur les plates-formes des réseaux
sociaux. Ouvrez un compte Twitter pour relayer vos actualités, pourquoi pas une page Facebook
si vous avez le temps de l’animer ?
Les balises Meta ou les métadonnées : les balises Meta sont des balises appartenant à
la norme HTML. Elles n’ont pas d’incidence visible sur une page Web, car elles se trouvent dans
une partie du code de la page (le « <head> » ou en-tête) qui est interprété uniquement par les
navigateurs et les moteurs de recherche. Pourtant, on peut voir quotidiennement le contenu de
l’une de ces balises (le <title> ou titre), car celui-ci s’affiche dans le bandeau supérieur d’un
navigateur. Par exemple, sur la page d’accueil du site www.joomla.fr, le titre est : « Joomla.fr -
Joomla!fr Le portail des Utilisateurs Francophone de Joomla! ». Pendant longtemps, les balises
Meta étaient prises en compte par les moteurs de recherche pour établir le positionnement d’un
site, ce qui a largement contribué à leur popularisation. Ce n’est plus le cas aujourd’hui, mais
il faut tout de même prêter attention à leur contenu, surtout à la balise <description> qui est
affichée dans les résultats des moteurs de recherche.
SEO : SEO est l’acronyme de « Search Engine Optimization », que l’on peut traduire par
« optimisation du référencement pour les moteurs de recherche ». D’après Google, les SEO
regroupent : la vérification du contenu ou de la structure de votre site, des conseils techniques sur
le développement (l’hébergement, la redirection, les pages d’erreur ou l’utilisation de JavaScript),
le développement du contenu, la gestion des campagnes de développement commercial en
ligne, la recherche de mots-clés, la formation à l’optimisation pour les moteurs de recherche,
une expertise sur des zones géographiques ou des marchés précis.
SEF : SEF est l’acronyme de « Search Engine Friendly ». Dans Joomla!, cette option permet
de transformer les adresses URL dynamiques en adresses URL beaucoup plus intelligibles pour
un humain et pour un moteur de recherche.
Par exemple, au lieu d’avoir une adresse comme :
www.mon-site.fr/index.php?option=com_content&view=article&id=26&Itemid=294
vous aurez www.mon-site.fr/site-map.html. C’est quand même beaucoup plus lisible et
parlant.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 159 — #183
✐ ✐

9.1 État des lieux 159

Le principal acteur
Le 3 mai 2012, Médiamétrie rendait publique les résultats d’une étude effectuée en avril 2012.
Les chiffres sont sans appel, Google totalise 91,8 % des requêtes des internautes français.
Sachant que près de la moitié des accès aux sites Internet se fait via un moteur de recherche,
nous ne parlerons, comme nombre de nos collègues référenceurs, que des fonctionnalités liées à
Google, même si nous vous invitons vivement à vous intéresser aux résultats des autres moteurs
et notamment Yahoo!, Bing et Exalead.
Google : plutôt que de vous présenter son moteur de recherche, que chacun d’entre vous
connaît, laissons la parole à Google : « ... le moteur de recherche de Google analyse également
le contenu des pages. Cependant, l’analyse Google ne porte pas uniquement sur le texte (qui
peut être manipulé par les éditeurs de sites au moyen de balises Meta), mais sur la totalité du
contenu des pages afin de tenir compte des polices, des subdivisions et de l’emplacement de
chaque mot. Google analyse également le contenu des pages Web voisines pour s’assurer que
les résultats renvoyés sont bien en rapport avec les recherches des internautes. »
PageRank : cela fait maintenant vingt ans que les webmasters entendent parler du
PageRank ou PR dans le jargon et pourtant, personne ne s’accorde sur son importance. La
technologie PageRank permet de mesurer objectivement le « poids » (l’importance) d’une page
Web. Ce classement est effectué grâce à la résolution d’une équation de plus de 500 millions de
variables et de plus de 2 milliards de termes.

Mode de lecture : un site n’est pas un livre


Il s’agit d’une évidence, mais il est bon de se rappeler qu’un site n’est pas lu comme un livre.
On parcourt un site en passant d’une page à l’autre en fonction de sa logique propre et de ce
que l’on recherche, on lit un livre de manière linéaire (en tout cas les romans). C’est pour cette
raison que chaque page de votre site doit captiver l’internaute.
Les modes de lectures sur le Web sont maintenant bien connus, qu’il s’agisse de la forme
et/ou du fond. Si le mode de présentation (titre, texte d’introduction et lien pour lire la suite)
adopté par les sites des quotidiens nationaux est calqué sur le mode de présentation des blogs, ce
n’est pas par hasard : les internautes sont à la recherche d’informations courtes et accrocheuses.
Les sources d’information se multipliant, il faut être capable de distinguer rapidement une
information utile d’une autre.
Il existe même une technique d’étude basée sur le comportement visuel des internautes :
l’eyetracking. L’étude eyetracking permet de montrer visuellement où cliquent la plupart des
utilisateurs d’un site. À partir de plusieurs études, on définit des règles, des constantes. Nous
pouvons évidemment les appliquer en utilisant Joomla!.

Vous voulez exister sur le Web ?


Ça, c’est typiquement une accroche Web. Quel que soit votre secteur d’activité et même si vous
animez un site institutionnel très consensuel, n’hésitez pas, de temps en temps, à opter pour une
accroche un peu décalée, cela draine des visiteurs et augmente la participation de votre public.

Soigner vos titres


Les titres de vos articles, menus, catégories et sous-catégories sont extrêmement importants, car
vos visiteurs ne cliqueront pas sur un titre qui ne les inspire pas. Ils sont donc, après votre charte
graphique et votre ergonomie, des éléments décisifs de fréquentation.
N’oubliez pas non plus que comme chaque page de votre site peut être la porte d’entrée de
vos visiteurs, les titres seront la première chose qu’ils verront.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 160 — #184
✐ ✐

160 Chapitre 9. Référencer votre Joomla!

Formations pour apprendre à rédiger sur le Web


Dites-vous bien que vous ne pouvez pas simplement transposer une information écrite pour
le papier, ou un article de votre catalogue sur votre site Web. Il va falloir faire appel à des
compétences particulières du Web éditorial.

Ce n’est pas parce que tout le monde écrit sur le Web que tout le monde en est capable. Il y a une
différence très nette et très réelle entre rédiger le contenu de son blog personnel et transcrire par des
mots la stratégie de communication d’une entreprise.

Comme ressource, nous vous conseillons le site belge http://blog.60canards.com qui regorge
d’informations pratiques sur les techniques rédactionnelles et les stratégies éditoriales.
En France, vous pouvez également suivre des formations, comme celles proposées par Martin
Bohn sur les techniques d’écriture sur le Web (http://www.2mots.fr). Il est notamment formateur
au Centre de Formation des Journalistes à Paris et ses cours sont de très bonne qualité.

9.2 JOOMLA! ET LE RÉFÉRENCEMENT


Depuis sa première version, l’architecture de Joomla! n’a cessé d’évoluer pour permettre une
meilleure prise en compte du contenu par les moteurs de recherche. En soi, c’est un outil qui
facilite déjà le référencement et le positionnement. Nous allons voir ensemble les paramétrages
proposés par Joomla!. Connectez-vous à l’espace d’administration de votre site.

Les réglages SEO et SEF


Dans le menu « Système », cliquez sur l’élément de menu « Configuration ». Dans cet espace,
vous trouverez cinq onglets : « Site », « Système », « Serveur », « Droits » et « Filtres de texte ». Les
réglages intéressant pour le référencement sont dans l’onglet « Site ». Nous allons surtout nous
intéresser aux pavés « Paramètres des métadonnées » et « Paramètres SEO ».

Paramètres des métadonnées


Les métadonnées sont des données invisibles pour vos internautes... ou presque ; et pourtant
elles jouent un rôle important. Ces données sont à destination des moteurs de recherche et des
annuaires sur le Web. Vous allez saisir dans cette rubrique les informations par défaut du site,
mais chaque page peut avoir sa propre description et ses propres mots-clés. Nous vous invitons
d’ailleurs à y passer du temps. N’oubliez pas que chaque page de votre site peut en effet servir
de porte d’entrée à un visiteur.
Description du site : la description de votre site va s’afficher dans la balise :

<meta name=''description'' content=''Joomla! 3 100% pratique, votre nouveau livre de chevet" />.

Le contenu de cette balise est repris dans les résultats des moteurs de recherche, c’est même
parfois le premier contenu que les internautes verront. Nous vous invitons donc à soigner votre
présentation, qui doit résumer en une phrase qui vous êtes et ce que vous faites. Encore plus
que dans la vie sociale, sur le Web, c’est la première impression qui compte.
Mots-clés du site : pendant longtemps galvaudés par les « experts » du Web, les mots-clés
d’une page ne servent plus aujourd’hui à déterminer le positionnement de pages. Ils sont par
contre utiles pour leur indexation, ce qui est très différent et tout autant utile.
Saisissez les mots qui sont le cœur de votre métier, sans hésiter à être technique si votre
activité s’y prête. Séparez les mots par des virgules. Google, pour ne citer que lui, indique que

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 161 — #185
✐ ✐

9.2 Joomla! et le référencement 161

trop de mots-clés baissent la pertinence générale de tous vos mots-clés. Imaginez que vous êtes
un moteur de recherche et que vous arrivez sur une page dans laquelle vous rencontrez les
mots-clés « jardin, ordinateur, limonade » : dans quelle catégorie allez vous ranger cette page ?
Même si vous êtes en train de raconter que vous buviez une limonade dans votre jardin tout en
travaillant sur votre ordinateur, les mots-clés doivent être le reflet d’une activité.
Robots : parlez directement à Google ! La métadonnée « Robots » permet en effet d’indiquer
aux robots des moteurs de recherche si vous souhaitez qu’ils indexent vos contenus et vos liens.

Pourquoi une différence entre vos contenus et vos liens ? Là encore, les référenceurs
ne sont pas tous d’accord, pourtant la position de Google est très claire : le plus important
pour le référencement naturel de votre site est votre contenu. Pour autant, Google vérifie
la cohérence de vos liens hypertextes. Si sur votre site de jardinage, une de vos pages qui
traite de désherbage possède un lien qui pointe vers un site spécialisé en coccinelles, Google
jugera cela cohérent. Si le même lien pointe vers un site de danse de Flamenco, Google
pénalisera le positionnement de votre page car il ne trouvera pas de lien sémantique, de lien
logique entre les deux domaines.

Ce paramètre vous permet quatre scénarios :


• index, Folllow : le robot indexe vos contenus et vos liens. C’est le scénario le plus courant
et celui que nous vous recommandons ;
• no Index, Follow : le robot n’indexe pas vos contenus mais vos liens ;
• index, Nofollow : le robot indexe vos contenus mais pas vos liens. Cette option peut
s’avérer utile si vous avez beaucoup de liens et que vous savez qu’ils ont peu de rapport
avec vos contenus, comme les sites qui doivent afficher tous leurs partenaires ou sponsors ;
• No Index, No follow : pratique quand vous êtes en train de travailler sur votre site avant de
le mettre officiellement en ligne, cette option indique aux robots des moteurs de recherche
de n’indexer ni vos contenus, ni vos liens.

Droits légaux : vous pouvez indiquer ici sous quelle licence vous souhaitez diffuser votre
contenu et quels droits vous vous réservez (utilisation commerciale, diffusion des images, reprise
d’éléments de votre contenu, etc.). Si vous désirez autoriser le public à effectuer certaines
utilisations de vos contenus, le site http://creativecommons.fr propose gratuitement des contrats
flexibles de droit d’auteur pour diffuser vos créations en ligne.
Auteur du site : si vous gérez un site multi-auteurs, nous vous conseillons d’activer cette op
tion. Sachez que les récentes modifications de l’algorithme de Google confèrent un « poids »,
une autorité, aux auteurs reconnus sur un sujet. Si vous êtes un expert sur un sujet donné ou que
vous faites intervenir des experts dans votre site, leur autorité peut influencer le référencement
de vos pages. Cela offrira de plus une certaine visibilité à vos auteurs en affichant la balise :

<meta name=''author'' content=''Guillaume-Nicolas MEYER, David PAULY'' />

Afficher la version de Joomla! : cette option permet d’afficher la version de Joomla!


que vous utilisez dans la métadonnée « generator » présente sur toutes vos pages. Nous vous
recommandons très fortement de laisser cette option sur « Non » pour des raisons de sécurité.
En effet, un code malveillant pourrait se servir de cette information pour trouver une faille dans
votre site.

Paramètres SEO
Peut-être plus encore que votre contenu, ces réglages vont déterminer quel degré de visibilité
vous offrez aux moteurs de recherche. En effet, le fait de proposer des adresses « intelligentes »
et de surcroît disposant de l’extension « .html » influence le positionnement de vos pages.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 162 — #186
✐ ✐

162 Chapitre 9. Référencer votre Joomla!

Le bloc Paramètres SEO permet de remplacer les URL de votre site qui contiennent des
références aux identifiants des articles par des chaînes de caractères plus compréhensibles. Cette
fonction est décrite ci-après.
Réécriture d’URL en clair (SEF) : par défaut, Joomla! écrit les URL d’un site en faisant
référence aux identifiants des articles et de leurs catégories, ce qui ne les rend pas intelligibles,
ni pour vous, ni pour un moteur de recherche.
Si vous étiez un moteur, dans quelle rubrique rangeriez-vous la page suivante ?
http://www.mon-site.fr/index.php?option=2&cat=58&id=327
Par contre, une URL du type...
http://www.mon-site.fr/index.php/reglages-moteurs-de-recherche.php
...est plus intelligible.

Nous vous conseillons fortement d’activer cette option.

Réécriture « au vol » des URL : cette option n’est disponible que pour les serveurs Apache
(si vous avez un hébergement mutualisé, il y a de forte chance que vous soyez dans ce cas) et
les serveurs IIS 7.
Cette option permet d’avoir des URL encore plus « propres » puisque la chaîne « index.php/ »
est supprimée. En fait le « mod_rewrite » fournit par le serveur Apache met en correspondance
une URL écrite et optimisée (ce que les gens et les moteurs de recherche voient) et l’adresse
physique d’une page (le « vrai » chemin vers votre contenu).
Si vous testez Joomla! en local avec Wamp, il va falloir activer le module de réécriture d’URL.
Pour ce faire, rien de plus simple : faites un clic gauche sur l’icône de WampServeur, sélectionnez
« Apache », puis « Modules apache ». Descendez à l’aide de la flèche vers le bas dans la liste des
modules pour trouver « rewrite_module ». S’il n’est pas coché, cliquez dessus comme le montre
la figure 9.1.

Figure 9.1 — Activation du rewrite_module dans votre serveur Wamp

On passe au niveau supérieur avec une adresse de page qui ressemble à cela :
http://www.mon-site.fr/prise-en-main/reglages-moteurs-de-recherche Comme pour l’option
précédente, nous vous conseillons de l’activer.

Attention, si vous êtes dans le cas d’un serveur Apache, il va vous falloir renommer le fichier
htacess.txt en .htaccess (le fichier n’a plus de nom, uniquement un point et son extension). Ce
fichier est situé à la racine de votre site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 163 — #187
✐ ✐

9.2 Joomla! et le référencement 163

Si vous êtes hébergé sur un serveur IIS 7, vous devrez renommer le fichier « web.config.txt », présent
à la racine de votre site en « web.config ». À la différence des serveurs Apache qui ont presque
systématiquement le module « mod_rewrite » d’activé, vérifiez bien que le module « IIS URL Rewrite
Module » est installé.

Que vous soyez à distance ou en local, vous devrez utiliser votre client FTP (FileZilla dans le
cadre des tutoriels de ce livre) pour le renommer car Windows vous oblige à donner un nom à
un fichier.
Pour modifier le fichier htaccess si vous êtes en local avec Wamp, lancez Filezilla et
positionnez-vous sur le répertoire de votre site (C:\wamp\www\monsite\).
Faites un clic droit sur le fichier htacess.txt, cliquez sur « renommer » puis supprimez la fin
« .txt » et mettez un point avant htaccess, comme sur la figure 9.2. Appuyez sur entrée, c’est
modifié. Le serveur Wamp va redémarrer et vous pourrez alors profiter de la réécriture de vos
URL.

Figure 9.2 — Modification du fichier htaccess

Ajouter un suffixe aux URL : Google dit qu’il préfère les pages au format .html. Qu’à
cela ne tienne, Joomla! vous offre la possibilité de rajouter le suffixe .html à toutes vos pages
d’un simple clic : http://www.mo-site.fr/prise-en-main/reglages-moteurs-de-recherche.html. Si
une de vos pages possède un lien qui pointe vers un contenu pdf ou xml, alors l’extension de la
page portera le suffixe du type de document.
Alias Unicode : pour chacune de vos pages (tous vos contenus en fait) Joomla! va créer
un alias, basé sur le titre du contenu (le titre d’un article par exemple). Cet alias est utilisé par
les moteurs de recherche pour indexer vos contenus. Cela vous permet de modifier le titre d’un
article (donc d’une page) sans que l’alias (l’URL) ne change. Cette fonctionnalité vous sera utile
si vous publiez votre site Joomla! dans une langue qui utilise des caractères non latins, comme
l’arabe, le mandarin, etc.
Si vous l’activez, vos adresses contiendront des accents comme ci-dessous :
http://localhost/monsite/test-translittération.html (voire figure 9.3).
Et le lien sera véritablement encodé comme suit :
http://localhost/monsite/test-translitt%C3%A9ration.html
Nom du site dans les titres : toujours dans un souci d’optimisation, vous pouvez
également ajouter le nom de votre site aux titres des pages.
Une page intitulée « Réglages d’optimisation pour les moteurs de recherches » serait ainsi
renommée en « Joomla! 3, 100 % pratique - Réglages d’optimisation pour les moteurs de
recherches ». Cela a le mérite de resituer le contexte de votre page, ce qui peut être intéressant
pour une indexation sur un moteur de recherche. N’oubliez pas que n’importe laquelle de vos

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 164 — #188
✐ ✐

164 Chapitre 9. Référencer votre Joomla!

pages peut servir de point d’entrée à votre site. Vous avez le choix entre « non », « avant » le titre
de vos contenus et « après ». Regardez sur la figure 9.3 ce que cela donne en activant le nom
du site « avant ».

Figure 9.3 — Encodage unicode et nom du site dans les titres

Les métadonnées des articles et catégories


Lorsque vous êtes en train de créer ou de modifier un article ou une catégorie, vous pouvez
accéder à ces réglages dans la partie droite de l’onglet « Publication ».
Description : c’est la seule métadonnée que vos visiteurs peuvent voir sans être sur votre
site. En effet, chaque page de votre site pouvant être indexée, vos catégories et vos articles
peuvent donc eux aussi apparaître dans les moteurs de recherche (figure 9.4). Dans une liste de
résultats, apparaissent le titre avec le lien vers la page et une description. Nous vous suggérons de
personnaliser chaque catégorie et chaque article important par une métadescription pertinente.
Une description ne devrait pas faire plus de 250 caractères.

Figure 9.4 — Une description sur une page de résultats

Mots-clés : vous pouvez saisir ici des mots-clés ou phrases, séparés par des virgules. Si
vous n’avez aucune idée de ce qu’il faut saisir, utilisez le nouveau générateur de mots-clés de
Google, disponible à l’adresse : https://adwords.google.com (vous devez vous créer un compte).
Robots : si vous n’avez pas lu la partie précédente « paramètres des métadonnées » pour
la configuration de votre site, faites-le. Sachez que vous pouvez modifier le comportement des
robots indexeurs page par page. Vous pouvez ainsi jouer sur l’indexation d’une catégorie par
rapport à une autre, voire d’une page à une autre.
Pour rappel, l’attribut « no follow » permet à un webmestre de donner l’instruction suivante
aux moteurs de recherche : « ne suivez pas les liens sur cette page » ou « ne suivez pas ce lien
spécifique ». Plus d’informations sur le site de Google :
http://support.google.com/webmasters/bin/answer.py?hl=fr&answer=96569
Auteur : vous pouvez renseigner le nom de l’auteur du contenu. Il apparaîtra dans la balise
méta « author ». Cela signifie que les moteurs de recherche sauront quel auteur a rédigé l’article

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 165 — #189
✐ ✐

9.2 Joomla! et le référencement 165

ou la catégorie. Depuis peu, « l’autorité » d’un auteur sur un sujet peu avoir une influence sur le
positionnement d’une page.
Droits légaux : saisissez ici les droits correspondant à l’article ou à la catégorie (licence
particulière, conditions d’usage, etc.). Ces données seront publiées dans la balise méta « rights ».
Comme les autres paramètres ci-dessus, cela peut vous permettre d’avoir une politique globale
et des cas particuliers (une catégorie, une page) avec des droits différents (une galerie d’images
en licence Creative Commons par exemple).
Référence externe : vous pouvez préciser ici une référence utilisée dans un système de
données externes, comme votre CRM ou votre catalogue produit.

La réécriture d’URL dans le détail


Comme nous l’avons vu précédemment, un bon paramétrage de votre site Joomla! a déjà une
forte incidence sur vos référencements et positionnement. Nous vous proposons d’aller encore
plus loin.
La réécriture d’URL nécessite les compétences de plusieurs métiers : développeur, intégrateur,
webmarketeur, taxonomiste, commercial analyste statistique, etc.
Lorsque vous regardez l’URL par défaut d’une page de votre site dans la barre d’adresse
de votre navigateur, vous voyez que Joomla! génère une adresse qui contient plus ou moins la
requête permettant d’accéder à la page demandée. Cela n’est intelligible ni pour vous, ni pour
les moteurs de recherche.
Heureusement Joomla! (depuis la version 1.5.6) a intégré un outil pour réécrire l’URL :

http://www.mon-site.fr//index.php?option=com_content&view=article&id=19&Itemid=27.

Celle-ci est maintenant remplacée par l’URL http://www.mon-site.fr/le-journal.


Mais Joomla! ne peut pas tout faire et il faut aussi que le serveur Web – un serveur Apache
dans la plupart des cas – accepte la réécriture des URL, c’est-à-dire qu’il comprenne que lorsqu’il
reçoit une belle URL de la forme http://www.mon-site.fr/le-journal, il doit l’envoyer au bon
endroit dans Joomla!. Et c’est là où tout se complique, car le bon fonctionnement de cette
facilité dépend de la version des différents composants proposés par votre hébergeur et de leur
paramétrage.
Avec les fonctions proposées par Joomla!, dans la plupart des cas, vous pourrez obtenir une
adresse de la forme http://www.mon-site.fr/index.php/le-journal, uniquement en activant les
adresses universelles explicites.
Chez bien des hébergeurs, vous pourrez utiliser la réécriture des URL au niveau du serveur
Apache. Dans ce cas, vous aurez une URL de la forme http://www.mon-site.fr/le-journal. Il vous
suffit pour cela de modifier la configuration de votre site Joomla! et de déposer le fichier de
configuration Apache – .htaccess – fourni avec Joomla! dans le répertoire Web de votre site.

Pour renommer votre fichier en .htaccess, même en local, utilisez votre logiciel FTP, car Windows
interdit les fichiers sans nom, ce qui est le cas d’un fichier .htaccess.

Si cette dernière solution ne fonctionne pas, cela vient du serveur Web :


• soit il n’accepte pas la réécriture des URL ;
• soit il requiert un fichier de configuration un peu différent de celui proposé par défaut.

La solution est alors de chercher dans les forums du portail francophone de Joomla! ou de
modifier vous-même la configuration du serveur Web (à supposer que vous ayez les droits pour
le faire).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 166 — #190
✐ ✐

166 Chapitre 9. Référencer votre Joomla!

9.3 STATISTIQUES AVEC GOOGLE ANALYTICS

Attention ! Vous ne pouvez mettre en place Google Analytics que si votre site est publié sur
le Web ! C’est impossible de le faire en local.

Découvrir et installer Google Analytics


Un outil gratuit
Google Analytics est sans doute la solution professionnelle de suivi de statistiques et d’analyse
d’audience la plus utilisée dans le monde. Pour découvrir le produit, regardez la présentation
que Google en fait : http://www.google.com/analytics/features
L’avantage principal que nous lui trouvons, c’est que l’outil offre différents niveaux de lecture.
Si vous souhaitez simplement présenter un chiffre à votre patron, montrez-lui le nombre de visites
par mois. Si le service marketing souhaite calculer le ROI (Return On Investissement – retour sur
investissement) d’une campagne d’e-mailing, de bannières publicitaires, ou bien d’annonces
classiques, liez vos comptes Analytics et Adwords pour afficher, sur le même graphique, les visites
des moteurs de recherches et celles de la campagne.
Vous pouvez également créer vos propres segmentations, déterminer le taux de fidélité et
le temps de latence, identifier vos meilleures sources de chiffre d’affaires et ce que recherchent
réellement vos clients, créer des entonnoirs de conversion et bien d’autres choses encore.

Créer votre compte et y rattacher votre site


La première chose à faire est de vous créer un compte Google Analytics. Rendez-vous pour cela
sur le site www.google.com/analytics (il vous faut une adresse Gmail, que vous pouvez vous
créer gratuitement). Une fois votre compte créé et connecté, rendez-vous dans la partie droite
de la page de votre compte puis cliquez sur « Inscription ».
Sélectionnez un type de profil « site Web » (figure 9.5). Saisissez l’URL de votre site, par
exemple : www.mon-site.fr (sans le http://), affectez-lui une catégorie sectorielle et un fuseau
horaire (importants pour vos statistiques) puis cliquez sur le bouton « Obtenir un ID de suivi ».
Google Analytics va alors créer un code de suivi qu’il va falloir insérer dans votre site.
À cette étape, Google Analytics vous a créé un « ID » (identifiant) de site Web et génère un
petit bout de code en JavaScript qu’il va falloir insérer dans les pages de votre site. Vous n’avez
rien à paramétrer de plus.

Mise en place de Google Analytics dans Joomla!


Pour ajouter le code JavaScript, ouvrez une nouvelle fenêtre et connectez-vous à votre espace
d’administration. Dans le menu « Composants », cliquez sur « Gestion des templates ». Par
défaut, la fenêtre se positionne sur l’onglet « Styles ». Cliquez sur l’onglet « Templates ».
Dans notre exemple, nous n’avons pas changé le template par défaut qui s’appelle
« Protostar ». Si vous avez installé un autre template, cliquez sur « Détails et fichiers » à droite de
la miniature. Vous allez arriver sur une page de présentation du template. Cette page liste les
fichiers maîtres du template ainsi que ses feuilles de style associées. Cliquez sur « index.php »
dans la liste située sur la gauche pour modifier la page principale du template ».

Attention ! Vous êtes maintenant dans le code source du fichier « index.php » de votre
template. Une mauvaise manipulation peut le rendre inopérant, veillez à bien suivre les
instructions.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 167 — #191
✐ ✐

9.3 Statistiques avec Google Analytics 167

Figure 9.5 — Création d’un profil Google Analytics

Utilisez l’ascenseur de la zone d’édition du code et descendez tout en bas de la page.


Positionnez votre curseur juste avant la balise </body>, qui doit être colorée en vert.
Retournez sur Google Analytics et sélectionnez le code de suivi (figure 9.6). Copiez-le (Ctrl +
C ou clic droit et « copier ») et retournez dans votre espace d’administration.

Figure 9.6 — Copie du code de tracking

Collez le code juste au-dessus de la balise </head> (figure 9.7) puis cliquez sur Enregistrer
et Fermer. C’est fini, votre site est configuré avec le code de suivi de Google Analytics. Celui-ci
va maintenant récolter les données de fréquentation de votre site. Pour sortir de l’édition des
templates, cliquez de nouveau sur Fermer. Dans Google Analytics, n’oubliez pas de cliquer sur
Enregistrer et Terminer, en bas de page.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 168 — #192
✐ ✐

168 Chapitre 9. Référencer votre Joomla!

Figure 9.7 — Ajout du code dans le template

Google Analytics présente des données à J +1, c’est-à-dire que vous ne pourrez rien voir avant le
lendemain de l’installation.

Vérifiez que votre code est en place


Pour s’assurer que votre code de suivi Google Analytics est bien en place, rechargez la page
d’accueil de votre site et affichez son code source (avec Firefox : menu « Affichage » puis « Afficher
la source », avec Internet Explorer : menu « Affichage », puis « Source »). Recherchez la balise
</body>, votre code doit se trouver juste au dessus. S’il n’y est pas, recommencez l’étape
précédente.

Pour bien utiliser Google Analytics


Quelques éléments de vocabulaire
Pour bien commencer, regardons ensemble quelques termes spécifiques qui prêtent souvent à
confusion. Nous citerons par moments (textes en italique) quelques éléments extraits de l’aide en
ligne de Google Analytics, n’hésitez pas à vous y référer en visitant le site http://support.google.
com/analytics/?hl=fr.
Une visite : le nombre de visites représente le nombre de sessions (plage d’activité de
30 minutes) individuelles de l’ensemble des visiteurs de votre site. Si un utilisateur est inactif
pendant 30 minutes ou plus sur votre site, toute activité supplémentaire sera considérée comme
une nouvelle session. Si un utilisateur quitte votre site et y accède de nouveau moins de 30 minutes
après, Google Analytics ne comptabilise qu’une seule session.
Un visiteur : le terme « Visiteur » est une abstraction : il n’existe aucun moyen à partir
du Web de vérifier le nombre de personnes réelles visitant votre site (si vous êtes plusieurs à
partager un ordinateur par exemple). L’objectif de Google Analytics est bien évidemment de s’en
rapprocher le plus possible et son système de suivi des visiteurs utilise pour cela des cookies
(fichier texte déposé sur votre disque dur lorsque vous naviguez sur un site) pour évaluer le
nombre d’utilisateurs distincts. Le nombre de vos « visiteurs » représente donc les utilisateurs
uniques qui visitent quotidiennement votre site. Toute session ouverte le même jour par un même
utilisateur est comptabilisée comme un visiteur unique, mais peut représenter deux visites séparées
ou plus.
Visiteurs absolus : lorsque vous sélectionnez une période dans Google Analytics (par
exemple les derniers 30 jours), les visiteurs absolus représentent les visiteurs identifiés par un
cookie. Ils ne sont comptabilisés qu’une seule fois, même s’ils sont venus tous les jours et dix fois
par jour durant la période choisie.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 169 — #193
✐ ✐

9.3 Statistiques avec Google Analytics 169

Pages vues : une « page vue » correspond à la consultation d’une page sur votre site qui
contient un code de suivi Analytics. Si un visiteur retourne sur cette page après l’avoir consultée
une première fois, Google Analytics comptabilise une consultation de page supplémentaire. Si
un utilisateur accède à une autre page et retourne ensuite sur la page d’origine, une seconde
consultation de page est enregistrée.
Consultations de pages uniques : Une consultation de page unique (dans le rapport
Pages les plus consultées, par exemple) regroupe les consultations de pages générées par un
même utilisateur au cours d’une même session. Elle représente le nombre de sessions au cours
desquelles la page en question a été affichée à une ou plusieurs reprises.

Programmer l’envoi d’un rapport mensuel


À moins que vous n’ayez un site de e-commerce dont il convient de suivre la fréquentation tous
les jours, vous pouvez vous programmer l’envoi d’un rapport mensuel pour vous et ceux qui
attendent ce genre de reporting.
Connectez-vous à votre compte Google Analytics et dans la liste des comptes, sélectionnez le
site qui vous intéresse. Vous allez être redirigé vers les « Rapports standards ». Sur cet écran, juste
au-dessous du titre « Présentation de l’audience », vous trouverez un bouton « E-mail ». Cliquez
dessus pour accéder à l’envoi des rapports.
Remplissez les différents champs (figure 9.8) et vous recevrez dans votre boîte de messagerie,
le premier jour de chaque semaine, un rapport mensuel au format PDF (figure 9.9).

Figure 9.8 — Envoi de rapports mensuels

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 170 — #194
✐ ✐

170 Chapitre 9. Référencer votre Joomla!

Figure 9.9 — Statistiques Google Analytics

En résumé
Autant un bon référencement est simple à réaliser (ce n’est que de l’indexation), autant un bon
positionnement s’avère plus complexe. Méfiez-vous des offres alléchantes : aucun professionnel
sérieux en référencement ne peut vous parler de position dans un moteur de recherche avant
d’avoir fait un audit technique de votre site. En général, celui-ci est complété par une prise
de connaissance de la stratégie commerciale et du plan de communication de l’entreprise, à
défaut des objectifs que vous visez.
Personne ne peut garantir la première position dans les résultats de recherche Google, c’est
Google qui le dit !
http://support.google.com/webmasters/bin/answer.py?hl=fr&answer=35291.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 171 — #195
✐ ✐

10
Gérer les extensions

Objectif
La quantité d’extensions disponibles, près de 9 000 toutes versions confondues, a toujours été
l’une des principales forces de Joomla!. Toutes permettent la création de sites très différents les
uns des autres, tant d’un point de vue fonctionnel que graphique.
L’objectif de ce chapitre est de voir la facilité avec laquelle une nouvelle fonctionnalité, un
nouveau look, une nouvelle langue peut être mise en place.

10.1 COMPRENDRE LE SYSTÈME JOOMLA!

Joomla! est un gestionnaire de contenu, certes, mais pourquoi ce logiciel suscite-t-il un tel attrait ?
Principalement grâce à sa modularité. Vous connaissez sans doute les Lego. Le principe de ce
jeu de construction est d’assembler des éléments en vue de réaliser un chef-d’œuvre. Il en est
de même ici. Joomla! est un assemblage d’extensions, c’est-à-dire des briques que vous pouvez
changer à loisir, en fonction de vos besoins.

10.2 LES TYPES D’EXTENSIONS

On trouve dans Joomla! cinq types d’extensions.


Les Composants : à la différence des autres types d’extensions que nous détaillerons
également ultérieurement, les composants sont des applications à part entière. Ces applications
sont intégrées au sein de Joomla! qui en reste le « donneur d’ordre », mais elles bénéficient
de leur propre interface de gestion, tout comme le Panneau d’administration de Joomla!.
C’est également pour cela que les composants bénéficient de leur propre gestion au sein de
l’administration du site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 172 — #196
✐ ✐

172 Chapitre 10. Gérer les extensions

Les composants sont les éléments moteurs de Joomla!. Ainsi, la gestion et l’affichage des
articles sont basés sur un composant appelé com_content, de même que la gestion des contacts,
com_contact, ou encore la gestion des liens Web, com_weblinks.
Mais au-delà des composants de base, l’ajout de composants tiers permet d’ajouter de
nouvelles fonctions à votre site, voire de modifier totalement son utilisation.
Les Modules : nous l’avions rapidement évoqué lors de la création des menus : les modules
sont des briques de présentation, des « conteneurs de contenu ». Tout élément devant être affiché
sur votre site devra au préalable avoir été placé dans un module et publié. Ainsi, vos menus,
bannières publicitaires, galeries d’images, intégrations de réseaux sociaux et fils d’actualités
devront trouver une place judicieuse.
Les Plugins : les plugins sont, par définition, des éléments « greffés ». Il s’agit de petits
programmes dont la fonction est d’activer un comportement particulier. Leur action étant
généralement très ciblée, il n’y a pas ou peu de paramètres à régler.
En guise d’exemple : imaginez-vous en train de rédiger le texte d’un article. Vous effectuez
machinalement des opérations de mise en forme, en mettant un mot en gras, ou en italique, en
allant à la ligne. En réalité, à chaque caractère tapé, l’éditeur de texte par défaut de Joomla!
TinyMCE se charge de traduire le texte en format HTML. C’est ce format qui sera ensuite
interprété par le navigateur de vos visiteurs. Cet éditeur de texte complet est en réalité un plugin
qui interagit avec le composant de gestion du contenu et en simplifie son utilisation.
Les Templates : dans la vie de tous les jours, lorsque vous changez de vêtements, votre
aspect extérieur change ; mais à l’intérieur, vous restez la même personne. C’est exactement ce
que font les templates pour Joomla!. Les templates vous permettent de changer facilement la
forme de votre site, sans changer votre contenu. Ils vont ainsi gérer pour vous l’intégralité des
aspects graphiques du site, en prenant en charge aussi bien les couleurs, la présentation, que
les emplacements de vos menus, articles, etc.
Les Langues : Joomla! permet de créer des sites multilingues. On pourra ainsi, en cours
d’utilisation, changer la langue d’un site, d’un simple clic. Cet argument sera de poids si vous
souhaitez vous ouvrir à un public international et faciliter des échanges, qu’ils soient commerciaux
ou non.

10.3 INSTALLER/SUPPRIMER UNE EXTENSION

Avant de mettre à jour ou d’ajouter une extension, faites par précaution une sauvegarde des
données du site et de la base.
Après cette mise à jour, refaites une sauvegarde de la base de données, car la précédente
sauvegarde ne contient pas les paramètres modifiés par la mise à jour, ni les éventuelles tables
ajoutées par l’extension. Conservez néanmoins la première sauvegarde effectuée : en effet,
si un problème grave survenait plus tard lors de l’utilisation de la nouvelle extension, vous
pourriez alors revenir en arrière facilement. Rendez-vous dans le menu Extensions / Gestion des
extensions.

Installer une extension


Le premier élément sélectionné dans le menu de gauche est celui permettant d’installer une
extension. Vous noterez qu’aucune distinction n’est faite sur le type d’extension à installer
(composant, module, plugin, langue, template), Joomla! étant capable de faire la différence tout
seul lors de l’installation.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 173 — #197
✐ ✐

10.3 Installer/supprimer une extension 173

Rechercher l’extension souhaitée


Pour réaliser l’installation, il vous faut indiquer où se trouvent les fichiers de l’extension à installer.
Rassurez-vous, vous n’aurez pas à les charger un à un et à faire vous-même toute la mise
en place. Deux méthodes s’offrent à vous pour récupérer tout ce dont vous avez besoin.
La première consiste à chercher directement depuis votre site. Pour se faire, le premier onglet
Installer à partir du Web vous permettra de rechercher ce que vous souhaitez au moyen d’un
moteur de recherche intégré. Cette méthode s’applique surtout lorsque vous savez précisément
ce que vous recherchez (Figure 10.1).

Figure 10.1 — Recherche d’extensions depuis le site

La seconde manière de procéder consiste à utiliser les sites dédiés aux extensions Joomla!.
Ces extensions sont mises à disposition sous forme de fichiers archives, généralement au
format Zip, qui contiennent tous les fichiers nécessaires.
Vous trouverez un nombre toujours grandissant d’extensions sur Internet, gratuites pour
certaines, payantes pour d’autres. Pour vous faire une idée, ou pour faire votre marché,
vous pouvez vous rendre aux adresses suivantes : http://extensions.joomla.fr ou bien
http://extensions.joomla.org pour un catalogue plus complet, mais dans sa version anglophone
(figure 10.2).
Laissez-vous ensuite guider et téléchargez les extensions dont vous avez besoin.

À noter : une signalétique de compatibilité est apposée à côté du titre de chaque extension
des catalogues. Prenez soin de vérifier que l’extension que vous vous apprêtez à charger
comporte bien la mention pour Joomla! 3.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 174 — #198
✐ ✐

174 Chapitre 10. Gérer les extensions

Figure 10.2 — Catalogue d’extensions sur http://extensions.joomla.fr

Vous êtes prêts ? Installez !


L’installation peut être réalisée de quatre manières différentes :
• La première, tendant à se généraliser, consiste justement à utiliser le moteur de recherche
inclus à Joomla! pour effectuer directement l’installation d’une extension lorsque celle-ci
le propose. Lors de la consultation de la fiche d’une extension, celle-ci vous proposera
alors soit Install, soit Download pour un téléchargement local ;
• la seconde consiste à indiquer un chemin vers lequel trouver le fichier d’installation de
l’extension, le plus souvent, un chemin local sur votre ordinateur ;
• la troisième, permet d’effectuer une installation à partir d’un répertoire du site où l’on
aura préalablement transféré le fichier nécessaire (via FTP). Ceci est utile lorsque des
fichiers d’installation nécessitent trop de temps de chargement et ne peuvent être installés
avec la seconde méthode ;
• la quatrième, quant à elle, permet une installation distante, en précisant le chemin depuis
lequel peut être téléchargée l’archive nécessaire (par exemple, depuis un lien sur le site
de son auteur).

Il ne vous reste alors qu’à cliquer sur le bouton Envoyer & installer ou Installer, selon la
méthode d’installation choisie.
Après le temps nécessaire au traitement de l’installation, un message vous indiquera alors
si celle-ci s’est bien déroulée (figure 10.3). Parfois, des indications supplémentaires mises
à disposition par l’auteur de l’extension sont affichées en vue de son utilisation ou de son
paramétrage.
Si d’aventure l’installation échouait, des indications vous sont données sur le problème
rencontré.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 175 — #199
✐ ✐

10.3 Installer/supprimer une extension 175

Figure 10.3 — Installation réussie

Astuce : parfois certaines archives mises à disposition en téléchargement contiennent elles-mêmes


plusieurs archives. Il n’est pas rare par exemple de voir une extension comporter à la fois un
composant, un module et un plugin. On prendra alors soin de décompresser l’archive initiale pour
en extraire les différents éléments à installer séparément.

Faites des découvertes


Lorsqu’un transfert de fichiers a été effectué manuellement, par exemple en l’absence de fichier
d’archive, il est possible de demander à Joomla! de « découvrir » les éléments d’installation afin
de les intégrer.
Pour cela, rendez-vous sur le lien Découvrir dans le menu de gauche et cliquez sur le bouton
Découvrir situé en haut à gauche de la page. Joomla! effectuera alors une recherche de tout
nouveau répertoire comportant des éléments non répertoriés et signalera alors la possibilité de
les installer.

Désactiver/supprimer une extension


Depuis la Gestion des extensions, cliquez sur le lien Gestion à votre disposition dans le menu de
gauche. C’est depuis cet endroit que vous pouvez soit désactiver, soit désinstaller une extension.
La désactivation peut s’avérer nécessaire, soit dans le but de préparer l’arrivée de cette
extension sans pour autant la laisser visible à vos utilisateurs ou administrateurs, dans le cas
d’un composant par exemple, soit pour désactiver certaines fonctionnalités, pour les plugins
notamment.
La désinstallation est quant à elle définitive et il ne sera que très rarement procédé à
l’archivage des données ou fichiers de l’extension, ceci dépendant en effet de la manière dont
celle-ci aura été conçue.

Cette décision doit par conséquent être mûrement réfléchie, sous peine de voir une partie des
données du site perdues.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 176 — #200
✐ ✐

176 Chapitre 10. Gérer les extensions

L’ensemble des extensions est proposé par défaut. Des filtres sont alors à disposition afin
d’affiner l’affichage (figure 10.4). On pourra notamment filtrer par type d’extension, ce qui
facilitera la recherche. Il suffit ensuite de sélectionner l’extension en cochant la case à gauche
de son nom, puis de cliquer sur le bouton Activer/Désactiver ou bien Désinstaller, selon l’action
souhaitée.

Figure 10.4 — Gestion des extensions

Dans le cas de l’activation/désactivation, on pourra également cliquer directement sur l’icône


dédiée dans la colonne Statut.

10.4 DROITS DE GESTION

De la même manière que pour les autres écrans principaux, un bouton Paramètres est disponible
afin d’effectuer certains réglages. Celui de la Gestion des extensions se limite au message de fin
d’installation, au cache de mise à jour et aux droits de gestion.

Attention ! Il n’en reste pas moins que vous êtes ici en présence d’un élément essentiel pour
la sécurité de votre site. En effet, il serait très hasardeux de laisser libre accès à cette partie à
des personnes novices ou mal avisées. Souvenez-vous que la suppression d’une extension,
d’un composant en particulier, entraîne la perte irrémédiable des informations qui la/le
constituent. Imaginons le cas d’un site communautaire : la suppression même du composant
dédié à cette partie équivaudrait à la destruction pure et simple de la communauté !

En résumé
Installer une extension est un geste simple et rapide, d’autant que l’offre proposée est
pléthorique. Vous trouverez certainement votre bonheur, quelle que soit la fonctionnalité à
rajouter, mais prenez soin de sauvegarder régulièrement votre site pour éviter toute surprise
désagréable en cas de bug ou d’incompatibilité.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 177 — #201
✐ ✐

11
Gérer les composants

Objectif
Un composant vous permet d’intégrer de nouvelles fonctions, de donner un sens différent
à l’utilisation de votre site (gestion de newsletter, gestion d’événements, gestion de petites
annonces, galeries d’images, services de téléchargement, boutique e-commerce, etc.).
Par défaut Joomla! vous propose déjà plusieurs composants. Voyons tout d’abord ceux-ci d’un
peu plus près, nous nous pencherons ensuite sur un cas pratique de mise en œuvre.

11.1 VOTRE RÉGIE PUBLICITAIRE : LES BANNIÈRES

Le composant Bannières permet d’inclure de l’affichage publicitaire sur votre site (figure 11.1).
Sous forme d’images ou de texte, chaque affichage d’une bannière conduit à un lien vers un
de vos annonceurs, dès lors qu’un visiteur clique dessus. On pourra ainsi gérer, non seulement
la fréquence et la manière d’afficher des bannières, mais également suivre le nombre de clics
effectués.

Comment fonctionne le système de bannières ?


Depuis le menu Composants, sélectionnez Bannières. La page qui s’affiche alors vous propose,
en plus des boutons habituels, quatre éléments dans le menu de gauche que nous allons détailler.
Bannières : cette partie vous présente la liste des différentes bannières créées à ce jour :
Statut de publication, nom (et catégorie d’appartenance), épinglées ou non, client associé,
nombre d’affichages effectués et de clics associés, langue d’affichage et identifiant interne à
Joomla!.
Une bannière sera dite « épinglée », lorsque l’on souhaite lui attribuer un affichage prioritaire
sur certaines autres bannières.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 178 — #202
✐ ✐

178 Chapitre 11. Gérer les composants

Figure 11.1 — Les bannières

Catégories : en vue de simplifier l’organisation des bannières, la notion de catégorie est


utilisée pour leur classification. Il sera alors possible de définir leur publication, leur hiérarchie,
les niveaux d’accès et leur langue d’affichage.
Clients : il s’agit de la liste de vos annonceurs. Vous retrouverez ici divers renseignements
liés au contact client, à la collecte d’informations de clics, au nombre de bannières actives
associées, le type de contrat associé.
Suivi : cet onglet vous permet un suivi du nombre de clics ou d’affichage des bannières
avec filtrage par client, catégorie, et type de suivi (affichage ou clic).

Les paramètres et droits par défaut


Comme tout élément de Joomla!, les bannières disposent de réglages et de droits en vue de
leur gestion. Vous pouvez y accéder depuis le bouton Paramètres, situé dans la barre de boutons
d’action.
Les paramètres se trouvent ici restreints au nombre de quatre pour la partie Paramètres
client, avec la définition par défaut du type de contrat, l’activation du suivi des affichages et des
clics, et l’ajout d’un préfixe des mots-clefs permettant une recherche plus aisée.
La gestion des versions est ici de mise. Vous pouvez ainsi garder un historique des bannières
publiées et de leurs annonceurs respectifs.
Concernant les droits, nous retrouvons ici les mêmes possibilités que lors de la création
des menus ou de toute autre extension. Vous pouvez ainsi définir au cas par cas le niveau
d’accréditation de chaque groupe d’utilisateurs.

Gérer les clients


Tout d’abord il vous faut créer des clients, afin d’affilier vos bannières. Pour cela, depuis le
lien Clients du menu gauche, cliquez sur le bouton Nouveau. Il vous faudra alors renseigner
diverses informations telles que le statut de publication, le nom interne à donner, le nom du
client, l’e-mail du contact, le type de contrat, et statuer sur le suivi des affichages et des clics. Sur

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 179 — #203
✐ ✐

11.2 Votre répertoire de contacts 179

la partie basse de l’écran, vous aurez la possibilité de définir une description détaillée du client
en guise d’information complémentaire.
Un second onglet vous permet d’ajouter des informations de métadonnées pour ce même
client.

Gérer les catégories


Vous devrez ensuite définir des catégories. À noter que les catégories peuvent être construites de
manière imbriquée, ce qui permet la construction d’une hiérarchie de classification.
De la même manière que pour les clients, cliquez sur le bouton Nouveau et définissez un
titre, un alias éventuel, une description, la catégorie parente, des tags associés, le statut de
publication, le niveau d’accès, la langue d’affichage, son auteur.
Un onglet Publication vous donne la possibilité de définir les métadonnées liées à la catégorie,
ainsi que le comportement à tenir par les robots de moteurs de recherche. L’onglet suivant des
Droits vous donne quant à lui accès plus précisément aux droits ou permissions alloués pour la
catégorie.
Le dernier onglet Paramètres, vous permet de définir le type de mise en page, et d’image
pour la catégorie visée.

Créer et modifier des bannières


Selon le cas, depuis l’onglet Bannières, cliquez sur le bouton Nouveau ou Modifier. En dehors
des informations habituelles à donner : nom, alias, catégorie, il s’agira dans le premier onglet
Détails de préciser si la bannière sera de type image ou personnalisé.
L’image sera sélectionnée parmi un panel déjà existant ou pourra être téléchargée. On
pourra également régler la taille d’affichage de l’image, le texte alternatif à afficher (en cas
d’impossibilité d’afficher l’image) et le lien URL publicitaire désiré lors du clic visiteur.
Dans le cas d’une bannière personnalisée, il sera alors question, non pas d’une image, mais
de code personnalisé en langage HTML. Ceci implique bien évidemment d’avoir déjà quelques
notions d’HTML.
L’onglet suivant sera dédié aux options de la bannière : quant au nombre d’affichages à
effectuer, le client affilié ainsi que son contrat, le suivi des affichages ainsi que des clics.
L’onglet suivant vous permettra de définir les paramètres de publication avec notamment la
plage de dates, en vue par exemple d’une publication différée, ainsi que les métadonnées.
Il ne vous restera plus qu’à enregistrer vos modifications.

11.2 VOTRE RÉPERTOIRE DE CONTACTS

Le composant Fiches de contacts permet de créer un annuaire de contacts. Classés par catégories,
ils pourront être utilisés aussi bien de manière publique que de manière plus restrictive.

Un mot sur les droits et paramètres par défaut


L’assignation des droits est ici du même type que ce que nous avons déjà rencontré lors de
précédents chapitres : la possibilité de restreindre la gestion des contacts en fonction du groupe
d’utilisateurs.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 180 — #204
✐ ✐

180 Chapitre 11. Gérer les composants

Les paramètres en revanche sont un peu plus étoffés. En cliquant sur le bouton Paramètres
dans la barre de boutons d’action, vous pouvez ainsi accéder à une multitude de réglages
par onglets concernant l’affichage des coordonnées de vos contacts, les icônes à utiliser, les
options d’affichage des listes sous forme de tableaux ainsi que les paramètres des formulaires de
contacts, dont entre autre l’utilisation du captcha ou encore la gestion de version des contacts.

Créer des catégories de contacts


La première décision consiste à savoir comment classer vos contacts. En créant d’emblée des
catégories de contacts claires, vous serez alors à même de vous y retrouver plus facilement par
la suite : clients, prospects, simples utilisateurs du site, commerciaux.
Depuis le menu Composants, cliquez sur Fiches de contacts, puis sur Catégories. Vous
pourrez alors cliquer sur les boutons Nouveau ou Modifier, selon que vous souhaitez créer une
nouvelle catégorie ou en modifier une existante.
Saisissez un titre, un éventuel alias, que Joomla! complétera automatiquement si laissé vide,
une description, une catégorie parente si vous souhaitez créer une hiérarchie, son statut de
publication, son niveau d’accès par défaut, sa langue d’affichage éventuelle.
Nous retrouvons ensuite des onglets dans la partie supérieure, similaires à ceux rencontrés
pour les catégories de bannières, avec les paramètres de publication, de mise en page ainsi que
des droits applicables à cette catégorie.

Créer/modifier des contacts


Vos catégories créées, il est maintenant temps de créer les contacts qui vont avec. Toujours depuis
le menu Composants / Fiches de contacts, cliquez sur Contacts, puis sur le bouton Nouveau
pour une création, ou sur Modifier pour les éléments existants.
La saisie est ici conventionnelle, avec le nom du contact, son alias, une image associée, ses
coordonnées, sa catégorie, son statut de publication, son niveau d’accès, sa langue d’affichage.
Il y a quelques particularités néanmoins : il sera possible – mais pas obligatoire – de lier
le contact avec un utilisateur déclaré du site. De la même manière, vous pourrez choisir si un
contact est « en vedette » ou non. En cas d’utilisation de fiches de présentation, il fera ainsi partie
des contacts bénéficiant d’options d’affichage supplémentaires en vue de leur valorisation.
À cet effet, un onglet dédié à la saisie d’Informations diverses sous forme d’une zone de
texte est présent. Anodine au départ, cette zone vous permettra par exemple de proposer à
vos visiteurs une fiche de présentation détaillée de vos auteurs ou utilisateurs de référence (CV,
parcours, contenus d’auteurs publiés...).
Vous trouverez ensuite sous forme d’onglets, les informations liées à la publication, l’état
d’affichage des coordonnées complètes du contact dont vous pouvez définir les préférences au
cas par cas.

Cas pratique : gestion de plusieurs annuaires de contacts


En tant que grossiste ou fabricant, vous souhaitez pouvoir donner accès à vos visiteurs à une liste
de contacts ou d’adresses utiles, comme par exemple celles des revendeurs agréés. Ceci est tout à
fait adapté à une hiérarchie de catégories dotées de formulaires de contacts ayant un niveau d’accès
public. Parallèlement, vous pouvez également gérer une deuxième structure de catégories et de
contacts regroupant vos clients connus et fournisseurs, mais cette fois-ci avec un niveau d’accès
restreint, consultable par vous seul ou par certains de vos collaborateurs.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 181 — #205
✐ ✐

11.3 Fils d’actualité – RSS 181

11.3 FILS D’ACTUALITÉ – RSS

Le composant Fils d’actualité permet d’intégrer l’affichage de flux RSS en provenance d’autres
sites.

Qu’est-ce qu’un flux RSS ?


RSS, pour « Really Simple Syndication », est un standard de diffusion d’information au format XML.
Il s’agit en fait d’un fichier regroupant des brèves d’information sous forme de liens, rafraîchies
de façon périodique en vue d’être affichées au travers d’un site tiers, le vôtre en l’occurrence.
Lors de clics sur ces liens, vos visiteurs sont alors redirigés vers le site source de ces informations ;
cette redirection leur permet ainsi de consulter les brèves dans leur intégralité.
Vous pouvez de cette manière afficher sur votre site un ou plusieurs fils d’actualité en
regroupant un ou plusieurs flux RSS, on parle alors de « syndication de contenu ». De plus, les
liens proposés étant au format XML, vous aurez tous pouvoirs pour personnaliser l’affichage de
ces liens en leur faisant intégrer votre charte graphique.

Comment fonctionne un flux RSS ?


Il est nécessaire de disposer d’un outil spécifique, appelé « lecteur RSS » ou encore « agrégateur
RSS », afin d’exploiter les flux RSS. L’utilisateur d’un lecteur RSS peut ainsi consulter en un seul
endroit les dernières actualités de dizaines, et parfois de centaines de sites Web, sans avoir à les
visiter et sans avoir à communiquer d’informations personnelles.

Créer des catégories de flux RSS


Vous pouvez créer et classifier vos fils d’actualité par catégories. Pour cela, cliquez sur le menu
Composants / Fils d’actualité (RSS) puis sur Catégories. L’écran présenté vous fournira les boutons
habituels, notamment ceux de création, modification, publication et suppression.
Cliquez sur le bouton Nouveau et saisissez un titre pour la catégorie. Ceci est le minimum
permettant la création. Vous pourrez néanmoins définir une catégorie parente si vous souhaitez
créer une arborescence de catégories, le statut de publication, le niveau d’accès et la langue
d’affichage. Une description pourra être fournie, en même temps que l’auteur du fil, une image
par défaut, ou bien encore les métadonnées associées à la catégorie. De la même manière,
vous retrouverez la possibilité de définir plus finement la gestion des droits d’accès au moyen
d’un onglet dédié.

Gérer des flux RSS sur son site


Après avoir défini vos catégories, vous pouvez à présent insérer des flux RSS dans vos pages. Pour
cela, cliquez sur Fils d’actualités dans le menu de gauche, puis cliquez sur le bouton Nouveau.
Les informations essentielles sont ici, le titre du flux RSS, sa catégorie ainsi que son lien. Il
s’agit là de l’adresse URL vers laquelle chercher le flux mis à disposition. Vous définirez ensuite
le statut, les niveaux d’accès et la langue d’affichage.
Dans les troisième et quatrième onglets se trouvent les options de publication définissant
notamment la période de publication, le nombre de liens affichés simultanément et la période
en secondes avant rafraîchissement du cache de la liste.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 182 — #206
✐ ✐

182 Chapitre 11. Gérer les composants

11.4 GÉRER VOS LIENS

Le composant Liens Web, disponible depuis le menu Composants/Liens Web, vous permet de
définir des listes de liens vers d’autres sites Web. Vous pouvez ainsi proposer des annuaires de
liens utiles, classés par catégories.

Créer des catégories de liens


La classification par catégorie permet un encadrement des liens proposés. De la même façon
que pour les autres composants, la création de catégories se fait ici depuis le menu gauche du
même nom, puis du bouton Nouveau. Avant d’enregistrer, saisissez un titre, un alias éventuel,
une catégorie parente en cas d’arborescence, un état de publication, un niveau d’accès, une
langue d’affichage et une description. On accédera également à des onglets supplémentaires,
déjà énoncés précédemment, avec notamment la gestion de publication et des permissions
d’accès.

Créer des liens


Depuis le menu gauche, section Liens Web, cliquez sur le bouton Nouveau, saisissez le titre et
l’adresse du lien – c’est-à-dire l’URL vers laquelle rediriger l’utilisateur – assignez la catégorie,
tags, statut, niveau d’accès et langue si besoin (figure 11.2).
À partir des onglets suivants, vous déterminerez notamment, dans les options de publication,
si le lien est limité dans le temps, par le biais des dates de début et de fin de publication. Les
paramètres de base vous permettent quant à eux de définir le mode de redirection vers le
lien ciblé, en ouvrant par exemple celui-ci dans une nouvelle fenêtre. On pourra également
demander le comptage du nombre de clics effectués, à des fins statistiques.

Figure 11.2 — Gestion des liens Web

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 183 — #207
✐ ✐

11.5 Votre messagerie privée 183

11.5 VOTRE MESSAGERIE PRIVÉE

Le composant de messagerie privée se comporte comme une boîte e-mail classique. Une fois
connecté à l’administration du site, vous pouvez accéder à vos messages, soit en passant par le
menu Composants / Messagerie privée, soit en cliquant sur l’indication de messages en bas à
gauche de la page, symbolisé par une minuscule petite enveloppe. Vous serez alors dirigé vers
la liste des messages reçus.
Deux boutons situés dans la barre d’action vous permettent de préciser les options et
permissions à utiliser.
Mes paramètres : ce bouton vous permet d’une part de définir si vous souhaitez verrouiller
– c’est-à-dire désactiver – l’utilisation de messages internes vous concernant ; d’autre part
de demander l’envoi d’un e-mail, sur votre adresse personnelle, hors du site, lorsque vous
recevez un message interne. Enfin, vous pouvez définir l’option de suppression automatique des
messages.
Paramètres : ce bouton vous donne accès au réglage des droits d’accès et de configuration
pour la messagerie.

11.6 MISE À JOUR DE JOOMLA!

Le composant de mise à jour Joomla! vous tient au courant des mises à jour disponibles. Le
maintien à jour de votre site est très important, ne serait-ce que d’un point de vue sécuritaire.
Rendez-vous au chapitre 16, Maintenance au quotidien, pour de plus amples informations à ce
sujet.

11.7 RECHERCHE

Le composant Recherche est le moteur de recherche interne par défaut de votre site. C’est lui qui
permet à vos utilisateurs d’effectuer une recherche rapide sur l’ensemble du contenu de votre
site.
Il sera par ailleurs possible, par le biais du bouton Paramètres, situé dans la barre d’action,
d’activer la collecte de statistiques sur les éléments recherchés.
Une fois la collecte des informations activée, toute recherche effectuée sur le site fera l’objet
d’un recensement sous forme de listes présentant les mots ou phrases recherchés ainsi que le
nombre de recherches effectuées. Une dernière colonne, présentant le nombre de résultats de
recherche est par défaut non renseignée. Pour afficher ces résultats, il suffit de cliquer sur le
bouton Afficher les résultats de recherche situé au-dessus des résultats.

Conseil : comment utiliser ces statistiques ? Lorsque vos visiteurs font une recherche sur le
site, c’est bien souvent parce qu’ils n’ont pas trouvé facilement une information, notamment
par l’intermédiaire des menus du site. Ces statistiques vous permettent alors de mener une
réflexion sur l’organisation de vos contenus et de vos menus, et ainsi d’améliorer l’ergonomie
et de faciliter la navigation. Une fois la réflexion menée, un clic sur le bouton Réinitialiser
effacera les résultats enregistrés afin de démarrer une nouvelle étude.

Ce mode de recherche est dit de plein texte. Cela signifie que le terme ou la phrase demandés
seront recherchés au sein de l’ensemble de la base de données. Ce mode de recherche est
moins performant que celui dit indexé que nous allons voir à présent.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 184 — #208
✐ ✐

184 Chapitre 11. Gérer les composants

11.8 RECHERCHE AVANCÉE


Le composant de Recherche avancée est une évolution ajoutée depuis Joomla! 1.7, basée cette
fois non pas sur une recherche à la volée du contenu de la base de données, mais sur une
indexation, un recensement global de l’ensemble du contenu du site, préparé à l’avance. Cette
indexation permet une recherche très performante sur le site, avec notamment la notion de
recherche suggérée. Ainsi, le site va vous proposer des résultats approchant votre demande
initiale, basés sur la racine même du mot principal, au cas où ceux-ci pourraient être en rapport.
Par exemple, une recherche sur le mot ‘raisonnable’, vous suggérera également des résultats sur
les mots ‘raison’, ‘raisonner’ et ‘raisonnement’.
Par défaut, la recherche avancée n’est pas activée. Pour cela, il faut tout d’abord activer
quelques plugins. Nous n’aborderons ce point qu’au chapitre 14, néanmoins ces activations sont
simples et rapides. Depuis le menu Extensions/Gestion des plugins, recherchez puis activez le
plugin Contenu – Indexation de recherche, ainsi que les six plugins de type Finder, ce dernier
étant le nom de l’extension qui a été incorporée à Joomla! pour bénéficier de cette recherche
augmentée.
Nous pouvons ensuite revenir à notre Recherche avancée depuis le menu Composants.
L’indexation étant basée sur une moisson d’information sur le contenu, nous allons tout d’abord
lancer cette collecte en cliquant sur le bouton Indexer depuis la barre d’action. Ce travail
nécessitera sans doute un certain temps (figure 11.3). Lorsque la fenêtre vous y invitera à la fin
du processus, refermez là, votre contenu est maintenant indexé.

Figure 11.3 — Indexation du contenu

Vous pourrez ainsi consulter le contenu indexé soit directement par termes retenus, soit par
branches de contenu, au moyen du menu de gauche, en cliquant sur Plans de contenus.
Le dernier élément du menu de gauche, Filtres de recherche, peut se révéler intéressant pour
guider vos utilisateurs. En effet, les filtres de recherche vous permettent de donner un périmètre
précis à la recherche proposée à vos visiteurs. En créant un nouveau filtre, vous définirez parmi
l’indexation à disposition, quelles sont les branches à inclure (ou non) dans les résultats. Vous
pouvez ainsi restreindre le champ d’application de la recherche. Il vous suffit ensuite d’ajouter
un élément de menu de type Recherche avancée et de préciser le filtre de recherche ainsi créé.
Un petit mot quant aux paramètres, accessibles par le bouton du même nom depuis la
barre d’action. Vous aurez la possibilité d’activer les statistiques tout comme pour la recherche
classique, ou pour l’utilisation des suggestions de recherche.
Les options liées précisément à l’indexation vous permettront quant à elles de donner un
« poids », une pondération, à l’indexation de vos contenus. Vous pourrez par exemple décider

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 185 — #209
✐ ✐

11.9 Redirection 185

qui du titre, des métadonnées ou de l’URL a le plus d’influence sur les résultats de la recherche
présentés.

11.9 REDIRECTION

Accessible depuis le menu Composants / Redirection, ce véritable gestionnaire de redirection a


pour but d’éviter tout lien URL obsolète ou toute erreur dans l’affichage d’un contenu.

Pourquoi faire des redirections ?


Lien URL obsolète : un élément de menu pointe vers un article qui n’est plus publié ou a été
supprimé par mégarde par vous-même ou l’un de vos utilisateurs. Le lien de menu affichera
alors une page d’erreur à vos visiteurs.
Changement du contenu : votre site comprend un catalogue de produits qui évolue.
Certaines références sont retirées du marché et d’autres prennent leur place. Afin d’assurer une
continuité dans la recherche de produits devenus obsolètes, on prendra soin de rediriger les
visiteurs de l’ancienne vers la nouvelle gamme de produits.
Refonte du site : votre site Joomla! est en place depuis quelque temps déjà et vous
souhaitez le faire évoluer. On utilisera les redirections pour que vos visiteurs s’habituent peu à
peu à une nouvelle organisation du contenu.
Dans tous ces cas, on renverra le visiteur sur une page préalablement choisie, si le contenu
d’origine n’est plus disponible ou a été déplacé.

Comment fonctionne une redirection ?


On utilisera le bouton Nouveau pour créer une nouvelle redirection en indiquant l’URL d’origine
et l’URL de la nouvelle destination. On ajoutera également des commentaires afin de se rappeler
ultérieurement le motif de la redirection.
On pourra à tout moment activer ou désactiver la redirection. Cela peut se révéler utile
pour planifier un futur changement de contenu (par exemple dans le cas du catalogue produit
précédemment évoqué).
Une fois que la redirection ne sera plus nécessaire, on pourra soit l’archiver à des fins
d’historisation, soit tout simplement la supprimer.

11.10 TAGS

Des tags pourquoi faire ?


La gestion des « Tags », ou marqueurs en français, est une des nouvelles composantes présentes
dans Joomla! 3. Nous avons déjà la notion de catégories, de métadonnées, que faire en plus
de ces « Tags » me direz-vous ?
Les tags se rapprochent d’une classification personnelle de vos intérêts et de ceux de vos
utilisateurs vis-à-vis des contenus publiés, un lien personnel voire affectif en rapport avec le
contenu « taggé » ou marqué. Un des exemples les plus flagrants d’utilisation de ce concept est
Twitter, utilisant la notion de hashtags, qui permet aux utilisateurs de placer leurs préférences,
attitudes et humeurs grâce aux marquages dans leurs messages.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 186 — #210
✐ ✐

186 Chapitre 11. Gérer les composants

L’utilisation de tags au sein de vos contenus donnera ainsi à vos visiteurs des possibilités de
recherche non pas par classification, mais par affinités.

Comment les utiliser au mieux ?


La gestion des tags se trouve au même titre que les autres composants au sein d’un élément
de menu qui leur est propre. En y accédant depuis le menu Composant / Tags, vous accéderez
à la liste des tags ayant déjà été saisis au sein de votre contenu existant. Si par défaut vous
n’en voyez aucun, prenez soin d’éditer un article par exemple et d’y ajouter quelques tags. En
revenant dans l’interface de gestion, ces derniers seront alors déjà présents et référencés.
Cette interface est relativement simple et vous permet un aspect pur et simple de gestion.
En effet, vous pourrez modifier l’ordre de suggestion des tags par simple glisser-déplacer des
éléments présents, ou bien encore en créer, modifier ou supprimer parmi la liste. La notion de
suppression est ici utile car bien que les tags servent à identifier plus facilement un contenu, ces
derniers, si mal maîtrises, peuvent s’avérer préjudiciables. Ceci notamment dans une optique de
modération des propos de certains contributeurs ou auteurs de votre site.

11.11 CAS PRATIQUE

Installer un gestionnaire de sauvegardes : Akeeba Backup


Prenons à présent un cas concret. Quel que soit votre activité, entreprise, association, collectivité
locale ou territoriale ou bien même en tant que particulier, une des recommandations majeures
est de faire des sauvegardes régulières de votre site. Pour cela, nous vous proposons la mise en
œuvre d’un système de sauvegarde nommé Akeeba Backup.

Figure 11.4 — Recherche d’Akeeba Backup

Rendez-vous dans le menu Extensions / Gestion des extensions. Nous utiliserons le mode
d’installation en ligne à partir du premier onglet Installer à partir du Web. Depuis cet emplace-
ment, recherchez Akeeba backup au moyen de la boîte de recherche mise à disposition. Une
fois trouvé, cliquez sur la fiche de l’extension pour accéder aux détails de celle-ci (figure 11.4).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 187 — #211
✐ ✐

11.11 Cas pratique 187

Un bouton vert, Install, vous permettra de procéder à sa mise en place, après appui sur un
dernier bouton Installer à l’étape suivante, en guise de confirmation.
Pour plus de confort après installation, nous vous recommandons de vous rendre sur le site
de l’éditeur pour récupérer la dernière version de traduction française du composant, à cette
adresse :
http://cdn.akeebabackup.com/language/akeebabackup/index.html
Une fois récupérée, vous pourrez l’installer, tout comme le composant, depuis Extensions /
Gestion des extensions, mais à partir du second onglet Archive à envoyer.

Prise en main
L’installation cette fois terminée, nous pouvons nous rendre dans le composant par le biais
du lien de menu Composants / Akeeba Backup. Si l’installation de la langue a été effectuée,
l’interface sera en français, ou à défaut, en anglais (figure 11.5).

Figure 11.5 — L’interface d’Akeeba Backup

Vous devez tout d’abord lancer la configuration automatique qui effectuera tous les réglages
nécessaires en fonction de votre site. Pour se faire, il vous suffit de cliquer sur le bouton du
même nom, situé en premier sur le panneau de contrôle. Une série de contrôles automatiques
(figure 11.6) vont alors être effectués.
À la fin des contrôles, il vous sera proposé de lancer de suite une sauvegarde au moyen
du bouton bleu Sauvegarder (figure 11.7). Une nouvelle étape s’affichera à vous, permettant
de spécifier un profil et une description courte et un commentaire de la sauvegarde à effectuer.
Cliquer sur le nouveau bouton Sauvegarder pour démarrer.
La sauvegarde va alors commencer et peut prendre plusieurs minutes. Prenez soin de laisser
terminer les opérations en cours (figure 11.8). Ne refermez pas votre navigateur et ne quittez

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 188 — #212
✐ ✐

188 Chapitre 11. Gérer les composants

pas la page en cours, sous peine de ne pas terminer la sauvegarde. Vos données n’encourront
aucun risque, mais la sauvegarde ne sera pas effectuée.

Figure 11.6 — configuration automatique d’Akeeba Backup

Figure 11.7 — Lancement d’une sauvegarde

La sauvegarde une fois terminée, il vous sera possible, soit de consulter le rapport de
sauvegarde, soit de vous rendre dans la gestion des sauvegardes que vous pouvez également
retrouver depuis le panneau de contrôle (figure 11.9).
La sauvegarde de vos données est essentielle. Prenez le temps de réaliser celles-ci à intervalles
réguliers surtout si vous n’êtes pas seul aux commandes du contenu de votre site. Ceci vous
assurera tranquillité et pérennité.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 189 — #213
✐ ✐

11.11 Cas pratique 189

Figure 11.8 — Sauvegarde en cours d’exécution

Figure 11.9 — Gestion des sauvegardes

En résumé
Vous l’aurez constaté, Joomla! est un moteur de site web extrêmement bien conçu auquel il est
possible d’ajouter quantité de composants, pouvant vous aider dans votre gestion au quotidien,
faciliter la vie de vos utilisateurs et également modifier le sens premier du site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 190 — #214
✐ ✐

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 191 — #215
✐ ✐

QUATRIÈME PARTIE

Booster
votre Joomla!

Modeler votre site selon vos désirs


Le chapitre précédent nous a permis d’aborder la modularité dont Joomla! fait preuve. Pour
autant nous ne sommes pas au bout de ses capacités. Les possibilités d’extensions sont
nombreuses et fortes d’une communauté l’enrichissant jour après jour.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 192 — #216
✐ ✐

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 193 — #217
✐ ✐

12
Gérer les templates

Objectif
Littéralement, « template » prononcé templète, signifie « modèle » ou bien encore « gabarit ».
Dans le cas d’une charte graphique le mot template, bien qu’étant un anglicisme persistant, est
bien souvent conservé et désigne l’habillage, le « look » du site. Voyons maintenant comment
nous pouvons, grâce à eux, donner à notre site du caractère, une personnalité, bien à lui.

12.1 HABILLER SON SITE

Le template va définir le placement des modules et du contenu à l’écran, les images à utiliser,
ainsi que le jeu de couleurs et de styles à appliquer aux fonds, aux polices de caractères et aux
divers éléments de structure et de présentation.
Deux types de templates existent, celui du site, relatif à sa présentation, comme nous venons
de l’évoquer, mais également le template d’administration, qui, lui, permet l’affichage des
modules de gestion du site.
Vous trouverez bien évidemment des templates fournis par défaut dans Joomla!, mais
vous pourrez également en trouver de nombreux autres, gratuits ou payants, sur Internet. Le
template donne son attrait et sa personnalité à votre site, on attachera ainsi une importance
toute particulière à le choisir ou à le personnaliser.

Rappel pratique : si vous changez de template, les contenus restent les mêmes : c’est
seulement l’« emballage » qui change. Imaginez une voiture avec un moteur (le noyau
Joomla!), des options (les extensions que vous avez installées) et une carrosserie (votre
template). À chaque fois que vous installez un nouveau template, vous l’avez à disposition
dans votre garage virtuel. À chaque fois que vous le définissez par défaut, vous changez de
carrosserie ou de couleur, en appuyant simplement sur un bouton.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 194 — #218
✐ ✐

194 Chapitre 12. Gérer les templates

Ergonomie visuelle
Bien que ce ne soit pas l’objet de ce livre, nous vous livrons ici quelques règles et pistes de
réflexions si vous décidez de réaliser votre template vous-même.

Pourquoi ?
Parce que certains éléments sont suffisamment communs et donc attendus à certaines positions.
On appelle cela une convention ou un standard. Par exemple, vous trouverez toujours un logo
en haut à gauche, un moteur de recherche dans la partie haute de la page, et en bas tout ce
qui concerne les mentions légales, le plan du site et le copyright.
Ne confondez surtout pas respect des conventions et charte graphique banale. Vous pouvez
tout à fait avoir un design innovant et créatif en incluant simplement les conventions aux endroits
attendus par vos visiteurs.

Eyetracking
L’eyetracking (que l’on peut traduire par oculométrie) est une technique très sophistiquée utilisée
par des bureaux d’études du Web qui consiste à suivre et à enregistrer les mouvements oculaires
d’internautes lorsqu’ils naviguent sur certains sites.
Un écran spécifique, l’eye tracker, équipé d’un capteur invisible (lumière infrarouge
inoffensive pour l’œil) enregistre les déplacements de l’œil de l’utilisateur testeur. En analysant
le temps passé par les yeux sur un élément donné, on peut déterminer quels sont les points de
focalisation de l’utilisateur sur un site. Soigner l’aspect visuel du site prend dans ce cas toute son
importance.

Règles photographiques des tiers


La règle des tiers est l’une des premières règles à connaître pour tout photographe amateur.
Elle peut s’appliquer à toute création graphique : photo, dessin, peinture, charte graphique,
décoration d’intérieur. Cette règle dit que notre regard est attiré par les points d’intersections de
lignes imaginaires tracées aux tiers haut, bas, gauche et droit de l’image. C’est l’une des raisons
pour laquelle, lorsque l’on réalise un portrait, le sujet ne doit jamais être au centre (figure 12.1).

Figure 12.1 — Règle des tiers

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 195 — #219
✐ ✐

12.1 Habiller son site 195

Comment ?
Lorsque vous concevez votre charte graphique, commencez par prendre une feuille, un crayon et
positionnez sur le papier vos éléments principaux. N’oubliez pas de faire deux croquis séparés,
un pour la page d’accueil qui à sa propre ergonomie, un autre pour la navigation au sein du
site. Posez votre bandeau supérieur (header), votre menu, votre logo, un espace où afficher le fil
d’Ariane (breadcrumbs), votre pied de page (footer) et l’emplacement de votre contenu.
Tracez ensuite des traits à chaque tiers haut et bas, gauche et droit de votre charte graphique
et regardez si les éléments que vous voulez valoriser se distinguent selon la règle énoncée
ci-dessus.

Positionner votre logo en haut et à gauche


Pourquoi votre logo doit-il être situé en haut et à gauche de votre site ? Tout d’abord parce que
c’est une convention. Sur la majorité des sites Web, le logo est placé à cet endroit. Et c’est une
convention parce que nous lisons de gauche à droite et de haut en bas, c’est aussi simple que
cela. Cela signifie qu’il s’agit du premier élément que notre œil perçoit sur un site.

Liens pub signalés


Si vous désirez monétiser votre trafic en insérant des publicités, veillez à les signaler par le plus
simple des messages, comme par exemple « liens commerciaux ». Il n’y a rien de plus agaçant
lorsque l’on visite un site de s’apercevoir que ce qui est « recommandé » par le ou les auteur(s)
est en fait une bannière générée automatiquement. Nous vous recommandons également de
cibler le contenu de vos publicités pour qu’elles soient en adéquation avec votre propre contenu.

Vocabulaire
Comme pour l’emplacement d’éléments graphiques, il existe un vocabulaire attendu. On parle
de page d’accueil et donc d’un bouton ou lien « accueil », de moteur de recherche, de « panier »,
etc. Ce qui ne vous empêche pas bien entendu d’utiliser le vocabulaire propre à vos métiers, à
votre secteur.

Iconographie
Depuis les débuts de l’e-commerce, vous êtes habitué à voir un petit caddy de supermarché
représenter votre panier d’achat, utilisez-le vous aussi, c’est une convention. De même, de
nombreux programmes proposent toujours un pictogramme aux allures de disquettes pour la
fonction « enregistrer », bien que les ordinateurs ne possèdent plus depuis longtemps de lecteurs
de sauvegarde. Le principe de l’iconographie est de véhiculer un symbole facilement identifiable,
comme une maison pour la page d’accueil.

Un design adaptatif
Aujourd’hui, Joomla! est devenu mobile, on parle de « responsive design » autrement dit de
design adaptatif. Vous aurez très certainement eu la désagréable expérience de naviguer sur
des sites qui ne se redimensionnent pas lors que vous naviguez avec votre smartphone ou votre
tablette, vous obligeant à agrandir certaines parties de l’écran pour que le contenu devienne
enfin lisible.
Ceci est dû à un manque d’adaptation du site web au mode de navigation utilisé par le
visiteur. En cela, Joomla! ne vous occasionnera pas de problème, le contenu ainsi que la mise
en page s’adaptent automatiquement. On parle alors de design adaptatif (figure 12.2).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 196 — #220
✐ ✐

196 Chapitre 12. Gérer les templates

Figure 12.2 — Adaptation du design

Un template, plusieurs styles


Vous souhaitez par exemple associer un template à deux éléments de menus, mais en faisant
en sorte que chaque lien aboutisse vers une page ayant une couleur de fond différente. Avec
Joomla!, vous pouvez attribuer un ou plusieurs styles à un même template, ce qui simplifie
grandement la modification d’apparence de votre site.

12.2 CHANGER LE TEMPLATE DU SITE

Rendez-vous dès à présent dans le menu Extensions / Gestion des templates. Le premier élément
du menu gauche se nomme Styles (figure 12.3).

Figure 12.3 — Gestion des styles

C’est ici que vous pouvez modifier l’apparence du site, en choisissant quel template afficher.
Qui plus est, certains templates sont proposés plusieurs fois lorsque des styles différents sont
disponibles pour un même template.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 197 — #221
✐ ✐

12.2 Changer le template du site 197

Des options de filtrage sont à votre disposition, avec notamment la possibilité de filtrer les
templates dédiés au site ou à l’administration.

Définir un template par défaut


Deux façons permettent de définir un template par défaut. La plus simple consiste à cliquer sur le
petit bouton muni d’une étoile à droite du nom du template désiré (colonne Défaut), la seconde
consiste à sélectionner le template à l’aide de la petite coche à gauche de son nom puis de
cliquer sur le bouton Défaut dans la barre de boutons d’action. Le template sera alors utilisé
pour l’affichage de toutes les pages du site.

Assigner un template
Une autre manière consiste à définir une assignation ciblée. En effet, on souhaitera parfois
afficher un style de template différent selon l’endroit du site où se trouve le visiteur, changer une
couleur de fond, modifier un style d’écriture ou de présentation des modules. On « assignera »
alors aux pages souhaitées, un template différent de celui par défaut.
Pour cela, cliquez sur le titre du template à assigner, ce qui aura pour effet d’afficher le détail
par onglets des options disponibles pour ce template (figure 12.4).

Figure 12.4 — Assignation de templates

Trois onglets seront alors à votre disposition. En mettant de côté l’onglet détails qui ne
regroupe que l’affectation par défaut, l’onglet Paramètres avancés vous permettra de faire des
réglages fins, sur les largeurs de colonnes par exemple, logos et styles du template. À noter que
ces possibilités varieront d’un template à l’autre en fonction de la flexibilité que l’auteur aura
souhaité mettre à disposition.
Le troisième onglet, Affecter à un menu, vous amènera à sélectionner quelles parties du site
utiliseront – elles, et elles seules – le template en question (figure 12.5). Il ne vous restera plus
qu’à Enregistrer & Fermer vos modifications.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 198 — #222
✐ ✐

198 Chapitre 12. Gérer les templates

Figure 12.5 — Affecter à un menu

De retour à l’écran précédent, vous constaterez que le template sélectionné est maintenant
pourvu d’une coche verte dans la colonne « Assigné ».

Modification d’un template

Attention ! La modification d’un template requiert des connaissances en langages PHP,


HTML et CSS. Toute modification hasardeuse peut entraîner des problèmes d’affichage ou de
fonctionnement du site. Il est par conséquent recommandé la plus grande prudence lors de
ces manipulations.

Détails et aperçu
Depuis le gestionnaire de templates, le second élément de menu situé sur la gauche, lui-
même appelé Templates, vous donne accès à certaines informations sur les templates installés
(figure 12.6).
Vous avez ainsi sous les yeux la liste des templates disponibles, avec la possibilité de les trier
par nom et par emplacement (Site ou Administration).
Vous disposez d’information sur leurs versions ainsi que leurs auteurs respectifs. Une vignette
de présentation sera également à disposition afin d’identifier plus facilement le visuel de chaque
template. Pour certains, il est possible, par un simple clic sur la vignette, d’obtenir une vue
agrandie de celle-ci.
Il sera par ailleurs possible, une fois l’option activée (voir Prévisualisation et sécurité un
peu plus loin), de prévisualiser les placements de modules dans le template sans avoir besoin
d’activer ce dernier sur le site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 199 — #223
✐ ✐

12.2 Changer le template du site 199

Figure 12.6 — Détail des templates installés

Modification des fichiers


Un lien nommé « –nom du template– Détails et fichiers » vous permet d’accéder à l’édition des
fichiers composant le template. Ceux-ci sont définissables selon deux catégories :
Fichiers maîtres : il s’agit ici des fichiers HTML/PHP définissant la structure d’affichage des
éléments du site. À noter que plusieurs modèles sont disponibles à la modification, celui de la
page principale, de la page d’erreur et d’impression.
Feuilles de styles : ce sont les fichiers CSS qui contiennent les styles pour les éléments
graphiques et la mise en forme.

L’ensemble des fichiers composant le template vous sont accessibles grâce à une vue sous
forme d’arborescence sur le côté gauche de l’écran. Nous ne saurions vous conseiller de
n’éditer un fichier que si vous savez ce que vous faites, sans quoi vous risquez de rendre votre
template, et donc votre site, inopérant.

Il suffit de cliquer sur l’un des fichiers en liens pour pouvoir accéder aux écrans de
modification (figure 12.7).

Prévisualisation et sécurité
Comme dans les autres parties de l’administration, un bouton Paramètres est à disposition dans
la barre de boutons d’action du Gestionnaire de templates.
Ce bouton donne accès à deux onglets, dont celui des droits, déjà bien connu. Le premier
onglet permet quant à lui d’obtenir la fonction de prévisualisation des positionnements de
templates.
Cette fonction, une fois activée et enregistrée (bouton Enregistrer & Fermer), permet de
cliquer sur le lien de « Prévisualisation » soit sous chacun des noms de templates (figure 12.8)
depuis l’onglet Templates, soit depuis l’onglet Styles, grâce à l’icône d’un œil situé à gauche de
chaque titre.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 200 — #224
✐ ✐

200 Chapitre 12. Gérer les templates

Figure 12.7 — Modification d’une feuille de styles

Figure 12.8 — Option Prévisualisation des positions dans le template

Très pratique, elle permet d’obtenir un affichage du template sélectionné, avec des
informations sur les positions de modules disponibles (figure 12.9).

Astuce : cet affichage s’avère très utile lors de modifications de templates, mais également lors de
l’ajout de nouveaux modules au site, afin de se faire une idée précise de leur futur emplacement.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 201 — #225
✐ ✐

12.3 Cas pratique 201

Figure 12.9 — Position des modules dans du template Protostar

12.3 CAS PRATIQUE

Mise en œuvre d’un nouveau template : Joomspirit_76


Afin de vous donner un exemple pratique de mise en place nous avons fait appel à Nicolas
Lemarinier, basé à Perpignan, graphiste spécialisé dans la création de template depuis plusieurs
années, il est aujourd’hui le gérant de la société JoomSpirit (http://www.template-joomspirit.com)
« J’ai commencé par créer des sites en utilisant Joomla! pour des clients. Mais j’avais du mal
à trouver des designs adaptés pour un site de quelques pages. JoomSpirit est alors né avec cette
vocation : proposer des templates épurés et originaux. L’objectif étant d’obtenir un site élégant
avec une photo et deux paragraphes... C’est ce que je recherchais pour mes clients et ce que je
propose aujourd’hui. »

Conseil de pro : commencez toujours avec un modèle gratuit pour vous familiariser avec Joomla!
et les possibilités des templates. Vous allez rapidement découvrir les choix et les contraintes qui
s’offrent à vous (mise en page, thèmes de couleur, nombre de positions de modules). Vous pourrez
alors conserver votre modèle ou en chercher un autre qui répond mieux à vos besoins.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 202 — #226
✐ ✐

202 Chapitre 12. Gérer les templates

Installation du template
Depuis le site http://www.template-joomspirit.com, commencez par récupérer puis décompresser
l’archive joomspirit76_unzip_first.zip. Celle-ci contient les éléments nécessaires à l’installation à
la fois pour PC et pour Mac, ainsi que le manuel détaillé d’installation.
Depuis le menu Extensions / Gestion des extensions, effectuer l’installation en
allant rechercher le fichier joomspirit_76.zip sur votre disque dur (chemin local +
/joomspirit76_unzip_first/Joomla 3.X), puis cliquez sur le bouton Envoyer & installer
(figure 12.10).
Après installation, un commentaire vous invitera à consulter le manuel de configuration fourni
avec l’archive téléchargée, une configuration que nous allons effectuer ensemble à présent.

Figure 12.10 — Installation du template

Paramètres du template
Tout d’abord, nous allons activer le template et le définir par défaut. Pour cela, rendez-vous dans
le menu Extensions / Gestion des templates.
Un nouveau template nommé joomspirit_76 - Par défaut est maintenant à votre disposition.
Cliquez sur le petit bouton muni d’une étoile à droite du titre pour l’activer par défaut sur votre
site.
En cliquant sur le titre du template vous accéderez aux options, tel que nous l’avons vu
précédemment. Vous pourrez alors aisément paramétrer la largeur d’affichage du site, des
colonnes, ou encore les couleurs par défaut, comme celle de fond notamment. Nous choisirons
ici le fond blanc dans l’onglet Détails (General background theme : White).
Pour les besoins de la configuration du template, nous allons à présent faire une incursion
rapide dans l’univers du chapitre suivant, à savoir, celui des modules.

Le menu haut
Rendez-vous dans le menu Extensions / Gestion des modules. Sur la partie gauche de l’écran,
choisissez de filtrer sur le type Menu, repérez ensuite le module nommé Menu Haut. Cliquez sur
son titre pour le modifier.
Depuis le premier onglet Module, une des options concerne la position du module à l’écran.
Dans la liste déroulante proposée, sélectionnez la position Menu dans la section dédiée au
template JoomSpirit_76. Une fois la position définie, choisissez juste au-dessus de Masquer le
titre du menu (figure 12.11).
Dans le même onglet, activez l’option Afficher tous les liens en cliquant sur le bouton Oui
qui passera alors au vert.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 203 — #227
✐ ✐

12.3 Cas pratique 203

Figure 12.11 — Position du menu

Dans le quatrième onglet Paramètres avancés, modifiez la valeur de Suffixe de classe CSS
pour « dropdown » signifiant : liste de choix (figure 12.12). Ce réglage mettra alors vos éléments
de menu en valeur en modifiant leur style d’affichage.

Figure 12.12 — Style de classe du menu

On prendra enfin soin dans le second onglet Assignation des menus de vérifier que le menu
est assigné à toutes les pages, le modifier en ce sens si besoin. Cliquez sur Enregistrer & Fermer
pour sauvegarder les modifications.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 204 — #228
✐ ✐

204 Chapitre 12. Gérer les templates

Afficher votre logo


Toujours depuis le Gestionnaire de modules, cliquez sur le bouton Nouveau depuis la barre
d’action.

Figure 12.13 — Positionnement du logo

Lors du choix de type de module à créer, sélectionnez Contenu personnalisé. Dans l’écran
suivant, donnez un titre au module, par exemple « Mon logo », masquez le titre du module, et
sa position au sein du template JoomSpirit_76 en sélectionnant Logo dans la liste proposée
(figure 12.13).
Puis rendez-vous dans l’onglet Personnaliser le contenu et insérez une image en guise de
logo au moyen de l’éditeur de contenu. Pour les besoins de notre exemple, et si vous ne disposez
pas encore de votre propre logo, vous pouvez insérer un des logos Joomla! fournis par défaut
au moyen du chemin suivant : images/joomla_logo_black.jpg (figure 12.14).
Enregistrez votre nouveau module en cliquant sur le bouton Enregistrer & Fermer. Rendez-
vous maintenant sur la page d’accueil de votre site pour vérifier le résultat obtenu (figure 12.15).

Pour aller plus loin avec JoomSpirit_76


Nous avons vu qu’il est relativement simple et rapide de mettre en place un nouveau template.
Après activation, il suffit de positionner les différents modules et éventuellement d’en créer et
positionner de nouveaux. Pour ceux qui souhaiteraient aller plus loin, voici quelques conseils.
Tout d’abord, au niveau du template lui-même. Si vous allez fureter dans les options du
template, vous verrez que nous avons utilisé les styles et couleurs de fond par défaut. Le template
est ainsi pourvu d’un thème sombre, mais dispose également d’un thème clair. Vous aurez en

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 205 — #229
✐ ✐

12.3 Cas pratique 205

Figure 12.14 — Insertion de l’image du logo

Figure 12.15 — JoomSpirit_76 en situation

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 206 — #230
✐ ✐

206 Chapitre 12. Gérer les templates

outre la possibilité de choisir d’autres polices de caractères, ceci permettant de donner un style
plus personnel à votre site.
Ensuite sur le paramétrage des modules, nous avons vu que leurs positions peuvent être
déterminantes pour l’attractivité même du contenu (Eyetracking et règle des tiers). Le template
JoomSpirit_76 vous permet d’affiner certains réglages graphiques au moyen du suffixe de classe
CSS.
Par défaut, le fond et le contour des modules sont transparents. Mais vous pouvez modifier
chacun d’eux en ajoutant un suffixe de classe particulier :
• link : pour mettre en valeur une liste de liens ;
• border : pour ajouter une bordure autour du module ;
• grey : pour assombrir le fond du module ;
• light : pour au contraire éclaircir le fond du module.

De même, plusieurs positions de menus s’offrent à vous, eux-mêmes agrémentés de suffixes


de classe CSS en vue de mettre en valeur un peu plus encore vos éléments :
• position menu pour votre menu principal ou menu haut, avec suffixe de classe dropdown
comme utilisé plus haut,
• position top_menu ou bottom_menu pour un menu secondaire en haut ou en bas du site,
• position left ou right pour un menu secondaire vertical, avec suffixe de classe submenu,
• position top, bottom ou user pour des menus secondaires horizontaux, avec suffixe de
classe content_menu.

Ceux-ci ne sont que quelques exemples de ce que peut offrir ce template en particulier.
Pour retrouver l’intégralité des possibilités, reportez-vous au manuel complet, livré avec l’archive
initiale. N’hésitez pas à vous rendre sur le site de l’auteur pour profiter d’une gamme de
templates encore plus étoffée.

En résumé
Plus qu’une carte de visite, l’aspect visuel de votre site se doit d’être votre empreinte, celle qui
va marquer, ou non, le visiteur. Tel un savant mélange, si celle-ci est trop marquée ou trop
fade, votre contenu aura du mal à ressortir.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 207 — #231
✐ ✐

13
Gérer les modules

Objectif
Avoir du contenu c’est bien, un site au design attrayant c’est encore mieux. Mais si la disposition
de ce contenu n’est pas réfléchie de manière à attiser la curiosité de vos visiteurs, leur intérêt
s’en trouvera diminué.
Vous allez passer du temps dans la gestion des modules, alors attardons-nous sur eux pour
vous aider à bien comprendre leur fonctionnement.

13.1 LES MODULES DANS TOUS LEURS ÉTATS


Les modules ont un but précis : afficher du contenu à l’endroit que vous aurez décidé. Ce contenu
à afficher sera le plus souvent issu de votre site, et qui plus est, de l’un de vos composants ;
néanmoins, les modules sont à même de prendre en charge du contenu externe, tels que des
publicités, des données météo, ou même l’affichage d’un autre site Web au sein de votre site.
De la même manière, vos menus ont été créés, puis affectés à un module, lui-même s’étant
vu assigner une position (à gauche, en haut, à droite...). C’est de cette manière que vous placerez,
par exemple, un formulaire de connexion à côté d’un menu, des bannières commerciales en
en-tête, ou bien des flux d’actualités en bas de page.

Le gestionnaire de module
Un module présente un contenu qui s’affiche dans une page selon un emplacement et des règles
que vous avez définis.
Les règles sont immuables. En revanche, les emplacements, eux, sont variables. Il existe des
emplacements standards, ceux que l’on retrouve généralement dans tous les templates Joomla!,
mais vous pouvez très bien créer vos propres emplacements ; et un webdesigner créant un
template peut en prévoir une centaine s’il le désire. Vous courez toutefois un risque dans le cas

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 208 — #232
✐ ✐

208 Chapitre 13. Gérer les modules

de figure où vous décidiez de changer de template et que le nouveau ne propose pas les mêmes
emplacements...
Si par exemple vous publiez votre module de login (module qui permet aux utilisateurs de
votre site de s’authentifier) à la position « ma_position_a_moi » et que vous installez un nouveau
template dans lequel cette position ne serait pas définie, personne ne sera en mesure de voir
votre module de login... gênant non ?
Un même module peut être créé plusieurs fois, c’est-à-dire que vous pouvez par exemple
avoir deux modules « mes_5_derniers_articles ». Chacun de ces modules a la propriété de n’être
visible que sur certaines pages et d’afficher les 5 derniers articles d’une catégorie donnée. Le
premier module, positionné en haut à gauche de la page d’accueil uniquement ; le second,
positionné en bas à droite sur toutes les pages, sauf sur la page d’accueil. Vous disposez ainsi
de deux modules bien distincts.
Plusieurs modules peuvent avoir la même position. Si vous avez par exemple une colonne
sur la partie gauche de votre site, vous pouvez choisir d’afficher votre menu et la liste des 5
derniers articles sur la position « gauche ». Pour savoir lequel s’affichera en premier, vous pouvez
définir un ordre (figure 13.1) en triant tout d’abord sur l’ordre au moyen des deux petites flèches
verticales à gauche de la colonne statut, puis en effectuant un glisser déplacer au moyen des
trois petits carrés verticaux du module souhaité.

Figure 13.1 — Ordre des modules

La liste des modules


La recherche interne située en haut de la liste vous permet de lancer la recherche d’un module
par son titre.
Sur la gauche, une série de filtres permet de restreindre la liste des modules sur différents
critères. S’agit-il d’un module présent sur le site ou dans l’administration ? Est-il actif, inactif, mis
à la corbeille ? Quelle est sa position ? Quel est le type du module ? Est-il accessible à tous, aux
seuls membres, à un groupe en particulier ? Quelle est sa langue d’affichage ?
Dans la liste, les en-têtes des différentes colonnes sont cliquables, ce qui vous permet de
trier la liste en fonction de l’ordre, du statut de publication (icône verte ou rouge), du titre, de la
position, du type de module, du type de pages, du niveau d’accès, de la langue et de l’identifiant.
Un premier clic sur le « titre » classera les modules par ordre alphabétique, un second par ordre
alphabétique inversé.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 209 — #233
✐ ✐

13.2 Les modules par défaut du site 209

Visibilité d’un module


La visibilité d’un module implique deux aspects complémentaires : d’un côté il y a les droits (je
vois ce module parce que j’en ai le droit) et de l’autre, il y a les emplacements de publication
(je vois ce module parce que je visite une page sur laquelle il s’affiche). Il faut bien faire la
différence entre les deux.
Un module peut donc être affiché sur certaines pages uniquement et être en accès public
(visible de tous), réservé aux membres (il faut s’authentifier sur le site pour voir le module) ou
réservé à un groupe particulier (il faut également s’authentifier pour y avoir accès). Par exemple,
le menu Membre (voir étape 8.5) ne sera visible sur toutes les pages qu’une fois que vous vous
serez identifié : il s’agit d’un module à accès restreint.

Astuce : si un module apparaît « publié » dans l’administration mais que vous n’arrivez pas à le voir
sur le site, vérifiez ses paramètres d’affichage. Cliquez pour cela sur le titre du module dans la liste et
regardez dans l’onglet Assignation des menus : peut-être n’est-il visible que sur la page d’accueil ?
Modifiez les paramètres, enregistrez et rafraîchissez la page du site.

Les positions
Voici le cœur de cible des modules : la position de vos contenus dans la page.
Lorsque vous faites vos courses au supermarché, vous remarquerez que les produits mis en
avant font l’objet d’une signalétique et d’un positionnement particulier dans le rayon, le plus
souvent à hauteur de vos yeux pour être plus facilement repérables. Il s’agit ici de faire de même.
Un contenu important, un menu, un fil d’actualité, se doivent d’être visibles au premier coup
d’œil.
S’agissant le plus souvent de positions standards définies pour l’ensemble des templates en
circulation, bon nombre de noms de positions sont à consonances anglaises. Ne soyez donc pas
surpris de trouver des positions left (gauche), right (droite), top (haut) ou encore footer (pied de
page). En dehors de ces quelques exemples, les positions que vous affecterez seront définies par
le template que vous choisirez.

Un mot sur la sécurité


Les modules touchant de près aussi bien la présentation que le contenu visible d’un site, on
prendra un soin particulier à définir les droits des utilisateurs capables de gérer les modules. Le
réglage des droits est, comme à l’accoutumée, disponible par le biais du bouton Paramètres
situé dans la barre d’action.

13.2 LES MODULES PAR DÉFAUT DU SITE

Chaque module comporte un certain nombre de paramètres à renseigner. Certains paramètres


sont communs à tous les types de modules, alors que d’autres seront spécifiques, selon la
fonction propre du module. Depuis la Gestion des modules, assurez-vous tout d’abord de filtrer
les modules « Sites », puis cliquez sur l’un des titres parmi ceux affichés.
Vous retrouverez dans la définition de chaque module un onglet du même nom, Module,
vous permettant de définir :
• le titre,
• l’affichage ou non du titre,

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 210 — #234
✐ ✐

210 Chapitre 13. Gérer les modules

• la position,
• le statut de publication,
• la période de publication éventuelle,
• le niveau d’accès,
• un ordre pour l’affichage au sein de la position,
• la langue d’affichage,
• une note descriptive, optionnelle.

Le second onglet, Assignation des menus, permettant l’assignation du module – c’est-à-dire


sur quelles pages ou parties du site ce module doit s’afficher – vous sera proposé. Vous pouvez
ainsi choisir d’afficher certains contenus uniquement, en fonction de l’endroit visité ou bien sur
l’ensemble du site.
Cet onglet vous propose l’ensemble des liens de chacun des menus créés et disponibles à
ce jour. Si vous choisissez un affichage du module pour certaines pages seulement, il faudra
notamment veiller à revoir ces assignations en cas de modifications dans les menus concernés.
Si de nouveaux éléments étaient ajoutés aux menus, de nouvelles assignations seraient à ajouter
pour le module, sans quoi ce dernier ne serait pas affiché pour les nouveaux éléments de menus.
En dehors de l’onglet Paramètres avancés, permettant de définir quelques paramètres,
notamment de définition CSS et de cache, nous allons nous focaliser désormais sur l’onglet
Paramètres de base, qui, suivant le type de module choisi, définit la fonction propre à ce dernier.
Voyons maintenant ces options selon les différents types de modules « Sites » existants.

Affichage en liste d’articles


Ce module permet d’afficher une liste d’articles en fonction d’une catégorie spécifiée. Ce module
est par ailleurs muni d’un nombre de paramètres conséquent que nous allons détailler par onglet.
Module : vous permet de déterminer si le mode d’affichage est normal ou dynamique. Le
mode normal vous permet de configurer vous-même la liste des articles proposés par la liste
affichée. Le mode dynamique constituera de lui-même la liste des articles affichés.
Mode dynamique : en mode dynamique, si l’option permettant d’afficher « En page
d’articles » est désactivée et si la page actuelle du site affiche un des articles de la liste prévue,
celle-ci ne sera pas affichée.
Options de filtrage : il est possible d’appliquer différents filtres sur la liste d’articles
proposés. On pourra notamment :
• choisir d’afficher un nombre limité d’articles classiques, « en vedette » uniquement ou
bien les deux ;
• sélectionner une ou plusieurs catégories (par multiples sélections) et choisir de les inclure
ou au contraire de les exclure, ainsi que les sous-catégories, de la liste à afficher ;
• filtrer sur un ou plusieurs auteurs ou leurs pseudonymes, de manière à les inclure ou les
exclure selon le choix effectué dans la liste proposée ;
• filtrer des articles à exclure en fonction de leurs identifiants dans la base, si vous les
connaissez ;
• filtrer par intervalle de date, ou date relative. Le filtrage par date relative consiste à
préciser ou imposer un nombre de jour maximum dans la sélection des articles pris en
compte. On pourra ainsi choisir de n’afficher que les articles créés, modifiés ou publiés
ces 30 derniers jours.

Ordre d’affichage : il s’agit ici de définir l’ordre de tri des articles.


Options de regroupement : on peut également choisir de regrouper certaines publica-
tions, en fonction de leur date, catégorie ou de leur auteur notamment.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 211 — #235
✐ ✐

13.2 Les modules par défaut du site 211

Options d’affichage : enfin, les options d’affichage, plus classiques, agissent sur certains
paramètres de présentation des articles (figure 13.2) :
• Liens sur titres, permettant de placer un lien vers l’article depuis son titre ;
• l’affichage ou non de la date de création, modification ou publication dans un format
spécifié ;
• l’affichage du nom de la catégorie, du nombre de requêtes (nombre de clics sur l’article),
de son auteur, du texte d’introduction pour lequel on fixera le nombre limite de caractères
affichés, ainsi que du titre de l’article pouvant également servir de lien direct vers ce
dernier.

Figure 13.2 — Options d’affichage d’une liste d’articles

Affichage en liste de catégories


Ce module permet d’afficher une liste de catégories à partir d’une catégorie parente
(figure 13.3).
Catégorie parente : sélectionne la catégorie initiale devant être affichée.
Descriptions : affiche la description éventuelle pour les catégories affichées.
Sous-catégories : affiche les sous-catégories affiliées à la catégorie parente.
Nombre de catégories : permet de limiter le nombre de catégories de premier niveau
affiché. Par défaut, toutes sont affichées.
Niveau de catégories : définit le nombre maximum de catégories enfant à afficher. Par
défaut, l’ensemble des catégories trouvées sera affiché.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 212 — #236
✐ ✐

212 Chapitre 13. Gérer les modules

Figure 13.3 — Paramètres de base en liste de catégories

Articles archivés
Ce module affiche la liste des articles archivés sous forme d’un calendrier mensuel. Lorsqu’un
utilisateur clique sur l’intitulé d’un mois, une liste d’articles pour cette période est alors proposée.
Nombre par mois : Nombre d’éléments affichés par défaut.

Articles en relation
Ce module permet d’afficher une liste d’articles en rapport avec un article actuellement affiché
sur la page. Une recherche est effectuée parmi les mots-clefs (métadonnées) saisis dans l’article
affiché et ceux des autres articles du site. Si des recoupements existent, les articles trouvés sont
ajoutés à la liste. Les seuls paramètres de base disponibles consistent à afficher ou non la date
des articles ainsi que leur nombre.

Articles les plus consultés


Ce module affiche une liste composée des articles les plus visités sur votre site.
Catégorie : permet de limiter la liste à une ou plusieurs catégories d’articles sélectionnées.
Si aucune sélection n’est effectuée, toutes les catégories sont prises en compte.
Nombre : définit le nombre maximum d’articles pour la liste affichée.
Articles en vedette : affiche les articles « en vedette » parmi les articles les plus lus.

Bannières
Ce module, en relation directe avec le composant du même nom, permet l’affichage des
bannières préalablement sélectionnées (figure 13.4). Lors d’un clic sur l’une des bannières
affichées, le visiteur est alors redirigé vers le site annonceur.
Cible : lors de la redirection, définit le mode d’ouverture du lien : Ouvrir dans la fenêtre
parente (remplace la page actuelle), Ouvrir dans une nouvelle fenêtre, Ouvrir dans une fenêtre
popup (sans boutons ni menus).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 213 — #237
✐ ✐

13.2 Les modules par défaut du site 213

Figure 13.4 — Paramètres de base des bannières

Nombre : nombre de bannières affichées.


Client : sélectionne le client annonceur dont les bannières seront affichées par le module.
Catégorie : sélectionne la catégorie de bannières à afficher.
Sélection selon mots-clés : permet de cibler la bannière à afficher en fonction des
mots-clés définis pour la bannière et ceux du contenu actuellement affiché sur la page.
Ordre d’affichage : définit l’ordre d’affichage des bannières, soit trié, soit de manière
aléatoire. Les bannières « épinglées » (voir étape 11.1) resteront prioritaires lors de l’affichage.
Texte d’en-tête / Texte de pied de page : affiche un texte d’en-tête/de pied de page
permettant une présentation ou une description des bannières proposées.

Changement de langue
C’est l’un des attraits majeurs de Joomla! : la possibilité d’insérer nativement un module de
sélection de la langue d’affichage des pages, autrefois réservé à des modules tiers. Prendre soin
toutefois d’activer le plugin Système – Filtre de langue pour utiliser pleinement cette fonction.
Texte avant/Texte après : ces cadres permettent de spécifier le texte ou code HTML à
utiliser au-dessus et au-dessous du sélecteur de langue.
Utiliser liste déroulante : si désactivé, permet l’utilisation de drapeaux pour symboliser
la langue à sélectionner.

Connexion
Le module connexion est un peu particulier, car il offre deux affichages. Le premier est celui
permettant à tout utilisateur de se connecter au site, de demander le renvoi de son identifiant,
d’initier la réinitialisation du mot de passe ; et, selon que l’option est active ou non, la possibilité

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 214 — #238
✐ ✐

214 Chapitre 13. Gérer les modules

de demander la création d’un compte. Le second affichage permet, une fois connecté, d’accéder
à la fonction de déconnexion (figure 13.5).

Figure 13.5 — Paramètres du module de connexion

Texte avant : affiche un texte d’introduction à la connexion.


Texte après : permet d’afficher un texte en fin de module, pour d’éventuelles recomman-
dations.
Redirection après connexion : permet de sélectionner la page affichée après la
connexion, par défaut la page d’accueil si aucune sélection n’est effectuée.
Redirection après déconnexion : permet de sélectionner la page affichée après la
déconnexion, par défaut la page d’accueil si aucune sélection n’est effectuée.
Message d’accueil : détermine si le message d’accueil de l’utilisateur est affiché après une
connexion réussie.
Contenu du message : choix de l’affichage du nom réel ou de l’identifiant dans le message
d’accueil de l’utilisateur connecté.
Connexion cryptée : active une transmission sécurisée des informations de connexion.
Cette option requiert de la part de l’hébergement utilisé de pouvoir utiliser le préfixe https://
dédié à ce type de connexion.

Contenu personnalisé
Ce module permet de créer un affichage personnalisé présenté en langage HTML. La saisie se
fait par le biais d’un éditeur de texte, sur la partie gauche de l’écran. À noter, les deux options
présentes dans l’onglet Paramètres :
Plug-ins de contenu : permet d’utiliser les plugins de contenu standard de Joomla!, pour
la mise en page notamment.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 215 — #239
✐ ✐

13.2 Les modules par défaut du site 215

Sélectionner une image de fond : comme son intitulé l’indique, l’image éventuellement
sélectionnée servira de fond au contenu personnalisé inséré.

Copyright de Joomla!
Le module Copyright, plus souvent appelé pied de page, permet d’afficher le copyright de
Joomla!.

Derniers articles
Ce module reprend le principe de celui des articles les plus consultés (voir précédemment) en
affichant une liste composée des articles récemment publiés ou mis à jour.
Catégorie : permet de limiter la liste à une ou plusieurs catégories d’articles sélectionnées.
Si aucune sélection n’est effectuée, toutes les catégories sont prises en compte.
Nombre : définit le nombre maximum d’articles pour la liste affichée.
Articles en vedette : affiche ou non les articles « en vedette » parmi les articles listés,
permet également de restreindre l’affichage à ces seuls articles.
Classement : trie les articles par ordre de création, de modification ou de publication.
Auteurs : filtre les articles selon trois modes : tous les articles, ceux dont vous êtes auteur ou
ayant été modifiés par vous-même, et enfin ceux pour lesquels vous n’êtes ni l’auteur original, ni
l’auteur des modifications.

Derniers inscrits
Ce module affiche la liste des derniers utilisateurs inscrits sur le site.
Nombre d’utilisateurs : Définit le nombre d’utilisateurs à afficher.
Affichage par groupe : effectue un regroupement des utilisateurs en fonction de leur
groupe d’appartenance.

Fenêtre intégrée (iFrame)


Ce module permet d’insérer le contenu d’un autre site Web au sein de l’une des pages de votre
site. Ce procédé utilise ce que l’on appelle un iframe, une zone d’affichage munie de barres de
défilement (figure 13.6).
URL du contenu : vous donnez ici l’adresse URL servant de lien vers la page à afficher
dans le module.
Ajout automatique : permet d’ajouter automatiquement http:// en préfixe de l’adresse
URL, sauf si détecté dans la saisie effectuée.
Barre de défilement : affiche automatiquement des barres de défilement (ascenseurs) si
la page à intégrer est plus grande que la place lui étant assignée.
Largeur/Hauteur : permet de spécifier une valeur en pixels ou en pourcentage pour la
fenêtre d’affichage allouée.
Hauteur automatique : permet d’ajuster automatiquement la hauteur de la page en
fonction du contenu visé, indépendamment de la valeur précisée pour la hauteur d’affichage.
Néanmoins, cette option n’est applicable que lors de l’intégration d’une page de votre propre
site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 216 — #240
✐ ✐

216 Chapitre 13. Gérer les modules

Bordure : affiche une bordure délimitant le cadre d’insertion de la page.


Nom de la cible : permet de spécifier le nom de l’iframe à utiliser.

Figure 13.6 — Paramètre d’intégration de fenêtre

Fil d’actualité RSS/RDF/ATOM


Ce module affiche un fil d’actualité en provenance d’un autre site (figure 13.7).
URL du fil : vous définissez ici le lien source (URL) du fil d’actualité à afficher.
Écriture de droite à gauche : affiche le fil avec un sens d’écriture de droite à gauche ou
de gauche à droite.
Titre : affiche le titre du fil d’actualité ciblé.
Description du fil : affiche la description du fil d’actualité ciblé.
Image du fil : affiche l’image associée au fil d’actualité ciblé.
Nombre d’éléments : définit le nombre d’éléments du fil d’actualité à afficher.
Introduction : affiche la description ou l’introduction de chaque élément du fil affiché. En
règle générale, l’affichage est activé.
Nombre de mots : permet de restreindre la description de chaque élément du fil au
nombre de mots spécifiés. 0 affiche l’intégralité du texte.

Fil de navigation
Le fil de navigation, également appelé fil d’Ariane, tout comme dans la mythologie, permet de
retrouver son chemin, mais cette fois-ci sur votre site. On parlera également de breadcrumbs
(miettes de pain), ce module détaillant le chemin reliant l’accueil du site à la page actuellement

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 217 — #241
✐ ✐

13.2 Les modules par défaut du site 217

Figure 13.7 — Paramètres d’affichage du fil d’actualité

Figure 13.8 — Paramètres du fil de navigation

affichée, sous forme de fil conducteur, comme des miettes de pains que l’on aurait semées
derrière soi (figure 13.8).
Intro « Vous êtes ici » : affiche le texte « Vous êtes ici » en guise d’introduction du chemin
parcouru sur le site.
Page d’accueil : affiche ou non un lien de retour vers l’accueil en début de fil.
Texte de page d’accueil : définit le texte pour le lien d’accueil, généralement Home ou
Accueil.
Dernier élément : présente le dernier lien du chemin de navigation, celui actuellement
affiché.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 218 — #242
✐ ✐

218 Chapitre 13. Gérer les modules

Séparateur de texte : permet de spécifier un séparateur personnalisé, différent de celui


utilisé par défaut.

Flash d’information
À chaque visite de la page, ce module affiche au hasard un ou plusieurs articles choisis au sein
d’une catégorie spécifiée (figure 13.9).
Catégorie : permet de sélectionner une ou plusieurs catégories d’articles à afficher.
Images des articles : affiche les images contenues dans les articles.
Titre des articles : affiche le titre de l’article en cours.
Lien sur les articles : permet de créer un lien sur le titre qui renverra vers l’intégralité de
l’article.
Balise du titre : définit le niveau de titre, au format HTML.
Séparateur : affiche le séparateur après le dernier article de la liste.
Lien ‘Lire la suite...’ : permet l’affichage du bouton afin d’accéder à l’intégralité du texte
de l’article.
Nombre d’articles : nombre d’articles à afficher simultanément.
Ordre de tri : mode de tri de l’affichage : date de publication, date de création, prédéfini
ou aléatoire.
Direction : affiche les articles du premier au dernier, ou inversement.

Figure 13.9 — Paramètres des Flash d’information

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 219 — #243
✐ ✐

13.2 Les modules par défaut du site 219

Image aléatoire
Ce module affiche une image prise au hasard parmi celles d’un répertoire spécifié. Chaque
visite de page conduira à l’affichage d’une image différente. Un lien pourra rediriger les visiteurs
lors d’un clic sur l’image affichée.
Type d’image : définit le format d’image à utiliser (.png, .gif ou .jpg). Par défaut, le format
.jpg est utilisé.
Dossier des images : définit le chemin relatif vers le répertoire où les images sont stockées.
Nous vous conseillons de créer un répertoire spécifique dans lequel vous « rangerez » vos photos.
Par défaut, le lien à spécifier sera de type images/ votre répertoire
Lien : lien URL de redirection lors d’un clic sur l’image.
Largeur (px) / Hauteur (px) : largeur et hauteur de l’image à afficher. Si aucune précision
n’est donnée, l’affichage se fera en fonction des possibilités offertes par le template choisi.

Lien de flux RSS ou ATOM


Ce module constitue un flux d’actualités à partir des articles de votre site.
Afficher le texte : si activé, affiche un texte à côté de l’icône du lien.
Texte de l’élément : définit le texte de lien à afficher.
Format du flux : définit le format utilisé pour le flux.

Liens Web
Ce module affiche une liste de liens Web en fonction d’une catégorie sélectionnée. On pourra
également choisir le mode de redirection des liens.
Catégorie : sélectionne une catégorie de liens à afficher.
Nombre de liens : définit le nombre de liens qui composeront la liste proposée.
Type de tri : permet de trier la liste proposée par titre, classement, nombre de clics.
Sens du tri : sens de tri, croissant ou décroissant.
Fenêtre cible : définit le mode de redirection du lien, soit en remplacement de la page
actuelle, soit dans une nouvelle fenêtre, avec ou sans boutons et barre de navigation (popup).
Suivi des liens : option à destination des robots utilisés par les moteurs de recherche.
Indique si le lien doit être suivi par le moteur de recherche dans sa collecte d’indexation des
liens.
Description : affiche la description des liens Web proposés.
Clics : affiche le nombre de clics effectués sur le lien.
Compter les clics : détermine si le comptage de clics doit être effectué.

Menu
Ce module est sans conteste l’un des plus souvent utilisés. Il sert à afficher les différents menus
de votre site (figure 13.10). On créera ainsi un module pour chacun des menus à afficher.
Menu à afficher : sélectionne le menu à afficher parmi la liste des menus existants.
Base item : constitue l’élément de base de l’affichage du menu. Le module sera alors
affiché sur toutes les pages affichant l’élément sélectionné.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 220 — #244
✐ ✐

220 Chapitre 13. Gérer les modules

Niveau de départ / Dernier niveau : définit les niveaux minimum et maximum des
éléments de menu à afficher, le niveau 1 correspondant à la racine.
Afficher tous les liens : si activé, et suivant le type de menu, standard ou personnalisé
(module additionnel installé), tous les éléments demandés seront alors affichés sous la forme
d’un arbre de liens.

Figure 13.10 — Paramètres du module de menu

Qui est en ligne ?


Ce module affiche le nombre de personnes connectées sur le site en distinguant les simples
visiteurs des utilisateurs enregistrés.
Affichage : définit le type d’information affichée : nombre ou noms des utilisateurs, ou bien
les deux.

Recherche
Nous avons déjà abordé le composant, permettant de recueillir des statistiques sur les recherches
effectuées sur votre site. Son compagnon indispensable, le module de recherche, permet quant
à lui l’affichage du moteur de recherche, avec ou sans critères de sélection.
Deux modes d’affichage se distinguent : un premier mode, selon le template choisi, permettra
d’afficher un champ de saisie ainsi qu’un bouton de recherche ; un second mode, sous forme
d’un lien de menu, permettra d’afficher le module complet de recherche par critères.
Label du champ : définit le titre de la zone de recherche. Si laissé vide, la valeur par défaut
du fichier de langue sera utilisée.
Largeur du champ : il s’agit là de la taille d’affichage de la zone de recherche, en nombre
de caractères.
Texte dans le champ : vous pouvez définir la valeur affichée dans le champ de recherche,
pour définir un exemple. Si laissé vide, la valeur par défaut du fichier de langue sera utilisée.
Bouton de recherche : détermine si le bouton de recherche doit être affiché ou non.
Position du bouton : la position du bouton de recherche, si celui-ci est affiché, peut être
défini par rapport à la zone de saisie (à droite, à gauche, en haut, en bas).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 221 — #245
✐ ✐

13.2 Les modules par défaut du site 221

Image du bouton : une image peut être utilisée pour le bouton de recherche. L’image
devra être nommée searchButton.gif et placée dans le répertoire /images/ du template utilisé.
Texte du bouton : définit le texte du bouton de recherche. Si laissé vide, la valeur par
défaut du fichier de langage sera utilisée.
Découverte automatique OpenSearch : suivant le navigateur de vos visiteurs, le module
de recherche de votre site peut être découvert et utilisé directement depuis la recherche du
navigateur, selon un protocole nommé OpenSearch. Si vous souhaitez proposer cette option à
vos visiteurs, activez-la.
Titre OpenSearch : dans le cadre de l’utilisation d’OpenSearch, vous pouvez spécifier un
titre à votre site en tant que moteur de recherche.
ID de menu : lorsqu’aucun menu n’est défini pour paramétrer l’affichage des résultats de
recherche, il est possible de spécifier un ID parmi les liens de menus existants.

Recherche avancée
Dans le même registre que le module de recherche texte, le module de recherche avancée, dite
indexée, doit être créé et publié pour que celle-ci soit utilisable.
Filtres de recherche : permet de restreindre le champ de recherche au filtre spécifié.
Rendez-vous au chapitre 11 sur les Composants pour de plus amples précisions sur la création
des filtres.
Suggestions de recherche : permet de suggérer des éléments de recherches, soit
dynamiques lors de la saisie dans le champ de recherche, soit par l’adjonction de résultats
suggérés.
Recherche avancée : propose les options avancées de recherche indexée.

Statistiques
Ce module affiche des données statistiques de visites sur votre site.
Information sur le serveur : affiche des informations sur le serveur utilisé.
Information sur le site : affiche des informations diverses sur le site.
Compteur de clics : affiche le nombre de pages visitées.
Valeur initiale du compteur : augmente le compteur de clics du nombre spécifié, souvent
utilisé en cas de migration depuis un autre moteur de site, pour éviter de repartir de zéro.

Attention ! Pratiques pour les administrateurs afin de connaître certaines données d’installa-
tion du site, ces informations (type de serveur, de base de données...), dès lors qu’elles sont
visibles par tous, peuvent se révéler bien utiles, surtout pour d’éventuels pirates... À réserver
par conséquent à des yeux avertis en modifiant le niveau d’accès.

Tags populaires
Ce module permet un affichage des tags de votre site classés notamment par titres ou par
nombre d’éléments par tags.
Nombre maximal de tags : affiche le nombre maximal de tags spécifiés. Si utilisé dans
un espace restreint, permet de limiter l’espace d’affichage du module.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 222 — #246
✐ ✐

222 Chapitre 13. Gérer les modules

Période : affiche les tags appliqués lors d’une période donnée, dernière heure, jour, mois,
année, ou bien depuis la création du site.
Ordre : affiche les tags en les ordonnant soit par titre, par nombre d’éléments pour chaque
tag, ou aléatoirement.
Direction : critère de tri d’affichage ascendant ou descendant.
Affiche le texte « Aucun résultat » : permet de prévenir un affichage de liste vide en
spécifiant l’absence de résultat.
À noter la possibilité en mode nuage de définir la taille minimale et maximale des caractères,
depuis un onglet spécifique nommé Affichage en nuage.

Tags similaires
Ce module permet cette fois une liste de liens vers des contenus munis de tags ayant des
recoupements entre eux.
Nombre maximal de liens : définit le nombre maximal de liens à afficher.
Niveau de similitude : permet d’affiner la recherche de similitudes à au moins un, la
moitié ou tous les tags présents dans chaque contenu.

13.3 LES MODULES DE L’ADMINISTRATION


On distingue les modules du site public de ceux de l’administration. Les menus, icônes, et tout ce
que vous visualisez dans l’administration du site font également partie intégrante des modules.
Sélectionnez le type « Administration » dans le premier filtre mis à disposition.

Avertissement : désactiver ou supprimer un module d’administration peut endommager le


fonctionnement du site et vous empêcher d’effectuer certaines tâches. Par exemple, le retrait
du formulaire de connexion vous empêchera définitivement d’accéder à la gestion de votre
site !

Articles les plus récents : ce module affiche les articles récemment ajoutés ou modifiés, à
noter que les articles expirés sont également pris en compte.
Articles populaires : ce module affiche les articles les plus consultés, expirés ou non.
Barre d’outils : ce module prend en charge l’affichage de la barre de menu comportant
les boutons d’actions (Nouveau, Modifier, Publier, etc.). À ne surtout pas désactiver !
Connexion : ce module permet la connexion à l’administration du site. À ne surtout pas
désactiver !
Icônes de raccourcis : ce module affiche les icônes d’accès rapides aux éléments
principaux d’administration situés sur le panneau d’administration.
Menu principal : ce module affiche le menu général d’administration situé en haut à
gauche de la page. À ne surtout pas désactiver !
Module version Joomla! : ce module affiche des informations sur la version courante de
Joomla!.
Sous-menu : ce module permet l’utilisation de sous-menus nécessaires à l’affichage de
certaines pages. À ne surtout pas désactiver !
Statut multilingue : ce module affichera un lien permettant de vérifier si tous les éléments
nécessaires à la gestion d’un site multilingue sont présents. Le cas échéant, vous serez averti des
éventuels éléments manquants ou incomplets.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 223 — #247
✐ ✐

13.4 Ajouter ou modifier un module 223

Statut utilisateurs : ce module gère l’affichage d’un lien vers la page d’accueil du site, du
nombre d’utilisateurs connectés au site, des utilisateurs connectés à l’administration et le nombre
de messages non lus.
Titre : ce module affiche le titre et la description en haut à gauche de la barre d’outils. À ne
pas désactiver !
Utilisateurs connectés : ce dernier type de module affiche le nombre d’utilisateurs
enregistrés actuellement connectés au site.

13.4 AJOUTER OU MODIFIER UN MODULE


Pour ajouter un module, dans la Gestion des modules, cliquez sur le bouton Nouveau,
sélectionnez le type souhaité et renseignez les différentes informations permettant de définir ce
nouvel élément, enfin, enregistrez et fermez.
Pour modifier un module existant, cliquez sur son titre dans la liste proposée afin de l’éditer
et de modifier les options souhaitées.
Installer un nouveau type de module revient à installer une nouvelle extension. Cet aspect
est abordé en détail à l’étape 10.3.

13.5 DUPLIQUER UN MODULE


Dupliquer un module permet de réaliser plusieurs agencements à partir d’un module servant de
modèle.
Pour cela, sélectionnez un module depuis la liste et cliquez sur le bouton Dupliquer dans la
barre d’actions. Un nouveau module sera créé du même nom que son modèle, non publié et
muni d’un chiffre indiquant la copie. On pourra ensuite modifier ses paramètres en vue de le
différencier du modèle original.

13.6 PUBLIER/DÉPUBLIER UN MODULE


Deux modes de publication sont disponibles.
Depuis la Gestion des modules, cliquez sur le titre du module pour l’éditer et sélectionnez
« publié » dans les options de statut, enregistrez la modification.
Autre possibilité, depuis la liste des modules, cliquez sur l’icône de publication, rond rouge
avec une croix blanche, ou petite coche verte, pour respectivement publier ou dépublier le
module.

13.7 CAS PRATIQUE

Installation d’un carrousel d’images, Flexslider


Nous vous proposons à présent de mettre en œuvre ce que nous avons vu des modules, au
moyen d’un carrousel d’images qui prendra place dans la partie haute de l’écran.
Ce module Flexslider, fourni gracieusement par Nicolas Lemarinier, s’intégrera tout naturelle-
ment dans le template JoomSpirit_76 que nous avons installé au chapitre précédent. Néanmoins,
ce carrousel pourra prendre place dans tout autre template que vous pourriez installer.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 224 — #248
✐ ✐

224 Chapitre 13. Gérer les modules

Tout d’abord quelques prérequis de mise en route. Nous aurons besoin pour mener à bien
l’opération :
• de l’archive d’installation du module, Flexslider_unzip_first.zip. Celle-ci est disponible
depuis le site Internet de l’auteur (http://www.template-joomspirit.com) dans la partie
Joomla / Free Joomla! Extensions ;
• d’une série d’images que nous afficherons par le biais du module.

À noter : les images devront toutes être de la même dimension (hauteur / largeur). Veillez
par conséquent à préparer vos images en amont de la mise en place.

Installation
Tout d’abord, il nous faudra extraire le contenu de l’archive récupérée. En effet, celle-ci contient
à la fois le module à installer pour les différentes versions de Joomla! mais également le manuel
complet de configuration.
Depuis le menu Extensions / Gestion des extensions, effectuez l’installation à partir de
l’onglet Archive à envoyer en allant rechercher le fichier mod_js_flexslider.zip sur votre disque
dur (chemin local + / Flexslider_unzip_first/Joomla 3.X), puis cliquez sur le bouton Envoyer &
installer (figure 13.11).

Figure 13.11 — Installation du module Flexslider

Chargement des images


L’étape suivante consiste à charger les images qui seront affichées par le module. Pour cela
plusieurs moyens possibles :
• soit par le Gestionnaire de média,
• soit par connexion ftp à l’intérieur du répertoire /images,
• soit à l’aide du module Flexslider lui-même, ce dernier possédant une interface de
chargement d’images dédiée (figure 13.12).

Nous recommandons tout de même de créer un répertoire spécifique pour les images à
charger, par exemple /images/carrousel.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 225 — #249
✐ ✐

13.7 Cas pratique 225

Figure 13.12 — Chargement d’images grâce au module Flexslider

Configuration rapide du module


Rendez-vous dans le Gestionnaire de modules, puis cliquez sur le celui nommé JS Flexslider. Le
premier onglet, Module, vous donnera dans un premier temps l’occasion :
• de modifier son titre si vous souhaitez l’afficher, ou de masquer tout simplement ce
dernier ;
• d’indiquer la position du module au sein du template ;
• de publier le module qui est par défaut désactivé à l’installation ;

Par exemple, si vous souhaitez l’afficher au sein du template JoomSpirit_76, choisissez la


position Top pour un meilleur rendu (figure 13.13). Dans le cas du template Protostar, vous
pourrez opter pour un placement en Position-1.
Le quatrième onglet, General settings (en anglais), vous assurera que l’option jQuery est bel
et bien activée.
Rendez-vous ensuite dans l’onglet Images, nous allons ici définir une à une les images à
utiliser lors du défilement. Cliquez sur les boutons Sélectionner mis à disposition et recherchez
chacune des images chargées préalablement (figure 13.14). Vous aurez la possibilité de
mentionner :
• un texte alternatif (Alt text) qui servira notamment la recherche et l’accessibilité de votre
site ;
• une description qui sera alors affichée en même temps que l’image, ceci vous permettra
d’agrémenter vos images de commentaires explicites ;
• d’un lien URL optionnel permettant de rediriger votre visiteur vers une partie de votre site
en rapport avec l’image présentée.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 226 — #250
✐ ✐

226 Chapitre 13. Gérer les modules

Figure 13.13 — Positionnement du module

Figure 13.14 — Sélection des images

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 227 — #251
✐ ✐

13.7 Cas pratique 227

La dernière étape, dans l’onglet Assignement de menus, consiste à assigner le module pour
que celui-ci soit affiché pour toutes les pages du site ou bien, à votre guise, sur la seule page
d’accueil.
Cliquez enfin sur Enregistrer & Fermer pour sauvegarder toutes vos modifications. Vous
pouvez maintenant apprécier le résultat (figure 13.15).

Figure 13.15 — Flexslider en action

Pour aller plus loin avec Flexslider


Nous venons de faire une mise en place rapide du module. Mais ce dernier recèle bon nombre
de possibilités quant à sa configuration.
Vous pourrez notamment choisir entre des transitions de type Fade (disparition) ou Slide
(glissement). Vous aurez également le loisir de sélectionner les couleurs de fonds, taille de
bordures, avec ou sans arrondis, qui sont du plus bel effet.

En résumé
Les modules sont la clé de la visibilité de vos contenus au sein de vos pages. Négliger leur
placement revient à brider la pertinence de vos affichages. Pour autant, une gestion fine de ces
affichages permettra de mettre en avant certains éléments moteurs de votre site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 228 — #252
✐ ✐

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 229 — #253
✐ ✐

14
Gérer les plugins

Objectif
Nous l’avons déjà évoqué, les plugins servent à ajouter ou à activer un comportement particulier
sur certains composants. Leur utilisation étant très ciblée, l’idée n’est pas ici d’effectuer une
revue détaillée de leurs paramétrages mais de voir leur utilité générale.
Nous verrons également au travers d’exemples précis comment les plugins peuvent améliorer
de façon conséquente l’utilisation au quotidien.

14.1 LES PLUGINS EXISTANTS

Tout d’abord, rendez-vous dans le menu Extensions / Gestion des plugins. Vous retrouverez ainsi
l’ensemble des plugins installés, que vous pouvez trier sur votre gauche par type.

Authentication
Authentification – Joomla! : il s’agit du mode d’identification par défaut utilisé, basé sur les
utilisateurs inscrits.
Authentification – Gmail : basé sur la plateforme de messagerie de Google, ce système
d’identification implique que l’utilisateur possède un compte Gmail valide. Le plugin validera
ainsi la connexion en interrogeant Gmail pour vérifier l’identité de l’utilisateur.
Authentification – LDAP : idéale en contexte d’entreprise, mais nécessitant des connais-
sances adaptées, la possibilité de se connecter à l’aide d’une identification LDAP est très
appréciable. Le plugin fait ici office de lien de connexion entre le site Joomla! et LDAP qui,
en tant que système de gestion d’annuaire d’utilisateurs externes, valide les informations de
connexion de ces derniers.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 230 — #254
✐ ✐

230 Chapitre 14. Gérer les plugins

Authentification – Cookie : utilisé en complément d’un des plugins précédents, celui-ci


permet de gérer une connexion automatique, notamment avec l’activation d’un autre plugin
Système, « Se souvenir de moi ».

Captcha
Captcha – ReCaptcha : service fourni par Google, ReCaptcha permet une protection contre
les messages indésirables notamment pour les formulaires de contacts de Joomla!. Il est ainsi
demandé la saisie d’un texte affiché de façon déformée afin de valider les informations d’un
formulaire.

Content
Contenu – Chargement de module : ce plugin est utilisé pour afficher les modules d’une
position dans un article. Par exemple en insérant {loadposition position-5}, l’article affichera
en son sein l’ensemble des modules affectés à la position 5 du template.
Contenu – Contact : celui-ci fournit un lien entre une fiche de contact et un utilisateur
Joomla! ayant créé du contenu.
Contenu – Indexation de la recherche : lors de l’utilisation de la recherche avancée, ce
plugin permet d’activer l’indexation approfondie en référençant l’intégralité du contenu.
Contenu – Joomla! : ce plugin, à usage interne, permet le traitement des éléments de
catégories.
Contenu – Navigation entre les pages : ce plugin affiche les indications de navigation
lorsque plusieurs pages (pages précédentes, pages suivantes) constituent un article ou une liste
d’articles.
Contenu – Protection des e-mails : le masquage des adresses électroniques (email
cloaking en anglais) effectue un remplacement des adresses e-mails se trouvant dans un
article par des liens qui les masquent. Ceci prévient toute collecte éventuelle par des robots
automatiques de récupération d’adresses e-mails.
Contenu – Saut de page : ce plugin gère les sauts de pages des articles dans l’éditeur
de texte. Il permet également l’affichage d’une table des matières pour l’article lors de sa
visualisation.
Contenu – Vote sur article : ce plugin ajoute la prise en charge des votes, ainsi que
l’affichage des résultats dans les articles.

Editors
Éditeur – CodeMirror : ce plugin permet l’utilisation de l’éditeur de texte CodeMirror dédié à
l’édition native de codes sources (PHP, CSS, HTML par exemple). On pourra ainsi saisir du code
qui sera automatiquement reconnu, mis en forme et présenté avec des codes couleur.
Éditeur – Non WYSIWYG : l’utilisation de ce plugin en tant qu’éditeur de texte par défaut
revient, en réalité, à n’utiliser aucune option de mise en forme des articles.
Éditeur – TinyMCE : éditeur de texte par défaut lors de l’installation et regroupant bon
nombre de fonctions utiles lors de la saisie d’un article, on lui préférera néanmoins bien souvent
d’autres éditeurs plus complets (voir cas pratique en section 14.2).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 231 — #255
✐ ✐

14.1 Les plugins existants 231

Editors-xtd
Bouton – Article : ceci constitue le premier des quatre boutons situés en dessous de l’éditeur de
texte lors de la création d’un article. Il permet lors de la sélection d’une portion de texte d’insérer
directement un lien vers un autre article du site.
Bouton – Image : permet l’accès aux options par défaut d’insertion d’une image au sein
d’un article.
Bouton – Lire la suite... : ajoute une séparation dans le texte d’un article afin de n’en
afficher qu’une portion sur une page en mode blog.
Bouton – Saut de page : ce dernier plugin bouton insère une coupure dans un article
sous forme de saut page afin de limiter les longueurs de pages trop importantes.

Extension
Extension – Joomla! : ce plugin gère les mises à jour des extensions installées.

Finder
Finder est à la base une extension qui fut intégrée à Joomla!. Plusieurs plugins ont été ainsi
ajoutés en vue de l’indexation complète des articles, catégories, contacts, fils d’actualité, liens
web et tags.

Installer
Installation – Installation depuis le Web : ce plugin compte parmi les nouveautés de
Joomla! 3, et permet depuis la Gestion des extensions une installation effectuée directement
depuis le Web.

Quick icon
Nous avons déjà vu que deux notifications sont disponibles sur la page du panneau d’admi-
nistration de Joomla! et permettent d’être alerté lorsqu’une mise à jour de Joomla! ou d’une
extension installée est disponible. Les deux plugins de type Quick Icon assurent cette fonction.

Search
Lorsqu’une recherche simple est effectuée sur le site, les plugins de recherche étendent ou limitent
le périmètre de recherche aux seuls plugins de recherche actifs. Si vous installez des composants
tiers, un plugin spécifique de recherche pour ce composant doit être installé et activé.

System
Système – Cache : ce plugin constitue le cache des informations pour une page. L’utilisation
du cache du navigateur permet de contrôler la durée de rétention des informations.
Système – Code langue : permet de changer le code de langue d’une page en vue
d’optimiser son référencement par les moteurs de recherche.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 232 — #256
✐ ✐

232 Chapitre 14. Gérer les plugins

Système – Débogage : ce plugin gère l’affichage ainsi que le niveau d’information de


débogage fourni lorsque des erreurs sont rencontrées.
Système – Déconnexion : ce plugin gère la redirection lors de la déconnexion d’un
utilisateur du site.
Système – Filtre de langue : dans le cas d’un site multilingue, ce plugin permet de filtrer
le contenu en fonction de la langue d’affichage sélectionnée.
Système – Log : ce plugin collecte les informations sur les opérations effectuées dans le
système. Le fichier journal (ou fichier log) est enregistré selon les paramètres précisés dans la
configuration globale.
Système – Mise en évidence : permet la mise en avant de termes trouvés dans un texte,
notamment lors de l’utilisation de la recherche indexée.
Système – P3P Policy : ce plugin permet l’activation de paramètres nécessaires au
fonctionnement de sessions utilisateurs sur certains navigateurs.
Système – Redirection : ce plugin gère la redirection dans le cas d’une page obsolète et
enregistre le lien manquant ou brisé.
Système – Se souvenir de moi : grâce à ce plugin, l’utilisateur a la possibilité de
demander la création d’un « cookie » sur son disque dur afin de conserver les informations
de connexion lors de visites sur le site. Ceci nécessite l’approbation préalable de l’utilisateur.
Système – SEF : déjà évoquée dans le chapitre 9, la gestion de la réécriture d’URL ou SEF
(Search Engine Friendly) est ici gérée par ce plugin qui se charge de traduire les URL du site de
manière lisible pour les robots des moteurs de recherche.

Twofactorauth
Nouveauté présente depuis Joomla! 3, ces plugins ajoutent un second facteur d’identification
de l’utilisateur par le biais d’un moyen tiers, tel qu’un second mot de passe ou une clé physique
d’identification, type USB, à connecter à l’ordinateur de l’utilisateur.

User
Utilisateur – Joomla! : ce plugin enregistre une trace dans la base de données lors de la
connexion d’un utilisateur.
Utilisateur – Fiches de contact automatiques : lors de l’ajout d’un nouvel utilisateur, ce
plugin active la création automatique d’une fiche de contact liée à l’utilisateur nouvellement créé.
Utilisateur – Profil : ce plugin définit quelles informations optionnelles seront demandées
à un utilisateur désireux de s’inscrire sur le site.

14.2 CAS PRATIQUES

Nous venons de voir que les plugins nous facilitent la vie et automatisent pour certains des
actions que nous devrions répéter bien souvent.
Au travers des deux exemples qui vont suivre, nous allons vous montrer des cas où des
plugins additionnels permettent d’aller bien au-delà de nos espérances.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 233 — #257
✐ ✐

14.2 Cas pratiques 233

Mise en place de l’éditeur de texte JCK Editor


Joomla! propose par défaut un éditeur de contenu permettant une mise en page avancée des
articles. Néanmoins d’autres éditeurs gratuits existent et proposent nombre d’améliorations et
nouvelles fonctions de mise en page. À ce titre, nous vous proposons l’installation de l’éditeur
JCK Editor en version gratuite disponible sur le site de l’éditeur : http://www.joomlackeditor.com

Installation et configuration
Rendez-vous dans le menu Extensions / Gestion des extensions. Après avoir spécifié le chemin
vers l’archive d’installation en utilisant le bouton Parcourir, cliquez sur le bouton Envoyer &
installer. Vous serez guidé durant les quelques étapes d’installation.
Tout d’abord, il vous sera proposé de télécharger un guide d’installation afin de faciliter
l’installation et la prise en main de l’éditeur. En cliquant sur le bouton Suivant, il vous sera
ensuite demandé de vérifier puis éventuellement corriger des permissions d’accès aux fichiers et
répertoires si ceux-ci ne permettent pas une sécurité optimale des éléments (figure 14.1).

Figure 14.1 — Installation de l’éditeur JCK – Permissions

Les deux étapes suivantes vous permettront de spécifier les options de polices de caractères,
de couleur de fond à utiliser lors de l’édition ainsi que l’accès aux répertoires de contenus :
images, fichiers, etc. (figure 14.2). Il est à noter que JCK Editor vous permet de sélectionner
les types d’utilisateurs pouvant avoir accès à ces contenus, ainsi qu’une option intéressante
permettant de créer un répertoire propre à chaque utilisateur.
La dernière étape vous invite à définir les styles d’affichage pour la zone d’édition
(figure 14.3). Sans indication particulière de votre part, l’éditeur reprendra les informations
du template par défaut.

Activation de JCK par défaut


L’éditeur JCK est à présent installé et actif. Néanmoins, il n’est pour l’instant mis à la disposition
de personne. Afin de remplacer l’éditeur de contenu actuel (TinyMCE) il est nécessaire :
• soit d’aller dans son propre profil utilisateur et de choisir JoomlaCK comme éditeur par
défaut. On laisse alors libre choix aux autres utilisateurs de le définir leur éditeur par
défaut.
• Soit de le définir par défaut pour tout utilisateur, depuis la configuration globale du site :
menu Système / Configuration (figure 14.4).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 234 — #258
✐ ✐

234 Chapitre 14. Gérer les plugins

Figure 14.2 — Installation de l’éditeur JCK – Configuration

Figure 14.3 — Installation de l’éditeur JCK – Styles

À l’usage
Vous pouvez ensuite vous rendre dans la création d’un nouvel article et profiter de l’interface de
ce nouvel éditeur, très proche de ce que Word pourrait par exemple vous proposer en termes
d’ergonomie (figure 14.5). Nous pouvons ici lors de l’insertion d’une image, non seulement
insérer celle-ci, redéfinir sa taille d’affichage à la volée, mais également et directement lui
attacher un lien hypertexte.
À noter que l’on retrouve également dans l’interface, la possibilité de faire un clic droit sur
le contenu et d’accéder à un menu contextuel en fonction de l’élément sélectionné. Dans le
cadre d’une image ou d’un lien hypertexte, il sera alors possible d’en redéfinir plus aisément les
propriétés.

Utilisation d’une galerie d’images au sein d’un article


Les composants et modules associés permettant de disposer de galeries d’images ne manquent
pas. Ceux-ci ne permettent en revanche pas d’inclure quelques images directement au milieu
d’un article pour l’illustrer, à moins de les insérer une par une directement au sein du texte. Nous
vous proposons ici un moyen simple et rapide d’insérer une galerie d’images dynamique au
moyen du plugin Sigplus.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 235 — #259
✐ ✐

14.2 Cas pratiques 235

Figure 14.4 — Installation de l’éditeur JCK – Activation

Figure 14.5 — L’éditeur JCK – Insertion d’image

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 236 — #260
✐ ✐

236 Chapitre 14. Gérer les plugins

Installation
Depuis le menu Extensions / Gestion des extensions, recherchez Sigplus dans le premier onglet
Installer à partir du web. Une fois trouvée, cliquez sur la fiche pour accéder aux détails. Vous
serez alors invités à l’Installer (figure 14.6). Une dernière étape vous demandera de confirmer
l’installation en cliquant sur le bouton Installer.

Figure 14.6 — Installation du plugin Sigplus

Ensuite, rendez-vous dans la Gestion des plugins, puis recherchez celui nommé « Content –
Image gallery – sigplus », activez-le en cliquant une fois sur le petit rond rouge avec une croix
blanche à gauche du titre trouvé, celui-ci sera alors publié et utilisable.

À noter : en cliquant sur le titre du plugin, vous serez en mesure de modifier, entre autres, la
taille affichée en hauteur et en largeur, ainsi que des propriétés liées à la source des données
affichées. Par défaut, le chemin de sélection pour les images est /images, ce qui correspond
à la racine du Gestionnaire de média.

Chargement des images


La première étape en vue de l’affichage d’une galerie consiste à charger les images sur le
site. Pour cela, rendez-vous soit à la racine du Gestionnaire de média (figure 14.7), soit par
connexion ftp à l’intérieur de /images (chemin de départ évoqué précédemment). Créez un
nouveau répertoire, par exemple « vacances », et ensuite chargez quelques images. On prendra
soin de dimensionner les images avant chargement, ceci pour limiter le temps d’affichage pour
le visiteur.

Insertion de la galerie dans un article


Créez ou modifiez ensuite un article existant. À l’intérieur de celui-ci, insérez la syntaxe suivante :
{gallery}vacances{/gallery}
Il s’agit ici de préciser au plugin de chercher à afficher les images du répertoire vacances
(figure 14.8).
Il ne vous reste plus qu’à publier si besoin votre article, enregistrer les modifications et
constater le résultat sur la page du site (figure 14.9).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 237 — #261
✐ ✐

14.2 Cas pratiques 237

Figure 14.7 — Chargement des images

Figure 14.8 — Insertion de la galerie

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 238 — #262
✐ ✐

238 Chapitre 14. Gérer les plugins

Figure 14.9 — Galerie affichée

En résumé
Les plugins servent non seulement à automatiser ou à simplifier certaines tâches, notamment
d’administration ou de gestion de vos articles, mais peuvent aussi donner de la valeur ajoutée
à vos contenus !

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 239 — #263
✐ ✐

15
Gérer les langues

Objectif
Joomla! existe bien évidemment de base en version francophone. Néanmoins, l’utilité d’installer
de nouvelles langues peut se révéler utile lorsque votre public dépasse le cadre de nos frontières.
Voyons comment orchestrer cette gestion et mettre tout cela en musique.

15.1 GESTION DES LANGUES

Joomla! permet l’utilisation de langues additionnelles. En théorie, vous aurez téléchargé et


installé Joomla! dans la langue par défaut qui vous intéresse, par exemple en français.

Attention ! Joomla! n’effectuera aucune traduction automatique de vos contenus à votre


place. Néanmoins, Joomla! prendra en charge tous les éléments d’interface et de présentation
de votre site.

Depuis le menu Extensions / Gestion des langues, quatre éléments sont à votre disposition
dans le menu de gauche.

Langue(s) installée(s) – Site et Administration


Les deux premiers éléments du menu concernent les langues installées pour le site, la partie
publique donc, ainsi que pour l’administration.
L’affichage proposé vous fournit non seulement la liste des langues disponibles, mais
également et surtout la possibilité de définir celle utilisée par défaut, au moyen d’une étoile
orange (figure 15.1). Vous pouvez par conséquent choisir une langue de site par défaut différente
de celle d’administration si vous le souhaitez.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 240 — #264
✐ ✐

240 Chapitre 15. Gérer les langues

Pour changer la langue par défaut, il suffit de cliquer sur l’étoile d’une autre langue
directement dans la liste, ou bien de sélectionner la langue et de cliquer sur le bouton Défaut
dans la barre de boutons d’action.

Figure 15.1 — Langue par défaut

Langues de contenus
Le troisième élément de menu permet d’activer et créer les langues à utiliser pour le contenu
(figure 15.2).
Pour publier ou dépublier une langue, il suffit de cliquer sur l’icône à gauche de son titre
afin de changer son statut ou bien de sélectionner la langue dans la liste et d’utiliser les boutons
Publier et Dépublier dans la barre de boutons d’action.
Des boutons sont également à votre disposition afin d’éditer ou créer de nouvelles définitions
de fichiers de langues. Un bouton Paramètres vous donnera accès au réglage des droits pour ce
type d’extensions.

Figure 15.2 — Langues de contenus

Substitutions de traduction
Ceci est un point intéressant, si vous souhaitez donner un sens différent à un terme du site ou
d’administration, libre à vous de redéfinir sa traduction.
Pour cela, depuis le quatrième élément de menu nommé Substitutions, cliquez sur le bouton
Nouveau situé dans la barre d’action. Vous pourrez ainsi spécifier une nouvelle définition d’un
terme. Pour cela, un petit moteur de recherche est à votre disposition sur la partie droite de l’écran.
Vous pouvez ainsi rechercher un terme, soit par sa chaîne (nom interne), soit par sa valeur (le
texte dûment affiché). Définissez ensuite sa nouvelle valeur et enregistrez votre substitution.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 241 — #265
✐ ✐

15.2 Installer une nouvelle langue 241

15.2 INSTALLER UNE NOUVELLE LANGUE

Deux méthodes s’offrent à vous pour installer une nouvelle langue.


Pour les plus aventureux, rendez-vous sur le site officiel des traductions Joomla! à l’adresse :
http://community.joomla.org/translations.html pour télécharger puis installer l’archive depuis
le menu Extensions / Gestion des extensions.
Néanmoins, Joomla! vous épargne cette tâche par le biais du bouton Installation de langues
situé dans la barre d’action du Gestionnaire de langues. Vous serez alors dirigé vers une page
listant l’ensemble des langues disponibles détectées par Joomla!. Si la liste ne semblait pas
complète ou n’apparaissait pas, cliquez sur le bouton Rechercher des langues pour mettre la
liste à jour.
Vous pourrez ensuite sélectionner la langue désirée et cliquer sur le bouton Installer situé
dans la barre d’action (figure 15.3). À noter que si les fichiers de langues proposés ne sont pas
à jour par rapport à votre version de Joomla!, une notification vous indiquera que des éléments
risquent de ne pas être traduits ou de manière incorrecte. On utilisera alors les substitutions
(vues précédemment) pour palier tout manque, ceci en attendant une mise à jour du pack de
langue souhaité.

Figure 15.3 — Installer une nouvelle langue

15.3 CAS PRATIQUE

Mise en œuvre d’un site multilingue


Nous allons maintenant vous guider dans l’installation d’un site multilingue. Les indications
seront données à la fois pour le template ProtoStar livré en standard, ainsi que pour le template
JoomSpirit_76 installé au chapitre 12. Pour se faire, assurez-vous que le template choisi soit bien
défini par défaut depuis le menu Extensions / Gestion des templates.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 242 — #266
✐ ✐

242 Chapitre 15. Gérer les langues

Ajouter une nouvelle langue


Une nouvelle langue de site et d’administration
Par défaut, nous disposons déjà du français et de l’anglais en tant que langue de site, ainsi que
d’administration. Ajoutons maintenant une nouvelle langue, pour notre exemple, nous choisirons
l’allemand.
Après avoir installé la langue allemande (German) au moyen du bouton d’action Installation
de langues, vérifiez sa présence dans le menu de Gestion des langues.

Ajouter de nouvelles langues de contenu


Pour que la navigation multilingue soit possible, des langues de contenu associées doivent
exister. Nous allons ainsi créer la version allemande. Toujours depuis la Gestion des langues,
placez-vous sur Contenu dans le menu de gauche et cliquez sur le bouton Nouveau dans la
barre d’action. Renseignez tout en langue allemande comme suit :
Titre : Allemand (DE)
Titre natif : Allemand (DE)
Tag de langue : de-DE
Code de langue : de
Préfixe d’image : de
Accès : Public
Cliquez sur Enregistrer & Fermer.
Maintenant que les langues de contenu sont présentes, nous allons les ordonner. Cliquez
sur le titre de la colonne Ordre, ceci vous permettra de spécifier la priorité des langues sur le
site par mouvement de glisser/déplacer : Français en 1, Anglais en 2, Allemand en 3. Pour cela,
utilisez le symbole composé de trois petits carrés verticaux. Restez appuyé dessus pour changer
l’ordre des langues (figure 15.4).

Figure 15.4 — Nouvelles langues de contenu

Le plugin de filtrage des langues


Activer le plugin
Il nous faut maintenant activer un plugin pour que les langues soient utilisables ensuite par vos
visiteurs. Rendez-vous dans la Gestion des plugins, puis recherchez Système - Filtre de langue,
activez-le en cliquant sur le petit bouton de statut à gauche de son titre (figure 15.5).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 243 — #267
✐ ✐

15.3 Cas pratique 243

Figure 15.5 — Plugin – Filtre de langue

Activer les associations


Vous pouvez également cliquer sur le titre du plugin pour l’éditer et le publier par ce biais. Nous
en profiterons alors pour nous assurer que les associations d’éléments sont activées. Ceci permet
à Joomla! de connaître l’élément précis à afficher lorsque l’on change de langue.

Imaginez, vous êtes sur un article et vous changez de langue, le site vous renvoie vers la page
d’accueil, faute d’association. Ceci peut se révéler extrêmement frustrant pour vos visiteurs
qui doivent refaire le chemin vers le contenu désiré.

En associant à chaque article, catégorie, menu, un élément dans la langue désirée, le site
vous permet de changer de langue tout en restant sur le même contenu sélectionné.

Dupliquer le contenu
Qu’on ne s’y trompe pas, gérer un site multilingue est un travail de longue haleine si vous avez
beaucoup de contenu. Car comme énoncé précédemment, Joomla! ne fera pas les traductions de
contenu à votre place. Il vous faudra faire les traductions d’articles et de menus par vous-même
(ou avec de l’aide extérieure bien sûr).
Ceci constitue le plus gros du travail, plus vous avez d’articles, plus le nombre de traductions
à gérer sera conséquent. On pourra néanmoins restreindre le périmètre de publication en
limitant le nombre d’éléments de menu mis à disposition. Vous pourrez par exemple publier
l’ensemble de la présentation de votre société, les différents pans de votre activité, la prise de
contact, mais omettre tout ou partie de votre catalogue produits, jusqu’à ce que celui-ci ait été
proprement traduit.

Dupliquer les catégories


Rendez-vous dans la Gestion des articles. Nous allons tout d’abord créer de nouvelles catégories
d’articles, en relation avec des catégories existantes. Créez deux catégories, une nommée
Joomla! – EN, et une Joomla! – DE, respectivement affectées aux langues anglaise et allemande.
Nous prendrons soin de modifier la catégorie Joomla! (tout court) existante afin de la renommer
Joomla! – FR et de lui assigner la langue française.
Toujours dans la catégorie en édition, associez-lui les catégories définies dans les autres
langues, depuis l’onglet Associations. Ces associations vont se reporter dans les autres catégories
en relation, automatiquement (figure 15.6).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 244 — #268
✐ ✐

244 Chapitre 15. Gérer les langues

Figure 15.6 — Copie de catégories et associations

Dupliquer les articles


Par défaut, lorsqu’un article est créé, il est affiché dans toutes les langues. Il s’agit ici de restreindre
l’affichage des articles existants dans une seule langue, puis de dupliquer et traduire ces articles
pour les afficher dans une autre langue.
Commençons par les articles situés en page d’accueil, ceux-ci sont affichés en mode blog
et bénéficient d’une mise en avant par le biais du statut En vedette. Affichez tous les articles et
sélectionnez ceux qui bénéficient d’une étoile jaune à gauche de leur titre (figure 15.7).

Figure 15.7 — Sélection des articles mis en vedette

Cliquez ensuite sur le bouton Traitement depuis la barre d’actions. Dans la fenêtre qui
apparaît, sélectionnez la langue Français (FR), puis cliquez sur le bouton Traitement. Tous les
articles sélectionnés ont été modifiés pour n’apparaître qu’en langue française.
Re-sélectionnez les articles en vedette, cliquez à nouveau sur le bouton Traitement. Cette
fois, choisissez la langue English (UK), puis la catégorie Joomla! – EN créée précédemment

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 245 — #269
✐ ✐

15.3 Cas pratique 245

et sélectionnez l’option Copier. Cliquez enfin sur le bouton Traitement. Vous venez de créer et
classer des copies de chacun des articles qui seront affichés pour la langue anglaise.
Renouvelez cette opération pour la langue allemande.
Utilisez ensuite la vue Articles en vedette disponible dans le menu de gauche pour constater
la copie des articles. Vous aurez ainsi tout le loisir de les éditer, de traduire leurs contenus
(figure 15.8) et de faire les Associations d’articles dans les autres langues par l’onglet du même
nom.

Figure 15.8 — Articles copiés et renommés

Nous ne traiterons ici que quelques-uns des articles. Il est bien évident que ce travail
sera plus long si vous choisissez de traiter tout ou partie de vos articles autres que ceux
sélectionnés ici.

Dupliquer les menus


Nous allons ensuite créer des copies du menu principal. Rendez-vous dans la Gestion des
menus et cliquez sur Nouveau. Renseignez le titre en tant que Main Menu English, puis un type
mainmenu_en, et une description (figure 15.9). Faites de même pour la langue allemande.
Créer les menus ne suffit pourtant pas car ils sont créés à vide. Il nous faut à présent
dupliquer et traduire les éléments de menus existants en français, dans ces nouvelles créations.
Pour les éléments de menus qui seraient assignés directement à des articles, il faudra alors éditer
ces éléments et leur assigner les articles spécifiques pour la langue en cours.
Depuis le menu de gauche, cliquez sur Liens de menu et sélectionnez tous les éléments
faisant partie du menu principal français. Cliquez ensuite sur le bouton Traitement.
Sélectionnez la langue anglaise, puis le menu principal anglais créé précédemment Main
Menu English / Ajouter à ce menu. Sélectionnez Copier comme dernière option, puis cliquez sur
le bouton Traitement en fin de formulaire (figure 15.10).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 246 — #270
✐ ✐

246 Chapitre 15. Gérer les langues

Figure 15.9 — Création d’un nouveau menu

Figure 15.10 — Copie d’éléments de menu par traitement

Renouvelez l’opération à destination du menu allemand. Réitérez une troisième fois


l’opération afin d’assigner uniquement la langue française aux éléments de menu français,
en conservant l’option de traitement Déplacer cette fois.
Il vous reste à éditer puis traduire les éléments créés dans les nouveaux menus, et à ajouter
les associations de langues de menus, par le biais de l’onglet Associations.
Afin de terminer cette étape, il vous faudra définir la page d’accueil pour chaque langue.
Depuis la vue générale des articles, cliquez sur le bouton muni d’une petite étoile à droite du
lien de menu pour la page d’accueil. Un petit drapeau indiquant la langue d’affichage devrait
alors apparaître (figure 15.11).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 247 — #271
✐ ✐

15.3 Cas pratique 247

Figure 15.11 — Une page d’accueil par langue

Dupliquer les modules


Rendez-vous maintenant dans la Gestion des modules car eux aussi se voient affectés une langue
en vue de leur présence à l’écran.

Modules de menu
Tout d’abord, modifiez le module dédié au Menu principal pour lui affecter la langue française.

À noter : si vous utilisez le template JoomSpirit_76 installé au chapitre 12, vérifiez que la
position du menu est bien Left, modifiez le Suffixe de classe pour submenu et vérifiez qu’il est
bien assigné à toutes les pages.

Cliquez ensuite sur Enregistrer depuis la barre d’actions, puis deux fois sur le bouton
Enregistrer une copie. Vous pourrez ensuite cliquer sur Fermer.
Nous venons en fait de créer deux copies parfaites du module de Menu principal. Il ne vous
reste plus qu’à éditer ces deux copies, modifier la langue d’affichage, changer pour le menu
correspondant depuis l’onglet Module (figure 15.12) et enregistrer votre modification.

Autres modules
Nous ne nous sommes occupés ici que du module de Menu principal. Tous autres modules, de
menu, de flux RSS, de bannières... devront également être dupliqués de la même manière.

Ajouter le module de changement de langue


Dernière étape pour compléter notre site, ajouter un module permettant de passer d’une langue
à l’autre. Certains de vos visiteurs, perdus au milieu d’un contenu dans une langue qui leur
est étrangère, seront rassurés de trouver de petits drapeaux les guidant vers la traduction
correspondante.
Toujours depuis la Gestion des modules, filtrez sur le type Changement de langue, celui-ci
devrait être listé, mais non publié. Cliquez dessus pour le modifier.
Tout d’abord, publiez-le afin qu’il soit visible, ensuite choisissez si le titre du module doit
apparaître.

Remarque : si vous choisissez d’afficher le titre, nous vous recommandons de dupliquer


ce module afin de proposer un titre dans chaque langue utilisée. Dans le cas contraire,
masquez-le.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 248 — #272
✐ ✐

248 Chapitre 15. Gérer les langues

Figure 15.12 — Modification de l’affectation de menu

Figure 15.13 — Le module de changement de langue

Ensuite, donnez une position à votre sélection de langue (figure 15.13). Ceci peut varier en
fonction du template en vigueur.

À noter : pour notre exemple, sélectionnez la position Left pour le template JoomSpirit_76,
ou bien Position-7 pour le template ProtoStar.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 249 — #273
✐ ✐

15.3 Cas pratique 249

On placera également ce module en premier pour l’ordre d’affichage. Enfin, on sélectionnera


la ou les langues d’affichage en fonction de la remarque précédente.
On veillera enfin à ce que le module soit assigné à toutes les pages, dans l’onglet
Assignement des menus. Enregistrez vos modifications.

Vérifier le statut multilingue


Depuis la Gestion des modules, vérifiez que le module d’Administration nommé Statut multilingue
est activé. Le cas échéant, activez-le. Celui-ci, disponible par défaut sous la forme d’un lien
en bas à gauche de la page d’administration, vous indiquera si un ou plusieurs éléments sont
manquants pour faire fonctionner votre site en mode multilingue (figure 15.14).

Figure 15.14 — Statut multilingue

Une fois ce paramètre vérifié, et si aucune erreur n’est signalée, visitez votre site
(figure 15.15), vous pouvez à présent cibler un plus large public !

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 250 — #274
✐ ✐

250 Chapitre 15. Gérer les langues

Figure 15.15 — Votre site multilingue

En résumé
Utiliser des langues additionnelles permet d’élargir vos horizons en termes de contenu, mais
également le panel de vos visiteurs, utilisateurs, voire contributeurs. La gestion de cet ensemble
peut s’avérer être une tâche compliquée si on ne veille pas à y consacrer suffisamment de
temps et de rigueur.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 251 — #275
✐ ✐

16
Maintenance :
la gestion au quotidien

Objectif
Votre site est maintenant en ligne et visible aux yeux du monde, vos utilisateurs sont connectés
et heureux. Mais faut-il pour autant vous endormir sur vos lauriers ? Que nenni ! Votre œil
acéré doit maintenant veiller sur tout ce petit monde et assurer le fonctionnement quotidien de
la machine. Pour cela, voici quelques points à ne pas négliger.

16.1 LA MESSAGERIE INTERNE

Nous vous avons d’ores et déjà présenté cet outil au chapitre 7. Il vous sera précieux. Voici
votre moyen de communication privilégié avec vos utilisateurs. N’en abusez pas, sous peine
de voir vos communications tomber dans l’indifférence. Usez de ce moyen pour prévenir vos
utilisateurs d’événements majeurs sur le site et de ce qui va nous occuper dans ce chapitre : les
maintenances. Vos messages doivent être clairs et concis : veillez à rappeler brièvement l’objet
de l’indisponibilité du site, le jour, l’horaire et la durée.

16.2 DÉVERROUILLAGE DU CONTENU

Disponible depuis le menu Système, Déverrouiller est très pratique et consiste à déverrouiller
tous les éléments qui auraient été bloqués par vous-même ou par vos utilisateurs. Vous verrez
que vous en aurez souvent besoin si plusieurs personnes travaillent dans la partie administration
de votre site.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 252 — #276
✐ ✐

252 Chapitre 16. Maintenance : la gestion au quotidien

Déverrouiller, mais déverrouiller quoi ? Tout élément du site (articles, menus, catégories,
modules...) nécessite d’être verrouillé lors de modifications. Imaginez deux personnes modifiant
un même article au même moment, la dernière personne qui sauvegarderait l’article effacerait
ce que la première aurait fait... Ainsi, dès qu’un élément est édité par une personne, il est
verrouillé. Les autres utilisateurs verront alors un petit cadenas empêchant son édition. Lorsque
la modification est terminée, l’élément est remis à disposition des autres utilisateurs.
Il peut arriver, lorsque l’utilisateur ferme brutalement son navigateur, ou bien lorsque sa
connexion Internet se coupe, que la remise à disposition ne se fasse pas. L’élément reste alors
verrouillé.
Pour utiliser le déverrouillage, un certain nombre d’éléments vous sont proposés tels que
la table banners pour vos bannières, ou content pour vos articles. Sélectionnez les données à
déverrouiller en cochant la case à gauche de leur nom et cliquez sur le bouton Déverrouiller
situé dans la barre de boutons supérieure (figure 16.1).

Figure 16.1 — Déverrouillage du contenu

Certes, depuis chacun des gestionnaires du site (articles, menus, catégories, modules...),
vous pouvez déverrouiller l’un ou l’autre élément au cas par cas, en le sélectionnant et en
cliquant sur le bouton Déverrouiller situé dans la partie supérieure de la page, ou bien cliquer
directement sur le petit cadenas. À noter qu’en plaçant la souris sur le petit cadenas sans cliquer
vous affichera qui a verrouillé l’élément et à quelle date.

Attention ! Lors de l’utilisation du déverrouillage des éléments, vous déverrouillerez peut-être


des éléments en cours d’utilisation, rendant ainsi des modifications simultanées possibles.
Prenez soin de vérifier qui est connecté à ce moment-là et utilisez cette option avec précaution.

16.3 NETTOYER LE CACHE


Lorsque vous visitez une page d’un site Joomla!, votre navigateur appelle le serveur Web pour
la lui demander. Le serveur Web communique avec le serveur de base de données pour lui
demander des informations, puis il les structure, les met en page et envoie du code à votre
navigateur qui l’interprète. Tout cela consomme des ressources, notamment en bande passante

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 253 — #277
✐ ✐

16.4 Vider la corbeille 253

et en puissance processeur. Si cent personnes demandaient la même page, alors le processus


aurait lieu cent fois. Le cache permet justement d’éviter aux serveurs d’effectuer cent fois la
même opération.
Mettre une page en cache signifie qu’elle a été générée une fois et que le système (de cache)
en garde une copie déjà prête à l’emploi. Si d’autres visiteurs passent après et demandent la
même page, on fournit la copie au navigateur, ce qui est bien plus rapide que les discussions
entre serveurs.
Votre navigateur Internet utilise d’ailleurs ce procédé pour éviter de redemander des images
qu’il a déjà « lues ». Si par exemple vous visitez un site de quarante pages avec le même logo
sur chaque page, l’image du logo sera demandée au chargement de la première page, puis
votre navigateur ne la demandera plus puisqu’il l’aura dans son cache.
Autant vous dire que plus votre site est volumineux, plus vous avez intérêt à activer le cache.
Nous vous rappelons que les moteurs de recherche (Google notamment) ont indiqué que la
vitesse de chargement des pages était un facteur pour le positionnement d’un site.
À activer depuis la configuration générale du site (menu Système / Configuration), la gestion
du cache est par conséquent un point à ne pas négliger. Pensez à vider le cache du site lors
des maintenances, ou bien lors de mises à jour importantes, afin que celui-ci se renouvelle et
soit le plus à jour possible. Pour cela, accédez directement à la purge du cache depuis le menu
Système / Purger le cache. Il en va de même pour la purge des fichiers expirés, dont la gestion
est accessible depuis le menu Système / Purger les fichiers expirés.

16.4 VIDER LA CORBEILLE

Lorsque des articles sont supprimés, ils ne sont pas réellement détruits, ils sont placés dans la
corbeille. Il faut par conséquent penser à vider cette corbeille régulièrement. Depuis la Gestion
des articles, filtrer les articles sur l’état Dans la corbeille. Vous aurez ainsi la liste de tous les
articles en instance de suppression. Sélectionnez les articles, puis cliquez sur le bouton Vider la
corbeille dans la barre de bouton d’action. Les articles seront alors définitivement supprimés.

Conseil : les articles mis à la corbeille utilisent peut-être des images, ou des documents mis
à disposition en téléchargement. Après vous être assurés qu’ils ne sont plus utilisés, pensez
également à supprimer ces éléments depuis la Gestion des médias.

16.5 ARCHIVAGE

Certains de vos articles ne sont plus d’actualités, ont été dépubliés et encombrent votre liste
d’articles par leur nombre important. Pour autant, vous ne souhaitez pas les supprimer. Archivez-
les !
Depuis la Gestion des articles, faites une sélection en cochant la petite case à gauche du titre
des articles et cliquez sur le bouton Archiver. Vous verrez alors ces articles disparaître de votre
écran, la liste restant affichée ne comportant que des éléments de contenus publiés ou dépubliés.
Pour retrouver les articles archivés, utilisez le filtre de statut, en sélectionnant Archivé dans
la liste. Pour sortir un article de l’archivage, il vous suffit de le sélectionner et de le placer à
nouveau en statut publié ou dépublié en cliquant sur le bouton correspondant.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 254 — #278
✐ ✐

254 Chapitre 16. Maintenance : la gestion au quotidien

16.6 GESTION DE VERSIONS

Nous avons vu au chapitre 5 que la gestion des versions, notamment des articles, permet de
garder le contrôle sur la publication et la modification de vos contenus. Ce contrôle, effectué
en enregistrant un certain nombre de versions « historisées » de vos articles, vous prémunit de
toute modification ou altération malencontreuse ou délibérée. Néanmoins, cette sauvegarde
multiple de chacun des contenus a un coût. Ce dernier se traduit par une multiplication des
enregistrements au sein de votre base de données.

Si vous deviez revivre votre vie d’écolier, avec vos cahiers au propre, et vos cahiers de brouillon.
Chaque nouvelle version d’un article relègue la précédente au rang de brouillon conservée
pour historique. Plus l’historique augmente, plus le nombre de brouillons enregistrés est
important, plus le travail de la base de données est conséquent. Un mal pour un bien la
plupart du temps, sauf si votre site est immensément riche de contenus et d’auteurs.

La configuration générale du système vous permet de paramétrer le nombre de version à


retenir par contenu, et donc de limiter cet impact potentiel. Retenir plus de 5 ou 10 versions
de chaque contenu n’est sans doute pas nécessaire s’il s’agit de palier de simples erreurs de
manipulation.

16.7 LES AVERTISSEMENTS

Joomla! vous tient informé lorsqu’il détecte certaines anomalies. Pour cela, rendez-vous dans le
menu Extensions / Gestion des extensions, puis la partie Avertissements dans le menu de gauche.
Vous trouverez ici sous forme de liste les points à corriger avec leurs descriptifs ainsi que des
conseils en vue de leurs résolutions.

16.8 MISES À JOUR

Nous avons vu qu’il est nécessaire, et même vital de tenir son système à jour. Hormis d’éventuelles
corrections d’erreurs de fonctionnement ou améliorations notoires, certaines failles de sécurité
doivent être comblées pour éviter tout incident fâcheux ou le plus souvent toute intrusion
malhonnête. En cela, Joomla! dispose d’une interface vous fournissant une assistance pour
la mise à jour à la fois de Joomla! lui-même mais aussi de vos extensions.
Tout d’abord, depuis l’écran d’accueil de l’interface d’administration, Joomla! vous informe
directement depuis le menu situé à gauche de l’écran. Les deux dernières indications vous
alertent si Joomla! et si des extensions installées ne sont pas à jour. Un simple clic sur l’un de
ces deux liens vous amènera aux étapes de mise à jour nécessaires.
Il vous suffit de suivre le premier lien pour vous voir proposé d’effectuer la mise à jour en
question.

À noter : un bouton Paramètres est présent pour vous permettre d’indiquer le type de mises
à jour recherchées. Joomla! 3.0, 3.1, 3.2, etc. bénéficient d’un support à court terme (STS),
alors que Joomla! 4.0 bénéficiera d’un support à long terme (LTS). Les mises à jour tiennent
compte de cette nomenclature afin de « filtrer » les éléments à proposer. Le choix du type
de serveur de mise à jour devra se faire en fonction de votre version actuellement installée
(figure 16.2).

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 255 — #279
✐ ✐

16.8 Mises à jour 255

Figure 16.2 — Paramétrage des mises à jour Joomla!

Le second lien correspond au menu Extensions / Gestion des extensions, section Mise à jour
(figure 16.3). Effectuez une recherche en cliquant sur le bouton Rechercher des mises à jour situé
dans la barre de boutons d’action.

Figure 16.3 — Mise à jour des extensions

Si des mises à jour sont disponibles pour les extensions actuellement installées, elles vous
seront présentées sous forme de liste. Vous pourrez ensuite décider de celles à mettre en œuvre
en les cochant, puis en cliquant sur le bouton Mise à jour.
Ces deux liens sont une aide, ceci ne vous dispense pas de vérifier si les extensions installées
ne font pas l’objet de mises à jour, par exemple de sécurité. Certaines nécessiteront peut-
être d’être mises à jour manuellement. Reportez-vous aux précisions fournies par l’éditeur de
l’extension afin de réaliser cette opération.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 256 — #280
✐ ✐

16.9 LA SÉCURITÉ DES COMPOSANTS TIERS

De préférence, choisissez des extensions dont vous pouvez vérifier non seulement la provenance,
mais également la robustesse. Privilégiez des extensions référencées sur les sites officiels tels
que http://extensions.joomla.fr ou http://extensions.joomla.org, et prenez le temps de lire
les avis des personnes ayant déjà testé l’extension. Vérifiez régulièrement les mises à jour des
extensions installées, afin de palier tout bug ou faille de sécurité éventuelle. Testez également et
régulièrement certaines fonctions du site, comme les formulaires de contact lorsque le site en
comporte.

16.10 REVUE DES PERMISSIONS

Faire une revue périodique des droits de vos utilisateurs est une action nécessaire et salutaire. Il
n’est pas rare de constater a posteriori que certaines actions trop permissives ou dangereuses
sont laissées à portée de vos utilisateurs. Prenez le temps de revoir votre schéma de sécurité
afin de vous assurer que vos utilisateurs ne seront pas amenés à faire des actions dont ils ne
comprendraient pas les conséquences.
Vérifiez également la fréquentation de votre site, les comptes utilisateurs dormants ou n’ayant
jamais été activés, les comptes utilisateurs nouvellement créés pour vérifier s’ils sont légitimes.

En résumé
La maintenance d’un site internet est un processus nécessaire dont l’objectif est d’assurer
son fonctionnement dans le temps. Votre site est comme toute machine en marche : bien
qu’automatique et autonome, il n’en requiert pas moins toute votre attention.

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 257 — #281
✐ ✐

Index

Symboles Atom 51
auteur 125, 131, 136
7-Zip 4

A B
back-office 7, 36
Accès Enregistré 133
balise Meta 159
Accès Invité 133
balise Meta 158
Accès Public 133
bannière 177–179, 195, 207, 212, 213
Accès Spécial 133
bannière commerciale 207
accessibilité 35
base de données XVI, XIX, 5, 8, 10, 11, 14,
activation de compte 134
21–25, 27, 29–31, 35, 38, 48,
administrateur 45, 125, 132 53–57, 84, 89, 172, 221, 232
administrateurs réseaux 3 bibliothèque 98
administration du site 171, 183, 222 Bing 159
adresse IP 23 blog 72, 158, 159
AFUJ, Association francophone des utilisateurs de Bloquer un utilisateur 128
Joomla! XVII, 28 Bootstrap 19, 27, 35, 43, 98, 123
agrégateur RSS Voir lecteur RSS breadcrumbs Voir fil d’Ariane
ajouter un lot d’images 103 buzz 158
ajouter un utilisateur 127
ajouter une image 102
alias 84, 144, 179, 180, 182 C
AllEvents 186 cache 23, 29, 30, 52, 210, 231, 252
Alsacréations 35 Captcha 50, 134, 230
annuaire 158 catégorie 71, 72
arborescence 61, 140, 180–182 catégorie parente 66, 70
arbre des catégories 74 cellules 92
Archivage 253 certificat SSL 54
archive 88, 174 chaîne éditoriale 34
article en vedette 80, 143 changer la langue 172, 240, 247
articles 51, 61–64, 67–71, 73–77, 172, 193, charte graphique XV, 5, 8, 33, 35–37, 39, 98,
208, 210–212, 215, 218, 219, 222, 157, 159, 181, 193–195
230 clients 125, 131, 178, 179
ascenseurs 215 CMS XV, XXI, 33–36, 38, 46
Assignation de menus 197, 227 CodeMirror 230
assigner un module 154 Coller depuis Word 92

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 258 — #282
✐ ✐

258 Créez votre sites Web avec Joomla!

communauté française de Joomla! 16 éditeur de texte 3, 4, 24, 49, 106, 172, 214, 230
compatibilité ascendante 19 éditeur HTML 91
composants 48, 51, 52, 171, 172, 177, 182, éléments de menus 210, 221
231 email cloaking Voir masquage des adresses
compte 126, 210, 214, 215, 220, 229 électroniques
compte utilisateurs 50 Enregistré 131
Configuration 134 environnement de production 7
configuration.php 20, 24 Envoi d’e-mails en nombre 129
connexion ADSL 53 ergonomie 35, 37, 39, 41, 46, 70, 71, 75, 77,
connexion Internet 51 79, 94, 139, 151, 159, 183, 194,
contacts 144, 149, 172, 179, 180 195
Contacts en vedette 144 espace d’administration 12, 17, 18, 30, 32, 36,
Content Management System Voir CMS 38, 42, 45, 48, 53, 54, 126, 166,
167
cookies 51, 168
espace de configuration 47
copie cachée 130
espace disque XIX, 23
copier 68
Exalead 159
corbeille 67, 88, 151, 253
extensions XXIII, 62, 171–173, 175, 176, 193,
création de comptes 134
231, 239, 240
créer un dossier 100
extensions autorisées 99
Créer un niveau d’accès 133
eyetracking 159, 194, 206
CSS 35, 37, 49, 86, 91, 149, 198, 199, 203,
206, 210, 230
CSS3 19 F
Facebook 59, 62, 115, 158
D Fade 227
Fenêtre-cible 147
Dailymotion 59, 112
feuille de style 37, 166
date de création 84, 148
fichier de configuration 48, 53, 57
date de modification 148 fil d’actualité 144, 181, 216
date de publication 84, 87, 148 fil d’Ariane 41, 195, 216
débogage 52 File Uploads 57
décompression 4 FileZilla 4, 10, 25, 32, 163
Déconnecter un utilisateur 129 filtrage par date relative 210
Découvrir 175 filtre de langue 232, 242
déplacer 68 filtres 63, 126, 176, 208
derniers inscrits 215 Finder 231
description du site 160 Firefox 5, 86, 168
design adaptatif 195 Flexslider 223, 224
développeurs 18 flux d’actualité 207, 219
déverrouillage 67, 88, 142, 251 flux RSS 48, 51, 75, 181
Display Errors 56 footer 195, 209
DNS 23 Format de date 74
Domain Name System Voir DNS format XML 181
données d’exemple 39, 63, 79, 83, 99, 108 formulaire de connexion 146, 207, 222
droits 75, 142 formulaire de contact 146
droits de publication 129 framework 18, 19, 43
droits légaux 161 front-office 36
droits sur les articles 85 FTP XIX, 3, 4, 12, 32, 54, 92, 103, 163, 165,
174
E fuseau horaire 54

e-commerce 177, 195


ECM 34
G
Éditeur 131 GED 34

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 259 — #283
✐ ✐

Index 259

gestion de contenu XV, XVI, 33, 34, 172 J


gestion des droits XX, 18, 66, 75
JavaScript 18, 158, 166
gestion des groupes 131
JCE 50
gestion des médias 99
JCK Editor 233
gestion des utilisateurs 34, 42, 43, 126
JoomlaDay XVII
gestion électronique des documents Voir simili
GED, Voir simili GED Joomlapéros XVII
Gestionnaire 132 JoomSpirit 201, 204, 223, 247
gestionnaire d’articles 79 jpeg 97
gestionnaire de catégories 80 jQuery 225
gestionnaire de contenu 59, 75
gestionnaire de menu 141
gestionnaire de redirection 177, 185
L
gestionnaire des articles 80 LAMP (Linux, Apache, MySQL, PHP) XIX
gif 97 Langue du site 135
Gmail 229 langue par défaut 239, 240
Google 35, 98, 104, 158–160, 163, 164, lecteur RSS 181
166–170, 229 licence GNU/GPL XV, XIX
Google Analytics 46, 166 lien hypertexte 93
Google Chrome 5 lien parent 147, 150
Google Reader 75 Liens de menu 142, 143, 245
groupes 125, 126, 131 liens Web 145, 172, 182, 219
Groupes utilisateurs 132 LinkedIn 115
groupes utilisateurs enfants 130
Linux XVI, XIX, 3, 5, 8, 55, 104
GZIP 53
lire la suite 70, 71, 73, 76
localhost 7, 11, 12, 14, 25, 42
H logiciel client-serveur XVI, 8
header 195 logiciel de décompression 3, 4
hébergement XIX, 9, 10, 20, 23–25, 27 logo 195, 204
hébergeur 3–6, 8–10, 12, 16, 20, 22–25, 31, 32
hébergeur mutualisé 54
héritages 85, 135
M
htaccess 162 Macintosh XVI, 3, 5
HTML 5, 20, 35, 49, 86, 91, 92, 130, 149, 158, Magic quotes 56
172, 179, 198, 199, 213, 214, 218, Mambo XV, 19
230 masquage des adresses électroniques 230
HTML5 19 Mbstring 57
médias 97
I membres 125, 131
Iconv 57 menu haut 140, 152, 202
identification LDAP 229 menu membre 140, 153
iframe 144, 215, 216 menu principal 83, 151
IIS 7 163 menus 83, 139–141, 219, 245
indexation 184, 219, 221, 230, 231 message interne 183
infographiste 95 messagerie interne 251
installateur 10, 12 métadonnées 51, 66, 84, 158, 160, 181, 212
interface homme-machine 139 micro-blogging XVI
Internet Explorer 5, 86, 97, 168 migration 8, 23
Internet Protocol 23 miniatures 99
interopérabilité 8, 26 Mises à jour 254
introductions 148 mode dynamique 210
invité 131 mode legacy 19
ITPShare 117 Modèle vue contrôleur Voir MVC

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 260 — #284
✐ ✐

260 Créez votre sites Web avec Joomla!

module de recherche 220 phpinfo() 57


modules 77, 172, 193, 197, 200, 207–210, php.ini 3, 53
213, 222, 223, 230 phpMyAdmin 11, 12, 14, 23, 24, 31
monétisation 195 Picasa 104
mot de passe 127, 134, 145 Pinterest 117
moteur de blog 34 plan média 86
moteur de recherche 9, 35, 39, 41, 51, 62, 95, plugin 26, 41, 43, 172, 175, 214, 229–232
96, 157–165, 170, 183, 194, 195, png 97
219, 220, 232 positionnement 79, 84, 86, 158, 160, 161, 165,
mots-clés 160 170
Mots de passe 130 PostgreSQL 20
MVC 18 profil utilisateur 153
MySQL XVI, XIX, 6–8, 20–22, 27, 55 Proposer un article 153
MySQLi 55 Proposer un lien Web 153
public 131
N publication 87
publication de contenu 79
navigateur 3, 5, 11, 12, 17, 24, 36, 48, 53, 67,
69, 71, 76, 86, 88, 95, 97, 158,
165, 172, 231 Q
navigation 54, 183, 195, 217, 219, 230 Quick Icon 231
Netvibes 75
niveau d’accès 126, 133, 180–182, 208, 210
R
no follow 164
nom de domaine 7, 9, 12, 23 racine FTP 54
Note 148 Really Simple Syndication Voir flux RSS
Notepad++ 4 recherche 127, 145
notes d’utilisateurs 129 Rédacteur 131
nouveau menu 153 rédiger sur le Web 160
nouveaux groupes 132 redimensionner 98
nouvel utilisateur 127 redirection 181, 182, 185, 212, 214, 219, 232
réécriture d’URL 162, 165
référencement 9, 51, 66, 71, 79, 84, 95, 157,
O 158, 160, 165, 170
objets ACL 18 Register Globals 56
objets Joomla 18 réseaux sociaux 115
Open basedir 56 responsive 19, 27, 36, 195
open source XV, XVI, 1, 27 robots 150, 164
Open Source Matters XV, XVII ROI 166
Opera 86 RSS 51, 62, 75
Ordre d’affichage 150
Output Buffering 57 S
Safari 86
P Safe Mode 56
page d’accueil 11, 18, 37, 42, 43, 61–63, 70, Search Engine Friendly Voir SEF
73, 75–77, 152 Search Engine Optimization Voir SEO
PageRank 159 sécurité du site 176
pagination 74 SEF 158, 160, 232
partie publique du site 65 sélecteur d’affichage 73
permissions 55–57, 125, 134, 176, 178, 179, sémantique 62
182, 183, 199 Sendmail 55
PHP XVI, XIX, 5–8, 18, 20, 22, 27, 53, 55–57, SEO 158, 160
91, 230 serveur 5, 221

✐ ✐

✐ ✐
✐ ✐
“Meyer_72093” (Col. : 100 % Pratique) — 2015/2/24 — 18:22 — page 261 — #285
✐ ✐

Index 261

serveur Apache XVI, XIX, 6–8, 20 Traitement 142, 150, 244


serveur de messagerie 55 transmission sécurisée 214
serveur dédié 23 TrayIcon 6
serveur distant 8 TTL 23
serveur IIS 20 Twitter XVI, 59, 62, 98, 115, 158
serveur local 8, 12 type de menu 153
serveur mutualisé 23 types de droits 135
Session auto start 57 typographie 95
Session Save Path 57
sessions 53
Short open tags 57
U
simili GED XVI un bon mot de passe 130
Simple Image Gallery Extended 108 Unicode Aliases 163
site multilingue 241 URL 64, 84, 93, 106, 149, 157, 158, 163, 165,
Slide 227 166, 179, 181, 182, 185, 215, 216,
slideshow 108 232
Slideshow CK 110 URL A, B, et C 71
smartphones 98 URL externe 144, 149
SMTP 55 UTF-8 35
Sous-catégories 72
sous-menus 140
V
SQL 23, 52
statistique 157, 165, 166, 221 Version 71, 90, 135, 254
statut 63, 80, 86 Vider la corbeille 68, 89, 151
Statut multilingue 222, 249 VirtueMart 41
suffixe 163 visiteurs 131
suffixe de classe 206, 247
Suivis 178 W
super-administrateur 13
super-utilisateur 132, 134 W3C 5, 86
suppression d’un menu 154 WampServer 6, 7, 10, 11, 20, 23
Supprimer un groupe 133 Web 3.0 62
Supprimer un niveau d’accès 134 web sémantique 35
syndication de contenu 181 Windows XVI, 3, 5, 98, 104, 165
système d’exploitation XVI, 3 Word 92
WordPress XVI
workflow 33
T
WYSIWYG 49, 91
tableau 92
tableau de bord 42
Tableless 35
X
tags 64, 71, 73, 84, 145, 185, 221, 222 XHTML 5, 35
taille d’affichage 179, 220 XML 20, 57
taille maximale 99
template 4, 26–28, 35–37, 43, 48, 62, 73, 147,
166, 167, 172, 193, 194, 196–200,
Y
204, 206–209, 219, 220, 225, 230 Yahoo! 159
Time To Live Voir TTL YouTube 59, 112
TinyMCE 50, 91, 172, 230
titre 159
titre de catégorie 64
Z
traductions 243 Zlib 20, 57

✐ ✐

✐ ✐

Vous aimerez peut-être aussi