J3.x

Débuter avec les Templates

From Joomla! Documentation

This page is a translated version of the page J3.x:Getting Started with Templates and the translation is 100% complete.

Other languages:
български • ‎Deutsch • ‎English • ‎español • ‎français • ‎hrvatski • ‎Bahasa Indonesia • ‎Nederlands • ‎português do Brasil • ‎русский • ‎українська

Introduction

Joomla! 
≥ 3.0
série

Ce tutoriel d'introduction va vous donner un aperçu du système de gestion des templates de Joomla! et de ce que vous pouvez faire avec ceux-ci mais également la façon dont vous pouvez les personnaliser selon vos besoins.

A quoi sert un template ?

J3x-modèle-exemple-screenshot-fr.png

Un template contrôle l'apparence et la mise en page d'un site. Il fournit le framework qui réunit les éléments communs, modules et composants, ainsi que la feuille de style en cascade du site. Le front-end, tout comme le back-end du site, sont dotés de templates.

Lors de la première installation de Joomla!, plusieurs templates sont automatiquement inclus. Vous pouvez trouver nombre d'autres templates sur des sites extérieurs. Certains sont disponibles gratuitement sous diverses licences, d'autres sont payant. En outre, de nombreux développeurs peuvent créer des templates personnalisés. Et vous pouvez également créer votre propre template.

Les templates sont gérés dans le Gestionnaire de Templates, accessible depuis le menu Extensions du back-end (administration) de votre site.

Pourquoi Joomla! utilise des templates ? [Un guide pour débutants]

