Vous souhaitez masquer un widget WordPress spécifique pour les utilisateurs mobiles ?
Les widgets sont des contenus dynamiques qui sont souvent ajoutés dans la barre latérale ou le pied de page du site Web. Parfois, un widget peut avoir l’air bien sur les appareils de bureau / portables, mais vous voudrez peut-être le masquer sur les appareils mobiles.
Dans cet article, nous allons vous montrer comment masquer de manière conditionnelle un widget WordPress sur les appareils mobiles (sans écrire de code).
Noter: Dans la plupart des thèmes WordPress réactifs, la barre latérale apparaîtra sous votre contenu sur les appareils mobiles. C’est pourquoi les propriétaires de sites Web souhaitent souvent masquer certains widgets sur mobile pour accélérer la vitesse de leur site Web pour les utilisateurs mobiles.
Comment masquer un widget sur mobile dans WordPress
Pour les besoins de ce didacticiel, nous masquerons le widget de recherche sur notre site de démonstration, mais vous pouvez l’utiliser pour masquer n’importe quel widget WordPress.
Sur notre site de démonstration, le widget de recherche apparaît en haut de notre barre latérale, et il a l’air bien sur le bureau.
Cependant, sur un téléphone mobile, les widgets de la barre latérale s’affichent sous le contenu plutôt qu’à côté :
Nous allons masquer le widget de recherche afin qu’il ne s’affiche que sur les ordinateurs de bureau et non sur les appareils mobiles.
Noter: Dans ce didacticiel, le terme « ordinateurs de bureau » inclut les ordinateurs portables ainsi que les ordinateurs de bureau classiques.
Tout d’abord, vous devez installer et activer le Options des widgets brancher. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, accédez à la Apparence » Widgets page dans votre zone d’administration WordPress.
Sur cet écran, vous verrez vos widgets actifs placés dans les zones prêtes pour les widgets de votre site Web.
Allons de l’avant et éditons le widget de recherche en cliquant sur le nom du widget :
Dans les paramètres du widget, vous verrez une nouvelle section ajoutée par le plugin Widget Options. Ici, cliquez simplement sur la petite icône mobile, puis choisissez le ou les appareils sur lesquels vous souhaitez masquer le widget.
N’oubliez pas de cliquer sur le bouton « Enregistrer » pour enregistrer vos modifications.
Maintenant, allez-y et consultez votre site à l’aide d’un appareil mobile. Ce widget n’apparaîtra plus dans votre zone de widget :
Mais, et si vous vouliez masquer un widget sur les appareils de bureau mais l’afficher sur les écrans mobiles ?
Voyons comment procéder.
Comment créer une version mobile d’un widget dans WordPress
Parfois, vous voudrez peut-être avoir une version d’un widget pour les visiteurs de bureau et une autre pour les visiteurs mobiles.
Par exemple, vous souhaiterez peut-être afficher vos cinq publications les plus récentes sur le bureau, mais seulement trois publications sur les appareils mobiles.
C’est aussi facile à faire avec le plugin Widget Options. Vous pouvez simplement créer deux widgets et définir un widget pour qu’il s’affiche uniquement sur le bureau et l’autre pour qu’il s’affiche uniquement sur les appareils mobiles.
Tout d’abord, ajoutez ou ouvrez le widget que vous souhaitez afficher uniquement sur le bureau. Ensuite, cliquez sur la petite icône mobile. Après cela, cochez simplement les cases « Tablette » et « Mobile » pour masquer le widget sur ces appareils :
N’oubliez pas d’appuyer sur le bouton Enregistrer pour enregistrer vos modifications.
Maintenant, ajoutez ou ouvrez le widget que vous souhaitez afficher uniquement sur les appareils mobiles. Répétez le même processus, mais cette fois, cochez la case « Bureau » pour masquer le widget sur les appareils de bureau :
C’est ça. Vous disposez désormais d’une version desktop et d’une version mobile de votre widget.
Nous espérons que cet article vous a aidé à apprendre à masquer un widget sur les appareils mobiles dans WordPress. Vous pouvez également consulter notre liste des meilleurs constructeurs de pages WordPress par glisser-déposer pour personnaliser votre site, ou comment créer un thème personnalisé dans WordPress (sans écrire de code).
