Hvordan lage et WordPress Child Theme (video)

Leter du etter å lage et barnetema i WordPress? Når du har lært det grunnleggende om WordPress, vil du sannsynligvis lære å tilpasse WordPress-nettstedet ditt. Vi tror at barnetemaer er et flott utgangspunkt for alle som ønsker å tilpasse WordPress-temaer. I denne artikkelen vil vi vise deg hvordan du oppretter et barnetema i WordPress.


Et enkelt WordPress-barnetema basert på Twenty Thirteen

Videoopplæring:

Abonner på WPBeginner

For de som ikke vil se videoen, kan du fortsette å lese artikkelen nedenfor.

Hvorfor du trenger å lage et tema for barnet?

Barnetemaer anses som den beste måten å tilpasse WordPress-temaene dine. Et barn-tema arver alle funksjonene og utseendet til det overordnede temaet. Du kan tilpasse det uten å påvirke overordnet tema. Dette lar deg enkelt oppdatere overordnet tema uten å bekymre deg for å miste endringene.

Du kan lære mer om barnets temaer i artikkelen vår. Hva er et WordPress Child Theme? Fordeler, ulemper og mer.

Krav

Det kreves en grunnleggende forståelse av CSS / HTML, slik at du kan gjøre dine egne endringer. Noe kunnskap om PHP vil absolutt hjelpe. Hvis du er flink til å kopiere og lime inn kodebiter fra andre kilder, vil det også fungere.

Vi anbefaler deg å øve på ditt lokale utviklingsmiljø. Du kan flytte et live WordPress-nettsted til lokal server for testformål eller bruke dummyinnhold for temautvikling.

Starter

Ethvert godt WordPress-tema kan brukes som et overordnet tema. Imidlertid er det mange forskjellige typer temaer, og noen er kanskje ikke det enkleste å jobbe med. Av hensyn til denne opplæringen bruker vi Twenty Thirteen, som er et av standard WordPress-temaene.

Lage ditt første barn-tema

Først må du åpne / wp-content / temaer / i din WordPress installasjonsmappe og lage en ny mappe for barnet ditt. Du kan navngi denne mappen hva du vil. For denne opplæringen vil vi navngi den wpbdemo.

Lage et nytt WordPress Child Theme

Åpne en tekstredigerer som Notisblokk og lim inn denne koden:

/ *
Tema Navn: WPB Child Theme
Tema URI: https://www.wpbeginner.com/
Beskrivelse: Et tjue-tretten barn-tema
Forfatter: WPBeginner
Forfatter URI: https://www.wpbeginner.com
Mal: tjuende
Versjon: 1.0.0
* /

@import url ("../twentythirteen/style.css");

Lagre denne filen som style.css i underordnede mapper du nettopp opprettet.

De fleste tingene i denne filen er selvforklarende. Det du virkelig vil være oppmerksom på, er malen: tjuende.

Dette forteller WordPress at temaet vårt er et barnetema, og at navnet på vårt overordnede temakatalog er tjuende. Navnet på overordnet mappe er små og små bokstaver. Hvis vi gir WordPress Mal: ​​TwentyThirteen, fungerer det ikke.

Den siste linjen i denne koden importerer stiltearket til vårt overordnede tema til barnetemaet.

Dette er minimumskravet for å lage et barnetema. Du kan nå gå til Utseende »Temaer hvor du vil se WPB Child Theme. Du må klikke på aktiveringsknappen for å begynne å bruke barnetemaet på nettstedet ditt.

Aktiverer ditt WordPress-barnetema

Siden du ikke har endret noe i barnet ditt ennå, bruker nettstedet all funksjonalitet og utseende til det overordnede temaet.

Tilpasse temaet ditt barn

Hvert WordPress-tema har en style.css-fil i hovedkatalogen. Det meste er dette temaets viktigste stilark der alle CSS-ene går. Noen temaer kan imidlertid bare ha informasjon om temaets overskrifter. Slike temaer har vanligvis CSS-filer lokalisert i en egen katalog.

