Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Meetup Drupal Nantes: Le Theming (25/05/2011)

3,287 views

Published on

http://nantes.drupalgardens.com/meetup-25-mai-2011 Présentation lors du meetup Drupal à Nantes le Mercredi 25 Mai 2011

Published in: Technology
  • Be the first to comment

Meetup Drupal Nantes: Le Theming (25/05/2011)

  1. 1. Drupal Nantes http://twitter.com/drupalnantes http://nantes.drupalgardens.com Meetup Drupal Nantes - 25 Mai 2011
  2. 2. Drupal Nantes Meetups1 fois par mois, à la CantineSponsors, votre logo ici ! Meetup Drupal Nantes - 25 Mai 2011
  3. 3. Le ThemingComprendre le fonctionnement dun theme ● Un peu de théorie ● Une démo ● Échanges et discussions Meetup Drupal Nantes - 25 Mai 2011
  4. 4. Le ThemingStructure dun themeFichier .infoLes fichiers de template (*.tpl.php)Fichiers template.php & theme-settings.phpFonctions hook_preprocessTemplate de views Meetup Drupal Nantes - 25 Mai 2011
  5. 5. Attention ! Notre theme sappelera choco jusqua la fin de la présentation Meetup Drupal Nantes - 25 Mai 2011
  6. 6. Structure dun themechoco.info : Définition du themeFichiers tpl : templates (html)Fichiers css / js / imagestemplate.php : fonctions du themetheme-settings.php : Configuration du themeLe dossier du theme doit être placé dans:sites/all/themes/chocoousites/default/themes/choco Meetup Drupal Nantes - 25 Mai 2011
  7. 7. Structure dun theme Meetup Drupal Nantes - 25 Mai 2011
  8. 8. Fichier .infoDocumentation: http://drupal.org/node/171205Infos obligatoires ● name : le nom du theme ● core : version de drupal (6.x ou 7.x) ● engine : moteur de template (généralement phptemplate) Meetup Drupal Nantes - 25 Mai 2011
  9. 9. Fichier .infoInfos complementaires (1/2) ● description : description du themescreenshot : aperçu du theme ● base theme : theme parent (starter theme) Meetup Drupal Nantes - 25 Mai 2011
  10. 10. Fichier .infoInfos 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, ...) Meetup Drupal Nantes - 25 Mai 2011
  11. 11. Fichiers CSSAutant que vous voulez !Le fichier.info permet de préciser le media (screen,print, ...)Exemple:stylesheets[screen][] = css/typography.cssstylesheets[screen][] = css/blocks.cssstylesheet[print][] = css/print.cssCSS Classique, rien de spécifique à Drupal Meetup Drupal Nantes - 25 Mai 2011
  12. 12. Fichiers JavascriptDrupal 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.jsUtilisation des behaviors (non couvert par ce meetup!)Documentation:http://www.slideshare.net/mattfarina/intro-to-jquery-in-drupalhttp://mydrupalblog.lhmdesign.com/drupal-theming-jquery-basics-inc-drupal-behaviors Meetup Drupal Nantes - 25 Mai 2011
  13. 13. PAUSEMeetup Drupal Nantes - 25 Mai 2011
  14. 14. Fichiers templates (tpl)Définir la structure <html> de votre themeTrè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 dun node (full/teaser) ● block.tpl.php : balisage dun block Meetup Drupal Nantes - 25 Mai 2011
  15. 15. Fichiers templates (tpl) Meetup Drupal Nantes - 25 Mai 2011
  16. 16. Fichiers templates (tpl)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 dinfo/erreur Drupal ● $closure : rien ne doit être placé à la suite de cette variable à part </body></html> Meetup Drupal Nantes - 25 Mai 2011
  17. 17. Fichiers templates (tpl)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 ● ... Meetup Drupal Nantes - 25 Mai 2011
  18. 18. Fichiers templates (tpl) page.tpl.php CSSContenu de la pageRegion sidebar Javascript Meetup Drupal Nantes - 25 Mai 2011
  19. 19. Fichiers templates (tpl)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 daffichage ● $node : lObjet node Meetup Drupal Nantes - 25 Mai 2011
  20. 20. Fichiers templates (tpl)node.tpl.php Meetup Drupal Nantes - 25 Mai 2011
  21. 21. Fichiers templates (tpl)Surcharge de templates pour page.tpl(http://drupal.org/node/1089662)Exemple pour laffichage du node 132, de type article (monsite.com/node/132)Drupal6 va rechercher les fichiers tpl suivants:page-node-132.tpl.phppage-node.tpl.phppage.tpl.phpExemple pour le formulaire de contact (monsite.com/contact)page-contact.tpl.phppage.tpl.php Meetup Drupal Nantes - 25 Mai 2011
  22. 22. Fichiers templates (tpl)Surcharge des fichiers de templatespour node.tpl (http://drupal.org/node/1089662)Exemple pour le node 132, de type articleDrupal va rechercher les fichiers tpl suivants: ● node-article.tpl.php (D6) | node--article.tpl.php (D7) ● node.tpl.phpPossibilité dajouter dautres suggestions avec lehook_preprocess_node($variables) : dans le tableau$variables[template_files][ ] Meetup Drupal Nantes - 25 Mai 2011
  23. 23. Fichiers templates (tpl)Cas des champs cckFichier 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 Meetup Drupal Nantes - 25 Mai 2011
  24. 24. PAUSEMeetup Drupal Nantes - 25 Mai 2011
  25. 25. theme-settings.phpPermet décrire une interface de configuration duthème (Construction du site > Themes > Configurer)Utilisation de la Form API ( = Code!)http://bit.ly/drupal6-form-apihttp://bit.ly/drupal7-form-apiPage de documentation : http://drupal.org/node/177868 Meetup Drupal Nantes - 25 Mai 2011
  26. 26. template.phpDéclaration de fonctions de theme (hook_theme)Surcharge des fonctions de theme existantesImplémentation des hooks _preprocess Meetup Drupal Nantes - 25 Mai 2011
  27. 27. Surcharge de fonctionsDrupal utilise des fonctions de theme, commetheme_node_submitted() pour afficher les informationsde publication dun node.La surchage sera donc choco_node_submitted(), àplacer dans le fichier template.phpLe module devel_themer permet de trouver quellefonction de theme est utilisée.Documentation : http://bit.ly/d6-themable Meetup Drupal Nantes - 25 Mai 2011
  28. 28. Hooks _preprocessModifier et préparer les variables présentes dans les tplExemple: Template page.tpl.php => hook_preprocess_pagetemplate.phpfunction 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 ) Meetup Drupal Nantes - 25 Mai 2011
  29. 29. Hooks _preprocessOrdre 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( Documentation : http://drupal.org/files/theme_flow_6_1.pdf ) Meetup Drupal Nantes - 25 Mai 2011
  30. 30. Notion de base themeBase theme = frameworkHéritage dune solide base de travailExemples ● Zen ● Omega ● Fusion Meetup Drupal Nantes - 25 Mai 2011
  31. 31. PAUSEMeetup Drupal Nantes - 25 Mai 2011
  32. 32. Template de views Meetup Drupal Nantes - 25 Mai 2011
  33. 33. Types de templates views Meetup Drupal Nantes - 25 Mai 2011
  34. 34. Types de templates viewsMê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, ...) Meetup Drupal Nantes - 25 Mai 2011
  35. 35. Ressourceshttp://drupal.org/documentation/themeCette presentation sur http://nantes.drupalgardens.comOutilsDevel : http://drupal.org/project/develDevel_themer : http://drupal.org/project/devel_themerReflexeVider le cache, vider le cache, vider le cache, vider lecache, vider le cache, vider le cache, vider le cache,vider le cache, vider le cache ... Meetup Drupal Nantes - 25 Mai 2011

×