Hvordan lage og tilpasse et barnetema på WordPress

Hva er et tema for barn, og hvorfor er det så viktig?

I dette innlegget skal vi gi deg svarene på disse spørsmålene og vise deg trinn for trinn hvordan du oppretter og tilpasser ditt eget barnetema ved hjelp av plugins eller kode.

Hvis du vil gjøre endringer i temaet på WordPress-nettstedet ditt,har du sannsynligvis sett folk fortelle deg å bruke et barn-tema.

Men hva er et barnetema, og hvorfor er barnetemaer så viktige?

I dette innlegget vil vi gi deg svarene på disse spørsmålene sammen med en introduksjon til temaer for barn og hvordan de er perfekte for deg.

Så vil vi vise deg trinn for trinn hvordan du oppretter og tilpasser ditt eget barnetema ved hjelp av plugins eller kode.

Men hvis du aldri har installert WordPress, kan du oppdage Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din

Og la oss komme tilbake til det vi er her for.

Hva er et WordPress-tema for barn?

Et barnetema er ikke et frittstående tema. Det er et "barn" av et eksisterende foreldertema, derav navnet.

Du installerer det sammen med foreldertemaet, men det gir deg en sjanse til å trygt gjøre endringer i foreldertemaet uten å måtte redigere selve overordnetemaet.

Barnetemaet får de fleste / alle designinnstillingene fra foreldertemaet. I situasjoner der du endrer underordnet tema, vil imidlertid denne endringen overstyre innstillingene for overordnet tema.

Fordeler med et tema for barnet

På dette tidspunktet lurer du kanskje på: hvorfor kan du ikke bare gjøre endringene dine direkte til overordnet tema?

Hovedårsaken til at dette ikke er en god idé er WordPress-temaoppdateringer.

Hvis du vil holde WordPress-nettstedet ditt trygt og fungerende, må du raskt bruke oppdateringer når de kommer ut, inkludert oppdateringer til WordPress-temaet.

Hvis du tilpasser nettstedet ditt ved å endre temaet ditt direkte (ingen barnetema), noe som betyr at du vil overskrive alle endringene dine hver gang du oppdaterer WordPress-temaet.

Dette betyr at du:

Oppdater WordPress-temaet ditt, og mist jobben din. Ikke en veldig morsom opplevelse, er det?
Ikke oppdater WordPress-temaet ditt for ikke å miste arbeidet ditt ... noe som ikke er bra for sikkerheten og driften av ditt WordPress-nettsted.

Med et barn-tema kan du gjøre alle endringene dine i barnetema. Da vil du kunne oppdatere overordnet tema uten å miste noe av arbeidet ditt.

Utover å hjelpe deg med å oppdatere trygt, er bruk av et barn-tema også generelt nyttig for å gjøre tilpasninger. Fordi det skiller alle endringene dine ett sted, er det enkelt å spore alle endringene dine og endre dem etter behov.

Det er også enkelt å gå opp ned. Hvis du for eksempel vil slutte å bruke endringene dine og gå tilbake til overordnet tema, er det bare å deaktivere temaet for barnet.

noen WordPress-temaer bruke til og med denne standard foreldre/barn-tilnærmingen. For eksempel, hvis du vil bruke Genesis-rammeverket, trenger du både overordnet tema (grunnrammeverket) og et undertema for å kontrollere designet.

Når skal jeg bruke et tema for barnet

Bortsett fra noen få unntak som vi vil liste nedenfor, må du gjøre det toujours bruk et barn-tema hvis du planlegger å gjøre dine egne endringer til et eksisterende WordPress-tema.

Når du ikke trenger å bruke et barnetema

Generelt er bruk av et barn-tema en god praksis når du tilpasser WordPress-temaet.

Imidlertid er det noen få unntak fra regelen der det kan være et bedre alternativ enn å bruke et tema for barn.

For det første, hvis du bare vil gjøre noen mindre CSS-justeringer, kan det være for mye å lage et barn-tema bare for noen få justeringer.

I stedet kan du legge til din tilpassede CSS ved hjelp av funksjonen Tilleggs CSS integrert i WordPress Customizer. Eller du kan bruke en gratis WordPress-plugin som Simple CSS.

For det andre, hvis du gjør noen endringer som du ønsker å være temauavhengig, er et barnetema kanskje ikke det beste alternativet.

