WPTouch : une extension pour adapter facilement votre site au mobile

Adapter un site Web au mobile consiste à ajuster la feuille de style pour que l'affichage soit aussi agréable sur un ordinateur à écran large que sur un téléphone cellulaire. On parlera de rendre le site Web adaptatif ou, en anglais, responsive.

Si les règles de bases sont assez simples à mettre en place, il reste que l'adaptation demande un travail supplémentaire non négligeable. Et pour que l'affichage sur cellulaire soit optimal, vous devrez probablement passer de longues heures à jouer avec votre CSS.

Saviez-vous que les firmes qui développent des sites Web peuvent ajouter facilement 500$ aux coûts d'un site Web pour le rendre adaptatif ?

C'est ici qu'une extension comme WPTouch devient intéressante : vous l'installez sur votre site WordPress et, du coup, votre site s'affiche correctement sur un téléphone cellulaire sans que son apparence soit affectée sur un écran plus large.

▼Publicité

Pour débuter, vous devez télécharger WPTouch ici : http://wordpress.org/plugins/wptouch/.

Dès l'activation de votre extension, votre site est tout à fait fonctionnel sur mobile. Mais attention : son apparence est complètement changée et vous devrez effectuer quelques configurations pour qu'il soit reconnaissable.

Extension WPTouch : apparence par défaut

À titre comparatif, voici l'apparence de mon site Web sur cellulaire sans WPTouch. Pourtant, le thème utilisé est adaptatif. On voit donc qu'il y a du travail à faire pour que l'apparence soit acceptable.

Site sur mobile sans WPTouch

En effectuant quelques configurations, voici quelques exemples de l'apparence que peut prendre le site Web :

Site Web avec WPTouch - apparence ajustée WPTouch-Afficher les images à la une WPTouch-Afficher les extraits
Avec les icônes de calendrier Avec les images à la une Avec les extraits d'articles

Bien que les options de configuration de menu soient pratiquement inexistantes, vous avez tout de même la possibilité d'ajouter une option donnant accès aux articles par catégorie.

WPTouch - menu Catégorie

Pour aller plus loin

Nous avons testé ici la version gratuite de WPTouch. La version professionnelle permet d'effectuer beaucoup plus de configurations.

Il est cependant possible d'aller plus loin dans les configurations sans pour autant acheter la version Pro. Il suffit pour cela d'éditer la feuille de style de WPTouch.

Oui, oui, c'est bien la feuille de style de WPTouch que vous devez modifier. Il est inutile de modifier votre propre feuille de style car elle ne sera tout simplement pas chargée lorsque votre site est affiché sur un appareil mobile.

La feuille de style principale de WPTouch s'appelle style.css et on la retrouve dans le dossier (votretheme)/wp-content/plugins/wptouch/themes/default.

Il faut être bien conscient qu'en modifiant ce fichier, vos modifications seront perdues lors de la prochaine mise à jour de WPTouch. Il s'agit toutefois d'une technique plutôt simple et tout à fait gratuite pour parvenir à nos fins.

Par exemple, pour utiliser une police stylisée dans l'affichage du titre de mon site Web, j'ai ajouté les lignes suivantes au tout début du fichier :

Fichier style.css de WPTouch (CSS)

@import url(http://fonts.googleapis.com/css?family=Pinyon+Script);

#headerbar #headerbar-title a {

   font-family: 'Pinyon Script', cursive;

   font-size: 1.3em;

}

Et voilà le résultat !

WPTouch : stylyser un titre

Conclusion

Bref, WPTouch est une extension toute simple qui permet facilement de rendre votre site Web adaptatif. Cependant, la version gratuite offre des configurations limitées.

WPTouch demeure un choix intéressant pour convertir rapidement un site WordPress au mobile.

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories