Skip to content

Allt om WordPress, webbutveckling — och mer därtill

🖼 Så här lägger du till olika bakgrunder för WordPress-inlägg och sidor
WordPressWordPress-teman
7 min1,452 ord

🖼 Så här lägger du till olika bakgrunder för WordPress-inlägg och sidor

Standardtemat WordPress ser rent ut, men efter en månads användning börjar du vilja ha lite mer personlighet. En färgad bakgrund för en viktig sida eller en bakgrundsbild för specifika inlägg är ett enkelt sätt att få innehåll att sticka ut visuellt utan att designa om hela webbplatsen.

Du kan åstadkomma detta på tre sätt: ett par rader CSS, ett litet PHP-utdrag eller ett färdigt plugin. Ingen av dessa metoder kräver djup kunskap om frontend-utveckling; du behöver bara veta var du ska infoga koden.

Nedan går vi igenom alla tre metoder med specifika kodfragment, filplaceringar och en ärlig titt på potentiella fallgropar.

💡 Snabb översikt:

  • Öppna header.php och hitta funktionen body_class(). Den genererar unika CSS-klasser för varje sida och inlägg, vilket gör att du kan rikta bakgrunder ända ner till ett enskilt inlägg.
  • Lägg till en CSS-regel med lämplig klass i style.css. Bakgrunden kommer bara att gälla för målsidan eller inlägget utan att påverka resten av webbplatsen.
  • Skapa ett anpassat fält och lägg till ett PHP-utdrag i functions.php. Bakgrunden sätts via en bild-URL direkt från WordPress admin, utan att du manuellt redigerar CSS.

Så lägger du till en bakgrund via CSS och body_class

WordPress tilldelar automatiskt en uppsättning CSS-klasser till <body>-taggen genom funktionen body_class(). Bland dessa finns unika identifierare för specifika inlägg eller sidor, vilket gör att du kan rikta bakgrunder med kirurgisk precision.

Kontrollera att ditt tema anropar body_class(). Öppna Utseende → Temafilredigerare och hitta filen header.php:

WordPress temaredigerare: väljer header.php-filen

Inuti header.php, hitta den inledande <body>-taggen. Bredvid den ska funktionen finnas:

1<body <?php body_class(); ?>>

Om du bara ser <body> utan funktionen, lägg till den. De flesta moderna teman inkluderar redan detta anrop, men det är värt att kontrollera.

Öppna nu valfri sida på din webbplats och visa dess källkod (högerklicka → Visa sidkälla i Chrome). För ett enskilt inlägg ser du något i stil med detta:

1<body class="single single-post postid-1 single-format-standard logged-in">

För en sida blir utmatningen annorlunda:

1<body class="page page-id-2 page-template-default logged-in">

Här är de viktigaste klasserna du kan rikta med CSS:

  • .single, alla enskilda inlägg. All stil som tillämpas på denna klass kommer att påverka varje blogginlägg.
  • .postid-N, ett specifikt inlägg med ID = N. Idealisk för punktstyling.
  • .page, alla sidor på webbplatsen.
  • .page-id-N, en specifik sida med ID = N.
  • .single-format-standard, inlägg med standardformatet.
  • .logged-in, gäller endast inloggade användare (användbart för felsökning).

Lägg nu till CSS i ditt temas style.css-fil. Till exempel, för att sätta en svart bakgrund för alla inlägg:

1.single {
2    background-color: #000;
3}

Och för att sätta en bakgrundsbild för en specifik sida med ID 2:

1.page-id-2 {
2    background-image: url('/wp-content/uploads/2026/01/my-background.jpg');
3    background-size: cover;
4    background-position: center;
5}

Du kan hitta sidans eller inläggets ID i admin: öppna listan över sidor, för muspekaren över titeln, så ser du post=2 eller ett liknande nummer i webbläsarens statusfält. I Gutenberg-redigeraren visas ID:t i URL:en: post.php?post=2&action=edit.

Fördelen med denna metod är dess enkelhet: du rör inte PHP, du installerar inga plugins, och du vet exakt vilken klass som gör vad. Nackdelen är att när du byter tema kommer alla stilar från style.css att gå förlorade om du inte använder ett barntema.