Hvis du for eksempel registrerer en tilpasset taksonomi eller en tilpasset innleggstype, vil du sannsynligvis ikke bruke filen functions.php av barnet ditt tema (fordi du vil beholde dem selv om du endrer tema). I stedet bør du bare legge til koden utenfor temaet ditt med en plugin som kodesnutter eller din egen tilpassede plugin.

Hvordan lage et barnetema på WordPress

Nå som du vet hvorfor barnetemaer er viktige, la oss undersøke hvordan du faktisk kan lage et barnetema for WordPress-nettstedet ditt.

For det første, hvis du bruker Hei Elementor-tema, vi har allerede laget et barnetema for deg - du trenger ikke å gjøre det selv. Du kan ta tak i Hello Elementor-temaet fra WordPress.org. Du kan installere det som alle andre WordPress-temaer (vi viser deg hvordan du installerer et barnetema senere i dette innlegget).

Hvis du bruker et annet WordPress-tema, er det alltid verdt å ta en rask titt på Google for å se om WordPress-temautvikleren gir et barnetema. For eksempel har Astra, GeneratePress og OceanWP alle verktøy / filer som hjelper deg med å laste ned et barnetema.

Hvis WordPress-temaet ditt ikke allerede har et barnetema, kan du opprette et barnetema for ethvert WordPress-tema:

Bruk en WordPress Plugin gratis temagenerator for barn.
Lag ditt eget barnetema manuelt.

Vi vil vise deg hvordan du utfører begge metodene.

Slik bruker du et tema for WordPress-plugin

Et plugin for barnetema-generator lar deg lage et tema for barn uten å forlate WordPress-instrumentbordet.

Det mest populære alternativet her er gratis plugin-tema for barnekonfigurator, som er aktiv på over 300.000 XNUMX nettsteder.

Child Theme Configurator hjelper deg ikke bare med å lage tematilene for barnet, men den vil også analysere temaet du bruker og tema- og skriftstilsarkene etter behov.

Det inkluderer også andre nyttige funksjoner hvis du prøver å lage et barnetema på et nettsted der du allerede har lagt til innhold. For eksempel kan den kopiere eksisterende widgets og tilpasningsmuligheter til underordnet tema.

Men hvis du planlegger å bruke plugg inn på en nettsideopérationnel, anbefaler vi at du tar en fullstendig sikkerhetskopi før du fortsetter. Eller ideelt sett sett det hele opp på en demo-webside.

Når du har sikkerhetskopien klar, kan du starte med å installere og aktivere gratis Child Theme Configurator-plugin fra WordPress.org. Gå deretter til menyen Verktøy → Barnetemaer å lage barnet ditt tema.

På listen Velg en rullegardin foreldertema, Velg temaet du vil lage barnetemaet ditt for. Klikk deretter på Analyser:

Plugin-enheten vil deretter analysere overordnet tema for eventuelle avhengigheter.

Når du er ferdig, vil du se noen flere alternativer for å konfigurere hvordan du oppretter ditt barnetema. Hvis du ikke er sikker på hva en spesifikk innstilling betyr, kan du bare la den stå som standard:

Når du er ferdig med å gjøre valgene dine, klikker du på knappen nederst til å lage en nytt barnetema.

Og det er alt ! Plugin-en vil da lage barnetemaet for deg. Den vil imidlertid ikke aktiveres pas dette barnetemaet.

Slik aktiverer du det:

Gå til Utseende → Temaer.
Forhåndsvis hvordan nettstedet ditt ser ut med dette barnetemaet (for å sikre at det fungerer - hvis nettstedet ditt ser rart ut, er det sannsynligvis på grunn av et CSS-problem).
Aktiver barnet ditt på samme måte som alle andre WordPress-temaer. Sørg for å la foreldretemaet ditt være installert.

Når du har aktivert barnet ditt, tilbyr Child Theme Configurator plugin også andre nyttige verktøy for å hjelpe deg med å administrere barnetemaet. Hvis du for eksempel går til fanen Filer fra plugin-innstillinger, kan du se alle relaterte filer i overordnet tema og underordnet tema.

Deretter kan du kopiere filer fra overordnet tema til barnet tema.

For eksempel hvis du vil gjøre noen endringer i single.php, kan du kopiere denne filen til underordnet tema, slik at du trygt kan redigere den:

