2009-12-27 – 14:20
2009-12-27 – 14:00
2009-12-29 – 17:36
Les thèmes dynamiques ont été appliqués au site de Lato Sensu Management. C'est ce qui nous permet d'afficher une bannière festive entre le 15 décembre et le 15 janvier.
En soi, cela n'a rien de difficile : il suffit d'adapter les définitions CSS et le tour est joué. Ce que nous allons illustrer dans cet article, c'est l'application automatique de ce principe. Il ne faudra dès lors plus jamais modifier notre code pour que le principe s'active de lui-même !
Imaginons que nous souhaitions modifier l'apparence de notre site web en fonction de la période de l'année. Pourquoi pas une apparence un peu plus festive entre le 15 décembre et le 15 janvier ou alors une apparence plus amoureuse le 14 février ? Vous l'aurez compris, vous pourrez aussi, sur base des mêmes principes, appliquer un thème matinal, un thème de soirée …. La limite est vraiment votre imagination.
Créons le code PHP qui va retourner le nom du thème en fonction des dates :
function DynamicTheme()
/*-------------------*/
{
$iNow = time();
$iMonth = DAT_Month( $iNow ); /* Fonction de Vae Soli! pour retourner le mois */
$iDay = DAT_Day( $iNow ); /* Fonction de Vae Soli! pour retourner le jour */
$iYear = DAT_Year( $iNow ); /* Fonction de Vae Soli! pour retourner l'année */
if ( ( ( $iMonth == 12 ) && ( $iDay >= 15 ) ) ||
( ( $iMonth == 1 ) && ( $iDay <= 15 ) )
)
{
$szTheme = "holiday_season {$iYear}";
}
else if ( $iMonth == 2 && $iDay == 14 )
{
$szTheme = "valentine {$iYear}";
}
else
{
$szTheme = 'regular';
}
return ( $szTheme );
}
Ce code PHP va donc retourner des patterns bien
particulier entre le 15 décembre et le 15 janvier de n'importe quelle année
(dans ce cas le pattern holiday_season) et le 14 février
(valentine). Il suffira d'appliquer le pattern résultat en
tant que classe de notre body … et de prévoir les
images à afficher dans l'entête de nos pages.
<html>
…
<body class="<?php echo DynamicTheme(); ?>">
<div id="header">
…
</div>
…
</body>
</html>
… et donc de prévoir un code CSS semblable à …
body div#header
{ background : #fff url(/images/header.jpg) left top no-repeat;
}
body.holiday_season div#header
{ background-color : #000;
background-image : url(/images/header-holiday-season.jpg);
}
body.valentine div#header
{ background-color : #800;
background-image : url(/images/header-valentine.jpg);
}
… et le tour est joué ! Avouez que ce n'était pas bien compliqué!