Accueil Blog TutorielsComment créer un template Joomla 1.5

Comment créer un template Joomla 1.5

20 Novembre 2009
Posted in Blog - Tutoriels

Bonjour,

J'ai décidé de créer un blog sur mon site pour y publier différentes aides à l'utilisation de Joomla et au développement/retouche d'extensions existantes. Pour commencer cette rubrique, je vais commencer par expliquer comment réaliser un template Joomla! 1.5.x en partant de 0. Cependant je suppose que vous connaissez parfaitement le HTML, CSS, et PHP basique.

Si vous ne savez pas manier le HTML, le CSS, ou le PHP, je vous invite à consulter les tutoriels sur le site developpez.com

Pour poser les bases, il est important de connaître comment Joomla gère les fichiers du template, car dans tous ce que vous développerez pour Joomla, vous devez savoir qu'il y a certaines règles à suivre comme le nommage des fichiers, l'arborescence à adopter, etc... Voici donc l'arborescence d'un dossier template standard (ici celle du template de base dans Joomla : rhuk_milkyway) :

Détails des points importants :

dossier "css" : il contiendra toutes les feuilles de style du template
dossier "html" : ici vous modifierez l'affichage des composants et modules joomla sans toucher au composant/module principal
dossier "images" : ici vous stockerez les images du template
fichier "index.php" : C'est le code du template, la base html de l'affichage global
fichier "params.ini" : Les paramêtres du template, si vous souhaitez élargir le template, lui affecter plusieures possibilités de couleurs, etc...
fichier "template_thumbnail.png" : La miniature du template lorsque vous le survolez dans le panneau d'administration. Habituellement 200x150 pixels
fichier "templateDetails.xml" : Toutes les informations du template, auteur, date de création, emplacements de modules disponibles,...

Je montrerais chaque point en détail, nous vous en faites pas .

Nous commençons par créer le dossier mon_template dans le dossier templates de Joomla. Ce qui nous donne à partir de la racine du site : /templates/mon_template . Ensuite on crée les fichiers de base à l'élaboration d'un template Joomla, à savoir les fichiers index.php, templateDetails.xml et les dossiers images, css. Une fois le dossier css crée, on y ajoute un fichier template.css. Ainsi nous nous retrouvons donc avec l'arborescence en image à droite.

La création d'un template Joomla 1.5

Les premières ligne du fichier index.php doivent toujours être ainsi pour éviter que les accès directs au fichier :

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );

Ensuite vous devez créer l'entête html :

<!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; ?>" >
<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/mon_template/css/template.css" type="text/css" />
</head>

<jdoc:include type="head" /> Cette ligne sert à inclure l'entête Joomla : les scripts Mootools, les balises Meta, et d'autres liens css de composants ou modules.

Ensuite viennent les liens css vers le fichier system.css et general.css pour l'administration en front end.

Maintenant créeons une base d'affichage pour la page :

Comme vous le comprenez sûrement en lisant cet exemple de template (extrêmement simpliste) que nous construisons en fait un squelette ou nous incluons les modules de Joomla grâce à la fonction <jdoc:include type="modules" name="nom_du_module" />.

Evidemment, il faut travailler la mise en page grâce au CSS pour donner une meilleure mise en page à nos <div>.Joomla utilise des classes CSS pour sa mise en page. Voici un fichier CSS comprenant toutes les classes css utilisées par Joomla : joomla.css

Pour continuer, il faut rédiger le contenu du fichier templateDetails.xml pour renseigner les informations concernant le template à Joomla.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
    <name>mon_template</name>
    <creationDate>2009</creationDate>
    <author>Moi</author>
    <authorEmail>mon email</authorEmail>
    <authorUrl>Mon site web</authorUrl>
    <copyright></copyright>
    <license></license>
    <version>1.0</version>
    <description>Description du template !</description>
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <filename>template_thumbnail.png</filename>
        <filename>css/template.css</filename>
    </files>
    <positions>
        <position>left</position>
        <position>right</position>
        <position>headmenu</position>
        <position>footer</position>
        <position>debug</position>
    </positions>
</install>

Comment créer un module d'authentification personnalisé pour Joomla ?

C'est très simple,ouvrons le dossier template, nous allons créer à l'intérieur un dossier nommé html. dans ce dossier, créons un autre dossier mod_login puis à l'intérieur de ce dossier, nous créons notre fichier default.php qui sera exploité par Joomla à la place de celui dans le répertoire modules. Cette manipulation fonctionne avec tous les modules et composants Joomla, il vous suffit de créer le dossier avec le nom de l'extensions à modifier, vous créez le fichier default.php et le tour est joué. Comme vous le voyez, nous allons créer une vue alternative pour l'affichage du module de Login de Joomla. Grâce à ça, nous ne touchons pas au module général de login. Pour voir les effets de notre modification, nous allons créer un affichage du module de login sur une seule ligne. Dans cette optique, nous récupérons le code de l'affichage du module login qui se trouve dans /modules/mod_login/tmpl/default.php. En voici le code (en marron, le code que nous allons modifier) :

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<?php if($type == 'logout') : ?>
<form action="index.php" method="post" name="login" id="form-login">
<?php if ($params->get('greeting')) : ?>
    <div>
    <?php if ($params->get('name')) : {
        echo JText::sprintf( 'HINAME', $user->get('name') );
    } else : {
        echo JText::sprintf( 'HINAME', $user->get('username') );
    } endif; ?>
    </div>
<?php endif; ?>
    <div align="center">
        <input type="submit" name="Submit" class="button" value="<?php echo JText::_( 'BUTTON_LOGOUT'); ?>" />
    </div>

    <input type="hidden" name="option" value="com_user" />
    <input type="hidden" name="task" value="logout" />
    <input type="hidden" name="return" value="<?php echo $return; ?>" />
</form>
<?php else : ?>
<?php if(JPluginHelper::isEnabled('authentication', 'openid')) :
        $lang->load( 'plg_authentication_openid', JPATH_ADMINISTRATOR );
        $langScript =     'var JLanguage = {};'.
                        ' JLanguage.WHAT_IS_OPENID = \''.JText::_( 'WHAT_IS_OPENID' ).'\';'.
                        ' JLanguage.LOGIN_WITH_OPENID = \''.JText::_( 'LOGIN_WITH_OPENID' ).'\';'.
                        ' JLanguage.NORMAL_LOGIN = \''.JText::_( 'NORMAL_LOGIN' ).'\';'.
                        ' var modlogin = 1;';
        $document = &JFactory::getDocument();
        $document->addScriptDeclaration( $langScript );
        JHTML::_('script', 'openid.js');
endif; ?>
<form action="<?php echo JRoute::_( 'index.php', true, $params->get('usesecure')); ?>" method="post" name="login" id="form-login" >
    <?php echo $params->get('pretext'); ?>
    <fieldset class="input">
    <p id="form-login-username">
        <label for="modlgn_username"><?php echo JText::_('Username') ?></label><br />
        <input id="modlgn_username" type="text" name="username" class="inputbox" alt="username" size="18" />
    </p>
    <p id="form-login-password">
        <label for="modlgn_passwd"><?php echo JText::_('Password') ?></label><br />
        <input id="modlgn_passwd" type="password" name="passwd" class="inputbox" size="18" alt="password" />
    </p>
    <?php if(JPluginHelper::isEnabled('system', 'remember')) : ?>
    <p id="form-login-remember">
        <label for="modlgn_remember"><?php echo JText::_('Remember me') ?></label>
        <input id="modlgn_remember" type="checkbox" name="remember" class="inputbox" value="yes" alt="Remember Me" />
    </p>
    <?php endif; ?>
    <input type="submit" name="Submit" class="button" value="<?php echo JText::_('LOGIN') ?>" />
    </fieldset>
    <ul>
        <li>
            <a href="<?php echo JRoute::_( 'index.php?option=com_user&view=reset' ); ?>">
            <?php echo JText::_('FORGOT_YOUR_PASSWORD'); ?></a>
        </li>
        <li>
            <a href="<?php echo JRoute::_( 'index.php?option=com_user&view=remind' ); ?>">
            <?php echo JText::_('FORGOT_YOUR_USERNAME'); ?></a>
        </li>
        <?php
        $usersConfig = &JComponentHelper::getParams( 'com_users' );
        if ($usersConfig->get('allowUserRegistration')) : ?>
        <li>
            <a href="<?php echo JRoute::_( 'index.php?option=com_user&view=register' ); ?>">
                <?php echo JText::_('REGISTER'); ?></a>
        </li>
        <?php endif; ?>
    </ul>
    <?php echo $params->get('posttext'); ?>

    <input type="hidden" name="option" value="com_user" />
    <input type="hidden" name="task" value="login" />
    <input type="hidden" name="return" value="<?php echo $return; ?>" />
    <?php echo JHTML::_( 'form.token' ); ?>
</form>
<?php endif; ?>

Dans cette zone colorée, il faut bien noter les variables PHP présentes et les conserver. La manipulation est particulièrement simple à réaliser, nous allons utiliser un tableau pour mettre en page le module login mais vous choisissez la manière qui vous convient le plus :

    <table>
    <tr>
        <td><input id="modlgn_username" type="text" value="<?php echo JText::_('Username') ?>" name="username" class="inputbox" alt="username" size="18" /></td>
        <td><input id="modlgn_passwd" type="password" name="passwd" class="inputbox" size="18" alt="password" /></td>
        <td><input type="submit" name="Submit" class="button" value="<?php echo JText::_('LOGIN') ?>" /></td>
    </tr>
    </tr>
        <td><a href="<?php echo JRoute::_( 'index.php?option=com_user&view=reset' ); ?>"><?php echo JText::_('FORGOT_YOUR_PASSWORD'); ?></a></td>
        <td><a href="<?php echo JRoute::_( 'index.php?option=com_user&view=remind' ); ?>"><?php echo JText::_('FORGOT_YOUR_USERNAME'); ?></a></td>
        <td><?php
        $usersConfig = &JComponentHelper::getParams( 'com_users' );
        if ($usersConfig->get('allowUserRegistration')) : ?>
            <a href="<?php echo JRoute::_( 'index.php?option=com_user&view=register' ); ?>">
                <?php echo JText::_('REGISTER'); ?></a>
        <?php endif; ?></td>
    </table>

Et voila. Maintenant le module de login s'affiche en une seule ligne. Bien sûr l'affichage se travaille plus que ça mais c'est pour l'exemple. Cela fonctionne avec tous les modules et composants Joomla et c'est particulièrement intéressant pour conserver l'intégrité du coeur de Joomla.

Avec toutes ces informations, vous avez de quoi réaliser votre template Joomla de vous même ! Disposition des modules, personnalisation des css Joomla, et personnalisation de l'affichage des modules/composants Joomla.

En espérant que ce petit tutorial vous aidera et répondra à certaines de vos questions sur la création de templates pour Joomla1.5

A venir : développement d'un composant Joomla1.5 standard avec base de données dédiée au composant (par exemple des petites annonces ?)