|
11.5 Ajout des positions left et right au template |
|
|
|
|
Concevoir son template -
11. Le corps du site
|
|
Écrit par Jean Louis Servais
|
|
06-03-2006 |
 | Joomla! 1.0.x |
 |
27/03/2006 : A la ligne 46 nous avons remplacé id="column-right" par id="column3"
16/04/2006 : Retouche de la présentation.
24/07/2006 : Corrections syntaxique et orthographique
|
 |
Coloration syntaxe du code ?
|
Nous pouvons maintenant ajouter les positions du corps du site. Nous placerons uniquement les positions left et right. Les autres positions font chacune l'objet d'un chapitre particulier dans la deuxième partie de ce tutoriel.
Compte tenu des excellentes explications données précédemment, il vous suffit maintenant d'insérer la fonction avec les positions adéquates dans des scripts PHP. Nous n'indiquerons pas de style de publication, car la valeur par défaut ($style = 0) nous convient parfaitement (affichage vertical des modules).
Il faut donc remplacer :
38
|
Emplacement colonne 1 du corps du site
|
Par :
38
|
<?php mosloadModules ( 'left' ); ?>
|
Et remplacer :
46
|
Emplacement colonne 3 du corps du site
|
Par :
46
|
<?php mosloadModules ( 'right' ); ?>
|
Une fois ces modifications réalisées, vous pouvez risquer un regard sur le site.
Votre joie est infinie, les trois colonnes sont remplies. Il était temps. Et maintenant, ça commence à ressembler à un site.
Certes la présentation n'est pas extraordinaire. C'est normal car nous n'avons pas encore défini les styles CSS dans le fichier template_css.css. Nous héritons donc de la feuille de style du navigateur.
A ce propos, avez-vous regardé le résultat :
| |
- Internet Explorer ?
- Firefox ?
- Opera ?
- Safari ?
|
Vous devriez observer quelques différences surprenantes. Ceci est malheureusement normal car chaque navigateur à sa propre interprétation de certaines règles CSS et dispose d'une feuille de style qui lui est propre.
Commençons d'abord par aligner le contenu des colonnes en haut en ajoutant dans la feuille de style template_css.css :
Aux styles CSS de nos colonnes :
| |
- column1,
- column2,
- column3.
|
Pour le reste, vous ne touchez à rien, nous améliorerons cela dans un prochain chapitre. Nous avons d'autres choses importantes à faire auparavant. Si vous ne l'avez pas encore fait, activez l'option Joomla! License du menu principal. Vous constaterez alors que la troisième colonne est vide et qu'elle est toujours affichée.
Nous allons régler ce petit problème. Pour ce faire, nous utilisons une fonction de Joomla! qui permet de compter le nombre de modules assignés à une position : mosCountModules.
Le nom de cette fonction est lui aussi assez facile à retenir :
| |
- mos = Mambo Open Source,
- Count = Compter en langue anglaise,
- Modules = Modules.
|
La syntaxe de cette fonction est la suivante :
|
mosCountModules ( $nom_position )
|
Donc, comme son nom l'indique, cette fonction va retourner le nombre de module assignés à la position $nom_position de la page en cours.
La colonne contient donc des modules si la fonction retourne une valeur supérieure à zéro et c'est seulement dans ce cas qu'il faut afficher cette colonne.
La difficulté technique se résume à traiter ou à ignorer les balises <td> et </td> en fonction du résultat de mosCountModules ( 'right' ).
Nous allons par conséquent faire appel à un petit script en php pour résoudre ce problème. Remplacez ces 4 lignes :
44
45
46
47
|
<!-- DEBUT COLONNE 3 DU CORPS DU SITE -->
<td id="column3">
<?php mosloadModules ( 'right' ); ?>
</td>
|
Par ces 6 lignes :
44
45
46
47
48
49
|
<!-- DEBUT COLONNE 3 DU CORPS DU SITE -->
<?php if ( mosCountModules( 'right' ) > 0 ){?>
<td id="column3">
<?php mosLoadModules ( 'right' ); ?>
</td>
<?php } ?>
|
Voici les explications pour les newbies en PHP :
| Ligne 44 : |
Un petite commentaire pour se situer dans le code;
|
| Ligne 45 : |
<?php
Ouverture du script en PHP;
if ( mosCountModules ( 'right' ) > 0 :
Si le nombre de modules à afficher dans la position right de la page est supérieur à zéro;
{?>)
Si oui alors continuer avec les lignes suivantes. Si non, quitter le script;
|
| Ligne 46 : |
<td id="column3">
Déclaration d'une nouvelle cellule (colonne de droite du corps du site) avec une présentation suivant le style #column3;
|
| Ligne 47 : |
<?php mosLoadModules ( 'right' ); ?>
Publier les modules assignés à la position right à cet emplacement;
|
| Ligne 48 : |
</td>
Fin de déclaration de la cellule;
|
| Ligne 49 : |
<?php } ?>
Fin du script PHP.
|
Vous pouvez aller faire un petit tour sur le site pour vérifier la présence des modules dans les différentes colonnes. Ce n'est pas très beau car les styles CSS ne sont pas encore définis. Mais, nous touchons au but.
Revenez vite, que nous puissions mettre le Footer en place...
 |
Vous pouvez éventuellement faire la même chose avec la colonne de gauche. Mais c'est inutile si votre menu principal est assigné à la position left et qu'il est présent en permanence. |
 |
Auto-contrôle :
Maintenant, la balise </html> doit se trouver à la ligne 55.
|
|
|
Dernière mise à jour : ( 14-08-2008 )
|
