Convertir n'importe quel gabarit ou design de site en thème Drupal - facilement !

Date du document en anglais : 29 Mars 2010 - 12h08 - http://drupal.org/node/313510  



La création de thèmes Drupal n'est pas aussi compliquée que vous pourriez le penser. Il y a certes des domaines plus pointus que d'autres, qui seront peut-être nécessaires, selon les besoins de votre site, ou des défauts mineurs que vous voudrez corriger (sur lesquels vous vous pencherez le moment venu). Créer le thème global de votre site est très simple.

Un thème Drupal n'est rien d'autre qu'une mise en page de site web standard, avec un peu de code PHP ajouté par-ci par-là, que vous pouvez d'ailleurs copier-coller dans les endroits où vous appellerez le contenu et les fonctions dynamiques de Drupal.

Si vous apprenez mieux par l'image, une vidéo portant sur les informations développées ici est disponible là : Static Theme Conversion.

Les thèmes « contributifs » sont plus complexes que votre thème n'a besoin de l'être

Vous avez peut-être examiné plusieurs thèmes pré-fabriqués livrés avec le core Drupal, ou disponibles en téléchargement, et vous avez poussé un soupir de frustration devant l'aspect obscur de leurs code-source.

Ces thèmes-là ont été créés pour répondre à tous les scénarios de travail possibles, pour vous permettre d'agir dynamiquement sur la mise en page du thème, tel l'ajout de colonnes, et acceptent la personnalisation de fonctions ou de modules dont vous n'aurez peut-être pas besoin pour votre site. Ils disposent généralement d'une grande quantité de code PHP dont le but est simplement de dire « si ce paramètre est à vrai, alors montre cette partie de cette façon-ci, sinon montre ça ». Le thème est ainsi très souple, mais aussi très complexe.

Quoi qu'il en soit, votre thème n'a pas besoin de fonctionner avec tous les sites de la galaxie Drupal. Il a juste besoin de faire ce dont votre site a besoin, et rien de plus. Tout ce qu'il vous faut ce sont des petits bouts de code PHP, que vous copierez dans votre gabarit HTML, qui diront à Drupal de charger le contenu dynamique à ces endroits.

