Quelques méthodes pratiques pour masquer la barre latérale de WordPress sur mobile

Sur les ordinateurs, les barres latérales sont souvent utilisées pour placer du contenu tel que des recherches, des catégories, des publicités ou des articles recommandés, mais sur les téléphones mobiles, ces zones encombrent souvent l'espace du contenu principal, ce qui nuit à l'expérience de lecture. Afin de rendre l'accès mobile plus fluide, de nombreux webmasters choisissent de masquer la barre latérale sur les téléphones mobiles. Cet article présente plusieurs méthodes courantes pour la masquer sur les appareils mobiles sans affecter l'affichage sur l'ordinateur. Barre latérale WordPressIl est facile à utiliser et ne nécessite pas de réglages complexes.

I. Pourquoi cacher la barre latérale mobile ?

• Améliorer la fluidité de la lectureLes écrans des téléphones portables sont plus petits et les barres latérales ont tendance à encombrer la page.
• Chargement plus rapideLes composants de l'appareil : Évitez de charger des composants inutiles.
• Réduire le taux de rebondLes utilisateurs mobiles se concentrent davantage sur le contenu principal et l'élimination des distractions permet de retenir plus facilement les visiteurs.
• Améliorer l'expérience de l'utilisateurÉvitez de toucher accidentellement les petits éléments tels que les petites icônes, les liens, etc.

II. l'utilisation de CSS media queries pour masquer la barre latérale

C'est le moyen le plus simple dePas de plug-in, pas d'impact RÉFÉRENCEMENTLa plupart des sujets peuvent être abordés dans le cadre de ce programme.

Exemple de code :

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

Utilisation :

• Connectez-vous au backend de WordPress pour aller dans la sectionApparence → Personnalisé "

• Trouvez le CSS supplémentaire, collez le code ci-dessus et enregistrez-le.

Troisièmement, les utilisateurs d'Elementor masquent la méthode de la barre latérale

Elementor constructeur de pagesLes opérations suivantes peuvent être effectuées :

• Modifier la page → vérifier le conteneur où se trouve la barre latérale
• Cliquez sur le bouton "¡§§".Avancé" → "Réactif"Onglets
• Cochez"Cacher sur mobile"

cette approcheN'affecte pas la présentation du bureauIdéal pour les utilisateurs de pages personnalisées

.

IV. utiliser les paramètres du thème pour masquer

Certains thèmes (par exemple Astra, GeneratePress, OceanWP) sont livrés avec les éléments suivantsréactifParamètres de mise en page qui peuvent être :

• partir pour"Apparence → Personnaliser

• Trouver le "-".une barre latérale (dans un logiciel)"Mise en place
• Mise en place de la fonction "Mise en page mobile"pour"pas de barre latérale"

Cinquièmement, à l'aide de modules d'extension (plug-ins) pour atteindre les objectifs suivants

Si vous ne souhaitez pas écrire de CSS, vous pouvez également utiliser le plugin pour contrôler librement les règles d'affichage de la barre latérale.

• Options des widgets Fournir l'option "Device Show" pour chaque gadget, supporter l'activation/masquage par type d'appareil.

• Elementor Pro(Affichage conditionnel) Prise en charge de l'affichage des blocs par appareil, conditions personnalisées, mais nécessité d'êtreversion payanteSoutien.

VI. notes et recommandations

• La méthode de masquage doit être réservée aux mobiles pour éviter d'affecter l'expérience des ordinateurs de bureau.
• Il est recommandé de sauvegarder le thème ou l'enfant avant l'opération.thématiqueCSS
• Utilisez le plugin de cache, videz le cache et testez ensuite l'effet de cache.
• L'authentification peut se faire via le mode "appareil mobile" du navigateur ou l'accès réel sur les téléphones mobiles.

VII. résumé

Le masquage des barres latérales mobiles peut améliorer l'expérience de lecture et la vitesse de chargement. Cette opération peut être réalisée au moyen d'une feuille de style CSS, des paramètres du thème ou de la fonctionÉditeur visuelFacile à mettre en œuvre, simple à utiliser et n'affectant pas l'affichage de l'ordinateur. En choisissant la bonne méthode en fonction de la structure du site, vous pouvez rendre l'accès mobile plus efficace.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : [email protected]
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.