Skip to content

Kõik WordPressist, veebiarendusest — ja mitte ainult

🖼 Kuidas lisada WordPressi postitustele ja lehtedele erinevaid taustu
WordPressWordPressi teemad
6 min1,192 sõna

🖼 Kuidas lisada WordPressi postitustele ja lehtedele erinevaid taustu

Tavaline WordPressi kujundus näeb puhas välja, kuid pärast kuuajalist kasutamist hakkad ihkama veidi rohkem individuaalsust. Värviline taust olulisele lehele või taustapilt konkreetsetele postitustele on lihtne viis muuta sisu visuaalselt silmapaistvaks, ilma et peaksid kogu saiti ümber kujundama.

Seda saab teha kolmel viisil: paari CSS-i rea, väikese PHP jupi või valmis pluginaga. Ükski neist meetoditest ei nõua sügavaid front-end arenduse teadmisi; pead lihtsalt teadma, kuhu kood sisestada.

Allpool vaatleme kõiki kolme meetodit koos konkreetsete koodinäidete, failide asukohtade ja ausa pilguga võimalikele varjatud ohtudele.

💡 Kiirülevaade:

  • Ava header.php ja leia body_class() funktsioon. See genereerib igale lehele ja postitusele unikaalsed CSS-klassid, võimaldades taustu sihtida kuni üksiku postituseni välja.
  • Lisa style.css-i vastava klassiga CSS-reegel. Taust rakendub ainult sihtlehele või -postitusele, mõjutamata ülejäänud saiti.
  • Loo kohandatud väli ja lisa PHP jupp faili functions.php. Taust määratakse pildi URL-i kaudu otse WordPressi administraatoriliidesest, ilma et peaksid käsitsi CSS-i muutma.

Kuidas lisada tausta CSS-i ja body_class-i abil

WordPress määrab <body> sildile automaatselt hulga CSS-klasse funktsiooni body_class() kaudu. Nende hulgas on unikaalsed identifikaatorid konkreetsete postituste või lehtede jaoks, mis võimaldavad taustu sihtida kirurgilise täpsusega.

Veendu, et sinu kujundus kutsuks välja body_class(). Ava Välimus → Teemafailide redaktor ja leia header.php fail:

WordPressi teematoimetaja: header.php faili valimine

Failis header.php leia avav <body> silt. Selle kõrval peaks olema funktsioon:

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

Kui näed ainult <body> ilma funktsioonita, lisa see. Enamik kaasaegseid kujundusi juba sisaldab seda väljakutset, kuid seda tasub kontrollida.

Nüüd ava oma saidil ükskõik milline leht ja vaata selle lähtekoodi (paremklõps → Kuva lehe lähtekood Chrome'is). Üksiku postituse puhul näed midagi sellist:

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

Lehe puhul on väljund erinev:

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

Siin on peamised klassid, mida saad CSS-iga sihtida:

  • .single, kõik üksikud postitused. Iga sellele klassile rakendatud stiil mõjutab kõiki blogipostitusi.
  • .postid-N, üks konkreetne postitus ID-ga = N. Ideaalne täppisstiilimiseks.
  • .page, kõik saidi lehed.
  • .page-id-N, konkreetne leht ID-ga = N.
  • .single-format-standard, standardvormingus postitused.
  • .logged-in, rakendub ainult sisselogitud kasutajatele (kasulik silumisel).

Nüüd lisa CSS oma kujunduse style.css faili. Näiteks musta tausta määramiseks kõigile postitustele:

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

Ja taustapildi määramiseks konkreetsele lehele ID-ga 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}

Lehe või postituse ID leiad administraatoriliidesest: ava lehtede nimekiri, liigu hiirega pealkirja kohale ja näed brauseri olekuribal post=2 või sarnast numbrit. Gutenbergi redaktoris kuvatakse ID URL-is: post.php?post=2&action=edit.

Selle meetodi eelis on selle lihtsus: sa ei puuduta PHP-d, ei paigalda pluginaid ja tead täpselt, milline klass mida teeb. Puuduseks on see, et kujunduse vahetamisel lähevad kõik style.css stiilid kaotsi, välja arvatud juhul, kui kasutad alamkujundust.

