Het perfectioneren van de lay-out van je WordPress-website kan veel werk zijn, maar het is ook essentieel voor de Gebruikerservaring (UX), betrokkenheid en conversies. Daarom kan het frustrerend zijn als een schijnbaar willekeurige fout een verstoring veroorzaakt in de weergave van je site — zoals je zijbalk die plotseling onder de inhoud verschijnt in plaats van ernaast.
Hoewel er een paar mogelijke oorzaken zijn, komt het voornamelijk neer op problemen met de Hypertext Markup Language (HTML) of Cascading Style Sheets (CSS). Gelukkig zijn de problemen relatief eenvoudig op te lossen, zodat je je site snel weer in topvorm kunt krijgen.
In dit artikel zullen we de meest voorkomende oorzaken van deze fout doorlopen, daarna laten we je zien hoe je het in drie eenvoudige stappen kunt oplossen. Laten we beginnen!
Veelvoorkomende Oorzaken Waarom De Sidebar Onder De Inhoud Valt In WordPress
Sidebars in WordPress zijn inhoudsgebieden die bedoeld zijn om links of rechts van het hoofdsegment van de pagina te worden weergegeven (of soms beide). Ze bevatten vaak widgets, aanmeldingsformulieren, links naar gerelateerde berichten of vergelijkbare inhoud die je over je hele site wilt opnemen.
Vanwege verschillende bugs of fouten, kunnen je zijbalken soms onderaan de pagina verschijnen, in plaats van links of rechts. Het spreekt voor zich dat dit gemakkelijk een goed ontworpen website kan verpesten.
De voornaamste oorzaak van dit gedrag zijn problemen met de HTML of CSS op je site. Het is meestal het gevolg van directe wijzigingen die je hebt aangebracht aan de code van je site, zoals een thema of plugin bestand.
Bijvoorbeeld, misschien is er een extra of niet vermelde <div> tag op de pagina. Het probleem kan zelfs worden toegeschreven aan onjuiste breedte- en zweefinstellingen in je CSS. Gelukkig is deze fout eenvoudig genoeg te herstellen.
Vermijd De Stress
Vermijd probleemoplossing wanneer je je aanmeldt voor DreamPress. Onze vriendelijke WordPress-experts zijn 24/7 beschikbaar om te helpen bij websiteproblemen u2014 groot of klein.
Bekijk De PlannenHoe Los Je De WordPress Sidebar Onder Content Fout Op (In 3 Stappen)
Nu je de mogelijke oorzaken van deze verwarrende fout kent, is het tijd om deze te corrigeren. We raden aan om de volgende drie stappen in volgorde uit te voeren, en pas naar de volgende stap over te gaan als de vorige niet heeft gewerkt. Voordat je begint, vergeet niet om een back-up van je site te maken voor de zekerheid.
Stap 1: Maak Je Meest Recente Wijzigingen Ongedaan
De eerste stap is ook de eenvoudigste. Als je zijbalk is verschoven nadat je een wijziging aan je site hebt aangebracht — of dat nu het installeren van een nieuwe plugin, het toevoegen van aangepaste code of iets anders is — maak het dan gewoon ongedaan. Door de actie terug te draaien krijg je jouw lay-out weer in de oorspronkelijke vorm en helpt het de oorzaak van het probleem te isoleren.
Je kunt beginnen door de wijziging terug te draaien en je site te vernieuwen om te zien of de zijbalk weer op zijn juiste plaats staat. Als dat zo is, kun je dan zoeken naar mogelijke problemen met de wijzigingen die je probeerde te maken. Bijvoorbeeld, als je een nieuwe plugin hebt geïnstalleerd, controleer dan op alternatieven. Als je code hebt gewijzigd of toegevoegd aan je site, zoek dan naar typefouten of syntaxisfouten.
Stap 2: Herstel Niet Gesloten <div> Tags of Verwijder Overtollige <div> Tags
Vaak is een niet gesloten of extra <div> tag in de code van je site de oorzaak van de WordPress sidebar fout. Deze HTML tags bepalen de grenzen van secties op je website. Als ze verkeerd geplaatst zijn, zullen browsers de site niet goed weergeven (vandaar de zwervende sidebar).
Hier is een voorbeeld van een correct opgemaakte pagina:
Hieronder staat dezelfde pagina met een niet gesloten <div>-tag:
Je kunt zien dat wat de afsluitende <div> tag zou moeten zijn, de schuine streep mist. Hierdoor weet de browser niet dat deze gesloten moet worden, en de inhoud die buiten het element zou moeten zijn, is nu binnen.
Om dit op te lossen, doorzoek alle sjabloonbestanden die je hebt aangepast en kijk naar ontbrekende of extra tags. Over het algemeen kunnen deze fouten worden gevonden in de “template parts”-bestanden van je WordPress-thema. Om daar te komen, ga naar je WordPress-dashboard en navigeer naar Weergave > Thema-editor.
Kies het juiste thema uit het dropdownmenu aan de bovenkant, en zoek dan naar het gedeelte sjabloononderdelen in de zijbalk.
De sjablonen die pagina’s en berichten genereren, bevinden zich meestal in de content sectie. Zoek degene die je nodig hebt uit de lijst, controleer deze en maak eventuele correcties. Daarna kun je op Update File klikken om je wijzigingen op te slaan.
Als je weet welk bestand je hebt bewerkt, kun je daar direct naartoe gaan. Anders moet je ze allemaal controleren op inconsistenties.
Stap 3: Los CSS-Problemen Op
Een andere veelvoorkomende oorzaak van deze fout bevindt zich in de CSS van je site. Het Extra CSS gedeelte van de WordPress Customizer stelt je in staat om aangepaste CSS aan je site toe te voegen.
Als je deze functie hebt gebruikt of de CSS op andere manieren hebt bewerkt, heb je mogelijk de code verkeerd opgemaakt. In het geval van het verplaatsen van zijbalken, is de meest voorkomende boosdoener de “width” eigenschap.
Je moet controleren of de som van de breedtes van de Content en Sidebar-elementen de breedte van het Wrap-element niet overschrijdt. Als dat wel zo is, wordt het kleinere element naar beneden geduwd om te passen.
Hulpmiddelen Om Probleemoplossing Van Sidebarproblemen Eenvoudiger Te Maken
Je kunt het probleem ook zelf oplossen zonder code te gebruiken. Er zijn verschillende online tools die je code kunnen valideren en controleren op fouten.
Je kunt de W3C Markup Validation Service gebruiken om HTML-code te controleren. De W3C CSS Validation Service is het CSS-tegenhanger. Online Web Check is ook een uitstekende tool die werkt voor zowel HTML als CSS.
Deze diensten zijn ook fantastisch als je gewoon een tweede paar ogen op je code wilt, ongeacht het vaardigheidsniveau. Een snelle dubbele controle kan nooit kwaad!
Je kunt het oplossen van WordPress-fouten ook van je to-do lijst halen met onze DreamCare service. Ons team van experts handelt alles op de backend van je site af om ervoor te zorgen dat deze veilig, beveiligd en altijd beschikbaar is.
Aanvullende WordPress Bronnen
Zeg vaarwel tegen gebroken links en foutmeldingen! We hebben verschillende handleidingen samengesteld om je te helpen bij het oplossen van elk soort WordPress-probleem:
- Overzicht Van Veelvoorkomende WordPress Fouten
- Hoe De 500 Interne Serverfout In WordPress Op Te Lossen
- Hoe Syntaxfouten In WordPress Op Te Lossen
- Hoe Het Probleem Van Het Niet Versturen Van E-mails Door WordPress Op Te Lossen
- Hoe De Fout Bij Het Vaststellen Van Een Databaseverbinding In WordPress Op Te Lossen
- Hoe WordPress Fout 404 Niet Gevonden Op Te Lossen
- Hoe Witte Tekst En Ontbrekende Knoppen In De WordPress Visuele Editor Op Te Lossen[b]
Als je op zoek bent naar meer WordPress-tips en -trucs, bekijk dan onze WordPress Tutorials, een verzameling gidsen die je helpen om je weg te vinden in het WordPress admin-gebied als een professional.
De Sidebarfout Oplossen
Als je tijd hebt besteed aan het bouwen van een prachtige WordPress-website, wil je waarschijnlijk niet dat er iets afbreuk doet aan je werk — vooral geen plotselinge fouten. Gelukkig is de oplossing relatief eenvoudig als het probleem is dat je zijbalken onder je inhoud verschijnen!
Om de fout te corrigeren waarbij de zijbalk onder de inhoud verschijnt, kun je deze drie stappen volgen:
- Draai alle wijzigingen die je hebt aangebracht aan je site net voor de fout optrad terug.
- Controleer op niet-gesloten of extra <div> tags in je code en herstel deze.
- Controleer of de CSS van je site correct is.
Als je liever je tijd besteedt aan het werken aan je bedrijf in plaats van het oplossen van problemen met je website, overweeg dan over te stappen naar DreamPress. Met onze beheerde WordPress-hostingplannen nemen wij de problemen voor je uit handen, zodat je je kunt concentreren op wat echt belangrijk is.
