Mais conteúdo relacionado
Semelhante a Drupal meetup paris nov 2012 (20)
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
- 32. Questions ?
Drupal Meetup Paris 28 nov. 2012 © R. Jarraud 2012