Kuidas määrata tausta kohandatud välja ja PHP abil

Kui sul on vaja taustapilti muuta otse administraatoriliidesest, ilma et peaksid iga kord CSS-i süvenema, töötab kohandatud välja meetod hästi. Lood välja pildi URL-i jaoks ja väike PHP jupp failis functions.php lisab selle background-image atribuuti.

Lisa järgmine kood oma aktiivse kujunduse faili functions.php. Kui kasutad kolmanda osapoole kujundust, kasuta kindlasti alamkujundust; vastasel juhul lähevad muudatused uuendustega kaotsi:

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

Funktsioon haakub wp_head külge ja reasisene stiil sisestatakse lehe <head> sektsiooni. esc_url() puhastab URL-i, eemaldades potentsiaalselt ohtlikud märgid, samas kui get_post_meta() toob välja väärtuse praeguse postituse jaoks.

Nüüd ava administraatoris ükskõik milline postitus või leht, leia Kohandatud väljade plokk ja loo väli nimega myprefix_background_image. Kleebi väärtuseks taustapildi täielik URL. Salvesta ja taust rakendub ainult sellele postitusele.

Kui kohandatud väljade plokk pole nähtav: ava redaktor, klõpsa paremas ülanurgas kolme punkti peal → Eelistused → Paneelid ja luba „Kohandatud väljad".

Märkus: pilt peab olema juba WordPressi meediakokku laaditud; kasuta faili otselinki, mitte manuse lehte.

Pluginad taustade jaoks: kui kood pole sinu rida

CSS ja PHP katavad enamiku ülesandeid, kuid kui eelistad visuaalset lähenemist, siis siin on, mis turul saadaval on.

WP-Backgrounds Lite: ajalugu ja järeldused

WP-Backgrounds Lite plugin liides administraatoris

WP-Backgrounds Lite oli mitu aastat tagasi populaarne tasuta lahendus taustade jaoks. Plugin võimaldas määrata erinevaid taustu postitustele, lehtedele ja kohandatud postitüüpidele ning sisaldas tuge slaidiseanssidele ja videotaustadele. Kuid alates 2021. aasta juunist on see WordPress.org kataloogis suletud märkega „Turvaprobleem" ja mitmed sõltumatud ülevaated tõid välja süstitud peidetud lingid saidi koodis.

Peamine õppetund: ülesannete puhul, mida saab lahendada paari CSS-i reaga, ei tasu kontrollimata pluginat paigaldada. Kuid kui sa tõesti vajad pluginat, kontrolli viimase uuenduse kuupäeva ja aktiivsete paigalduste arvu.

Custom Backgrounds: kommertsiaalne lähenemine

Custom Backgrounds plugin leht CodeCanyonis

RightHere'i plugin Custom Backgrounds CodeCanyonis annab täieliku kontrolli: taustad postitustele, lehtedele, taksonoomiatele ja arhiividele, parallaks-efektid, taimerid ja mitu tausta lehe kohta. Plugin on tasuline, võimalusega enne ostmist eelvaadata.

Puudus: autor pole toodet mitu aastat uuendanud, seega on ühilduvus praeguste WordPressi versioonidega küsitav. Ühekordse projekti jaoks on see toimiv lahendus; pikaajalise saidi jaoks on parem otsida aktiivselt hooldatavaid alternatiive.

Video- ja parallaks-taustad WPBakery jaoks

Parallaks-efekti tausta seaded WPBakerys

Kui kasutad WPBakery Page Builderit (endine Visual Composer), lisab MegaMaini Parallax & Video Background lisamoodul täielikud videotaustad ja parallaks-kerimise otse ehitaja liideses. Toetatud on YouTube, Vimeo ja üleslaaditud MP4/WebM, koos nelja parallaks-suuna ja võimalusega efekt mobiilseadmetes keelata.

Parallaks-kerimine on see, kui taustapilt liigub esiplaaniga võrreldes erineva kiirusega. See näeb muljetavaldav välja, kuid mobiilseadmetes sageli takerdub, seega on efekti nutitelefonide jaoks keelamise võimalus siin kriitiline.

