Meetup Drupal Nantes: Le Theming (25/05/2011)

Drupal Nantes
http://twitter.com/drupalnantes

http://nantes.drupalgardens.com

Meetup Drupal Nantes - 25 Mai 2011

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_preprocess
Template de views


Attention !

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



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

Le dossier du theme doit être placé dans:
sites/all/themes/choco
ou
sites/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.css
stylesheets[screen][] = css/blocks.css
stylesheet[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-drupal
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>


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

CSS

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.php
page-node.tpl.php
page.tpl.php

Exemple pour le formulaire de contact (monsite.com/contact)
page-contact.tpl.php
page.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-api
http://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, comme
theme_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 tpl
Exemple: Template page.tpl.php => hook_preprocess_page

template.php
function 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
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

( Documentation : 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


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/theme
Cette presentation sur http://nantes.drupalgardens.com

Outils
Devel : http://drupal.org/project/devel
Devel_themer : http://drupal.org/project/devel_themer

Reflexe
Vider 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)

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Meetup Drupal Nantes: Le Theming (25/05/2011)