Ett av de vanligaste layoutproblemen vi ser är när sidofältet hamnar under innehållet istället för bredvid det. Det får omedelbart en webbplats att se trasig ut och kan förvirra besökare.
Detta händer vanligtvis efter en temaredigering, plugininstallation eller en liten kodändring – även en saknad avslutande tagg kan störa layouten. Vi har sett det många gånger när vi hjälpt användare att felsöka sina teman.
De goda nyheterna är att det är lätt att fixa när du vet var du ska leta. Du behöver inte vara en utvecklare för att spåra problemet.
I den här guiden visar vi dig de mest sannolika orsakerna och guidar dig genom enkla steg för att få ditt sidofält tillbaka på plats.
Vad orsakar WordPress-sidofältsfelet under innehållet?
Den vanligaste orsaken till att sidofältet visas under innehållet är ett HTML- eller CSS-fel som bryter layouten.
Varje <div> i HTML måste stängas ordentligt. Om mallen som ansvarar för att visa sidan har en oavslutad <div>-tagg, kommer detta att bryta layouten.
Likaså kan en oönskad eller extra avslutande </div>-tagg påverka layouten och få sidofältet att flyttas ned.
Förutom HTML påverkar CSS också den övergripande designen av varje element på din WordPress-webbplats. Den används för att definiera bredden, justeringen och flytningen av element i din layout.
Enkelt uttryckt, om bredden på ditt innehållsområde är större än det tillgängliga utrymmet, kommer det att tvinga sidofältet att flyttas nedåt.
Först måste du ta reda på vilken specifik kod som orsakar detta WordPress-sidofel.
Med det sagt, låt oss titta på hur du enkelt felsöker och åtgärdar felet med sidofältet under innehållet i WordPress. Du kan använda dessa snabblänkar för att hoppa till en specifik felsökningslösning:
- Ångra nyligen gjorda ändringar i ditt WordPress-tema
- Rensa WordPress-cachen
- Stäng ute WordPress-plugins
- Fixa trasiga taggar som bryter layouten
- Hitta CSS för att flytta sidofältet under innehållet
- Vad du ska göra om du fortfarande ser sidofältet under innehållet
- Lär dig fler sätt att lösa vanliga WordPress-fel
1. Ångra senaste ändringar i ditt WordPress-tema
Vanligtvis orsakas sidofältsfrågan av ändringar i dina WordPress-temafiler.
Om du nyligen har gjort några ändringar i ditt WordPress-tema eller barntema, då kommer en granskning av dessa ändringar att vara ett snabbt sätt att åtgärda detta fel.
Du kan också kontakta din temautvecklare direkt för att få support. För mer information, kolla in vår handledning om hur man frågar korrekt om WordPress-support och får den.
Om du inte kan lista ut vilka ändringar du behöver återställa, fortsätt läsa så visar vi dig andra sätt att felsöka.
2. Rensa WordPress-cachen
När du gör ändringar som inte visas direkt, beror detta ofta på cacheproblem.
Det är vanligt att cache-plugins visar dig en äldre version av samma sida. Att rensa WordPress-cachen och webbläsarens cache hjälper dig att se ändringarna som tillämpats på din webbplats.
3. Reglera bort WordPress-plugins
Utseendet och stilen på din WordPress-webbplats styrs av det tema du använder. Ibland kan dock WordPress-plugins också lägga till sin egen HTML och CSS till din webbplats.
Till exempel, att lägga till ett kontaktformulär på en sida eller en lightbox-popup kommer att ladda ytterligare CSS och HTML.
För att säkerställa att problemet inte orsakas av ett WordPress-plugin kan du tillfälligt inaktivera alla WordPress-plugins på din webbplats.
För att göra detta, gå helt enkelt till Plugins » Installera plugins i din WordPress-adminpanel och markera rutan bredvid 'Plugin' högst upp i listan. Öppna sedan rullgardinsmenyn, välj 'Inaktivera' och klicka på 'Verkställ'.
Om problemet försvinner, betyder det att ett plugin orsakade problemet. Aktivera helt enkelt alla dina WordPress-plugins ett i taget och kontrollera din webbplats efter varje plugin för att ta reda på vilket som orsakar problemet.
Därefter kan du kontakta pluginets support för att hitta en lösning och rapportera problemet.
För detaljerad vägledning kan du kolla in våra handledningar om hur man enkelt inaktiverar WordPress-plugins och hur man inaktiverar plugins när du inte kan komma åt WordPress-administrationsområdet.
4. Åtgärda trasiga <div>-taggar som bryter layouten
Som vi nämnde tidigare är trasiga <div>-taggar en av de vanliga orsakerna till att sidopanelen flyttas under innehållet.
Om problemet orsakas i ett specifikt område på din webbplats, kan du kontrollera mallen som ansvarar för att visa den koden.
Om problemet till exempel bara uppstår på enstaka inlägg, kanske du vill kontrollera mallen single.php. För att ta reda på vilken mall du ska titta på, se vårt kompletta fuskblad för WordPress mallhierarki.
Det enklaste sättet att snabbt hitta och åtgärda ett oavslutat div-element är att använda W3C Validator-verktyget.
Du kan också använda Inspektera-verktyget eller kodredigeringsappar som hjälper dig att felsöka kod genom att markera start- och sluttaggarna för element.
Här är ett exempel på hur man markerar start- och sluttaggarna för ett element:
När du tittar på koden måste du se till att varje <div>-tagg som öppnas också har en avslutande </div>-tagg.
På samma sätt vill du också leta efter en föräldralös avslutande </div>-tagg som inte har en motsvarande öppen <div>-tagg.
Om du har hittat de trasiga HTML-taggarna, kommer att fixa dem att lösa problemet med att sidofältet visas under innehållet.
5. Hitta CSS som flyttar sidofältet under innehållet
CSS styr de viktigaste aspekterna av din webbplats design. Ditt WordPress-tema använder CSS för att definiera bredden på innehåll och sidofältsområden inuti en rutnätslayout.
Detta värde är i procent av det tillgängliga visningsområdet. På mobila enheter kommer ditt tema automatiskt att flytta ner sidofältet under innehållet.
För att ta reda på vilken CSS som orsakar problemet kan du använda verktyget Inspektera. Genom att bara flytta ditt innehåll till omslagsfältet, innehållssektionen och sidofältsområdena kommer du att se deras bredd och höjd.
Till exempel, om ditt innehållsområde är 70% brett och sidofältsområdet är 33%, kommer det automatiskt att flyttas ner. När du beräknar dessa värden kan du också vilja överväga utrymmet som används av stoppning och marginalvärden i varje sektion.
Vad du ska göra om du fortfarande ser sidofältet under innehållet
Om inget av stegen ovan fungerade, oroa dig inte – det finns fortfarande några fler saker du kan prova.
Först rekommenderar vi att du går igenom vår fullständiga felsökningsguide för WordPress. Det är ett utmärkt sätt att utesluta andra dolda problem som kan påverka din layout.
Du kan också aktivera debug-läge i WordPress. Detta kommer inte att åtgärda felet direkt, men det kan visa dig ett PHP- eller plugin-fel som bryter din layout.
Om felsökningsläget pekar på ett specifikt plugin, försök att inaktivera det tillfälligt eller ersätta det med ett alternativ som inte påverkar ditt temas layout.
Lär dig fler sätt att lösa vanliga WordPress-fel
Upplev andra problem på din WordPress-webbplats? Kolla in handledningarna nedan:
- Hur man åtgärdar felet med ogiltig JSON i WordPress (nybörjarguide)
- Vanliga problem med WordPress blockredigerare och hur du löser dem
- Hur man åtgärdar HTTP-fel vid uppladdning av bilder i WordPress
- Hur man åtgärdar att knappen Lägg till media inte fungerar i WordPress
- Hur du åtgärdar felet 'En annan uppdatering pågår' i WordPress
- Hur man fixar utvalda bilder som visas dubbelt i WordPress-inlägg
- Hur man åtgärdar problemet med tom redigerare för webbplatsen i WordPress (steg för steg)
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du åtgärdar problemet med att WordPress-sidofältet hamnar under innehållet. Du kanske också vill läsa vår ultimata handbok om vanligaste WordPress-fel och vår artikel om hur du visar olika sidofält för varje WordPress-inlägg och sida.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Alessio
Tack för att du delade med dig, det löste mitt problem. Jag är glad att se att jag inte var den enda som upplevde det.
WPBeginner Support
You’re welcome, glad our guide was helpful
Admin
Gina Detwiler
Jag är inte säker på hur jag hittar det där div-elementet. Kan du utveckla lite? Jag har haft det här problemet från början med min webbplats och vet inte hur jag ska fixa det.
WPBeginner Support
Du skulle vilja titta på din anpassade temas kod i en kodredigerare och det bör hjälpa dig att hitta den felaktiga div-koden. Du kan också titta på din webbplats med hjälp av inspektionselement: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Shai
Tack så jättemycket!
Du räddade mig precis massor av tid som jag annars hade lagt på att försöka lösa det.
Som du sa hade jag ett extra div-element som var stängt
Dale Jennings
Jag försöker placera mina nuvarande inlägg till vänster och de senaste inläggen i en höger sidopanel, och sidopanelen hamnar längst ner på sidan, den är också för bred, och jag förstår inte vad du pratade om eftersom jag är ny på detta. Finns det en enkel lösning? Eller finns det en?
Ayla
Jag har problemet att mitt sidofält visas längst ner på varje sida. Jag är inte så kunnig med detta så jag har inte gjort något avancerat förutom att nyligen överföra min domän från Google. Jag har byggt webbplatsen i WordPress och hade inga problem förrän jag bytte tema. Jag försökte instruktionerna ovan men kunde inte hitta något av dessa saker.
WPBeginner Support
Hej Ayla,
Försök att tillfälligt byta till ditt tidigare tema eller ett standardtema. Om detta löser problemet, då är problemet med ditt tema. Försök att kontakta temautvecklaren för att se om de kan hjälpa dig att fixa det.
Admin
Jared H
Åtgärdade mitt problem, tack för att du postade!
Dene
tack grabbar – det här inlägget löste precis mitt problem. Mycket uppskattat
Donald Efiom
Jag har samma problem just nu och jag kan inte hitta var jag ska redigera HTML för butikssidan som visar produkter med wcommerce-pluginet. När jag inspekterar elementet i min webbläsare kan jag felsöka felet och korrigera det, men i min faktiska rotkatalog kan jag inte hitta sidan som innehåller HTML för butikssidan för WooCommerce som jag kan redigera. Snälla hjälp!
Maria Appleby
För allt i världen kan jag inte lösa mitt problem med sidopanelen. Jag sökte efter öppna block. Jag tog bort ett blogginlägg som var krångligt med HTML på grund av att jag kopierade innehåll. Jag provade ett annat tema. Jag tog bort mina widgets (och försökte sedan lägga till en för att se vad som skulle hända – "följ bloggen"-knappen – fortfarande längst ner). Jag provade validatorn men förstår egentligen inte vad den säger till mig. När jag angav olika blogginläggs-URL:er fick jag samma felmeddelanden. Jag är ledsen att jag låter så dum... Jag har haft bloggen länge, men har nyligen börjat lägga till mycket innehåll, och jag vet egentligen inte vad jag gör än. Sidopanelen hamnade från höger sida, till botten av bloggen, mycket nyligen (de senaste dagarna). Kan du hjälpa mig?
WPBeginner Support
Hej Maria,
Det verkar som att du använder en WordPress.com-blogg. Se vår guide om skillnaden mellan självhostad WordPress.org vs gratis WordPress.com-blogg.
Admin
Sparsh Goyal
Jag har samma problem men kan inte lösa det. Endast min startsida har detta problem. Sidor av typen Post-type och Page-type fungerar bra. Min startsidas sidofält hamnar högst upp istället för precis bredvid mitt innehåll. Kan du snälla kontrollera vad som går fel på min webbplats. Min webbplats är coasilat.com
Mustafa
Tack. Problemet är löst. det var ett extra div-element. när jag tog bort det är problemet löst.
Jan Reilink
Livräddare, tack!
Asha Shendre
Jag hade problem hela dagen för detta.
problemlösning fick jag bara här.
Tack..
Tack så mycket sir…
Harish
Tack för att du hjälper till
Sly
Hej, jag är nybörjare. Jag kan INTE NÅGONTING om CSS eller HTML-kod, jag redigerar inte mitt tema, jag har inget barn-tema. Jag lägger bara till plugins för vad jag behöver göra. Jag verkar ha problemet med ALLA MINA BLOGGINLÄGGSSIDOR. Sidofältet är under blogginläggen. Jag har ingen aning om vad en div är och hur man fixar det. Kära proffs, vad vore det bästa sättet för mig att lösa detta sidofältsproblem?
Tamara
Jag är nybörjare och inte heller programmerare, men kunde lösa det här problemet genom att använda länken W3 Validator på den här sidan. Överst i validatorn, under Alternativ, markerade jag alla tillgängliga och angav sedan webbadressen till min blogg och körde validatorn. Under en numrerad lista med fel fanns en mycket detaljerad (och skrämmande, men håll ut) visning av felen som de är placerade i texten i min blogg. Jag fokuserade på de som nämns i den här artikeln. När jag skrollade igenom den detaljerade rapporten hittade jag ett fel som var markerat i rött. Eftersom min text visades kunde jag se att det var i ett av mina blogginlägg precis efter en internetlänk jag hade infogat. Jag gick till det blogginlägget på WordPress-instrumentpanelen, klickade på "redigera" och tog bort länken. (Höll nere "ta bort" för att vara säker på att jag fick med eventuella osynliga saker som kunde finnas där och backade ett par bokstäver av samma anledning. Jag sparade sedan blogginlägget. Min webbsida var fixad! Jag redigerade sedan om blogginlägget för att lägga tillbaka länken och allt förblev bra. Problemet löst.
Lisa W Boyle
Tack, jag kunde omedelbart hitta och åtgärda problemet baserat på dina instruktioner. Jag upptäckte att jag hade lagt till en extra i min single.php-fil. Du är en livräddare, tack så mycket!
Roney Oenophile
Jag vet inte vad jag gjorde fel, snälla hjälp mig. Jag redigerade text och jag tryckte av misstag på en kombination av tangenter som ändrade hur det såg ut. Några knappar som helskärm saknas nu. Och publiceringsknappen är flyttad till vänster sida. Och bilden som jag laddade upp med inlägget flyttades ovanför mitt innehåll och den är väldigt stor nu. Jag vet inte hur det hände, jag vet inte vad problemet är. Jag är inte datorvan. Jag skriver vanligtvis inlägg. Snälla hjälp mig. Adressen till min sida är wordpress.com
WPBeginner Support
Se vår guide om skillnaden mellan självhostad WordPress.org vs gratis WordPress.com-blogg. Du måste kontakta WordPress.com-support.
Admin
Danielle
Första gången jag tar över uppdateringen av vår webbplats... försökte uppdatera den statiska startsidan och på något sätt hamnade min sidopanel längst ner. Jag kan inte se några eller taggar... hjälp! Jag vill inte berätta för personen jag tog över från att jag redan har klantat till det om jag kan lista ut vad jag gjorde!
giovanni
Kan någon snälla hjälpa mig, jag har samma problem...
detta är min header.php
Susan
Perfekt! Tack! Jag visste i samma ögonblick som du sa div exakt vems inlägg i min communityblogg som behövde redigeras!
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! Du räddade mig precis en massa tid och frustration! Tack
srik
Tack så mycket för detta! Var verkligen till hjälp
Amy
Tack för det här inlägget. Jag försöker lösa det här problemet på min webbplats just nu. Jag har provat allt som nämns i det här inlägget, men jag har fortfarande problem. Jag kan lite om webbplatser, men jag är helt rådlös om varför min övre navigeringsmeny hamnar på 2 rader och varför min sidopanel trycks ner till botten. Min webbplats är inte live än, men här är webbplatsen
Tack för all hjälp!!
sean
Liknande problem med min skräddarsydda blogg på min webbplats; sidofältet glider under sidfoten om det inte finns tillräckligt med innehåll för att trycka ner det.
Jag upptäckte att om man tar bort (eller säkrare, kommenterar ut) följande, så löstes problemet:
Jag vet inte vad denna tomma div är till för & hittills har den inte negativt påverkat bloggen. En annan mer uppenbar anledning beror på div-element utan avslutande taggar – det är lite svårare att hålla reda på alla dina öppna/stängda div-taggar i WP eftersom sidfoten & sidhuvudet tas bort till skillnad från en vanlig HTML-sida.
Sean
Eh, det är att kommentera ut den tomma "avgränsar" div:en längst ner på olika WP-sidor – den försvann från min ursprungliga kommentar!
David Pomazzo
kan du titta på min webbplats och hjälpa mig? http://www.americasfreedomfighters.com/ jag har lagt in Google AdSense och nu har mitt sidofält flyttats till botten och jag har en artikel som går upp i sidofältet! tack så mycket
Jen
THANK YOU! It was the content width that did it for me
Cecilia
Jag har det här problemet och jag kan inte lösa det (jag har försökt i flera dagar)
Här är min webbplats:
Snälla, jag behöver verkligen hjälp. Tack!!!! =)
WPBeginner Support
Du behöver förmodligen lägga till clear innan du avslutar din .hfeed div så här:
1-click Use in WordPress
Admin
Katie Clark
Jag har det här problemet, och jag vet inte ens var jag ska börja, eftersom jag inte har gjort någon redigering idag. Några förslag? Här är min sajt
http://clarkscondensed.com/
Redaktionell personal
Din webbplats ser bra ut i Chrome.
Admin
Doomish
Fantastiskt tips! Det kommer att vara riktigt hjälpsamt, och Kathys kommentar är typiskt vad som händer mig.
kathy
Eftersom de flesta teman har korrekt CSS, tycker jag att detta nästan alltid är ett problem med felaktigt avslutad HTML. Vanligtvis inträffar det på en specifik sida eftersom användaren har försökt lägga till egen HTML i inläggsredigeraren och saker och ting blev konstiga därifrån. Enkelt fel, men kan ta lång tid att felsöka.