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

Drupal Nantes

Meetup Drupal Nantes - 25 Mai 2011

http://twitter.com/drupalnantes

http://nantes.drupalgardens.com

http://twitter.com/drupalnantes


Drupal Nantes Meetups


1 fois par mois, à la Cantine

Sponsors, votre logo ici !

http://cantine-nantes.org/

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)

http://drupal.org/node/171205

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

http://www.slideshare.net/mattfarina/intro-to-jquery-in-drupal

http://mydrupalblog.lhmdesign.com/drupal-theming-jquery-basics-inc-drupal-behaviors

http://mydrupalblog.lhmdesign.com/drupal-theming-jquery-basics-inc-drupal-behaviors


PAUSE

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>

http://bit.ly/d6-page-tpl




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

CSS



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

http://bit.ly/d6-node-tpl

http://bit.ly/d7-node-tpl



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


PAUSE

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

http://bit.ly/drupal6-form-api

http://bit.ly/drupal7-form-api


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

http://drupal.org/project/devel_themer

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

http://drupal.org/files/theme_flow_6_1.pdf

Notion de 'base theme'


Base theme = framework

Héritage d'une solide base de travail

Exemples● Zen● Omega● Fusion

http://drupal.org/project/zen

http://drupal.org/project/omega

http://drupal.org/project/fusion


PAUSE

Template de views



Types de templates 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 ...

http://drupal.org/documentation/theme


http://drupal.org/project/devel

http://drupal.org/project/devel_themer

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

Technology