Comment transformer votre site Divi en application mobile avec AppPresser

S'assurer que votre site WordPress est prêt pour le mobile n'a jamais été aussi critique. Après tout, les utilisateurs mobiles constituent désormais la majorité du trafic en ligne. Cela signifie que vous devez faire tout ce qui est en votre pouvoir pour vous assurer que leur expérience est aussi bonne que possible.

Grâce à des services tels que AppPresser, vous pouvez désormais créer des applications simples pour votre site WordPress, même si vous n'avez pas d'expérience en développement. Dans cet article, nous allons vous apprendre à utiliser la plateforme pour développer une application mobile. Cependant, parlons d'abord des applications mobiles, de l'avenir de la navigation Web et de ce que AppPresser peut vous offrir.

Pourquoi les applications mobiles sont l'avenir de la navigation Web

Compte tenu des statistiques, vous lisez probablement cela à partir d'un appareil mobile - et c'est peut-être même la façon dont vous interagissez le plus souvent avec le Web de nos jours. Après tout, la plupart d'entre nous sortiront leurs smartphones chaque fois que nous en aurons l'occasion, y compris pour surfer sur le Web.

Rendre votre site responsive ne signifie pas que vous devez sacrifier le style pour le rendre utilisable.

En tant que propriétaire de site, le moyen le plus simple de répondre aux besoins des utilisateurs d'appareils intelligents est d'optimiser votre site pour des fenêtres plus petites. De cette façon, les utilisateurs auront une expérience cohérente quel que soit l'appareil qu'ils utilisent. Cependant, il existe également une autre option - bien qu'elle implique un peu plus de travail - et c'est la création d'une application pour votre site.

Les applications présentent quelques avantages distincts par rapport aux sites Web classiques adaptés aux mobiles :

1. Ils offrent aux lecteurs un rappel constant de votre site. Avoir une application dédiée sur leur appareil peut amener certains utilisateurs à penser à rechercher de nouveaux contenus. Vous pourriez également obtenir une fréquence de visite plus élevée que d'habitude.
2. Vous pouvez inclure des fonctionnalités dédiées et spécifiques aux mobiles. De nombreuses applications incluent des fonctionnalités intéressantes telles que les connexions sociales et les notifications push. Bien sûr, il est également possible de les implémenter sur un site régulier, mais ils semblent plus naturels dans le cadre d'une application.
3. Il a l'air professionnel. Avoir une application pour votre site Web lui donne simplement un aspect professionnel. Tant que vous proposez une offre moderne et stable, il y a de fortes chances que les utilisateurs repartent impressionnés.

Bien sûr, créer une application pour votre site Web ne signifie pas que vous devez renoncer à la rendre compatible avec les appareils mobiles. Pensez-y comme une mesure complémentaire pour maximiser son exposition. La meilleure partie est que le processus de création d'applications n'est pas si compliqué, grâce à de nouveaux services intéressants.

Une introduction à AppPresser

AppPresser est un service qui vous permet de prendre votre site Web WordPress existant et de le transformer en une application mobile d'apparence moderne. En utilisant la plate-forme, vous pouvez ajouter n'importe laquelle de vos pages existantes, créer des menus et bénéficier de fonctionnalités avancées, notamment des notifications push, pour donner à votre application un aspect plus professionnel.

La meilleure partie est que l'utilisation du service est remarquablement simple. En fait, il est tout à fait possible de mettre en place une application fonctionnelle (et élégante) en quelques heures à l'aide d'AppPresser.

Vous voudrez probablement opter pour le plan de démarrage à 19 $ par mois, qui prend en charge une seule application. Si vous avez besoin de plus que cela (ou si vous prévoyez de monétiser votre application), d'autres niveaux sont disponibles.

Principales caractéristiques:

• Vous permet de créer des applications mobiles pour Android et iOS.
• Comprend un thème et un plugin WordPress qui vous permet d'accéder aux fonctionnalités avancées de l'application.
• Offre des options de connexion et de partage sur les réseaux sociaux.

Prix ​​: 19 $ par mois | Plus d'information

Comment transformer votre site Divi en application mobile avec AppPresser

Avant de plonger dans le didacticiel, vous devrez créer un compte à la fois sur AppPresser - qui, comme nous l'avons mentionné précédemment, est un service payant - et sur Phonegap (que vous devrez utiliser pour la dernière étape).

Après vous être inscrit au premier, vous recevrez un e-mail qui vous donnera accès au plugin AppPresser et à son thème complémentaire (introuvable ailleurs).

Quant au thème, ne vous inquiétez pas, vous n'avez pas besoin de l'activer. Il n'a besoin d'être installé que pour permettre au plug-in AppPresser et à l'application Web d'accéder aux données, et il n'apparaîtra que pour votre application mobile. Si vous êtes un utilisateur de Divi, l'utilisation du thème et du plugin d'AppPresser n'affectera pas votre installation.

Une fois que vous avez installé et activé le plugin AppPresser, puis téléchargé son thème (mais pas activé), passez à la première étape !

Étape 1 : Créez une nouvelle application et personnalisez son style

Pour commencer, vous devrez vous connecter à votre compte AppPresser en utilisant les mêmes informations d'identification avec lesquelles vous vous êtes inscrit. Le service vous invitera à créer une nouvelle application, donc une fois que vous avez ajouté un titre, cliquez sur Créer une application :

Ensuite, vous devrez lier votre site Web à votre application avant de commencer à la personnaliser. Pour ce faire, cliquez sur l'onglet Général de votre tableau de bord AppPresser et recherchez la section qui lit PARAMÈTRES DE L'API :

Copiez à la fois votre slug de site et votre ID d'application , puis dirigez- vous vers l'onglet AppPresser de votre tableau de bord WordPress. Vous trouverez deux champs correspondants, alors collez-y vos données, puis enregistrez les modifications :

Avec cela à l'écart, vous pouvez travailler sur la personnalisation de votre application. Revenez à votre tableau de bord AppPresser, accédez à Personnaliser , puis cliquez sur le bouton Personnaliser et créer l'application :

L'écran suivant devrait vous sembler familier car il est calqué sur le personnalisateur en direct de WordPress, et vous verrez également une maquette d'un appareil mobile affichant un prototype de votre application. Une fois que nous aurons terminé, vous pourrez en télécharger une version entièrement fonctionnelle.

Au cours des prochaines étapes, nous couvrirons les sections les plus critiques du personnalisateur, mais pour l'instant, concentrons-nous sur l'onglet Couleur . Vous trouverez ici plusieurs options pour modifier les couleurs de votre application et des explications sur ce que chacune d'elles fait :

Une fois que vous avez modifié la palette de couleurs de votre application et que vous êtes satisfait des résultats, il est temps de regarder votre menu.

Étape 2 : Modifiez le menu de votre application

Chaque application AppPresser démarre avec le même menu par défaut : un écran d'accueil, des pages d'introduction et à propos , et un lien vers la page d'accueil du service. Pour les remplacer, vous devrez accéder à l'onglet Menus de votre personnalisateur et cliquer sur l'option Menu de l' application :

Sur l'écran suivant, vous pouvez choisir des éléments dans le menu de gauche. Dans ce cas, les boutons Accueil, Intro et À propos vous mènent tous à des pages personnalisées, et vous pouvez choisir de supprimer leurs éléments de menu maintenant en cliquant sur l'option Supprimer :

Vous pouvez également conserver ces éléments de menu et personnaliser leurs pages respectives (dont plus en une minute). Pour l'instant, supprimez tout élément de menu dont vous ne voulez pas et utilisez l'option Ajouter des éléments pour remplir votre menu avec d'autres pages. Pour cela, vous pourrez choisir des pages WordPress existantes, des publications ou des pages personnalisées (construites à l'aide d'AppPresser)…

…et cliquer sur le bouton WordPress/Liens externes vous donnera la possibilité d'inclure un lien vers l'une des pages de votre site WordPress :

Une fois votre menu renseigné (et le thème AppPresser installé), l'application pourra « exporter » le contenu de votre site et l'afficher automatiquement :

En moins d'une minute, vous venez d'ajouter une nouvelle page prête pour le mobile à votre application. Répétez le processus si nécessaire pour vos autres pages, avant d'envisager de créer des pages personnalisées.

Étape 3 : Ajoutez des pages personnalisées à votre application

Pour configurer des pages personnalisées, accédez à l'onglet approprié dans le personnalisateur. Comme pour votre menu standard, vous trouverez trois pages existantes : Accueil, Intro et À propos. À ce stade, vous pouvez choisir de réutiliser chacun d'eux pour votre propre application, ou simplement les ignorer et créer de nouvelles pages :

