Logo Joomla

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 BootstrapPreview du template Joomla basé sur Bootstrap

Icône Joomla pour Responsive DesignLes 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é)

Icône Joomla pour Responsive DesignComment créer son nouveau template ?

Vous disposez de trois options pour créer un nouveau template Joomla :

  1. Partir de zéro avec la création d'un dossier et de tous les fichiers nécessaires
  2. Installer un thème de démarrage et le modifier
  3. 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>

Icône Joomla pour Responsive DesignDé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).

Figure 1 : Découverte du template cocoateCapture 1 : Découverte du template cocoate

Figure 2: Installation du template cocoateCapture 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).

Figure 3: Choisissez le template cocoate comme template par défautCapture 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).

Figure 4: Votre site web avec votre nouveau templateCapture 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.

Icône Joomla pour Responsive DesignInté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).

Figure 5: Le site de BootstrapCapture 5: Le site de Bootstrap

Figure 6: copie ou déplacement du dossier assetsCapture 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.

Icône Joomla pour Responsive DesignInté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.

Premier coup d'œil à ce nouveau templateCapture 7: Premier coup d'œil à ce nouveau template

Icône Joomla pour Responsive DesignLes 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).

Figure 8: Overrides HTMLCapture 8: Overrides HTML

Icône Joomla pour Responsive DesignLe 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)

Figure 9: Menu principal - Options avancéesCapture 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).

Figure 10: Template actif basé sur BootstrapCapture 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.

Icône Joomla pour Responsive DesignLes 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
Ce tutoriel est largement inspiré du tutoriel original proposé par Cocoate.com. Ce dernier est extrait du livre anglophone Going mobile with Joomla qui est disponible gratuitement en format PDF. Si vous avez des questions, n'hésitez pas à en venir parler sur le forum en devenant membre de la communauté NosyWeb.
 
L'auteur : un expert à votre service
Jean-Charles Gautard
Nom : Jean-Charles Gautard
Consultant, formateur et intégrateur web depuis plus de 10 ans, je mets mon expertise digitale au service des professionnels amorçant leur transformation digitale. A la recherche d'une stratégie digitale avec le CMS Joomla ? Besoin de conseils ? d'une formation ? d'un site Internet ou Intranet ? Contactez-nous

Articles qui devraient vous intéresser

BreezingForms - Présentation vidéo BreezingForms - Présentation vidéo
Alors que BreezingForms 1.7.5 a vu le jour depuis peu, nous vous présentons ici au travers de ce tuto vidéo les...
Gantry 4 : L'intégration du Responsive Design dans les templates Gantry 4 : L'intégration du Responsive Design dans les templates
Le framework Gantry, dans sa version 4, prend maintenant en charge le Responsive Design (cf. Le Responsive Design...

Commentaires (4)

This comment was minimized by the moderator on the site

Merci pour cette traduction cependant je vous conseillerai plutôt de vous référer à l'article original en français dans le document pdf disponible à l'adresse: http://cocoate.com/sites/cocoate.com/files/pdf/jmobile-fr.pdf

Plusieurs coquilles...

Merci pour cette traduction cependant je vous conseillerai plutôt de vous référer à l'article original en français dans le document pdf disponible à l'adresse: http://cocoate.com/sites/cocoate.com/files/pdf/jmobile-fr.pdf

Plusieurs coquilles dans cet article, notamment l'oubli de préciser de mettre un espace au suffixe pour surcharger les class de joomla, etc. Les fichiers sources ne sont même plus en ligne ...

Bonne journée !

Lire la suite
This comment was minimized by the moderator on the site

Bonjour mplokij :-),
La traduction a été faite indépendamment et c'est vrai que cela fait doublon après-coup.
Les liens morts sont ceux de l'article original, source précisée en fin d'article.
Mais tu as raison, je vais mettre un lien...

Bonjour mplokij :-),
La traduction a été faite indépendamment et c'est vrai que cela fait doublon après-coup.
Les liens morts sont ceux de l'article original, source précisée en fin d'article.
Mais tu as raison, je vais mettre un lien directement au début vers l'article français Cocoate en ligne (non-PDF), ce sera plus simple.
En tout cas, il n'y a pas de mal, NosyWeb sponsorise Cocoate ;-).

@bientôt.

P.S : Je n'ai pas compris l'espace au suffixe pour surcharger les class :-*

Lire la suite
This comment was minimized by the moderator on the site

Sur le site Bootstrap le dossier zippé actuel n'est pas aussi complet que dans votre article (cf. capture 6 et 8).
Nous n'avons plus le dossier html.
L'installation du template fonctionne mais il n'est pas complet (pas de drop-menu)
Y a-t-il une...

Sur le site Bootstrap le dossier zippé actuel n'est pas aussi complet que dans votre article (cf. capture 6 et 8).
Nous n'avons plus le dossier html.
L'installation du template fonctionne mais il n'est pas complet (pas de drop-menu)
Y a-t-il une parade ?

Lire la suite
This comment was minimized by the moderator on the site

Bonjour,

Le répertoire HTML est celui que l'on trouve dans chaque template Joomla.
Ici, il est proposé de s'appuyer sur le template Strapped pour obtenir des Overrides sur lesquels s'appuyer.

Le forum est à votre disposition si vous rencontrez...

Bonjour,

Le répertoire HTML est celui que l'on trouve dans chaque template Joomla.
Ici, il est proposé de s'appuyer sur le template Strapped pour obtenir des Overrides sur lesquels s'appuyer.

Le forum est à votre disposition si vous rencontrez des difficultés.

Lire la suite
Il n'y a pas encore de commentaire pour cet article.

Ajouter vos commentaires

  1. Insérer un commentaire en tant qu'invité. Créez un compte ou connectez-vous ci-dessous.
Pièces jointes (0 / 3)
Share Your Location
Contact

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb

 

Restez à l'affut de l'actualité NosyWeb ! :-)

En poursuivant votre navigation sur le site, vous acceptez l'utilisation de cookies sur votre poste dans le respect de notre politique de protection de votre vie privée. Ok