Lisamoodul töötab WPBakery sees: lisad tausta reale või veerule lihtsalt tuttava liidese kaudu, ilma eraldi menüüta. Hind on ühekordne ost CodeCanyonis ja uuendusi antakse välja regulaarselt.

Lühike video teemal: taustapildi lisamine üksikutele lehtedele ja plokkidele WordPressis. See toimib täiendusena ülalkirjeldatud meetoditele, kogu protsessi näidatakse reaalsel saidil.

⁉️🤔 Korduma kippuvad küsimused

Kas ma saan määrata erinevaid taustu erinevatele postituste kategooriatele?

Jah, kui sinu kujundus lisab väljundtsüklis kategooria klassi post_class() kaudu. See näeb tavaliselt välja nagu .category-news või .category-portfolio. Ava kategooria arhiivilehe lähtekood ja leia klass <article> sildist. Seejärel on tegemist tavalise CSS-reegliga failis style.css. Alternatiiv: tingimuslik silt has_category() PHP jupis.

Mida teha, kui body_class() funktsioon puudub failist header.php?

Lisa see käsitsi avavasse <body> silti: asenda <body> sildiga <body <?php body_class(); ?>>. Kui header.php pole redigeerimiseks saadaval (kujundus on lukustatud), loo alamkujundus, kopeeri ülemkujunduse header.php ja tee muudatus koopias.

Taust ei kuvata pärast CSS-i lisamist. Mis on põhjus?

Kolm levinumat põhjust: (1) brauseri vahemälu, ava leht inkognito režiimis; (2) mõni teine CSS-i selektor kirjutab sinu tausta üle, kontrolli arendaja tööriistades (F12), kas sinu reegel on läbi kriipsutatud; (3) pildi tee on vale, kasuta absoluutset URL-i saidi juurest koos eesoleva kaldkriipsuga.

Kas muudatuste tegemiseks failis functions.php on alamkujunduse kasutamine kohustuslik?

Väga soovitatav. Otsesed muudatused ülemkujunduse failis functions.php lähevad kaotsi esimese kujunduse uuendusega. Alamkujundus isoleerib sinu muudatused: loo kaust, lisa style.css koos päisega ja functions.php oma koodiga. See võtab viis minutit ja säästab tunde uuenduste ajal.

Mis võiks WP-Backgrounds Lite'i tänapäeval asendada?

Lihtsate taustade puhul katab selle artikli CSS-meetod täielikult lõpetatud plugina funktsionaalsuse. Kui vajad visuaalset liidest, kasuta Gutenbergi Cover-plokki: see pakub taustapilti koos teksti ülekattega igale lehele või postitusele. Parallaks- ja videotaustade jaoks kasuta ülaltoodud ülevaates mainitud WPBakery lisamoodulit.

Kokkuvõte: milline meetod oma ülesande jaoks valida

Meetodi valik taandub kahele küsimusele: kui sageli sa taustu muudad ja kui mugavalt tunned end koodi redigeerimisel.

  • Kui sul on vaja üks kord määrata ja unustada, kasuta CSS-i body_class() kaudu. Kaks rida failis style.css, null pluginaid, töötab iga kujundusega.
  • Kui taust muutub regulaarselt erinevate postituste puhul, kasuta PHP juppi koos kohandatud väljaga. Laadi pilt meediakokku, kleebi URL väljale, valmis.
  • Kui töötad WPBakerys ja vajad videotaustu, kasuta Parallax & Video Background lisamoodulit.
  • Kui ei taha koodi üldse puutuda, katab Gutenbergi sisseehitatud Cover-plokk enamiku taustapildi ülesandeid ilma ühegi pluginata.

Alusta CSS-ist (see võtab viis minutit ja sellega ei kaasne riske). Ja kui kasutad mõnda mittestandardset tehnikat taustadega, mida me ei käsitlenud, jaga seda kommentaarides.

Toimetus
ToimetusToimetuse meeskond→ All publications

Professionaalne kirjanike ja toimetajate meeskond, kes on spetsialiseerunud kvaliteetse sisu loomisele.