Blog

David Petit, Conception de sites internet

Web design avec Drupal

Posté le 20-07-09 par David Petit

Bonjour ! Ceci est mon premier billet ! Mon but à travers ce blog est de partager des techniques concernant le CMS Drupal, le web design et l'integration web en général.

Drupal est un CMS que j'ai choisi pour la conception de sites internet car il comporte de nombreux avantages et est très polyvalent.

De plus, il existe de nombreux modules pour Drupal permettant de bénéficier de fonctions avancées en gestion de contenu le tout assez simplement. Ceci dit aujourd'hui, je vais me concentrer sur le système de thème de Drupal afin d'expliquer comment on peut intégrer un design et créer son propre thème.

 Avant de commencer, j'aimerais souligner que je m'adresse ici principalement aux débutants sous Drupal qui auraient déjà installé ce CMS en local ou en ligne. Vous savez comment installer un thème mais voulez aller plus loin afin de créer votre propre thème. Vous avez des notions en XHTML, CSS (voire PHP), alors ce tutoriel est pour vous ! 

Premièrement, afin de vous faire une idée, téléchargez deux ou trois thèmes Drupal que vous installerez. Je rappelle qu'il vous suffit de décompresser l'archive du thème et de placer le dossier du thème dans le répertoire "themes" de votre installation Drupal.

Si vous regardez le contenu d'un dossier de thème, vous remarquerez qu'il comporte plusieurs fichiers du types: xxx.info, xxx.tpl.php, xxx.css etc. Il faut déjà savoir que le fichier .info est obligatoire pour que le thème fonctionne et soit reconnu par Drupal !

Maintenant, nous allons construire notre thème et intégrer notre design ! Je considère, pour ce tutoriel, un site de structure très simple avec: un header (Entête), un bloc de contenu et un footer (Pied de page).

Allons-y ! Première étape: il faut créer le fichier ".info" de notre thème. Imaginons que notre thème s'appelle David, alors il faut créer le fichier "david.info" que l'on placera dans le dossier "david" qui se situe à son tour dans le dossier "themes" de Drupal. Le fichier "david.info" devra ressembler à cela:

name = david
description = theme de David
screenshot = screenshot.png
core = 6.x
engine = phptemplate

regions[header] = Entete
regions[content] = Contenu
regions[footer] = Pied de page

stylesheets[all][] = style.css
Comme vous pouvez le constater, nous avons renseigné dans le fichier ".info":
  • Le nom du thème (obligatoire)
  • Une description rapide
  • Une vignette d'aperçu
  • La version de Drupal (obligatoire)
  • Le moteur de template (obligatoire)
  • Les principales régions du site (très pratique pour placer exactement où on veut des blocs de texte, html, des snippets php, un menu etc. en passant directement par la section blocs de l'interface d'administration de Drupal !)

Il existe encore beaucoup d'options que l'on peut ajouter dans le fichier .info (features, scripts etc.) mais je vous donne pour le moment l'essentiel pour débuter !

Maintenant que notre fichier "david.info" est créé, passons au fichier page.tpl.php ! C'est ce fichier qui va permettre d'avoir la strcuture html des pages ! Tout comme david.info, il se trouve aussi dans le dossier du thème.Par rapport à la structure que nous avons défini, notre fichier page.tpl.php devra ressembler à cela:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">

<head>
  <title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>

<body>
<div id="Entete">
  <?php if ($header): ?>
  <?php print $header; ?>
  <?php endif; ?>
</div>

<div id="contenu">
  <?php print $feed_icons; ?>
  <?php if ($mission): ?><div id="mission"><?php print $mission; ?></div><?php endif; ?>
  <?php if ($title): ?><h1 class="title"><?php print $title; ?></h1><?php endif; ?>
  <?php if ($tabs): ?><div class="tabs"><?php print $tabs; ?></div><?php endif; ?>
  <?php print $help; ?>
  <?php print $messages; ?>
  <?php print $content; ?>
</div> <!-- /contenu -->

<div id="Pied">
  <?php if ($footer): ?>
  <?php print $footer; ?>
  <?php endif; ?>
</div> <!-- /footer -->
<?php print $closure; ?>
</body>
</html>

Remarquez-bien ici comment fonctionne le moteur de template avec les appels en php.

On retrouve ainsi nos variables de régions "$header", "$content"," $footer" que nous avions définies précédemment dans le fichier "david.info".

Ces noms qui étaient entre crochets dans la déclaration des régions du fichier "david.info" sont donc des variables php que l'on peut appeler pour les afficher dans notre page !

Php oblige, on doit mettre un "$" devant ce nom défini entre crochet lorsqu'on est dans une ligne de code en php.

Ainsi, par exemple, pour afficher la région "contenu" dans le bloc ' div id="contenu" ', il suffit de taper dans ce div ceci :

<?php print $content; ?>

Sinon, vous avez certainement remarqué qu'il y a d'autres variables comme "$missions", "*help" etc., ce sont d'autres variables Drupal utiles qui afficheront divers messages d'erreurs, des infos lors d'enregistrement de contenu etc. et que je vous conseille donc de toujours mettre.

Il y aussi d'autres variables qui peuvent être utiles comme $slogan si vous avez défini un slogan ou $site_name pour afficher le nom du site !

 A présent, nous avons deux fichiers: "david .info" et" page.tpl.php". Il nous reste une dernière chose pour intégrer un design, le fichier css ! Et alors, c'est vraiment très simple; nous avions défini dans le fichier "david.info" le fichier "style.css", il suffit juste de le créer dans le dossier du thème et le tour est joué !

Arrivé ici, tout est prêt pour rentrer son code css et finir d'intégrer son design dans Drupal !

Avant de se quitter, je vous donne un dernier conseil, créez un dossier images dans le répertoire du thème et dans lequel vous mettrez toutes les images du design !

Ainsi dans le fichier css si vous voulez afficher une image de fond vous aurez quelque chose du style:

background:url(images/xxx.png) no-repeat center bottom;

Comme le fichier css appartient au dossier du thème et que les images sont dans le dossier images dans même répertoire, alors les urls seront toujours en "images/xx.xxx".

 En espérant avoir aidé ceux qui viennent de se lancer dans l'aventure Drupal, je vous souhaite un bon courage !

Catégorie :