Your SlideShare is downloading. ×
0
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
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

Drupal meetup paris nov 2012

636

Published on

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

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
636
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
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. Theming à la Drupal Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  • 2. Romain JarraudFormateur / consultant DrupalTrained People - drupalfrance.com Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Fichier .infoLes templates et fonctions de thème sont reconnusautomatiquement. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Merci !Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  • 32. Questions ? Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012

×