Du finner også mange andre verktøy som hjelper deg å jobbe med CSS.

Vi vil forklare hvorfor disse verktøyene er nyttige senere.

Hvordan manuelt opprette et barn-tema

For denne delen antar vi at du vet litt mer om PHP og CSS. Hvis du føler deg overveldet av instruksjonene her, anbefaler vi at du bruker gratis plugin fra forrige avsnitt.

Hvis du vil opprette et barn-tema manuelt, må du opprette to filer (dette er de strenge minimumsnivåene for et barn-tema):

style.css - i starten er alt du trenger å legge til en kokeplate-kode.

functions.php - dette lar deg laste stilarket til overordnet tema. Uten det ville ikke ditt barnetema kunne bruke CSS fra ditt overordnede tema, noe som gjør nettstedet ditt super stygt!

style.css

Lag først en fil som heter style.css og legg til følgende kode:

/*

Tema Navn: Hello Elementor Child

Tema URI: https://github.com/elementor/hello-theme/

Beskrivelse: Hello Elementor Child er et tema for Hello Elementor, laget av Elementor-teamet

Forfatter: Elementor Team

Forfatter URI: https://elementor.com/

Mal: hei-elementor

Versjon: 1.0.1

Tekstdomene: hei-elementor-barn

Lisens: GNU General Public License v3 eller nyere.

Lisens URI: https://www.gnu.org/licenses/gpl-3.0.html

*/

Sørg for å erstatte alt som kommer etter tykktarmen med din faktiske informasjon:

Tema navn - navnet på barnet ditt tema.

URI-tema - nettstedet til temaet ditt og dets dokumentasjon.

Beskrivelse - en kort beskrivelse av temaet.

Forfatter - navnet på forfatteren av temaet.

Forfatter URI: - forfatterens temanettsted.

Mal - navnet på din overordnede temamappe (som navngitt i wp-innhold / temamappen). Dette er den viktigste linjen; barnet ditt fungerer ikke uten det.

Versjon - versjonsnummer på barnet ditt.

Tekstfelt - dette brukes til internasjonalisering. Du kan bare legge til "barn" på slutten av malnavnet.

Tillatelse - la dette som standard.

URI-lisens - la dette som standard.

Ekskluderer linjen mal, det spiller ingen rolle hva du skriver inn, så ikke stress for mye. Bare sørg for at du oppgir mappenavnet til foreldertemaet riktig for mal.

Hvis du vil legge til dine egne tilpassede stiler i fremtiden, kan du legge det til i dette stilarket under kokeplate-koden.

functions.php

Da må du opprette filen functions.php for barnet ditt tema. Igjen, det er dette som lar deg laste hele CSS-stilarket til ditt overordnede tema.

I filen functions.php, legg til følgende kode:

<?php

/ * Funksjon for å forstille stilark fra overordnet tema * /

funksjon child_enqueue__parent_scripts () {
wp_enqueue_style ('overordnet', get_template_directory_uri (). '/ style.css');
}
add_action ('wp_enqueue_scripts', 'child_enqueue__parent_scripts');

Last opp filer til WordPress-nettstedet

Når du har filene dine style.css et functions.php, må du laste dem opp til WordPress-nettstedet ditt som et nytt tema.

For å gjøre dette, kobler du til ditt WordPress-nettsted ved hjelp av FTP.

Gå deretter til temakatalogen på nettstedet ditt (wp-innhold / temaer)og lag en ny mappe for barnet ditt.

For eksempel hvis mappen til foreldertemaet er hallo-elementor, kan du navngi mappen for barnets tema hallo-eletor-barn for å hjelpe deg med å huske det.

Last deretter opp filen style.css et functions.php i denne mappen:

Når du har lastet ned begge filene kan du gå til Utseende → Temaer og aktiver barnetemaet ditt som du ville gjort med andre WordPress-temaer.

Hvordan installere et WordPress-tema for barn

Vi har dekket noen av disse aspektene ovenfor i de spesifikke metodene, men vi skal gjennomgå hvordan du installerer et WordPress-barnetema en gang til.

Dette vil også være nyttig hvis du lastet ned et barnetema fra temautviklerens nettsted, i stedet for å lage det selv.

Du kan installere et WordPress-barnetema akkurat som du ville gjort med noe annet WordPress-tema:

Tilgang til Utseende → Temaer i WordPress dashbordet.
Klikk på Legg til ny.
Last opp ZIP-filen til barnetemaet.

