drupal meetup paris nov 2012

Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012

Theming à la Drupal

Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012

Romain JarraudFormateur / consultant DrupalTrained People - drupalfrance.com

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

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.

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.

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.

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.

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.

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.

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).

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

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.

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.

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.

...

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()).

Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012

Fichier .info

Les templates et fonctions de thème sont reconnus automatiquement.

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.

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().

Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012

Ordre de chargement : CSS

Système Groupe «system»

Modules Groupe «default»

Thème Groupe «theme»

Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012

Ordre de chargement : fonctions de thème et templates

ThèmeDrupal

Modules

Défaut

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.

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; }}

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.

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

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’])); }}

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.

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;}

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.

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’]); }}

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

Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012

Merci !

Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012

Questions ?