Soumettre la recherche
Mettre en ligne
Drupal meetup paris nov 2012
•
1 j'aime
•
1,145 vues
Romain Jarraud
Suivre
Présentation du système de theming de drupal 7.
Lire moins
Lire la suite
Signaler
Partager
Signaler
Partager
1 sur 32
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
DrupalCamp Paris 2013 - Theming
DrupalCamp Paris 2013 - Theming
Romain Jarraud
Global Training Day Paris - Drupal 8
Global Training Day Paris - Drupal 8
Romain Jarraud
Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015
Romain Jarraud
DrupalCamp Paris 2013 - Drupal un cms oriente metier
DrupalCamp Paris 2013 - Drupal un cms oriente metier
Romain Jarraud
Drink 'n' Drupal Lille nov. 2013
Drink 'n' Drupal Lille nov. 2013
Romain Jarraud
Séminaire Drupal 8
Séminaire Drupal 8
Vincent Maucorps
Réussir son projet Drupal
Réussir son projet Drupal
Adyax
Initiation à Bootstrap
Initiation à Bootstrap
Abdoulaye Dieng
Recommandé
DrupalCamp Paris 2013 - Theming
DrupalCamp Paris 2013 - Theming
Romain Jarraud
Global Training Day Paris - Drupal 8
Global Training Day Paris - Drupal 8
Romain Jarraud
Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015
Romain Jarraud
DrupalCamp Paris 2013 - Drupal un cms oriente metier
DrupalCamp Paris 2013 - Drupal un cms oriente metier
Romain Jarraud
Drink 'n' Drupal Lille nov. 2013
Drink 'n' Drupal Lille nov. 2013
Romain Jarraud
Séminaire Drupal 8
Séminaire Drupal 8
Vincent Maucorps
Réussir son projet Drupal
Réussir son projet Drupal
Adyax
Initiation à Bootstrap
Initiation à Bootstrap
Abdoulaye Dieng
Introduction à HTML 5
Introduction à HTML 5
Abdoulaye Dieng
Drupal 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étails
Symetris
HTML5 - 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 7
slybud
Drupal 8
Drupal 8
qdelance
Pré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 Javascript
codedarmor
Les 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édias
Laurent Moccozet
Confé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 Drupal
Adyax
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
Alexandre Marie
Drupagora linagora-20111110
Drupagora linagora-20111110
Michel-Marie Maudet
Optimisez vos imports de données avec Migrate
Optimisez vos imports de données avec Migrate
Matthieu Guillermin
Css.more.or.less
Css.more.or.less
VISEO
Alphorm.com Formation Informatica PowerCenter : Niveau Perfectionnement
Alphorm.com Formation Informatica PowerCenter : Niveau Perfectionnement
Alphorm
Introduction à Drupal 8
Introduction à Drupal 8
Core-Techs
Optimiser les performances dans Wordpress
Optimiser les performances dans Wordpress
Nicolas Juen
Drupal n'est pas seulement un CMS
Drupal n'est pas seulement un CMS
Adyax
Linux
Linux
NaHuue Romano
Indication aep périphériques
Indication aep périphériques
carreres
Contenu connexe
Tendances
Introduction à HTML 5
Introduction à HTML 5
Abdoulaye Dieng
Drupal 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étails
Symetris
HTML5 - 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 7
slybud
Drupal 8
Drupal 8
qdelance
Pré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 Javascript
codedarmor
Les 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édias
Laurent Moccozet
Confé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 Drupal
Adyax
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
Alexandre Marie
Drupagora linagora-20111110
Drupagora linagora-20111110
Michel-Marie Maudet
Optimisez vos imports de données avec Migrate
Optimisez vos imports de données avec Migrate
Matthieu Guillermin
Css.more.or.less
Css.more.or.less
VISEO
Alphorm.com Formation Informatica PowerCenter : Niveau Perfectionnement
Alphorm.com Formation Informatica PowerCenter : Niveau Perfectionnement
Alphorm
Introduction à Drupal 8
Introduction à Drupal 8
Core-Techs
Optimiser les performances dans Wordpress
Optimiser les performances dans Wordpress
Nicolas Juen
Drupal n'est pas seulement un CMS
Drupal n'est pas seulement un CMS
Adyax
Tendances
(20)
Introduction à HTML 5
Introduction à HTML 5
Drupal 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étails
HTML5 - 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 7
Drupal 8
Drupal 8
Pré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 Javascript
Les 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édias
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Présentation de Drupal
Présentation de Drupal
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
Drupagora linagora-20111110
Drupagora linagora-20111110
Optimisez vos imports de données avec Migrate
Optimisez vos imports de données avec Migrate
Css.more.or.less
Css.more.or.less
Alphorm.com Formation Informatica PowerCenter : Niveau Perfectionnement
Alphorm.com Formation Informatica PowerCenter : Niveau Perfectionnement
Introduction à Drupal 8
Introduction à Drupal 8
Optimiser les performances dans Wordpress
Optimiser les performances dans Wordpress
Drupal n'est pas seulement un CMS
Drupal n'est pas seulement un CMS
En vedette
Linux
Linux
NaHuue Romano
Indication aep périphériques
Indication aep périphériques
carreres
Lesson 5a
Lesson 5a
Raliat
Gov doccollection
Gov doccollection
smielke
échange_rive de gier_alpes_2011
échange_rive de gier_alpes_2011
doraiesmas
Cinema between art and industry
Cinema between art and industry
Georgio Nassif
En vedette
(6)
Linux
Linux
Indication aep périphériques
Indication aep périphériques
Lesson 5a
Lesson 5a
Gov doccollection
Gov doccollection
échange_rive de gier_alpes_2011
échange_rive de gier_alpes_2011
Cinema between art and industry
Cinema between art and industry
Similaire à Drupal meetup paris nov 2012
Drupalcamp 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 Drupal
Thomas Delerm
Zf2 ce-qui-va-changer
Zf2 ce-qui-va-changer
Mickael Perraud
Panels, 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 8
OSInet
ZendFramework2 - Présentation
ZendFramework2 - Présentation
julien pauli
Outils 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 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 8
Aurelien Navarre
Design Patterns
Design Patterns
Mehdi Mehni
Backbonejs presentation
Backbonejs presentation
Nicolas Vandenbogaerde
Introduction à AngularJS
Introduction à AngularJS
Abdoulaye Dieng
Introduction à 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 pratique
Vladyslav Riabchenko
Patterns and OOP in PHP
Patterns and OOP in PHP
julien pauli
Drupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliers
Frédéric Simonet
Framework 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
PHP5 et Zend Framework
PHP5 et Zend Framework
Ndjido Ardo BAR
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
zineblahib2
Similaire à Drupal meetup paris nov 2012
(20)
Drupalcamp 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 Drupal
Zf2 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 2013
Les blocs Drupal de drop.org à Drupal 8
Les blocs Drupal de drop.org à Drupal 8
ZendFramework2 - Présentation
ZendFramework2 - Présentation
Outils 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 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 8
Design Patterns
Design Patterns
Backbonejs presentation
Backbonejs presentation
Introduction à AngularJS
Introduction à AngularJS
Introduction à 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 pratique
Patterns and OOP in PHP
Patterns and OOP in PHP
Drupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliers
Framework 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)
PHP5 et Zend Framework
PHP5 et Zend Framework
react (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
Télécharger maintenant