Avez-vous déjà vérifié à quoi ressemble votre site WordPress sur de petits écrans, notamment les téléphones ? Même si vous utilisez un thème mobile Responsive, sachez vous et vos visiteurs, vous sentirez mieux si vous utilisez un thème uniquement propre au mobile.

Dans ce tutoriel WordPress, nous allons donner à votre site WordPress une cure de jouvence mobile et gratuite avec le plugin WPtouch.

Les bases du mobile-friendly

Avoir une conception orientée vers les écrans mobiles est évidemment une partie intégrante du « mobile-friendly », et ce n’est pas la seule considération.

Les Menus mobiles – être capable d’utiliser un menu séparé sur un mobile est un must, et pas seulement parce qu’il est plus facile à utiliser, mais aussi parce que vous aurez besoin d’afficher et de modifier le corps de votre contenu.

Les Plugins pour plateforme spécifique –  la possibilité d’utiliser des plugins spécifiques qui se désactivent en fonction du dispositif d’affichage du visiteur est également incroyable et utile. Pourquoi WordPress devrait fournir tant d’efforts pour charger un plugin si sa fonctionnalité n’est pas nécessaire?

Le Contenu  mobile spécifique –  Même si le contenu devrait changer entre les plateformes.  Sur les mobiles, vous devrez afficher des titres et des extraits qui correspondent mieux à l’écran le plus petit.

L’approche des 80/20

Vous avez probablement entendu parler de la règle des 80/20, aussi connu comme le principe de Pareto d’après son créateur, économiste italien Vilfredo Pareto.

Rendre votre site entièrement mobile et conviviale avec un thème personnalisé qui le relie à votre thème de bureau, à vos menus et à vos plugins ainsi qu’ à votre contenu (qui devra s’adapter à l’appareil) demande un effort considérable. Mais l’utilisation d’un plugin permettra d’atteindre 80% de ce que nous voulons pour seulement 20% (ou moins) de l’effort requis pour une approche entièrement personnalisée.

WPtouch, le plugin de choix

Si un plugin a été téléchargé plus de 5 millions de fois alors il est fort probable  que celui-ci soit assez bon.

Mais vous nous connaissez, nous ne nous plaisons pas à vous recommander quelque chose sans que nous n’ayons vérifiés ou testés un certain nombre d’options disponibles, le plugin WPtouch est, en effet, un choix judicieux pour une approche rapide et facile pour faire en sorte que votre site soit mobile-friendly. Il est très configurable, même dans la version gratuite.

Il est donc important de noter que WPtouch ne s’active que sur les téléphones mobiles et non pas sur les tablettes.

Donc, nous allons passer rapidement à l’essentiel c’est à dire l’installation et la configuration du plugin WPtouch.

1. Télécharger et installer

Aller sur  Extensions > Ajouter dans votre tableau de bord admin de WordPress puis rechercher de WPtouch.  Installer et Activer le plugin.

Alternativement, vous pouvez le télécharger à partir du répertoire de plugin WordPress et le mettre en ligne via votre FTP.

Vous verrez qu’une nouvelle option sera ajoutée à votre menu administrateur, WPtouch, qui est, sans surprise l’endroit où vous devrez configurer le comportement et le look de votre thème mobile.

Il y a 4 pages d’options (certains avec plusieurs onglets), donc il pourrait y avoir beaucoup d’éléments à configurer avant que celui ne fonctionne parfaitement.

2. Essai il fonctionne

Avant de faire toute configuration, nous allons tester si cela fonctionne vraiment sans aucune configuration. La version gratuite ne possède qu’un seul thème par défaut, il devrait donc fonctionner après son activation.

Avant cela cependant, si vous voulez seulement tester WPtouch et ne voulez pas afficher votre travail en cours sur les téléphones du monde, alors sautez dans WPtouch > Paramètres Principaux et définir le mode d’affichage sur Aperçu (actif uniquement pour les administrateurs de site connectés) ensuite, enregistrez les modifications.

Parcourez votre site sur un appareil mobile (ou un simulateur) et assurez-vous que votre thème s’affiche bel et bien sur votre périphérique mobile.

affichage-Site-WordPress-sur-Mobile2

 3. Configurer votre menu pour mobile

La version gratuite de WPtouch offre la possibilité essentielle de spécifier un menu pour une utilisation sur les appareils mobiles, et je vous invite à le faire (après avoir d’abord pensé au contenu qui est le plus important pour vos visiteurs mobiles, bien sûr!).

Créer un nouveau menu comme vous le faite habituellement avec WordPress. (Apparence >Menus). Donnez-lui un nom significatif, comme « Menu mobile » puis dans la page des paramètres « menu » de WPtouch, sélectionnez le Menu mobile que vous venez de créer dans la liste déroulante et cochez les options de menu.

