Meetup Drupal Nantes: Le Theming (25/05/2011)
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 2,762 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,762
On Slideshare
2,477
From Embeds
285
Number of Embeds
1

Actions

Shares
Downloads
15
Comments
0
Likes
1

Embeds 285

http://www.scoop.it 285

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Drupal Nantes http://twitter.com/drupalnantes http://nantes.drupalgardens.com Meetup Drupal Nantes - 25 Mai 2011
  • 2. Drupal Nantes Meetups1 fois par mois, à la CantineSponsors, votre logo ici ! Meetup Drupal Nantes - 25 Mai 2011
  • 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. 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. Attention ! Notre theme sappelera choco jusqua la fin de la présentation Meetup Drupal Nantes - 25 Mai 2011
  • 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. Structure dun theme Meetup Drupal Nantes - 25 Mai 2011
  • 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. 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. 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. 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. 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. PAUSEMeetup Drupal Nantes - 25 Mai 2011
  • 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. Fichiers templates (tpl) Meetup Drupal Nantes - 25 Mai 2011
  • 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. 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. Fichiers templates (tpl) page.tpl.php CSSContenu de la pageRegion sidebar Javascript Meetup Drupal Nantes - 25 Mai 2011
  • 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. Fichiers templates (tpl)node.tpl.php Meetup Drupal Nantes - 25 Mai 2011
  • 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. 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. 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. PAUSEMeetup Drupal Nantes - 25 Mai 2011
  • 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. 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. 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. 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. 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. Notion de base themeBase theme = frameworkHéritage dune solide base de travailExemples ● Zen ● Omega ● Fusion Meetup Drupal Nantes - 25 Mai 2011
  • 31. PAUSEMeetup Drupal Nantes - 25 Mai 2011
  • 32. Template de views Meetup Drupal Nantes - 25 Mai 2011
  • 33. Types de templates views Meetup Drupal Nantes - 25 Mai 2011
  • 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. 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