Transformer un site WordPress en site mobile facilement avec WPtouch

rédigé par Jean-Baptiste, le novembre 29, 2014

Benjamin, blogueur et entrepreneur dans le secteur du bien-être, après avoir « littéralement dévoré » mon livre en « sacrifiant pour la bonne cause quelques heures de sommeil » m’a posé récemment par mail quelques questions sur le plugin WPtouch. Un plugin WordPress gratuit qui permet de remplacer un thème prévu pour une consultation PC / Mac par un thème optimisé pour une lecture sur mobile.

tuto-wptouch

 

Comme je sais que mes réponses sont susceptibles d’intéresser plus d’un lecteur, j’ai décidé de les partager ici en vous livrant un tutoriel complet sur WPtouch. Grâce à mon tuto, vous allez savoir comment afficher des images miniatures près de vos articles, afficher un carousel en page d’accueil, personnaliser votre design, rajouter un tracker google analytics sur toutes vos pages mobile, et permettre l’abonnement à votre newsletter.

Au sommaire :

  1. Pourquoi vous devez avoir absolument un site optimisé mobile ?
  2. Pré-requis pour ce tuto
  3. Afficher des images miniatures près des articles
  4. Afficher un carousel en page d’accueil
  5. Personnaliser le design
  6. Permettre l’abonnement à votre newsletter
  7. Suivre l’audience de votre site mobile

 

Pourquoi vous devez avoir absolument un site optimisé mobile ?

 

12 % des lecteurs de BlogBuster.fr sont derrière un mobile. Il doit en être certainement de même avec votre audience. Les blogs cuisine ou sorties qui se consultent plus naturellement loin du bureau peuvent avoir des taux de consultation mobile supérieur à 30 %.

audience-mobile-blogbuster

 

Pour ne pas vous privez d’1/3 de vos lectorat, il convient donc d’adapter l’affichage de vos sites sur écrans mobile. Ceci peut passer par la mise en place d’un thème responsive web design ou la création d’un thème spécifique mobile à afficher seulement quand vos lecteurs se trouvent derrière un mobile. C’est ce que permet WPtouch et c’est ce que nous allons creuser ici.

Pré-requis pour ce tuto

 

Pour réaliser ce tuto, vous aurez besoin :

Pour paramétrer WPtouch, une fois installé, rendez-vous dans le menu gauche de WordPress sur l’entrée WPtouch

WPtouch-menu

Dans WPtouch > Thèmes et extensions, laissez le thème gratuit de base installé « Bauhaus »

theme bauhaus

 

Afficher des images miniatures près des articles

 

Pour intégrer les visuels de vos articles en page d’accueil de votre site mobile comme ceci :

miniatures-articles

Vous devez effectuer 2 réglages :

  • sur Wptouch,
  • et sur vos articles.

 

Dans WPtouch > Paramètres de thèmes, vous devez cocher dans « Miniatures de publications »
Description de blogs, publications uniques et pages

miniatures-blog

Et sur vos articles, vous devez systématiquement mettre une image à la une (dans les réglages à droite de votre article)

image-une

Afficher un carousel en page d’accueil

 

carousel-slide

Pour afficher un carousel de vos articles les plus intéressants en page d’accueil (comme ci-dessus), restez dans WPtouch > Paramètres de thèmes, et naviguez un peu plus bas dans la zone « Curseur Affiché »

cuseur-affiche

Vous devez alors cliquez sur

  • activer le curseur affiché,
  • et sélectionner les IDs d’articles ou de pages que vous voulez faire tourner (au moins 2).

Les IDs de vos articles sont visibles au survol de ceux-ci dans Articles > Tous les articles. Vous devez avoir des URLs qui ressemble à cela :

http://monblog.fr/wp-admin/post.php?post=2610&action=edit

l’ID se trouve après le post=
Ici c’est 2610

Privilégiez dans le carousel les articles qui sont susceptibles d’intéresser le plus vos lecteurs  lorsqu’ils sont en mobilité. J’ai choisi pour ma part de faire la part belle à mon livre en version e-book.

 

Personnaliser le design

 

Toujours dans paramètres de thème, cliquez sur l’onglet en haut personnalisation pour ajouter un logo en en-tête et personnaliser vos couleurs.

perso-design-wptouch

NB : Vous pouvez également plus bas dans la page configurer les adresses de vos réseaux sociaux.

 

Permettre l’abonnement à votre newsletter

 

Je vous propose d’ajouter un module d’abonnement emailing feedburner en bas de chacune de vos pages mobile en plus de comptes de réseaux sociaux

feedburner-mobile

Pour se faire, je vous invite à relire mon tuto emailing et feedburner et à copier coller ce bout de code (en remplaçant mon adresse feedburner par la votre)

