Formation sur les Template Joomla : Menu vertical et styles de modules

Participez au vote ☆☆☆☆☆★★★★★

Formation sur les Template Joomla : Menu vertical et styles de modules

...

Qu'est-ce que Joomla

C'est un moyen fantastique pour créer un site Internet sans toucher de code. De base, Joomla est un système de gestion de contenu qui vous permet de créer, d'organiser du contenu et d'étendre les fonctionnalités de votre site avec des fonctions déjà intégrées. Tout au long des différents chapitres, nous allons parcourir les principales fonctionnalités de Joomla et allons vous démontrer comment :

ajouter du contenu
comment organiser le contenu
comment créer la navigation du site
comment relooker le site avec des modèles pré-définis
comment installer de nouvelles fonctionnalités à votre site

Joomla vous permettra de créer et de gérer votre site Internet sans avoir besoin de connaissances de programmation particulières. Le contenu des pages est stocké dans une base de données et non pas dans des pages HTML. Si vous avez l'habitude de travailler avec des outils comme Dreamweaver, vous devez d'abord créer vos pages sur votre ordinateur et ensuite les envoyer sur le serveur qui héberge votre site. Avec Joomla vous avez accès à une partie administration de votre site qui vous permet de créer vos pages et ensuite de les sauvegarder dans votre base de données.

En plus de vous permettre d'ajouter des pages Web, Joomla vous offre la possibilité d'installer des modules et composants par exemple pour gérer vos albums photos ou mettre en place un magasin en ligne. L'installation de ces fonctionnalités supplémentaire est très simple car il vous suffit de télécharger sur votre poste les fichiers concernés puis de les installer depuis l'administration de votre site.

Joomla est un outil gratuit qui est maintenu à jour par une communauté de développeurs.

Pour rendre cette formation le moins tributaire possible des mises à jour de Joomla, nous allons baser notre formation sur la version 1.5.8 de Joomla, la dernière version à ce jour et corrigerons les modules de formations touchés par une mise à jour majeure.

Qu'est-ce qu'un Système de Gestion de Contenu

La plupart des webmasters ont besoin d’une solution Web pour mettre en ligne un site et organiser son contenu.

Un SGC pour Système de Gestion de Contenu ou en anglais CMS pour Content Management System, est un outil qui permet d’organiser et de présenter le contenu d’un site Web. La plupart des CMS que l’on trouve sur le marché sont simples d’utilisation et ne demandent pas ou peu de connaissance technique.

Toutefois, ceux-ci peuvent bien entendu être modifiés ou adaptés par un développeur.

Un CMS est composé de deux applications :

l’application de gestion du contenu permettant d’administrer le contenu du site

l’application qui permet d’afficher ce même contenu sur le site Web

Les principaux objectifs d’un CMS sont :

D’identifier les utilisateurs, leurs rôles ainsi que leurs droits d’accès au site
D’organiser le contenu dans différentes sections et catégories pour une meilleure structuration du contenu
De définir le processus de création et de déploiement du contenu
De contrôler les versions du contenu
De déployer le design du site pour une meilleure présentation du site
De fournir des outils pour ajuster les fonctionnalités du site

Il existe une multitude de CMS sur le marché, certains sont payants d’autres gratuits comme le CMS Joomla.

INSTALLER JOOMLA

Certains outils comme par exemple un serveur Apache, un interpréteur PHP ou une base de données MySQL sont indispensables pour pouvoir faire fonctionner Joomla.

Dans ce chapitre vous découvrirer comment installer Joomla en local et comment transférer votre site chez un hébergeur.

Installer Xampp ainsi qu'un site Joomla

Pour pouvoir travailler avec Joomla en local, vous allez tout d'abord devoir installer un serveur sur votre poste. En effet, pour que Joomla puisse être exécuté, il vous faut entre autres, un serveur Apache, une base de données MySQL ainsi qu'un interpréteur PHP. Soit vous installez chaque outil séparément mais cela nécessite de connaissances avancées dans le domaine, soit vous installez un outil comme XAMPP ou WampServer qui installera tous ces outils en une fois.

