Pro­po­ser auto­ma­ti­que­ment un thème pour les télé­phones mobiles

On ne peut pas dire que je sois un grand ama­teur de télé­pho­nie mobile mais il faut bien se faire une rai­son : d’après mes sta­tis­tiques, cer­tains de mes sites voient pas­ser 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 plu­gins tout en un qui ne veulent pas fonc­tion­ner, il est com­pli­qué de trou­ver chaus­sure à son pied.

Si votre thème est res­pon­sive (en gros, il est fluide et s’adapte à la lar­geur de l’écran du visi­teur), vous pou­vez le gar­der tel quel, ça res­te­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 sim­pli­fie énor­mé­ment l’accueil et la navi­ga­tion et votre site sera pro­ba­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. 

Jet­pack

Le très popu­laire, très fourre-tout, très usine à gaz plu­gin d’Auto­mat­tic. Il suf­fit d’activer le module cor­res­pondent et tout devrait fonc­tion­ner. Je ne mets pas le lien parce que je ne veux pas lui faire de publicité.

Avan­tages

Une solu­tion tou­jours adap­tée à Word­Press et dont le sui­vi est garan­ti à 100%.

Incon­vé­nients

Le thème uti­li­sé n’est pas ins­tal­lé comme un thème nor­mal mais inté­gré au plu­gin. Les modi­fi­ca­tions per­son­nelles sur ce thème seront à refaire à chaque mise à jour.

Les plu­gins tout en un avec inscription

De nom­breux sites pro­posent de prendre le relais lorsque votre visi­teur mobi­lé débarque sur votre site et affichent une ver­sion adap­tée. Vous ins­tal­lez votre plu­gin, vous vous ins­cri­vez au site cor­res­pon­dant et c’est tout.

Avan­tages

Ces ser­vices pro­posent des pré­sen­ta­tions adap­tées à chaque mobile et des pos­si­bi­li­tés éten­dues – inser­tion de publi­ci­té adap­tée, choix divers de thèmes…

Incon­vé­nients

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

Les plu­gins tout intégré

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

Avan­tages et inconvénients

La même chose que pour Jet­pack. Ils pro­posent sou­vent des thèmes plus attrayants que ce der­nier voire plu­sieurs thèmes mais toute modi­fi­ca­tion est per­due lors d’une mise à jour. Les plus popu­laires pro­posent une ver­sion payante qui per­met plus de sou­plesse… et dans le cas d’un d’entre eux, de sup­pri­mer la publi­ci­té ajou­tée d’office !

Les swit­chers

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

Avan­tages

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

Incon­vé­nients

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

Les thèmes

En fait, n’importe quel thème dit “res­pon­sive” est adap­té aux mobiles. Ces thèmes sont fluides et s’adaptent à la lar­geur de l’écran, il per­mettent donc une lec­ture aisée sur ces sup­ports. Néan­moins, ils ne rem­pla­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 solu­tion que j’ai choisie

J’ai fina­le­ment opté pour la solu­tion switcher+thème per­son­na­li­sé. Pour le plu­gin, 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 Car­ring­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 pou­voir récu­pé­rer faci­le­ment le thème de Jet­pack 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 pas­sé à un thème res­pon­sive pour mieux maî­tri­ser la pré­sen­ta­tion sous smart­phone et tablette. Vous pou­vez lire mes déboires à ce sujet ici.

Pré­ci­sions utiles

Ins­tal­ler un thème n’est pas tout. Si vous avez fait de nom­breuses per­son­na­li­sa­tions sur votre thème prin­ci­pal et votre site, il fau­dra pen­ser à mettre à niveau le thème mobile.

  • la page d’accueil per­son­na­li­sée : j’ai créé pour mon site prin­ci­pal une page d’accueil. Heu­reu­se­ment, j’ai sui­vi les recom­man­da­tions de créa­tion de thèmes Word­Press pour ce faire et le tem­plate uti­li­sé est appe­lé par le fichier front-page.php. Il a suf­fit 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 Car­ring­ton Mobile, il a fal­lut que je cor­rige ça.
  • les tem­plates de pages : cer­taines pages ont un tem­plate spé­ci­fique. Il a fal­lut pen­ser à les rajou­ter dans le nou­veau thème.
  • tem­plate de type de conte­nu per­son­na­li­sé : même chose pour les articles de type per­son­na­li­sé qui béné­fi­ciaient de leur propre template.

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

Device Theme Switcher

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

Options

mobile-theme-switcher

Ren­du visuel

site normal
site nor­mal
mobile-site
site en ver­sion mobile

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


– com­pa­ti­bi­li­té à ce jour : WP 3.0 > WP 3.4.2 (fonc­tionne sous WP 3.5.1)
– ver­sion tes­tée : 1.8

Par­ta­gez

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 s’il vous plaît,.

8 réponses sur “ Pro­po­ser auto­ma­ti­que­ment un thème pour les télé­phones mobiles ”
  1. Bon­jour,
    j’utilise pour le site de notre asso­cia­tion le plu­gin : Word­Press Mobile Edi­tion avec le thème Car­rin­ton mobile depuis quelques temps. Dans les options du plu­gin l’on peut ajou­ter des navi­ga­teurs com­pa­tibles. Voir démo sur le site : labeille49​.fr

  2. Bon, le concept de Word­Press Mobile Edi­tion me plai­sait bien mais j’ai droit à un mes­sage 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 aus­si vers la solu­tion swit­cher, avec un thème éga­le­ment très épuré.
    Mer­ci 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 “res­pon­sive” per­met d’éviter d’installer un thème spé­ci­fi­que­ment mobile.

  5. Le web étant mon acti­vi­té pro, res­pon­sive c’est bien, mais tou­jours la même ques­tion, avec la lar­geur des écran de mobile un site nor­mal et déjà per­for­mant nati­ve­ment est aus­si bien que de nou­veau un plu­gin et autre et ne désta­bi­lise pas le lec­teur 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. Bon­jour
    de nos jour Word­Press Mobile Edi­tion n’est pas la bonne solution,puisque ils n’ont pas fait de mise a jour cas fait 6 ans, WPtouch et Jet­pack 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.