Under installasjonsprosessen oppdager WordPress at du laster ned et underordnetema og bekrefter at overordnet temaet eksisterer:

Når du har lastet ned filen, må du huske å gjøre det aktiver den.

Husk at for ditt tema for barn å fungere, må du installere kl den tidenforeldertemaet og barnetemaet.

Barnetemaet ditt skal være ditt aktive tema, men du bør fortsatt ha foreldretemaet installert.

Slik skal det se ut:

Barnetemaet er det aktive temaet
Overordnet tema er fremdeles installert, men ikke aktivt

Hvordan tilpasse et tema for barnet

Akkurat som med tilpasningen av et vanlig WordPress-tema, har du flere alternativer for å "tilpasse" et barn-tema.

For å være mer presis, er du det egentlig ikke tilpasse barnetemaet - du bruker barnetemaet til å tilpasse det eksisterende (overordnede) temaet.

Først viser vi deg noen få måter du kan bruke koden til å tilpasse temaet for barnet ditt. Deretter deler vi en enklere måte å tilpasse ting med Elementor Theme Builder.

Tilpass et barnetema med kode

Hvis du vil tilpasse barnetemaet ditt med kode, må du ha god kunnskap om CSS, HTML og PHP.

Her er noen av tingene du kan gjøre:

Legg til tilpasset CSS

For å tilpasse barnetemaet ditt med CSS, kan du legge det direkte til filen style.css av barnet ditt tema.

Legg til CSS under den eksisterende koden øverst i filen.

Ethvert CSS du legger til ditt barnetema, erstatter det med foreldertemaet ditt, så lenge du bruker de samme valgene.

Bytt ut eksisterende maler

Hvis du vil bytte ut malene til ditt overordnede tema, kan du:

Kopier malfilen fra ditt overordnede tema til barnetemaet.
Rediger malfilen i ditt tema.

For eksempel hvis du vil endre singel.php, kopierer du filen først single.php fra foreldertema til barnetema (sørg for å beholde den samme strukturen).

Deretter kan du redigere koden i ditt barneversjonsversjon av single.php.

Merk: WordPress bruker malen til ditt barnetema så lenge den har samme navn. På grunn av dette skjuler du ganske mye den eksisterende malen i overordnet tema.

Hvis du bruker Child Theme Configurator-plugin som vi nevnte ovenfor, kan det hjelpe deg med å kopiere filer til barnetemaet uten å forlate WordPress-oversikten.

Legg til nye maler

I tillegg til å kopiere og endre eksisterende maler fra ditt overordnede tema, kan du også lage nye tilpassede maler i underordnet tema.

Hvis du for eksempel vil lage en mal for en tilpasset innleggstype som du la til, kan du legge til malene i barnetemaet ditt.

Tilpass et barnetema med Elementor-temagenerator

Hvis du ikke er kjent, Elementor Theme Builderlar deg tilpasse deler av eller hele WordPress-temaet ditt ved hjelp av et visuelt grensesnitt.

Med Elementor Pro og Theme Builder kan du lage tilpassede maler for nettstedsmaler:

header
bunntekst
Enkelt (f.eks. Et enkelt blogginnlegg eller -side)
Arkiv (f.eks. Siden som viser alle blogginnleggene dine)

Disse malene vil fungere med både barnetema og foreldertemaet.

Med Elementor Theme Builder trenger du ikke å jobbe med kode direkte. Det er ikke noe å legge til tilpasset CSS eller kopiere PHP-malfilene dine - du gjør alt med dra-og-slipp.

Anta for eksempel at du vil tilpasse overskriften for ditt tema for barnet ditt. I stedet for å trenge å kopiere filen header.php på barnets tema og deretter endre PHP, kan du bare designe en ny overskrift ved hjelp av Elementors visuelle og dra og slipp-grensesnitt. Deretter kan du bruke denne overskriften hvor som helst på nettstedet ditt eller bare bestemte deler av nettstedet ditt.

Hvis du ikke har brukt CSS, HTML og PHP, kan du tilpasse barnetemaet ditt uten kode. Og selv om du gjør det, kan denne visuelle tilnærmingen likevel spare deg for mye tid enn med PHP i malfilene dine.

Når du oppretter en ny mal med Elementor Theme Builder, vil du kunne velge maltype. For eksempel en overskrift.

