Création d'un fichier index de base

From Joomla! Documentation

This page is a translated version of the page Creating a basic index file and the translation is 100% complete.
Other languages:
Deutsch • ‎English • ‎Nederlands • ‎español • ‎français • ‎русский • ‎中文(台灣)‎
Joomla! 
3.x
Joomla! 
2.5

Le fichier index.php est le noyau de chaque page que Joomla! génère. Pour résumer, vous allez créer une page (comme pour toute page HTML) en plaçant du code PHP où le contenu de votre site doit s'intégrer. Le template fonctionne alors par l'ajout du code Joomla! dans des positions de modules et les sections des composants de votre template. Tous les éléments ajoutés au template apparaîtront sur toutes les pages à moins d'être déjà ajoutés à l'une de ces sections via le CMS Joomla! (ou un code personnalisé).

Cette page présente le code prêt à être copié/collé dans votre propre réalisation.

Début

Un template Joomla! commencera par les lignes suivantes :

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

La première ligne est un moyen d’empêcher l'accès à votre code par des personnes mal intentionnées.

La seconde ligne est la Déclaration de type de document (DOCTYPE) qui indique aux navigateurs (et aux robots d'indexation) la version HTML de la page. Le doctype utilisé ci-dessus est HTML5, une nouvelle version d'HTML qui est largement compatible tout en contenant de nombreuses nouvelles fonctionnalités. Vous devez être conscient que ce type ne fonctionne pas bien avec Internet Explorer 8 ou ses versions antérieures sans des modifications substantielles de code. Vous devriez étudier cette situation avec vos clients avant d'opter pour un doctype précis. En tout état de cause, il est celui utilisé dans Joomla! Joomla 3.x.

La troisième ligne commence notre document HTML et indique la langue du site. Un document html est divisé en deux parties, l'entête et le corps. L'entête (head) contient les informations sur le document et le corps (body) va contenir le code du site qui contrôle la mise en page.


L'entête (head)

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>

La première ligne permet d'indiquer à Joomla! les informations à placer dans l'entête. Cela inclut le titre de la page, les méta-informations ainsi que les JavaScript. Les autres lignes sont des liens vers deux systèmes de feuilles de style et vers votre propre feuille de style (si celle-ci est nommée template.css et se situe dans le dossier css du répertoire de votre template. Donc, si votre template est situé dans http://www.monsite.com/templates/mon_template/ alors les fichiers css iront dans http://www.monsite.com/templates/mon_template/css/).

Le corps (body)

<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>

Étonnamment, cela est suffisant ! Et oui, c'est une mise en page très basique, mais qui permet de faire le travail. Tout le reste sera effectué par Joomla. Ces lignes, généralement appelées déclarations jdoc, indiquent à Joomla! d'inclure le rendu de certaines parties du système Joomla. Remarque : vous devrez vous assurer que votre menu est défini en position de module top.

Les positions de modules

Ci-dessus, la ligne indiquant name="top" ajoute une position de module nommée top et permet à Joomla! de placer des modules dans cette section du template. La ligne type="component" contient tous les articles et le contenu principal (en fait, le composant) et c'est très important. Il se positionne au centre du template.

Remarque : vous pouvez ajouter des lignes pour vos propres modules là où vous le souhaitez dans body, mais il vous faut ajouter une ligne correspondante dans le fichier templateDetails.xml qui se trouve au même endroit que le fichier index.php de votre template.

Fin

Pour terminer :

</html>

Images personnalisées

Si vous souhaitez ajouter des images dans le template, vous pouvez le faire ainsi :

<img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/myimage.png" alt="Custom image" class="customImage" />

Ici, la variable template permet de renseigner le nom de votre template.

CSS personnalisées

Vous pouvez ajouter des CSS personnalisées de cette façon :

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/styles.css" type="text/css" />

Chaque fichier ajouté doit avoir une ligne correspondante dans le fichier templateDetails.xml pour le template, à moins qu'il ne soit situé dans un sous-dossier (qui peut être inclus dans un élément <folder>).