Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment masquer un widget WordPress sur mobile (facile pour les débutants)

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

Vous souhaitez masquer un widget WordPress spécifique pour les utilisateurs/utilisatrices mobiles ?

Les widgets sont des contenus dynamiques qui s’affichent souvent dans la colonne latérale ou le pied de page du site. Il arrive qu’un widget s’affiche bien sur un ordinateur de bureau ou un ordinateur portable, mais pas sur des appareils mobiles plus petits.

Dans cet article, nous allons vous afficher comment masquer un widget WordPress sur les appareils mobiles sans écrire de code.

Hiding a WordPress widget on mobile devices

Pourquoi masquer un widget sur mobile dans WordPress ?

Votre site peut être très attrayant sur les écrans d’ordinateur de grande taille, mais cela ne signifie pas nécessairement qu’il le sera également sur les écrans plus petits.

Même si la mise en page ne semble pas immédiatement encombrée lors de la vue de la version mobile de votre site WordPress, il est important de toujours défiler jusqu’en bas.

Dans la plupart des thèmes WordPress responsive, les widgets s’affichent à différents endroits en fonction de la taille de l’écran de l’internaute. Souvent, les thèmes WordPress déplacent les widgets tout en bas de la page.

Prenons un exemple.

L’image suivante affiche l’apparence d’un site sur un ordinateur de bureau. Comme vous pouvez le constater, le widget de recherche apparaît en haut de la colonne latérale.

The widgets showing in the sidebar on a desktop

Cependant, le widget de la colonne latérale apparaît sous le contenu lorsqu’il est vu sur un smartphone.

Cela signifie que les internautes devront défiler tout en bas de la page afin de rechercher vos publications de blog, vos produits WooCommerce ou d’autres contenus.

The search widget displaying beneath the content on mobile

Pire encore, ce comportement peut parfois entraîner l’apparition de deux widgets identiques l’un à côté de l’autre.

Par exemple, de nombreux propriétaires de blogs WordPress placent un widget « Articles récents » à la fois dans la colonne latérale et dans le pied de page. Si ces widgets se déplacent, les internautes mobiles risquent de voir les mêmes widgets les uns à côté des autres.

Ceci étant dit, voyons comment vous pouvez facilement masquer un widget sur mobile dans WordPress.

Comment masquer un widget sur mobile dans WordPress

La façon la plus simple de masquer les widgets pour les utilisateurs/utilisatrices mobiles est d’utiliser l’extension Widget Options. Cette extension vous permet d’afficher différents widgets en fonction de la date, du rôle de l’utilisateur, de l’appareil, et plus encore.

Tout d’abord, vous devez installer et activer l’extension Widget Options. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, vous devez vous rendre sur la page Apparence  » Widgets dans votre Tableau de bord WordPress.

The widgets section of the WordPress admin

Sur cet écran, vous verrez tous les widgets que vous avez ajoutés à votre site WordPress.

Pour modifier un widget, il suffit de cliquer sur son nom.

Expand your widget to view the options

Dans les réglages du widget, vous verrez quelques nouvelles sections ajoutées par l’extension Widget Options.

Pour commencer, cliquez sur la petite icône mobile et assurez-vous que le menu déroulant  » Masquer/Afficher  » affiche  » Masquer sur les appareils cochés « .

How to hide and show widgets to mobile users

Ensuite, il suffit de cocher chaque appareil sur lequel vous souhaitez masquer le widget.

Vous voudrez généralement cocher la case située à côté de « Tablette » et « Mobile ».

Hiding a widget on mobile devices

Cliquez ensuite sur le bouton « Enregistrer » pour stocker vos modifications.

Allez maintenant visiter votre site WordPress à l’aide d’un appareil mobile. Le widget n’apparaîtra plus dans la zone des widgets.

The search widget is now gone from the mobile version of the website

Comment faire une version mobile d’un widget dans WordPress

Il peut arriver que vous souhaitiez afficher une version d’un widget aux internautes mobiles et une autre aux utilisateurs/utilisateurs d’ordinateurs de bureau.

Par exemple, vous pourriez vouloir afficher vos cinq publications les plus récentes sur l’ordinateur de bureau, mais uniquement trois publications sur les appareils mobiles afin que l’écran ne paraisse pas encombré.

Pour ce faire, il vous suffit d’ajouter deux widgets Articles récents distincts à votre site. En savoir plus, veuillez consulter notre guide étape par étape sur l’ajout de widgets dans WordPress.

Vous pouvez ensuite configurer un widget pour qu’il apparaisse sur les ordinateurs de bureau et l’autre pour qu’il apparaisse sur les appareils mobiles.

Tout d’abord, ouvrez le widget que vous souhaitez afficher aux utilisateurs/utilisatrices de l’ordinateur. Cliquez ensuite sur la petite icône mobile et assurez-vous que le menu déroulant « Masquer/Afficher » est défini sur « Masquer sur les appareils vérifiés ».

Ensuite, cochez les cases situées à côté de « Tablette » et « Mobile ».

Displaying a widget on desktops only

Désormais, ce widget apparaîtra uniquement aux internautes utilisant un ordinateur de bureau.

Ensuite, vous pouvez apporter des modifications au widget. Par exemple, nous saisissons « 5 » dans la case située à côté de « Nombre de publications à afficher ».

Lorsque vous avez terminé, n’oubliez pas d’appuyer sur le bouton « Enregistrer » pour stocker vos Réglages.

Saving widget settings in WordPress

Vous êtes ensuite prêt à rendre le second widget uniquement mobile.

Il suffit de répéter le même processus décrit ci-dessus, mais cette fois, cochez la case à côté de  » Desktop  » pour masquer le widget sur les appareils de bureau.

Showing a WordPress widget on mobile devices but not on desktops

Vous pouvez maintenant apporter des modifications à votre widget mobile. Par exemple, vous pouvez taper « 3 » dans le champ « Nombre de publications à afficher ».

Comme toujours, cliquez sur « Enregistrer » lorsque vous avez terminé. Vous disposez désormais d’une version ordinateur et d’une version mobile du même widget.

Nous espérons que cet article vous a aidé à apprendre comment masquer un widget sur les appareils mobiles sur WordPress. Vous pourriez é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é sur WordPress sans écrire de code.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

13 commentairesLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Hajime says

    Thank you for the easy to understand guide. However, in my AvadaTheme, the device selection tab and checkboxes do not seem to appear.
    My AvadaTheme is V7.6.1. Is there a difference in specifications between versions?

    • WPBeginner Support says

      There may be a conflict between the plugin and your theme, we would recommend checking with the plugin’s support and they should be able to assist!

      Administrateur

  3. FRB Dogs "Rich" says

    This was a great article to quickly allow me to hide extraneous footers that look like duplicates when on a mobile display as the side & footers were on the bottom. I hide one of them on a mobile device and voila! Looks so much more professional. Thank you!

    • WPBeginner Support says

      For a question like that, you would want to reach out to the plugin’s support and they would be able to let you know the current method being used.

      Administrateur

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.