SlideShare une entreprise Scribd logo
Theming à la Drupal



      Drupal Meetup Paris 28 nov. 2012   © R. Jarraud 2012
Romain Jarraud
Formateur / consultant Drupal
Trained People - drupalfrance.com




                Drupal Meetup Paris 28 nov. 2012   © R. Jarraud 2012
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
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
    Thème                       Groupe «theme»



    Modules                    Groupe «default»



    Système                   Groupe «system»

              Drupal Meetup Paris 28 nov. 2012    © R. Jarraud 2012
Ordre de chargement :
fonctions de thème et templates
    Drupal                                      Thème



                                                Modules



                                                Défaut


             Drupal Meetup Paris 28 nov. 2012             © R. Jarraud 2012
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
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    $variables                          Fonction de
preprocess des                                      preprocess du
   modules                                              thème


        $variables                              $variables


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

                 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 ?



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

Contenu connexe

Tendances

Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
Abdoulaye Dieng
 
Drupal presentation
Drupal presentationDrupal presentation
Drupal presentation
Hery Zo Rakotondramanana
 
Présentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détails
Présentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détailsPrésentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détails
Présentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détails
Symetris
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
Rémy Savard
 
Architecture des types de contenu : ce qui a changé en Drupal 7
Architecture des types de contenu : ce qui a changé en Drupal 7Architecture des types de contenu : ce qui a changé en Drupal 7
Architecture des types de contenu : ce qui a changé en Drupal 7
slybud
 
Drupal 8
Drupal 8Drupal 8
Drupal 8
qdelance
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
jverrecchia
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
Erwan Tanguy
 
Projet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédiasProjet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédias
Laurent Moccozet
 
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo LarcherConférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Normandie Web Xperts
 
Présentation de Drupal
Présentation de DrupalPrésentation de Drupal
Présentation de Drupal
Adyax
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
Alexandre Marie
 
Drupagora linagora-20111110
Drupagora linagora-20111110Drupagora linagora-20111110
Drupagora linagora-20111110
Michel-Marie Maudet
 
Optimisez vos imports de données avec Migrate
Optimisez vos imports de données avec MigrateOptimisez vos imports de données avec Migrate
Optimisez vos imports de données avec Migrate
Matthieu Guillermin
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.less
VISEO
 
Alphorm.com Formation Informatica PowerCenter : Niveau Perfectionnement
Alphorm.com Formation Informatica PowerCenter : Niveau PerfectionnementAlphorm.com Formation Informatica PowerCenter : Niveau Perfectionnement
Alphorm.com Formation Informatica PowerCenter : Niveau Perfectionnement
Alphorm
 
Introduction à Drupal 8
Introduction à Drupal 8Introduction à Drupal 8
Introduction à Drupal 8
Core-Techs
 
Optimiser les performances dans Wordpress
Optimiser les performances dans WordpressOptimiser les performances dans Wordpress
Optimiser les performances dans Wordpress
Nicolas Juen
 
Drupal n'est pas seulement un CMS
Drupal n'est pas seulement un CMSDrupal n'est pas seulement un CMS
Drupal n'est pas seulement un CMS
Adyax
 

Tendances (20)

Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
Drupal presentation
Drupal presentationDrupal presentation
Drupal presentation
 
Présentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détails
Présentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détailsPrésentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détails
Présentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détails
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
 
Architecture des types de contenu : ce qui a changé en Drupal 7
Architecture des types de contenu : ce qui a changé en Drupal 7Architecture des types de contenu : ce qui a changé en Drupal 7
Architecture des types de contenu : ce qui a changé en Drupal 7
 
Drupal 8
Drupal 8Drupal 8
Drupal 8
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
Projet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédiasProjet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédias
 
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo LarcherConférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
 
Présentation de Drupal
Présentation de DrupalPrésentation de Drupal
Présentation de Drupal
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
 
Drupagora linagora-20111110
Drupagora linagora-20111110Drupagora linagora-20111110
Drupagora linagora-20111110
 
Optimisez vos imports de données avec Migrate
Optimisez vos imports de données avec MigrateOptimisez vos imports de données avec Migrate
Optimisez vos imports de données avec Migrate
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.less
 
Alphorm.com Formation Informatica PowerCenter : Niveau Perfectionnement
Alphorm.com Formation Informatica PowerCenter : Niveau PerfectionnementAlphorm.com Formation Informatica PowerCenter : Niveau Perfectionnement
Alphorm.com Formation Informatica PowerCenter : Niveau Perfectionnement
 
Introduction à Drupal 8
Introduction à Drupal 8Introduction à Drupal 8
Introduction à Drupal 8
 
Optimiser les performances dans Wordpress
Optimiser les performances dans WordpressOptimiser les performances dans Wordpress
Optimiser les performances dans Wordpress
 
Drupal n'est pas seulement un CMS
Drupal n'est pas seulement un CMSDrupal n'est pas seulement un CMS
Drupal n'est pas seulement un CMS
 

En vedette

Linux
LinuxLinux
Indication aep périphériques
Indication aep périphériquesIndication aep périphériques
Indication aep périphériques
carreres
 
Lesson 5a
Lesson 5aLesson 5a
Lesson 5a
Raliat
 
Gov doccollection
Gov doccollectionGov doccollection
Gov doccollection
smielke
 
échange_rive de gier_alpes_2011
échange_rive de gier_alpes_2011échange_rive de gier_alpes_2011
échange_rive de gier_alpes_2011
doraiesmas
 
Cinema between art and industry
Cinema between art and industryCinema between art and industry
Cinema between art and industry
Georgio Nassif
 

En vedette (6)

Linux
LinuxLinux
Linux
 
Indication aep périphériques
Indication aep périphériquesIndication aep périphériques
Indication aep périphériques
 
