Block title
Block content
Ze webmaster
Par Ze webmaster,
Wed 17 October 2018

Créer son thème

Les notions de bases pour Drupal 7

Principe


Drupal 7 est un CMS dont le paradygme est la modularité, des fonctionnalités comme des thèmes. Il peut être utiliser tel quel, dans sa configuration minimale, ou vous pouvez l'adapter à votre besoin.

Par défaut, Drupal s'installe avec un certain nombre de thèmes (Bartik, Garland, Starck et Seven) et un thème d'administration.
Les fichiers correspondant à ces thèmes se trouvent dans le repertoire mon-projet-drupal/themes

Vous trouverez de nombreux thèmes, gratuits ou payants que vous pourrez installer rapidement sur votre site, via l'interface d'administration... ou via drush !
Ils s'installeront dans le repertoire mon-projet-drupal/sites/default/all/themes

Mais si vous souhaitez construire ou personnaliser un thème, rajouter une zone de bloc, un bandeau, le moteur de rendu de drupal vous permet d'ajuster le thème de votre site en lui précisant l'architecture correspondant à votre besoin... Et pour cela, il faut mettre les mains dans le code !

 

Un thème, c'est quoi ?


Avant de rentrer dans les détails de la création d'un thème, prenons le temps d'étudier les thèmes nativement installés avec Drupal.

Par exemple Bartik :

Répertoire Bartik mon-projet-drupal/themes/bartik
Gérer la configuration du thème Dans le menu d'administration drupal :
/admin/appearance/settings/bartik
Gérer la configuration des blocks Dans le menu d'administration drupal :
/admin/structure/block/list/bartik
/admin/structure/block/demo/bartik

 

 

Que trouvons nous d'important dans ce repertoire ?

1 // bartik.info
C'est le fichier fondateur du thème. il définit :

Le thème, son nom, sa localisation, la version de Drupal pour lequel il est adapté ;
Les feuilles de style à embarquer ;
Les différentes régions définies.

2 // template.php
C'est dans ce fichier que sont définis tous les hooks de votre thème, c'est à dire les fonctions qui seront appelées avant le rendu de la page.

bartik_process_html
bartik_process_page
bartik_process_node
bartik_process_block
bartik_process_comment
...

Plus généralement, THEME_preprocess_HOOK()

Pour en savoir plus sur ces fonctions :
https://api.drupal.org/api/drupal/modules%21system%21theme.api.php/function/hook_preprocess_HOOK/7.x

3 // le répertoire template
C'est dans ce dossier que sont rangés tous les fichiers html du thème.
Notez bien que ces fichiers s'emboîtent les uns dans les autres :

html > page > node > comment-wrapper > comment

4 // les fichiers annexes
Les feuilles de styles, les images, la librairie color qui vous permet de personnaliser la couleur du bandeau... Mais tous ces éléments sont propres à Bartik et ne se retrouvent pas nécéssairement dans les autres thèmes.

 

Construire son thème


Construire son thème reste assez simple, à condition de bien respecter les conventions de Drupal.

Répertoire mon-projet-drupal/sites/all/themes

 

Petite astuce avant que vous ne vous lanciez dans ce tuto :
Vous pouvez repartir d'un thème déjà existant (Bartik, par exemple) en récupérant et en adaptant les fichiers qui le constituent.

 

1 // Créer un répertoire pour votre site

mkdir mon-projet-drupal/sites/all/themes/montheme

C'est dans ce répertoire /mon-theme que seront placés tous les fichiers qui contitueront votre thème.

2 // Créer son fichier montheme.info
Ce fichier définira les fichiers css que vous embarquerez, les régions que vous souhaitez définir.

#
# Metadonnées
#
name = Mon thème
description = La description de mon thème
package = Core
version = VERSION
core = 7.x
#
# Feuille de style
#
stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
...
#
# Régions
#
regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted
regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second
regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

3 // Créer votre fichier template.php
 

/**
 * Implements hook_preprocess_html()
 */
function montheme_preprocess_html(&$variables) 
{
   ... votre code ici ...
}
/**
 * Implements hook_preprocess_page()
 */
function montheme_preprocess_page(&$variables) 
{
   ... votre code ici ...
}
/**
 * Implements hook_preprocess_node()
 */
function montheme_preprocess_node(&$variables) 
{
   ... votre code ici ...
}
/**
 * Implements hook_preprocess_block()
 */
function montheme_preprocess_block(&$variables) 
{
   ... votre code ici ...
}
/**
 * Implements hook_preprocess_comment()
 */
function montheme_preprocess_comment(&$variables) 
{
   ... votre code ici ...
}
...

4 // Créer vos templates
Ce seront les différentes vues que vous utiliserez pour rendre votre application.

page.tpl.php
node.tpl.php
...

Et encore plus si vous travaillez en utilisant la suggestion de thèmes.

Pour en savoir plus
https://www.drupal.org/node/1089656

 

Pour finir


Pour commencer très simplement avec jouer avec les thèmes, vous pouvez repartir de thèmes construits sur des librairies tel que Bootstrap ou Materialize, dont la structure est propre et facile à s'approprier.
Pour ma part, j'ai construit ce site en utilisant Materialize. Je le trouve vraiment sympa ! ... Mais ce n'est là que mon opinion !

 

Pour en savoir plus


Comprendre la gestion des thèmes
https://www.drupal.org/docs/7/theming

La suggestion de thème
https://www.drupal.org/node/1089656

Librairie de thèmes Drupal
https://www.drupal.org/project/project_theme

Commentaires


Ajouter un commentaire

edit Ajouter un commentaire