drupal meetup paris nov 2012
DESCRIPTION
Présentation du système de theming de drupal 7.TRANSCRIPT
![Page 1: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/1.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Theming à la Drupal
![Page 2: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/2.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Romain JarraudFormateur / consultant DrupalTrained People - drupalfrance.com
![Page 3: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/3.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Séparer le fond de la forme
Thème
Système
affiche le contenu
génère le contenu
![Page 4: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/4.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Séparer le fond de la forme avec Drupal
Le système produit les données sous forme de variables php.
Le thème habille ces données avec du HTML.
![Page 5: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/5.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Séparer le fond de la forme avec Drupal
Drupal formate l’affichage par défaut.
Le thème ne fait que surcharger et/ou modifier cet affichage.
![Page 6: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/6.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Le thème
peut modifier tout ce qui est affiché (c’est son rôle !) :
structure html
styles css
javascript
est appelé en dernier et donc prend la main.
![Page 7: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/7.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Séparer les données du formatage
Tout le contenu est envoyé au thème sous forme de tableau php.
Chaque élément à afficher sur la page est contenu dans ce tableau.
![Page 8: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/8.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Séparer les données du formatage
Transmettre au thème les données à afficher et le formatage par défaut séparément.
Un thème peut alors modifier le formatage.
![Page 9: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/9.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Render array ?
Un render array est un tableau php contenant des propriétés particulières indiquées par un #.
Ces propriétés indiquent quel est le formatage à utiliser et les données à formater.
![Page 10: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/10.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Render array $page
Tout 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 remontant jusqu’au niveau de la page.
Enfin les entêtes html sont ajoutées (html.tpl.php).
![Page 11: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/11.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Render array $page
hook_page_build() => ajouter des éléments à la page.
hook_page_alter() => modifier des éléments existants.
drupal_render_page() => fait le rendu de la page en utilisant le template page.tpl.php
![Page 12: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/12.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Propriété #theme
La propriété #theme indique le nom du hook de thè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.
![Page 13: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/13.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Le thème
Surcharge/modifie l’affichage proposé en :
définissant la structure html.
ajoutant ses styles.
proposant des javascripts.
![Page 14: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/14.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Le thème
Comporte donc des :
Fichiers de templates *.tpl.php.
Feuilles de styles *.css.
Scripts *.js.
...
![Page 15: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/15.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
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()).
![Page 16: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/16.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Fichier .info
Les templates et fonctions de thème sont reconnus automatiquement.
![Page 17: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/17.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Où placer le code php associé au thème ?
Fichier template.php.
Ce fichier doit être placé à la racine du thème.
Il est reconnu automatiquement par Drupal.
![Page 18: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/18.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Fichier template.php
Surcharge 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().
![Page 19: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/19.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Ordre de chargement : CSS
Système Groupe «system»
Modules Groupe «default»
Thème Groupe «theme»
![Page 20: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/20.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Ordre de chargement : fonctions de thème et templates
ThèmeDrupal
Modules
Défaut
![Page 21: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/21.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Surcharge - en pratiqueFonction 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.
![Page 22: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/22.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Surcharge - exemple
function 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; }}
![Page 23: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/23.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Fonction de preprocess
A chaque fois qu’une fonction de thème ou un template est invoqué les variables transitent par des fonctions de preprocess.
On peut alors préparer/modifier les variables avant qu’elles soient transmisent.
![Page 24: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/24.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Fonction de preprocess
Fonction de preprocess par
défaut
Fonction de preprocess du
thème
Fonction de thème ou template
Fonction de preprocess des
modules
$variables
$variables $variables
![Page 25: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/25.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
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’])); }}
![Page 26: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/26.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Hook de theme - candidats
Chaque fois qu’un hook de theme va être utilisé pour afficher 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.php
La liste des suggestions de hook de thème est modifiable.
![Page 27: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/27.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
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;}
![Page 28: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/28.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Hook_page_alter()
Drupal envoi au thème tout le contenu de la page sous forme de render array $page.
Pour modifier ce render array on utilise le hook_page_alter().
On peut alors manipuler le tableau et reprendre la main sur tous les éléments de la page.
![Page 29: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/29.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
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’]); }}
![Page 30: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/30.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
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
![Page 31: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/31.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Merci !
![Page 32: Drupal meetup paris nov 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070320/5586e63cd8b42a84798b469d/html5/thumbnails/32.jpg)
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
Questions ?