Installer WampServer

L'avantage d'installer un site en local est de ne pas avoir besoin d’une connexion Internet pour mettre à jour son site. De plus, il est plus simple et plus rapide d’installer de nouvelles extensions car rien ne transite sur le réseau et personne à part vous ne peut accéder au site.

Pour faire fonctionner Joomla sur votre poste, vous allez avoir besoin d’installer au préalable, 3 outils indispensables :

Un serveur HTTP Apache pour pouvoir lire vos pages

Le langage de scripts PHP pour pouvoir interpréter le langage PHP

Une base de données MySQL pour pouvoir stocker le contenu Joomla

Ces trois outils peuvent être installés séparément mais il existe des programmes comme WampServer ou Xampp vous permettant d’installer les trois en même temps.

Pour les personnes travaillant sur un Mac il existe le pendant de WampServer qui s’appelle Mamp et qui peut être téléchargé via ce lien. De plus, Joomla peut très bien fonctionner sur un serveur Microsoft IIS mais pour des raisons de simplicité, je vous conseille de l’installer sur un serveur Apache.

Pour commencer, je vous laisse donc télécharger la dernière version de WampServer directement sur cette page. A noter qu'il n'est pas nécessaire de remplire le formulaire. Le lien de téléchargement se trouve au bas de la page.

Une fois l’envoi du fichier terminé, veuillez double-cliquer sur le programme afin de démarrer l’installation. Laissez le répertoire d’installation par défaut c:\wamp et cochez la création d’une icône sur votre bureau puis cliquer sur Install. Le programme d’installation va peut-être vous demander quel navigateur Web par défaut que vous voulez utiliser et concernant les paramètres mail PHP, laissez les valeurs par défaut.

Voilà, en cliquant sur le bouton Finish, WampServer va démarrer les services et votre poste est fin prêt pour faire fonctionner votre site en local. En tapant dans un navigateur localhost, vous devriez voir s’afficher cette page:

Si tel n’est pas le cas, veuillez regarder la couleur de l’icône WampServer en bas à droit, celle qui ressemble à une demi-lune. Si celle-ci est jaune c’est que le démarrage n’a pas fonctionné correctement. Dans la plupart des cas le problème est lié au port 80. En effet, WampServer fonctionne sur le port 80 et si une autre application utilise déjà ce port, le démarrage ne sera pas possible. Si vous êtes dans ce cas de figure, je vous laisse fermer Skype et fermer WampServer puis le redémarrer avec l’icône qui se trouve sur votre bureau.

L’icône WampServer devrait maintenant être blanche et la page localhost devrait s’afficher correctement. Pour pouvoir utiliser Skype en même temps que WampServer, il vous faut décocher l’option Utiliser les ports 80 et 443 comme alternative dans les options avancées Skype puis Connexion.

Si vous voulez changer la langue de WampServer d'anglais à français, veuillez faire un clique droit sur l'icône WampServer dans la barre d'icône en bas à droite de votre bureau puis Langue et sélectionner French

Créer une base de données

Une fois WampServer installé, il ne vous reste plus qu’à créer une base de données qui contiendra par la suites les tables et contenu de Joomla.

Si tout c’est bien passé, en rentrant localhost dans votre navigateur Web, vous devriez voir s’afficher une page grise contenant la configuration du serveur les outils, les projets ainsi que les alias.

Dans les outils, vous avez un lien qui s’appelle phpmyadmin. Cliquez sur celui-ci et une interface gratuite pour la gestion de base de données MySQL s’appelant phpMyAdmin s’exécute dans une page Web.

Par défaut vous avez sur votre gauche deux bases de données (information_schema , mysql) contenant des tables systèmes utiles au fonctionnement de phpMyAdmin. Nous allons maintenant créer notre propre base de données en rentrant le nom de la base de données par exemple joomla_159 dans le premier champ de la section MySQL localhost puis cliquer sur le bouton Créer. Un message vous informe que la base de données joomla_159 a été créée.

En cliquant sur cette base de donnée à gauche de votre écran vous constatez qu’elle ne contient pour l’instant aucun table. C’est lors de la procédure d’installation de Joomla que les tables seront générées.

Par défaut, l’accès à votre base de données n’est pas sécurisé. En effet, pour ouvrir cette base de données, seul le nom d’utilisateur root est nécessaire, pas besoin de mot de passe. Comme vous utilisez cette base de données en local sur votre poste, il n’est pas forcément nécessaire de créer un utilisateur avec mot de passe. Néanmoins, voici la procédure à suivre pour ajouter un utilisateur:

Comme on se trouve pour l’instant dans la configuration la base de données que nous venons de créer, veuillez tout d’aborder cliquer sur le bouton contenant une maison en haut à gauche puis cliquer sur l’onglet Privilèges qui se trouve en haut à droite. Cette page vous liste les utilisateurs définis dans le système de base de données et comme vous pouvez le constater, il n’y a que l’utilisateur de défini.

Pour ajouter un nouvel utilisateur, cliquer sur le lien Ajouter un utilisateur juste en dessous du tableau. Rentrez le nom d’utilisateur, puis dans la liste déroulante contenant Serveur, veuillez sélectionner Local. Il ne vous reste plus qu’à effacer tout ce qui se trouve dans le champ Mot de passe et de rentrer le votre puis de le saisir à nouveau dans le champ de confirmation. A noter que le bouton Générer vous propose un mot de passe sécurisé qu’il ne vous restera plus qu’à cliquer sur le bouton Copier pour l'insérer dans les champs de mot de passe.

Ne pas oublier de noter à quelque part le userid et le mot de passe car lors de l’installation de Joomla, ces informations vous seront demandées.

Dans la section Base de données pour cet utilisateur laissez l’option Aucune cochée et pour les privilèges globaux, cliquez sur le lien tout cocher. Finalement, pour terminer la création de l'utilisateur, cliquez sur le bouton Exécuter en bas à droite.

Vous êtes maintenant prêt à installer Joomla.

Installer Joomla en local

La première étape consiste à télécharger la dernière version de Joomla soit sur le site officiel anglophone soit sur le site officiel francophone. Une fois le fichier compressé sur votre site, veuillez utiliser un outil pour décompresser son contenu.

Si vous utilisez WampServer et que lors de l’installation de cet outil vous avez laissé les paramètres par défaut, vous devriez retrouver ce répertoire C:\wamp\www. Je vous laisse créer un nouveau répertoire à l’intérieur de celui-ci et copier tout le contenu du fichier compressé Joomla à l’intérieur de ce nouveau répertoire. Pour ma part, mon répertoire va se nommer demo.

Une fois cette opération effectuée, il vous faut démarrer votre outil WampServer ou Xampp, ouvrir un navigateur Web et rentrer cette URL : localhost/demo

La première étape de l’installation de Joomla consiste à choisir la langue de la procédure d'intallation.

Une fois la langue choisie, cliquez sur le bouton suivant ouvrant une nouvelle page contenant les paramètres compatibles ou non de votre système avec Joomla. Cliquez deux fois sur suivant et à l’étape 4, vous allez devoir rentrer les paramètres de votre base de données.

Laissez le type à mysql puis saisissez le nom du serveur, en l’occurrence localhost, le nom d’utilisateur, le mot de passe ainsi que la base de donnée et cliquez finalement sur le bouton Suivant. Si tous les paramètres ont été saisi correctement, vous devriez vous retrouver sur la page de configuration FTP, sinon saisissez à nouveau vos données.

Comme vous êtes en local, vous n’avez pas besoin de saisir vos données FTP. Vous pouvez donc passer à la prochaine étape qui consiste à donner un titre à votre site ainsi que de rentrer l’adresse email et le mot de passe de l’administrateur.

Si vous êtes un débutant Joomla, cliquez sur le bouton Installer les données d’exemples qui installera des exemples de contenu dans votre site et vous permettra de mieux comprendre la logique de fonctionnement de du CMS Joomla.

Cliquez sur suivant et comme vous pouvez le lire à cette étape 7, il faut que vous supprimiez le répertoire localhost/demo/installation pour pouvoir afficher votre site. Une fois supprimé, cliquez sur le bouton Site et votre site contenant des données exemple devrait s’afficher comme ci-dessous:

Pour accéder à l’administration de votre site, veuillez rentrer cette adresse dans votre navigateur : localhost/demo/administrator. L’identifiant est admin et le mot de passe, celui que vous avez inséré à l’étape 6 de l'installation.

Transférer votre site chez un hébergeur avec JoomlaPack

Ce tutoriel a pour objectif d'expliquer comment transférer un site Joomla chez un hébergeur. En effet, une fois le site terminé localement, l'étape suivante consiste à le rendre accessible sur le Web.

Pour cela, il vous faut tout d'abord créer un compte chez un hébergeur, dans notre exemple l'hébergement a lieu chez joomlabc, puis transférer tous vos fichiers sur le serveur et enfin créer la base de données et importer son contenu.

Afin de nous aider dans ces différentes étapes, nous allons utiliser le composant JoomlaPack qui va nous permettre de sauvegarder le contenu du site local avec la base de données pour ensuite nous faciliter le déploiement. En effet, une fois cette sauvegarde effectuée, il ne nous restera plus qu'à transférer le contenu de l'archive sur le serveur puis de suivre les différentes étapes d'installation.

Transférer votre site chez un hébergeur manuellement

Effectuez une sauvegarde de votre base de données

lancez la console de gestion de base de données phpmyadmin qui devrait être accessible depuis l'adresse localhost/phpmyadmin>
sur votre gauche, cliquez sur la base de données de votre site
cliquez ensuite sur l'onglet Exporter et assurez-vous que toutes les tables de votre site Joomla soient sélectionnées dans la liste de gauche
cochez le bouton Transmettre qui se touve au début de la deuxième section puis cliquez sur le bouton Exécuter en bas à droite
enfin, enregistrez le fichier sur votre poste

Pour des informations complémentaires, veuillez consulter ce tutoriel sur la sauvegarde d'une base de données Joomla.

Créez une base de donnée sur le serveur d'hébegement

connectez-vous à la console d'administration de votre hébergement
créez une base de données ainsi que son utilisateur
accédez à votre base de données avec phpmyadmin
cliquez cette fois sur le menu Importer puis sur le bouton Parcourir et sélectionnez le fichier que vous venez de sauvegarder. Une fois le fichier de votre base de données locale sélectionné, cliquez sur le bouton Excécuter en bas à droite.
l'import du script terminé, vous devriez voir s'afficher les différentes tables dans la colonne de gauche

Modifiez votre fichier configuration.php

faites une sauvegarde de votre fichier configuration.php et gardez-la en lieu sûr

éditer votre fichier configuration.php, modifiez les variables ci-dessous et sauvegardez-le:

var $log_path = '/home/httpd/vhosts/VOTRENOMDEDOMAINESANSWWW.COM/httpdocs/logs';

var $tmp_path = '/home/httpd/vhosts/VOTRENOMDEDOMAINESANSWWW.COM/httpdocs/tmp';

var $ftp_user = 'VOTRE IDENTIFIANT FTP';

var $ftp_pass = 'VOTRE MOT DE PASSE FTP';

var $ftp_root = '/LE REPERTOIRE DE VOTRE SITE';

var $user = 'LE NOM DE L'UTILISATEUR DE LA BASE DE DONNEES';

var $db = 'LE NOM DE LA BASE DE DONNEES';

