Training Drupal 7 theming avanzato @ Drupal Day 2014

2. Introduzione allo sviluppo in Drupal 7
Theming
Andrea Panisson
@andypanix

3. Chi sono
Lavoro in
come frontend developer
e Drupal themer

6. Voi?
Sviluppatori?
Themers?
Altro?

7. Come funziona un
tema in Drupal 7?

8. A simplified wiring guide to the Theme Layer
http://john.albin.net/drupal/arrays-of-doom

9. www.drupal.org/theming

10. Il theme layer
di Drupal è
formato da
una serie di
overrides
Evaluating Base Themes
Emma Jane Hogbin bit.ly/dday14-tb1

11. Drupal’s theme layer

12. Il theme layer di Drupal
THEME HOOKs
Un “theme hook” è semplicemente il nome
di uno specifico modo per generare il
markup di un insieme di dati grezzi

13. THEME HOOKs
theme_item_list
theme_link
theme_image
theme_menu_link
bit.ly/dday14-tb3

14. THEME HOOKs
Per definire un novo theme hook,
ovvero creare una nuova funzione
di theming, è sufficiente usare la funzione
hook_theme()
bit.ly/dday14-tb4

15. Il theme layer di Drupal
2 sono i modi
di implementare un
theme hook

16. Il theme layer di Drupal
Theme functions: passare i dati ad una
funzione PHP e restiture del markup
Templates: passare i dati ad un file di
template, un file PHP composto da un mix
di markup e PHP

17. THEME HOOKs
Possiamo ridefinire come
“theme hooks” tutte quelle
funzioni o file di template che
sono state/i specificatamente
registrate/i tramite un
hook_theme()

18. THEME HOOKs (function)
<?php
/**
* Implements hook_theme().
*/
function mymodule_theme() {
return array(
'my_theme_hook' => array(
'variables' => array('parameter' => NULL),
'function' => 'theme_my_theme_hook',
),
);
}

19. THEME HOOKs (function)
<?php
function theme_my_theme_hook($variables) {
return '<div>USELESS!!</div>';
}

20. THEME HOOKs (template)
<?php
/**
* Implements hook_theme().
*/
function mymodule_theme() {
return array(
'my_theme_hook' => array(
'variables' => array('parameter' => NULL),
'template' => 'my-template-file',
),
);
}

21. THEME HOOKs (template)
my-template-file.tpl.php
<div>I’M USELESS<div>

22. THEME HOOKs
Come utilizzare una funzione di theming:
theme("my_theme_hook", $vars)
theme(“item_list”, $vars)
theme_my_theme_hook($vars)
theme_item_list($vars)

23. THEME HOOKs
Chiamare la funzione di theming usando
theme("my_theme_hook", $vars)
Permette successivamente di fare l’override di quella
funzione nel tema, ad esempio nel file template.php o
nella cartella del tema (se trattasi di template)

24. THEME HOOK
function mythemename_my_theme_hook($variables) {
return '<div>LESS USELESS??</div>';
}
Override di una funzione di theming
ad esempio nel tema (template.php):

25. Il theme layer di Drupal
Drupal 7 Module Development - bit.ly/dday14-tb5

26. La «magia»
della funzione
theme()
Drupal 7 Module Development - bit.ly/dday14-tb5

27. A simplified wiring guide to the Theme Layer
http://john.albin.net/drupal/arrays-of-doom

28. The Drupal Theme System

29. THEME ENGINE
E’ un insieme di script e file che
interagiscono con il core del CMS ed
interpretano il linguaggio di
programmazione utilizzato nel tema

30. THEME ENGINE
A cosa serve un theme engine?
E’ un modo comodo per stampare l’output
temizzabile in vari file di template
piuttosto che utilizzare del semplice PHP

31. THEME ENGINE
Aiuta a separare
la funzionalità
dalla presentazione
Business logic - Presentation logic
(separazione dei contesti)

32. THEME ENGINE
Drupal 7 => PHPtemplate
Drupal 8 => Twig

33. TEMPLATE ENGINE
PHPTemplate
HTML + PHP
PHP for Themers su Drupalize.me
https://drupalize.me/videos/php-themers?p=1146

34. Il theme system di Drupal

35. Il theme system di Drupal
Un tema è un insieme
strutturato di codice (al pari di
un modulo) che fornisce degli
strumenti atti a trasformare dei
dati grezzi in un output
strutturato e formattato.

36. Il tema in PHPtemplate
themename.info
page.tpl.php
*.tpl.php
template.php (business logic)
*.js
*.css

37. .info file
Theme Metadata
• Il nome del tema
• La descrizione
• La versione e le informazioni sulla compatibilità
• Il template engine richiesto
• I file CSS globali
• I file JS globali
• Le regioni incluse
• Le impostazioni di default del tema
• etc…

