Twitter Hashtag #jd15fr
Twitter Hashtag #jd15fr
Twitter Hashtag #jd15fr
Twitter Hashtag #jd15fr
Comprendre les templates Joomla
Par Hugues HERVE
Twitter Hashtag #jd15fr
1. Introduc5on
2. Maque9age : ou5ls 3. Ges5on sous Joomla! 4. Structure technique 5. Les fichiers de structures et de rendus 6. La subs5tu5on 7. Les framework de templates
Comprendre les templates Joomla
Twitter Hashtag #jd15fr
• Objec5f de la conférence • Mieux appréhender le fonc5onnement basic pour aller plus loin et
comprendre : • comment créer ses propres templates • u5liser les templates téléchargés et les modifier à sa guise • u5liser les framework de templates
• La notion d’override : comment ca marche ?
1 -‐ Introduc5on
Twitter Hashtag #jd15fr
• Objec&fs => définir et avoir sous les yeux la structure générale de son projet.
• Définir la structure de(s) sa page(s) • Iden5fier les différentes sources de contenu
• Entete -‐> Header • Composants -‐> Components • Modules • Etc…
2 -‐ Maque9age : ou5ls
Twitter Hashtag #jd15fr
Solu%on 1 : papier /crayon / gomme Solu%on 2 : ou5ls logiciels / hébergés Une liste compara5ve d’ou5ls gratuits et payants : h9p://socialcompare.com/fr/comparison/mockup-‐wireframing-‐design-‐tools
2 -‐ Maque9age : ou5ls (suite)
Twitter Hashtag #jd15fr
• Visualiser les posi5ons d’un template Joomla
• Les duplica5ons • Style -‐> base de donnée • Template -‐> duplica5on du template
3 -‐ Ges5on des templates sous Joomla!
Twitter Hashtag #jd15fr
• Ac5ver la visualisa5on • Accès : Extensions -‐> Ges-on des Templates
3.1 – Visualiser les posi5ons d’un template Joomla
Twitter Hashtag #jd15fr
Ac5ver la prévisualisa5on des posi5ons des modules.
3.1 – Visualiser les posi5ons d’un template Joomla (suite)
Twitter Hashtag #jd15fr
Pour visualiser les posi5ons, ajouter ?tp=1 à la fin de l’url.
3.1 – Visualiser les posi5ons d’un template Joomla (suite)
Twitter Hashtag #jd15fr
La duplica5on des styles se fait de la façon suivante.
3.2 – Les duplica5ons – les styles
Twitter Hashtag #jd15fr
3.2 – Les duplica5ons – les styles (suite)
Twitter Hashtag #jd15fr
3.2 – Les duplica5ons – les styles (suite) Illustration
Twitter Hashtag #jd15fr
La duplica5on de template s’opère comme suit en sélec5onnant la source de la copie
3.2 – Les duplica5ons – le template
Twitter Hashtag #jd15fr
Cliquer sur Copier template et saisissez le nom de la copie.
3.2 – Les duplica5ons – le template (suite)
Twitter Hashtag #jd15fr
On retrouve maintenant dans la page des styles, l’originale et sa copie avec son nom.
3.2 – Les duplica5ons – le template (suite)
Twitter Hashtag #jd15fr
Arborescence générale • Fichiers racines
• Index.php • templateDetails.xml
• Répertoires • CSS • Images • Html • Js
4 -‐ Structure technique
Twitter Hashtag #jd15fr
• Les principaux fichiers : • Paramètres du template
• templateDetails.xml
• Corps du template et l’u5lisa5on des différentes variable • index.php
5 - Les fichiers de structures et de rendus
Twitter Hashtag #jd15fr
Les différentes par5es du fichier : • Entête : informa5on reprise dans le
backend • Files : Structure reprise par l’installer
joomla • Posi%ons : Les posi5ons qui seront
u5lisées par les modules • Languages : fichier de langues u5lisées
en fonc5on • Config : champs de paramètres
5.1 – templateDetails.xml
Twitter Hashtag #jd15fr
Posi%ons :
5.1 – templateDetails.xml (suite)
Twitter Hashtag #jd15fr
Config :
5.1 – templateDetails.xml (suite)
Les champs du back office sont déclarés dans la par5e config du fichier. Les champs possibles en standard :
• h9ps://docs.joomla.org/Standard_form_field_types
Twitter Hashtag #jd15fr
• Le point d’accès central pour le rendu du template
• Exploite le paramétrage défini par templateDetails
• Quelques règles et commandes PHP
5.2 – index.php
Twitter Hashtag #jd15fr
<jdoc:include type="modules" name= "positionX" style="none" /> • Injection des modules à la position
5.2 – index.php
Les types possibles : Modules : pour l’affichage des modules Message : pour l’afffichage des message Joomla d’avertissement, d’erreur etc… Component : L’affichage du composant correspond au lien de menu de la page
Twitter Hashtag #jd15fr
$this->countModules(’positionX’)
Variable contenant les modules déclarés/existants à cette position. Ici nous avons l’instruction est « si il y des modules> » alors afficher le code.
5.2 – index.php (suite)
Twitter Hashtag #jd15fr
$this->params->get(<paramètre template>) Con5ent la valeur du paramètres de template.
Le nom du champs défini dans le templateDetails.xml est naturellement repris et la valeur définie dans le templates transmise. Exemple :
5.2 – index.php (suite)
Twitter Hashtag #jd15fr
ü Original
6 – Substitution ou « override »
ü Ce que l’on veut obtenir
Exemple : on veut modifier la présentation d’un contenu « Article »
Twitter Hashtag #jd15fr
Qu’est-‐ce que les subs5tu5on ? ü Modifier la vue d’origine à sa façon dans son agencement
• Pourquoi ? ü Avoir différents style de présenta5on de l’informa5on adapté au thème
• Avantage ü N’est pas ecrasé par une mise à jour Joomla ou d’un composant 5ers
• Inconvénient : • Si la vue standard est modifiée, pour en bénéficier, il faut me9re à jour l’ « override ».
6 – Substitution ou « override » (suite)
Twitter Hashtag #jd15fr
• 2 techniques : ü Back end ü Copie direct ü Renommer ou pas
6 – Substitution ou « override » (suite)
Twitter Hashtag #jd15fr
Technique back-‐end : « override »la vue default par défaut Accès : Composants -‐> Ges-on des templates :Templates ü Sélec5onner le template u5lisé pour « overrider »
•
6 – Substitution ou « override » (suite)
Twitter Hashtag #jd15fr
La vue que l’on pourra modifier sera automa5quement créée sous le dossier « html » du template. Par défaut la copie concerne l’ensemble des fichiers de la vue choisie du composant. Les fichiers sont horodatés mais peuvent être renommés.
6 – Substitution ou « override » (suite)
Twitter Hashtag #jd15fr
Copie direct et renommage Créer une arborescence sous HTML : <com\mod\plg>/<nom-‐view>/default.php Copier le fichier en fonc5on de la vue à « overrider » dans le répertoire précédemment créé. Renommer le fichier avec un nom significa5f (ne pas me;re de underscore dans le nom)
6 – Substitution ou « override » (suite)
Twitter Hashtag #jd15fr
Pour u5liser les « overrides>, dans la ges5on des ar5cles, 2 op5ons : ü Applica5on à tous les
ar5cles via les paramètres généraux
6 – Substitution ou « override » (suite)
Twitter Hashtag #jd15fr
ü Applica5on au cas par cas Appliquer le style sur l’ar5cle directement. Conclusion : toutes les vues composants « s’overrident » mais aussi les modules ou les plugins s’ils ont un répertoire TMPL. Les plugins en ques5ons ont pour rôle dans ce cas d’interagir avec l’affichage.
6 – Substitution ou « override » (suite)
Twitter Hashtag #jd15fr
Les framework de templates offrent des possibilités plus évoluées pour la ges5on des posi5ons (entre autre). Un style évoque généralement un layout, c’est à dire une page, à l’intérieur de laquelle on peut définir ou pas l’affichage des modules, contenu, la largeur et pour certains de gérer les différents type d’écrans. Liste : • Liste de Framework de template Joomla : http://magazine.joomla.org/issues/issue-oct-2012/item/891-using-a-joomla-template-framework-to-design-your-site
7 – Framework de template
Twitter Hashtag #jd15fr
7 – Framework de template
Twitter Hashtag #jd15fr
7 – Framework de template
Twitter Hashtag #jd15fr
Conférence sur le template HELIX (framework Gantry) 14h40 aujoudhui Ressources • Gantry : http://gantry-framework.org/downloadPoint%202 • JA T3 BS3 :http://www.t3-framework.org/downloads.html Différences bootstrap 2 versus 3 Differences Between Bootstrap v2.3 and v3.0 (RC2) : http://mattduchek.com/differences-between-bootstrap-v2-3-and-v3-0/
7 – Framework de template (suite)
Twitter Hashtag #jd15fr
Ou5ls maque9age • Ou5ls de mockup / wireframing : http://socialcompare.com/fr/comparison/mockup-wireframing-design-tools Joomla • Alterna5ve layout : • http://magazine.joomla.org/issues/issue-feb-2013/item/1059-tutorial-taking-advantage-of-
alternative-layouts-for-articles-and-modules
• Quelques Framework pour Joomla : • http://magazine.joomla.org/issues/issue-oct-2012/item/891-using-a-joomla-template-
framework-to-design-your-site
• Inspira5on flat design : • http://magazine.joomla.org/issues/issue-aug-2013/item/1436-17-flat-joomla-templates-for-
inspiration JQuery • JQueryRain : http://www.jqueryrain.com/
8 – Quelques ressources