Comment masquer la barre latérale pour les appareils mobiles dans WordPress

Si vous lisez ceci, vous avez probablement réalisé qu’il n’est pas nécessaire d’avoir une barre latérale sur les appareils mobiles. Cet Itechguide vous apprend à masquer la barre latérale pour mobile dans WordPress.

Pour la plupart des thèmes WordPress, lorsque vous ajoutez des widgets de barre latérale – principalement destinés aux écrans plus grands – ces widgets de barre latérale s’affichent également sur les appareils mobiles.

Dans un premier temps, sur un appareil mobile, une barre latérale n’est plus une “barre latérale” mais plutôt une “barre inférieure”. De plus, sur les appareils mobiles, les barres latérales s’affichent après le message principal, ce qui va à l’encontre de leur objectif.

De plus, avoir des barres latérales inutiles sur les appareils mobiles peut contribuer à ralentir les temps de chargement sur ces appareils.

Certains thèmes WordPress peuvent avoir la possibilité de personnaliser les barres latérales par appareils. Si votre thème offre cette fonctionnalité, veuillez l’utiliser.

Cependant, si votre thème n’offre pas cette option, suivez les étapes de ce guide pour masquer la barre latérale sur les appareils mobiles.

Certaines des étapes de ce guide nécessitent des compétences CSS de base. Cependant, même si vous ne connaissez rien au CSS et aux feuilles de style, je vais vous guider pas à pas.

Voici les étapes de haut niveau pour masquer la barre latérale pour les appareils mobiles dans WordPress :

1. Trouvez l’ID div de la barre latérale pour votre thème
2. Ajoutez le CSS qui masque la barre latérale des appareils mobiles
3. Effacer le cache et tester

Si vous avez un site de développement ou de développement, je vous recommande fortement de tester ces étapes sur votre site de développement avant de le mettre en ligne.

Parcourir les sujets de publication

• Trouvez l’ID DIV de la barre latérale pour votre thème
• Ajouter le CSS qui masque la barre latérale pour les appareils mobiles dans WordPress
• Effacer le cache et tester

Trouvez l’ID DIV de la barre latérale pour votre thème

Masquer la barre latérale sur les appareils mobiles dans WordPress implique essentiellement de modifier la div de la barre latérale avec CSS. Cependant, pour modifier la div avec CSS, vous avez besoin de l’ID div.

Veuillez effectuer cette tâche sur un ordinateur portable ou de bureau PC ou Mac – PAS sur un appareil mobile.

Suivez les étapes ci-dessous pour trouver l’ID div de la barre latérale du thème que vous utilisez pour votre site Web WordPress :

1. Ouvrez une publication ou une page sur Google Chrome ou le nouveau navigateur Microsoft Edge.
2. Ensuite, faites un clic droit n’importe où sur la barre latérale et sélectionnez Inspecter.

3. L’élément Inspect ouvrira des codes sur la droite de la page. Celui-ci a une partie supérieure (étiquetée 1 dans la capture d’écran ci-dessous). Il a également une partie inférieure (étiquetée 2 dans la capture d’écran).

En partie basse, le modes L’onglet sera sélectionné par défaut. Pour localiser votre ID div sidebar, recherchez un élément avec le mot « sidebar ». Certains thèmes peuvent simplement utiliser la “barre latérale”. D’autres peuvent utiliser “sidebar-main” ou “main-sidebar”.

Notez ceci car il s’agit de l’ID div de votre barre latérale de thèmes. Le mien est “barre latérale”. Copiez-le car vous en aurez besoin à l’étape suivante.

Ajouter le CSS qui masque la barre latérale pour les appareils mobiles dans WordPress

L’étape suivante consiste à ajouter ce code à la section “CSS supplémentaire” de votre thème WordPress. C’est le code qui cache les barres latérales pour les appareils mobiles dans WordPress.

J’ai mis en gras l’ID div de la barre latérale pour mon thème. Vous devez remplacer cette valeur par l’ID div de la barre latérale pour votre thème. Notez le point (.) avant l’ID div.

@media (max-width: 768px)
 .sidebar {
     display: none;
 }

Suivez les étapes ci-dessous pour ajouter le code CSS ci-dessus à votre thème :

1. Connectez-vous à votre site WordPress en tant qu’administrateur.
2. Ensuite, dans le volet de gauche, flotter plus de Apparence et sélectionnez Personnaliser.

3. Lorsque l’option Personnaliser s’ouvre, faites défiler vers le bas et cliquez sur CSS supplémentaire.

Si votre thème WordPress n’offre pas cette option, ouvrez les options du thème et trouvez un endroit pour ajouter du CSS personnalisé.

4. Enfin, copiez, collez et modifiez ce code dans l’une des sections – puis, en haut, cliquez sur Publier.

N’oubliez pas de changer .sidebar à l’ID div de la barre latérale de la dernière section.

@media (max-width: 768px)
 .sidebar {
     display: none;
 }

Il peut également être judicieux d’ajouter un commentaire décrivant ce que fait le code et probablement la date à laquelle il a été ajouté. Vous pouvez copier mon commentaire et le modifier comme vous le souhaitez. Quoi que vous fassiez, ne supprimez pas /* et */ – ce sont les codes qui font tout ce qui se trouve entre un commentaire et ne fait partie d’aucun code CSS.

/* Remove sidebar from mobile devices -3rd April 2021*/

Effacer le cache et tester

Pour être clair, la dernière section masquait efficacement la barre latérale pour les appareils mobiles dans WordPress. Cependant, j’ai décidé d’ajouter cette section car si vous utilisez un plugin de mise en cache ou un CDN, vous devrez vider le cache pour que les modifications prennent effet immédiatement.

Après avoir vidé le cache du plug-in de mise en cache et/ou du CDN, ouvrez le site Web sur un appareil mobile. Si le changement ne se reflète pas immédiatement, utilisez Incognito (Chromé) ou En privé (Microsoft Edge).

J’espère que vous avez pu masquer la barre latérale pour les appareils mobiles dans votre site WordPress avec les étapes de ce guide.

J’espère également que vous avez trouvé le guide utile et facile à comprendre ? Si vous avez trouvé le guide utile, cliquez sur Oui à “Ce message était-il utile ?” au dessous de.

Vous pouvez également faire part de vos commentaires avec le formulaire “Laisser une réponse” qui se trouve à la fin de cette page.