skip to Main Content

Comment créer une application mobile de votre site WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Savez-vous comment créer une application Android ou IOS de votre blog ou site Web sous WordPress ? Voulez-vous vous aussi avoir l’icône de votre site sur votre téléphone ? Oui ?

Mais toutes les options que vous avez essayées sont soit trop compliquées soit trop chères et c’est à contrecœur que vous avez jeté l’éponge car « trop dur pour vous ».

Et bien avant de jeter complètement l’éponge, nous allons essayer une nouvelle fois avec vous, une nouvelle approche appelée DIY, qui vous permettra à peu de frais de créer une application basique de votre site WordPress.

 PhoneGap-Built-image-tutoriel

PhoneGap Built: un moyen simple et rentable pour apporter votre site WordPress dans l’univers mobile de vos utilisateurs.

Les raisons pour lesquelles la création d’applications mobiles a explosé aujourd’hui est le faite qu’avoir une application mobile est devenu une forme de marketing qui augmenterait les chances de voir votre application être découverte par de nouveaux types de visiteurs .

Aujourd’hui, il s’agit de laisser à vos lecteurs le choix de décider de la façon de consulter votre contenu. Et bien sûr, avec la hausse continue de l’accès à internet via des appareils mobiles, avoir une application mobile est de plus en plus populaire.

La très bonne nouvelle est que la recherche de bons développeurs d’application maitrisant le CSS ou le Java n’est plus nécessaire pour créer une application mobile de votre site web WordPress.

Vous pouvez le faire gratuitement et très souvent sans frais. Vous pouvez également dépenser quelques $99/an pour rejoindre la communauté des développeurs IOS afin de créer et distribuer votre application (directement ou via l’App Store).

Permettez-moi aussi de dire autre chose tout à fait clair: il s’agit de créer une application mobile pour afficher le contenu de votre site WordPress sur les appareils mobiles de vos lecteurs. Il ne s’agit pas de créer des applications proprement dite en utilisant WordPress comme un Framework d’application.  

Comment ça marche ?

PhoneGap-Built-comment-ca-marche

PGB crée des applications beaucoup plus simplement

Cette solution est basée sur la création d’une simple application mobile , en utilisant le service PhoneGap Build (PGB) qui est vraiment à la hauteur de ses prétentions:

Prenez votre mal en patience si vous voulez développer des applications mobiles WordPress.

Le principal but de l’application sera de prendre l’InAppBrowser de l’appareil et le pointer vers la page d’accueil de votre site web. Comme si votre lecteur utilisait un navigateur web mobile. La beauté de cette approche est que tout est effectivement contrôlé dans WordPress en utilisant les outils, les techniques et les technologies que vous connaissez déjà.

Si vous souhaitez modifier l’apparence de votre application, vous n’avez qu’à faire une mise à jour du thème WordPress, pas besoin de déployer une mise à jour de l’application elle-même.

La solution est donc de 1% de l’application, 99% de WordPress. Ce qui signifie que vous devez, faire attention à ce que votre site WordPress délivre comme contenu. Même le thème le plus responsive est susceptible de ne pas faire le poids face aux applications mobiles. Vous devez vous assurer que vous avez optimisé l’expérience mobile, ce qui signifie: penser au thème, au contenu, aux menus et à l’interaction.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Ce tutoriel va donc se concentrer sur le renforcement de l’application et la mise en place de WordPress.

Téléchargez premièrement WordPress, ensuite, vous pourrez le tester par simple navigation sur un appareil mobile ou en utilisant un simulateur – avant de créer l’application. Et, rappelez-vous toujours que la suppression d’une application à partir d’un écran d’accueil est plus facile que de là mettre en place.

4 étapes pour créer une application mobile WordPress

Allons-y pas à pas pour créer notre application. Comme Android est facile, nous allons nous concentrer sur cet OS, mais gardons à l’esprit que le processus pour tout système d’exploitation est à peu près le même.

Avant de commencer

Si les applications web peuvent être facilement testées à l’aide d’émulateurs, les applications mobiles sont beaucoup plus faciles à tester sur un périphérique réel. Donc si vous n’avez pas un dispositif Android, vous ferez mieux de chercher à en trouver si vous voulez continuer à suivre ce tutoriel.

Si vous n’avez pas encore utilisé PGB, vous devez créer un compte. PGB possède un plan gratuit qui permet de créer une seule application privée (que vous pouvez créer en mettant en ligne un fichier zip) ou des applications open source illimitées.

Si vous êtes débutant avec PGB alors je vous recommande de l’utiliser en conjonction avec GitHub car cela rend le processus de mise à jour et la reconstruction de votre application beaucoup plus transparente. Cela signifie également que vous pourrez utiliser vos informations d’identification de GitHub pour vous connecter à PGB.

Étape 1. Créer les fichiers App PGB

PhoneGap-Built-creer-les-fochiers-de-l-application

La plupart des fichiers de cette application sont les logos et les écrans de démarrage!

La structure est très simple, avec un répertoire racine contenant les fichiers index.html, config.xml. Très important!, un ensemble de fichiers d’icônes au format png par défaut et un répertoire res qui contient les icones des OS spécifiques pour les écrans d’accueil et des pages de garde.

Vous pouvez télécharger cette application et l’utiliser pour démarrer facilement .

Étape 2. Créer les icônes de l’application

Les icônes de l’application sont importantes: ce sont elles que l’application va utiliser lors de l’ajout d’une icône à l’écran d’accueil de l’appareil. Pour générer les icônes, utiliser un des services suivants: appiconsizes ou makeappicon. Après la création de ces icônes, mettez en ligne les images appropriées dans le dossier approprié.

Étape 3. Configuration de l’application

Toute la configuration est contenue dans le fichier config.xml. Pour votre propre application, vous devez modifier les éléments suivants:

  • widget de @ id – la convention est d’inverser le nom de domaine de votre site web et ajouter un suffixe à l’application
  • name – le titre de votre site
  • Description – une brève description de votre site
  • auteur (@ mail, @ href) – vos coordonnées
  • content @ src – changer ceci et pointer là sur la page d’accueil de votre site web
  • Access @ origin – il détermine quels sites web l’application peut parcourir. Les deux possibilités sont: saisir votre nom de domaine et donc limiter l’application à ne parcourir que votre site web ou d’utiliser ‘*’ et permettre à l’application de parcourir n’importe quel site.

Il y a un certain nombre d’éléments du plugin dans ce fichier de configuration, parmi lesquels certains ne vous seront pas utiles. Toutefois, il est quand même important de créer vos applications en exploitant certains de ces plugins pour profiter des fonctionnalités telles que la géolocalisation sans avoir à recréer votre application.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Vous remarquerez aussi qu’il y a un certain nombre d’icônes de l’application qui seront utilisées pour l’écran d’accueil de l’appareil et pour les pages de démarrage de l’application. Si vous avez déplacé les icônes générées dans les dossiers exacts alors vous n’aurez rien à faire ici.

Soyez juste conscient, cependant, que les noms sont sensibles à la casse!

Étape 4. Lançons le processus de génération PGB

Allez sur le site PGB et connectez-vous, vous vous retrouverez face à l’écran Applications qui sera vide, bien sûr.

PhoneGap-Built-demarrer-le-processus-de-creation-de-l-application

PhoneGap Build est beaucoup plus facile lorsqu’il est utilisé en conjonction avec GitHub

En supposant que vous êtes connecté à votre compte GitHub et que vous allez créer une application open-source. Tous vos dépôts publics GitHub seront disponibles dans le « find existing repo« , il suffit de cliquer sur la flèche, sélectionnez votre répertoire et cliquez sur pull from GitHub repository.

PGB ira dans votre répertoire et vous présentera un écran de détails d’applications.

PhoneGap-Built-ecran-des-applications

Une fois que PGB a été chargé dans les fichiers de GitHub, vous serez prêt à créer votre application.

Cliquez sur Ready to build

La page change alors pour vous donner la progression de la création de votre application. Par défaut, PGB essaie de créer une application pour iOS, Android et Windows 8. Rouge signifie que la génération a échoué, tandis que le bleu indique une création réussie.

PhoneGap-Built-processus-de-creation

PGB va essayer de créer une application pour Android, iOS et Windows. Le bleu signifie que la création a été réussie.

iOS échouera toujours à moins que vous ayez fournis à PGB vos certificats de développeur iOS qui nécessite une adhésion à l’iOS Developer Program comme je l’ai mentionné plus tôt.

Espérons, cependant que la création de l’application Android a été réussie et que vous êtes prêt à tester!

Vous pouvez télécharger le fichier .Apk en cliquant sur l’icône Android. Mais il existe aussi d’autres méthodes pour récupérer ce fichier.  Cependant, et quelle que soit la méthode utilisée, vous devriez trouver l’icône de votre application sur votre écran d’accueil (si l’icône ne ressemble à pas ce que vous attendiez, alors il est probable que vous ayez fourni une URL erronée dans le fichier config.xml).

Cliquez sur l’icône de votre application et celle-ci s’ouvrira et vous serez accueilli par l’écran de démarrage, puis la première page de votre site web. (En fonction de la spécification de l’appareil il peut y avoir de légers retards dans le déplacement de l’écran d’accueil sur le site).

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Félicitations, vous venez de créer votre première application WordPress!

Maintenant tout dépendra de la façon dont vous avez mis en place votre site WordPress, mais l’avantage est que désormais vous aurez seulement besoin de travailler dans WordPress pour apporter des améliorations.

Si pour une raison quelconque, une image URL est incorrecte, vous devez recréer  l’application :

  • Mettre à jour les fichiers de votre répertoire GitHub
  • Aller à la page applications dans PGB et cliquez sur  Update Code – les fichiers seront chargés dans votre repertoire GitHub
  • PGB devrait lancer automatiquement le processus de recréation – sinon Régénérer tout

Mais, si vous voulez profiter de plus de capacités de l’appareil mobile, alors ça vaut la peine de jeter un œil de plus près chez AppPresser.

Mais si vous avez seulement besoin de donner à vos lecteurs un choix en leur fournissant une application mobile, alors ce processus vous aidera à le faire.

Nous espérons que ce tutoriel vous a aidé à créer une application mobile de votre site WordPress. Si vous avez des suggestions ou remarques, n’hésitez pas à les partager avec nous dans notre section dédiée aux commentaires.

Cet article comporte 9 commentaires
  1. Article intéressant ! Tellement de choses sont réalisables avec WordPress, outil presque indispensable !
    Bonne continuation dans la rédaction de vos articles !

  2. J’ai créé mon application mobile grâce au site http://www.mobyview.com ils m’ont accompagné dans la création de mon application et l’ont publié en très peu de temps. 10 jours entre le brainstorming et la publication sur l’AppStore ! Je recommande vivement !

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
40 Partages
Partagez36
Tweetez3
Enregistrer1