Applications mobiles Best Of Blogosphère — 03 avril 2012 — 2 commentaires
Lancer son blog WordPress sur mobile grâce au plugin WPTouch

La navigation web sur mobile a grandement été améliorée grâce à la démocratisation des smartphones. Malgré cela, la structure d’un site web n’est pas forcément adaptée au mobile. Proposer une version mobile de son site / blog est donc recommandé. Si vous avez un blog WordPress, sachez qu’il est très facile de l’adapter au mobile grâce au plugin WPTouch. Suivez le guide…

WPTouch est un plugin WordPress qui vous permettra de proposer à vos visiteurs une expérience de navigation adaptée au mobile. Il existe en deux version : gratuite et pro. La version pro vous donnera un degré de personnalisation plus important et vous permettra également d’intégrer vos publicités (Adsense Mobile, MobPartner… Relisez à ce sujet notre article : Monétisation d’un site mobile : les différentes solutions). C’est cette version que nous avons utilisé pour Webmarketing & co’m, elle servira donc de référence pour la suite de cet article.

Télécharger le plugin WPTouch Pro…

Pour cela, il suffit de vous rendre sur le site de l’éditeur BraveNewCode et de télécharger l’application. La version pro coute 49$ et vous permet de personnaliser votre site mobile comme bon vous semble. Vous pouvez également commencer par télécharger la version gratuite pour vous familiariser avec le plugin.

Personnaliser son site mobile…

Voici quelques conseils pour bien utiliser le plugin et personnaliser son site mobile.

1 : Paramétrer l’apparence de son site mobile

WpTouch pro offre la possibilité de créer son propre thème adapté aux mobiles. Néanmoins, si comme moi vous n’avez pas les compétences techniques pour créer un thème, l’interface du plugin permet de personnaliser l’apparence très facilement.

Pour commencer, rendez-vous dans “Thème actif” > “Style apparence”

WP Touch Pro : apparence site mobile WordPress

Vous pourrez commencer par indiquer votre logo pour qu’il s’affiche sur le site mobile. Pour que ce dernier s’affiche correctement, vous devez utiliser un fichier au format png avec un fond transparent et mesurant 540*88 pour les écrans retina et 270*44 pour les autres types d’écrans.

Sur cette même page, sélectionnez les polices à utiliser pour les différentes parties du site, l’arrière plan et pensez à cocher la case “Montrer les vignettes” qui permet d’afficher les images à la une WordPress en miniature sur chacun des articles. Si vous souhaitez également que cette dernière s’affiche en haut de l’article, rendez-vous sur “Thème actif”> “Menu, articles et pages” puis cochez “Montrer l’image jointe dans le contenu de l’article”. Sur cette page, une option vous permettra également d’afficher l’extrait de l’article en guise d’introduction sur la homepage.

2 : Faciliter la navigation via un menu personnalisé

Toutes vos pages ne sont pas forcément adaptées à un usage nomade, en créant un menu personnalisé, vous pourrez mettre en avant les pages à destination des mobinautes.

WPTouch supporte les menus personnalisés WordPress. La première étape va donc être de créer un nouveau menu personnalisé.

Rendez vous dans “Apparence” > “Menus” et cliquez sur ajouter un menu que vous pouvez appeler, par exemple “Mobile”.

Wordpress : apparence menu

Dans notre cas, j’ai limité le menu à la page d’accueil, aux rubriques mères et à la page A propos.

Une fois le menu créé, je peux retourner dans le plugin WPTouch Pro puis cliquer sur “Menu + Icônes”. Dans les réglages généraux, je sélectionne le menu mobile que je viens de créer.

Menu WP Touch pro

Le plugin permet également d’ajouter des liens en plus de ce menu. Vous pouvez en ajouter jusqu’à trois, j’ai ainsi pu mettre nos comptes Twitter, Facebook et Google+. Pour ajouter ces liens, il suffit de cliquer sur “Objets du menu d’usage”.

Les icônes sont souvent utilisées pour faciliter la navigation sur un site mobile. Pour ajouter des icônes pour chacune des rubriques de votre menu, voici ce qu’il faut faire.

Cliquez sur réglages du menu et icône. A gauche vous retrouverez les différentes icônes proposées par le plugin. Avec 10 collections comportant chacune une trentaine d’icônes, vous avez de quoi faire.

WP touch pro personnalisation icônes site mobile

Il suffit de naviguer dans les collections et de glisser les icônes souhaitées sur les liens de votre menu.

Monétiser son site via Adsense pour mobiles…