Vous pourrez également trouver utile de jeter un œil aux gabarits du core Drupal plus élémentaires (ceux utilisés lorsqu'un thème ne fournit pas de gabarits alternatifs pouvant être surchargés). Pour examiner ces gabarits élémentaires, regardez dans le dossier /modules/system de votre installation Drupal (et notamment les gabarits page.tpl.php et node.tpl.php).

Il ne faut que quelques éléments de base pour fabriquer un thème Drupal

Le gabarit principal de Drupal est appelé page.tpl.php. Faites une copie du gabarit de votre site et appelez-la page.tpl.php. Ensuite, copiez le code suivant dans votre mise en page, aux endroits signalés (tout le code mentionné dans cette leçon sera placé dans le fichier page.tpl.php).

La section Head de votre site

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

La barre latérale ou les colonnes de votre mise en page

Beaucoup de sites ont une barre latérale, à gauche ou à droite de la page, placée à côté de la zone de contenu principale. Ces barres latérales affichent différentes fonctions ou informations (par exemple, la form de connexion, les menus de navigation, les commentaires récents, etc).

Dans Drupal, ces zones sont appelées blocs et vous pouvez les personnaliser en allant dans le menu Administrer » Constructions du site » Blocs. Pour que Drupal sache où afficher ces blocs, vous devez ajouter des placeholders dans votre thème (Drupal appelle ces placeholders des régions). Il y a plus d'un placeholders disponible ( et vous pouvez aussi créer les vôtres) mais il est important d'ajouter en premier lieu la barre latérale, puisque le menu d'administration y est affiché. Ajoutez les régions suivantes à votre barre latérale :

Si vous utilisez Drupal 5 :

<?php print $sidebar_left?>

...et/ou...

<?php print $sidebar_right?>

Si vous utilisez Drupal 6 :

<?php print $left?>

...et/ou...

<?php print $right?>

Menu système / Navigation

Dans Drupal, le menu de navigation par défaut de votre site s'appelle Primary Links. Il y a également un menu Secondary Links qui peut amener aux sous-pages tributaires du menu Primary. Lorsqu'il est dépouillé de toutes ses images et de ses styles, un menu Drupal n'est rien de plus qu'une imbrication de listes non ordonnées, en HTML brut, avec un lien pour chaque élément de la liste. Vous pouvez utiliser les CSS pour personnaliser un menu à votre façon; modifier son apparence, sa disposition, horizontale, comme des onglets, ou verticale, etc.

Pour afficher dans votre site les liens de menu Primary,ou Secondary, collez le code suivant soit dans la partie supérieure de votre thème (par exemple, si votre menu est stylisé en tant qu'onglets ou boutons), soit dans la barre latérale (dans le cas où vous souhaitez y afficher votre menu verticalement).

Au plus simple :

Voici la façon la plus simple de procéder, si vous êtes certains de vouloir utiliser les liens Primary et Secondary (ou avoir la possibilité d'effacer la partie Secondary Links si vous n'en avez plus besoin).

<div id="primary">
<?php print theme('links', $primary_links); ?>
</div> <!-- /#primary -->

<div id="secondary">
<?php print theme('links', $secondary_links); ?>
</div> <!-- /#secondary -->

Une façon plus souple :

Si vous hésitez à afficher les deux types de liens, Primary et Secondary, vous pouvez utiliser le code suivant à la place (c'est le même, mais il vérifie si les menus sont activés, et ne les affiche que s'ils le sont) :

<?php if ($primary_links): ?>
<div id="primary">
    <?php print theme('links', $primary_links); ?>
</div> <!-- /#primary -->
<?php endif; ?>

<?php if ($secondary_links): ?>
<div id="secondary">
    <?php print theme('links', $secondary_links); ?>
</div> <!-- /#secondary -->
<?php endif; ?>

Le contenu principal et dynamique de la page

A ce stade, vous avez ajouté tout le cadre (framework) de mise en page de tout votre site. Il est temps maintenant d'inclure la zone du gabarit où le contenu courant sera affiché (un contenu différent selon la page vue).

Localisez simplement l'endroit de votre gabarit où le contenu principal doit être affiché (habituellement, il s'agit du centre de la page, après l'en-tête et entre les barres latérales) et copiez-y le code suivant (vous pouvez réorganiser ce code si vous le souhaitez, sinon recopiez-le tel quel) :

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

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

<div id="content">
<?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 if ($messages): print $messages; endif; ?>
<?php if ($help): print $help; endif; ?>
<?php print $content; ?>
</div>

Pied de page : ajouter un pied de page et un texte en pied de page

Pour ajouter une région Pied de page et le texte paramétré dans la partie administration, vous pouvez mettre le code suivant :

<?php if ($footer_message || $footer) : ?>
<div id="footer-message">
    <?php print $footer_message . $footer;?>
</div>
<?php endif; ?>

Ajouter la balise Final au bas de votre thème

Collez le code suivant à la fin de votre gabarit page.tpl.php. Vous devez placer cette balise en bas de page, elle inclura dynamiquement tout script devant apparaître en bas de page et elle fermera toute balise qui aurait été laissée ouverte :

<?php print $closure; ?>
</body>
</html>

Pour Drupal 6 : créer votre fichier NomDeMonTheme.info

En dernier lieu, dans Drupal 6, vous devrez créer un fichier NomDeMonTheme.info (où NomDeMonTheme est le nom de votre thème, sans espaces).

Créez simplement un fichier texte vierge et collez-y le code suivant, personnalisez-le ensuite avec le nom et la descriptions appropriés, et sauvegardez-le dans le même dossier que celui contenant vos fichiers gabarits :

name = YourThemeName
description = Description of YourTheme
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer

Si du texte ci-dessus apparaît colorisé, n'en tenez pas compte, c'est une fantaisie du module de coloration syntaxique

La section « regions » après style.css déclare toutes les régions normalisées de Drupal, c'est recommandé pour que vous puissiez ôter les régions dont vous ne voulez pas, ou pour ajouter les vôtres.

Si vous ajoutez des régions personnalisées, vous devez inclure à la main les régions par défaut à conserver sinon elles disparaîtront de votre thème (copiez-collez-les depuis cette page ou depuis un autre thème).

Si vous voulez ajouter une région personnalisée, copiez l'une des lignes regions[] ci-dessus et renommez-là.

C'est tout. Collez les code-source précédents dans n'importe quel gabarit ou mise en page de site et vous obtiendrez une thème Drupal élémentaire et fonctionnel.

En apprendre davantage sur les thèmes Drupal

Il y a bien des choses utilisables dans votre thème si vous le souhaitez. Voici quelques excellentes sources d'apprentissage pour approfondir les thèmes Drupal :

Framework / Base / Thèmes de départ

Il existe différents thèmes Frameworks (également appelés Base ou Starter thèmes). Leur but est de servir de thème vierge sur lequel vous construirez le vôtre. Beaucoup de ces thèmes sont débarrassés de tous les styles superflus et ne comprennent que les fichiers gabarits tpl.php de base, sans fioritures.

Beaucoup incorporent également des paramétrages utiles dans leurs fichiers gabarits tpl.php, pour les corrections et ajustements les plus courantes. Vous les aurez ainsi à disposition avant même de réaliser que vous pourriez en avoir besoin.

Quelques-uns ajoutent des fonctionnalités supplémentaires qui n'existent pas par défaut dans Drupal.

Vous pouvez utiliser ces thèmes comme une base de départ propre et fonctionnelle pour la création de vos propres thèmes, ou, si vous préférez, vous pouvez les étudier pour voir comment incorporer les fonctionnalités de Drupal dans un thème que vous créerez de toutes pièces.

Puisque ces thèmes sont propres et très légers côté styles, il est aisé de travailler avec, comparativement à des thèmes nettement plus personnalisés.

Voici une liste de quelques thèmes frameworks (il peut y en avoir d'autres) :