Drupal meetup paris nov 2012

Theming à la Drupal

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

Romain Jarraud
Formateur / consultant Drupal
Trained People - drupalfrance.com


Séparer le fond de la forme

Système génère le contenu

Thème aﬃche le contenu


avec Drupal

Le système produit les données sous forme de
variables php.
Le thème habille ces données avec du HTML.


avec Drupal

Drupal formate l’affichage par défaut.
Le thème ne fait que surcharger et/ou modifier cet
affichage.


Le thème

peut modiﬁer tout ce qui est afﬁché (c’est son rôle !) :
structure html
styles css
javascript
est appelé en dernier et donc prend la main.


Séparer les données du
formatage

Tout le contenu est envoyé au thème sous forme de
tableau php.
Chaque élément à afﬁcher sur la page est contenu
dans ce tableau.


Séparer les données du
formatage

Transmettre au thème les données à afﬁcher et le
formatage par défaut séparément.
Un thème peut alors modiﬁer le formatage.


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.


Render array $page

Tout ce qui doit être afﬁché 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.
Enﬁn les entêtes html sont ajoutées (html.tpl.php).


Render array $page

hook_page_build() => ajouter des éléments à la page.
hook_page_alter() => modiﬁer des éléments
existants.
drupal_render_page() => fait le rendu de la page en
utilisant le template page.tpl.php


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 ﬁchier de template (sans extension).
Rôle et fonctionnement très similaires.


Le thème

Surcharge/modifie l’affichage proposé en :
définissant la structure html.
ajoutant ses styles.
proposant des javascripts.


Le thème

Comporte 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 ses propres propriétés
(theme_get_setting()).


Fichier .info

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


Où placer le code php
associé au thème ?

Fichier template.php.
Ce ﬁchier doit être placé à la racine du thème.
Il est reconnu automatiquement par Drupal.


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


Ordre de chargement : CSS
Thème Groupe «theme»

Modules Groupe «default»

Système Groupe «system»


Ordre de chargement :
fonctions de thème et templates
Drupal Thème

Modules

Défaut


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.


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


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/modiﬁer les variables avant
qu’elles soient transmisent.


Fonction de preprocess
Fonction de $variables Fonction de
preprocess des preprocess du
modules thème

$variables $variables

Fonction de Fonction de
preprocess par thème ou
défaut template


Fonction de preprocess -
exemple

// Modiﬁe 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’]));
}
}


Hook de theme - candidats
Chaque fois qu’un hook de theme va être utilisé pour
afﬁcher 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 modiﬁable.


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


Hook_page_alter()

Drupal envoi au thème tout le contenu de la page sous
forme de render array $page.
Pour modiﬁer 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.


Hook_page_alter() - exemple
// Modiﬁe 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’]);
}
}


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


Merci !


Questions ?


Drupal meetup paris nov 2012

Contenu connexe

Tendances

En vedette

Similaire à Drupal meetup paris nov 2012

Drupal meetup paris nov 2012