En cliquant sur le bouton Ajouter une nouvelle page , vous aurez deux options : utiliser du code HTML personnalisé pour créer votre nouvelle page…

…ou en choisissant parmi l'un des styles prédéfinis d'AppPresser, qui comprend un format de liste et une mise en page de carte :

Pour configurer l'un d'eux, vous devrez créer des pages de liste personnalisées à l'aide de l'API WordPress. Ensuite, collez simplement le lien vers votre nouvelle page dans le champ juste en dessous de l'un des styles intégrés de l'application :

Lorsque vous avez fini de bricoler vos pages personnalisées, il est temps de conclure en modifiant quelques paramètres supplémentaires pour votre application.

Étape 4: Personnalisez les paramètres de votre application

À ce stade, vous devriez avoir une application fonctionnelle - au moins dans le personnalisateur - mais qui arbore toujours l'icône et le logo AppPresser . Pour les remplacer, accédez à l'onglet Paramètres dans le personnalisateur :

Ici, vous pouvez indiquer les menus que vous souhaitez que votre application utilise. Pour l'instant, nous vous recommandons de vous en tenir à celui que vous avez créé précédemment, à moins que vous ne souhaitiez en configurer d'autres.

Si vous continuez à faire défiler vers le bas, vous verrez les options pour modifier le nom de votre application, sa description et les informations de votre auteur. Remplissez ces champs si nécessaire, puis continuez à faire défiler jusqu'à ce que vous atteigniez les sections d'icônes et d'images de démarrage :

Vous devrez télécharger des fichiers PNG ici pour chacune des options disponibles. Une fois cela fait, votre icône apparaîtra au-dessus de votre menu principal et vos écrans de démarrage s'afficheront lorsque votre application sera chargée.

Gardez à l'esprit qu'AppPresser inclut des informations sur la taille des images que vous devez télécharger, vous devez donc les respecter à moins que vous ne vouliez que vos images aient l'air déformées. Lorsque vous avez terminé ici, il est temps de mettre enfin votre application en service.

Que faire une fois que votre application est prête à être lancée

Pour terminer la création de votre application, vous devez accéder à la section Créer et prévisualiser dans le personnalisateur. Là, vous verrez une option pour entrer votre jeton d'authentification Phonegap. Pour les non-initiés, Phonegap est un framework que vous devrez utiliser pour installer votre application sur un appareil ou la soumettre aux magasins.

Après avoir mis à jour votre jeton, vous verrez une option pour compiler votre application, ce que le service fera pour vous. Ensuite, il suffit de le soumettre aux magasins Android et iOS (ou aux deux), d'attendre l'approbation et de créer un lien vers eux à partir de votre site Web habituel.

Si vous envisagez de distribuer votre application directement depuis votre site, nous vous le déconseillons, principalement pour des raisons de sécurité. De plus, les utilisateurs peuvent ne pas se sentir en sécurité en téléchargeant des applications qui n'ont pas été approuvées par l'un ou l'autre service, vos efforts peuvent donc être vains si vous ignorez l'étape de soumission. Bien sûr, les plugins WordPress tels que Easy Digital Downloads peuvent faire l'affaire, mais les mêmes considérations ci-dessus devraient toujours s'appliquer.

Conclusion

Construire une application pour votre site WordPress peut sembler exagéré, mais cela peut en fait être une idée intelligente. Après tout, des services tels qu'AppPresser ont rendu les choses plus faciles que jamais. De plus, une application peut être exactement ce dont vous avez besoin pour engager davantage vos utilisateurs mobiles grâce à des fonctionnalités telles que les notifications push.

Dans cet article, nous vous avons montré comment transformer votre site Divi en application mobile à l'aide d'AppPresser. Récapitulons rapidement les étapes :

1. Créez une nouvelle application et personnalisez son style.
2. Modifiez le menu de votre application.
3. Ajoutez des pages personnalisées à votre application.
4. Personnalisez les paramètres de votre application.

Vous avez des questions sur l'utilisation d'AppPresser pour créer des applications mobiles pour Divi ? Demandez dans la section commentaires ci-dessous!

Image miniature de l'article par 31moonlight31 / shutterstock.com