For denne delen trenger du litt CSS-kunnskap.

Google Chrome og Firefox kommer med innebygde kontrollverktøy. Disse verktøyene lar deg se på HTML og CSS bak ethvert element på en webside.

Hvis du vil se CSS som brukes til navigasjonsmeny, kan du bare ta musen over til navigasjonsmenyen og høyreklikke for å velge Inspekter element.

Bruke Inspect Element-verktøyet i Google Chrome

Dette deler nettleserskjermen i to deler. I den nederste delen av skjermen vil du se HTML og CSS for siden.

Chrome-inspektør som viser gjengitte HTML- og CSS-stilregler

Når du beveger musen på forskjellige HTML-linjer, vil Chrome-inspektøren fremheve dem i det øvre vinduet. Som du ser at vi har valgt navigeringsmeny på skjermdumpen over.

Det vil også vise deg CSS-reglene relatert til det uthevede elementet i vinduet til høyre.

Du kan prøve å redigere CSS akkurat der for å se hvordan det ville se ut. La oss prøve å endre bakgrunnsfargen på .navbar til # e8e5ce.

Leker med CSS i Chrome Inspector

Du vil se at bakgrunnsfargen på navigasjonslinjen vil endre seg. Hvis du liker dette, kan du kopiere denne CSS-regelen og lime inn style.css-filen til Child Theme.

.navbar {
bakgrunnsfarge: # e8e5ce;
}

Lagre endringene du gjorde i stil.css-filen, og forhåndsvis deretter nettstedet ditt.

Gjenta prosessen for alt du ønsker å endre i temas stilark. Her er det komplette stilarket som vi har laget for barnetemaet. Forsøk å eksperimentere og endre den.

/ *
Tema Navn: WPB Child Theme
Tema URI: https://www.wpbeginner.com
Beskrivelse: Et tjue-tretten barn-tema
Forfatter: WPBeginner
Forfatter URI: https://www.wpbeginner.com
Mal: tjuende
Versjon: 1.0.0
* /

@import url ("../twentythirteen/style.css");

.Side tittel {
polstring: 30px 0 30px;
}

.site-header .home-link {
min-høyde: 0px;
}

.navbar {
bakgrunnsfarge: # e8e5ce;
}

.widget {
bakgrunnsfarge: # e8e5ce;
}
.sidefot {
bakgrunnsfarge: # d8cdc1;
}
.side-bunntekst. sidebar-container {
background-color: # 533F2A
}

Redigere malfilene

Tjue tretten layout

Hvert WordPress-tema har en annen layout. La oss se på utformingen av Twenty Thirteen-temaet. Du har topptekst, navigasjonsmenyer, innholdsløyfe, bunntekst-widget-område, sekundært widget-område og bunntekst.

Hver av disse seksjonene blir håndtert av forskjellige filer i mappen tjuende. Disse filene kalles maler.

Det meste av tiden er disse malene oppkalt etter området de er brukt til. For eksempel håndteres bunntekstseksjon vanligvis av footer.php-fil, header- og navigasjonsområder blir håndtert av header.php-fil. Noen områder, som innholdsområdet, blir håndtert av flere filer som heter innholdsmaler.

Først du trenger å gjøre er å velge temafilen du vil endre, og deretter kopiere den til barnetemaet.

Du vil for eksempel fjerne koblingen ‘drevet av WordPress’ fra bunntekstområdet og legge til et copyright-varsel der. Bare kopier footer.php-filen i ditt barnetema, og åpne den deretter i en vanlig tekstredigerer som notisblokk. Finn ut linjene du vil fjerne, og erstatt dem med dine egne. Som dette:

<?php
/ **
* Mal for visning av bunntekst
*
* Inneholder bunntekstinnhold og lukking av #main og #page div-elementene.
*
* @ pakke WordPress
* @ pakka Twenty_Thirteen
* @since Twenty Thirteen 1.0
* /
?>

<?php get_sidebar (‘hoved’); ?>

© Copyright <?php ekko dato (Y); ?> <?php bloginfo (‘navn’); ?> Alle rettigheter forbeholdt.



