Drupal: Introduction au Theming

Drupal Nantes Meetup Drupal Nantes - 25 Mai 2011 http://twitter.com/drupalnantes
http://nantes.drupalgardens.com

Drupal Nantes Meetups Meetup Drupal Nantes - 25 Mai 2011
1 fois par mois, à la Cantine Sponsors, votre logo ici !

Le Theming Meetup Drupal Nantes - 25 Mai 2011 Comprendre
le fonctionnement d'un theme • Un peu de théorie • Une démo • Échanges et discussions

Le Theming Meetup Drupal Nantes - 25 Mai 2011 Structure
d'un theme Fichier .info Les fichiers de template (*.tpl.php) Fichiers template.php & theme-settings.php Fonctions hook_preprocess Template de views

Attention ! Meetup Drupal Nantes - 25 Mai 2011 Notre
theme s'appelera choco jusqu'a la fin de la présentation

Structure d'un theme Meetup Drupal Nantes - 25 Mai 2011
choco.info : Définition du theme Fichiers tpl : templates (html) Fichiers css / js / images template.php : fonctions du theme theme-settings.php : Configuration du theme Le dossier du theme doit être placé dans: sites/all/themes/choco ou sites/default/themes/choco

Structure d'un theme Meetup Drupal Nantes - 25 Mai 2011

Fichier .info Meetup Drupal Nantes - 25 Mai 2011 Documentation:
http://drupal.org/node/171205 Infos obligatoires • name : le nom du theme • core : version de drupal (6.x ou 7.x) • engine : moteur de template (généralement phptemplate)

Fichier .info Meetup Drupal Nantes - 25 Mai 2011 Infos
complementaires (1/2) • description : description du theme screenshot : aperçu du theme • base theme : theme parent ('starter theme')

Fichier .info Meetup Drupal Nantes - 25 Mai 2011 Infos
complementaires (2/2) • regions : regions du theme (header, sidebar, ...) • stylesheets : Feuilles de styles CSS (screen, print, all) • scripts : Fichiers Javascript • features : fonctionnalités du theme (slogan, logo, ...)

Fichiers CSS Meetup Drupal Nantes - 25 Mai 2011 Autant
que vous voulez ! Le fichier.info permet de préciser le media (screen, print, ...) Exemple: stylesheets[screen][] = css/typography.css stylesheets[screen][] = css/blocks.css stylesheet[print][] = css/print.css CSS Classique, rien de spécifique à Drupal

Fichiers Javascript Meetup Drupal Nantes - 25 Mai 2011 Drupal
embarque jQuery par defaut • Drupal6: 1.2.6 (update vers 1.3.2) • Drupal7: 1.4.4 (update vers 1.5.2) Exemple: scripts[] = cs/main.js Utilisation des behaviors (non couvert par ce meetup!) Documentation: http://www.slideshare.net/mattfarina/intro-to-jquery-in-drupal http://mydrupalblog.lhmdesign.com/drupal-theming-jquery-basics-inc- drupal-behaviors

Meetup Drupal Nantes - 25 Mai 2011 PAUSE

Fichiers templates (tpl) Meetup Drupal Nantes - 25 Mai 2011
Définir la structure <html> de votre theme Très peu de php ( juste <?php print $ma_variable; ?> ) Syntaxe phptemplate : <?php if(true): print $ma_variable; endif; ?> Exemples: • page.tpl.php : balisage global de la page • node.tpl.php : balisage d'un node (full/teaser) • block.tpl.php : balisage d'un block

