Så här ändrar du sidofältet i WordPress

Nyligen frågade en av våra läsare hur du ändrar sidofältet i ett WordPress-tema. Vi får den här frågan mycket där användarna vill ändra sidofältet från vänster till höger, eller åt höger till vänster. I den här artikeln visar vi hur du ändrar sidofältet i WordPress.

Varför ändra sidofältets sida i WordPress

Användbarhetsexperter tror att folk skannar sidor från vänster till höger. De rekommenderar att du lägger viktiga innehåll till vänster så att användarna förstår innehållet. Detta kan dock omvändas om din webbplats är på ett språk som skrivs i höger till vänster riktning.

Många WordPress-webbplatser använder den typiska blogglayouten med två kolumner. En för innehållet och den andra kolumnen för sidofältet.

Om du just startar en webbplats ska du välja ett WordPress-tema som har sidofältet på din föredragna plats.

Många teman har alternativ för att byta sidofältets sidor från temainställningar. Men om ditt tema inte har det här alternativet måste du manuellt ändra sidofältets sidor.

Med det sagt, låt oss ta en titt på hur du enkelt kan ändra sidofältet i WordPress med en liten bit av CSS.

Ändra sidofältets sida i WordPress med CSS

Innan du ändrar ditt tema bör du först överväga att skapa ett barntema. Genom att använda ett barntema kan du uppdatera ditt överordnade tema utan att förlora dina ändringar.

För det andra bör du alltid skapa en säkerhetskopia av din WordPress-webbplats när du gör direkta ändringar i ditt aktiva WordPress-tema.

Du behöver en FTP-klient för att redigera dina temafiler. Se vår nybörjarguide om hur du använder FTP för att ladda upp filer till WordPress.

Anslut till din WordPress-webbplats med hjälp av FTP-klienten och gå till din templatmapp. Det är vanligtvis beläget på:

/ Yourwebsite / wp-content / themes / din-theme-mapp /

Nu behöver du ladda ner och öppna ditt temas huvudsakliga formatark i en vanlig textredigerare som Anteckningsblock. Den här filen heter style.css, och det ligger i ditt temas rotkatalog.

I den här filen, hitta CSS-klassen för din sidofält. Det är vanligtvis .sidofältet. I det här exemplet använder vi standard WordPress-tema tjugo femton som har denna CSS för att definiera sidofältet:

 .sidofält float: left; marginal-höger: -100%; max bredd: 413px; position: relativ; bredd: 29,4118%;  

Som du kan se det flyter sidofältet till vänster med en marginal på -100% till höger. Vi ändrar det för att flyta till höger och marginell-vänster så här:

 .sidofält float: right; marginal-vänster: -100%; max bredd: 413px; position: relativ; bredd: 29,4118%;  

Spara dina ändringar och ladda upp style.css-filen till din webbplats med hjälp av FTP-klienten. Nu om du besöker din webbplats så kommer det att se ut så här:

Det beror på att vi har flyttat sidofältet men vi flyttade inte innehållsområdet. Tjugo Femton använder denna CSS för att definiera positionen för innehållsområdet.

 .platsinnehåll display: block; flyta till vänster; marginal-vänster: 29,4118%; bredd: 70,5882%;  

Vi ändrar det för att flytta innehåll till höger. Så här:

 .platsinnehåll display: block; flyta till vänster; marginal-höger: 29,4118%; bredd: 70,5882%;  

Så här har vår webbplats tittat efter att tillämpa denna CSS.

Som ni ser att vi har bytt sida för både innehåll och sidofält. Men det finns fortfarande ett vitt block till vänster.

Du kommer att stöta på sådana saker när du arbetar med CSS. Det kommer att ta lite detektivarbete för att ta reda på vad som orsakar det och hur man anpassar det.

Använd webbläsarens inspektionsverktyg för att titta på källkoden. Peka musen till den drabbade regionen i webbläsaren, högerklicka och välj Inspektera från webbläsarmenyn.

När du flyttar musen i källkodsvisning kommer du att märka de områden som den påverkar markeras i live-förhandsgranskningen. I den högra rutan kan du se CSS som används för det valda elementet.

Vi räknade ut att denna CSS i vårt stylesheet behöver justeras.

 @media skärm och (min bredd: 59.6875em) kropp: före bakgrundsfärg: #fff; boxskugga: 0 0 1px rgba (0, 0, 0, 0,15); innehåll: ""; display: block; höjd: 100%; minhöjd: 100%; position: fast; topp: 0; vänster: 0; bredd: 29,4118%; z-index: 0; / * Fixar blinkande bugg med rullning på Safari * / 

Denna CSS-kod lägger till ett tomt innehållsblock med 29,4118% bredd och 100% bredd till vänster till vänster. Så här kommer vi att flytta den till rätt.

 @media skärm och (min bredd: 59.6875em) kropp: före bakgrundsfärg: #fff; boxskugga: 0 0 1px rgba (0, 0, 0, 0,15); innehåll: ""; display: block; höjd: 100%; minhöjd: 100%; position: fast; topp: 0; höger: 0; bredd: 29,4118%; z-index: 0; / * Fixar blinkande bugg med rullning på Safari * / 

Efter att ha sparat och laddat upp stilarket tillbaka till servern så såg vår webbplats.

Att arbeta med CSS kan vara förvirrande för nybörjare. Om du inte vill göra all den manuella koden fungerar, kanske du vill prova CSS Hero. Det låter dig redigera CSS utan att skriva någon kod, och den fungerar med alla WordPress-teman.

Vi hoppas att den här artikeln hjälpte dig att ändra sidofältet i WordPress. Du kanske också vill se vår lista med 12 WordPress sidebar-tricks för att få maximal resultat.

Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för WordPress-videoinstruktioner. Du kan också hitta oss på Twitter och Facebook.