Joomla! est conçu de façon à séparer les tâches principales impliquées dans la production d'un site web, permettant ainsi une maintenance efficace du logiciel. Une de ces tâches est de créer l'esthétique (l'apparence, le ressenti et la mise en page) du site. Ce qui inclut des prises de décisions, comme définir les éléments de contenu (composants, modules et plugins) que vous souhaitez placer dans une page donnée.

Lors de la création d'une page web, l'emplacement de la plupart des éléments restera le même (menus, emplacements des bannières, des sidebars, etc.). En outre, vous souhaiterez créer une apparence identique pour toutes les pages (polices, styles d'entête, combinaison de couleurs, etc.). Pour certaines parties du site, vous pouvez modifier l'apparence générale afin d'indiquer un objectif différent pour ces pages (comme une section blog). Un peu de planification est nécessaire pour cela, mais une fois que vous avez établi la mise en page générale de votre site, il vous restera ensuite à produire chaque page de contenu.

Et c'est là qu'intervient le template. Vous pouvez soit écrire tout le code pour chaque page séparément, ou utiliser un template pour chaque section majeure de votre site, ainsi lorsque vous créez une nouvelle page, il ne vous restera plus qu'à "remplir les blancs". Ok, peut-être n'est-ce pas si simple, mais ce tutoriel est conçu pour vous guider pas à pas dans l'utilisation effective de template, en commençant par comment utiliser un template et pour finir par comment créer votre propre template.

  1. Utilisez un des templates fournis avec Joomla!
  2. Téléchargez un des nombreux templates gratuits disponibles sur internet.
  3. Achetez un template pour le modifier ou créez-en un de A à Z si vos besoins ne peuvent être satisfaits d'une autre façon.

Résumé – un template contrôle l'apparence de votre site tout en permettant à l'administrateur du site de se concentrer davantage sur le contenu.


Ce que vous pouvez faire

Un template permet de définir la façon dont le contenu sera affiché par un navigateur web ou un écran de lecture. Voici quelques façons d'opérer sur votre site propulsé par Joomla.

L'affichage

C'est dans le template que vous configurez le design de la mise en page principale de votre site. Cela inclut les emplacements de différents éléments (modules). Par exemple, vous pouvez contrôler l'emplacement des menus, formulaires de connexion, bannières publicitaires, sondages, etc.

J3x-template-example-module-changes-screenshot-fr.png

Vous noterez les changements dans la mise en page du contenu !

Le style du corps principal (article) de la page peut être modifié (vous pouvez choisir parmi différents types d'affichages comme article de blog, d'actualité, etc.) en fonction de la mise en page du template. *Voir l'image pour exemple. Vous noterez les différences de mise en page, mais le look reste cohérent. La barre latérale contenant les modules a été déplacée de gauche à droite et son ordre réarrangé.

Si le template est conçu pour offrir plusieurs choix, vous pouvez également modifier de façon "dynamique" l'emplacement du contenu de votre site, peut-être en plaçant le menu principal sur la partie droite ou gauche de l'écran.

Combinaison de Couleurs

En utilisant les CSS du design du template, vous pouvez modifier les couleurs de vos fonds, textes, liens ou à peu près tout ce que vous modifiez avec votre code HTML habituel. Certains templates proposent de modifier les couleurs dans le gestionnaire de templates, pour d'autres templates, vous devrez modifier le(s) fichier(s) CSS du template.

Images et Effets

Vous pouvez également contrôler la façon dont les images s'affichent sur la page, et même créer des effets flash ou inclure des applications AJAX comme les menus déroulants.

Polices

Le même procédé est applicable aux polices. Les styles de police sont tous configurés dans le(s) fichier(s) CSS du template afin de créer un aspect uniforme sur l'intégralité de votre site, ainsi il est extrêmement simple de changer le look global en modifiant seulement un ou deux fichiers et non pas chaque page.

Solutions Spécifiques aux Navigateurs

Un template peut être conçu pour s'afficher différemment sur différents navigateurs web afin de profiter pleinement des derniers développements sans pour autant rendre votre site inaccessible à ceux qui ne sont pas en mesure d'exécuter les toutes dernières mises à niveau du système (de même à certaines sociétés qui limitent l'utilisation de logiciels par leurs employés).


Les templates disponibles

Les templates suivants sont disponibles par défaut après une installation standard de Joomla! 3.x

Les templates de site

  • Protostar (template par défaut)
  • Beez 3

Les templates d'administration

  • Isis (template par défaut)
  • Hathor


Changer de template

Pour changer le template par défaut, que ce soit pour le site (Front-end), comme pour l'administration (Back-end), procédez comme suit :

Accéder au Gestionnaire de template

  • Cliquez sur : Extensions  Templates

Extension-manager-template-manager-3x-fr.png

Vous pouvez désormais voir l'écran de Gestion des Templates.

Remarque : Si vous ne voyez pas Templates listé dans le menu Extensions, c'est probablement parce que vous n'êtes pas connecté en tant que Super User (Super Utilisateur). Seuls les Super Users peuvent voir cet élément de menu.


Gestion du template par défaut

Depuis cet écran, vous pouvez gérer vos templates pour le front-end et le back-end. La vue "défaut" affiche vos styles de templates de front-end installés. Le style "défaut" pour le front-end est indiqué par une étoile, dans l'image ci-dessous c'est Protostar qui est marqué par défaut.

Pour changer le style par défaut et passer à Beez3:

  • cliquez sur la case située à gauche du nom du style pour le sélectionner ;
  • cliquez sur "Défaut" dans la barre d'outils ;

L'étoile est désormais associée à Beez3 et non plus à protostar. Vous pouvez sinon cliquer sur l'étoile "défaut" noire pour indiquer, de manière rapide, un template comme template par défaut.

Vous pouvez utiliser les filtres des menus déroulants ou les filtres de recherche au-dessus de la liste pour limiter le nombre de templates affichés dans la liste. D'autres options sont :

  • Modifier - pour modifier les propriétés du modèle et les assignations de ce modèle aux pages (voir ci-dessous),
  • Dupliquer - pour dupliquer le template,
  • Supprimer - pour supprimer un template (qui ne peut pas être celui par défaut).

30-Switching-templates-1-fr.png


Assigner plusieurs templates dans le site public (frontend)

Joomla! vous donne la possibilité de basculer entre deux - ou plus - styles sur le front-end. Ceci se fait avec la fonction "Affecter à un menu", de sorte que vous pouvez appliquer des styles différents pour chaque menu ou pour un seul élément de menu. Ce qui permet à des "pages" spécifiques qui sont définies par des liens de menu d'avoir un style "spécifique". Les styles peuvent provenir de templates différents.

Méthode pour la gestion de template

Cliquez sur : Extensions  Gestion des templates

  • Vos styles de template installés s'affichent, maintenant choisissez un style qui ne soit pas défini comme votre style par défaut. L'étoile jaune indique que le style est "par défaut".
30-Template-manager-select-edit-fr.png
  • Cliquez sur le nom du style ou cocher la case située à gauche du nom du style, puis cliquez sur ""Modifier" dans la barre d'outils.
  • La page "Gestion des templates : [ Modifier le style] " s'affiche, allez dans l'onglet "Affecter à un menu" et choisissez les éléments de menu sur lesquels ce style sera affecté.

30-Switching-templates-assign-menus-fr.png

  • Cliquez sur "Enregistrer" dans la barre d'outils. Et voilà, c'est fait ! L'élément de menu affichera désormais le template sélectionné.
  • Allez sur le front-end de votre site et actualisez la page pour voir les modifications.

Méthode pour la gestion de menu

  • Allez dans l'élément de menu Menus  Nom du menu
  • Choisissez un élément de menu en cochant la case située à gauche de son nom, puis cliquez sur le bouton Modifier de la barre d'outils. Vous pouvez sinon tout simplement cliquer sur le nom de l'élément de menu pour le modifier.
  • Sur l'écran Modifier un lien de menu, dans Style du template, choisissez le style de template souhaité et cliquez sur le bouton Enregistrer.

30-Menu-item-template-management-edit-fr.png

  • Allez sur le front-end de votre site et actualisez la page pour voir les modifications.


Voir également


Installation d'un template

Installation via la console d'administration (Paquet de template)

Connectez-vous à la console d'administration de votre site (www.votre-site.com/administrator/)

Cliquez sur Extensions -> Gérer

30-Installing-template-navigate-fr.png

Vous vous trouvez alors sur la page : "Extensions : Installation"

Vous pouvez installer vos Templates, Plugins, Modules, Composants et Langues depuis ce gestionnaire. Vous avez plusieurs options :

  1. Installer à partir du Web - sélectionnez une extension listée sur le répertoire des extensions Joomla! - JED
  2. Transférer un paquet - sélectionnez un paquet sur ordinateur, envoyez-le et installez-le
  3. Installer à partir d'un répertoire - entrez le chemin d'accès de votre paquet sur votre serveur web
  4. Installer à partir d'une URL - saisissez l'adresse URL du paquet

L'option 4 fait tout à votre place, votre environnement doit être correctement configuré pour le permettre. L'option 2 nécessite que vous téléchargiez l'extension sur votre ordinateur. L'option 3 vous oblige à décompresser et déplacer les dossiers et fichiers sur votre serveur web. Toutes ces options exigent que le serveur web puisse avoir les accès en écriture à l'espace web.

Ici, nous optons pour la seconde méthode : Transférer un paquet.

Glisez-déposez le fichier dans la zone prévue afin de le transférer. Vous pouvez aussi cliquer sur le bouton "Ou rechercher le fichier" pour sélectionner le paquet depuis votre ordinateur et cliquer sur le bouton "Ouvrir".

30-Installing-template-upload-package-file-fr.png

Si le paquet ne contient aucune erreur alors s'affichera un message d'installation effectuée avec succès comme celui ci-dessous :

30-Installing-template-install-success-fr.png

Vérifier l'installation

Allez sur l'entrée dans le sous-menu à droite 'Gestion', réglez le filtre du type dans les outils de recherche sur 'Template'. Le template installé doit s'afficher dans la liste. Si c'est le cas, le template est alors correctement installé. Vous pouvez dès lors assigner un des styles à un élément de menu ou indiquer le style en tant que style par défaut. Pour les templates d'administration, assurez-vous que vous avez les deux fenêtres du gestionnaire de template. Activez le nouveau template dans l'une d'elles et réinitialisez-le dans l'autre si quelque chose n'allait pas.

Installation par FTP (fichier de template décompressé)

Les templates peuvent également être installés via FTP sans avoir à les empaqueter. Sélectionnez simplement le dossier du template sur votre ordinateur et chargez-le sur votre serveur, en utilisant votre logiciel FTP préféré. Assurez-vous de bien charger le dossier dans le répertoire : /chemin_vers_joomla/templates/ - où /chemin_vers_joomla/ est l'emplacement de votre installation Joomla sur le serveur. Cette méthode est généralement utilisée lorsque vous créez vous-même un template et que vous ne souhaitez pas l'empaqueter pour l'installer, ou si vous souhaitez charger plus d'un template à la fois. Il vous faut ensuite vous rendre dans le gestionnaire d'extensions et cliquez sur "Découvrir" dans le sous-menu. Cliquez sur le bouton "Découvrir" dans la barre d'outils si votre template ne s'affiche pas immédiatement. Une liste des éléments désinstallés sur le FTP devrait alors s'afficher. Cliquez sur la case située à gauche de votre template, puis cliquez sur le bouton Installer.

Avertissement : N'essayez pas d'utiliser le FTP pour installer des Composants, Modules et Plug-ins si vous êtes débutant ou novice. Ces éléments nécessitent des entrées dans la base de données devant être insérées manuellement si vous contournez le pack d'installation.