{"id":1113,"date":"2009-10-25T18:36:48","date_gmt":"2009-10-25T17:36:48","guid":{"rendered":"http:\/\/flaven.fr\/?p=1113"},"modified":"2026-09-16T11:49:47","modified_gmt":"2026-09-16T09:49:47","slug":"wordpress-iphone-mobile-afficher-un-wordpress-sur-iphone-ipod-et-android","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2009\/10\/wordpress-iphone-mobile-afficher-un-wordpress-sur-iphone-ipod-et-android\/","title":{"rendered":"WordPress, Iphone, Mobile – Afficher un wordPress sur iPhone, iPod et Android"},"content":{"rendered":"\n


\n
\nLe sujet est d\u2019une br\u00fblante actualit\u00e9, en effet au m\u00eame titre que le blogging sous WordPress a du r\u00e9agir \u00e0 l\u2019h\u00e9morragie li\u00e9 aux pratiques du micro-blogging, le blogging sous WP se doit aussi de faire face \u00e0 l\u2019\u00e9pid\u00e9mie des terminaux mobiles type Iphone ou Android qui bouleverse les usages sur Internet. En effet, c\u2019est aujourd\u2019hui un mode de surf affectionn\u00e9 par un grand nombre d\u2019utilisateurs qui passent indiff\u00e9remment de l\u2019ordinateur au mobile et le nombre ne cesse de croitre. Voici, donc un article sur les diff\u00e9rents modes de r\u00e9cation \u00e0 disposition si vous administrez un blog sous WP et penser faire mouvement vers le mobile.<\/p>\n

Un grand merci \u00e0 Julien Landouar<\/a> qui nous a donn\u00e9 quelques pr\u00e9cieuses pistes sur les plugins existants pour faire exister une version mobile d’un WP.<\/b><\/p>\n

Pour m\u00e9moire, quelques essais avaient \u00e9t\u00e9 men\u00e9s sur un site en Joomla, sans v\u00e9ritable r\u00e9ussite, il faut bien le reconnaitre. Toutefois, si il est \u00e0 tirer un enseignement de cette exp\u00e9rience, c\u2019est que la version mobile se g\u00e8re sur un sous-domaine : http:\/\/iphone.hecube.net\/*<\/code>, http:\/\/mobile.hecube.net\/*<\/code>.
\nCela suppose quand m\u00eame une certaine ma\u00eetrise de ce domaine, ce qui n\u2019est pas toujours la cas, que ce soit sous Joomla ou WordPress.<\/i><\/p>\n

* ces sous-domaines ne sont donn\u00e9s qu\u2019\u00e0 titre d\u2019exemple, ce qui ne fait pas mentir le proverbe « Les cordonniers sont toujours les plus mal chauss\u00e9s »<\/i><\/p>\n

Cr\u00e9er int\u00e9gralement sous WordPress son th\u00e8me Iphone et Mobile<\/h2>\n

On va voir rapidement les principes de cr\u00e9ation d\u2019un th\u00e8me WordPress pour t\u00e9l\u00e9phone mobile et\/ou pour Iphone, Android. C\u2019est une mani\u00e8re “quick and dirty” comme on dit mais qui permet d\u2019obtenir un r\u00e9sultat rapide pour convertir son blog sous WP au format mobile et Iphone, Android.<\/p>\n

\n\t\tCette cr\u00e9ation de z\u00e9ro se scinde en 3 \u00e9tapes :<\/p>\n

    \n
  1. La cr\u00e9ation de deux “Mod\u00e8les” au sein de votre th\u00e8me WordPress. Ces deux fichiers constitueront les 2 destinations vers lequel seront redirig\u00e9s vos visiteurs, munis d\u2019un mobile wap ou d\u2019un mobile Iphone ou un mobile Android<\/li>\n
  2. L’ajout d’une css sp\u00e9cifique pour la page \u00e0 destination UNIQUEMENT des visiteurs munis d\u2019un mobile Iphone ou un mobile Android.<\/li>\n
  3. Un script .php<\/code> de d\u00e9tection des navigateurs de vos visiteurs pour le rediriger automatiquement vers la bonne destination en fonction de leurs mobiles. <\/li>\n<\/ol>\n<\/blockquote>\n

    1. La cr\u00e9ation des fichiers sp\u00e9cifiques mobile.php<\/code> et iphone.php<\/code><\/h4>\n

    \nLes fichiers mobile.php<\/code> et iphone.php<\/code> sont \u00e0 placer dans \/le-repertoire-qui-contient-le-wordpress\/wp-content\/themes\/nom-de-votre-theme\/<\/code>\n<\/p><\/blockquote>\n

    Le code php de la page mobile.php<\/code> \u00e0 joindre \u00e0 votre th\u00e8me<\/b><\/p>\n

    \n\t<?php\n\t    \/*\n\t    Template Name: mobile\n\t    *\/\n\t?>\n\t<html>\n\t    <head>\n\t        <title>Version Mobile d'un blog sous WordPress <?php bloginfo('name'); ?><\/title>\n\t    <\/head>\n\t    <body id=\"version-mobile\">\n\t    <div>\n\t            <h3>Version Mobile d'un blog sous WordPress <?php bloginfo('name'); ?><\/h3>\n\t\t\t\t\t<?php \n\t\t\t\t\t\/* \t*\/\n\t\t\t\t\tprint('<div class=\"description\">'); \n\t\t\t\t\tbloginfo('description'); \n\t\t\t\t\tprint('<\/div>');\n\n\t\t\t\t\t?>\n\n\t<?php\n\t\/* Cette query affiche les 3 derniers articles post\u00e9s dans le blog toutes cat\u00e9gories confondues *\/\n\t                query_posts('showposts=3');\n\t                while (have_posts()) : the_post();\n\t            ?>\n\t        <div>\n\n\t            <h2><?php the_title(); ?><\/h2>\n\n\n\t            <div><?php\n\t\t\t\t\/* La fonction d'affichage du contenu a \u00e9t\u00e9 d\u00e9sactiv\u00e9e *\/\t\t\t\n\n\t \/* the_content(); *\/\n\n\t ?><\/div>\n\t            <p>Publi\u00e9 le <?php the_time('j F Y') ?> par <?php the_author() ?>.<\/p>\n\t            <hr \/>\n\t        <\/div>\n\t        <?php endwhile; ?>\n\n\n\n\t    <\/div>\n\t    <\/body>\n\t<\/html>\n\t\n\t\n<\/pre>\n
    Le d\u00e9but du code pour le template<\/code> de iphone.php<\/code><\/b>
    \nla valeur plac\u00e9 en en-t\u00eate Template Name: iphone<\/code> va donn\u00e9 le nom au template. Ce sera ce nom qui sera disponible dans la menu d\u00e9roulant dans votre outil d’adminsitration de votre blog sous WP.<\/p>\n
    \n\t<?php\n\t    \/*\n\t    Template Name: iphone\n\t    *\/\n\t?>\n\t<html>\n\t    <head>\n\t        <title>Version Mobile d'un blog sous WordPress <?php bloginfo('name'); ?><\/title>\n\t\n\t\t\t<link media=\"only screen and (max-device-width: 480px)\" href=\"http:\/\/www.jimramsey.net\/iphone.css\" type=\"text\/css\" rel=\"stylesheet\" \/>\n\t\n\t    <\/head>\n\t    <body id=\"version-mobile\">\n\t    <div>\n\t<!-- le code vient ici -->\n\t\n<\/pre>\n
    \tLors de la cr\u00e9ation d’une page, il faut lui affecter le template<\/b> mobile<\/code><\/b>
    \n\"Wordpress,<\/p>\n
    Vous avez d\u00e9sormais 2 destinations pour les mobiles  : d’un cot\u00e9 l’internet en noir et blanc pour les bouffeurs de wap et de l’autre l\u2019internet ++ en couleurs<\/b><\/p>\n
    Une fois les deux fichiers con\u00e7us<\/b><\/p>\n
    2. La cr\u00e9ation de la CSS pour iphone.php<\/code><\/h4>\n
    Pour rehausser le webdesign de la page pour iphone\/android, rien de tel qu’un fichier .css<\/code> pour am\u00e9liorer l’affichage. En cherchant un peu sur le web, vous trouverez faclement des exemples dont celui de Jim Ramsey<\/b> qui s’est interress come webdesigner \u00e0 cette question de l’affichage sous iphone. C’est un bon d\u00e9but pour personnaliser ensuite votre ffcihage.<\/p>\n
    Le chargement de cette css iphone dans une page web<\/b><\/p>\n
    \n<link media="only screen and (max-device-width: 480px)" href="http:\/\/www.jimramsey.net\/iphone.css" type="text\/css" rel="stylesheet" \/>\n<\/pre>\n
    Un exemple de .css<\/code> pour iphone<\/b><\/p>\n
    \n\/* This stylesheet is for Mobile Safari only *\/\n\n\/* Reset ------------------------------------------------------------------ *\/\n\nbody {\n    background-color: #fff;\n    -webkit-text-size-adjust: none;\n}\n\nhtml, body, div, p, hr,\nh1, h2, h3, h4, h5, h6,\nul, ol, li, dl, dt, dd,\nblockquote, pre, th, td,\nform, fieldset, input,\nselect, textarea {\n    margin: 0;\n    padding: 0;\n}\n\nh1, h2, h3, h4, h5, h6 {\n    font-size: 100%;\n    font-weight: normal;\n}\n\nol, ul { list-style: none; }\n\na img { border: 0; }\n\nbody, input, select, textarea {\n    font: 18px Helvetica, sans-serif;\n}\n\n\n\n#beta {\n    display: none;\n}\n<\/pre>\n
    Source : http:\/\/www.jimramsey.net\/<\/a><\/i><\/p>\n
    3. La cr\u00e9ation d’un script .php<\/code> d’autodetect<\/h4>\n
    Un usage du script si vous utilisez l’outil de configuration en ligne mis \u00e0 disposition par les cr\u00e9ateurs  du script.<\/b><\/p>\n
    \n\tinclude('mobile_device_detect.php');\n\tmobile_device_detect(false,true,true,true,true,true,false,false);\n<\/pre>\n
    Source : http:\/\/detectmobilebrowsers.mobi\/<\/a><\/i><\/p>\n
    Source dans header.php<\/code> dans votre th\u00e9me WP<\/b>
    \nVoil\u00e0 plut\u00f4t la partie int\u00e9ressante, \u00e0 savoir l’int\u00e9gration de ce d\u00e9tecteur dans le th\u00e8me par d\u00e9faut livrer avec Worpdress.<\/p>\n
    \n\t\n\t<?php\n\t\/**\n\t * @package WordPress\n\t * @subpackage Default_Theme\n\t *\/\n\t?>\n\t<?php\n\tinclude('mobile_device_detect.php');\n\t$mobile = mobile_device_detect();\n\n\t\/\/ le retour d'un simple bol\u00e9en true or false qui fait echo !\n\tif($mobile==true){\n\t  echo 'Vous utilisez un mobile';\n\t}else{\n\t  echo 'Vous \u00eates sur un navigateur traditionnel';\n\t}\n\n\t\/\/ redirection de tous les mobiles vers le site mobile et de tout le reste vers la site normal\n\t\/*\n\tif($mobile==true){\n\t  header('Location:http:\/\/mobile.mon-nom-de-domaine.fr');\n\t}else{\n\t  header('Location:http:\/\/www.mon-nom-de-domaine.fr');\n\t}\n\n\texit;\n\t*\/\n\n\t?>\n\t\n<\/pre>\n
    Le d\u00e9tection fonctionne, le message s\u2019affiche pour indiquer que vous \u00eatres bien sur un navigateur traditionnel.<\/b>
    \n\"Wordpress,<\/p>\n
    Si, via le User Agent Switcher<\/code>, la d\u00e9tection fonctionne, le message s\u2019affiche pour indiquer que vous \u00eatres bien sur un navigateur sur mobile. All\u00e9luia !<\/b>
    \n\"Wordpress,<\/p>\n
    \n\tUltime conclusion, comme souvent, par manque de temps, nous ne prenons pas le temps de finaliser la cr\u00e9ation  du th\u00e8me n\u00e9anmoins les principes sont l\u00e0 pour r\u00e9aliser vous m\u00eame et sur mesure le th\u00e8me iphone\/android de vos r\u00eaves. Dans un souci d\u2019efficacit\u00e9, nous pr\u00e9conisons quand m\u00eame l\u2019usage de plugins existants. Cela tombe bien, c’est la partie qui vient ensuite !\n<\/p><\/blockquote>\n
    Les solutions “cl\u00e9 en main” sous WordPress<\/H1><\/p>\n
    1. L’ensemble theme et plugin iWPhone WordPress Plugin and Theme<\/code><\/h2>\n
    Une fois le dossier d\u00e9zipp\u00e9, vous vous retrouvez avec un r\u00e9pertoire nomm\u00e9 iwphone-wordpress-plugin-and-theme<\/code>. A l’int\u00e9rieur de ce r\u00e9pertoire, vous trouvez :<\/p>\n