Skip to content

Alt om WordPress, webutvikling — og mer til

🖖 Slik legger du til ulike bakgrunner for WordPress-innlegg og -sider
WordPressWordPress-temaer
7 min1,485 ord

🖖 Slik legger du til ulike bakgrunner for WordPress-innlegg og -sider

Standard WordPress-temaet ser ryddig ut, men etter en måneds bruk begynner du å ønske deg litt mer individualitet. En farget bakgrunn for en viktig side eller et bakgrunnsbilde for bestemte innlegg er en enkel måte å få innhold til å skille seg visuelt ut på, uten å redesigne hele nettstedet.

Du kan få til dette på tre måter: et par linjer med CSS, et lite PHP-snutt eller en ferdig plugin. Ingen av disse metodene krever dyp kunnskap om frontend-utvikling; du trenger bare å vite hvor du skal sette inn koden.

Nedenfor går vi gjennom alle tre metodene med konkrete kodefragmenter, filplasseringer og en ærlig vurdering av potensielle fallgruver.

💡 Rask oversikt:

  • Åpne header.php og finn funksjonen body_class(). Den genererer unike CSS-klasser for hver side og hvert innlegg, slik at du kan målrette bakgrunner helt ned til et enkelt innlegg.
  • Legg til en CSS-regel med riktig klasse i style.css. Bakgrunnen vil bare gjelde for målsiden eller -innlegget uten å påvirke resten av nettstedet.
  • Opprett et egendefinert felt og legg til et PHP-snutt i functions.php. Bakgrunnen settes via en bilde-URL direkte fra WordPress-administrasjonen, uten å måtte redigere CSS manuelt.

Slik legger du til en bakgrunn via CSS og body_class

WordPress tildeler automatisk et sett med CSS-klasser til <body>-taggen gjennom funksjonen body_class(). Blant disse finnes unike identifikatorer for bestemte innlegg eller sider, noe som lar deg målrette bakgrunner med kirurgisk presisjon.

Forsikre deg om at temaet ditt kaller body_class(). Åpne Utseende → Temafilredigering og finn filen header.php:

WordPress-temaredigering: velge header.php-filen

Inne i header.php finner du den åpne <body>-taggen. Ved siden av den skal funksjonen stå:

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

Hvis du bare ser <body> uten funksjonen, legg den til. De fleste moderne temaer inkluderer allerede dette kallet, men det er verdt å sjekke.

Åpne nå en hvilken som helst side på nettstedet ditt og vis kildekoden (høyreklikk → Vis sidekilde i Chrome). For et enkelt innlegg vil du se noe slikt:

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

For en side vil utdataene være annerledes:

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

Her er de viktigste klassene du kan målrette med CSS:

  • .single, alle enkeltinnlegg. Enhver stil som brukes på denne klassen, vil påvirke hvert blogginnlegg.
  • .postid-N, ett bestemt innlegg med ID = N. Ideelt for presis styling.
  • .page, alle sider på nettstedet.
  • .page-id-N, en bestemt side med ID = N.
  • .single-format-standard, innlegg med standardformatet.
  • .logged-in, gjelder bare for innloggede brukere (nyttig for feilsøking).

Legg nå til CSS i temaets style.css-fil. For eksempel, for å sette en svart bakgrunn for alle innlegg:

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

Og for å sette et bakgrunnsbilde for en bestemt side 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 finner side- eller innleggs-ID-en i administrasjonen: åpne listen over sider, hold musepekeren over tittelen, så ser du post=2 eller et lignende tall i nettleserens statuslinje. I Gutenberg-redigeringsverktøyet vises ID-en i URL-en: post.php?post=2&action=edit.

Fordelen med denne metoden er enkelheten: du rører ikke PHP, du installerer ikke plugins, og du vet nøyaktig hvilken klasse som gjør hva. Ulempen er at når du bytter tema, vil alle stiler fra style.css gå tapt med mindre du bruker et child theme.

