Rendre votre WordPress adapté aux mobiles avec WPtouch Pro

Selon la démographie de votre site, il peut être important d'avoir un site Web adapté aux mobiles. Vous pouvez y parvenir en utilisant un thème WordPress réactif qui s'adapte à différentes tailles d'écran / appareils, ou vous pouvez créer une version mobile spécifique de votre site si vous ne souhaitez pas modifier la conception de votre site. Dans cet article, nous vous montrerons comment créer un site WordPress adapté aux mobiles avec WPTouch Pro.

WPtouch Pro est un plugin WordPress commercial qui peut transformer votre site WordPress en une expérience mobile native pour les navigateurs de smartphones modernes. Il est rapide, prend en charge la traduction complète, l'intégration à l'écran d'accueil iOS, et de nombreuses autres façons d'améliorer l'expérience utilisateur mobile.

Une fois que vous avez acheté WPtouch Pro, vous recevrez une clé de licence et le fichier de téléchargement du plugin. Vous devez l'installer sur votre blog (suivez notre guide simple d'installation de plugin), puis l'activer depuis votre tableau de bord.

Lors de l'activation, le plugin affichera une notification vous rappelant d'entrer votre clé de licence. Vous devez entrer la clé de licence afin de recevoir les mises à jour du plugin, de télécharger des thèmes et des extensions. Cliquez sur le lien ‘activer votre licence’ pour entrer votre clé de licence.

Sur l'écran suivant, entrez simplement l'adresse e-mail de votre compte (celle que vous avez utilisée pour acheter le plugin) et votre clé de licence produit, puis cliquez sur le bouton d'activation. WPTouch va maintenant vérifier votre clé de licence et affichera un message de succès.

Lors de l'activation, le plugin ajoute un élément de menu WPTouch Pro dans votre barre d'administration WordPress. Pour configurer le plugin, vous devez aller dans WP Touch Pro » Paramètres de base.

Sur l'écran des paramètres de base, vous pouvez configurer diverses options pour la version mobile de votre site. La première option sur cet écran est de changer le titre et le slogan du site. Ceci est particulièrement utile si votre site a un titre et un slogan longs qui ne s'affichent pas bien sur les écrans mobiles.

L'option suivante sur cet écran est la Régionalisation. WP Touch Pro détecte automatiquement la langue de votre site à partir de votre installation WordPress, cependant vous pouvez également sélectionner manuellement la langue en utilisant cette option.

L'option Affichage sur l'écran des paramètres principaux vous permet de désactiver manuellement le thème mobile sans désactiver le plugin. Le réglage par défaut est Normal, ce qui active l'affichage du thème mobile pour tous les visiteurs accédant au site via un appareil mobile. Vous pouvez le changer en Aperçu, de sorte que le thème mobile ne soit affiché qu'aux administrateurs du site lorsqu'ils sont connectés. Vous pouvez également choisir Désactivé pour désactiver complètement l'affichage du thème mobile.

Il existe des options avancées disponibles sur la page des paramètres principaux. Par exemple, vous pouvez choisir une page de destination personnalisée pour la version mobile de votre site. Vous pouvez ajouter du code personnalisé qui apparaîtra dans la zone du pied de page du thème. Vous pouvez également sauvegarder tous les paramètres de WP Touch Pro, puis les importer sur un autre site WordPress avec WP Touch Pro. C'est une bonne option si vous avez un site de staging ou une installation locale.

Une fois que vous avez parcouru la page des paramètres principaux, vous pouvez prévisualiser votre site mobile directement sur votre bureau en cliquant sur le bouton Aperçu du thème en bas de cette page. Une fois que vous êtes satisfait de l'apparence de votre thème, vous pouvez cliquer sur le bouton Enregistrer les modifications pour sauvegarder vos paramètres.

Changer le thème mobile dans WPTouch Pro 3

Par défaut, WPTouch Pro 3 est livré avec un thème mobile préinstallé. Vous pouvez télécharger et installer des thèmes supplémentaires depuis WPTouch Pro » Thèmes & Extensions. Bauhaus, CMS, Classic Redux et Simple sont les thèmes disponibles avec tous les plans de licence. Pour installer un thème, cliquez simplement sur le bouton Installer sous le thème. WPTouch Pro téléchargera le thème depuis le cloud et l'installera. Une fois qu'un thème est installé, vous pouvez cliquer sur le bouton activer pour utiliser ce thème.

Personnaliser votre thème mobile dans WPTouch Pro3

Une fois que vous avez sélectionné le thème pour votre site mobile, vous voudrez peut-être le personnaliser pour répondre à vos besoins. Pour ce faire, vous devez aller dans WPTouch Pro » Paramètres du thème. Les thèmes mobiles de WPTouch Pro sont hautement personnalisables. Vous pouvez ajuster chaque aspect de votre site mobile depuis l'écran des paramètres du thème. Nous vous guiderons à travers les différentes sections des paramètres du thème.

Dans l'onglet du menu supérieur, vous pouvez voir les différentes zones de votre thème que vous pouvez personnaliser. Vous commencerez par l'onglet Général qui contient des options pour certains paramètres de base tels que le nombre d'articles à afficher sur la page d'accueil, l'activation du curseur de catégorie, l'activation du curseur d'articles mis en avant, etc. Les paramètres par défaut devraient fonctionner pour la plupart des sites, mais vous pouvez apporter des modifications si nécessaire. Vous remarquerez également une icône d'information à côté de certaines options ; en passant votre souris sur l'icône, vous obtiendrez une aide contextuelle pour cette option.

Une fois que vous avez apporté les modifications à votre thème, vous pouvez les prévisualiser en cliquant sur le bouton Prévisualiser le thème en bas de la page. Lorsque vous êtes satisfait des modifications que vous avez apportées, vous devez cliquer sur le bouton Enregistrer les modifications pour sauvegarder les paramètres de votre thème. Il y a aussi un bouton de réinitialisation au cas où vous voudriez revenir aux paramètres par défaut.

Après avoir configuré les paramètres généraux de votre thème mobile, passez à l'onglet Image de marque. C'est ici que vous pouvez télécharger votre propre logo, arrière-plan, polices personnalisées, icônes de médias sociaux, etc. Vous pouvez également modifier les couleurs du thème pour qu'elles correspondent à votre logo et aux couleurs de votre marque.

Transformer votre site en une application Web mobile

WPTouch Pro vous permet de tirer pleinement parti des fonctionnalités des appareils mobiles en transformant votre site en une application Web. Vous devez d'abord cliquer sur l'onglet Icônes de signet dans l'écran des paramètres du thème. Vous devrez télécharger deux icônes, une pour les appareils Android et l'autre pour les appareils iOS (iPhone, iPod et iPad).

Après cela, cliquez sur l'onglet Mode application Web dans les paramètres du thème. Cochez simplement la case pour activer le mode application Web iOS, et cela affichera les paramètres avancés pour le mode application Web. Vous pouvez utiliser les paramètres par défaut, ou vous pouvez télécharger vos propres écrans de démarrage personnalisés.

Monétisez votre site mobile avec WPTouch Pro

Les thèmes WPTouch Pro vous permettent également d'afficher très facilement des publicités sur votre site mobile. Vous devez aller dans l'onglet Publicité sous les paramètres du thème et choisir entre Google Adsense ou un service de publicité personnalisé.

Pour Google Adsense, vous devrez entrer votre ID d'éditeur Google Adsense et l'ID d'emplacement que vous pouvez obtenir de votre compte Google Adsense. Après cela, vous devrez choisir l'emplacement où vous souhaitez que les publicités s'affichent. Enregistrez vos modifications et votre site mobile commencera à afficher des publicités.

Personnalisation des menus de navigation pour le site mobile dans WPTouch Pro

WPTouch Pro utilise la fonctionnalité de menu par défaut de WordPress, mais vous permet de modifier ou de choisir comment vous souhaitez afficher le menu sur votre site mobile. Pour configurer les menus, vous devez aller dans WPTouch Pro » Menus. Vous devez d'abord choisir un menu. Vous pouvez choisir d'afficher les pages WordPress dans le menu, ou de choisir un menu existant.

Dans l'onglet Configuration du menu, vous pouvez personnaliser davantage votre menu WordPress. Vous pouvez associer des icônes à chaque élément de menu en faisant simplement glisser une icône sur un élément de menu.

Par défaut, WPTouch Pro est livré avec l'ensemble d'icônes Elegant conçu par Elegant Themes. Vous pouvez installer d'autres ensembles d'icônes en cliquant sur le bouton Installer à côté d'eux ou télécharger vos propres ensembles d'icônes personnalisés.

WPTouch est un excellent plugin pour convertir tout site Web propulsé par WordPress en une application Web mobile à part entière. Avec de beaux thèmes et de puissantes options de personnalisation, vous pouvez créer des sites mobiles superbes en quelques minutes sans écrire une seule ligne de code. Nous espérons que cet article vous a aidé à créer un site adapté aux mobiles avec WP Touch Pro. Pour vos commentaires et questions, vous pouvez nous laisser un commentaire ci-dessous ou nous suivre sur Twitter.