Drupal, Theme – Créer un thème Drupal 6 à partir d’une page html
On va tenter de réaliser un thème Drupal à partir d’un fichier statique HTML. Le plus rapidement possible cela va sans dire car il est toujours question de se surpasser dans une économie capitaliste obsédé par la performance et le ROI ! L’intégration de ce thème a vocation juste à montrer qu’il est possible de plonger rapidement dans la code et de ressortir avec les prémices d’un thème Drupal. Bien sûr, cela ne couvre que 60% d’un thème opérationnel sous Drupal 6, il reste beaucoup de fine-tuning pour parfaire ce thème. Pour cet article, le thème a été réalisé sous Drupal 6.15
Using Drupal
Un livre complet sur comment construire différents types de sites Web en utilisant le CMS Drupal, qui est la plate-forme de publication sur le Web très populaire sur le Web. Drupal est sans doute la meilleure solution de gestion de contenu actuelle bien que la courbe d'apprentissage puisse être longue surtout pour les personnes en charge de la gestion du site, disons l'équipe éditoriale. Le livre présente de très nombreuses études de cas : Gestion des commentaires; Gestion d'un Wiki; Gestion des flux d'édition; Gestion d'une galerie de photos; Manager des Sites multilingues ou enfin la gestion de type de contenu comme des événements... Bref, un tour d'horizon tout à complet.
Genre(s) : Agile, API, Applications, CMS, Database MySQL, Development, Développement, Drupal, Mobile, Module, Multilingual, Open Source, PHP, PHP Applications, SEO, SMO, Theming, Web, Web Apps, Webdesign, WebsiteAuteur(s) : Addison Berry, Angela Byron, Jeff Robbins, Nate Haug
Edition(s) : O'Reilly Media
Les valeurs du fichier principale page.tpl.php
La première chose est bien connaitre les valeurs qui peuvent être utilisées dans le fichier page.tpl.php qui est disons le noeud, pour reprendre la terminologie “Drupalienne”, de l’affichage d’un thème.
Ces valeurs sont appelés par Drupal au sein de notre fichier page.tpl.php, vous n’aurez donc qu’à remplacer les éléments statiques en HTML par d’autres valeurs dynamiques reconnus et utilisés par Drupal 6.
On va retrouver ici, quelques-unes des pratiques qui étaient déjà en action sur un précèdent article.
Un extrait des valeurs possibles de page.tpl.php
$base_path
Returns the base URL path of the Drupal installation. At the very least, this will always default to /.
$breadcrumb
HTML for displaying the breadcrumbs at the top of the page.
$closure
Needs to be displayed at the bottom of the page, for any dynamic javascript that needs to be called once the page has already been displayed.
$content
The HTML content generated by Drupal to be displayed.
$css
An array of all the CSS files for the current page.
$directory
The directory the theme is located in, e.g.
themes/garland or themes/garland/minelli.
$feed_icons
A string of all feed icons for the current page.
$footer_message
The footer message as defined in the admin settings, also the HTML for the footer region.
$head
HTML as generated by drupal_get_html_head().…. to be continued
Source : http://drupal.org/node/11812
Ce fichier sera notre fichier principal pour ce thème qui ne comporte à ce jour qu’un seul fichier. Pour trouvre des modeles HTML, il suffit de se baisser. En effet, le Web regarde de ressources qui distribuent des templates HTML. Pour notre part, nous sommes allés chercher un thème nommé singapore sur freelayouts.com/
Le thème singapore en HTML ou dans les petites rues de singapore
Source : http://www.freelayouts.com/websites/html-templates?order=rating+desc.
Etape 1 – Convertir notre fichier html en page.tpl.php
C’est disons la chose la plus simple à faire, renommer un fichier est donc la première chose à faire. Vous allez donc renommer index.html en page.tpl.php
Etape 2 – Utiliser des normes dans les noms de vos répertoires et de vos fichiers au sein de votre futur thème
Le répertoire d’images
Dans notre exemple, le répertoire d’image se nomme grafics, changez-le pour images ou img. Le nom de ce répertoire n’a pas d’impact sur le fonctionnement de Drupal mais c’est une bonne pratique de nomenclature pour chacun vos thèmes. On gagne toujours du temps et on se rapproche de l’adage, Convention over Configuration
La feuille de style (CSS)
La feuille de style est toujours nommé style.css, comme dans WordPress d’ailleurs.
Etape 3 – Placer votre nouveau thème dans le répertoire Drupal qui convient
Le répertoire qui dans notre exemple se nomme singapore devra se placer dans le répertoire adéquat de Drupal. Ce répertoire se nomme themes, si c’est la première fois que vous utilisez un thème vous allez devoir le créer à cette endroit /Applications/MAMP/htdocs/[le_repertoire_dans_lequel_drupal_6_est_installe]/sites/all/..
C’est dans ce répertoire que l’on stocke les thèmes personnalisés pour Drupal
Le README.txt
// $Id: README.txt,v 1.3 2006/12/23 15:35:51 dries Exp $
This directory should be used to place downloaded and custom modules
and themes which are common to all sites. This will allow you to
more easily update Drupal core files. These modules and themes should
be placed in subdirectories called modules and themes as follows:sites/all/modules
sites/all/themes
Etape 4 – Créer un fichier .info pour votre thème
C’est une nécessité pour faire fonctionner un thème sous Drupal 6.
A titre d’exemple, la source du fichier garland.info
; $Id: garland.info,v 1.5 2007/07/01 23:27:32 goba Exp $ name = Garland description = Tableless, recolorable, multi-column, fluid width theme (default). version = VERSION core = 6.x engine = phptemplate stylesheets[all][] = style.css stylesheets[print][] = print.css ; Information added by drupal.org packaging script on 2009-05-13 version = "6.12" project = "drupal" datestamp = "1242243950" |
; $Id: singapore.info,v 1.0 2010/02/14 16:14:05 $ name = singapore screenshot = screenshot.png description = Quick and dirty conversion of an HTML page. version = VERSION core = 6.x engine = phptemplate regions[left] = Left sidebar regions[right] = Right sidebar regions[content] = Content regions[header] = Header regions[footer] = Footer stylesheets[all][] = style.css stylesheets[print][] = print.css ; Information added by hecube.net for an article about quick creation for theme in drupal 6, made the 2010-02-14 version = "6.15" project = "drupal" datestamp = "1266160263" |
Pour information, la valeur datestamp est le nombre de secondes qui sépare la date de création du fichier et le 1 Janvier 1970. Vous obtiendrez en php, la valeur en faisant un print de la valeur time();
$datestamp = time (); print('$datestamp => '.$datestamp.''); |
Injecter quelques valeurs de Drupal dans votre tout nouveau template
On place ici en vrac quelques valeurs qui vont être appelées au sein de votre thème pour :
- parfaire un peu son caractère dynamique
- quitter définitivement le coté statique de notre thème HTML
Un conseil, conserver Garland comme thème pour votre administration, car vous risquez avec l’activation d’un thème aussi sommaire de ne pouvoir accéder ensuite à votre administration http://[le_chemin_vers_l_admin-de_votre drupal]/?q=admin. Sous MAMP et dans notre exemple, l’admininbstration est accessible à cette adresse http://127.0.0.1/DRUPAL_6/site/?q=admin.
Activation du thème singapore
On maintient Garland en même temps que le thème singapore
On maintient Garland, il est possible aussi de conserver ce thème lorsque on édite les articles en cliquant sur le checkbox Use administration theme for content editing.
Le thème singapore sous Drupal 6.x
Un rappel de quelques valeurs essentiels à passer dans la fichier de votre thème Drupal 6.x
<?php print(''.$tabs.''); print(''.$title.''); print(''.$content.''); print(''.$right.''); print(''.$footer.''); print(''.$footer_message.''); ?> |
Notre fichier page.tpl.php aux couleurs de singapore
<?php // $Id: page.tpl.php,v 1.18.2.1 2009/04/30 00:13:31 goba Exp $ ?><!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="overall"> <!-- start head grafic --> <div id="head"> <!-- start top navigation --> <div id="topnav"> <?php if (isset($primary_links)) : ?> <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?> <?php endif; ?> </div> </div> <!-- start any-links & mid grafic--> <div id="anyline"> <div id="anybgr"></div> <div id="anylink"> <?php /* PAS UTILE POUR LE MOMENT */ ?> <!-- <a href="#" target="_top" onfocus="this.blur()">anylink</a> <a href="#" target="_top" onfocus="this.blur()">anylink</a> <a href="#" target="_top" onfocus="this.blur()">anylink</a> <a href="#" target="_top" onfocus="this.blur()">anylink</a> <a href="#" target="_top" onfocus="this.blur()">anylink</a> <a href="#" target="_top" onfocus="this.blur()">anylink</a> --> </div> </div> <!-- bottom grafic & homepage title --> <div id="tgbtm"></div> <!-- insert homepage title here --> <div id="title-shadow"><?php print $site_slogan ?></div> <div id="title"><?php /* POUR FAIRE UN LIEN SUR LA VALEUR $site_slogan EVENTUELLEMENT */ // print ('<a href="'. check_url($front_page) .'" title="'. $site_slogan .'">'.$site_slogan.'</a>'); print (''.$site_slogan.''); ?></div> <!-- start sidebar --> <div id="sidebar"> <?php print $mission ?> <?php if ($search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?> <?php print $left ?> </div> <div id="content"> <?php print(''.$content.''); ?> </div> </div> <!-- footer lines --> <div id="overall-footer"> <div id="footer"> <b><?php print $footer_message?></b> <br><br> <?php print $footer?> <br><br> <?php print $feed_icons ?> </div> </div> <?php print $closure ?> </body> </html> |
Conclusion : Sans être un développeur aguerri mais avec de bonnes notions d’HTML, de CSS, une compréhension basique du PHP et bien évidemment un solide sens pratique, on peut parvenir à un début de thème sous Drupal 6.x. Paradoxalement, cette relative simplicité dans la création de thème contraste avec la complexité de la gestion éditoriale. En effet, d’un point strictement éditorial, le temps d’apprentissage et de maitrise du workflow dans la publication de Page et de Story va bien plus fastidieux que sous WordPress par exemple. A ce titre, à lire, un excellent et amusant retour d’expérience sur Drupal vs WordPress dans l’article ci-dessous notamment la partie Why I Would Stay Away from Drupal.
Une partie intéressante de cette article
[…] At this point, I realized that Drupal users consisted mainly of web developers and programmers who saw the beauty of Drupal from it’s code rather than it’s interface. It was much easier for them to extend the Drupal functions because the “CODE” was clean.
But for someone who doesn’t know how to code, I found it difficult to work with. Don’t get me wrong. Drupal is a fantastic CMS. And if you find it meets your needs out of the box, then by all means use it. But if like me and many other online publishers, you need to tweak it a bit here and there, then you’re better off with something like Joomla unless you have an in house programmer that can do all the tweaking for you. […]
Source : http://www.webbriefcase.net/2009-04/choosing-a-cms-to-run-your-membership-site/
En savoir plus
- La page d’information du fichier
Page.tpl.phpissue de la documentation “PHPTemplate theme engine”
http://drupal.org/node/11812 - A lire pour le retour d’expérience Drupal vs Wordpres /Choosing a CMS to Run Your Membership Site
http://www.webbriefcase.net/2009-04/choosing-a-cms-to-run-your-membership-site/
