Proposer automatiquement un thème pour les téléphones mobiles

On ne peut pas dire que je sois un grand amateur de télé­pho­nie mobile mais il faut bien se faire une raison : d’après mes statis­tiques, certains de mes sites voient passer jusqu’à 10% de visi­teurs qui surfent avec leur télé­phone. Il se trouve que le thème de mon site prin­ci­pal n’était pas du tout mais alors pas du tout « mobile-friend­ly ». Je me suis donc déci­dé à trou­ver une solu­tion qui marche. Mais il faut recon­naître qu’a­vec le déve­lop­pe­ment des solu­tions payantes, les plugins tout en un qui ne veulent pas fonc­tion­ner, il est compli­qué de trou­ver chaus­sure à son pied.

Si votre thème est respon­sive (en gros, il est fluide et s’adapte à la largeur de l’écran du visi­teur), vous pouvez le garder tel quel, ça reste­ra très lisible pour un mobile. Dans ce cas là, un thème spéci­fique mobile n’est inté­res­sant que parce qu’il simpli­fie énor­mé­ment l’ac­cueil et la navi­ga­tion et votre site sera proba­ble­ment beau­coup plus léger à char­ger ce qui est un avan­tage non négli­geable pour les mobiles. Remarque : Twen­ty Twelve, un des thèmes offi­ciels de Word­Press est responsive. 

Jetpack

Le très popu­laire, très fourre-tout, très usine à gaz plugin d’Auto­mat­tic. Il suffit d’ac­ti­ver le module corres­pon­dant et tout devrait fonc­tion­ner. Je ne mets pas le lien parce que je ne veux pas lui faire de publicité.

Avantages

Une solu­tion toujours adap­tée à Word­Press et dont le suivi est garan­ti à 100%.

Inconvénients

Le thème utili­sé n’est pas instal­lé comme un thème normal mais inté­gré au plugin. Les modi­fi­ca­tions person­nelles sur ce thème seront à refaire à chaque mise à jour.

Les plugins tout en un avec inscription

De nombreux sites proposent de prendre le relais lorsque votre visi­teur mobi­lé débarque sur votre site et affichent une version adap­tée. Vous instal­lez votre plugin, vous vous inscri­vez au site corres­pon­dant et c’est tout.

Avantages

Ces services proposent des présen­ta­tions adap­tées à chaque mobile et des possi­bi­li­tés éten­dues – inser­tion de publi­ci­té adap­tée, choix divers de thèmes…

Inconvénients

C’est payant :-( Pas de person­na­li­sa­tion des thèmes hors options proposées).

Les plugins tout intégré

Ils détectent si le visi­teur est mobi­lé et affiche un des thèmes inté­grés au plugin. C’est le même prin­cipe que pour Jetpack.

Avantages et inconvénients

La même chose que pour Jetpack. Ils proposent souvent des thèmes plus attrayants que ce dernier voire plusieurs thèmes mais toute modi­fi­ca­tion est perdue lors d’une mise à jour. Les plus popu­laires proposent une version payante qui permet plus de souplesse… et dans le cas d’un d’entre eux, de suppri­mer la publi­ci­té ajou­tée d’office !

Les switchers

Sous ce nom barbare, je classe les plugins qui recon­naissent que le visi­teur est mobi­lé et qui affichent alors un thème spécial que vous aurez instal­lé aupa­ra­vant et que vous choi­sis­sez dans les options.

Avantages

Puisque le thème est instal­lé de manière clas­sique, vous pouvez le gérer indé­pen­dam­ment et il n’est pas affec­té par l’éven­tuelle mise à jour du plugin.

Inconvénients

S’il n’est pas mis à jour, il risque ne pas savoir gérer de nouveaux modèles de mobiles.

Les thèmes

En fait, n’im­porte quel thème dit « respon­sive » est adap­té aux mobiles. Ces thèmes sont fluides et s’adaptent à la largeur de l’écran, il permettent donc une lecture aisée sur ces supports. Néan­moins, ils ne rempla­ce­ront pas un thème conçu spéci­fi­que­ment pour cet usage qui est ergo­no­mi­que­ment plus confortable.

La solution que j’ai choisie

J’ai fina­le­ment opté pour la solu­tion switcher+thème person­na­li­sé. Pour le plugin, après quelques tests, je me suis rabat­tu sur Device Theme Swit­cher (cf. plus bas) qui avait l’air de bien fonc­tion­ner. Le thème choi­si est Carring­ton Mobile qui, s’il est âgé et pas très sexy, est conçu spéci­fi­que­ment pour les mobiles et, point impor­tant, n’est pas payant ! Je pense que l’on doit pouvoir récu­pé­rer faci­le­ment le thème de Jetpack et l’uti­li­ser comme un thème clas­sique mais je n’ai pas testé.

Mise à jour du 21 août 2013 : je suis fina­le­ment passé à un thème respon­sive pour mieux maîtri­ser la présen­ta­tion sous smart­phone et tablette. Vous pouvez lire mes déboires à ce sujet ici.

