Comment masquer les Widgets WordPress sur les affichages Mobiles

QuestionsCatégorie: WordpressComment masquer les Widgets WordPress sur les affichages Mobiles
pierreseo personnel asked 3 mois ago

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

1 Réponses
Best Answer
pierreseo personnel answered 3 mois ago

Bon c’est vrai qu’aujourd’hui la plupart des templates permettent de gérer cela, et moi je vous conseillerais plutôt de rediriger toutes vos pages mobiles sur une version AMP, mais enfin, cela peut être encore utile à certain.

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