Da kan du enten starte fra en tom skifer eller velge en av Elementor Pro-modellene:

Derfra kan du bruke alternativene for dra og slipp av sidefeltet til å kontrollere utseendet til overskriften din:

Når du er ferdig, kan du velge nøyaktig hvor du vil bruke denne overskriftsmalen:

Slik sletter du et barnetema på WordPress

Hvis du vil slutte å bruke barnet ditt tema, kan du slå det av akkurat som du ville gjort med et vanlig WordPress-tema.

Dette er :

Gå til Utseende → Temaer.
Aktiver et annet tema. Enten foreldertemaet eller et helt nytt WordPress-tema.

Husk at hvis du slår av barnetemaet og bytter tilbake til foreldertemaet ditt, vil endringer du la til gjennom barnetemaet ditt ikke lenger være der.

I stedet kommer du tilbake til å designe ditt overordnede tema.

Begynn å bruke et WordPress-barnetema

Et barn-tema hjelper deg trygt å gjøre endringer i WordPress-temaet.

Barnet ditt vil arve alle stiler fra foreldertemaet, men eventuelle endringer du gjør i barnetema vil overstyre foreldertemaet. Dette betyr at du trygt kan oppdatere foreldertemaet ditt uten å miste endringene du har gjort i barnetemaet.

For å komme i gang med et WordPress-barnetema, kan du:

Sjekk om temautvikleren din allerede tilbyr et barnetema. Hvis du bruker Hello Elementor, kan du gjøre det last ned et barnetema for det fra GitHub.
Bruk gratis programtillegg for barnemodekonfigurator.
Lag barnet ditt manuelt.

Derfra kan du tilpasse barnetemaet ditt ved hjelp av CSS, HTML og PHP. Du kan også hoppe over koden og bruke Elementor Theme Builder til å tilpasse temaet ved hjelp av et visuelt dra-og-slipp-grensesnitt.

Oppdag også noen temaer og premium WordPress-plugins

Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.

Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.

1. AP-prisbord

AP-pristabell er en WordPress Plugin premium som gjør det enkelt å lage funksjonsrike prislister med intuitive grensesnitt. Den tilbyr 35 forhåndsdefinerte maler og et ubegrenset antall alternativer.

med dette WordPress Plugin enkel å bruke, det vil være veldig enkelt å designe en fantastisk pristabell med bare noen få klikk. Den lar deg lage ubegrensede prisnett ved å gi muligheten til å legge til rader og kolonner, angi kolonnekant, kolonneplass, kolonnebredde og mye mer.

Les også Hvordan tilpasse WooCommerce-knappen "Legg i handlekurv"

Denne plugin lar deg også legge til lydinnhold, video og Google Map.

Last ned| dEMO | Webhotell

2.wp Sidebygger

WordPress Page Builder er den ultimate byggherren for WordPress-nettstedet ditt, som leveres med flotte verktøy for å generere ethvert tilpasset innlegg, tilpasset taksonomi eller tilpasset metaboks.

Som funksjoner har den blant annet: en tilpasset innleggstypeCPT, en personlig taksonomi, avanserte egendefinerte felt, dra og slipp-funksjonalitet, Google Map-plassering støttes, repeterbare felt støttes også og mye mer.

Last ned | dEMO | Webhotell

3. Rankie

Rankie er en veldig praktisk WordPress-modul designet for regelmessig å sjekke WordPress-rangeringer på Google mens du nøye overvåker plasseringen til hvert søkeord.

Som et sporingsplugin vil Rankie oppdatere søkeordposisjonering på daglig basis og generere nøyaktige rapporter.

Les også vår 6 vanlige spørsmål relatert til SEO og omdirigeringer

Den inneholder også et kraftig forskningsverktøy som genererer verdifulle søkeordlister. Google bruker det allerede til forskning.

Last ned | dEMO | Webhotell

Anbefalte ressurser

Finn ut om andre anbefalte ressurser for å hjelpe deg med å bygge og administrere nettstedet ditt.

konklusjonen

Her! Det er det for denne opplæringen. Har du fortsatt spørsmål om nytten av et barnetema på WordPress? Gi oss beskjed i kommentarseksjonen og vi vil prøve å hjelpe!

Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting.

Ikke nøl med å del med vennene dine på dine favoritt sosiale nettverk.

...