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 :





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 :

	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

		<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 :

		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 :

	<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>	

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 :





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.








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.

		
			<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.

	<?php if(render($page['milieu-haut'])): ?>
				<div id="milieu-haut">
					<?php print render($page['milieu-haut']); ?>
				</div>
<?php endif; ?>	

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 :

<?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.



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.