Bonjour à tous,
Aujourd'hui je vous propose un petit tuto (@alain01
) afin d'intégrer la gestion des thèmes pour appareils mobiles (smartphones, tablettes) à notre xoops préféré. Ce hack n'est peut être pas le mieux que l'on puisse faire et mérite certainement d'être amélioré (autre script de détection, optimisation du code...) mais il fonctionne parfaitement.
Testé sur 2.5.5 et 2.5.6 (mais doit pouvoir être simplement adapté aux versions antérieures).Les indications de lignes à insérer ou modifier dans le code correspondent à la version 2.5.6 de xoops.
Le principe est assez simple (même si il a nécessité pas mal de tortures pour mes pauvres neurones afin de le mettre en œuvre):
1- Détecter si le site est visité depuis un appareil mobile.
2- Stocker le résultat dans une variable de session.
3- Rediriger vers un thème mobile si site visité depuis appareil mobile.
4- Créer une variable smarty système utilisable dans tous les templates du site.
5- Piloter le tout depuis les préférences générales d'administration du système.
ATTENTION: Sauvegardez votre site et vos bases avant toutes modifications.1- Récupérer la classe
mobile_detect (Download en haut à gauche de la page) qui permet de détecter les appareils mobiles et copier le fichier mobile_detect.php dans /include.
Cette classe comporte pas mal d'options, je vous laisse le plaisir de les découvrir et éventuellement de les rajouter à mon code.
2- Rajouter dans /include/common.php ligne 88 (dans * Include Required Files *)
include_once $xoops->path('include/mobile_detect.php');
3- Rajouter dans index.php (ligne 24) aprés
include dirname(__FILE__) . DIRECTORY_SEPARATOR . 'mainfile.php';
//hack mobile detect V2
//création variable de session et redirection vers théme approprié si appareil mobile et redirection activée.
if ($xoopsConfig['mobile_active'] ==1) {
$detect = new Mobile_Detect;
if(!$_SESSION['xoopsIsMobile']){
if ($detect->isMobile() ) { // Tous les appareils mobiles.
$_SESSION['xoopsIsMobile'] = 1;
redirect_header( $_SERVER['HTTP_REFERER']."index.php?xoops_theme_select=".$xoopsConfig['mobile_theme'], 0, '');
exit;
}
else { $_SESSION['xoopsIsMobile'] = 0;}
}
}
else { $_SESSION['xoopsIsMobile'] = 0;}
// end hack
4- Ajout des variable de préférences systéme dans la partie administration:
- Dans /module/system/language/french/admin/preferences.php insérer (ligne 34):
define('_MD_AM_MTHEMEACTIVE',"Activer la redirection mobile");
define('_MD_AM_MTHEMEACTIVEDSC',"Permet de rediriger les appareils mobiles vers un théme spécifiquement adapté");
define('_MD_AM_MTHEME',"Thème mobile par défaut");
define('_MD_AM_MTHEMEDSC',"Théme spécifique si la redirection mobile est activée");
- Dans la base de données rajouter dans la table config les deux enregistrement suivants:
>> Attention: ne rien mettre dans conf_id (AUTOINCREMENT) <<conf_modid -> 0
conf_catid -> 1
conf_name -> mobile_active
conf_title -> _MD_AM_MTHEMEACTIVE
conf_value -> 0
conf_desc -> _MD_AM_MTHEMEACTIVEDESC
conf_formtype -> yesno
conf_valuetype -> int
conf_order -> 43
conf_modid -> 0
conf_catid -> 1
conf_name -> mobile_theme
conf_title -> _MD_AM_MTHEME
conf_value -> default
conf_desc -> _MD_AM_MTHEMEDESC
conf_formtype -> theme
conf_valuetype -> other
conf_order -> 44
- Mettre à jour le module systéme- Aller dans administration-> Préférences -> Paramétres généraux et vérifiez en bas de la page (juste avant les options de caches) la présence des deux nouveaux champs.
Pour tester cocher oui pour la redirection mobile et choisir un théme différent de celui par défaut du site.
5- Création de la variable smarty systéme
- Dans /class/theme.php insérer dans la fonction xoInit (ligne 265):
'xoops_ismobile' => htmlspecialchars($_SESSION['xoopsIsMobile'], ENT_QUOTES),
- Dans /include/functions.php insérer dans la function redirect_header (ligne 593):
'xoops_ismobile' => htmlspecialchars($_SESSION['xoopsIsMobile'], ENT_QUOTES),
Ce qui nous permet d'avoir maintenant notre smarty système <{$xoops_ismobile}> utilisable dans tous les templates de tous les modules (et même dans la partie administration).
A utiliser ainsi dans les templates:
<{if $xoops_ismobile == 0}>
Code du template normal ici
<{else}>
Code du template mobile ici
<{/if}>
Il ne vous reste plus qu'à écrire un théme adapté aux mobiles et modifier les templates de vos modules pour que votre site soit enfin visible sur nos petits smartphones ou tablettes.
.
IMPORTANT: Pensez à mettre le thème mobile dans "Thèmes disponibles pour les utilisateurs" dans les paramètres généraux de votre site.
![Open in new window](javascript:CaricaFoto("https://www.frxoops.org/uploads/img51d4abd6295cd.png");)
![Open in new window](javascript:CaricaFoto("/uploads/newbb/14931_5325680ead6ec.png");)
.
Un petit bug peut être ?
