Geschatte leestijd: 6 minuten
Heb je problemen met je WordPress website waarbij de zijbalk onder de inhoud wordt weergegeven?
Dit probleem treedt op bij WordPress templates die een tweekoloms lay-out gebruiken voor inhoud en een zijbalk. Door een kleine wijziging in de code verschijnt de zijbalk onder de inhoud in plaats van ernaast.
In dit artikel laten we je zien hoe je eenvoudig de fout met de zijbalk onder de inhoud in WordPress kunt oplossen.
Wat veroorzaakt het probleem met de zijbalk onder de inhoud in WordPress?
De meest voorkomende oorzaak van het verschijnen van de zijbalk onder de inhoud is een HTML- of CSS-fout die de lay-out verstoort.
Elke <div> in HTML moet goed gesloten zijn. Als de template die verantwoordelijk is voor het weergeven van de pagina een niet-gesloten <div>-tag heeft, dan zou dit de opmaak breken.
Op dezelfde manier kan een ongewenste afsluitende </div> tag ook de lay-out beïnvloeden en ervoor zorgen dat de zijbalk naar beneden verschuift.
Naast HTML beïnvloedt CSS ook het algemene ontwerp van elk element op je WordPress website. Het wordt gebruikt om de breedte, uitlijning en zweving van elementen in je lay-out te bepalen.
Eenvoudig gezegd, als de breedte van je inhoudsgebied groter is dan de beschikbare ruimte, dan zal de zijbalk naar beneden bewegen.
Eerst moet je uitzoeken welke specifieke code het probleem met de zijbalk onder de inhoud in WordPress veroorzaakt.
Dat gezegd hebbende, laten we eens kijken hoe je eenvoudig het probleem met de zijbalk onder de inhoud in WordPress kunt oplossen.
Inhoudsopgave
Recente wijzigingen in je WordPress Thema ongedaan maken
Meestal wordt het probleem veroorzaakt door wijzigingen in de bestanden van je WordPress thema.
Als je onlangs wijzigingen hebt aangebracht in je WordPress thema of child theme, dan is het onderzoeken van die wijzigingen een snelle manier om deze fout op te lossen.
Als je er niet achter kunt komen welke wijzigingen je moet terugdraaien, lees dan verder en we zullen je andere manieren laten zien om problemen op te lossen.
Sluit WordPress Plugins uit
Het uiterlijk en de stijl van je WordPress site worden bepaald door het thema dat je gebruikt. Soms kunnen WordPress plugins echter ook hun eigen HTML en CSS aan je website toevoegen.
Bijvoorbeeld het toevoegen van een contactformulier op een pagina of een lightbox popup zou extra CSS en HTML laden.
Om er zeker van te zijn dat het probleem niet wordt veroorzaakt door een WordPress plugin, kun je tijdelijk alle WordPress plugins op je website uitschakelen.
Ga hiervoor naar Plugins >> Geïnstalleerde Plugins in je WordPress admin dashboard en vink het vakje naast ‘Plugin’ bovenaan de lijst aan. Open dan het dropdown menu, selecteer ‘Deactiveren’ en klik op ‘Toepassen’.
Als het probleem verdwijnt, dan betekent dit dat een plugin het probleem veroorzaakte. Activeer al je WordPress plugins één voor één en controleer je website na elke plugin om erachter te komen welke het probleem veroorzaakt.
Daarna kun je contact opnemen met de ondersteuning van de plugin om een oplossing te vinden en het probleem te melden.
De HTML-tags vinden die de opmaak breken
Zoals we al eerder zeiden, is een kapotte <div>-tag een van de veelvoorkomende oorzaken van het verschuiven van de zijbalk onder de inhoud.
Als het probleem wordt veroorzaakt op een specifiek deel van je website, dan kun je de template controleren die verantwoordelijk is voor het weergeven van die code.
Als dit probleem zich bijvoorbeeld alleen voordoet bij afzonderlijke berichten, dan kun je de template single.php controleren. Om erachter te komen naar welke template je moet kijken, kun je ons volledige WordPress template hiërarchie spiekbriefje bekijken.
De eenvoudigste manier om snel een niet gesloten div element te vinden is met behulp van de W3C Validator tool.
Je kunt ook de Inspect tool of code editor apps gebruiken die je helpen bij het debuggen van code door de begin- en eindtags van elementen te markeren.
Als je naar de code kijkt, moet je ervoor zorgen dat elke <div> tag die wordt geopend ook een </div> tag heeft die wordt gesloten.
Op dezelfde manier moet je ook zoeken naar een verweesde </div> tag die geen bijbehorende open <div> tag heeft.
Als je de gebroken HTML hebt gevonden, dan kun je het probleem met de zijbalk die onder de inhoud verschijnt oplossen door deze te repareren.
Zoek de CSS voor het verplaatsen van de zijbalk onder de inhoud
CSS bepaalt de belangrijkste aspecten van het ontwerp van je website. Je WordPress thema gebruikt CSS om de breedte van de inhoud en de zijbalkgebieden in een rasterindeling te definiëren.
Deze waarde is het percentage van het beschikbare weergavegebied. Op mobiele apparaten duwt je thema de zijbalk automatisch naar beneden onder de inhoud.
Om erachter te komen welke CSS het probleem veroorzaakt, kun je de Inspect tool gebruiken. Door je inhoud te verplaatsen naar het wrapper-veld, het inhoudsgedeelte en de zijbalk, kun je de breedte en hoogte zien.
Als je inhoudsgebied bijvoorbeeld 70% breed is en het zijbalkgebied 33%, dan zal het automatisch naar beneden verschuiven. Wanneer je deze waarden berekent, kun je ook rekening houden met de ruimte die wordt gebruikt door padding en marges in elke sectie.
Wis de WordPress cache
Als je nog steeds de zijbalk onder het inhoudsgebied ziet, dan wil je misschien je WordPress cache wissen.
Als je wijzigingen aanbrengt die niet meteen verschijnen, komt dat vaak door cachingproblemen.
Het komt vaak voor dat caching plugins je een oudere versie van dezelfde pagina laten zien. Als je de cache van WordPress en de browser leegmaakt, kun je de wijzigingen op je website zien.
We hopen dat dit artikel je heeft geholpen om te leren hoe je de zijbalk onder de inhoud fout in WordPress kunt oplossen. Misschien wil je ook ons ultieme handleiding met veelvoorkomende WordPress fouten en hoe je ze kunt oplossen als bladwijzer opslaan.
Heb je nog vragen over dit artikel, laat hieronder een reactie achter en we zullen je vraag zo snel mogelijk beantwoorden.
