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 :
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