• Articles
• admin

Comment créer une version mobile d’un site Web WordPress

Admettez-le: Avoir une version mobile belle et entièrement fonctionnelle de votre site Web WordPress est un must, étant donné que le volume important de la navigation sur Internet provient d’appareils mobiles. Il est facile de créer un site Web mobile avec WordPress chez Namecheap, que vous vous abonniez à l’hébergement partagé ou à l’hébergement WordPress EasyWP.

Vous avez peut-être déjà remarqué que parfois, les versions web et mobiles d’un même site Web ont un contenu un peu différent. Ceci est fait pour exclure des fonctionnalités spécifiques de la version mobile de WordPress car elles peuvent apparaître ou fonctionner de manière incorrecte, ou simplement être écrasantes sur un écran plus petit. De plus, l’algorithme du moteur de recherche Google classe les sites adaptés aux mobiles plus haut.

Dans cet article, nous aborderons plusieurs façons de rendre votre site Web WordPress convivial pour les mobiles:
Créer des Sites avec un design réactif: Le même contenu et la même URL sont chargés sur chaque appareil, mais CSS est utilisé pour modifier le rendu de la page en fonction de la résolution d’affichage mobile.
Sites de service dynamiques : Une URL est chargée, mais différents contenus et CSS sont utilisés, selon l’appareil utilisé.
Création d’URL distinctes pour les ordinateurs de bureau et les appareils mobiles : Différentes URL et donc des sites Web sont chargés, par exemple, nctest.info et m.nctest.info

Gardez à l’esprit que chaque façon a ses avantages et ses inconvénients, c’est pourquoi nous recommandons de faire une recherche SEO avant de continuer.
Conception Web réactive
La conception Web réactive utilise des requêtes multimédias CSS3. Media Queries est un module CSS3 permettant au rendu de contenu de s’adapter à des conditions telles que la résolution de l’écran, la largeur et la hauteur, l’orientation.
Habituellement, le fichier que vous devrez modifier est style.CSS. Il se trouve dans le répertoire /wp-content/themes/theme_name/.
Une requête multimédia CSS3 ressemble généralement à:
@media only screen et (max-width: 480px) {
}
C’est un code conditionnel qui indique au navigateur d’ajuster tous les paramètres de style si la taille de l’écran est inférieure ou égale à 480px.
Pour être plus granulaire, vous pouvez ajouter des intervalles de largeur minimale et de largeur maximale afin de cibler différents périphériques:
écran @media only et (largeur minimale: 768px) et (largeur maximale: 959px) {
}
Tous les autres ajustements de style doivent être ajoutés entre les {…} support.
À titre d’exemple, nous prendrons le thème Twenty Ten default qui ne répond pas par défaut.
Le premier code définit la taille d’image principale du thème à 550 pixels :
#access.en-tête de menu, div.menu, #colophon, #branding, #main, #wrapper, #site-title {
largeur: 550px;
}
Comparez l’apparence du site Web dans ce cas sur un appareil mobile:

Bien que, comme vous pouvez le voir, tous les éléments ne soient pas ajustés à l’écran de l’appareil. Vous devez ajuster séparément tous les éléments que vous avez sur votre site Web – image d’en-tête, description du blog, largeur de la barre de navigation, position de la couche de contenu, etc.
Il est possible de masquer certains d’entre eux, comme des curseurs ou des images d’en-tête par exemple. De cette façon, l’apparence de la version mobile de votre site Web sera optimisée et conviviale.
Le code suivant doit être utilisé (par exemple, pour l’image d’en-tête):
#branding img {
display:none;
}
Si vous souhaitez redimensionner l’élément (image d’en-tête dans l’exemple), utilisez
#branding img {
width:100%
}
REMARQUE : Modification du style.le fichier css nécessite également des connaissances en développement Web. N’oubliez pas de sauvegarder votre fichier avant de le modifier.
Une fois que toutes les parties de votre site Web sont ajustées en conséquence, il devrait avoir une belle apparence sur les appareils mobiles:

La plupart des thèmes WordPress sont créés pour être réactifs – lors de l’installation d’un nouveau thème, vous pouvez également vérifier son aspect attaché sur les appareils mobiles.
S’il n’y en a pas et que vous n’êtes pas sûr que le thème que vous avez aimé soit réactif ou non, vous pouvez le définir dans les filtres de fonctionnalités lors de la recherche du thème.
1. Connectez-vous à votre tableau de bord d’administration WordPress (yourdomain.com/wp-admin ), accédez au menu Apparence, cliquez sur Thèmes.
2. Cliquez sur Ajouter un nouveau:

3. Cliquez sur Filtre d’entités et vérifiez la mise en page réactive. Vérifiez d’autres options si nécessaire pour trouver un thème souhaité.
4. Cliquez sur Appliquer les filtres:

Dans quelques instants, vous verrez la liste des thèmes qui correspondent aux fonctionnalités de recherche que vous avez définies.
Sites Web de service dynamique
Vous pouvez également configurer différents CSS et contenus à extraire en fonction du type d’appareil. Cela peut être réalisé au moyen des plugins WordPress. La plupart d’entre eux ont un certain nombre de paramètres de base disponibles gratuitement.
À titre d’exemple, nous utiliserons l’un des plugins les plus populaires pour concevoir des blogs adaptés aux mobiles – le plugin mobile WPtouch.
Tout d’abord, vous devez l’installer et l’activer dans le tableau de bord d’administration.
Une fois cela fait, vous devez choisir un thème pour votre version mobile du site Web – accédez au menu WPtouch, cliquez sur Thèmes & Extensions (1). Choisissez le thème requis et cliquez sur Configuration (2):

Une fois la configuration terminée, vous pourrez apporter les modifications et corrections nécessaires. Les options du plugin permettent d’effectuer beaucoup d’actions, et la plupart d’entre elles sont explicites.
Voici à quoi ressemble le menu du plugin mobile WPtouch:

Une fois tous les ajustements terminés, enregistrez les modifications et vérifiez l’affichage du site Web sur un ordinateur de bureau et un appareil mobile:

La création d’URL distinctes pour les appareils de bureau et mobiles
La dernière méthode prend le plus de temps car vous devrez :
1. Créez un sous-domaine correspondant pour votre version mobile, comme m.nctest.info .
2. Développez ou copiez le contenu du site dans le chemin du répertoire de sous-domaine créé.
3. Installez et configurez un plugin de redirection mobile.
REMARQUE: Si vous optez pour cette option, gardez à l’esprit que les deux versions de votre site Web ne seront pas automatiquement synchronisées, car techniquement, ce sont des installations différentes. Toutes les modifications que vous apportez devront être répliquées pour l’autre version.
Une fois le sous-domaine créé et le site Web ajusté, installez le plugin dans le tableau de bord principal de l’administration du site Web.
À titre d’exemple, nous utiliserons le plugin de redirection de site mobile.
1. Accédez au menu Paramètres et cliquez sur Redirection du site mobile.
2. Insérez l’URL mobile que vous souhaitez avoir. Vérifiez les options supplémentaires si nécessaire.
3. Cliquez sur Mettre à jour les paramètres:

REMARQUE: Nous ne fournissons pas de services de débogage de code et de développement de sites Web. Cet article est fourni par courtoisie pour votre commodité uniquement.Si vous rencontrez des problèmes avec la version mobile de votre site Web, nous vous suggérons de vous référer aux forums d’assistance ou de contacter le développeur du site Web.
C’est tout!