var $password = 'LE MOT DE PASSE DE L'UTILISATEUR DE LA BASE DE DONNEES';

Transférer vos fichiers et répertoires Joomla vers le serveur d'hébergement

ouvrez votre client FTP et accédez à votre espace d'hébergement. Si vous n'avez pas de client FTP, nous vous proposons de travailler avec FileZilla.

sélectionnez tous les répertoires et documents se trouvant à la racine de votre site et déplacez-les avec votre client FTP dans le répertoire de votre site

attendez la fin du téléchargement et accédez ensuite à votre site en rentrant votre nom de domaine dans un navigateur Web

si tout c'est bien passé, vous devriez voir s'afficher le contenu de votre site, autrement veuillez relire attentivement cette procédure

GESTION DU CONTENU

Sans contenu, un site Internet n'aurait pas lieu d'exister. Joomla vous offre la possibilité d'ajouter du contenu au grâce à l'utilisation d'articles. Une page web dans sa version simple correspond à un article.

Dans ce chapitre nous allons parcourir les différentes options et particularités liées à la gestion des articles offertes par Joomla.

1 - Mon article en page d'accueil

Dans ce tutoriel, vous apprendrez à ajouter du contenu sur votre page principale. Pour ce faire, veuillez cliquer sur le bouton Ajouter un nouvel article de votre panneau d'administration ou alors via le menu Contenu, Gestion des articles puis cliquer sur le bouton Nouveau fin d'ouvrir le formulaire vous permettant d’ajouter un article à votre base de données.

Avant de rentrer le contenu de votre article, vous devez au préalable définir quelques informations de base:

Tout d’abord, veuillez rentrer le titre de votre article qui sera visible sur votre site et affiché au dessus de votre article.

Puis assurez-vous que l’option Oui de Publié soit sélectionnée car sinon votre article ne sera pas visible sur votre site. Cette option vous permet par exemple de sauvegarder et de retravailler votre article sans que celui-ci soit visible sur votre site.

Ensuite, pour afficher l’article sur la page principale de votre site vous devez sélectionner l’option Oui de Page d’accueil.

... …

Utilisation des menus

Appliquer un style Artisteer™ à votre menu

Utilisez les étapes suivantes pour utiliser le style menu conçu avec Artisteer:

Aller à -> Extensions -> Gestion des modules

Ouvrir un menu existant ou en créer un nouveau et le placer dans la position "user3" .

REMARQUE: La position "user3" ne peut contenir qu'un seul menu, ou aucun.

Création de menu multi-niveaux

Voici les étapes à suivre pour créer un menu à plusieurs niveaux dans votre site Joomla:

Dans la conception de votre template Artisteer™ vous devez définir le menu à plusieurs niveaux.

(Les classes css seront générées)

Activer dans Artisteer-> Menu -> Sous-menus -> Niveaux -> Multiniveaux.

