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 respon­sive.

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­pondent et tout devrait fonc­tion­ner. Je ne mets pas le lien parce que je ne veux pas lui faire de publi­ci­té.

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 propo­sé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 confor­table.

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 conte­nu person­na­li­sé : même chose pour les articles 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 à modi­fier.

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

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/.

– 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

Si vous avez trou­vé une faute d’orthographe, infor­mez-nous en sélec­tion­nant le texte en ques­tion et en appuyant sur Ctrl + Entrée.

8 réponses sur “ Proposer automatiquement un thème pour les téléphones mobiles ”
  1. Bonjour,
    j’utilise 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’erreur en l’installant. 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’expectative. Je pense m’orienter 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’éviter d’installer 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 respon­sive

  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)

Laisser un commentaire

Votre adresse de messagerie 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.

Aucun support n’est fourni pour les extensions testées. Vous pouvez utiliser Markdown pour les commentaires.