Fork me on GitHub






bendenice
Choisir un thème spécifique pour les mobiles
#1
Supporter Xoops
Inscrit: 17/12/2005 01:41
De Alpes Maritimes
Messages: 1682
Allez comme celui la est dans la continuité du premier tuto je vous le donne mais ça doit traîner dans un coin (voir plusieurs ) sur le forum

Niveau de difficulté : Open in new window
facile

But: Afficher un thème spécifique pour les mobile

Pour cela on va utiliser la class php Mobile_Detect

avec cette classe nous pouvons tester
l'os du navigateur (android ou apple)
le type de support (mobile ou tablette)

Commençons par inclure et instancié la classe dans le fichier header.php Au niveau de la ligne 32 juste après

$xoopsLogger->startTime('XOOPS output init');


en copiant le code

include("Mobile_Detect.php");
$detect = new Mobile_Detect();


Grâce à cette classe nous allons pouvoir maintenant afficher un thème

* En fonction de la plateforme mobile
pour les téléphone Apple on insérera le code suivant
if($detect->isiOS()){ // Téléphone tournant sous la plateforme iOS (apple).
$xoopsConfig['theme_set'] = 'montheme_apple';
}


pour les téléphone Android on insérera le code suivant
if($detect->isAndroidOS()){ // Téléphone tournant sous la plateforme Android.
$xoopsConfig['theme_set'] = 'montheme_android';
}



* En fonction de mobile ou tablette
pour les mobiles on insérera le code suivant
if ($detect->isMobile()) {// tous les mobiles
$xoopsConfig['theme_set'] = 'montheme_mobile';
}


pour les tablettes on insérera le code suivant
if ($detect->isTablet()) {// tablettes
$xoopsConfig['theme_set'] = 'montheme_tablette';
}



En espérant que ce petit tuto vous serve.
N’hésitez pas a me faire part de vos remarques

Posté le : 11/09/2012 15:48
Partager Twitter Partagez cette article sur GG+
Rapport Haut
flaggada
Re: Choisir un thème spécifique pour les mobiles
#2
Régulier
Inscrit: 29/03/2007 17:04
Messages: 343
Cool, merci pour ce résumé!

Posté le : 12/09/2012 09:11

http://www.orthodontie-fr.com et pan dans les dents
Partager Twitter Partagez cette article sur GG+
Rapport Haut
grosdunord
Re: Choisir un thème spécifique pour les mobiles
#3
Semi pro
Inscrit: 01/08/2005 19:06
Messages: 1851
il y a aussi cette solution

dans header.php de xoops en dessous de

$xoopsPreload->triggerEvent('core.header.start');


insérer ceci :

// debut detection mobile include(XOOPS_ROOT_PATH.'/class/Mobile_Detect.php'); $detect = new Mobile_Detect();  if ($detect->isMobile()) {     $si_mobile = true; } else {    $si_mobile = false; }     // fin detection mobile



ensuite toujours dans header.php en dessous de :

$xoopsLogger->startTime('XOOPS output init');


inserer ceci :

if ($si_mobile) {   $xoopsConfig['theme_set'] = 'mobile'; }


Enregistrer et envoyer le fichier header.php sur votre ftp.

Pour finir voici le fichier Mobile_Detect.php à mettre dans le dossier class qui ce trouve a la racine de votre site Xoops


http://www.envoyercefichier.com/files/D3O3W21347465323.html

Posté le : 12/09/2012 18:00
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Elvera
Re: Choisir un thème spécifique pour les mobiles
#4
Newbie
Inscrit: 13/09/2012 16:46
Messages: 10
Bonjour,

bonne initiative : est-ce compliqué d'afficher une version du site pour les mobiles ou les tables en jouant sur les media queries CSS ?

merci

Posté le : 14/09/2012 11:35
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Grom
Re: Choisir un thème spécifique pour les mobiles
#5
Team FrXoops
Inscrit: 07/08/2006 13:03
Messages: 1737
Salut, j'ai une question :
Si j'applique une des deux solutions, que se passe-t-il pour l'utilisateur qui ne veut pas afficher le theme "mobile" ?
Ou l'admin, qui veut gerer son site avec sa tablette ou son smartphone ?