Lesson 5a
Lesson 5aLesson 5a
Lesson 5a
 
Gov doccollection
Gov doccollectionGov doccollection
Gov doccollection
 
échange_rive de gier_alpes_2011
échange_rive de gier_alpes_2011échange_rive de gier_alpes_2011
échange_rive de gier_alpes_2011
 
Cinema between art and industry
Cinema between art and industryCinema between art and industry
Cinema between art and industry
 

Similaire à Drupal meetup paris nov 2012

Drupalcamp Nantes - Adapter Drupal
Drupalcamp Nantes - Adapter DrupalDrupalcamp Nantes - Adapter Drupal
Drupalcamp Nantes - Adapter Drupal
Artusamak
 
Architecture PHP 3 tier avec Zend en backend de Drupal
Architecture PHP 3 tier avec Zend en backend de DrupalArchitecture PHP 3 tier avec Zend en backend de Drupal
Architecture PHP 3 tier avec Zend en backend de Drupal
Thomas Delerm
 
Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013
bellesmanieres
 
Les blocs Drupal de drop.org à Drupal 8
Les blocs Drupal de drop.org à Drupal 8Les blocs Drupal de drop.org à Drupal 8
Les blocs Drupal de drop.org à Drupal 8
OSInet
 
ZendFramework2 - Présentation
ZendFramework2 - PrésentationZendFramework2 - Présentation
ZendFramework2 - Présentation
julien pauli
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
Thomas Bodin
 
Migrations Drupal-to-Drupal avec migrate_d2d - Drupal Meetup Paris Sept 2013
Migrations Drupal-to-Drupal avec migrate_d2d - Drupal Meetup Paris Sept 2013Migrations Drupal-to-Drupal avec migrate_d2d - Drupal Meetup Paris Sept 2013
Migrations Drupal-to-Drupal avec migrate_d2d - Drupal Meetup Paris Sept 2013
Jonathan-David Schroder
 
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
Aurelien Navarre
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
Mehdi Mehni
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
Abdoulaye Dieng
 
Introduction à Zend Framework 2
Introduction à Zend Framework 2Introduction à Zend Framework 2
Introduction à Zend Framework 2
Mickael Perraud
 
Modèle de domaine riche dans une application métier complexe un exemple pratique
Modèle de domaine riche dans une application métier complexe un exemple pratiqueModèle de domaine riche dans une application métier complexe un exemple pratique
Modèle de domaine riche dans une application métier complexe un exemple pratique
Vladyslav Riabchenko
 
Patterns and OOP in PHP
Patterns and OOP in PHPPatterns and OOP in PHP
Patterns and OOP in PHP
julien pauli
 
Drupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliersDrupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliers
Frédéric Simonet
 
Framework Hibernate
Framework HibernateFramework Hibernate
Framework Hibernate
Ines Ouaz
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon
 
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbreact (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
zineblahib2
 

Similaire à Drupal meetup paris nov 2012 (20)

Drupalcamp Nantes - Adapter Drupal
Drupalcamp Nantes - Adapter DrupalDrupalcamp Nantes - Adapter Drupal
Drupalcamp Nantes - Adapter Drupal
 
Architecture PHP 3 tier avec Zend en backend de Drupal
Architecture PHP 3 tier avec Zend en backend de DrupalArchitecture PHP 3 tier avec Zend en backend de Drupal
Architecture PHP 3 tier avec Zend en backend de Drupal
 
Zf2 ce-qui-va-changer
Zf2 ce-qui-va-changerZf2 ce-qui-va-changer
Zf2 ce-qui-va-changer
 
Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013
 
Les blocs Drupal de drop.org à Drupal 8
Les blocs Drupal de drop.org à Drupal 8Les blocs Drupal de drop.org à Drupal 8
Les blocs Drupal de drop.org à Drupal 8
 
ZendFramework2 - Présentation
ZendFramework2 - PrésentationZendFramework2 - Présentation
ZendFramework2 - Présentation
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
 
Migrations Drupal-to-Drupal avec migrate_d2d - Drupal Meetup Paris Sept 2013
Migrations Drupal-to-Drupal avec migrate_d2d - Drupal Meetup Paris Sept 2013Migrations Drupal-to-Drupal avec migrate_d2d - Drupal Meetup Paris Sept 2013
Migrations Drupal-to-Drupal avec migrate_d2d - Drupal Meetup Paris Sept 2013
 
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
 
Backbonejs presentation
Backbonejs presentationBackbonejs presentation
Backbonejs presentation
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
Introduction à Zend Framework 2
Introduction à Zend Framework 2Introduction à Zend Framework 2
Introduction à Zend Framework 2
 
Modèle de domaine riche dans une application métier complexe un exemple pratique
Modèle de domaine riche dans une application métier complexe un exemple pratiqueModèle de domaine riche dans une application métier complexe un exemple pratique
Modèle de domaine riche dans une application métier complexe un exemple pratique
 
Patterns and OOP in PHP
Patterns and OOP in PHPPatterns and OOP in PHP
Patterns and OOP in PHP
 
Drupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliersDrupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliers
 
Framework Hibernate
Framework HibernateFramework Hibernate
Framework Hibernate
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
 
PHP5 et Zend Framework
PHP5 et Zend FrameworkPHP5 et Zend Framework
PHP5 et Zend Framework
 
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbreact (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
 

Drupal meetup paris nov 2012

  • 1. Theming à la Drupal Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  • 2. Romain Jarraud Formateur / consultant Drupal Trained 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 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 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 .info Les templates et fonctions de thème sont reconnus automatiquement. Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012
  • 17. 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
  • 18. 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
  • 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 - 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
  • 23. 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
  • 24. 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 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 - 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
  • 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 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
  • 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