<br><br><div align= »center »><h3>Recevoir BlogBuster par mail</h3><form style= »border:1px solid #ccc;padding:3px;text-align:center; » action= »https://feedburner.google.com/fb/a/mailverify » method= »post » target= »popupwindow » onsubmit= »window.open(‘https://feedburner.google.com/fb/a/mailverify?uri=blogbuster/hpHl’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true »><p>Ajoutez votre email :</p><p><input type= »text » style= »width:200px » name= »email »/></p><input type= »hidden » value= »blogbuster/hpHl » name= »uri »/><input type= »hidden » name= »loc » value= »fr_FR »/><input type= »submit » value= »S’ABONNER GRATUITEMENT » /></form></div> <br><br>

Dans WP Touch > Paramètres Principaux > Code Personnalisé

 

Suivre l’audience de votre site mobile

 

N’oubliez pas non plus d’ajouter un tag Google Analytics également dans WP Touch > Paramètres Principaux > Code Personnalisé (après le code feedburner), sinon votre audience mobile ne sera plus suivie.

 

code-perso-analytics

 

J’espère que ce tuto aura été utile à Benjamin et à d’autres lecteurs. Si vous avez d’autres questions sur WPtouch, n’hésitez pas à les poser dans les commentaires. Si vous voulez approfondir les aspects analytics, emailing, ergonomie mobile, faites comme Benjamin, lisez tout de suite mon livre en version e-book ;)

Jean-Baptiste
Suivez-moi

Jean-Baptiste

Responsable marketing digital chez Orange le jour. Blogueur, Auteur, Entrepreneur la nuit,j'ai plus de 10 ans d'expérience sur Internet en gestion de projets, création d'audience, monétisation.
Jean-Baptiste
Suivez-moi


Tu veux gagner de l'argent avec ton blog ?
Lis tout de suite BlogBuster dispo sur Amazon, Kobo, Fnac, iTunes pour 3,99 €

blogbuster ebook

Nous te recommandons :


Categories and Tags:  Ergonomie

Commentaires (4)

 

  1. sergent dit :

    Bonjour,
    je viens d’installer WP Touch. Tout est ok sauf le logo que je ne parviens pas à intégrer. J’ai essayé du format jpeg, png, sous plusieurs tailles mais rien n’y fait ! helpppp please

    merci

  2. cédric dit :

    Bonjour, j’ai des petits problèmes, le menu ne fonctionne pas et les articles sont en bas de la liste et non au début

  3. Dom dit :

    En fait j’avais lu sur un autre site que la version gratuite permettait de mettre des adsenses, ensuite je suis tombé ici, j’ai commencé les réglages jusqu’à tomber sur la page des réglages pour la pub qui n’est accessible que pour la version pro.
    Entre temps j’ai quand même été jeter un coup d’œil pour voir les performances du site en mobile sur pagespeed et c’est pas très différent de ce que j’ai avec la version mobile de mon template, alors il ne me reste plus qu’à le désinstaller :(

  4. Pat dit :

    Je vien sd’installer le WP Touch mais sur ma page d’accueil j’ai un cercle avec Nov 1 puis une felche vers la droite. Comment puis je supprimer cela on dirait une date. merci beaucoup

Laisser un commentaire

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



Deviens toi aussi un YouTubeur


Rechercher


Recevoir Blogbuster par email

    Ajoutez votre email :





BlogBuster, le livre


blogbuster ebook

Derniers Commentaires

  • Jean-Baptiste { @Tony l'admin de Webmaster Hub apporte une réponse pleine de bon sens. C'est bien du service la pub AdSense ! (seuil de 33 200). "A... } – Mai 22, 2:53
  • tony { une autre source du bloggeur très connu Théophile qui dit qu'il a suivit une formation à la chambre de commerce de Lille et qu'il déclare... } – Mai 22, 1:40
  • tony { merci pour ta réponse . voici l'une des sources dont je parlais pour la vente de marchandises https://www.webmaster-hub.com/topic/47784-adsense-et-autoentrepreneur-plafond-de-80000-%C2%80-possible/ et j'ai vu vu également de plusieurs... } – Mai 22, 1:34
  • Jean-Baptiste { Hello @Tony tu fais bien de me relancer. Il y a tellement de commentaires sur ce post, que certains m'ont échappés. Gagner de l'argent en... } – Mai 22, 1:07
  • tony { je repose la question qui n'a pas eu de réponse "j’ai lu sur plusieurs sources différentes que les revenus adsense étaient considérés comme de la... } – Mai 22, 9:40
  • Jean-Baptiste { Salut Patrick, En effet, c'est toujours lors d'un contrôle (avis de vérification de comptabilité) que le fisc en sait le plus sur l'origine de nos... } – Mai 22, 8:01

Catégories


Derniers articles et tutos


Derniers plugins ajoutés


Trouver un plugin


Mentions légales - Contact