Integration De Theme

Vous êtes ici : >> DRUPAL / Integration De Theme
Temps d'étude : 2h15. Niveau : Moyen.
Tags : Integration De Theme
Fichier(s) utile(s) pour ce cours : /

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

explications drupal

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

explications drupal

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

explications drupal

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 :

explications drupal

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 :

explications drupal

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 :

explications drupal

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 :

explications drupal

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 :

explications drupal

Ou encore, pour remonter le contenu par rapport à la ligne de flotaison :

explications drupal

fléche Attention
Nous 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.

explications drupal

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

explications drupal

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>	


fléche 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 :

explications drupal

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 :

explications drupal

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 :

R6 - Zone de contenu (milieu gauche) Si ce n'est pas le cas, vous pouvez attribuer le bloc : Contenu de la page principale

R1 - Zone du haut a gauche Commençons dans l'ordre ! avec la région R1

Nous allons créer un nouveau bloc nommé "logo" :

explications drupal

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

explications drupal

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

explications drupal

Notre logo s'affiche, il est toujours possible de lui fixer une position exacte grâce à FireBug et éventuellement CSS Injector:

explications drupal


R2 - Zone du haut au milieu 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é :

explications drupal


R3 - Zone du haut a droite 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é

explications drupal

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

explications drupal

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

explications drupal

Affiliez le à la région n°3 et enregistrez-le.

Cliquez sur le lien configurer

explications drupal

Titre: (cela évite d'afficher un titre).

Afficher ce bloc uniquement pour les utilisateurs anonymes :

explications drupal

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.

R4 - Zone de menu Nous allons placer un bloc Nice Menu dans notre région n°4 :

explications drupal

Enregistrez.

Nous allons cliquer sur le lien de configuration :

explications drupal

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 !


R5 - Zone du milieu en haut Nous allons ajouter un nouveau bloc et placer une image sous forme de bandeau / banniere dans notre région n°5 :

explications drupal

Enregistrez.


R6 - Zone de contenu (milieu gauche) Si ce n'est pas le cas, vous pouvez attribuer le bloc : Contenu de la page principale

R7 - Zone du milieu a droite Pour le moment, nous allons garder cette région vide.

R8 - Zone du bas a gauche Exercice 1 : Pouvez vous afficher lien "Partager la page", le flux RSS + les icones de partages sur les réseaux sociaux

R9 - Zone du bas au milieu Exercice 2 : Pouvez vous afficher un texte d'actualité + des liens administratifs "Mentions légales, cgu, contact".

R10 - Zone du bas a droite 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 :

explications drupal

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 :

explications drupal

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.

explications drupal

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.

explications drupal

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; ?>	
explications drupal

fléche Informations
Le 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 :

explications drupal

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 :

explications drupal

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.

explications drupal

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.

fléche Attention
Toutefois 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.