Så sätter du en bakgrund via ett anpassat fält och PHP

Om du behöver ändra bakgrundsbilden direkt från admin utan att dyka in i CSS varje gång, fungerar metoden med anpassade fält bra. Du skapar ett fält för bild-URL:en, och ett litet PHP-utdrag i functions.php infogar det i background-image-attributet.

Lägg till följande kod i functions.php för ditt aktiva tema. Om du använder ett tredjepartstema, se till att använda ett barntema; annars går ändringar förlorade vid uppdateringar:

1<?php
2/**
3 * Adds an inline style for body background via a custom field.
4 * Replace 'myprefix' with your own unique prefix.
5 */
6function myprefix_custom_field_background() {
7    $background = get_post_meta( get_the_ID(), 'myprefix_background_image', true );
8    if ( $background ) {
9        ?>
10        <style type="text/css">
11            body {
12                background-image: url( "<?php echo esc_url( $background ); ?>" );
13            }
14        </style>
15        <?php
16    }
17}
18add_action( 'wp_head', 'myprefix_custom_field_background' );

Funktionen hakar in i wp_head, och den inline-stil infogas i sidans <head>. esc_url() sanerar URL:en för att ta bort potentiellt farliga tecken, medan get_post_meta() hämtar fältvärdet för det aktuella inlägget.

Öppna nu valfritt inlägg eller sida i admin, hitta blocket Anpassade fält och skapa ett fält med namnet myprefix_background_image. Klistra in den fullständiga URL:en till bakgrundsbilden som värde. Spara, så kommer bakgrunden endast att gälla för detta inlägg.

Om blocket med anpassade fält inte är synligt: öppna redigeraren, klicka på de tre prickarna i övre högra hörnet → Inställningar → Paneler och aktivera "Anpassade fält."

Observera: bilden måste redan vara uppladdad till WordPress mediebibliotek; använd direktlänken till filen, inte bilagesidan.

Plugins för bakgrunder: när kod inte är din grej

CSS och PHP täcker de flesta uppgifter, men om du föredrar ett visuellt tillvägagångssätt, här är vad som finns tillgängligt på marknaden.

WP-Backgrounds Lite: historik och lärdomar

WP-Backgrounds Lite plugin-gränssnitt i adminpanelen

WP-Backgrounds Lite var en populär gratis lösning för bakgrunder för flera år sedan. Pluginet lät dig sätta olika bakgrunder för inlägg, sidor och anpassade inläggstyper, och inkluderade stöd för bildspel och videobakgrunder. Sedan juni 2021 har det dock varit stängt i WordPress.org-katalogen med ett meddelande om "Säkerhetsproblem", och flera oberoende recensioner pekade på injicerade dolda länkar i webbplatskoden.

Den främsta lärdomen: för uppgifter som kan lösas med ett par rader CSS är det inte värt att installera ett overifierat plugin. Men om du verkligen behöver ett plugin, kontrollera datum för senaste uppdatering och antalet aktiva installationer.

Custom Backgrounds: ett kommersiellt tillvägagångssätt

Custom Backgrounds plugin-sida på CodeCanyon

Pluginet Custom Backgrounds av RightHere på CodeCanyon ger full kontroll: bakgrunder för inlägg, sidor, taxonomier och arkiv, parallaxeffekter, timers och flera bakgrunder per sida. Pluginet är betalt, med möjlighet att förhandsgranska före köp.

Nackdelen: författaren har inte uppdaterat produkten på flera år, så kompatibiliteten med nuvarande WordPress-versioner är tveksam. För ett engångsprojekt är det en fungerande lösning; för en långsiktig webbplats gör du bättre i att leta efter aktivt underhållna alternativ.

Video- och parallaxbakgrunder för WPBakery

Parallaxeffekt bakgrundsinställningar i WPBakery

Om du använder WPBakery Page Builder (tidigare Visual Composer), lägger tillägget Parallax & Video Background av MegaMain till fullständiga videobakgrunder och parallaxskrollning direkt i bygggränssnittet. YouTube, Vimeo och uppladdad MP4/WebM stöds, tillsammans med fyra parallaxriktningar och möjligheten att inaktivera effekten på mobil.

Parallaxskrollning är när bakgrundsbilden rör sig i en annan hastighet i förhållande till förgrunden. Det ser imponerande ut, men på mobila enheter hackar det ofta, så möjligheten att inaktivera effekten för smartphones är avgörande här.

Tillägget fungerar inuti WPBakery: du lägger helt enkelt till en bakgrund till en rad eller kolumn via det välbekanta gränssnittet, utan en separat meny. Priset är ett engångsköp på CodeCanyon, och uppdateringar släpps regelbundet.

En kort video om ämnet: att lägga till en bakgrundsbild till enskilda sidor och block i WordPress. Den fungerar som ett komplement till metoderna som beskrivs ovan, med hela processen visad på en riktig webbplats.

⁉️🤔 Vanliga frågor

Kan jag sätta olika bakgrunder för olika inläggskategorier?

Ja, om ditt tema lägger till en kategori-klass via post_class() i utmatningsloopen. Detta ser vanligtvis ut som .category-news eller .category-portfolio. Öppna källkoden för kategoriarkivsidan och hitta klassen i <article>-taggen. Sedan är det en vanlig CSS-regel i style.css. Alternativt: den villkorliga taggen has_category() i ett PHP-utdrag.

Vad ska jag göra om funktionen body_class() saknas i header.php?

Lägg till den manuellt i den inledande <body>-taggen: ersätt <body> med <body <?php body_class(); ?>>. Om header.php inte är tillgänglig för redigering (temat är låst), skapa ett barntema, kopiera föräldratemats header.php och gör redigeringen i kopian.

Bakgrunden visas inte efter att jag lagt till CSS. Vad är orsaken?

Tre vanliga orsaker: (1) webbläsarcache, öppna sidan i inkognitoläge; (2) en annan CSS-selektor åsidosätter din bakgrund, kontrollera i Utvecklarverktyg (F12) om din regel är överstruken; (3) bildsökvägen är felaktig, använd en absolut URL från webbplatsroten med ett inledande snedstreck.

Är det obligatoriskt att använda ett barntema för redigeringar i functions.php?

Starkt rekommenderat. Direkta redigeringar i föräldratemats functions.php går förlorade vid första temauppdateringen. Ett barntema isolerar dina ändringar: skapa en mapp, lägg till en style.css med ett sidhuvud och en functions.php med din kod. Det tar fem minuter och sparar timmar vid uppdateringar.

Vad kan ersätta WP-Backgrounds Lite idag?

För enkla bakgrunder täcker CSS-metoden från denna artikel fullt ut funktionaliteten hos det nedlagda pluginet. Om du behöver ett visuellt gränssnitt, använd omslagsblocket i Gutenberg: det ger en bakgrundsbild med textöverlägg för valfri sida eller inlägg. För parallax- och videobakgrunder, använd WPBakery-tillägget från recensionen ovan.

Sammanfattning: vilken metod du ska välja för din uppgift

Att välja metod handlar om två frågor: hur ofta du byter bakgrunder och hur bekväm du är med att redigera kod.

  • Om du behöver ställa in det en gång och glömma det, använd CSS via body_class(). Två rader i style.css, noll plugins, fungerar på alla teman.
  • Om bakgrunden ändras regelbundet för olika inlägg, använd ett PHP-utdrag med ett anpassat fält. Ladda upp en bild till mediebiblioteket, klistra in URL:en i fältet, klart.
  • Om du arbetar i WPBakery och behöver videobakgrunder, använd tillägget Parallax & Video Background.
  • Om du inte vill röra kod alls, täcker det inbyggda omslagsblocket i Gutenberg de flesta bakgrundsbildsuppgifter utan ett enda plugin.

Börja med CSS (det tar fem minuter och innebär ingen risk). Och om du använder en icke-standardteknik med bakgrunder som vi inte täckte, dela den i kommentarerna.

Redaktionen
RedaktionenRedaktionellt team→ All publications

Ett professionellt team av skribenter och redaktörer specialiserade på att skapa kvalitetsinnehåll.