Theming à la Drupal      Drupal Meetup Paris 28 nov. 2012   © R. Jarraud 2012
Romain JarraudFormateur / consultant DrupalTrained People - drupalfrance.com                Drupal Meetup Paris 28 nov. 20...
Séparer le fond de la forme    Système                     génère le contenu     Thème                      affiche le conte...
Séparer le fond de la formeavec Drupal Le système produit les données sous forme de variables php. Le thème habille ces do...
Séparer le fond de la formeavec Drupal Drupal formate l’affichage par défaut. Le thème ne fait que surcharger et/ou modifier ...
Le thèmepeut modifier tout ce qui est affiché (c’est son rôle !) :  structure html  styles css  javascriptest appelé en dern...
Séparer les données duformatageTout le contenu est envoyé au thème sous forme detableau php.Chaque élément à afficher sur l...
Séparer les données duformatageTransmettre au thème les données à afficher et leformatage par défaut séparément.Un thème pe...
Render array ?Un render array est un tableau php contenant despropriétés particulières indiquées par un #.Ces propriétés i...
Render array $pageTout ce qui doit être affiché est contenu dans $page.Imbriquation des éléments : régions > blocs >contenu...
Render array $pagehook_page_build() => ajouter des éléments à la page.hook_page_alter() => modifier des élémentsexistants.d...
Propriété #themeLa propriété #theme indique le nom du hook dethème servant au rendu d’un élément :  Nom de la fonction de ...
Le thèmeSurcharge/modifie l’affichage proposé en :  définissant la structure html.  ajoutant ses styles.  proposant des javas...
Le thèmeComporte donc des :  Fichiers de templates *.tpl.php.  Feuilles de styles *.css.  Scripts *.js.  ...              ...
Fichier .info Métadonnées du thème : name, description, version, core, package... CSS et JS. Régions. On peut y ajouter se...
Fichier .infoLes templates et fonctions de thème sont reconnusautomatiquement.                   Drupal Meetup Paris 28 no...
Où placer le code phpassocié au thème ?Fichier template.php.Ce fichier doit être placé à la racine du thème.Il est reconnu ...
Fichier template.phpSurcharge des fonctions de thème.Ajout de fonctions de preprocess.Implémentation de hooks : hook_theme...
Ordre de chargement : CSS    Thème                       Groupe «theme»    Modules                    Groupe «default»    ...
Ordre de chargement :fonctions de thème et templates    Drupal                                      Thème                 ...
Surcharge - en pratique Fonction de thème   Copier le code de la fonction originale dans le fichier   template.php du thème...
Surcharge - exemplefunction montheme_breadcrumb($variables) { $breadcrumb = $variables[breadcrumb];    if (!empty($breadcr...
Fonction de preprocessA chaque fois qu’une fonction de thème ou untemplate est invoqué les variables transitent par desfon...
Fonction de preprocess  Fonction de    $variables                          Fonction depreprocess des                      ...
Fonction de preprocess - exemple// Modifie le texte «Soumis par...» des articles.function montheme_preprocess_node(&$variab...
Hook de theme - candidatsChaque fois qu’un hook de theme va être utilisé pourafficher un élément, Drupal détermine le bon c...
Fonction de preprocess - hooks de theme dérivés// Déclaration des suggestions dans la fonction de preprocess.function mont...
Hook_page_alter()Drupal envoi au thème tout le contenu de la page sousforme de render array $page.Pour modifier ce render a...
Hook_page_alter() - exemple// Modifie la région d’un bloc sur la page d’accueil.// Ici le bloc_1 est passé de la région_1 à...
Et Drupal 8 ? Le système de thème de Drupal est complexe et s’adresse plus à des développeurs qu’à des themers. La sécurit...
Merci !Drupal Meetup Paris 28 nov. 2012   © R. Jarraud 2012
Questions ?  Drupal Meetup Paris 28 nov. 2012   © R. Jarraud 2012
Prochain SlideShare
Chargement dans…5
×

Drupal meetup paris nov 2012

1 073 vues

Publié le

Présentation du système de theming de drupal 7.

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 073
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
13
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Drupal meetup paris nov 2012

  1. 1. Theming à la Drupal Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  2. 2. Romain JarraudFormateur / consultant DrupalTrained People - drupalfrance.com Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  3. 3. Séparer le fond de la forme Système génère le contenu Thème affiche le contenu Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  4. 4. Séparer le fond de la formeavec Drupal Le système produit les données sous forme de variables php. Le thème habille ces données avec du HTML. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  5. 5. Séparer le fond de la formeavec Drupal Drupal formate l’affichage par défaut. Le thème ne fait que surcharger et/ou modifier cet affichage. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  6. 6. Le thèmepeut modifier tout ce qui est affiché (c’est son rôle !) : structure html styles css javascriptest appelé en dernier et donc prend la main. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  7. 7. Séparer les données duformatageTout le contenu est envoyé au thème sous forme detableau php.Chaque élément à afficher sur la page est contenudans ce tableau. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  8. 8. Séparer les données duformatageTransmettre au thème les données à afficher et leformatage par défaut séparément.Un thème peut alors modifier le formatage. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  9. 9. Render array ?Un render array est un tableau php contenant despropriétés particulières indiquées par un #.Ces propriétés indiquent quel est le formatage àutiliser et les données à formater. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  10. 10. Render array $pageTout ce qui doit être affiché est contenu dans $page.Imbriquation des éléments : régions > blocs >contenus.Chaque élément est alors fabriqué (html) en remontantjusqu’au niveau de la page.Enfin les entêtes html sont ajoutées (html.tpl.php). Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  11. 11. Render array $pagehook_page_build() => ajouter des éléments à la page.hook_page_alter() => modifier des élémentsexistants.drupal_render_page() => fait le rendu de la page enutilisant le template page.tpl.php Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  12. 12. Propriété #themeLa propriété #theme indique le nom du hook dethème servant au rendu d’un élément : Nom de la fonction de thème. Nom du fichier de template (sans extension).Rôle et fonctionnement très similaires. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  13. 13. Le thèmeSurcharge/modifie l’affichage proposé en : définissant la structure html. ajoutant ses styles. proposant des javascripts. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  14. 14. Le thèmeComporte donc des : Fichiers de templates *.tpl.php. Feuilles de styles *.css. Scripts *.js. ... Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  15. 15. Fichier .info Métadonnées du thème : name, description, version, core, package... CSS et JS. Régions. On peut y ajouter ses propres propriétés (theme_get_setting()). Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  16. 16. Fichier .infoLes templates et fonctions de thème sont reconnusautomatiquement. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  17. 17. Où placer le code phpassocié au thème ?Fichier template.php.Ce fichier doit être placé à la racine du thème.Il est reconnu automatiquement par Drupal. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  18. 18. Fichier template.phpSurcharge des fonctions de thème.Ajout de fonctions de preprocess.Implémentation de hooks : hook_theme(),hook_preprocess(), hook_css_alter(), hook_js_alter(),hook_page_alter()...Fonctions drupal_add_css() et drupal_add_js(). Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  19. 19. Ordre de chargement : CSS Thème Groupe «theme» Modules Groupe «default» Système Groupe «system» Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  20. 20. Ordre de chargement :fonctions de thème et templates Drupal Thème Modules Défaut Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  21. 21. Surcharge - en pratique Fonction de thème Copier le code de la fonction originale dans le fichier template.php du thème. Renommer la fonction montheme_nom_du_hook_de_theme(). Modifier le code. Template Copier le fichier (.tpl.php) original dans le répertoire du thème. Modifier le code. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  22. 22. Surcharge - exemplefunction montheme_breadcrumb($variables) { $breadcrumb = $variables[breadcrumb]; if (!empty($breadcrumb)) { // Provide a navigational heading to give context for breadcrumb links to // screen-reader users. Make the heading invisible with .element-invisible. $output = <h2 class="element-invisible"> . t(You are here) . </h2>; $output .= <div class="breadcrumb"> . implode( » , $breadcrumb) . </div>; return $output; }} Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  23. 23. Fonction de preprocessA chaque fois qu’une fonction de thème ou untemplate est invoqué les variables transitent par desfonctions de preprocess.On peut alors préparer/modifier les variables avantqu’elles soient transmisent. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  24. 24. Fonction de preprocess Fonction de $variables Fonction depreprocess des preprocess du modules thème $variables $variables Fonction de Fonction depreprocess par thème ou défaut template Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  25. 25. Fonction de preprocess - exemple// Modifie le texte «Soumis par...» des articles.function montheme_preprocess_node(&$variables) { if ($variables[‘node’]->type == ‘article’) { $variables[‘submitted’] = t(‘Article written on !datetime’,array(‘!datetime’ => $variables[‘date’])); }} Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  26. 26. Hook de theme - candidatsChaque fois qu’un hook de theme va être utilisé pourafficher un élément, Drupal détermine le bon candidat.Exemple pour la page au chemin ma/page : page--ma--page.tpl.php page--ma.tpl.php page.tpl.phpLa liste des suggestions de hook de thème est modifiable. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  27. 27. Fonction de preprocess - hooks de theme dérivés// Déclaration des suggestions dans la fonction de preprocess.function montheme_preprocess_page(&$variables) { $type = $variables[‘node’]->type; $variables[‘theme_hook_suggestions’][] = ‘page__’ . $type;} Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  28. 28. Hook_page_alter()Drupal envoi au thème tout le contenu de la page sousforme de render array $page.Pour modifier ce render array on utilise lehook_page_alter().On peut alors manipuler le tableau et reprendre la mainsur tous les éléments de la page. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  29. 29. Hook_page_alter() - exemple// Modifie la région d’un bloc sur la page d’accueil.// Ici le bloc_1 est passé de la région_1 à la region_2.function montheme_page_alter(&$page) { if (drupal_is_front_page()) { $page[‘region_2’][‘bloc_1’] = $page[‘region_1’][‘bloc_1’]; unset($page[‘region_1’][‘bloc_1’]); }} Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  30. 30. Et Drupal 8 ? Le système de thème de Drupal est complexe et s’adresse plus à des développeurs qu’à des themers. La sécurité peut être mise à mal. => Twig Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  31. 31. Merci !Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  32. 32. Questions ? Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012

×