Formation Logo Joomla 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 :


Ajouter, retirer, changer des positions du template


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


Ajouter, retirer, changer des positions du template


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


Ajouter, retirer, changer des positions du template


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.


Ajouter, retirer, changer des positions du template


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 :


Ajouter, retirer, changer des positions du template


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 :


Ajouter, retirer, changer des positions du template


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


Ajouter, retirer, changer des positions du template


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


Ajouter, retirer, changer des positions du template



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.


Ajouter, retirer, changer des positions du template


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

Ajouter, retirer, changer des positions du template


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.


Ajouter, retirer, changer des positions du template


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.


Ajouter, retirer, changer des positions du template



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.


Ajouter, retirer, changer des positions du template


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.


Ajouter, retirer, changer des positions du template


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


Ajouter, retirer, changer des positions du template



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.


Le template Protostar dispose de :





Please answer the question.


Et ensuite...

 

web-eau.net is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is
used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.