-->

Adapter votre blog aux mobiles, à l’iPhone et à l’iPod Touch

Vendredi 16 novembre 2007 8 réactions

Logo Wordpress Mobile & iPhone

Si vous avez déjà surfé sur mon blog depuis votre téléphone (ou pocket pc) vous avez du remarquer que celui-ci est adapté aux terminaux mobiles. Mais si vous avez également surfé depuis votre iPhone ou votre iPod Touch, vous avez du remarquer aussi qu’il s’y adapte, avec un thème spécifique aux 2 appareils.

Je vais donc vous expliquer comment, simplement, faire de même avec votre blog Wordpress.

Etape 1 : télécharger les 2 plugins

Pour commencer, il vous faut télécharger les 2 plugins WordPress suivants :
- Wordpress Mobile : permet d’adapter votre blog à n’importe quel apareil mobile.
- iWPhone : permet d’adapter votre blog aux iPhones & iPod Touch

Attention cependant, iWPhone n’est pas compatible avec le plugin WP-Cache.

Etape 2 : empêcher Wordpress Moble de s’activer pour l’iPhone et l’iPod Touch

Le problème étant que si vous installez les 2 plugins, Wordpress Mobile considèrera l’iPhone et l’iPod Touch comme des appareils mobiles (logique !) et prendra le dessus sur iWPhone.

Il vous faut donc modifier Wordpress Mobile pour qu’il ne prenne pas en compte les appareils d’Apple.

Pour cela, c’est très simple, ouvrez wordpress-mobile.php dans un éditeur de texte (le bloc-note par exemple, ou un éditeur de code au mieux).

Recherchez la ligne suivante (ligne 64 normalement) :

function mobile_plugin_auto_detect(){

Puis, ajoutez à la ligne suivante (faites un saut de ligne après la ligne indiquée ci-dessus) :

if(preg_match('/(iPhone|iPod)/i',strtolower($_SERVER['HTTP_USER_AGENT']))){return false;}

Si vous vous y êtes bien pris, cela devrait ressembler à ceci :

// function to auto detect mobile phone - based on a number of methods
// this is the function that works out if it's a normal browser or a mobile browser
// more info on theory behind this: <a href="http://www.andymoore.info/php-to-detect-mobile-phones/">http://www.andymoore.info/php-to-detect-mobile-phones/</a>
function mobile_plugin_auto_detect(){
if(preg_match('/(iPhone|iPod)/i',strtolower($_SERVER['HTTP_USER_AGENT']))){return false;}
// initialise a value at zero
$mobile_browser = '0';

Etape 3 : copier & installer

Une fois les modifications effectuées, vous enregistrez, puis vous copiez les 2 plugins dans votre dossier « Plugins»  de votre blog.

Activez-les ensuite via l’administration de WordPress, et enjoy ! ;)

Informations & Liens

Utilisez les liens suivants pour être au courant des réactions à cet article, diffuser cet article et voir les autres articles de la même catégorie.

Informations

Flux RSS & Liens

Catégorie(s)

Tags / Mots-clés

Autres Articles

Commentaires

#1
Répondre à ce commentaire
GR
Vendredi 16 novembre 2007 à 11:30

En effet ça rend assez bien sur l’iPhone :)

#2
Répondre à ce commentaire
GR
Vendredi 16 novembre 2007 à 11:31

Ayé la machine est relancée…
Je surveillais mon netvibes en me disant : mon dieu, il poste toujours pas, bah alors xD

Bon bref…
Faudrait déjà que je fasse la dernière màj de WP moi hein…

#3
Répondre à ce commentaire
alexander
GR
Mardi 27 novembre 2007 à 18:36

Même avec une parfaite maîtrise des CSS il est tout de même conseillé de créer une version du site spécifique à l’iPhone.
Comment faire pour que l’iPhone détecte le site adapté ?

#4
Répondre à ce commentaire
GR
Jeudi 29 novembre 2007 à 10:53

Neovov: Ca rend bien, mais je me demande si je préfère pas en version normal, finalement :P

Poc: Oui j’avais plus trop de temps ni l’envie de faire des articles ^^

Alexander: ce n’est pas l’iPhone qui détecte le site adapté mais le site qui détecte si l’utilisateur navigue via un iPhone. Et le code est fourni dans l’article, le 2e bloc ;)

#5
Répondre à ce commentaire
GR
Vendredi 30 novembre 2007 à 18:38

Installé sur mon blog! Merci ;)

#6
Répondre à ce commentaire
GR
Samedi 2 février 2008 à 14:50

Les 2 plugins activés simultanément n’ont nécessité sur mon site aucune adaptation. Les HTTP users agents sont correctement gérés navitement.

Voir la comparaison des 2 versions mobiles sur

Trackback

Ajoutez un commentaire

Prenez un moment pour commenter cet article et me dire ce que vous pensez. Quelques commandes classiques de formatage HTML sont autorisées :
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> .