Cet article est une traduction adaptée de l'article publié par Anthony Olsen sur http://magazine.joomla.org nommé Fourteen secrets of Joomla! templating . C'est un article consacré aux techniques et astuces avancées pour la construction de templates Joomla!.
Les techniques suivantes sont considérées par l'auteur comme des trésors ou des secrets bien gardés et font parties des notions qu'il est bon de connaitre lorsque l'on développe ses propres templates. L'idée est de pouvoir maitriser l'ensemble des éléments qui influent sur l'affichage et de pouvoir ainsi s'adapter à la plupart des situations.
1. Conditions pour la page d'accueil ou comment cibler l'item de menu par défaut
Compatibilité Joomla!
Il est parfois nécessaire de déterminer si on est sur la page d'accueil pour intégrer des styles ou des éléments spécifiques. Joomla! permet de le faire de différentes manières, l'une d'entre elles est de placer une vérification dans l'entête du template :
// Detecting Home
$menu = & JSite::getMenu();
if ($menu->getActive() == $menu->getDefault()) {
$siteHome = 1;
}else{
$siteHome = 0;
}
Dans ce code on récupère l'instance du menu et on vérifie si l'item actif (celui de la page courante) est le même que l'item par défaut (celui de la page d'accueil). On stocke le résutlat du test dans une variable $siteHome qui renvoit une valeur booléenne (1 ou 0).
Il suffit ensuite d'utiliser la variable booléenne pour placer une condition dans le code HTML du template :
<?php if($siteHome) { ?>
<div id="home-banner">
Ce text ne s'affichera que sur la page d'accueil.
</div>
<?php } ?>
2. Ajouter une classe spécifique à chaque page sur le corps de la page
Compatibilité Joomla!
La taxonomie (science qui permet d'identifier et classer les éléments) aide les designers à identifier les éléments pour leur appliquer des styles CSS et ainsi piloter l'aspect des pages Joomla!. On peut utiliser les variables des url pour créer une classe CSS spécifique que l'on ajoute au corps de la page, ce qui nous permet de styler n'importe quelle vue de n'importe quel composant.
Voici le code à ajouter dans l'entête du fichier 'index.php' de votre template :
<?php
// Detecting Active Variables
$option = JRequest::getCmd('option', '');
$view = JRequest::getCmd('view', '');
$layout = JRequest::getCmd('layout', '');
$task = JRequest::getCmd('task', '');
$itemid = JRequest::getCmd('Itemid', '');
?>
Puis on injecte ces variables dans le corps de la page :
<body class="<?php echo $option . " " . $view . " " . $layout . " " . $task . " itemid-" . $itemid;?>"
On obtiendra donc au final un résultat comme celui-ci : <body class="com_content category blog itemid-78">
Très utile pour identifier les éléments par type. Par exemple avec le résultat précédent on peut jouer sur les CSS comme cela :
.com_content.itemid-78 a{color:#000; /* seront noirs uniquement les liens dans l'article du lien de menu ID=78 */}
3. Positions de module adaptables
Compatibilité Joomla!
Les designs adaptables sont une pratique très courante dans le monde des cms et de Joomla!. Cela signifie que s'il n'y a pas de module ou de contenu dans une position donnée on n'affiche pas le conteneur et du coup on laisse l'espace disponible pour l'affichage des autres blocs adjacents.
Une technique bien connue dans la création de templates Joomla! :
<?php if ($this->countModules('left')) { ?>
<div id="sidebar">
<jdoc:include type="modules" name="left" style="xhtml" />
<div class="clr"></div>
</div>
<?php } ?>
En clair, si au moins un module est publié dans la position 'left', on affiche le bloc 'sidebar' et le contenu du/des modules 'left'. Si aucun module n'est publié en 'left', alors il n'y aura aucun affichage dans la page du bloc 'sidebar'.
4. Comptage, vérification et opérations arithmétiques complexes en fonction du nombres de modules publiées
Compatibilité Joomla!
On peut aller plus loin dans la technique de module adaptable en contrôlant plus finement les blocs que l'on veut insérer dans la page.
Par exemple si on veut afficher un contenu uniquement si des modules sont publiés dans la position 'left' ET dans la position 'right', on pourrait insérer ce code :
<?php if ($this->countModules('left and right'')) { ?>
<p>Ce texte n'apparait que si les modules sont publiés dans left et right.</p>
<?php } ?>
Le texte n'apparaitra que si des modules sont publiés dans les deux positions 'left' et 'right'.
Pour comparer le nombre de modules publiés dans une position par rapport à une autre on peut procéder de la manière suivante :
<?php if ($this->countModules('user1 < user2'')) { ?>
<p>Ce texte n'apparait que s'il y a plus de modules publiés en user2 que user1.</p>
<?php } ?>
5. Points de sécurité générale
Compatibilité Joomla!
Les codes suivants permettent de réduire la possibilité de vérifier que le site a été construit avec Joomla!, ceci afin de diminuer les chances qu'un hacker cherche à exploiter une faille dans votre système. Cependant il faut bien comprendre qu'il y a de nombreux autres moyens d'identifier votre site comme étant réalisé avec Joomla!, autres que ceux cités ci-dessous.
Les codes fournis permettent de réduire les marqueurs, mais il est de bon ton de s'inquiéter de la sécurité de son site, un bon endroit où regarder est la liste des extensions vulnérables. Ensuite vous pouvez aussi jeter un oeil au fichier htaccess fourni par Nick le développeur de Akeeba Backup : http://snipt.net/nikosdion/the-master-htaccess
Voici le code pour supprimer le tag meta generator :
<?php $this->setGenerator(''); ?>
Désactiver l'affichage des modules en frontend pour éviter d'y avoir accès avec la variable index.php?tp=1. (Dans Joomla! 1.6 c'est une option qui est désactivée par défaut dans la gestion des templates)
<?php JRequest::setVar('tp',0); ?>
6. Template override dans les composants et modules MVC
Compatibilité Joomla!
Joomla! 1.5 introduit la notion de template override, et Joomla! 1.6 va encore plus loin avec le layout override. Ces techniques permettent de réécrire les fichiers des composants et modules MVC de Joomla! en plaçant le fichiers modifiés dans un répertoire 'html' dans votre template.
Ca permet de modifier les vues des composants sans toucher aux fichiers natfis, s'affranchissant ainsi des problèmes lors de mises à jour de Joomla! et des extensions.
Par exemple si vous voulez modifier l'affichage des articles en mode blog, observez l'url renvoyée par Joomla! : index.php?option=com_content&view=category&layout=blog&id=34&Itemid=53
Créez la structure suivante dans votre template
/html/com_content/category/blog.php
Copiez le fichier blog.php depuis son emplacement d'origine :
/components/com_content/views/category/tmpl/blog.php
7. Supprimer mootools
Compatibilité Joomla!
Dans la plupart des cas on a besoin de mootools pour faire tourner des scripts et avoir certaines fonctionnalités sur notre site. Cependant il arrive que l'on ne le veuille pas, dans le cas d'utilisation exclusive de Jquery ou d'absence de scripts.
Dans ce cas on peut utiliser une méthode présente dans le plugin de Kynesphere, à insérer dans l'entête du fichier 'index.php' du template :
<?php
$doc =& JFactory::getDocument();
$headerstuff = $doc->getHeadData();
foreach ($headerstuff['scripts'] as $file => $type) {
if (preg_match("#mootools.js#s", $file)) unset($headerstuff['scripts'][$file]);
if (preg_match("#caption.js#s", $file)) unset($headerstuff['scripts'][$file]);
}
$doc->setHeadData($headerstuff);
?>
8. Ajouter des textes traduisibles dans le template
Compatibilité Joomla
Dans certains cas vous avez besoin d'ajouter des textes simples dans votre template, pour ajouter un titre à un slider ou juste un texte à quelque part sur la page. Dans le cas de sites multilingues, le texte sera écrit comme définit dans le template et ne sera pas traduit en fonction du tag de la langue.
Il existe un plugin Joomfish qui permet de choisir quel template utiliser pour quelle langue, mais cette solution nécessite de maintenir plusieurs templates, un pour chaque langue.
Une solution plus propre consiste à insérer des termes traduisibles qui seront traduits pas les fichiers de langue en fonction du language utilisé pour voir le site. Par exemple si vous voulez ajouter un terme 'Slidertitle' dans votre page, vous pouvez utiliser le code suivant :
<?php echo JText::_('SLIDERTITLE');?>
Ensuite vous devez ajouter la traduction du terme SLIDERTITLE dans tous les fichiers de langues utilisées sur votre site. Pour info, le fichier de langue anglais se trouve à cet emplacement :
language/en-GB/en-GB.ini
dedans vous devez rajouter une ligne comme celle-ci :
SLIDERTITLE = "This is the slider title"
Chaque traduction doit être ajoutée sur une nouvelle ligne.
9. Créer des classes de module plus flexibles
Compatibilité Joomla!
Une manière simple de rendre les classes de module plus flexible est d'ajouter un espace devant le paramètre de suffixe de classe de module. Normalement les classes de modules sont spécifiques et utilisent une convention avec un tiret ou un underscore qui précède la classe. Le fait d'ajouter un espace permet de créer une classe universelle que l'on peut utiliser sur n'importe quel élément de la page (image, bloc, etc...).
Par exemple un suffixe '-border' ne va s'appliquer qu'aux modules avec les styles CSS suivants :
.moduletable-border {border:1px solid #ddd;padding:10px}
Et le code HTML généré :
<div class="moduletable-border">
Maintenant si on ajoute un espace on génère une classe CSS générique qui peut être attribuée à n'importe quel élément dans la page. Donc si le suffixe de classe CSS du module est ' border' (attention à l'espace devant) on peut l'identifier comme cela :
.border {border:1px solid #ddd;padding:10px}
et le code HTML généré :
<div class="moduletable border">
On peut ainsi utiliser la classe '.border' pour ajouter une bordure sur une image, un paragraphe ou autre.
10. Override des images système de Joomla!
Compatibilité Joomla!
Lorsque l'on crée un article on peut voir sur la page du site des petites icônes pour envoyer par email et imprimer, également l'icône d'édition si on est logué.
On peut facilement personnaliser ces icônes. Il suffit de mettre vos propres images dans le dossier 'images/system' de votre template. Il faut respecter les noms des images :
- Bouton email - emailButton.png
- Bouton d'édition - edit.png
- Bouton de dépublication - edit_unpublished.png
- Bouton PDF - pdf_button.png
- Bouton d'impression - printButton.png
- Image du fil d'ariane - arrow.png
Pour info les images originales se trouvent dans 'media/system/images'.
11. Contenu spécifique aux utilisateurs
Compatibilité Joomla!
Pour gérer l'accès du contenu en fonction des utilisateurs du site, on peut utiliser différentes méthodes. Il existe de nombreux composants, ou plugins qui permettent de gérer ça.
Toutefois si vous voulez le gérer dans le template, il est possible d'assigner du contenu à un groupe d'utilisateurs ou un utilisateur spécifique.
<?php // If not logged in member
$user =& JFactory::getUser();
$user_id = $user->get('id');
if (!$user_id) {
?>
Ce texte ne sera vu que par les visiteurs non connectés.
<?php } ?>
Pour les utilisateurs logués sur le site :
<?php // If logged in member
$user =& JFactory::getUser();
$user_id = $user->get('id');
if ($user_id) {
?>
Ce texte ne sera vu que par les visiteurs connectés.
<?php } ?>
On peut aller plus loin en testant les ACL pour viser des groupes spécifiques, mais dans ce cas il est peut-être préférable d'utiliser une extension spécifique comme mentionné plus tôt. Toutefois si vous voulez cibler un utilisateur bien précis, vous pouvez utiliser quelque chose comme cela :
<?php // If not logged in member
$user =& JFactory::getUser(99);
$user_id = $user->get('id');
if ($user_id) {
?>
Ce texte ne sera vu que par l'utilisateur avec l'ID 99
<?php } ?>
12. Ajouter facilement une fenêtre modale (lightbox) à vos liens
Compatibilité Joomla!
L'article original décrit une méthode qui n'est pas optimale et qui ne tient pas compte de l'API Joomla!. J'ai donc mis à jour avec mes propres infos.
Dans le fichier 'index.php' juste après 'defined('_JEXEC') or die;' il faut insérer l'appel à la fonction modal :
JHTML::_('behavior.modal', "a.modal", array('handler'=> "iframe", 'size'=> array('x'=> "900", 'y'=> "550")));
On peut attribuer la classe que l'on veut utiliser sur les liens : "a.modal"
On peut définir la taille de la lightbox : 'x'=> "900", 'y'=> "550"
Maintenant dans le template ou un article on peut insérer un lien de la manière suivante :
<a href="http://google.com" class="modal">Lien vers google</a>
Ou en lui donnant des paramètres de taille spécifique
<a href="http://google.com" class="modal" rel="{handler: 'iframe', size: {x: 900, y: 550}}">Lien vers google</a>
13. Ajouter un style de module personnalisé : Module Chrome
Compatibilité Joomla!
Nativement Joomla! comprend déjà plusieurs styles de modules tels que "xhtml", "rounded", etc... Dans la plupart des cas ça convient bien, mais certaines fois on a besoin de créer son propre code pour adhérer au template.
Une pratique utile est d'ajouter le nom du module dans la classe du module. Ca permet de styler indépendemment chaque type de module.
Dans le répertoire de votre créez un fichier 'html/modules.php' et collez ce code :
<?php defined('_JEXEC') or die('Restricted access');
function modChrome_xhtml2($module, &$params, &$attribs) {
if (!empty ($module->content)) : ?>
<div class="moduletable<?php echo $params->get('moduleclass_sfx');?>
<?php echo print_r($module->module);?>">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
<?php endif; } ?>
Vous pouvez ensuite utiliser ce style dans votre template :
<jdoc:include type="modules" name="user5" style="xhtml2" />
14. A ne pas oublier
La position de module debug
Cette position est souvent oubliée dans la conception des templates. Elle permet d'insérer du code comme celui de Google analytics par exemple.
A insérer juste avant la fermeture du body :
<jdoc:include type="modules" name="debug" />
La position pour les messages système
Joomla! renvoit des messages importants aux utilisateurs comme lors d'une erreur de connexion. Ces messages sont souvents affichés juste avant l'appel au composant :
<jdoc:include type="message" />
Les styles globaux
Certains syles généraux pour l'affichages des messages d'erreur et d'autres styles par défaut sont inclus dans les fichiers 'general.css' et 'system.css'. N'oubliez pas de les inclure :
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />