Så här ändrar du sidebarens sida i WordPress (4 metoder)

Vill du ändra sidofältets sida för ditt WordPress theme?

Kanske föredrar du ett rent, vänsterjusterat utseende, eller så kanske din design anropar att sidebaren ska vara till höger för bättre balans. Oavsett anledning är customize av din websites layout ett bra sätt att anpassa din närvaro på nätet.

Här på WPBeginner har vi hjälpt otaliga användare med WordPress theme customization. Idag ska vi visa you hur man ändrar sidebarens sida i WordPress.

När ska man ändra standardsidan för sidebar i WordPress

Sidebar är en column på din WordPress website, som vanligtvis finns till vänster eller höger om ditt huvudsakliga content area.

I klassiska WordPress teman är denna sidebar i huvudsak ett widgetområde där du kan lägga till olika element som kontaktformulär, sökfält, flöden på sociala medier, senaste inlägg och mer med hjälp av WordPress widgets.

Även om block themes inte använder widgets, används termen ”sidebar” fortfarande ofta för att beskriva denna specifika section som ofta visar ytterligare content eller alternativ till navigation menu.

Ibland kan du behöva ändra sidebarens sida av olika skäl. Till exempel kanske din website vänder sig till språk som skrivs och läses från höger till vänster. Att ha sidebaren på vänster sida stämmer bättre överens med det naturliga läsflödet för dina användare.

Eller så vill du förbättra användarupplevelsen. Maybe you run an eCommerce site and notice that potential customers often scan your web pages in a certain way. You want to accommodate that behavior so that they feel more comfortable shopping on your site.

Vissa designer av websites kan också anropa en specifik placering av sidebar för att uppnå en balanserad och visuellt tilltalande layout.

Med allt detta i åtanke, låt oss titta på hur du ändrar sidan i sidebar på din WordPress blogg eller website. Vi har kommit fram till 3 enkla metoder, och du kan använda snabblänkarna under för att hoppa till den du föredrar:

Metod 1: Hur man ändrar sidebarens sida med WordPress Customize (Classic Themes)

Den här metoden är för personer som använder ett klassiskt theme. Detta innebär att du fortfarande kan använda WordPress customizer för att utforma din site design, och Widgets section i WordPress admin’s Appearance menu finns fortfarande.

Om theme customize saknas i din WordPress dashboard, använder du troligen ett block theme och måste hoppa till den tredje metoden.

Ibland erbjuder utvecklare av klassiska teman flera placeringar av sidebar som du kan välja mellan. Du kan bekräfta om detta är sant genom att använda WordPress customize och välja den position för sidebar som du föredrar där.

Gå först till Appearance ” Customize. Vi använder temat Astra som ett exempel.

Här ser vi att temat Astra har en speciell ”Sidebar”-menu.

Låt oss clicka på den.

Som you kan se har Astra tre page templates: en utan sidebar, en med vänster sidebar och en med höger sidebar. This allows us to change the sidebar side in one click. Här har vi ändrat sidebarens sida till vänster.

Astra ger också alternativ för att ändra sidebarens stil, justera bredden och göra den sticky.

När du har gjort ändringarna kan du lägga till de tillgängliga widgetarna i sidebaren som vanligt. Mer information hittar du i vår guide om hur du lägger till och använder widgetar i WordPress.

Sedan klickar du bara på ”Publicera”.

Även om detta är en praktisk funktion beror det all på temat. Vi rekommenderar starkt att du kontrollerar din theme documentation för att se om du kan ändra sidebar med hjälp av customizern.

Om ej, hoppa då ner till nästa metod.

Metod 2: Hur man ändrar sidebarens sida med kod (klassiska teman)

Om ditt klassiska theme inte erbjuder flera sidebars att välja mellan, kan du ändra sidebarens sida manuellt med CSS-kod.

Vi rekommenderar att du använder en staging site och/eller ett barntema för att leka med den här metoden. På så sätt, om ett error inträffar, kommer det inte att påverka ditt huvudtema och/eller din live website.

Dessutom kan användning av ett barntema förhindra att dina ändringar skrivs över när det sker en update av temat.

Steg 1: Använd Inspect Tool för att lokalisera din sidebar CSS-klass

Det första du ska göra är att öppna din website. Sedan hoverar du runt i sidebarens area och använder din webbläsares inspektionsverktyg.

Om du använder Chrome kan du bara högerklicka på area och välja ”Inspect”.

Om du vill ha More information kan du kontrollera vår grundläggande guide till Inspect element.

Nu, vad du vill göra är att hovera markören över HTML- och CSS-linjerna högst upp till höger på sidan.

När du ser att hela ditt sidebar area är markerat, click på den linjen. För oss var det <sidebar id="secondary" class="sidebar widget-area">.

Fliken ’Styling’ längst ner på sidan har alla CSS-egenskaper relaterade till sidebaren.

I vårt fall såg vi att CSS-klassen för sidebarens area är .sidebar. Det finns också regler som bestämmer positionen för sidebaren, som i det här fallet är vänster sida.

Det vet vi eftersom sidebaren flyttar sig till andra sidan när vi avmarkerar margin-left-regeln.

Här är koden för sidebar area i vårt theme:

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

Du kan copy and paste den här koden till en textredigerare eftersom vi kommer att behöva den i ett senare steg. Eller så kan du bara hålla den här tabben öppen för senare.

Nu när vi vet CSS-klassen för sidebar-området måste vi också hitta klassen för huvudinnehållsområdet som visar alla dina posts eller postinnehåll.

Vad du kan göra är att hovera över HTML- och CSS-raderna för att se vilken rad som markerar det huvudsakliga content-området. Här upptäckte vi att det var raden <div id="primary" class="content-area">.

Gillar innan, du kan rulla ner till ”Styles” tabs för att se vad CSS-klassen för det området är. I det här fallet var det .content-area. Här är koden för den:

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Återigen kan du copy and paste din content area’s CSS-kod till en textredigerare eller hålla denna tabs öppen för nästa steg.

Nu när vi vet CSS-klasserna för ditt sidofält och content area kan vi editera din style.css theme-fil för att ändra sidofältets sida.

Step-by-Step 2: Customize ditt temas style.css-fil

Vanligtvis måste du editera din style.css direkt med hjälp av din hosting providers filhanterare eller FTP-klient. Filen style.css kan dock vara ganska lång, och om you gör ett misstag kan det påverka hela designen av din website och förstöra upplevelsen för användarna.

Det är därför vi rekommenderar att du använder WPCode. Detta code snippet plugin gör det säkert och enkelt att customize din style.css-fil utan att direkt hantera den.

Om dina kodändringar orsakar oavsiktliga error kan du deactivate den med ett enda click, och din website återgår till det normala.

För denna tutorial kan du använda den gratis WPCode-versionen, men uppgradering till en premiumplan ger dig tillgång till mer avancerade funktioner. För mer information, kontrollera vår fullständiga WPCode-recension.

Först, gå vidare och installera WPCode till din WordPress. Om du behöver steg-för-steg-instruktioner, läs vår guide om hur du installerar ett plugin för WordPress.

När du är klar går du till Code Snippets ” + Add Snippet. Sedan väljer du ”Add Your Custom Code (New Snippet)” och klickar på knappen ”Use snippet”.

Skriv nu en rubrik för din custom code. Det kan vara något som gillar ”Change Sidebar Side.

Ändra sedan Code Type till ”CSS Snippet”.

När du är klar måste du infoga CSS-kod snippets av din sidebar och innehållsområden i Code Preview box.

Du kan separera dem med ett tomt utrymme för att göra det lättare att identifiera dem, gillar så här:

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Låt oss nu customize denna CSS-kod. Vad du vill göra är att ändra CSS-egenskaperna som definierar sidebarens och huvudinnehållsområdenas placeringar.

I vårt fall har dessa CSS-klasser egenskaperna float, margin, padding och width, men det kan se annorlunda ut beroende på ditt theme.

För vårt sidebar area ändrade vileft till right i egenskaperna float och margin. Detta innebär att sidebar-området kommer att vara i motsatt riktning mot var det ursprungligen placerades.

.sidebar {
float: right;
margin-right: 75%;
padding: 0;
width: 25%;
}

När den delen är klar, låt oss ändra placeringen av content area. Det som fungerade för oss är att vi ändrade float: left till float: right och margin-right till margin-left. Detta säger till WordPress att flytta content area till höger.

Dessutom har vi add to position: relative och right: 100% egenskaper. Dessa säkerställer att vårt content area inte kommer att gå för långt ut på höger sida.

.content-area {
float: right;
margin-left: -100%;
width: 70%;
position: relative;
right: 100%;
}

Återigen, det som fungerar för vårt theme kanske ej fungerar med your eftersom varje theme har olika namn för sina CSS-klasser och använder olika egenskaper. Vi rekommenderar att du läser denna kompletta CSS-referens för att ta reda på vad som fungerar bäst för ditt theme.

Dessutom kan du gratis ändra procentsatserna för bredd och marginaler i koden för att justera sidebarens placering.

När du har ändrat ditt code snippet rullar du ner till sektionen Insertion. Se till att metoden för insert är ”Auto Insert”.

När det gäller Location, välj ”Site Wide Footer” så att din kod kan åsidosätta den befintliga koden i din style.css-fil.

Nu kan du klicka på toggle högst upp till höger för att göra koden ”Activate” och klicka på ”Save Snippet”. Sedan kan du previewa din website för att se resultatet.

Om du tittar på screenshots ovan kan du se att sidebaren på vår demo website var på höger sida.

Efter att ha editat koden i style.CSS har temat nu ett vänster sidebar:

Nu när du har ändrat sidofältets sida kan du börja ändra eller lägga till mer content i sidofältet. Här är några idéer som kan hjälpa dig:

• Så här lägger du till en image i WordPress Sidebar Widget
• Så här addar du en Link till Widgetars Rubriker i WordPress
• Hur man addar Customize Styles till WordPress Widgetar
• Så här inaktiverar du oönskade widgetar i WordPress

Metod 3: Hur man ändrar sidebarens sida med Redigering av hela webbplatsen (Block Themes)

Om du använder ett block theme, kommer du inte att se en Widgetar section i din WordPress admin. You kanske undrar hur man ändrar sidan på sidebar om den menyn inte finns.

Tack och lov är processen mycket enklare jämfört med den för klassiska themes. Detta beror på att block themes använder Gutenberg-block, och du kan helt enkelt drag and drop elementen för att ändra deras position med hjälp av full-site editor (Redigering av hela webbplatsen).

För det andra kommer teman för block vanligtvis att ha en template som innehåller en sidebar. Vi behöver helt enkelt ändra det, och varje page som använder templates kommer att påverkas. You can check your theme’s documentation to see what the template is called to access it.

För demonstrationen kommer vi att använda temat Twenty Twenty-Four, som råkar ha en page med en sidebar template.

Först går du till Appearance ” Editor i adminpanelen.

Här ser du några menyer för att customize ditt block theme.

Välj ”Templates”.

Hitta nu templates med sidebar som du gillar att edit.

I Twenty Twenty-Four är det ”Page with Sidebar” och ”Single with Sidebar”. Beroende på ditt tema kanske templets namn inte tydligt nämner att det har ett sidebar, så återigen, du bör kontrollera ditt temas dokumentation.

Gå vidare och välj den sidebar template.

På nästa page kommer du att se en knapp ”Edit” med en penna.

Klicka på den för att öppna block editor.

Vanligtvis inkluderar block themes sidebaren och huvudinnehållsområdet i ett columns block. Detta håller allt snyggt, organiserat och snyggt separerat från varandra.

För att ändra sidebarens sida behöver du bara välja den column som utgör sidebaren och flytta runt den.

Det enklaste sättet att göra detta är att clicka på funktionen ”List View” på vänster sida av page.

Klicka sedan på blocket ”Columns” för att förstora det och hovera över dess content tills du hittar den column som innehåller sidebar-elementen.

I vårt fall hjälpte det att temat Twenty Twenty-Four har en template-del som heter ”Sidebar”, så det var lätt att identifiera den. Som sagt, vissa teman kan bara innehålla en vanlig, namnlös grupp av block som utgör sidebaren.

Du vet att du har valt den högra Column när en rektangulär markering och en toolbar appear around the entire group of blocks for the sidebar.

Nu ser du pilar i toolbaren för sidebar-kolumnen som du kan använda för att ändra kolumnens placering.

Click på den och beroende på hur blocket Columns är utformat kan du behöva leka med positionen tills du hittar rätt.

Temats utvecklare kan ha addat några tomma Column för att skapa utrymme mellan huvudinnehållsområdet och sidebar-området.

Om du vill ta bort det, hitta bara den högra tomma kolumnen med funktionen List View som tidigare. Klicka sedan på trepunktsmenyn i blockets toolbar och välj ”Delete”.

Eller om du vill skapa mer utrymme mellan sidebar-området och innehållsområdet kan du öppna tabben Block settings och växla till ”Styles” -sektionen.

Sedan kan du i sectionen ”Dimensions” dra slidern för padding, marginal eller blockavstånd.

När du är klar klickar du på ”Save”.

Sedan kan du previewa alla pages på mobil och desktop som använder den template du just editerade för att se hur den gillar att se ut.

Vad händer om du har editerat templaten, men dina pages eller posts ej använder den?

Allt du behöver göra är att öppna sidan eller posten i Block Editor. I panelen för inställningar för post klickar du sedan på länken i fältet ”Template” och väljer ”Swap template”.

Nu väljer du bara den template som använder sidebaren.

Efter det kan du updating sidan eller posten.

Om du vill ha fler tips och tricks för att använda full site- eller block editor kan du kontrollera dessa guider:

• Så här redigerar du en website i WordPress (Ultimate Guide)
• Så här customize du färger på din website i WordPress

Metod 4: Hur man ändrar sidebarens sida med CSS Hero (alla teman)

Nästa metod använder ett betalt plugin som anropas CSS Hero, som är det bästa WordPress-pluginet för visuell CSS edit. Detta plugin gör det enkelt att customize ditt temas CSS utan att röra någon kod, vilket gör det bra för nybörjare.

Den här metoden fungerar också med alla themes, så om du tycker att de tidigare metoderna är något limit, kan du använda den här istället. Som sagt, det finns ingen gratis version av plugin, så du måste köpa en betald plan.

För mer information om pluginet och dess priser, kontrollera vår CSS Hero review.

Först downloadar du pluginet till din dator och installerar det på din WordPress website. För Step-by-Step-instruktioner, kontrollera vår guide för nybörjare om hur man installerar ett WordPress plugin.

När programmet har installerats kommer du att se en ”CSS Hero”-meny i toolbaren. Klicka på den för att öppna den visuella CSS-redigeraren.

Tänk på att eftersom inte alla WordPress themes fungerar på samma sätt, kommer sättet du använder CSS Hero för att ändra sidebarens sida att vara annorlunda. Så vi uppmuntrar dig att leka med plattformen för att se vad som fungerar för dig.

Med detta sagt kommer vi att visa you vilka settings vi customize för att ändra sidebarens sida från höger till vänster sida.

Först klickar du på sidebar area på din page. You will know that you’ve clicked the right one when all the elements in your sidebar are selected as a group and have a rectangular highlight around them.

På vänster sida av sidan ser du några menyer för att customize dina element.

Enligt vår erfarenhet är de inställningar som kan ändra placeringen av sidebar Position, Measures och Spacings.

Position avgör hur sidebaren placeras i förhållande till de andra elementen på page. Här kan du välja ”Absolute”, vilket ger dig viss frihet när det gäller var sidebaren ska vara.

Härifrån kan du ändra de övre, högra, nedre och vänstra pixlarna för att placera sidebaren.

You can see that now the sidebar and the main content area are on the same side.

För att fixa detta kan du hovera över containern som utgör huvudinnehållsområdet och klicka på den.

Nu, i den vänstra panelen, justerar du bara inställningarna för Position tills du hittar rätt passform.

Det vi gjorde var att vi lät positionen vara ”Relative” och justerade högerpixlarna.

Tekniskt sett är detta allt du behöver göra. Men om du vill justera storleken på sidebaren väljer du sidebarens area och går till inställningarna för ”Mått”.

Här kan du ändra sidebarens bredd och höjd.

Om du vill ändra avståndet mellan området för sidebar och området för huvudinnehållet kan du gå till ”Avstånd”.

Du kommer att se några sliders för att justera elementets padding och marginal här.

Återigen uppmuntrar vi dig att utforska detta plugins inställningar för att ändra sidebar-sidan till exakt vad du gillar.

När du är klar kan du klicka på knappen ”Save” längst ner till höger på sidan.

Alternativ: Skapa customize sidebars med ett tillägg för page builder i WordPress

Hittills har vi utforskat metoder för att ändra sidebarens location för hela din website. Men tänk om du bara vill ha specifika sidebars för vissa pages eller post types? När allt kommer omkring behöver inte alla pages samma content i sidebaren.

Till exempel kan din homepage dra nytta av en mer allmän sidebar med social media icons och en call-to-action. Men en produktsida kan vara bättre med en sidebar som visar relaterade produkter eller customer reviews.

I så fall kanske du vill skapa custom sidebars för ditt WordPress theme. Med customize sidebars kan du:

• Tilldela specifika sidebars till olika pages eller post types. This allows you to tailor your sidebar content to each page’s specific needs.
• Skapa en mer dynamisk och engagerande upplevelse för användarna. Genom att erbjuda relevant content i sidebaren kan du hålla besökarna engagerade och intresserade av att utforska din website ytterligare.

Det är här ett WordPress page builder-plugin kommer väl till pass. Dessa tillägg erbjuder drag and drop-funktionalitet och omfattande mallbibliotek, vilket gör det enkelt att skapa customize sidebars.

Vi rekommenderar att du använder SeedProd, som är ett populärt och nybörjarvänligt page builder och theme builder plugin. Med SeedProd kan du enkelt designa customize pages och themes med deras användarvänliga gränssnitt.

Du kan kontrollera dessa artiklar för mer information:

• Hur man lägger till Custom Header, Footer eller Sidebar för varje Category
• Hur man visar olika sidebar för varje post och page i WordPress

Vi hoppas att denna WordPress tutorial hjälpte dig att lära dig hur du ändrar sidan på sidebar i WordPress. Du kanske också vill kontrollera vår artikel om hur man lägger till en responsiv meny i fullskärm i WordPress och våra expertval av de bästa gratis logotypskaparna för att få dig att gilla proffs.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.