Responsive-Theme-Conguration-Menu

Création d’un menu spécial pour votre thème mobile vaut bien l’effort

Retournez sur votre site, le rafraîchir, ensuite cliquez sur l’icône du hamburger pour vérifier que votre menu spécifique au mobile est affiché.

4. Ajouter un signet icônes

Quand un visiteur ajoute votre site à ses favoris, il ajoute éventuellement une icône sur son écran d’accueil. Si vous ne fournissez pas une icône, l’appareil utilisera une icône par défaut et en fera une icône de votre site pour que celui-ci soit facile à trouver (comme un raccourci). Il est donc important de fournir l’image de votre marque pour que celle-ci soit facilement identifiable.

Créez deux icônes, une pour Android (96 × 96 pixels) et une pour iOS (120 × 120 pixels) au même moment dans un format png et télécharger les sur WPtouch > Paramètres de thème >  icônes de signets. Vous pouvez également modifier le titre du site ici si vous voulez (si il parait trop long pour vous). L’ajout des icônes de signet améliorera considérablement la recherche de votre site sur un écran d’accueil de mobile

Responsive-Theme-icone-de-signet

Retournez sur votre site, rafraîchissez le, et tester l’icône du signet.

5. Maintenant, vous pouvez modifier

Maintenant que vous possédez tous les éléments essentiels prêts, vous pouvez affiner le look de votre site sur mobile et son comportement en allant dans paramètres principaux et Paramètres de thème.

Paramètres principaux

Sur cette page vous pouvez remplacer le titre du site, sélectionnez une langue spécifique, affichez le thème mobile uniquement pour les administrateurs (utile pour les tests), sélectionnez une page de destination spécifique pour mobile (page d’accueil) et ajouter du code HTML personnalisé, CSS ou JavaScript.

Paramètres de thème

Les Paramètres de thème sont assez vastes mais généreusement saupoudré de caractéristiques de la version Pro.

Le thème par défaut disponible avec la version gratuite est Bauhaus, ce thème est en fait correct. Le design est propre et facile à utiliser et inclut un slider et un menu déroulant attaché à l’icône désormais omniprésente « hamburger ».

La page Paramètres du thème dispose de 5 onglets:

  • Général – cet onglet vous permet de jouer avec l’affichage du thème, y compris le nombre de posts à afficher dans la liste d’une pages, l’exclusion des posts de certaines catégories et les étiquettes, où de montrer des images à la une, les sliders, et les formulaires de connexion
  • Personnalisation – Vous possédez quelques options ici vous permettant de sélectionner une couleur, un logo pour le site, le contenu personnalisé du pied de page et les polices.
  • Icones de signets – Comme déjà discuté cela permet de déterminer l’icône qui sera affichée sur l’écran d’accueil de votre visiteur si celui–ci marque votre site comme favori.
  • Mode application Web / Publicité – Des éléments tous utiles mais tous limités pour la version Pro qui sont visibles ici, mais grisé afin que vous puissiez voir ce que vous perdez si vous n’utilisez pas la version pro.

Passez à la version Pro: les puissantes fonctionnalités, l’épouvantable modèle des tarifs

Pendant que vous naviguez à travers les pages de paramètres de WPtouch vous remarquerez que nombre d’options très attractives sont limitées pour la version Pro : plus de choix de thèmes, seulement le contenu mobile, les images Responsive et la mise en cache pour ne citer que quelques-unes.

Malheureusement,  le modèle de tarification pour WPtouch n’est guère amical pour le client.

Vous pourriez penser que l’achat d’une seule licence pour $49  pourrait vous aider à obtenir toutes les fonctionnalités Pro pour 1 site, mais vous auriez tort. Il n’existe pas de mise en cache dans une licence de site unique, pour l’obtenir vous aurez besoin de 5 Packs de licences à $99  et si vous voulez des images responsives.

gin WPtouch tarif des différentes licences

Accéder à toutes les fonctionnalités nécessite inexplicablement une licence multisite.

Pourquoi cette fusion des deux modèles de tarification?

Pourquoi ne pas passer à une version Pro et obtenir toutes les fonctionnalités? je vous laisse imaginez vous même votre propre réponse, car ces tarifs sont quasiment inexplicables.

Cela dit, la version gratuite est certainement assez bonne pour vous fournir un site mobile très décent en moins de 15 minutes d’efforts. Difficile donc de se plaindre à ce sujet.

Nous espérons vous avoir aidé à rendre votre site mobile-friendly en 15 minutes, si vous pensez que nous avons oubliés un détails important n »hésitez pas à nous le faire savoir en laissant votre remarque dans notre section dédiée aux commentaires.

1 Partages
Partagez1
Tweetez
Enregistrer