• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Meetup Drupal Nantes: Le Theming (25/05/2011)
 

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

on

  • 1,635 views

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

Statistics

Views

Total Views
1,635
Views on SlideShare
1,350
Embed Views
285

Actions

Likes
1
Downloads
15
Comments
0

1 Embed 285

http://www.scoop.it 285

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Drupal Nantes http://twitter.com/drupalnantes http://nantes.drupalgardens.com Meetup Drupal Nantes - 25 Mai 2011
    • Drupal Nantes Meetups1 fois par mois, à la CantineSponsors, votre logo ici ! Meetup Drupal Nantes - 25 Mai 2011
    • Le ThemingComprendre le fonctionnement dun theme ● Un peu de théorie ● Une démo ● Échanges et discussions Meetup Drupal Nantes - 25 Mai 2011
    • 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
    • Attention ! Notre theme sappelera choco jusqua la fin de la présentation Meetup Drupal Nantes - 25 Mai 2011
    • 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
    • Structure dun theme Meetup Drupal Nantes - 25 Mai 2011
    • 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
    • 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
    • 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
    • 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
    • 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
    • PAUSEMeetup Drupal Nantes - 25 Mai 2011
    • 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
    • Fichiers templates (tpl) Meetup Drupal Nantes - 25 Mai 2011
    • 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
    • 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
    • Fichiers templates (tpl) page.tpl.php CSSContenu de la pageRegion sidebar Javascript Meetup Drupal Nantes - 25 Mai 2011
    • 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
    • Fichiers templates (tpl)node.tpl.php Meetup Drupal Nantes - 25 Mai 2011
    • 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
    • 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
    • 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
    • PAUSEMeetup Drupal Nantes - 25 Mai 2011
    • 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
    • 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
    • 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
    • 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
    • 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
    • Notion de base themeBase theme = frameworkHéritage dune solide base de travailExemples ● Zen ● Omega ● Fusion Meetup Drupal Nantes - 25 Mai 2011
    • PAUSEMeetup Drupal Nantes - 25 Mai 2011
    • Template de views Meetup Drupal Nantes - 25 Mai 2011
    • Types de templates views Meetup Drupal Nantes - 25 Mai 2011
    • 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
    • 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