<?php wp_footer (); ?>

I denne koden har vi byttet ut tjue tetten kreditter med et varsel om opphavsrett.

Feilsøking er mye enklere når du lager temaer for barn. For eksempel hvis du ved et uhell har slettet noe som det overordnede temaet ditt krevde, kan du bare slette filen fra barnetemaet og begynne på nytt.

Legge til ny funksjonalitet til tema for barn

Du finner mange WordPress-opplæringer som ber deg om å kopiere og lime inn kodebit i temaets funksjoner.php-fil.

Å legge til kodebiter i funksjoner for php.-filen til et overordnet tema betyr at endringene dine blir overskrevet når det kommer en ny oppdatering for overordnet tema. Dette er grunnen til at det alltid anbefales å bruke et underordnet tema og legge til alle dine tilpassede kodebiter i underordnets funksjoner.php-fil.

Lar deg opprette en ny fil i mappen til barnet ditt og navngi denfunksjoner.php. I dette eksemplet skal vi legge til et lite kodebit som vil endre standardoverskriften på bildet til vårt eget skreddersydde bilde.

Vi har allerede opprettet et topptekstbilde og et miniatyrbilde ved å redigere Twenty Thirteen standard topptekstbilde. Deretter lastet vi det opp til barnetemaet vårt inne / bilder / overskrifter / mappe.

Etter det må vi be WordPress om å bruke dette bildet som standard overskriftbilde for temaet vårt. Vi kan gjøre det ved å legge til denne kodebiten i filen for barnets tema.php:

<?php
funksjon wpbdemo_custom_header_setup () {

add_theme_support (‘custom-header’, array (‘default-image’ => ‘% s / bilder / overskrifter / sirkel-wpb.png’));

register_default_headers (matrise (
‘karamell’ => array (
‘url’ => ‘% 2 $ s / images / overskrifter / sirkel-wpb.png’,
‘thumbnail_url’ => ‘% 2 $ s / images / overskrifter / sirkel-wpb-thumbnail.png’,
‘beskrivelse’ => __ (‘Karamell’, ‘Karamellhode’, ‘tjuende tretten’)
),
));

}
add_action (‘after_setup_theme’, ‘wpbdemo_custom_header_setup’);
?>

Nå hvis du besøker Utseende »Topptekst, vil du kunne se bildet vi la til som standardbilde.

Endre temaoverskrift i WordPress Child Theme

Du kan legge til et hvilket som helst tilpasset kodebit du trenger i filtypen.php-filen til barnet ditt. Sjekk ut disse 25 + ekstremt nyttige triksene for WordPress-funksjonsfilen.

Feilsøking

Som nybegynnere forventes det at du gjør feil når du arbeider med det første barnetemaet. Bare ikke gi opp for raskt. Sjekk ut vår liste over de vanligste WordPress-feilene for å finne en løsning.

Den vanligste feilen du ser, er sannsynligvis syntaksfeilen som vanligvis oppstår når du har gått glipp av noe i koden. Her er en rask guide som forklarer hvordan du finner og fikser syntaksfeilen i WordPress.

Endelig resultat

Et enkelt WordPress-barnetema basert på Twenty Thirteen

Last ned demotema

Du kan laste ned sluttresultatet av vår WordPress barnetemaopplæring ved å klikke her. Husk at dette er et veldig grunnleggende barnetema basert på tjue tretten.

Andre barnetemaer basert på tjue tretten

Her er noen andre WordPress-barnetemaer basert på Twenty Thirteen. Ta en titt på dem og se hvordan disse temautviklerne tilpasset Twenty Thirteen.

Holi

Holi - Et WordPress-barnetema basert på Twenty Thirteen

Cherry Blossom

Cherry Blossom - Twenty Thirteen Child Theme

2013 Blå

2013 Blå

Flat portefølje

Flat portefølje

Vi håper denne artikkelen hjalp deg med å lære hvordan du lager et WordPress-barnetema. Husk at det er rikelig med støtte tilgjengelig for de som trenger det.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me