Vill du ta bort sidebaren från din site i WordPress?
Sidebar är ett widgetfärdigt area i din WordPress Theme där du kan visa information som inte är en del av innehållet på huvudsidan. Sidebars kan dock vara distraherande och ta upp värdefullt utrymme.
I den här artikeln visar vi hur du enkelt kan ta bort sidebaren i WordPress.
Varför ska man ta bort sidebar i WordPress?
De flesta gratis och betalda WordPress themes har flera sidebar eller widgetar redo areas.
Du kan använda sidebars för att visa en lista över dina senaste inlägg, annonser, signup forms för e-postlistor eller annat content som inte är en del av huvudsidan eller inlägget.
På WPBeginner använder vi en sidebar för att främja våra pages på social media och för att displayed våra mest populära posts.
Du kan enkelt add objekt till ett temas sidebar med hjälp av WordPress widgets.
I de flesta teman i WordPress ser sidebaren olika ut beroende på om besökaren använder en stationär eller mobil device. Eftersom smartphones och surfplattor har mindre skärmar flyttar WordPress vanligtvis sidebarerna längst ner på vyn.
Beroende på hur din site är uppbyggd kan det här se konstigt ut. Mobilanvändare kommer också att behöva rulla längst ner på vyn för att se innehållet i sidebaren, vilket kan påverka användarupplevelsen. För mer information, vänligen se vår guide om hur du viewar mobilversionen av WordPress webbplatser från datorn.
Även på en stationär dator kan sidebaren distrahera från det viktigaste innehållet, till exempel sidans call-to-action.
Med det sagt, låt oss se hur du kan remove sidebar i WordPress. Vi ska visa dig hur du tar bort sidebaren från hela din site, och hur du döljer sidebaren på en specifik page eller post.
Video Tutorial
Om du inte gillar videoklippet eller behöver fler instruktioner, fortsätt att läsa. Om du föredrar att hoppa direkt till en viss metod kan du använda länkarna under.
- Method 1. Removing Sidebars Using Your WordPress Theme Settings
- Method 2. Removing the Sidebar Using Full Site Editing (Block-Based Themes Only)
- Method 3. Remove the Sidebar From Your Entire WordPress Website (Advanced)
- Method 4. Removing Sidebars From Individual Pages in WordPress
- Method 5. Removing Sidebars from a Static Page in WordPress
- Method 6. Remove the Sidebar from a Single Post in WordPress
Metod 1. Ta bort sidebars med hjälp av dina temainställningar i WordPress
Många av de bästa temana för WordPress har built-in settings för att remove sidebars. Beroende på ditt theme kan du kanske ta bort sidebaren från enskilda posts och pages eller till och med hela din site.
För att kontrollera om ditt theme har det här alternativet, gå till Appearance ” Customize.
I menyn till vänster letar du efter ”Sidebar” eller liknande inställning.
I följande image kan du se alternativen för det populära Astra WordPress theme.
Om du ser ett ”Sidebar” eller liknande alternativ, välj det och leta efter eventuella inställningar som tar bort sidebaren.
Det kan vara en dropdown-meny, thumbnails som visar de olika layouterna för sidebar eller någon annan inställning.
Om your theme inte har ett ”Sidebar”-alternativ kan du kanske ta bort sidebaren genom att välja ”Page” eller liknande section.
Som du kan se i följande image har Astra också en ”Page”-inställning.
Här ser du olika layouts, inklusive flera som tar bort sidebar, till exempel ”No sidebar” och ”Full Width / Stretched”.
Klicka bara på en thumbnail för att tillämpa den layouten på din site.
Oavsett hur du tar bort sidebaren, glöm inte att klicka på ”Publicera”.
Vissa teman tillåter dig också att remove sidebar från enskilda posts och pages. Detta kan vara användbart när du utformar customize-sidor, till exempel en landing page eller en försäljningssida.
För att se om ditt theme har dessa settings, öppna helt enkelt en page eller post där du vill dölja sidebaren. I menyn till höger väljer du antingen ’Post’ eller ’Page’ och letar sedan efter ett alternativ för ’Post Settings’ eller ’Page Settings’.
Om ditt theme har denna section, click to förstora. Du kan nu leta efter eventuella inställningar som tillåter dig att ta bort sidebaren.
I följande image kan du se inställningarna för post för det populära ThemeIsle Hestia-temat.
Med vissa WordPress teman är det inte möjligt att ta bort sidebaren med hjälp av customizern eller page editor. Om så är fallet, fortsätt att läsa så visar vi dig andra sätt att ta bort sidebaren i WordPress.
Metod 2. Ta bort sidebaren med hjälp av Full Site Editing (endast blockbaserade teman)
Om du använder ett block theme som Divi, kan du ta bort sidebaren med hjälp av Full Site Editing (Redigering av hela webbplatsen) och block editor.
Detta är ett snabbt och enkelt sätt att remove sidebar över hela din site, även om det inte fungerar med alla themes.
Du startar editorn genom att gå till Appearance ” Editor.
Som standard visar hela Site Editor ditt temas home page, men du kan ta bort sidebaren från vilken page som helst.
För att se alla tillgängliga alternativ, välj bara antingen ”Templates”, ”Patterns” eller ”Pages”.
Du kan nu klicka på den template eller page där du vill ta bort sidebaren.
WordPress kommer nu att visa en preview av designen. För att gå vidare och editera denna template, click på den lilla penn-iconen.
Du kan nu clicka för att selecta sidebar.
I den lilla toolbar som visas klickar du på den prickade ikonen.
Du kan nu ta bort sidebaren genom att clicka på ”Remove Column” eller liknande inställning.
När du har gjort det kan du gå vidare och klicka på knappen ”Save”.
Nu, om du besöker din WordPress website, kommer du att se att toolbaren har försvunnit.
Du kanske också vill läsa vår guide om WordPressd Full Site Editing.
Metod 3. Remove the Sidebar från hela din website i WordPress (Avancerat)
This method allows you to remove sidebars from every page and post on your WordPress blog or website.
You will need to edit your theme files, så det är ej det mest nybörjarvänliga alternativet. Den här metoden bör dock fungera för de flesta teman i WordPress, inklusive teman som inte har ett built-in sätt att dölja sidebaren.
Tänk på att om du editar dina WordPress theme-filer direkt, så kommer dessa ändringar att försvinna när du update the theme.
Med detta sagt rekommenderar vi att du skapar ett barntema eftersom detta allow you att updating your WordPress theme utan att förlora customize.
Först måste du ansluta till din WordPress-webbplats med hjälp av en FTP-klient som FileZilla, eller så kan du använda filhanteraren i cPanel på ditt WordPress-webbhotell. Om du är en SiteGround-användare kan du använda Site Tools dashboard istället.
Om det är första gången du använder FTP kan du läsa vår kompletta guide om hur du ansluter till din site med FTP.
När du är ansluten går du till /wp-content/themes/ och öppnar mappen för ditt aktuella WordPress theme.
WordPress teman består av olika templates, så du måste edit alla templates som innehåller ett sidebar. För att ta reda på vilka filer du behöver editera, se vår guide till mall-hierarki i WordPress.
Du kan till exempel behöva editera index.php, page.php, single.php, archive.php, home.php och så vidare.
För att editera en fil öppnar du den i en textredigerare, till exempel Notepad. Leta sedan upp raden som gillar det här:
<?php get_sidebar(); ?>
Om your theme har flera sidebars kommer koden att se lite annorlunda ut och det kan finnas flera delar av sidebar-koden. Vanligtvis kommer den här koden att ha ordet ”sidebar” inuti funktionen, till exempel:
<?php get_sidebar('footer-widget-area'); ?>
Du kan helt enkelt delete raden för den sidebar som du vill ta bort.
Nu kan du save och uploada filen till ditt WordPress webbhotell account. Nu kan du upprepa denna process för all template-filer som har en sidebar.
När du är slutförd kan du besöka din butik, blogg eller website för att se förändringen i action.
You may notice that although the sidebars are gone, your content area is still the same width, which leaves the sidebar area empty.
Detta händer när temat har en definierad bredd för innehållsområdet. När du har tagit bort sidebaren kan du behöva justera bredden på innehållsområdet genom att lägga till custom CSS i ditt WordPress-tema.
För att göra detta, gå till Theme ” Customize. I menyn till vänster klickar du på Additional CSS.
Du kan nu gå vidare och klistra in följande kod i den lilla code editor:
.content-area {
width: 100%;
margin: 0px;
border: 0px;
padding: 0px;
}
.content-area .site {
margin:0px;
}
När du har gjort det klickar du på knappen ”Publicera”. Besök nu din site och du kommer att se att content area tar upp 100% av det tillgängliga utrymmet.
Metod 4. Ta bort sidebars från enskilda pages i WordPress
Du kanske bara vill ta bort sidebaren på vissa pages medan du fortfarande vill visa sidebaren på andra area på din site. Till exempel visar många websites inte sidebar på sin checkout page eftersom det kan distrahera kunderna och hindra dem från att completed sitt köp.
Om du bara vill ta bort sidebaren från en specifik page, rekommenderar vi att du använder ett page builder tillägg som SeedProd.
SeedProd låter dig designa alla typer av pages med hjälp av en enkel drag and drop editor. Detta gör det enkelt att add to och remove sidebar från vilken page som helst.
I SeedProd Editor klickar du helt enkelt för att selecta den sidebar som du vill ta bort. Gå sedan vidare och klicka på ikonen för trash.
Om du vill ta bort sidebaren från hela din site kan du också använda SeedProd för att enkelt skapa ett customizer-tema som inte har några sidebars.
För mer detaljerade instruktioner, vänligen se vår guide om hur du skapar en custom page i WordPress med hjälp av SeedProd.
Metod 5. Ta bort sidebar från en statisk page i WordPress
Vissa WordPress themes kommer med flera templates, inklusive full width page templates som inte visar sidebaren på någon sida av innehållet. Du kan använda dessa templates för att remove sidebar från vilken page som helst.
För att se om ditt theme har en full width template, öppnar du bara en page. I menyn till höger klickar du på länken bredvid ”Template”.
I popupen som visas öppnar du dropdown-menyn och letar efter en full width template.
Om du hittar en, ge den ett click för att tillämpa templates på denna page.
Om ditt theme inte har en full width template kan du skapa en manuellt.
Öppna en plain text editor som Notepad och klistra in följande kod i en tom fil:
<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>
Du kan nu save denna fil med namnet full-width.php.
Därefter ansluter du till din site med en FTP-klient eller filhanteraren som tillhandahålls av din hosting provider för WordPress.
Gå sedan till /wp-content/themes/ och öppna mappen för ditt nuvarande theme. I den här foldern hittar du filen page.php och öppnar den i en textredigerare.
Nu kopierar du allt som visas efter raden <?php get_header(); ?> och
klistrar in det i filen full-width.php.
När du har gjort det, leta reda på och ta bort raden som gillar det här:
<?php get_sidebar(); ?>
Nu kan du save dina ändringar och uploada filen full-width.php till din theme folder.
Följaktligen kan du använda denna template med vilken page som helst genom att följa samma process som beskrivs ovan.
Note: Om du har en page öppen i content editor när du skapar filen full-width.php måste du uppdatera editorn innan den nya templates visas i dropdown-menyn.
För mer detaljer, se vår guide om hur du skapar en full width page template i WordPress.
Metod 6. Ta bort sidebar från ett enskilt inlägg i WordPress
WordPress har också templates för post, som fungerar på samma sätt som templates för pages.
Om du vill remove sidebar från vissa enskilda inlägg kan du skapa en customze template för enskilda inlägg. Detta liknar att skapa en full width page template.
Först måste du skapa en new template-fil med hjälp av en textredigerare som gillar Notepad. När du har gjort det kan du copy and paste följande kod i den filen:
<?php
/*
* Template Name: Featured Article
* Template Post Type: post, page, product
*/
get_header(); ?>
Den här koden skapar en new template som heter ”Featured Article” och gör den available för alla pages eller posts, plus alla product post types i your online store.
I din custom template för enskilt inlägg behöver du helt enkelt bara ta bort sidebar-delen av koden. För mer information, följ stegen som beskrivs i vår guide om hur du skapar templates för enskilda inlägg i WordPress.
När du är klar, save denna fil som full-width.php.
Därefter måste du uploada filen till din aktuella WordPress theme folder med hjälp av en FTP-klient eller filhanterare.
När du har gjort det kan du tillämpa denna template på valfri post. I menyn till höger klickar du helt enkelt på länken bredvid ”Template”.
I popupen som visas öppnar du dropdown-menyn och väljer sedan den full width template som du just skapade.
Efter det klickar du bara på ”Update” eller ”Publicera” för att göra dina ändringar.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt tar bort sidebaren i ditt WordPress theme. Du kanske också vill se vår Step-by-Step guide om hur du ökar WordPress hastighet och prestanda, och vår jämförelse av de bästa e-postmarknadsföringstjänsterna för att öka din trafik och försäljning.
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.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dennis Muthomi
I use sidebars on my blog posts to display a table of contents that sticks while users scroll. And it REALLY improves clicks on longer posts.
But, I’ve removed the sidebars from some pages like my key sales or conversion pages.
On these, the sidebars were too distracting and took up valuable space.
Jiří Vaněk
I usually try to remove the sidebar at the moment when the website is not like a classic blog but it is a business or personal portfolio. I usually try to do it using the template editor, but where this is not possible, or this option is missing, this guide is very useful. Thanks for the tips on how to do it multiple ways.
WPBeginner Support
Glad you found our tips helpful!
Administratör
Conny Dijkstra
Thank you so much for your extensive explanation! I just wanted to remove a widget showing on one page. And you gave me the right solution. Set your template to full with for that page.
You made my day!
So great that you spend a lot of time to help other people.
WPBeginner Support
Glad our guide was able to help
Administratör
frespaniol
I tried it with Twenty Sixteen theme, but it doesn’t work.. is it normal..?
WPBeginner Support
The theme may have a different location where it is adding the sidebar. If you reach out to the theme’s support they can normally let you know where the code for the sidebar is added.
Administratör
Stacey Beckles
Your posts are always a lifesaver.
WPBeginner Support
Glad you find them helpful
Administratör
Gary
Can the users just switch the toggle on the front-end to show or hide the sidebar themselves?
Sergio
Thank you!
Eray
Is there a way to disable sidebar on mobile? I have a responsive theme and on mobile it naturally shapes itself. But when I scroll down, I see the sidebar ”latest articles” widget there.
On desktop view,it’s OK, but on mobile it displays other blocks, which are sufficient but then also sidebars. Can I disable it for mobiles? Thank you.
Hussain
Yet Another clear and useful post . thank very much.
I have two questions:
1-The theme I am using, namely oceanwp, has the option to remove the sidebar but simply does not work. What is the possible reason?
1- I managed to remove the sidebar using the index.php file. If there is update for the theme. Is the change reversible?
Regards
Max
Is there are way to remove sidebar/footer using hooks? E.g. using remove_action();?
Steff
You’re an absolute legend!
David Riewe
The custom template does remove the sidebar but is not using the full width.
Patricia
Kindly help me out? I’m trying to remove the sidebar from all pages but the index.php. Following these instructions works beautifully but changing the content-area width to 100% pushes the sidebar to the bottom of the index.php. How do I exclude the index.php from the change of the content-area width?
Girik
HI Team
I am looking for a solution to remove the sidebar from home page where the home page is set to latest post. Do you have?
Susan Taunton
I love your video tutorials – they are always crystal clear and informative. And your topics are so often precisely relevant to my needs. Thank you!!
VIva la WPBeginner!!!
Mateo
I have a problem, i want set full width, but when I do it, my home is too in fullwidth (surely because i dont use excerpt, else that i use the_content() for get the content in home page).. how can I do a fullwidth with this problem…
Linda
Thank you so much for helping me get rid of the right bar. But now I can’t show my blog in full frame. It is namned ”home” in the meny, but does´nt exist when I´m scrolling in ”sides” like you show here. Can you help me fix it in the code?
katma
That’s what i am looking for!!!
But the problem is finding the CSS class.
I tried with css hero. I could find the css class name but i couldn’t make it with the adding custom CSS function.
Even i can optimize the with for phone, tablet vertical and horizontal position and pc.
Terry
Instead of deleting the code, it is safer and recommended to comment it out.
Add the following // in front of every instance of the get sidebar call and the sidebars will stop displaying without disrupting the code.