Formation Joomla!

Ajouter, retirer, changer
des positions du template

Chaque template pour Joomla! est composé de plusieurs positions dans lesquelles vous pouvez publier un ou plusieurs modules différents. Les positions sont des emplacements dans lesquels vous pouvez afficher du contenu, des images, une barre de recherche, un formulaire de connextion, un menu, etc : les possibilités sont quasiment infinies.

Notre template Protostar dispose d'un certain nombre de positions de module par défaut. L'emplacement de ces positions est déterminé dans le fichier index.php de Protostar. Voici la "carte" de ces positions :

Le nom de ces positions apparait dans la liste déroulante de position lors de la création et de l'édition des modules. /

Au cours de cet article, nous allons voir comment ajouter, retirer et changer des positions dans notre template.

Ajouter une position

Par défaut, Protostar dispose de dix positions différentes pour afficher votre contenu. Cela peut s'avérer insuffisant dans certains cas. Créer de nouvelles positions implique de devoir éditer les fichiers suivants :

• index.php
• templateDetails.xml

Vous trouverez ces deux fichiers dans l'arborescence de votre template en ouvrant "Extensions" puis "Templates".
Dans le menu latéral de gauche, cliquez sur "Templates" puis sur "Protostar Détails et fichiers".

Comme nous l'avons vu au cours de l'article "Modifications avancées d'un template", nous travaillerons sur une copie de notre template :)

Dans l'arborescence des fichiers du template, cliquez sur index.php. Le contenu du fichier apparait alors dans la partie droite de votre écran.

A l'intérieur de la partie body (c'est à dire entre les lignes 124 et 209), vous placez la syntaxe suivante :

<jdoc:include type="modules" name="Protostar" style="none" />

Pour cet exemple, j'ai nommé la nouvelle position Protostar. Après avoir enregistré votre saisie, vous devriez obtenir ce résultat :

Editons maintenant le fichier templateDetails.xml. Les positions du templates sont listées ici, entre les lignes 27 et 46. Nous allons donc ajouter notre position Protostar en insérant le code suivant :

<position>Protostar</position>

Enregistrez votre saisie pour obtenir ce résultat :

Maintenant, nous allons afficher un nouveau module dans cette position pour voir le résultat en frontend. A noter que tant que vous ne publiez rien dans cette position, celle-ci ne s'affichera pas.

Ouvrez "Extensions", puis "Modules" puis cliquez sur "Nouveau. Choisissez le type de module que vous désirez afficher ("Qui est en ligne" dans notre exemple).

Dans la liste déroulante des positions, vous constatez la présence de notre nouvelle position Protostar

Il ne nous reste plus qu'à afficher le frontend !

Retirer une position

Dans cet exemple, nous désirons supprimer la position banner.
Pour les besoins de cet article, j'ai déplacé le module affichant l'image de la position position-3 à la position banner et j'ai modifié le fichier image en lui donnant une largeur de 940 pixel.

Pour rappel, la position banner est située entre la position position-1 et la position position-3.

Ouvrez d'abord le fichier templateDetails.xml. Notre position banner est listée à la ligne 28. Supprimez-la et enregistrer votre modification.

Ouvrez ensuite le fichier index.php. Nous savons où est affichée la position à supprimer à l'écran, cela nous facilite la recherche dans le code. La position position-1 est affichée à la ligne 160 et la position position-3 est à la ligne 169.

Commentez la ligne 164 pour empêcher qu'elle soit prise en compte lors de l'exécution du fichier index.php.

<!-- <jdoc:include type="modules" name="banner" style="xhtml" /> -->

Une fois que vous avez enregistré votre saisie, la position a été supprimée de votre template. Affichez le frontend pour vérifier que votre module a bien disparu.

Déplacer une position

Dans ce dernier exemple, nous allons déplacer la position banner pour qu'elle s'affiche avant le footer.
Pour les besoins de cet article, j'ai déplacé le module affichant l'image de la position position-3 à la position banner et j'ai modifié le fichier image en lui donnant une largeur de 940 pixel.

Ouvrez le fichier index.php. Nous savons où est actuellement affichée la position à déplacer, cela nous facilite la recherche dans le code. La position banner est affichée à la ligne 165 et la position footer est à la ligne 199.

Pour que notre position banner s'affiche dans le conteneur principal du template, nous devons inclure notre ligne de code avant la partie footer.

Copier et supprimez la ligne 165 et collez-la à la ligne 193.

Vérifions en frontend que notre module a bien été déplacé à l'endroit voulu.

Quizz

Dans le prochain article, nous verrons comment créer son arborescence au moyen des menus. Mais avant cela, je vous invite à répondre à une question portant sur l'article que vous venez de lire.

Et ensuite...