L'un des problèmes de mise en page les plus courants que nous rencontrons est lorsque la barre latérale tombe sous le contenu au lieu d'apparaître à côté. Cela donne instantanément à un site un aspect défectueux et peut confondre les visiteurs.
Cela se produit généralement après une modification de thème, une installation de plugin ou un petit changement de code — même une balise de fermeture manquante peut perturber la mise en page. Nous l'avons vu à plusieurs reprises en aidant les utilisateurs à dépanner leurs thèmes.
La bonne nouvelle est qu'il est facile de résoudre le problème une fois que vous savez où chercher. Vous n'avez pas besoin d'être un développeur pour trouver le problème.
Dans ce guide, nous vous montrerons les causes les plus probables et vous guiderons à travers des étapes simples pour remettre votre barre latérale en place.
Qu'est-ce qui cause l'erreur de la barre latérale de WordPress sous le contenu ?
La cause la plus fréquente de l'apparition de la barre latérale sous le contenu est une erreur HTML ou CSS qui casse la mise en page.
Chaque <div> en HTML doit être correctement fermé. Si le modèle responsable de l'affichage de la page a une balise <div> non fermée, cela cassera la mise en page.
De même, une balise </div> de fermeture indésirable ou supplémentaire peut également affecter la mise en page et faire descendre la barre latérale.
Outre le HTML, le CSS affecte également la conception globale de chaque élément de votre site Web WordPress. Il est utilisé pour définir la largeur, l'alignement et le flottement des éléments dans votre mise en page.
Pour le dire simplement, si la largeur de votre zone de contenu est supérieure à l'espace disponible, cela forcera la barre latérale à descendre.
Tout d'abord, vous devrez découvrir quel code spécifique cause cette erreur de barre latérale WordPress.
Cela dit, examinons comment résoudre et corriger facilement l'erreur de la barre latérale sous le contenu dans WordPress. Vous pouvez utiliser ces liens rapides pour accéder à une solution de dépannage spécifique :
- Annuler les modifications récentes de votre thème WordPress
- Videz le cache WordPress
- Écarter les plugins WordPress
- Corriger les balises cassées qui perturbent la mise en page
- Trouver le CSS qui déplace la barre latérale sous le contenu
- Que faire si vous voyez toujours la barre latérale sous le contenu
- Apprenez d'autres façons de résoudre les erreurs WordPress courantes
1. Annuler les modifications récentes de votre thème WordPress
Habituellement, le problème de la barre latérale est causé par des modifications dans les fichiers de votre thème WordPress.
Si vous avez récemment apporté des modifications à votre thème WordPress ou à votre thème enfant, examiner ces modifications sera un moyen rapide de corriger cette erreur.
Vous pouvez également contacter directement le développeur de votre thème pour obtenir de l'aide. Pour plus d'informations, consultez notre tutoriel sur comment demander correctement le support WordPress et l'obtenir.
Si vous ne parvenez pas à déterminer quelles modifications vous devrez annuler, continuez à lire et nous vous montrerons d'autres façons de dépanner.
2. Vider le cache WordPress
Lorsque vous apportez des modifications qui n'apparaissent pas immédiatement, cela est souvent dû à des problèmes de mise en cache.
Il est courant que les plugins de mise en cache vous montrent une version plus ancienne de la même page. Vider le cache WordPress et le cache du navigateur vous aideront à voir les modifications appliquées à votre site web.
3. Écartez les plugins WordPress
L'apparence et le style de votre site WordPress sont contrôlés par le thème que vous utilisez. Cependant, parfois, les plugins WordPress peuvent également ajouter leur propre HTML et CSS à votre site web.
Par exemple, l'ajout d'un formulaire de contact sur une page ou d'une fenêtre pop-up lightbox chargera du CSS et du HTML supplémentaires.
Pour vous assurer que le problème n'est pas causé par un plugin WordPress, vous pouvez désactiver temporairement tous les plugins WordPress sur votre site web.
Pour ce faire, rendez-vous simplement dans Plugins » Plugins installés dans votre tableau de bord d'administration WordPress et cochez la case à côté de 'Plugin' en haut de la liste. Ensuite, ouvrez le menu déroulant, sélectionnez 'Désactiver' et cliquez sur 'Appliquer'.
Si le problème disparaît, cela signifie qu'un plugin était à l'origine du problème. Activez simplement tous vos plugins WordPress un par un, en vérifiant votre site web après chaque plugin pour découvrir lequel cause le problème.
Après cela, vous pouvez contacter le support du plugin pour trouver une solution et signaler le problème.
Pour des instructions détaillées, vous pouvez consulter nos tutoriels sur comment désactiver facilement les plugins WordPress et comment désactiver les plugins lorsque vous ne pouvez pas accéder à la zone d'administration de WordPress.
4. Corriger les balises <div> incorrectes qui cassent la mise en page
Comme nous l'avons mentionné précédemment, les balises <div> incorrectes sont l'une des causes courantes du déplacement de la barre latérale sous le contenu.
Si le problème est causé dans une zone spécifique de votre site web, vous pouvez vérifier le modèle responsable de l'affichage de ce code.
Par exemple, si ce problème ne se produit que sur des articles uniques, vous voudrez peut-être vérifier le modèle single.php. Pour savoir quel modèle consulter, consultez notre guide complet de la hiérarchie des modèles WordPress.
Le moyen le plus simple de trouver et de corriger rapidement un élément div non fermé est d'utiliser l'outil de validation W3C.
Vous pouvez également utiliser l'outil Inspecter ou des éditeurs de code qui vous aident à déboguer le code en mettant en surbrillance les balises de début et de fin des éléments.
Voici un exemple de mise en surbrillance des balises de début et de fin d'un élément :
En examinant le code, vous devez vous assurer que toute balise <div> qui est ouverte a également une balise de fermeture </div>.
De même, vous voudrez également rechercher une balise de fermeture </div> orpheline qui n'a pas de balise d'ouverture <div> correspondante.
Si vous avez trouvé les balises HTML incorrectes, leur correction résoudra le problème de la barre latérale apparaissant sous le contenu.
5. Trouver le CSS qui déplace la barre latérale sous le contenu
Le CSS contrôle les aspects les plus importants du design de votre site web. Votre thème WordPress utilise le CSS pour définir la largeur du contenu et des zones de la barre latérale dans une mise en page en grille.
Cette valeur correspond au pourcentage de la zone d'affichage disponible. Sur les appareils mobiles, votre thème poussera automatiquement la barre latérale sous le contenu.
Pour savoir quel CSS cause le problème, vous pouvez utiliser l'outil d'inspection. Le simple fait de déplacer votre contenu dans le champ wrapper, la section de contenu et les zones de la barre latérale vous montrera leur largeur et leur hauteur.
Par exemple, si votre zone de contenu fait 70 % de largeur et que la zone de la barre latérale fait 33 %, elle se déplacera automatiquement vers le bas. Lorsque vous calculez ces valeurs, vous voudrez peut-être aussi tenir compte de l'espace utilisé par les valeurs de remplissage et de marge dans chaque section.
Que faire si vous voyez toujours la barre latérale sous le contenu
Si aucune des étapes ci-dessus n'a fonctionné, ne vous inquiétez pas, il vous reste encore quelques options à essayer.
Tout d'abord, nous vous recommandons de consulter notre guide complet de dépannage WordPress. C'est un excellent moyen d'éliminer d'autres problèmes cachés qui pourraient affecter votre mise en page.
Vous pouvez également activer le mode de débogage dans WordPress. Cela ne corrigera pas directement l'erreur, mais cela pourrait vous montrer une erreur PHP ou de plugin qui casse votre mise en page.
Si le mode de débogage pointe vers un plugin spécifique, essayez de le désactiver temporairement ou de le remplacer par une alternative qui n'affecte pas la mise en page de votre thème.
Apprenez d'autres façons de résoudre les erreurs WordPress courantes
Vous rencontrez d'autres problèmes sur votre site WordPress ? Consultez les tutoriels ci-dessous :
- Comment corriger l'erreur JSON invalide dans WordPress (Guide pour débutants)
- Problèmes courants de l'éditeur de blocs WordPress et comment les résoudre
- Comment résoudre l'erreur de téléchargement d'images HTTP dans WordPress
- Comment résoudre le problème du bouton Ajouter un média qui ne fonctionne pas dans WordPress
- Comment corriger l'erreur « Une autre mise à jour est en cours » dans WordPress
- Comment corriger le problème des images mises en avant apparaissant deux fois dans les articles WordPress
- Comment résoudre le problème de l'éditeur de site vierge dans WordPress (étape par étape)
Nous espérons que cet article vous a aidé à apprendre comment résoudre le problème de la barre latérale WordPress sous le contenu. Vous voudrez peut-être aussi lire notre guide ultime des erreurs WordPress courantes et notre article sur comment afficher des barres latérales différentes pour chaque article et page WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Alessio
Merci d'avoir partagé cela, cela a résolu mon problème. Je suis content de voir que je n'étais pas le seul à le rencontrer.
Support WPBeginner
You’re welcome, glad our guide was helpful
Admin
Gina Detwiler
Je ne suis pas certain de savoir comment trouver cet élément div. Pouvez-vous élaborer un peu ? J'ai ce problème depuis le début avec mon site et je ne sais pas comment le résoudre.
Support WPBeginner
Vous voudrez peut-être jeter un œil au code de votre thème personnalisé dans un éditeur de code, cela devrait vous aider à trouver la div incorrecte. Vous pouvez également examiner votre site en utilisant l'outil d'inspection d'éléments : https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Shai
Merci beaucoup !
Vous venez de me faire gagner beaucoup de temps en essayant de le résoudre.
Comme vous l'avez dit, j'avais un élément div supplémentaire fermé
Dale Jennings
J'essaie de placer mes articles actuels à gauche et les articles récents dans une barre latérale droite, mais la barre latérale se trouve en bas de la page, elle est aussi trop large, et je ne comprends pas de quoi vous parliez car je suis nouveau dans ce domaine. Quelle est la solution facile ? Ou y en a-t-il une ?
Ayla
J'ai le problème où ma barre latérale s'affiche en bas de chaque page. Je ne suis pas très doué pour ça, donc je n'ai rien fait de spécial à part transférer mon domaine de Google récemment. Je construisais le site dans WordPress et je n'avais aucun problème jusqu'à ce que je change de thème. J'ai essayé les instructions ci-dessus mais je n'ai rien trouvé de tout cela.
Support WPBeginner
Salut Ayla,
Essayez de passer temporairement à votre thème précédent ou à un thème par défaut. Si cela résout le problème, alors le problème vient de votre thème. Essayez de contacter le développeur du thème pour voir s'il peut vous aider à résoudre ce problème.
Admin
Jared H
A résolu mon problème, merci d'avoir publié !
Dene
merci les gars – cet article vient de résoudre mon problème. Beaucoup apprécié
Donald Efiom
J'ai le même problème en ce moment et je n'arrive pas à trouver où modifier le HTML de la page de la boutique où j'affiche les produits en utilisant le plugin wcommerce. Lorsque j'inspecte l'élément dans mon navigateur, je peux déboguer l'erreur et la corriger, mais dans mon répertoire racine actuel, je ne trouve pas la page qui contient le HTML de la page de la boutique de woocommerce que je peux modifier. Aidez-moi s'il vous plaît !
Maria Appleby
Je n'arrive absolument pas à résoudre mon problème de barre latérale. J'ai cherché les blocs ouverts. J'ai supprimé un article de blog qui était bizarre avec du HTML à cause de la copie de contenu. J'ai essayé un autre thème. J'ai retiré mes widgets (et j'ai ensuite essayé d'en ajouter un pour voir ce qui se passerait – le bouton « suivre le blog » – toujours en bas). J'ai essayé le validateur mais je ne comprends pas vraiment ce qu'il me dit. Lorsque j'ai entré différentes URL d'articles de blog, j'ai obtenu les mêmes messages d'erreur. Je suis désolée si je parais stupide... J'ai le blog depuis longtemps, mais je n'ai commencé à ajouter beaucoup de contenu que récemment, et je ne sais pas vraiment ce que je fais encore. La barre latérale a fini par passer du côté droit, en bas du blog, très récemment (ces derniers jours). Pouvez-vous m'aider ?
Support WPBeginner
Salut Maria,
Il semble que vous utilisiez un blog WordPress.com. Veuillez consulter notre guide sur la différence entre WordPress.org auto-hébergé et un blog WordPress.com gratuit.
Admin
Sparsh Goyal
J'ai le même problème mais je n'arrive pas à le résoudre. Seule ma page d'accueil a ce problème. Les pages de type 'post' et de type 'page' fonctionnent bien. La barre latérale de ma page d'accueil monte en haut plutôt que d'être juste à côté de mon contenu. Pouvez-vous s'il vous plaît vérifier ce qui ne va pas sur mon site web. Mon site est coasilat.com
Mustafa
Merci. Le problème est résolu. c'était une balise div supplémentaire. quand je l'ai supprimée, le problème a été résolu.
Jan Reilink
Sauveteur, merci !
Asha Shendre
J'ai eu une journée entière de problèmes pour ça. La solution au problème n'a été trouvée qu'ici.
Merci..
Merci beaucoup monsieur…
Harish
Merci de votre aide
Sly
Bonjour, je suis débutant. Je ne sais RIEN au code CSS ou HTML, je ne modifie pas mon thème, je n'ai pas de thème enfant. J'ajoute seulement des plugins pour tout ce que j'ai besoin de faire. J'ai l'impression d'avoir le problème avec TOUTES LES PAGES DE MES ARTICLES DE BLOG. La barre latérale est en dessous des articles de blog. Je n'ai aucune idée de ce qu'est une div et comment la réparer. Chers pros, quelle serait la meilleure façon pour moi de résoudre ce problème de barre latérale ?
Tamara
Je suis débutant et pas codeur non plus, mais j'ai pu résoudre ce problème en utilisant le lien W3 Validator sur cette page. En haut du validateur, sous Options, j'ai tout coché puis j'ai entré l'adresse web de mon blog et j'ai lancé le validateur. Sous une liste numérotée d'erreurs, il y avait un affichage très détaillé (et intimidant, mais tenez bon) des erreurs telles qu'elles sont situées dans le texte de mon blog. Je me suis concentré sur les mentionnés dans cet article. En parcourant le rapport détaillé, j'ai trouvé une erreur qui était mise en évidence en rouge. Comme mon texte était affiché, j'ai pu voir que c'était dans l'un de mes articles de blog juste après un lien internet que j'avais inséré. Je suis allé sur cet article de blog dans le tableau de bord WordPress, j'ai cliqué sur « modifier » et j'ai supprimé le lien. (J'ai maintenu la touche « supprimer » pour être sûr d'avoir bien tout ce qui pouvait être invisible et j'ai reculé de quelques lettres pour la même raison. J'ai ensuite enregistré l'article de blog. Ma page web était réparée ! J'ai ensuite réédité l'article de blog pour y remettre le lien et tout est resté bien. Problème résolu.
Lisa W Boyle
Merci, j'ai pu trouver et corriger immédiatement le problème en suivant vos instructions. J'ai trouvé que j'avais placé un supplémentaire dans mon fichier single.php. Vous êtes un sauveur, merci beaucoup !
Roney Oenophile
Je ne sais pas ce que j'ai fait de mal, aidez-moi s'il vous plaît. J'éditais du texte et j'ai accidentellement appuyé sur une combinaison de touches qui a changé l'apparence du texte. Quelques boutons comme le plein écran ont disparu. Et le bouton de publication a été déplacé sur le côté gauche. Et l'image que j'ai téléchargée avec la publication est maintenant au-dessus de mon contenu et elle est très grande. Je ne sais pas comment c'est arrivé, je ne sais pas quel est le problème. Je ne suis pas douée en informatique. J'écris habituellement des articles. Aidez-moi s'il vous plaît. L'adresse de ma page est wordpress.com
Support WPBeginner
Veuillez consulter notre guide sur la différence entre WordPress.org auto-hébergé et le blog gratuit WordPress.com. Vous devez contacter le support de WordPress.com.
Admin
Danielle
Première fois que je prends en charge la mise à jour de notre site… j'ai essayé de mettre à jour la page d'accueil statique et d'une manière ou d'une autre, ma barre latérale est allée en bas. Je ne vois aucun tag < ou >…. aidez-moi ! Je ne veux pas dire à la personne dont j'ai pris la relève que j'ai déjà tout gâché si je peux comprendre ce que j'ai fait !
giovanni
Quelqu'un peut-il m'aider, j'ai le même problème…
voici mon header.php
Susan
Parfait ! Merci ! J'ai su à la minute où vous avez dit div exactement dont le post dans mon blog communautaire devait être édité !
Leah
This is happening to me right now every time I try out a new theme. Only one widget stays on the sidebar and the rest goes to the bottom of the content. But when I go back to my current theme, everything looks okay. I still can’t figure it out.
Sam
Ah ! Vous venez de me faire gagner beaucoup de temps et de frustration ! Merci
srik
Merci beaucoup pour cela ! C'était vraiment utile
Amy
Merci pour cet article. J'essaie de résoudre ce problème sur mon site web en ce moment. J'ai essayé tout ce qui est mentionné dans cet article, mais j'ai toujours des problèmes. Je connais un peu les sites web, mais je suis complètement perdu quant à la raison pour laquelle ma barre de navigation supérieure se met sur 2 lignes et pourquoi ma barre latérale est repoussée en bas. Mon site web n'est pas encore en ligne, mais voici le site web
Merci pour toute aide !!
sean
Similar problem with my bespoke blog inside my website; side bar slips under the footer if there isn’t enough content to push it down.
I found that removing (or safer, commenting out) the following sorted the problem:
I don’t know what this empty div is for & so far it hasn’t adversely affected the blog. Another more obvious reason is due to divs without closing tags – it’s a bit harder to keep track of all your open/closed div tags in WP as the footer & header are removed unlike a standard HTML site.
Sean
Er, that is commenting out the empty “delimiter” div at the bottom of various WP pages – it disappeared from my original comment!
David Pomazzo
can you look at my website and help me? http://www.americasfreedomfighters.com/ i inserted google adsense and now my sidebar is pushed to the bottom and i have a story going up on the sidebar! thank you so much
Jen
THANK YOU! It was the content width that did it for me
Cecilia
J'ai ce problème et je n'arrive pas à le résoudre (j'essaie depuis plusieurs jours)
Voici mon site :
S'il vous plaît, j'ai vraiment besoin d'aide. Merci !!!! =)
Support WPBeginner
Vous devez probablement ajouter clear avant de terminer votre div .hfeed comme ceci :
1-click Use in WordPress
Admin
Katie Clark
J'ai ce problème, et je ne sais même pas par où commencer, car je n'ai fait aucune édition aujourd'hui. Des suggestions ? Voici mon site
http://clarkscondensed.com/
Personnel éditorial
Votre site s'affiche correctement dans Chrome.
Admin
Doomish
Super astuce ! Ça va être très utile, et le commentaire de Kathy est typiquement ce qui m'arrive.
kathy
Comme la plupart des thèmes ont le CSS approprié, je trouve que c'est presque toujours un problème de HTML mal fermé. Cela se produit généralement sur une page spécifique, car l'utilisateur a essayé d'ajouter son propre HTML dans l'éditeur de publication et les choses ont mal tourné à partir de là. Erreur simple, mais qui peut prendre beaucoup de temps à déboguer.