Aller à Administration (www.votre-site.com/administrator) et permettre plusieurs niveaux dans votre module de menu (Extensions -> Gestionnaire de modules. Cliquez sur le menu "'édition" (par exemple Top Menu -> Paramètres des modules -> "Toujours afficher les sous - menus ").

Définissez bien le style du menu.

Assurez-vous que vous disposez des options de menu à des niveaux inférieurs définis dans

Joomla.

Enregistrez votre travail.

Création d’un menu vertical

À partir de Artisteer 2.4, vous pouvez utiliser un suffixe de classe pour appliquer un style Artisteer à votre module de menu vertical. Vous devez avoir créé un menu vertical dans Artisteer, bien sûr.

Pour ce faire, suivez ces étapes:

Connectez-vous à l'administration Joomla et aller -> extensions -> Module . Sélectionnez le module que vous souhaitez modifier.

Allez à Paramètres du module et spécifiez le suffixe “art-vmenu”.

Gardez à l'esprit que vous devez désactiver le cache si vous créez un menu vertical ouvert

Créer un menu vertical avec des sous-éléments

Activez les niveaux multiples dans Artisteer -> Menu vertical - > Niveaux. Assurez-vous que le menu vertical fonctionne pour vous dans Artisteer.

Créez un menu avec des sous-menus dans Joomla . Les sous-menus doivent avoir des éléments parents spécifiés.

Activez les niveaux multiples dans votre module de menu (Éléments sous-menu Toujours afficher).

Utilisez “art-vmenu” en suffixe pour appliquer le style de menu vertical conçu.

Notez que les sous-éléments n'apparaîtront pas en survol, mais uniquement lorsque vous cliquez sur l'élément parent (sauf pour les menus avec des niveaux ouverts, où tous les sous éléments sont visibles).

Les Styles de Modules : versions inférieures à 3

Un rappel interressant : vos propres styles…. Changer la sidebar droite par exemple :

Dans Index.php (template), trouver :

<div class="art-layout-cell art-sidebar2"><?php echo artxModules($document, 'right', 'artblock');

?> </div> et remplacer par:

<div class="art-layout-cell art-sidebar2"><?php echo artxModules($document, 'right', 'artnostyle');

?> </div>

Dans modules.php (template), trouver la fonction :

function modChrome_artnostyle($module, &$params, &$attribs), et dans cette fonction,

remplacer <div class="art-nostyle"> par

<div class="<?php echo$params>get('moduleclass_sfx'); ?>">

Dans Template.css, mettez vos styles:

/*** -MonStyle pour sidebar droite***/

.MonStyle

{

background:#F3F6F6;

border:1px solid gray;

margin:0px 5px 5px 0px;

font-family:Arial, Helvetica;

font-size:0.95em;

}

.MonStyle li

{

margin-left:20px;

padding:1px 3px 0px 0px;

list-style-type:circle;

}

.MonStyle h3

{

font-family:Calibri, Verdana;

font-size:1.6em;

color:#FFFFFF;

padding: 0px 0px 0px 10px;

}

/*** -Fin de MonStyle pour sidebar droite***/

Aller ensuite dans votre module et entrer votre suffixe (MonStyle).

Les Styles de Modules : versions 3.0 et ultérieures

Artisteer versions 3.0 et versions ultérieures permettent d'utiliser le module personnalisé de suffixe de classes . Vous pouvez maintenant utiliser votre propre suffixe de classe avec les suffixes Artisteer standards, tels que art-article, art-bloc et art-nostyle. La fonction est assez similaire à la fonction par défaut de Joomla, exception faite de la syntaxe appropriée.

Pour activer un module avec suffixe personnalisé, suivre les étapes ci-dessous:

Définissez vos classes .CustomSuffix1 et .CustomSuffix2 dans le fichier template.css.

Connectez-vous à votre administration Joomla et aller -> Extensions -> Gestionnaire de modules. Sélectionnez le module que vous souhaitez modifier et aller aux Paramètres du module. Inscrivez dans la boîte de paramètre votre suffixe de classe personnalisée avec un espace à gauche (si vous entrez le suffixe personnalisé sans un espace à gauche, la classe css Artisteer ne sera pas modifiée et votre suffixe sera ignoré).En d’autres termes, vous pouvez utiliser:

[Espace] CustomSuffix1 CustomSuffix2 pour obtenir les classes comme:

[L'un des suffixes Artisteer] [espace] CustomSuffix1 CustomSuffix2 pour supprimer des styles de bloc Artisteer et appliquer des styles post, ou pas de style à bloc. Dans ce cas, le code résultant ressemblera à ceci:

<div class="art-article CustomSuffix1 CustomSuffix2">... </div> ou <div class="artnostyle

CustomSuffix1 CustomSuffix2">... </div>

Le dernier cas (avec le suffixe-art nostyle) va supprimer tous les styles Artisteer et appliquer votre CustomSuffix1 classes CustomSuffix2 pour le bloc.

La figure suivante vous montre les positions des modules et suffixes.