38. .info file
Theme Metadata
• Nome macchina del tema deve essere unico,
non lo stesso di qualche modulo
• Preferibilmente solo lettere, quindi non
mio_tema ma miotema (best practice)

39. .info file
Theme Metadata
Regioni obbligatorie:
regions[page_top] = Page Top
regions[content] = Content
regions[page_bottom] = Page Bottom
Page Top e Page bottom sono regioni nascoste
regions_hidden[] = region_name

40. .info file
Theme Metadata
Writing theme .info files
www.drupal.org/node/171205

41. Template files *.tpl.php
HTML e PHP

42. Template files *.tpl.php
<?php if(_CONDITION_): ?>
<p>Stampa questo!</p>
<?php endif; ?>
<?php print $stringa; ?>
<?php print t($stringa_trad) ?>
<?php hide($dopo); ?>
<?php render($content); ?>
<?php render($dopo); ?>

43. Il tema in PHPtemplate
themename.info
page.tpl.php
*.tpl.php
template.php (business logic)
*.js
*.css

44. Template files *.tpl.php
html.tpl.php -> modules/system
page.tpl.php -> modules/system
region.tpl.php -> modules/system
block.tpl.php -> modules/block
node.tpl.php -> modules/node
comment.tpl.php -> modules/comment
field.tpl.php-> modules/field/theme
RENDERING ORDER

45. http://bit.ly/dday14-tb2
Rendering
degli
elementi
della
pagina

46. Template files *.tpl.php
field.tpl.php viene utilizzato solo se
sovrascritto nel tema, in caso
contrario è utilizzata la relativa
funzione di theming

47. www.drupal.org/node/171194
Riassumendo

48. Il tema in PHPtemplate
EXAMPLES

49. La «magia»
della funzione
theme()
Drupal 7 Module Development - bit.ly/dday14-tb5

51. Template files *.tpl.php
Solo print, render e if condition
statements, nessuna logica
<?php if(_CONDITION_): ?>
<p>Stampa questo!</p>
<?php endif; ?>
<?php print $stringa; ?>
<?php print t($stringa_trad) ?>
<?php hide($dopo); ?>
<?php render($content); ?>
<?php render($dopo); ?>

52. Le funzioni di
preprocess e process
Devono essere usate per tutte
le operazioni di business logic
necessarie a livello di
presentation logic
del nostro progetto Drupal

53. Le funzioni di
preprocess e process
Consentono ad un modulo /
tema di alterare o aggiungere
variabili utilizzate da un altro
modulo quando quest’ultimo
chiama un theme hook

54. Le funzioni di
preprocess e process
Ogni theme hook registrato tramite la
funzione hook_theme() ha le sue
funzioni di preprocess e process.
Ogni file di template ha le sue
funzione di preprocess / process

55. Le funzioni di
preprocess e process
Tutte le funzioni di preprocess e process
hanno la seguente forma:
[module]_preprocess_[theme hook name](&$variables)

56. Le funzioni di
preprocess e process
function mymodule_preprocess_item_list(&$variables) {
// Add a class to the list wrapper.
$variables['attributes']['class'][] = 'dday14';
}

57. Preprocess functions
1. template_preprocess()
2. template_preprocesss_HOOK()
3. MODULE_preprocess()
4. MODULE_preprocess_HOOK()
5. THEME_preprocess()
6. THEME_preprocess_HOOK()

58. Process functions
7. template_process()
8. template_processs_HOOK()
9. MODULE_process()
10. MODULE_process_HOOK()
11. THEME_process()
12. THEME_process_HOOK()

59. Tempalte files *.tpl.php
PREPROCESS
EXAMPLES

60. La «magia»
della funzione
theme()
Drupal 7 Module Development - bit.ly/dday14-tb5

62. Theme Hook Suggestions
Le theme hook suggestions
permettono di effettuare un
override selettivo sia
dei file di template che delle
funzioni di theming

63. Theme Hook Suggestions: BLOCK
block--[region|[module|--delta]].tpl.php
base template: block.tpl.php
block--module--delta.tpl.php
block--module.tpl.php
block--region.tpl.php

64. Theme Hook Suggestions
• www.drupal.org/node/1089656
• bit.ly/dday14-tb6 (The Definitive Guide to Drupal 7
• Theme Hooks and Theme Hook Suggestions)
$vars['theme_hook_suggestions']
($mothership_poorthemers_helper)

65. Theme Hook Suggestions
SUGGESTIONS
EXAMPLES

66. Theming views
EXAMPLES

67. Un po’ di codice
Sporchiamoci le mani:
• theme-settings.php
• drush for themers

68. L’angolo dei moduli
• Devel (debugging with dsm())
• Devel Themer
• Fences
• Semantic Fields
• Display suite

69. Domande?