meetup drupal nantes: le theming (25/05/2011)

Drupal Nantes

Meetup Drupal Nantes - 25 Mai 2011

http://twitter.com/drupalnantes

http://nantes.drupalgardens.com

Drupal Nantes Meetups

1 fois par mois, à la Cantine

Sponsors, votre logo ici !

Le Theming

Comprendre le fonctionnement d'un theme

● Un peu de théorie

● Une démo

● Échanges et discussions

Le Theming

Structure d'un theme

Fichier .info

Les fichiers de template (*.tpl.php)

Fichiers template.php & theme-settings.php

Fonctions hook_preprocessTemplate de views

Attention !

Notre theme s'appelera choco jusqu'a la fin de la présentation

choco.info : Définition du themeFichiers tpl : templates (html)Fichiers css / js / imagestemplate.php : fonctions du themetheme-settings.php : Configuration du theme

Le dossier du theme doit être placé dans:sites/all/themes/chocoousites/default/themes/choco

Fichier .info

Documentation: http://drupal.org/node/171205

Infos obligatoires

● name : le nom du theme

● core : version de drupal (6.x ou 7.x)

● engine : moteur de template (généralement phptemplate)

Fichier .info

Infos complementaires (1/2)

● description : description du theme

screenshot : aperçu du theme

● base theme : theme parent ('starter theme')

Fichier .info

Infos complementaires (2/2)

● regions : regions du theme (header, sidebar, ...)

● stylesheets : Feuilles de styles CSS (screen, print, all)

● scripts : Fichiers Javascript

● features : fonctionnalités du theme (slogan, logo, ...)

Fichiers CSS

Autant que vous voulez !

Le fichier.info permet de préciser le media (screen, print, ...)

Exemple:stylesheets[screen][] = css/typography.cssstylesheets[screen][] = css/blocks.cssstylesheet[print][] = css/print.css

CSS Classique, rien de spécifique à Drupal

Fichiers Javascript

Drupal embarque jQuery par defaut● Drupal6: 1.2.6 (update vers 1.3.2)● Drupal7: 1.4.4 (update vers 1.5.2)

Exemple:scripts[] = cs/main.js

Utilisation des behaviors (non couvert par ce meetup!)

Documentation:http://www.slideshare.net/mattfarina/intro-to-jquery-in-drupalhttp://mydrupalblog.lhmdesign.com/drupal-theming-jquery-basics-inc-drupal-behaviors

Fichiers templates (tpl)

Définir la structure <html> de votre theme

Très peu de php ( juste <?php print $ma_variable; ?> )

Syntaxe phptemplate : <?php if(true): print $ma_variable; endif; ?>

Exemples: ● page.tpl.php : balisage global de la page● node.tpl.php : balisage d'un node (full/teaser)● block.tpl.php : balisage d'un block

