Blog Joomla!

Comment j'ai migré mon site Joomla! 1.0 (partie 3 : convertir le template)

Convertir un template Joomla! 1.0

Si vous ne souhaitez pas modifier votre template et adopter un nouveau design, il vous faudra adapter votre template pour Joomla! 1.0. Je n'aborderais une à une les modifications à apporter. Je vous renvoie aux différentes documentation que l'on fini par trouver en ajustant les critères de recherche de votre moteur de recherche préféré.

J'exposerai toutefois ici les codes des templates afin de pouvoir comparer et regarder les modifications apportées...

Tout d'abord, voici les principales ressources que j'ai utilisée. Inutile que je les plagies :

Mise à jour d'un template Joomla! 1.0 (en anglais)
Convertir un temaplte Joomla! 1.0
Créer son template pour Joomla! 1.5

Evidemment, parfois le template comporte des développements spécifiques, ils faut parfois également les adapter. N'hésitez pas à interroger les forum. Pour ma part, j'ai du faire au support bénévole de Joomla!fr (un grand merci à ced1870 et fly06).

Pour ma part j'utilise, pour le site Causse-mejean.net, le template modifié UltimateBlog.

Avant de commencer

PLacez une copie du répertoire de votre temaplte Joomla! 1.0 dans le répertoire temaplte de votre site de développement (une copie de votre site en local) dans le réprtoire /templates de votre site sous Joomla! 1.5.

Commencez par renommer le fichier template_css.css en template.css. Modifiez ensuite quelques élements du fichier templateDetails.xml. En l'état, le template ne sera pas installable automatiquement (si vous produisiez un fichier .zip), mais il devrait être fonctionnel sous Joomla! 1.5 sans activer le mode de compatibilité de Joomla! 1.0.

L'en-tête du fichier templateDetails.xml sous Joomla! 1.0

{codecitation style="brush: xml;"}<?xml version="1.0" encoding="iso-8859-1" ?>
<mosinstall type="template">
Contenu
</mosinstall>{/codecitation}

Devient

{codecitation style="brush: xml;"}<?xml version="1.0" encoding="utf-8" ?>
<install type="template">
Contenu
</install>{/codecitation}

Modifiez également

{codecitation style="brush: xml;"}<filename>css/template_css.css</filename>{/codecitation}

En

{codecitation style="brush: xml;"}<filename>css/template.css</filename>{/codecitation}

Modification du fichier index.php

Avant les balises HEAD

Voici l'introduction du template 1.0 (avant les balises head)

 {codecitation}<?php

defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">{/codecitation}

est remplacé, dans Joomla! 1.5 par

{codecitation}<?php

defined( '_JEXEC' ) or die( 'Direct Access to this location is not allowed.' );

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >{/codecitation}

Entre les balises HEAD

D'une manière général, l''en-tête 1.0

{codecitation}<?php

if ( $my->id ) {initEditor();}

mosShowHead();

?>

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

<link href="/<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" />{/codecitation}

entre les balises head est modifié ainsi

{codecitation} <jdoc:include type="head" />

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

Vous noterez que la feuille de style se nomme désormais template.css. Pensez à renommer le fichier template_css.css de Joomla! 1.0.

Ce template contient également, dans l'en-tête, un script Php permettant de redimentionner l'emplacement de module en fonction du nombre de ces derniers publiés. Le code est ainsi écrit pour Joomla! 1.0

{codecitation style="brush: xml;"}if(mosCountModules('left')>0 && mosCountModules('right')>0)
{
$wide='';
}
elseif(mosCountModules('left')>0 && mosCountModules('right')==0)
{
$wide='_wide';
}
elseif(mosCountModules('left')==0 && mosCountModules('right')>0)
{
$wide='_wide';
}
else  
{
$wide='_full';
}
?>{/codecitation}

Il devient, sous Joomla! 1.5 :

{codecitation}if($this->countModules('left')>0 && $this->countModules('right')>0)
{
$wide='';
}
elseif($this->countModules('left')>0 && $this->countModules('right')==0)
{
$wide='_wide';
}
elseif($this->countModules('left')==0 && $this->countModules('right')>0)
{
$wide='_wide';
}
else
{
$wide='_full';
}
?>{/codecitation}

Corps du template

Le code du template qui régit la disposition des différentes parties du template et la position des modules se situe entre les balises body. Si vous ne souhaitez pas modifier l'aspect de votre site vous devez conserver le squelette du template.

En revanche les appels d'images (du template) et plus particulièrement des positions de modules changent.

Pour une image du template, par exemple, le code

{codecitation}<div>

<a href="/index.php"><img src="/<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/logo.png" alt="logo.png" border="0" /></a>

</div>{/codecitation}

devient

{codecitation}<div>

<a href="/index.php"><img src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" alt="logo.png" border="0" /></a>

</div>{/codecitation}

Pour un appel de module, ici avec une condition, le code

{codecitation}<? if(mosCountModules('top')) { ?>
   <div>
     <div>
       <div>
       <? mosLoadModules('top'); ?>
       </div>
     </div>
   </div>
<? } ?>{/codecitation}

devient

{codecitation}<?php if($this->countModules('top')) : ?>
   <div>
    <div>
       <div>
       <jdoc:include type="modules" name="top" style="xhtml"/>
       </div>
     </div>
  </div>
<?php endif; ?>{/codecitation}

Notez que sous Joomla! 1.0, il était possible de paramétrer l'affichage du module à l'aide de 3 paramètres : -1, -2 et -3. Avec Joomla! 1.5, vous avez quatre paramètres :

  • style="table"
  • style="horz"
  • style="xhtml"
  • style="rounded"

Par conséquent pensez à définir le style nécessaire. Pour un rendu identique, j'ai du paramétrer style="xhtml" alors qu'aucun style n'était défini dans le template d'origine.

Il restera, ce que je n'ai pas encore fait, à paufiner le fichier templateDetails.xml afin de rendre le template instalable. C'est toujours utilse de conserver une copie en cas de problème ou afin de pouvoir le redistribuer...

Le résultat en image

Sous Joomla! 1.0

causse-mejean_j10

sous Joomla! 1.5

causse-mejean_j15