Perfectionner la disposition de ton site web WordPress peut être beaucoup de travail, mais c’est également essentiel pour l’Expérience Utilisateur (UX), l’engagement et les conversions. Par conséquent, cela peut être frustrant lorsqu’une erreur apparemment aléatoire provoque une perturbation de l’affichage de ton site — comme ta barre latérale qui apparaît soudainement sous le contenu plutôt qu’à côté.
Bien qu’il y ait quelques causes potentielles, cela revient principalement à des problèmes avec le langage de balisage hypertexte (HTML) ou les feuilles de style en cascade (CSS). Heureusement, les problèmes sont relativement faciles à résoudre, donc tu peux rapidement remettre ton site en parfait état.
Dans cet article, nous allons passer en revue les causes courantes de cette erreur, puis te montrer comment la résoudre en trois étapes simples. Commençons !
Causes Courantes Du Déplacement De La Barre Latérale Sous Le Contenu Dans WordPress
Les barres latérales dans WordPress sont des zones de contenu destinées à être affichées soit à gauche, soit à droite du segment principal de la page (ou parfois des deux côtés). Elles contiennent souvent des widgets, des formulaires d’inscription, des liens vers des articles liés, ou un contenu similaire que tu souhaiterais inclure sur l’ensemble de ton site.
En raison de divers bugs ou erreurs, tes barres latérales peuvent parfois apparaître en bas de la page, plutôt qu’à gauche ou à droite. Inutile de dire que cela peut facilement ruiner un site web bien conçu.
La cause principale de ce comportement est des problèmes avec le HTML ou le CSS de ton site. Cela résulte généralement de modifications directes que tu as apportées au code de ton site, comme un fichier de thème ou de plugin.
Par exemple, il se peut qu’il y ait une balise <div> supplémentaire ou non divulguée sur la page. Le problème pourrait même être attribué à des paramètres de largeur et de flottaison incorrects dans votre CSS. Heureusement, corriger cette erreur est assez facile.
Évite Le Stress
Évite le dépannage en t’inscrivant à DreamPress. Nos experts WordPress sympathiques sont disponibles 24/7 pour aider à résoudre les problèmes de site web, petits ou grands.
Découvre Les OffresComment Corriger L’Erreur De La Barre Latérale WordPress Sous Le Contenu (En 3 Étapes)
Maintenant que tu connais les causes potentielles de cette erreur déroutante, il est temps de la corriger. Nous recommandons de suivre les trois étapes suivantes dans l’ordre, en passant à la suivante seulement si la précédente n’a pas fonctionné. Avant de commencer, n’oublie pas de faire une sauvegarde de ton site au cas où.
Étape 1 : Annule Tes Dernières Modifications
La première étape est également la plus simple. Si ta barre latérale s’est déplacée après avoir apporté une modification à ton site — que ce soit l’installation d’un nouveau plugin, l’ajout de code personnalisé ou autre — il suffit simplement de l’annuler. Annuler l’action permet de retrouver la disposition originale de ton site et aide à isoler la cause du problème.
Tu peux commencer par annuler le changement et rafraîchir ton site pour voir si la barre latérale est revenue à sa place appropriée. Si c’est le cas, tu peux ensuite chercher les problèmes potentiels avec les modifications que tu tentais de réaliser. Par exemple, si tu as installé un nouveau plugin, vérifie des alternatives. Si tu as modifié ou ajouté au code de ton site, recherche des fautes de frappe ou des erreurs de syntaxe.
Étape 2 : Corriger les balises <div> non fermées ou retirer les balises <div> supplémentaires
Souvent, une balise <div> non fermée ou supplémentaire dans le code de ton site est la cause de l’erreur de la barre latérale WordPress. Ces balises HTML définissent les limites des sections sur ton site web. Si elles sont mal placées, les navigateurs ne rendront pas correctement le site (d’où la barre latérale errante).
Voici un exemple de page correctement formatée :
Ci-dessous se trouve la même page avec une balise <div> non fermée :
Tu peux voir que ce qui devrait être la balise de fermeture <div> manque de la barre oblique. En conséquence, le navigateur ne sait pas qu’elle est censée être fermée, et le contenu qui devrait être à l’extérieur de l’élément se trouve maintenant à l’intérieur.
Pour résoudre cela, passe en revue tous les fichiers de modèle que tu as modifiés et cherche les balises manquantes ou en trop. Généralement, ces erreurs se trouvent dans les fichiers de “parties de modèle” de ton thème WordPress. Pour y accéder, rends-toi sur ton tableau de bord WordPress et navigue jusqu’à Apparence > Éditeur de thème.
Choisis le thème correct dans le menu déroulant en haut, puis trouve la section template parts dans la barre latérale.
Les modèles qui génèrent des pages et des articles se trouvent généralement dans la section contenu. Trouve celui dont tu as besoin dans la liste, vérifie-le et apporte les corrections nécessaires. Ensuite, tu peux cliquer sur Mettre à jour le fichier pour sauvegarder tes modifications.
Si tu sais quel fichier tu as modifié, tu peux aller directement là-bas. Sinon, tu devras tous les vérifier pour des incohérences.
Étape 3 : Corriger Les Problèmes CSS
Une autre cause fréquente de cette erreur se trouve dans le CSS de ton site. La section CSS supplémentaire du Personnalisateur WordPress te permet d’ajouter du CSS personnalisé à ton site.
Si tu as utilisé cette fonctionnalité ou modifié le CSS par d’autres moyens, tu as peut-être formaté le code incorrectement. Dans le cas du déplacement des barres latérales, le coupable le plus courant est la propriété “width”.
Tu devrais vérifier que la somme des largeurs des éléments Contenu et Barre latérale ne dépasse pas la largeur de l’élément Enveloppe . Si c’est le cas, l’élément le plus petit sera repoussé vers le bas pour s’ajuster.
Outils Pour Faciliter Le Dépannage Des Problèmes De Sidebar
Tu peux aussi dépanner le problème toi-même sans utiliser de code. Il existe plusieurs outils en ligne qui peuvent valider ton code et vérifier s’il contient des erreurs.
Tu peux utiliser le Service de validation de balisage W3C pour vérifier le code HTML. Le Service de validation CSS W3C est l’équivalent pour le CSS. Online Web Check est également un excellent outil qui fonctionne pour le HTML et le CSS.
Ces services sont également fantastiques si tu veux juste un second avis sur ton code, peu importe ton niveau de compétence. Une vérification rapide ne fait jamais de mal à personne !
Tu pourrais également retirer la correction des erreurs WordPress de ta liste de tâches avec notre service DreamCare. Notre équipe d’experts s’occupe de tout sur le backend de ton site pour s’assurer qu’il soit sûr, sécurisé et toujours opérationnel.
Ressources Supplémentaires WordPress
Dis adieu aux liens brisés et aux messages d’erreur ! Nous avons rassemblé plusieurs guides pour t’aider à dépanner chaque type de problème WordPress :
- Vue d’ensemble des erreurs courantes de WordPress
- Comment réparer l’erreur 500 de serveur interne dans WordPress
- Comment réparer les erreurs de syntaxe dans WordPress
- Comment résoudre le problème de WordPress ne envoyant pas d’email
- Comment réparer l’erreur de connexion à la base de données dans WordPress
- Comment réparer l’erreur 404 Non Trouvé de WordPress
- Comment réparer le texte blanc et les boutons manquants dans l’éditeur visuel de WordPress[b]
Si tu cherches plus de conseils et d’astuces WordPress, consulte nos Tutoriels WordPress, une collection de guides qui t’aideront à naviguer dans la zone d’administration WordPress comme un pro.
Résolution de l’Erreur de la Barre Latérale
Si tu as passé du temps à créer un beau site WordPress, tu ne veux probablement rien qui puisse le gâcher — surtout pas des erreurs soudaines. Heureusement, si le problème est que tes barres latérales apparaissent en dessous de ton contenu, la solution est relativement simple !
Pour corriger l’erreur de la barre latérale apparaissant sous le contenu, tu peux suivre ces trois étapes :
- Annule les modifications que tu as effectuées sur ton site juste avant l’apparition de l’erreur.
- Vérifie et corrige les balises <div> non fermées ou supplémentaires dans ton code.
- Vérifie que le CSS de ton site est correct.
Si tu préfères consacrer ton temps à travailler sur ton entreprise au lieu de dépanner ton site web, envisage de passer à DreamPress. Avec nos plans d’hébergement WordPress géré, nous nous occupons des problèmes pour toi, afin que tu puisses rester concentré sur ce qui compte vraiment.