Précisions utiles

Instal­ler un thème n’est pas tout. Si vous avez fait de nombreuses person­na­li­sa­tions sur votre thème prin­ci­pal et votre site, il faudra penser à mettre à niveau le thème mobile.

  • la page d’ac­cueil person­na­li­sée : j’ai créé pour mon site prin­ci­pal une page d’ac­cueil. Heureu­se­ment, j’ai suivi les recom­man­da­tions de créa­tion de thèmes Word­Press pour ce faire et le template utili­sé est appe­lé par le fichier front-page.php. Il a suffit de créer un fichier du même nom dans le thème mobile en reco­piant le conte­nu de index.php de ce même thème. Cette mani­pu­la­tion n’a pas fonc­tion­né sur un thème mobile testé.
  • pas de menu inté­gré dans Carring­ton Mobile, il a fallut que je corrige ça.
  • les templates de pages : certaines pages ont un template spéci­fique. Il a fallut penser à les rajou­ter dans le nouveau thème.
  • template de type de billet person­na­li­sé : même chose pour les billets de type person­na­li­sé qui béné­fi­ciaient de leur propre template.

Comme vous le voyez, faire une version mobile peut deman­der du travail et méfiez vous des thèmes à option spéci­fiques aux mobiles qui peuvent se révé­ler compli­qués à modifier.

Device Theme Switcher

Device Theme Swit­cher recon­naît le visi­teur mobi­lé et propose de choi­sir un thème spéci­fique pour les mobiles clas­siques, les tablettes ou les mobiles à texte (qui ne permettent pas d’af­fi­cher les images, ça existe, j’en ai un comme ça).

Options

mobile-theme-switcher

Rendu visuel

site normal
site normal

mobile-site
site en version mobile

Si vous avez un mobile, vous pouvez regar­dez le résul­tat sur mon site http://​www​.li​-an​.fr/​b​l​og/.

[notice type=notice]
– compa­ti­bi­li­té à ce jour : WP 3.0 > WP 3.4.2 (fonc­tionne sous WP 3.5.1)
– version testée : 1.8
[/​notice]

Abon­­nez-vous par mail à l’Écho des Plugins
Vous rece­vrez un mail pour vous préve­nir de chaque nouvel article publié sur ce blog

Ceci peut vous intéresser

10 commentaires

  1. Bonjour,
    j’uti­lise pour le site de notre asso­cia­tion le plugin : Word­Press Mobile Edition avec le thème Carrin­ton mobile depuis quelques temps. Dans les options du plugin l’on peut ajou­ter des navi­ga­teurs compa­tibles. Voir démo sur le site : labeille49​.fr

  2. Bon, le concept de Word­Press Mobile Edition me plai­sait bien mais j’ai droit à un message d’er­reur en l’ins­tal­lant. Je ne vais pas aller plus loin ;-)

  3. C’est vrai que les visites mobiles viennent très vite, et pour ma part, j’en suis encore au stade de l’ex­pec­ta­tive. Je pense m’orien­ter aussi vers la solu­tion swit­cher, avec un thème égale­ment très épuré.
    Merci pour cet article qui dresse la liste des ques­tions à se poser avant de mettre en ligne une solu­tion mobile pour son blog !

  4. Tiens, je ne l’ai pas dit mais en fait, avoir un thème « respon­sive » permet d’évi­ter d’ins­tal­ler un thème spéci­fi­que­ment mobile.

  5. Le web étant mon acti­vi­té pro, respon­sive c’est bien, mais toujours la même ques­tion, avec la largeur des écran de mobile un site normal et déjà perfor­mant nati­ve­ment est aussi bien que de nouveau un plugin et autre et ne désta­bi­lise pas le lecteur habi­tuel dans ces recherches. Nous avions déjà tenu avec d’autre adepte de word­press cette conver­sa­tion au début du responsive

  6. Bonjour
    de nos jour Word­Press Mobile Edition n’est pas la bonne solution,puisque ils n’ont pas fait de mise a jour cas fait 6 ans, WPtouch et Jetpack les bonnes solu­tion qui reste (au moins pour moi :D)

  7. Au faites souvent on vois sur le mobile « affi­chage ordi­na­teur » existe t« il un plugin qui peut le faire pour ne pas a chaque fois venir active ce mode

    • Bonjour, je suppose qu’il suffi­rait d’un thème qui n’ait pas de fonc­tion­na­li­té d’affichage mobile (puisqu’en fait le thème s’adapte une fois la taille de l’écran détec­tée). Ou alors un thème conçu exclu­si­ve­ment pour mobile et qui montre­rait donc toujours la même chose.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Notifiez-moi les commentaires à venir via email. Vous pouvez aussi vous abonner sans commenter.

Ce site embarque des cookies pour vous offrir la meilleur expérience possible

Spelling error report

The following text will be sent to our editors: