Integration De Theme
Comment créer son propre thème ?
Nous allons nous rendre dans la partie sites/all/themes/ et créer un nouveau dossier nommé "monthemeperso" (nom informatique = pas d'espace, pas d'accent).

Une fois ce dossier créé, nous allons nous retrouver à l'intérieur pour créer un premier fichier monthemeperso.info :

Le fichier .info, qu'est-ce que c'est ?
Comme son nom l'indique ce fichier va regrouper plusieurs informations sur votre thème, pas d'inquiètude, il s'agit ni plus ni moins d'un fichier rempli avec du texte !
Voici ce que nous allons écrire pour une première version :
name = Mon Theme Perso
description = Voici notre theme
core = 7.x
Nous renseignons le nom du thème, sa description, et la version de Drupal avec laquelle il est compatible (7.x indique drupal version 7 et toutes versions confondues, c'est à dire que cela peut être 7.1, 7.2, etc.).

Magnifique ! Nous trouvons la trace de notre thème.
Toutefois s'il n'apparait pas, pensez à vérifier si votre fichier est monthemeperso.info est bien enregistré et à vous rendre dans la partie configuration > performances pour vider tous les caches et ainsi actualiser Drupal
Et oui, avec un simple petit fichier .info et 3 lignes nous pouvons créer un thème ! mais nous n'allons pas l'activer tout de suite, il faut d'abord continuer à le préparer.
Nous allons créer un fichier screenshoot.png, ce fichier esst censé représenter un aperçu de notre thème mais comme nous ne l'avons pas commencé, il va être difficile de faire une capture d'écran de ce à quoi il ressemble. Nous allons donc nous contenter d'un morceau de texte pour le moment :

Pour avancer davantage, nous allons préparer quelques dossiers et fichiers dans notre thème :
- page.tpl.php : ce fichier servira à l'affichage de notre structure de site en général (layout).
- node.tpl.php : ce fichier servira à l'affichage des contenus de notre site (vues) à l'intérieur des pages (layout).
- template.php : ce fichier permettra d'écrire des fonctions pour notre thème.
- /css/ : ce dossier contiendra nos fichiers css.
- /js/ : ce dossier contiendra nos fichiers js.
- /img/ : ce dossier contiendra nos fichiers images.
- /css/style.css : ce fichier contiendra notre style et mise en forme.
Voici à présent le contenu de notre dossier :
Qu'elle est la différence entre page.tpl.php et node.tpl.php ?
Dans Drupal, La différence entre une page et un node est la suivante :

Le fichier page.tpl.php permet de présenter le site en général, tandis que le fichier node.tpl.php permet de présenter le contenu.
Ces deux fichiers seront donc appelés par défaut pour chaque affichage demandé !
La création d'un site commence toujours par son zoning.
Nous allons donc partir sur la création d'un site standard qui ressemblera à ça :

Les régions représentent les espaces disponibles pour les blocs. Ce qui fait la richesse d'un thème c'est souvent le nombre d'emplacements de région ainsi que la personnalisation.
Nous prévoyons 10 régions.
Nous ferons en sorte que ces régions ne s'affichent pas s'il n'y a pas de blocs à l'intérieur, exemple pour avoir le contenu sur toute la largeur :

Ou encore, pour remonter le contenu par rapport à la ligne de flotaison :
AttentionNous créerons la région nommée content car c'est une région par défaut dans Drupal.
Nous aurions pu forcer Drupal à l'appeler "contenu" ou "milieu" mais cela peut créer des dysfonctionnements au moment de l'activation du thème.
Si vous tenez quand même à créer une région qui s'appelle autrement que "content", il faudra d'abord penser à activer le thème et ensuite déclarer les régions dans le fichier monthemeperso.info, vider le cache (dans les performances), et ré-attribuer le bloc "contenu de la page principale" à votre région.
Comment créer des régions ?
Pour créer des régions dans Drupal, il faut d'abord les déclarer dans le fichier monthemeperso.info :
monthemeperso.info
name = Mon Theme Perso
description = Voici notre theme
core = 7.x
regions[haut-gauche] = R1 - Zone du haut a gauche
regions[haut-milieu] = R2 - Zone du haut au milieu
regions[haut-droite] = R3 - Zone du haut a droite
regions[menu] = R4 - Zone de menu
regions[milieu-haut] = R5 - Zone du milieu en haut
regions[content] = R6 - Zone de contenu (milieu gauche)
regions[milieu-droite] = R7 - Zone du milieu a droite
regions[bas-gauche] = R8 - Zone du bas a gauche
regions[bas-milieu] = R9 - Zone du bas au milieu
regions[bas-droite] = R10 - Zone du bas a droite
Nous allons également en profiter pour faire le lien avec notre feuille de style css :
name = Mon Theme Perso
description = Voici notre theme
core = 7.x
stylesheets[all][] = css/style.css
; scripts[] = js/monscript.js
regions[haut-gauche] = R1 - Zone du haut a gauche
regions[haut-milieu] = R2 - Zone du haut au milieu
regions[haut-droite] = R3 - Zone du haut a droite
regions[menu] = R4 - Zone de menu
regions[milieu-haut] = R5 - Zone du milieu en haut
regions[content] = R6 - Zone de contenu (milieu gauche)
regions[milieu-droite] = R7 - Zone du milieu a droite
regions[bas-gauche] = R8 - Zone du bas a gauche
regions[bas-milieu] = R9 - Zone du bas au milieu
regions[bas-droite] = R10 - Zone du bas a droite
; une ligne de commentaire peut se faire avec le symbole point virgule dans les fichiers .info.
Nous remplissons des variables ARRAY pour la partie style css et javascript js.
C'est le moment d'activer notre thème, retourner dans la partie : barre noire > apparence > monthemeperso > activer et définir par défaut.

Nous allons à présent remplir le fichier page.tpl.php.
Dans ce fichier, certaines variables sont disponibles, pour le voir nous pouvons utiliser :
<?php print '<pre>'; print_r(array_keys(get_defined_vars())); print '</pre>'; ?>
Certaines de ses variables vont nous intéresser, par exemple :
- template_file => permet de connaitre le chemin vers notre fichier
- page => contient plein d'informations utiles et importantes sur la page (sous forme d'array)
- directory => contient le chemin vers notre dossier
- user => contient plusieurs informations sur l'utilisateur connecté (sous forme d'objet, stdClass)
- is_admin => permet de savoir si l'internaute est admin
- logged_in => permet de savoir si l'internaute est connecté
- is_front => permet de savoir si nous sommes actuellement sur le FRONT
- base_path => permet de connaitre le nom du dossier de votre installation
- front_page => permet de savoir si nous sommes sur la page d'accueil
- language => permet de connaitre la langue dans laquelle est affichée le site web (sous forme d'objet)
- logo => permet d'afficher le chemin vers le logo du site qui doit se nommer logo.png (par défaut)
- site_name => permet d'afficher le nom du site
- site_slogan => permet d'afficher le slogan du site
- tabs => permet d'afficher les onglets "Voir - Modifier" directement par dessus le contenu lorsqu'on est admin
- breadcrumb => permet d'afficher le fil d'Ariane
- title => permet d'afficher le titre de la page
- messages => cette variable permet à drupal de communiquer avec l'internaute, par exemple si l'internaute oublie de remplir un champ obligatoire sur un formulaire, cela affichera "veuillez remplir tous les champs".
Nous allons donc construire notre site en utilisant certaines de ses variables et en prévoyant les emplacements nécessaires (zones) pour que les régions puissent prendre place dans notre structure.
Code du fichier page.tpl.php
page.tpl.php
<header>
<div class="conteneur">
<div id="haut-gauche">
Haut Gauche
</div>
<div id="haut-milieu">
Haut Milieu
</div>
<div id="haut-droite">
Haut Droite
</div>
<div class="clear"></div>
</div>
</header>
<nav>
<div class="conteneur">
<div id="menu">
Menu
</div>
</div>
</nav>
<section>
<div class="conteneur">
<div id="milieu-haut">Milieu Haut</div>
<div id="content">Contenu</div>
<div id="milieu-droite">Milieu Droite</div>
<div class="clear"></div>
</div>
</section>
<footer>
<div class="conteneur">
<div id="bas-gauche">
Bas Gauche
</div>
<div id="bas-milieu">
Bas Milieu
</div>
<div id="bas-droite">
Bas Droite
</div>
<div class="clear"></div>
</div>
</footer>
Ensuite, nous allons remplir le fichier style.css en conséquence :
style.css
body{ background: #eeeeee; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a{ color: #f43c80; text-decoration: none; }
a:hover{ color: #10a4e9; }
header, footer{}
nav{
background: #656565;
height: 4vh;
}
section{}
.conteneur{
width: 80%;
margin: 0 auto;
border: 1px solid;
}
.clear{ clear: both; }
#haut-gauche, #bas-gauche{
float: left;
width: 20%;
height: 10vh;
background: #ff23f2;
}
#haut-milieu, #bas-milieu{
float: left;
width: 60%;
height: 10vh;
background: #fda500;
}
#haut-droite, #bas-droite{
float: left;
width: 20%;
height: 10vh;
background: #f2365f;
}
#milieu-haut{
height: 15vh;
background: #669933;
}
#content{
float: left;
min-height: 50vh;
width: 70%;
background: #f43c80;
}
#milieu-droite{
float: left;
min-height: 50vh;
margin-left: 10%;
width: 20%;
background: #985623;
}
N'oubliez pas de vous rendre dans la partie du backOffice : barre noire > performances > Vider tous les caches
Voici ce à quoi devrait ressembler votre FRONT après l'avoir actualisé :

