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 53% complete.
Outdated translations are marked like this.
Other languages:
Bahasa Indonesia • ‎Deutsch • ‎English • ‎Nederlands • ‎español • ‎français • ‎hrvatski • ‎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'aspect général et la mise en page d'un site. Il fournit le cadre qui rassemble les éléments, modules et composants communs, ainsi que les feuilles de style en cascade du site. Le Frontend et le Backend du site ont tous deux des templates.

Lorsque Joomla ! est installé pour la première fois, plusieurs templates sont automatiquement inclus. Vous pouvez trouver de nombreux autres templates sur d'autres sites web. Certains sont disponibles gratuitement sous différentes licences, d'autres sont payants. En outre, il existe de nombreux développeurs qui peuvent créer des templates personnalisés. 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 backend (Administration) de votre site.

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

La façon dont Joomla ! est conçu sépare les tâches clés impliquées dans la production d'un site web pour une maintenance efficace du logiciel. L'une de ces tâches consiste à créer l'esthétique (l'aspect, la convivialité et la mise en page) du site. Il s'agit notamment de prendre des décisions concernant 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, emplacement des bannières, barres latérales, etc.) En outre, vous voudrez créer la même présentation (polices, styles d'en-tête, palette de couleurs, etc.) pour chaque page. Pour certaines parties du site, vous souhaiterez peut-être modifier l'aspect général afin d'indiquer que ces pages sont destinées à un usage différent (une section de blog, par exemple). Une certaine planification est nécessaire à cet effet, mais une fois que vous avez défini la présentation générale de votre site, il vous reste à produire chaque page de contenu.

C'est là que le template entre en jeu. Vous pouvez soit écrire tout le code de chaque page séparément, soit utiliser un template pour chaque grande section de votre site, de sorte que lorsque vous voulez créer une nouvelle page, vous n'avez qu'à "remplir les blancs". D'accord, ce n'est peut-être pas si simple, mais ce tutoriel est conçu pour vous guider pas à pas dans l'utilisation efficace des templates, en commençant par la manière d'en utiliser un et en terminant par la manière d'en créer un pour vous-même.

  1. Utilisez l'un des templates fournis avec Joomla !
  2. Téléchargez l'une des nombreuses offres gratuites sur l'internet.
  3. Payez pour qu'un template soit modifié ou créé de toutes pièces si vos besoins ne peuvent être satisfaits d'une autre manière.

Résumé - un template contrôle l'apparence de votre site et permet en même temps à l'administrateur du site de se concentrer davantage sur le contenu réel.


= 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 frontend. 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.