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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,883

Published 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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,883
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

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

×