Nous allons maintenant intégrer les régions (pour qu'elles puissent s'afficher à l'endroit de notre choix) ainsi que quelques variables dans notre code présent sur page.tpl.php :
page.tpl.php
<header>
<div class="conteneur">
<div id="haut-gauche">
< ?php print render($page['haut-gauche']); ?>
</div>
<div id="haut-milieu">
< ?php print render($page['haut-milieu']); ?>
</div>
<div id="haut-droite">
< ?php print render($page['haut-droite']); ?>
</div>
<div class="clear"></div>
</div>
</header>
<nav>
<div class="conteneur">
<div id="menu">
< ?php print render($page['menu']); ?>
</div>
</div>
</nav>
<section>
<div class="conteneur">
<div id="milieu-haut">
< ?php print render($page['milieu-haut']); ?>
</div>
<div id="content">
< ?php print $messages; ?>
<h1>< ?php print $title ?></h1>
< ?php if ($tabs): print $tabs; endif; ?>
< ?php print render($page['contenu']); ?>
</div>
<div id="milieu-droite">
< ?php print render($page['milieu-droite']); ?>
</div>
<div class="clear"></div>
</div>
</section>
<footer>
<div class="conteneur">
<div id="bas-gauche">
< ?php print render($page['bas-gauche']); ?>
</div>
<div id="bas-milieu">
< ?php print render($page['bas-milieu']); ?>
</div>
<div id="bas-droite">
< ?php print render($page['bas-droite']); ?>
</div>
<div class="clear"></div>
</div>
</footer>
Pour résuméUne région se déclare dans le fichier .info
Une région s'exécute et s'affiche en l'écrivant dans le fichier page.tpl.php
Je fais volontairement le choix de ne pas garder beaucoup de variables drupal et de gérer cela avec des blocs.
Exemple : pour le logo, je devrais utiliser $logo, cela serait plus correct. Mais avec l'expériences que j'ai des clients non familiers du web, c'est parfois compliqué de leur dire que pour changer le logo il faut l'uplaoder à la bonne taille et se rendre dans : barre noire > apparence > paramètre du thème actif > décocher utiliser le logo par défaut et uplaodé une nouvelle image.
En utilisant un bloc pour afficher le logo, j'ai conscience que je n'utilise pas forcément les bonnes pratiques de Drupal mais que cela rendra service dans la gestion aux clients qui utiliseront le site (car lors de la création/modification d'un bloc, un éditeur est présent, le redimensionnement d'image est possible ainsi que l'ajout d'un lien très simplement par dessus le logo), et c'est bien ça l'un des principes des CMS, non ? rendre les mises à jour facile via une interface d'administration simple et intuitive.
Nous pouvons nous rendre dans la partie : barre noire > structure > Blocs.
Nous pouvons constater la présence de nos régions dans la liste des emplacements disponibles :

Et cliquer sur : Présenter les régions de bloc (Mon Theme Perso) / Aperçu des régions des blocs (monthemeperso).
Cela devrait vous donner le résultat suivant :

C'est magnifique ! chaque région est à sa place !
PS : si vous avez perdu l'accès de votre backOffice dans toutes ces opérations, vous pouvez toujours revenir en inscrivant un /user/ dans l'url.
Nous allons pouvoir remplir nos régions avec des blocs :
Si ce n'est pas le cas, vous pouvez attribuer le bloc : Contenu de la page principale
Commençons dans l'ordre ! avec la région R1
Nous allons créer un nouveau bloc nommé "logo" :

Nous pouvons ajouter une image avec un lien cliquable grâce à l'éditeur ckeditor couplé à ckfinder :

N'oublions pas de positionner ce bloc dans la bonne région :

Notre logo s'affiche, il est toujours possible de lui fixer une position exacte grâce à FireBug et éventuellement CSS Injector:
Nous allons créer un bloc avec une phrase de texte en tant que slogan et positionner ce bloc dans la région n°2.
Le slogan devrait s'afficher dans la bonne région, et vous pourrez toujours revenir sur sa configuration en cliquant sur la petite roue à côté :
Nous allons placer le bloc User Menu dans la région n°3.
Cela nous donnera les liens Mon compte et Se déconnecter pour les membres connectés (comme nous en tant qu'admin).
Si vous prenez un autre navigateur, vous verrez que ce bloc n'apparait pas, pourquoi ?
Tout simplement parce que si on n'est pas connecté, le bloc ne s'affichera pas, c'est normal, mais alors, qu'est-ce qu'on fait pour les internautes non connectés ?
Nous allons créer un nouveau menu !
Rendez vous dans la partie : barre noire > Structure > Menu > Ajouter un menu
Titre : menu pour internaute visiteur non connecté

Nous allons cliquer sur "Ajouter un lien" plusieurs fois :

Ajoutons 3 liens au total :
- Titre : s'inscrire - Chemin : user/register
- Titre : se connecter - Chemin :user
- Titre : mot de passe oublié - Chemin :user/password
N'oubliez pas d'enregistrer votre menu.
Et maintenant ?
Drupal est formidable, chaque menu est un bloc !
Nous allons donc pouvoir le placer rapidement dans une région, rendons-nous sans plus attendre dans la partie "Blocs".

Affiliez le à la région n°3 et enregistrez-le.
Cliquez sur le lien configurer

Titre:
(cela évite d'afficher un titre).
Afficher ce bloc uniquement pour les utilisateurs anonymes :

Et oui, c'est logique ! nous n'allons pas proposer aux membres connectés de s'inscrire ou de se connecter (puisqu'ils le sont déjà !).
Pour terminer le haut de votre site, n'hesitez pas à écrire un peu de code CSS (pour R1, R2, R3), avec l'aide de firebug, c'est plus simple.
Nous allons placer un bloc Nice Menu dans notre région n°4 :

Enregistrez.
Nous allons cliquer sur le lien de configuration :

Nous demandons à ce que notre bloc NiceMenu affiche le menu principal, que le titre soit masqué (none), que le style de menu soit un déroulant vers le bas (down) et pour finir qu'une classe css soit ajoutée (monmenu). Cela permettra une meilleure personnalisation dans firebug.
Tout le travail n'est pas fini pour autant, A vous de le styliser maintenant !
Nous allons ajouter un nouveau bloc et placer une image sous forme de bandeau / banniere dans notre région n°5 :

Enregistrez.
Si ce n'est pas le cas, vous pouvez attribuer le bloc : Contenu de la page principale
Pour le moment, nous allons garder cette région vide.
Exercice 1 : Pouvez vous afficher lien "Partager la page", le flux RSS + les icones de partages sur les réseaux sociaux
Exercice 2 : Pouvez vous afficher un texte d'actualité + des liens administratifs "Mentions légales, cgu, contact".
Exercice 3 : Pouvez vous afficher une GoogleMap accompagnée d'un texte "Venez nous rencontrer" + un formulaire "Inscription à la newsletter"
N'oubliez pas de styliser le tout (avec l'aide de firebug et du langage css) pour avoir un meilleur affichage.
Voici un aperçu du rendu souhaité pour le footer :

Correction des exercices :
Numéro |
Exercice |
Correction |
1 |
Pouvez vous afficher lien "Partager la page", le flux RSS + les icones de partages sur les réseaux sociaux |
Pour afficher un lien "Partager la page" Nous aurons besoin du bloc Forward, Pour le flux RSS nous aurons besoin du bloc Syndiquer et pour les icones de partage sur les réseaux sociaux, nous aurons besoin d'un module ou de simples liens HTML. |
2 |
Pouvez vous afficher un texte d'actualité + des liens administratifs "Mentions légales, cgu, contact" |
Pour le texte d'actualité il faudra créer un bloc avec du texte,
pour les liens administratif, il faudra d'abord créer ces pages, ensuite un menu avec des liens pointant sur ses pages et pour finir positionner le bloc menu dans la bonne région R9. |
3 |
Pouvez vous afficher une GoogleMap accompagnée d'un texte "Venez nous rencontrer" + un formulaire "Inscription à la newsletter" |
Nous aurons besoin d'un module type locationMap qui apporte un bloc que nous pourrons placer dans la bonne région R10
Nous créons un bloc pour la partie texte et enfin pour le formulaire d'inscription à la newsletter nous placerons le bloc Abonnement Newsletter fourni par SimpleNews |
Dans tous les cas, il y aura un travail de mise en forme CSS à prévoir de manière à ce que le rendu à l'écran soit joli.
La plupart de nos régions sont remplies et nous avons à présent un très bon affichage en FRONT :

En ce qui concerne la région n°7, vous avez pu constater que nous l'avions volontairement laissée vide, dans ce cas, pourquoi notre contenu ne s'affiche pas sur toute la largeur ? pourquoi conserver une colonne vide au milieu à droite ?
Et bien justement, nous allons modifier légérement le fichier page.tpl.php pour dire que si un bloc est dans la région, nous l'afficherons, sinon dans le cas contraire nous prendrons toute la largeur.
page.tpl.php
<div id="content" <?php if(!render($page['milieu-droite'])) echo 'class="pleine-largeur"'; ?>>
<?php if ($tabs): ?>< ?php print render($tabs); ?>< ?php endif; ?> <!-- Voir / Modifier (en tant qu'admin)-->
<?php print $messages; ?> <!-- Messages de Drupal -->
<?php print $title; ?> <!-- Titre du contenu -->
<?php print render($page['content']); ?>
</div>
<?php if(render($page['milieu-droite'])): ?>
<div id="milieu-droite">
<?php print render($page['milieu-droite']); ?>
</div>
<?php endif; ?>
Explications :
Le 1er IF permet d'affecter la classe "pleine-largeur" à la div id contenue (r6) en l'absence de bloc dans la région milieu-droite (r7).
Le 2e IF permet d'afficher ou de masquer la présence de la région milieu-droite (r7). S'il y a un ou plusieurs blocs dedans = affichage. Sinon, ça ne s'affiche pas.
Le code CSS de la classe pleine-largeur :
.pleine-largeur{ width: 100% !important; }
Vous pouvez à présent mettre un bloc dans la région R7 pour voir si elle continue de prendre une place au milieu à droite.

Vous pouvez aussi retirer tous les blocs affectés à la région R7 et voir que cette région "s'efface" et permet à la région content R6 de s'étaler sur toute la largeur.

Nous allons également mettre une condition pour la zone du milieu en haut, s'il y a des blocs nous l'affichons, sinon nous l'ignorons.
page.tpl.php
<?php if(render($page['milieu-haut'])): ?>
<div id="milieu-haut">
<?php print render($page['milieu-haut']); ?>
</div>
<?php endif; ?>
InformationsLe bloc Navigation permet de proposer : ajouter du contenu
Le bloc Management permet de proposer : administrer
Le bloc Connexion utilisateur permet de proposer : le formulaire de connexion
Le bloc Menu principal permet de proposer : le menu
Les fichiers templates
Il est possible de créer d'autres fichiers templates.
Pour cela, nous allons nous rendre dans sur les url suivantes :
https://drupal.org/node/1089656 et
https://drupal.org/node/190815
Sur Google, il faut saisir : list template drupal.
Présentation des templates et organisation :
- Block :
- 1. base template: block.tpl.php
- 2. block--module--delta.tpl.php
- 3. block--module.tpl.php
- 4. block--region.tpl.php
- Comment :
- 1. base template: comment.tpl.php
- 2. comment--node-[type].tpl.php
- 3. base template: comment-wrapper.tpl.php
- 4. comment-wrapper--node-[type].tpl.php
- Fields :
- 1. base template: field.tpl.php
- 2. field--[type|name[--content-type]|content-type].tpl.php
- 3. field--field-name--content-type.tpl.php
- 4. field--content-type.tpl.php
- 5. field--field-name.tpl.php
- 3. field--field-type.tpl.php
- Forums :
- 1. base template: forums.tpl.php
- 2. forums--[[container|topic]--forumID].tpl.php
- 3. forums--containers--forumID.tpl.php
- 4. forums--forumID.tpl.php
- 5. forums--containers.tpl.php
- 6. forums--topics--forumID.tpl.php
- 7. forums--forumID.tpl.php
- 8. forums--topics.tpl.php
- Html :
- 1. base template: html.tpl.php
- 2. html.tpl.php
- Maintenance :
- 1. base template: maintenance-page.tpl.php
- 2. maintenance-page--[offline].tpl.php
- Node :
- 1. base template: node.tpl.php
- 2. node--[type|nodeid].tpl.php
- 3. node--nodeid.tpl.php
- 4. node--type.tpl.php
- 5. node.tpl.php
- Page :
- 1. base template: page.tpl.php
- 2. page--[front|internal/path].tpl.php
- 3. page--node--edit.tpl.php
- 4. page--node--1.tpl.php ou page--node--%.tpl.php
- 5. page--node.tpl.php
- 6. page.tpl.php
- 7. page--node--edit.tpl.php
- Profiles :
- 1. base template: profile-wrapper.tpl.php
- 2. profile-wrapper--[field].tpl.php
- Régions :
- 1. base template: region.tpl.php
- 2. region--[region].tpl.php
- Search :
- 1. base template: search-results.tpl.php
- 2. search-results--[searchType].tpl.php
- Taxonomy :
- 1.base template: taxonomy-term.tpl.php
- 2. taxonomy-term--tid.tpl.php
- 3. taxonomy-term--vocabulary-machine-name.tpl.php
- 4. taxonomy-term.tpl.php
Cette liste présente les différents noms de fichiers template que vous pouvez créer dans le dossier de votre thème.
Si vous affichez le code source écrit par Drupal, vous verrez que le doctype est un peu à l'ancienne :
Par exemple, si nous voulons nous mettre en HTML5 avec Drupal, nous créerons le fichier html.tpl.php :
La version par défaut se trouve dans : modules/system/html.tpl.php
Nous allons placer le code suivant :
<?php
/**
* @file
* Default theme implementation to display the basic html structure of a single
* Drupal page.
*
* Variables:
* - $css: An array of CSS files for the current page.
* - $language: (object) The language the site is being displayed in.
* $language->language contains its textual representation.
* $language->dir contains the language direction. It will either be 'ltr' or 'rtl'.
* - $rdf_namespaces: All the RDF namespace prefixes used in the HTML document.
* - $grddl_profile: A GRDDL profile allowing agents to extract the RDF data.
* - $head_title: A modified version of the page title, for use in the TITLE
* tag.
* - $head_title_array: (array) An associative array containing the string parts
* that were used to generate the $head_title variable, already prepared to be
* output as TITLE tag. The key/value pairs may contain one or more of the
* following, depending on conditions:
* - title: The title of the current page, if any.
* - name: The name of the site.
* - slogan: The slogan of the site, if any, and if there is no title.
* - $head: Markup for the HEAD section (including meta tags, keyword tags, and
* so on).
* - $styles: Style tags necessary to import all CSS files for the page.
* - $scripts: Script tags necessary to load the JavaScript files and settings
* for the page.
* - $page_top: Initial markup from any modules that have altered the
* page. This variable should always be output first, before all other dynamic
* content.
* - $page: The rendered page content.
* - $page_bottom: Final closing markup from any modules that have altered the
* page. This variable should always be output last, after all other dynamic
* content.
* - $classes String of classes that can be used to style contextually through
* CSS.
*
* @see template_preprocess()
* @see template_preprocess_html()
* @see template_process()
*
* @ingroup themeable
*/
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="< ?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="< ?php print $language->dir; ?>"< ?php print $rdf_namespaces; ?>>
<head profile="< ?php print $grddl_profile; ?>">
<?php print $head; ?>
<title>< ?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="< ?php print $classes; ?>" < ?php print $attributes;?>>
<div id="skip-link">
<a href="#main-content" class="element-invisible element-focusable">< ?php print t('Skip to main content'); ?></a>
</div>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>
Votre site possède à présent un Doctype HTML5 dans son code-source.
Nous pouvons créer une page d'accueil différente avec le template page--front.tpl.php.
Rappel : Différence entre node et page :

Nous allons récupérer le code (à cet endroit :
node.tpl) nécessaire pour remplir notre fichier node.tpl.php (pour présenter tous les contenus) :
<?php
/**
* @file
* Default theme implementation to display a node.
*
* Available variables:
* - $title: the (sanitized) title of the node.
* - $content: An array of node items. Use render($content) to print them all,
* or print a subset such as render($content['field_example']). Use
* hide($content['field_example']) to temporarily suppress the printing of a
* given element.
* - $user_picture: The node author's picture from user-picture.tpl.php.
* - $date: Formatted creation date. Preprocess functions can reformat it by
* calling format_date() with the desired parameters on the $created variable.
* - $name: Themed username of node author output from theme_username().
* - $node_url: Direct URL of the current node.
* - $display_submitted: Whether submission information should be displayed.
* - $submitted: Submission information created from $name and $date during
* template_preprocess_node().
* - $classes: String of classes that can be used to style contextually through
* CSS. It can be manipulated through the variable $classes_array from
* preprocess functions. The default values can be one or more of the
* following:
* - node: The current template type; for example, "theming hook".
* - node-[type]: The current node type. For example, if the node is a
* "Blog entry" it would result in "node-blog". Note that the machine
* name will often be in a short form of the human readable label.
* - node-teaser: Nodes in teaser form.
* - node-preview: Nodes in preview mode.
* The following are controlled through the node publishing options.
* - node-promoted: Nodes promoted to the front page.
* - node-sticky: Nodes ordered above other non-sticky nodes in teaser
* listings.
* - node-unpublished: Unpublished nodes visible only to administrators.
* - $title_prefix (array): An array containing additional output populated by
* modules, intended to be displayed in front of the main title tag that
* appears in the template.
* - $title_suffix (array): An array containing additional output populated by
* modules, intended to be displayed after the main title tag that appears in
* the template.
*
* Other variables:
* - $node: Full node object. Contains data that may not be safe.
* - $type: Node type; for example, story, page, blog, etc.
* - $comment_count: Number of comments attached to the node.
* - $uid: User ID of the node author.
* - $created: Time the node was published formatted in Unix timestamp.
* - $classes_array: Array of html class attribute values. It is flattened
* into a string within the variable $classes.
* - $zebra: Outputs either "even" or "odd". Useful for zebra striping in
* teaser listings.
* - $id: Position of the node. Increments each time it's output.
*
* Node status variables:
* - $view_mode: View mode; for example, "full", "teaser".
* - $teaser: Flag for the teaser state (shortcut for $view_mode == 'teaser').
* - $page: Flag for the full page state.
* - $promote: Flag for front page promotion state.
* - $sticky: Flags for sticky post setting.
* - $status: Flag for published status.
* - $comment: State of comment settings for the node.
* - $readmore: Flags true if the teaser content of the node cannot hold the
* main body content.
* - $is_front: Flags true when presented in the front page.
* - $logged_in: Flags true when the current user is a logged-in member.
* - $is_admin: Flags true when the current user is an administrator.
*
* Field variables: for each field instance attached to the node a corresponding
* variable is defined; for example, $node->body becomes $body. When needing to
* access a field's raw values, developers/themers are strongly encouraged to
* use these variables. Otherwise they will have to explicitly specify the
* desired field language; for example, $node->body['en'], thus overriding any
* language negotiation rule that was previously applied.
*
* @see template_preprocess()
* @see template_preprocess_node()
* @see template_process()
*
* @ingroup themeable
*/
?>
<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
<?php print $user_picture; ?>
<?php print render($title_prefix); ?>
<?php if (!$page): ?>
<h2< ?php print $title_attributes; ?>><a href="< ?php print $node_url; ?>">< ?php print $title; ?></a></h2>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($display_submitted): ?>
<div class="submitted">
<?php print $submitted; ?>
</div>
<?php endif; ?>
<div class="content"< ?php print $content_attributes; ?>>
<?php
// We hide the comments and links now so that we can render them later.
hide($content['comments']);
hide($content['links']);
print render($content);
?>
</div>
<?php print render($content['links']); ?>
<?php print render($content['comments']); ?>
</div>
Nous allons également créer un fichier node--vehicule.tpl.php pour standardiser les affichages de nos fiches véhicules :
node--vehicule.tpl.php
<?php
// Affichage complet de $node :
// print '<pre>'; print_r($node); print '</pre>';
//---------------------------------
echo '<div class="vehicule-gauche">';
global $base_url;
echo "<img src=\"$base_url/sites/default/files/vehicule/". $node->field_photo['und'][0]['filename'] . "\" width=\"300\">";
echo '</div>';
echo '<div class="vehicule-droite">';
print render($content['field_modele']) . '<br>';
print render($content['field_km']) . '<br>';
print render($content['field_couleur']) . '<br>';
print render($content['field_carburant']) . '<br>';
echo '</div>';
echo '<div class="clear"></div>';
echo '<div class="vehicule-bas">';
print render($content['body']);
echo '</div>';
Dans cet exemple, avec le code CSS correspondant, nous obtiendrons notre photo a gauche, les informations complémentaires de nos autres champs personnalisés à droite, et le contenu en bas.

Dans le fichier page.tpl.php, la variable $page est disponible et contient plein d'informations importantes (sous forme d'ARRAY) :
<?php print '<pre>'; print_r($page); print '</pre>'; ?>
Dans le fichier node.tpl.php, la variable $node est disponible et contient plein d'informations importantes (sous forme d'OBJECT) :
<?php print '<pre>'; print_r($node); print '</pre>'; ?>
Si nous souhaitons faire un template spécifique pour un contenu en particulier, il est possible de l'identifier par son NID (Node ID)
Pour cela, dans le fichier node.tpl.php, il faut écrire :
<?php print $node->nid; ?>
Si le nombre qui s'affiche est le 2 (pour le contenu n°2 par exemple).
Vous devrez créer le fichier :
page--node--2.tpl.php
Cela vous permettra de personnaliser un contenu spécifique.
AttentionToutefois cela n'est pas très conseillé dans la mesure où l'administrateur peut supprimer le contenu en question et le recréer (pour une raison X ou Y) du coup le template risque de ne plus fonctionner car l'id du contenu aura changé.
Ca ne fonctionne pas ? pas de panique, c'est surement que vous avez oublié de vider tous les caches en passant par : barre noire > performances > vider tous les caches.