En tout cas merci pour ce joli tuto !

Posté le : 16/09/2012 22:03

Witness
Rochetoirin
Edoryk
Les machines a coudre de Patricia
Association Musicale Vivaldi Nord Isere
...
Partager Twitter Partagez cette article sur GG+
Rapport Haut
grosdunord
Re: Choisir un thème spécifique pour les mobiles
#6
Semi pro
Inscrit: 01/08/2005 19:06
Messages: 1851
Citation :
bonne initiative : est-ce compliqué d'afficher une version du site pour les mobiles ou les tables en jouant sur les media queries CSS ?


il suffit de suivre les normes mobiles comme indiquer içi par exemple :

http://www.alsacreations.com/astuce/l ... e-pour-le-web-mobile.html

Citation :
Si j'applique une des deux solutions, que se passe-t-il pour l'utilisateur qui ne veut pas afficher le theme "mobile" ? Ou l'admin, qui veut gerer son site avec sa tablette ou son smartphone ?


Bonne question mais je ne suis pas encore attelé à ce genre de probléme car je suis encore sur l'adaptation du template mobile mais avec jquery mobile il et possible de mettre un bouton ou un lien pour refusé l'action de pasé en version mobile par exemple je vient de voir ceci

Citation :
Redirection avec PHP Cette méthode est peut-être plus intéressante dans le sens où vous pourrez contrôler la redirection : vous aurez ainsi la possibilité d'ajouter un lien permettant au visiteur de revenir à la version classique, ou de continuer vers la version mobile. On va se baser ici, une fois encore, sur les user-agents, que l'on récupérera avec une variable superglobale, qui est $_SERVER['HTTP_USER_AGENT']. Il suffira de chercher une chaîne de caractères précise à l'intérieur pour déterminer sur quel smartphone navigue l'internaute, à l'aide la fonction strpos() qui retourne la position numérique de la première occurrence trouvée.


exemple de code php :

<?php  // on cherche un user-agent apparenté à une plateforme mobile dans la variable $iphone = strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone'); $ipad = strpos($_SERVER['HTTP_USER_AGENT'], 'iPad'); $android = strpos($_SERVER['HTTP_USER_AGENT'], 'Android'); $blackberry = strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry');  // puis on détermine si une chaîne de caractères a été trouvée if($iphone || $ipad || $android || $blackberry > -1){     header('Location: http://www.votre-site.com/votre-fichier-mobile.html'); // si c'est le cas, on redirige     die; // puis on arrête le chargement de la page actuelle }  ?>

Posté le : 16/09/2012 22:37
Partager Twitter Partagez cette article sur GG+
Rapport Haut
bendenice
Re: Choisir un thème spécifique pour les mobiles
#7
Supporter Xoops
Inscrit: 17/12/2005 01:41
De Alpes Maritimes
Messages: 1682
Citation :
Grom a écrit :
Si j'applique une des deux solutions, que se passe-t-il pour l'utilisateur qui ne veut pas afficher le theme "mobile" ?
Ou l'admin, qui veut gerer son site avec sa tablette ou son smartphone ?


On peut simplement rajouter dans le footer un liens du type affichage standard me rappel plus le code mais je peux le rechercher si besoin

Posté le : 17/09/2012 13:57
Partager Twitter Partagez cette article sur GG+
Rapport Haut
bendenice
Re: Choisir un thème spécifique pour les mobiles
#8
Supporter Xoops
Inscrit: 17/12/2005 01:41
De Alpes Maritimes
Messages: 1682
J'ai oublié de préciser il faut utiliser le fichier php proposé par grosdunord pour le tuto.
Les deux solutions sont exactement les mêmes la technique de Grosdunord fait juste appelle a une variable si_mobile incrémenter grâce au code fourni au dessus

Posté le : 17/09/2012 15:45
Partager Twitter Partagez cette article sur GG+
Rapport Haut

 Haut   Précédent   Suivant



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

65 Personne(s) en ligne (50 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 65 | Plus ...