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'avec 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'accueil 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'activer 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'éventuelle 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'importe 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'utiliser 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'accueil person­na­li­sée : j'ai créé pour mon site prin­ci­pal une page d'accueil. 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'afficher les images, ça existe, j'en ai un comme ça).

Options

Rendu visuel

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]