Slik setter du en bakgrunn via et egendefinert felt og PHP

Hvis du trenger å endre bakgrunnsbildet direkte fra administrasjonen uten å måtte dykke ned i CSS hver gang, fungerer metoden med egendefinert felt godt. Du oppretter et felt for bilde-URL-en, og et lite PHP-snutt i functions.php setter det inn i background-image-attributtet.

Legg til følgende kode i functions.php for ditt aktive tema. Hvis du bruker et tredjepartstema, må du huske å bruke et child theme; ellers vil endringer gå tapt ved oppdateringer:

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' );

Funksjonen hekter seg på wp_head, og den innebygde stilen settes inn i sidens <head>. esc_url() renser URL-en for å fjerne potensielt farlige tegn, mens get_post_meta() henter feltverdien for det gjeldende innlegget.

Åpne nå et hvilket som helst innlegg eller en side i administrasjonen, finn blokken Egendefinerte felt og opprett et felt med navnet myprefix_background_image. Lim inn hele URL-en til bakgrunnsbildet som verdi. Lagre, så vil bakgrunnen bare gjelde for dette innlegget.

Hvis blokken for egendefinerte felt ikke er synlig: åpne redigeringsverktøyet, klikk på de tre prikkene øverst i høyre hjørne → Innstillinger → Paneler og aktiver «Egendefinerte felt».

Merk: bildet må allerede være lastet opp til WordPress-mediebiblioteket; bruk direkte lenke til filen, ikke vedleggssiden.

Plugins for bakgrunner: når kode ikke er din greie

CSS og PHP dekker de fleste oppgaver, men hvis du foretrekker en visuell tilnærming, her er hva som finnes på markedet.

WP-Backgrounds Lite: historikk og lærdommer

WP-Backgrounds Lite-grensesnitt i administrasjonspanelet

WP-Backgrounds Lite var en populær gratis løsning for bakgrunner for flere år siden. Pluginen lot deg sette forskjellige bakgrunner for innlegg, sider og egendefinerte innleggstyper, og inkluderte støtte for lysbildeshow og videobakgrunner. Siden juni 2021 har den imidlertid vært stengt i WordPress.org-katalogen med et varsel om «Security Issue», og flere uavhengige vurderinger pekte på injiserte skjulte lenker i nettstedskoden.

Hovedlærdommen: for oppgaver som kan løses med et par linjer CSS, er det ikke verdt å installere en ubekreftet plugin. Men hvis du virkelig trenger en plugin, sjekk datoen for siste oppdatering og antall aktive installasjoner.

Custom Backgrounds: en kommersiell tilnærming

Custom Backgrounds-plugin-side på CodeCanyon

Pluginen Custom Backgrounds fra RightHere på CodeCanyon gir full kontroll: bakgrunner for innlegg, sider, taksonomier og arkiver, parallakseeffekter, tidtakere og flere bakgrunner per side. Pluginen er betalt, med mulighet for forhåndsvisning før kjøp.

Ulempen: forfatteren har ikke oppdatert produktet på flere år, så kompatibilitet med gjeldende WordPress-versjoner er tvilsom. For et engangsprosjekt er det en fungerende løsning; for et langsiktig nettsted er du bedre tjent med å se etter aktivt vedlikeholdte alternativer.

Video- og parallaksebakgrunner for WPBakery

Bakgrunnsinnstillinger for parallakseeffekt i WPBakery

Hvis du bruker WPBakery Page Builder (tidligere Visual Composer), legger tillegget Parallax & Video Background fra MegaMain til fullverdige videobakgrunner og parallakserulling direkte i byggegrensesnittet. YouTube, Vimeo og opplastet MP4/WebM støttes, sammen med fire parallakseretninger og muligheten til å deaktivere effekten på mobil.

Parallakserulling er når bakgrunnsbildet beveger seg med en annen hastighet i forhold til forgrunnen. Det ser imponerende ut, men på mobile enheter hakker det ofte, så muligheten til å deaktivere effekten for smarttelefoner er kritisk her.

