drupal meetup paris nov 2012

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

Theming à la Drupal


Romain JarraudFormateur / consultant DrupalTrained People - drupalfrance.com


Séparer le fond de la forme

Thème

Système

affiche le contenu

génère le contenu


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.


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.


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.


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.


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.


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


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


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.


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 fichier 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

Système Groupe «system»

Modules Groupe «default»

Thème Groupe «theme»


Ordre de chargement : fonctions de thème et templates

ThèmeDrupal

Modules

Défaut


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.


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


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


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


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.


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


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


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

Documents

comdrupal meetup paris

contenudrupal meetup

phpdrupal meetup paris

drupaldrupal meetup

fonctions drupal

css et drupal

thme copier

variables fonction