Maintenant que votre site mobile a le design parfait, passons à la monétisation. Nous allons prendre l’exemple des Adsenses pour mobile. Connectez vous à votre compte Adsense puis créez un nouveau bloc d’annonce.

Google adsense site mobile

Choisissez le format 320*50 Bannière pour mobile puis personnalisez l’annonce. Une fois que vous avez obtenu le code, notez votre identifiant publisher et le canal de votre publicité. Le premier code s’affiche dans le code après google_ad_client et le second après google_ad_slot.

Rendez-vous ensuite dans les options de WP Touch pro et cliquez sur “Général” > “Publicités et stats”.

Dans mobile advertising renseignez l’identifiant publisher et le canal de la publicité que vous venez de créer.

Sur ce même écran, vous retrouverez également les options pour gérer les publicités sur iPad et intégrer le code de votre outil de web analytics pour suivre les visites de la version mobile de votre site. Si l’analyse de l’audience de votre site est important pour vous, lisez notre article Suivre les performances de son site / blog via Google Analytics”.

Votre site mobile est désormais monétiser et vous pouvez suivre son audience.

Ajouter un formulaire de contact adapté et recevoir des notifications push…

Le formulaire que vous avez sur votre blog WordPress ne fonctionnera pas forcément sur la version mobile et si il fonctionne il y-a de grandes chances pour qu’il ne soit pas bien adapté.

WP Touch pro a pensé à ce cas de figure et vous permet d’ajouter facilement un formulaire de contact. La cerise sur le gâteau : vous recevrez une notification push à chaque message reçu.

Voilà les étapes à suivre :

1 : Créer un compte Prowl : Prowl est un système de push compatible avec iOS, vous pouvez créer un compte gratuitement afin d’obtenir une clé API et l’utiliser dans WP Touch Pro. Une fois votre compte créé, rendez vous sur la page “API Keys” afin de générer votre clé.

2 : Paramétrer WP Touch Pro : Rendez vous dans “General” > “Notifications Push”, entrez votre clé API Prowl dans le champ prévu à cet effet. Cochez ensuite la case “Permettre aux utilisateurs d’envoyer des messages directs”.

3 : Télécharger l’application Prowl : Une fois les deux étapes préalables réalisées, il ne vous reste plus qu’à télécharger l’application iPhone Prowl pour recevoir les alertes de nouveaux messages.

Conclusions…

WPTouch Pro offre de nombreuses possibilités de personnalisation, la version pro dispose d’un support et la documentation associée au plugin est très bien fournie. Si vous cherchez un plugin pour adapter votre blog aux mobiles, WPTouch est fait pour vous.

Télécharger WPTouch >

Comment lancer son premier blog :

A lire sur le sujet :

Réussir son blog professionnel : Affirmez votre présence en ligne et maîtrisez votre communication : des choix stratégiques à la gestion quotidienne, toutes les clés pour bloguer efficacement en toute sérénité ! Définissez votre stratégie de communication. Adaptez vos choix techniques en conséquence. Attirez clients et recruteurs en partageant votre expertise, renforcez votre identité ou communiquez avec vos collaborateurs. Animez votre blog en échangeant avec vos lecteurs via les commentaires… Commander sur Amazon.

A redécouvrir : Un oeil sur la blogosphère, série d’interviews de blogueurs réalisée en 2009…

oeil blogosphere Eric Dupin Philippe Lagane gonzague dambricourt gregory pouy henri labarre vanina delobelle vincent abry thierry debarnot jf-ruiz-mini anne papilles pupilles mercotte yangiz damien-paques thoma-daneau oeil blogosphere
//Cliquez sur le portrait pour voir l’interview//

Articles similaires

Articles Recommandés



L'auteur

Sylvain Lembert

Depuis 2004 dans le webmarketing, j’ai pu mettre en place des campagnes e-marketing dans des domaines variés. J’ai participé aux référencements de marques reconnues et mis en place la stratégie de communication on-line d’un assureur. J’ai également élaboré une stratégie de search marketing au niveau européen et été responsable de l’acquisition via Facebook pour un groupe de média social. Je suis aujourd'hui consultant webmarketing, n'hésitez pas à me contacter pour vos projets de communication on-line.

 


2 Commentaires

  1. Très bon outil, même si cela ne remplace pas un responsive design. J’utilise la version pro pour un blog corporate et c’est très utile. J’apprécie de pouvoir personnaliser les boutons, les menus, etc.

  2. pas mal maintenant je peux blogger n’ importe où et n’importe quand si la batterie de mon smartphone le permet et si je décide changer et de m’acheter un Iphone, y aurait-il une solution?

Laisser un commentaire

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