Nous allons voir dans ce tutoriel comment utiliser le framework Bootstrap de Twitter pour créer de zéro un template Joomla dit Responsive Design.
Lorsque vous créez un site, vous devez décider s'il vaut mieux créer votre propre template ou en acheter un. Vous avez également la possibilité d'en modifier un existant.
Dans tous les cas, pour être en mesure de prendre la bonne décision, vous devez comprendre le processus de création d'un template Joomla.
Nous allons tenter d'obtenir ceci :
Preview du template Joomla basé sur Bootstrap
Les templates Joomla
Joomla! est composé du front-end (le site web) et du back-end (l'interface d'administration). Les deux parties ont leurs propres templates et sont stockés dans les dossiers suivants :
- /templates pour le front-end
- /administrator/templates pour le back-end
Chaque template a son propre dossier. Dans Joomla 2.5, vous trouverez deux templates pré-installés (Beez 2.0 et Beez 5) et un template framework (Atomic) :
- /templates/beez20, template standard de Joomla
- /templates/beez5, template HTML5 de Beez20
- /templates/atomic, template framework mais peu utilisé
Notez qu'un répertoire /templates/system stocke tous les fichiers communs à tous les templates comme les pages Offline et Error.
Le répertoire du template Administrator a la même structure :
- /administrator/templates/bluestork, Bluestork, template par défaut de l'administration
- /administrator/templates/hathor, Hathor, template administrateur optionnel et accessible (Acessibilité)
Comment créer son nouveau template ?
Vous disposez de trois options pour créer un nouveau template Joomla :
- Partir de zéro avec la création d'un dossier et de tous les fichiers nécessaires
- Installer un thème de démarrage et le modifier
- Copier un template existant et le modifier
Ici, nous allons travailler sur l'option 1. Nous allons créer un template responsive (Cf. Le Responsive Design : l'UX de Joomla abat sa première carte) pour le front-end basé sur le framework Bootstrap pour Joomla 2.5 et ceci à partir de zéro. Le but ici est de comprendre la structure d'un template Joomla. Il sera alors plus facile de le personnaliser par la suite.
Le nom du template
Nous avons tout d'abord besoin d'un nom pour notre template. Ce nom apparaît dans les fichiers XML, la base de données ou encore le système de fichiers des serveurs web. Ne mettez pas de caractères spéciaux ni d'espaces dans le nom (voire pas de majuscules). Appelons ce template cocoate (ndlr : cocoate.com).
Les fichiers et le répertoire
Créez un répertoire /templates/cocoate à la racine de votre Joomla.
Dans ce répertoire nous avons besoin des fichiers suivants et d'un sous-dossier CSS (/templates/cocoate/css) :
- /templates/cocoate/index.php
- /templates/cocoate/templateDetails.xml
Le fichier "index.php"
<?php
defined('_JEXEC') or die;
?>
<!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" xml:lang="" lang="" >
<head>
<jdoc:include type="head" />
</head>
<body >
<jdoc:include type="modules" name="top" style="xhtml" />
<jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
<jdoc:include type="modules" name="left" style="xhtml" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" style="xhtml" />
<jdoc:include type="modules" name="footer" style="none" />
</body>
</html>
Le fichier index.php est la "page principale" du template, sa «vue d'ensemble». Dans ce fichier tous les morceaux (CSS, JavaScript, contenu, ...) ont été chargés. Dans notre exemple, nous allons charger le contenu de notre Joomla dans le template grâce à la commande (balise) <jdoc:include ...> .Suivant son type, celle-ci peut permettre l'ajout de l'entête, du contenu d'un composant ou du contenu d'un module.
Le fichier "templateDetails.xml"
C'est l'un des fichiers les plus important dans un template. Il liste tous les fichiers ou dossiers qui font partie du template. Il comprend également des informations telles que l'auteur et le copyright. Sans ce fichier, Joomla ne trouverait pas votre template. Les positions listées sont les positions du module qui ont déjà été mentionnées dans le fichier index.php. Pour information, sachez que vous pouvez créer autant de positions que vous le souhaitez.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<install version="2.5" type="template" method="upgrade">
<name>cocoate</name>
<creationDate>2012-07-17</creationDate>
<author>Hagen Graf</author>
<authorEmail> hagen[at]cocoate.com</authorEmail>
<authorUrl>http://cocoate.com</authorUrl>
<copyright>Copyright (C) 2012 cocoate</copyright>
<version>1.0</version>
<description><![CDATA[
<p>cocoate is a template exercise from scratch.<p>
]]></description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
<positions>
<position>top</position>
<position>breadcrumbs</position>
<position>footer</position>
<position>left</position>
<position>right</position>
<position>footer</position>
</positions>
</install>
Découvrez et installez votre template
Après avoir créé les deux fichiers et les répertoires, nous allons "découvrir" et installer le template. Depuis Joomla 1.6, les templates sont inscrits dans la table _extensions.
Allez dans Extensions => Gestion des extensions => Découvrir et cliquez sur l'icône Découvrir en haut. Vous verrez alors votre template nouvellement créé (Capture 1), vérifiez alors qu'il s'agit bien de votre template et cliquez sur Installer (Capture 2).
Capture 1 : Découverte du template cocoate
Capture 2: Installation du template cocoate
Pendant le processus d'installation, un style de template a été automatiquement créé, vous pouvez le vérifier dans Extensions => Gestion des templates et en faire le style de template par défaut (Capture 3).
Capture 3: Choisissez le template cocoate comme template par défaut
Vous pouvez maintenant visiter votre site (Front-end) pour avoir un premier aperçu de votre template (Capture 4).
Capture 4: Votre site web avec votre nouveau template
Si vous ouvrez le site avec votre appareil mobile, vous remarquerez qu'il répond correctement mais qu'il n'y a pas de réelle interface utilisateur.
Intégrer les fichiers de Bootstrap
Maintenant, il est nécessaire d'intégrer les fichiers de la dernière version de Bootstrap avant de continuer.
Dans notre exemple, nous utilisons le package Bootstrap joint avec une documentation (Capture 5). Téléchargez et décompressez ce package et copiez le dossier /assets dans le répertoire /template/cocoate (Capture 6).
Capture 5: Le site de Bootstrap
Capture 6: copie ou déplacement du dossier assets
Le dossier assets contient les fichiers CSS et JavaScript nécessaires ainsi que des images et des icônes prédéfinies.
Plus tard, quand vous aurez plus d'expérience avec les templates Joomla, vous pourrez placer ces fichiers de Bootstrap dans un dossier différent. Pour notre exemple, il est plus facile d'utiliser le répertoire /assets.
Intégrer Bootstrap dans votre template
Bootstrap est livré avec trois exemples de templates appelés hero, fluid et starter-template. Vous pouvez les consulter en cliquant sur les fichiers dans le dossier /example.
Notre objectif est de combiner les commandes Joomla avec l'un de ces exemples. Ici, nous travaillerons avec le template fluid (fluid.html).
Commençons par ajouter quelques éléments clés dont nous avons besoin dans le fichier index.php :
<?php
defined('_JEXEC') or die; // detecting site title $app = JFactory::getApplication();
Ceci est du code PHP et le début typique d'un template Joomla. L'objet $app contient des informations utiles sur votre site Joomla, comme le nom de votre site web par exemple.
<!DOCTYPE html>
<html lang="en">
Ce doctype est la version HTML5 et provient de l'exemple de Bootstrap.
Dans la balise <head> nous devons créer les Metatags Joomla via une commande <jdoc> et intégrer les fichiers Bootstrap.
<head>
<meta charset="utf-8">
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/templates//assets/css/bootstrap.css" type="text/css" media="screen" />
...
<!-- ... more Bootstrap files ... -->
...
<link rel="apple-touch-icon-precomposed" href="//templates//assets/ico/apple-touch-icon-57-precomposed.png">
</head>
La section <body> peut être copiée de l'exemple fluid.html. Il est important d'intégrer les commandes <jdoc> au bon endroit.
Ceci est un exemple pour le menu du haut. Vous devez placer un module de Menu à la position top-menu et vous pouvez par exemple afficher le nom du site à partir de l'objet $app.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
...
<a class="brand" href="#"></a>
<div class="nav-collapse">
<jdoc:include type="modules" name="top-menu" style="none" />
</div>
</div>
</div>
La page principale est située dans un gabarit fluide. Il dispose d'un système de grille de 12 lignes par défaut, nous utiliserons 9 d'entre elles pour l'affichage du composant Joomla et 3 pour une barre latérale sur le côté droit, que nous appelerons right. Notez que le côté droit ne doit être visible que s'il y a des modules disponibles.
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="hero-unit">
<jdoc:include type="component" />
</div>
</div><!--/row-->
</div><!--/span-->
<div class="span3">
<div class="well sidebar-nav">
<jdoc:include type="modules" name="right" style="none" />
</div><!--/.well -->
<?php endif; ?>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
Les dernièrs fichiers sont les fichiers Javascript de Bootstrap :
<script src="/templates//assets/js/jquery.js"></script>
<script src="/templates//assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
Comme vous pouvez le voir, le framework Javascript jQuery est chargé tout comme la version minimale de Bootstrap. Vous pouvez voir le contenu complet du fichier index.php à cette adresse.
Le résultat est loin d'être parfait (Capture 7), mais commence à ressembler à un site web et le template est surtout maintenant Responsive. Vérifiez-le en jouant avec la largeur de la fenêtre de votre navigateur.
Capture 7: Premier coup d'œil à ce nouveau template
Les Overrides
Jusqu'à présent, ce fut plutôt facile. Maintenant, le vrai travail commence. Pour tirer pleinement avantage du Framework Bootstrap, vous devrez overrider les valeurs HTML par défaut de Joomla (Capture 8).
Capture 8: Overrides HTML
Le menu déroulant
Joomla n'a pas de menu par défaut ayant une option Liste déroulante, mais Bootstrap, lui, offre le support des menus déroulant et c'est justement cette fonction que nous voulons avoir dans notre template. Généralement, c'est assez difficile d'apprendre tous les détails sur les outputs HTML des modules. Ici, on suggère d'utiliser des overrides existants.
Grâce au travail de Gary GISCLAIR, il est possible de télécharger le template Strapped et d'utiliser les overrides existants. Ici, nous copierons tout le dossier /html dans le répertoire /templates/cocoate.
Nous utilisons ici les données par défaut de Joomla, ainsi nous pouvons mettre module Main Menu en position top-menu. Pour faire correspondre la bonne classe CSS, nous avons besoin d'ajouter nav-dropdown dans le Suffixe CSS de menu (Extensions => Gestion des modules => Main Menu => Modifier => Options avancées) (Capture 9)
Capture 9: Menu principal - Options avancées
La communication entre Joomla et Bootstrap fonctionne. Le menu déroulant est entièrement adapté et même les photos seront automatiquement redimensionnées (Capture 10).
Capture 10: Template actif basé sur Bootstrap
Vous pouvez jeter un œil au résultat sur le site de Cocoate.com à l'adresse http://joomla25.cocoate.com.
Les prochaines étapes
Après tout ceci, comme toujours lors de la conception d'un template Joomla, les prochaines étapes seront de :
- tester avec d'autres technologies (CSS, JS, HTML5, Joomla, PHP, Twitter Bootstrap)
- consulter la documentation Bootstrap
- créer des CSS personnalisés
- utiliser les paramètres de Joomla pour configurer le template
Articles qui devraient vous intéresser
BreezingForms - Présentation vidéo
Quelles extensions Joomla pour son projet Responsive Design ?
