Comment masquer les Widgets WordPress sur les affichages Mobiles


()

Les pages mobiles doivent être le plus rapide possible, voici une technique pour masquer les Widgets WordPress sur les affichages Mobiles.

Bon c’est vrai qu’aujourd’hui la plupart des templates permettent de gérer cela.

Certains nouveaux templates pour mobiles n’affichent pas les Widgets ou permettent de les désactiver au cas par cas, si vous n’avez pas cette possibilité, vous pouvez les désactiver avec juste un plugin et quelques modifications faciles.

Masquer les Widgets WordPress sur les Mobiles

Première étape pour masquer vos Widgets

Il vous faut d’abord installer un Plugin WordPress gratuit : ZigWidgetClass ou Widget CSS Classes, en privilégiant le premier.

Deuxième étape pour masquer vos Widgets

Vous devez ensuite ajouter un code CSS personnalisé dans votre template CSS.

Le mieux, pour ne pas avoir à remettre le code à chaque mise à jour de votre template, c’est d’ajouter le code dans le CSS personnalisé de votre thème (Custom CSS).

Si vous n’avez pas cette possibilité avec votre template, pas de problème, vous pouvez utiliser ce plugin gratuit : Custom CSS Manager.

Vous devez y ajouter le code suivant:

@media only screen and (max-width:480px) {
.hide_on_mobile {
display: none !important;}
}

Cela masquera l’affichage des Widgets sur tous les écrans de taille égal ou inférieur à 480px, enfin pas tous les Widget, seuls ceux qui auront la classe css : hide_on_mobile (explication ci-dessous).

Troisième étapes pour masquer les Widgets

Maintenant, il faut ajouter la classe CSS : « hide_on_mobile » aux widget que vous voulez masquer sur un appareil mobile.

Rien de plus facile, vous devez aller dans Apparence et cliquez sur « Widgets« .

Maintenant, grâce au Plugin ZigWidgetClass, tous vos Widgets ont une nouvelle case nommée : CSS classes :

Masquer-les-widgets-sur-mobiles-300x293
Il vous suffit maintenant, comme sur la photo, de rajouter : hide_on_mobile à tous les Widgets que vous voulez masquer sur les petits écrans et le tour est joué !

PS : Avant de dire que cela ne marche pas, pensez à vider vos caches


Source : woorkup.com

Est-ce que cet article vous a été utile ?

Cliquez sur les étoiles pour le noter !

Note moyenne / 5. Décompte des votes :

Aucun vote jusqu'à présent ! Soyez le premier à noter ce billet.

Comme vous avez trouvé ce post utile....

Partagez le sur vos réseaux sociaux 😉 !

Nous sommes désolés que ce billet ne vous ait pas été utile !

Améliorons ce post !

Dites-nous comment nous pouvons améliorer ce post ?

pierreseo

Webmaster depuis quelques années, j'ai créé ce site pour permettre à tout le monde de découvrir ou partager des astuces utiles pour le Webmastering.

Vous aimerez aussi...

Laisser un commentaire

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