Tillegget fungerer inne i WPBakery: du legger ganske enkelt til en bakgrunn i en rad eller kolonne gjennom det velkjente grensesnittet, uten en separat meny. Prisen er et engangskjøp på CodeCanyon, og oppdateringer utgis jevnlig.

En kort video om temaet: legge til et bakgrunnsbilde på individuelle sider og blokker i WordPress. Den fungerer som et supplement til metodene beskrevet ovenfor, med hele prosessen vist på et ekte nettsted.

⁉️🤔 Ofte stilte spørsmål

Kan jeg sette forskjellige bakgrunner for ulike innleggskategorier?

Ja, hvis temaet ditt legger til en kategoriklasse via post_class() i utdataløkken. Dette ser vanligvis ut som .category-news eller .category-portfolio. Åpne kildekoden til kategorisiden og finn klassen i <article>-taggen. Deretter er det en standard CSS-regel i style.css. Alternativt: den betingede taggen has_category() i et PHP-snutt.

Hva bør jeg gjøre hvis body_class()-funksjonen mangler i header.php?

Legg den til manuelt i den åpne <body>-taggen: erstatt <body> med <body <?php body_class(); ?>>. Hvis header.php ikke er tilgjengelig for redigering (temaet er låst), opprett et child theme, kopier foreldretemaets header.php og gjør endringen i kopien.

Bakgrunnen vises ikke etter at jeg har lagt til CSS. Hva er årsaken?

Tre vanlige årsaker: (1) nettleserbuffer, åpne siden i inkognitomodus; (2) en annen CSS-selektor overstyrer bakgrunnen din, sjekk i Utviklerverktøy (F12) om regelen din er overstreket; (3) bildestien er feil, bruk en absolutt URL fra nettstedets rot med en innledende skråstrek.

Er det obligatorisk å bruke et child theme for redigeringer i functions.php?

Sterkt anbefalt. Direkte redigeringer i foreldretemaets functions.php vil gå tapt ved første temaoppdatering. Et child theme isolerer endringene dine: opprett en mappe, legg til en style.css med en header og en functions.php med koden din. Det tar fem minutter og sparer timer under oppdateringer.

Hva kan erstatte WP-Backgrounds Lite i dag?

For enkle bakgrunner dekker CSS-metoden fra denne artikkelen fullt ut funksjonaliteten til den utgåtte pluginen. Hvis du trenger et visuelt grensesnitt, bruk Cover-blokken i Gutenberg: den gir et bakgrunnsbilde med tekstoverlegg for enhver side eller ethvert innlegg. For parallakse- og videobakgrunner, bruk WPBakery-tillegget fra gjennomgangen ovenfor.

Oppsummering: hvilken metode du bør velge for din oppgave

Å velge en metode koker ned til to spørsmål: hvor ofte du endrer bakgrunner og hvor komfortabel du er med å redigere kode.

  • Hvis du trenger å sette det én gang og glemme det, bruk CSS via body_class(). To linjer i style.css, null plugins, fungerer på ethvert tema.
  • Hvis bakgrunnen endres jevnlig for forskjellige innlegg, bruk et PHP-snutt med et egendefinert felt. Last opp et bilde til mediebiblioteket, lim inn URL-en i feltet, ferdig.
  • Hvis du jobber i WPBakery og trenger videobakgrunner, bruk tillegget Parallax & Video Background.
  • Hvis du ikke vil røre kode i det hele tatt, dekker den innebygde Cover-blokken i Gutenberg de fleste bakgrunnsbildeoppgaver uten en eneste plugin.

Start med CSS (det tar fem minutter og innebærer ingen risiko). Og hvis du bruker en ikke-standard teknikk med bakgrunner som vi ikke dekket, del den i kommentarene.

Redaksjonen
RedaksjonenRedaksjonelt team→ All publications

Et profesjonelt team av forfattere og redaktører som spesialiserer seg på å lage kvalitetsinnhold.