page.tpl.php (http://bit.ly/d6-page-tpl & http://bit.ly/d7-page-tpl) Variables importantes (1/2) • $head : balises <meta> (encodage, RSS, favicon, ...) • $head_title : balise <title> • $styles : CSS • $scripts : Javascript • $messages : Messages d'info/erreur Drupal • $closure : rien ne doit être placé à la suite de cette variable à part </body></html>

page.tpl.php (http://bit.ly/d6-page-tpl & http://bit.ly/d7-page-tpl) Variables importantes (2/2) • $logo : Logo • $site_name : Nom du site • $title : Titre de la page • $content : Contenu de la page (node, view, form, ...) • $sidebar, $header... : Contenu des régions définies dans choco.info • ...

page.tpl.php Contenu de la page Region 'sidebar' Javascript CSS

node.tpl.php (http://bit.ly/d6-node-tpl & http://bit.ly/d7-node-tpl) Variables importantes • $title : titre du node • $content : contenu du node • $submitted : information de publication • $teaser / $page : information d'affichage • $node : l'Objet node

node.tpl.php

Surcharge de templates pour page.tpl (http://drupal.org/node/1089662) Exemple pour l'affichage du node 132, de type 'article' (monsite. com/node/132) Drupal6 va rechercher les fichiers tpl suivants: page-node-132.tpl.php page-node.tpl.php page.tpl.php Exemple pour le formulaire de contact (monsite.com/contact) page-contact.tpl.php page.tpl.php

Surcharge des fichiers de templates pour node.tpl (http://drupal.org/node/1089662) Exemple pour le node 132, de type 'article' Drupal va rechercher les fichiers tpl suivants: • node-article.tpl.php (D6) | node--article.tpl.php (D7) • node.tpl.php Possibilité d'ajouter d'autres suggestions avec le hook_preprocess_node($variables) : dans le tableau $variables['template_files'][ ]

Cas des champs cck Fichier content-field.tpl.php (sites/all/modules/cck/theme) Surcharge : copier/coller ce fichier dans votre theme. Même principe de 'suggestions' que le core de Drupal • content-field-fieldname-contentType.tpl.php • content-field-contentType.tpl.php • content-field-fieldname.tpl.php • content-field.tpl.php

theme-settings.php Meetup Drupal Nantes - 25 Mai 2011 Permet d'écrire
une interface de configuration du thème (Construction du site > Themes > Configurer) Utilisation de la Form API ( = Code!) http://bit.ly/drupal6-form-api http://bit.ly/drupal7-form-api Page de documentation : http://drupal.org/node/177868

template.php Meetup Drupal Nantes - 25 Mai 2011 Déclaration de
fonctions de theme (hook_theme) Surcharge des fonctions de theme existantes Implémentation des hooks _preprocess

Surcharge de fonctions Meetup Drupal Nantes - 25 Mai 2011
Drupal utilise des fonctions de theme, comme theme_node_submitted() pour afficher les informations de publication d'un node. La surchage sera donc choco_node_submitted(), à placer dans le fichier template.php Le module devel_themer permet de trouver quelle fonction de theme est utilisée. Documentation : http://bit.ly/d6-themable

Hooks _preprocess Meetup Drupal Nantes - 25 Mai 2011 Modifier
et préparer les variables présentes dans les tpl Exemple: Template page.tpl.php => hook_preprocess_page template.php function choco_preprocess_page(&$variables) { $variables['ma_nouvelle_variable'] = "Hmm, les chocos"; } page.tpl.php <?php print $ma_nouvelle_variable; ?> ( Documentation : http://drupal.org/node/223430 )

Hooks _preprocess Meetup Drupal Nantes - 25 Mai 2011 (
Documentation : http://drupal.org/files/theme_flow_6_1.pdf ) Ordre d’exécution des fonctions des preprocess • Drupal Core ◦ template_preprocess ◦ template_preprocess_hook • Modules ◦ NomDuModule_preprocess ◦ NomDuModule_preprocess_hook • Themes ◦ NomDuTheme_preprocess ◦ NomDuModule_preprocess_hook

Notion de 'base theme' Meetup Drupal Nantes - 25 Mai
2011 Base theme = framework Héritage d'une solide base de travail Exemples • Zen • Omega • Fusion

Template de views Meetup Drupal Nantes - 25 Mai 2011

Meetup Drupal Nantes - 25 Mai 2011 Types de templates
views

Meetup Drupal Nantes - 25 Mai 2011 Types de templates
views Même principe de suggestions que le core: • views-view.tpl.php • views-view--maVue.tpl.php • views-view--displayType.tpl.php • views-view--maVue--displayType.tpl.php ( également valable pour les autres templates de views: views- view--unformated.tpl, views-view--fields.tpl, ...)

Ressources Meetup Drupal Nantes - 25 Mai 2011 http://drupal.org/documentation/theme Cette
presentation sur http://nantes.drupalgardens.com Outils Devel : http://drupal.org/project/devel Devel_themer : http://drupal.org/project/devel_themer Reflexe Vider le cache, vider le cache, vider le cache, vider le cache, vider le cache, vider le cache, vider le cache, vider le cache, vider le cache ...

Drupal: Introduction au Theming

Drupal: Introduction au Theming

Other Decks in Programming

Featured

Transcript