page.tpl.php (http://bit.ly/d6-page-tpl & http://bit.ly/d7-page-tpl)

Variables importantes (1/2)

● $head : balises <meta> (encodage, RSS, favicon, ...)● $head_title : balise <title>● $styles : CSS● $scripts : Javascript● $messages : Messages d'info/erreur Drupal● $closure : rien ne doit être placé à la suite de cette

variable à part </body></html>

page.tpl.php (http://bit.ly/d6-page-tpl & http://bit.ly/d7-page-tpl)

Variables importantes (2/2)

● $logo : Logo● $site_name : Nom du site● $title : Titre de la page● $content : Contenu de la page (node, view, form, ...)● $sidebar, $header... : Contenu des régions définies

dans choco.info● ...

page.tpl.php

Contenu de la page

Region 'sidebar'Javascript

node.tpl.php (http://bit.ly/d6-node-tpl & http://bit.ly/d7-node-tpl)

Variables importantes

● $title : titre du node● $content : contenu du node● $submitted : information de publication● $teaser / $page : information d'affichage● $node : l'Objet node

node.tpl.php

Surcharge de templates pour page.tpl (http://drupal.org/node/1089662)

Exemple pour l'affichage du node 132, de type 'article' (monsite.com/node/132)

Drupal6 va rechercher les fichiers tpl suivants:page-node-132.tpl.phppage-node.tpl.phppage.tpl.php

Exemple pour le formulaire de contact (monsite.com/contact)page-contact.tpl.phppage.tpl.php

Surcharge des fichiers de templates pour node.tpl (http://drupal.org/node/1089662)

Exemple pour le node 132, de type 'article'

Drupal va rechercher les fichiers tpl suivants:● node-article.tpl.php (D6) | node--article.tpl.php (D7)● node.tpl.php

Possibilité d'ajouter d'autres suggestions avec le hook_preprocess_node($variables) : dans le tableau $variables['template_files'][ ]

Cas des champs cck

Fichier content-field.tpl.php (sites/all/modules/cck/theme)

Surcharge : copier/coller ce fichier dans votre theme.

Même principe de 'suggestions' que le core de Drupal● content-field-fieldname-contentType.tpl.php● content-field-contentType.tpl.php● content-field-fieldname.tpl.php● content-field.tpl.php

theme-settings.php

Permet d'écrire une interface de configuration du thème (Construction du site > Themes > Configurer)

Utilisation de la Form API ( = Code!)http://bit.ly/drupal6-form-apihttp://bit.ly/drupal7-form-api

Page de documentation : http://drupal.org/node/177868

template.php

Déclaration de fonctions de theme (hook_theme)

Surcharge des fonctions de theme existantes

Implémentation des hooks _preprocess

Surcharge de fonctions

Drupal utilise des fonctions de theme, commetheme_node_submitted() pour afficher les informations de publication d'un node.

La surchage sera donc choco_node_submitted(), à placer dans le fichier template.php

Le module devel_themer permet de trouver quelle fonction de theme est utilisée.

Documentation : http://bit.ly/d6-themable

Hooks _preprocess

Modifier et préparer les variables présentes dans les tplExemple: Template page.tpl.php => hook_preprocess_page

template.phpfunction choco_preprocess_page(&$variables) { $variables['ma_nouvelle_variable'] = "Hmm, les chocos";}

page.tpl.php<?php print $ma_nouvelle_variable; ?>

( Documentation : http://drupal.org/node/223430 )

Hooks _preprocess

( Documentation : http://drupal.org/files/theme_flow_6_1.pdf )

Ordre d’exécution des fonctions des preprocess

● Drupal Core○ template_preprocess○ template_preprocess_hook

● Modules○ NomDuModule_preprocess○ NomDuModule_preprocess_hook

● Themes○ NomDuTheme_preprocess○ NomDuModule_preprocess_hook

Notion de 'base theme'

Base theme = framework

Héritage d'une solide base de travail

Exemples● Zen● Omega● Fusion

Template de views

Types de templates views

Même principe de suggestions que le core:

● views-view.tpl.php● views-view--maVue.tpl.php● views-view--displayType.tpl.php● views-view--maVue--displayType.tpl.php

( également valable pour les autres templates de views: views-view--unformated.tpl, views-view--fields.tpl, ...)

Ressources

http://drupal.org/documentation/themeCette presentation sur http://nantes.drupalgardens.com

OutilsDevel : http://drupal.org/project/develDevel_themer : http://drupal.org/project/devel_themer

ReflexeVider le cache, vider le cache, vider le cache, vider le cache, vider le cache, vider le cache, vider le cache, vider le cache, vider le cache ...

meetup drupal nantes: le theming (25/05/2011)

Technology

slide sessione drupal theming & css framework – drupal...

meetup drupal lyon - sécuriser un site drupal

moodle theming and customization

meetup drupal lyon 2016 - environnements de dév drupal...

drupal global training day by drupal mumbai 6th sep -...

environnements de dév drupal automatisés avec lxc et...

netnode - drupal pur - drupal development experts

meetup ansible montrÉal mmeeeettuupp...

drupal camp2009 asp.net vs drupal

designing and theming drupal for mobile devices

frédéric bisson - 8 ans de drupal - drupal meetup rouen #3

drupal性能优化之apachesolr-drupal meetup in beijing

theming en drupal

drupal day 2011 - node.js e drupal

workshop theming drupaljam 2007

comment on dit drupal en français ? - meetup drupal paris...

drupal theming Úvod do šablonování převod webu do...

#mm17es - theming en magento 2 usando un framework de...

drupal empezando con drupal

symetris présente drupal 8 - linux-meetup (montreal)...