En guide til WordPress utviklingen av barn temaer

Det er flere grunner til at WordPress-utviklere begynner å bruke barnemner. De gir deg muligheten til å tilpasse et unikt layout på toppen av et annet eksisterende tema. Dette er perfekt for nybegynnere som ønsker å leke med å bygge egne temaer.

I tillegg vil mange premiumdesigner slippe nye oppdateringer over tid. Hvis du endrer kjernefeltfiler, blir de overskrevet når du utfører en oppdatering, men barnetemaer er skilt og pent innlagt. Dette betyr at du kan bygge opp eksisterende premium-temaer og spare mye tid i prosessen.

I denne veiledningen vil jeg introdusere de grunnleggende konseptene for å bygge et WordPress barn tema og hvorfor det er en god idé.

Starter

Barn temaer er ikke så vanskelig som de kan vises. Fordelene med å jobbe av et foreldetema betyr at du ikke trenger å skrive all HTML / CSS fra grunnen av. Et barn tema vil automatisk bruke alle malfiler du inkluderer, for eksempel sidebar.php eller footer.php. Men hvis de mangler, vil barnet ditt trekke de samme filene fra foreldrene sine.

Denne funksjonaliteten gir en enorm mengde frihet til å tilpasse allerede eksisterende maler. Det er også flott å berøre områder rundt nettstedet ditt for spesielle arrangementer, for eksempel å legge til designmønstre for jul eller nyttår.

Dine nødvendige filer

Du trenger bare et enkelt .css stilark for å sette opp et barnemne i WordPress. Du må også opprette en ny katalog i / wp-content / themes mappe som vil huse ditt barn tema. Vær oppmerksom på at du er ikke skaper denne mappen inne i overordnet temaet, men rett sammen med det i samme temaer katalog.

Utviklere vil ofte inkludere en functions.php og screenshot.png i samme mappe som din nye CSS-fil. Skjermbildet vises i WordPress-administrasjonspanelet, og funksjonens temafil kan brukes til tonnevis av backend-endringer.

Men for nå bør vi fokusere på det viktigste stilarket. Dette kalles vanligvis style.css og inneholder en kommentarheader med nøkkelmetainformasjon. Dette er viktig fordi temaet ditt bare vises som et barn hvis du inkluderer foreldrenes katalognavn. Nedenfor er et eksempelheader-kommentar:

 / * Tema navn: Twenty Eleven Child Theme URI: http: //example.com/ Beskrivelse: Barn tema for tjue elleve design Forfatter: Jake Rocheleau Forfatter URI: http: //www.hongkiat.com/blog/ Mal: twentyeleven Versjon: 0,1 * /

Verdien for mal bør være katalognavnet for det medfølgende foreldetemaet. Annet enn at alle de andre kodene skal være kjent med standard WordPress-temaer.

Selv om alle de overordnede PHP-mallene blir brukt, vil den opprinnelige foreldrenes style.css ikke importeres automatisk. Hvis du vil jobbe av de opprinnelige stilene, må du inkludere den øverst på barnets style.css-dokument. Nedenfor er et eksempel inkludert WP Twenty Eleven tema.

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

Sette opp nye stiler

Bruk av CSS-regler til temaet ditt er like enkelt som å redigere originalen. Hvis du vet hvilke elementer du må målrette, bruk deretter de samme valgene i ditt eget barn tema.

Vi kunne demo med noen veldig enkle endringer i lenker og avsnitt. Jeg har brukt kode fra det opprinnelige Twenty Eleven-temaet for å målrette mot de forskjellige elementene. Noen ganger er det nødvendig å bruke en mer spesifikk velger for å overstyre den eldre designen.

 kropp polstring: 0 1.4em;  #page margin: 1.667em auto; maksimal bredde: 900px;  en farge: # 5281df; tekst-dekorasjon: ingen; font-familie: Calibri, Tahoma, Arial, sans-serif;  a: fokus, a: aktiv, a: svever tekst-dekorasjon: understreke;

I disse endringene har jeg redusert total kroppsstørrelse og fjernet også noe polstring fra kantene. Alle disse valgene kan bli funnet oppført i det originale .css-dokumentet. Det er bemerkelsesverdig at jeg også endrer noen egenskaper for alle ankerforbindelser som inkluderer en annen skriftstabel og fargevalg.

De viktige tingene

CSS har en spesiell deklarasjon for å markere prioritet over andre stilarter. Syntaxen vises som !viktig begynner med utropstegnet og avsluttes på slutten av CSS-egenskapen. Dette er nødvendig hvis du har cascading-stiler fra et overordnet tema som overstyrer dine egne regler.

 en farge: # 5281df! viktig; tekst-dekorasjon: ingen; font-familie: Calibri, Tahoma, Arial, sans-serif;

Over jeg har kopiert mine opprinnelige endringer og redigert ankertekstfarge med en viktig bestemmelse. Dette vil ha forrang over alle andre stilarter av samme velgerdybde. Mer definerte elementer (for eksempel #access li: svever> a) vil vanligvis holde sine egne stiler med mindre farge var fortsatt arvet fra vår opprinnelige velger. I dette tilfellet oppretter ikke vårt foreldetema en skriftfamilieegenskap på ankerforbindelser, slik at vi ikke løper inn i arveproblemer.

Hvis du har problemer med å gjøre endringene dine, kan du prøve å peke på et av disse viktige merkene på slutten av eiendomsoppgaven din. Dette er ikke en perfekt løsning for hvert arvelighetsproblem, men det kommer til nytte mye oftere enn du tror.

Kloning funksjoner.php

I motsetning til det viktigste stilarket, vil ditt barntema importere foreldrenes funksjoner automatisk. Dette betyr at du ikke trenger å kopiere over noen av PHP-koden for å fortsatt ha den aktiv i ditt nye tema. Likevel, hvis du ønsker å definere noen av funksjonene, kan du bygge en annen funksjoner.php og skrive inn din nye kode med eventuelle endringer.

Som et eksempel har jeg bygget en funksjon som analyserer noen få JavaScript-filer når malen starter. Dette fjerner alle eldre versjoner av jQuery og SWFObject-skript, samtidig som du tilføyer de nyeste versjonene til wp_head område.

 // kø js filer for lastfunksjon mytheme_js () if (is_admin ()) returnerer; wp_deregister_script ( 'jquery'); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ( 'jquery'); wp_deregister_script ( 'SWFObject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ( 'SWFObject');  add_action ('init', mytheme_js);

Jeg bør påpeke at hvis du importerer kode fra foreldrefunksjonene.php må du bruke et annet funksjonsnavn. Ellers vil PHP gi ut en dødelig feil, og du må FTP til serveren for å fikse feilen.

Arbeide med temafiler

Den mest brede kategorien av temaer er å bygge egendefinerte layouter og sidetyper. Som standard vil ditt barntema arve alle foreldrenes temafiler. Men du har muligheten til å lage nye barnematfiler, og WP vil registrere disse som "primær" mal.

For eksempel archive.php og index.php brukes til å vise henholdsvis postarkivene og startsiden. Hvis det er endringer du ønsker å lage som krever endringer i HTML-en, vil du være tryggere kloning av overordnede filer og redigere dem i barnets temakatalog.

Tilpassede sidemaler

Mens vi snakker om malfiler, vil jeg også introdusere et WordPress-funksjonalitet som mange ikke er kjent med. Du kan bygge side- og innleggsmaler som kan velges fra administrasjonspanelet når du lager nytt innhold. Selv om foreldetemaet ikke har den nye egendefinerte malefilen, vil WordPress fortsatt bruke barnet i stedet for a page.php eller single.php.

Først opprett en ny fil med navnet page-offer.php. Dette blir en “spesialtilbud” salgsfremmende side som er tema annerledes enn alle de andre. Her kan du kopiere over den opprinnelige sidekoden din eller til og med bygge temaet helt fra begynnelsen. Den eneste koden vi trenger for å la WordPress vite om denne nye mal er en kommentaroppsett i PHP.

Et annet alternativ til denne metoden er å bygge egendefinerte sider oppkalt etter det unike ID-nummeret. Så i stedet for å laste inn standard archive.php For forfattersider kan du opprette en fil som forfatter-ID.php hvor ID er brukerens unike WordPress ID nummer. Selv om dette systemet er mer beskattende siden du må opprette en ny malfil for hver av forfatterne på nettstedet ditt.

Det blir mer nyttig hvis du kan kombinere disse to teknikkene med andre malfiler. Spesielt kategorier og koder fungerer bra med egne temafiler. Også hvis du kobler til vedlegg i innholdet ditt, vil du vurdere de ulike mulige mallayoutene for hver mime-type. Jeg inkluderte malhierarkiet nedenfor for et enkelt JPEG-bildevedlegg:

image.php
jpeg.php
image_jpeg.php
attachment.php

Nyttige WordPress-verktøy

WordPress selv har et allsidig pluginsystem som kan håndtere mange tilpassinger. Siden barnetemaer er så nye, er det ikke et helt angrep av tredjepartsutgivelser (ennå). Men det er et par verktøy du kan sjekke ut for å gjøre utviklingen din litt kortere.

En åpenbar omtale er One-Click Child Theme plugin bygget og testet for den nyeste WordPress 3.x-versjonen. Den legger til en menylink i administratoren din “temaer” delen for å automatisk bygge et barn ved hjelp av ditt aktive tema. Dette er fantastisk hvis du ikke vil rote med FTP og ønsker å leke med noen nye ideer.

Hvis du planlegger å redigere disse filene i administrasjonspanelet, vil du også få bedre syntaxutheving. Dette tilbys ikke i WordPress som standard, men du kan installere Advanced Code Editor for noen mye forbedret funksjonalitet. Dette gjør wading gjennom PHP kodeblokker og HTML / CSS mye mer overkommelig.

Tilleggsressurser

Sammen med alle tipsene i denne veiledningen vil jeg dele et sett med viktige lenker for temautviklere. Det er allerede så mange gode artikler og gratis barnemner du kan sjekke ut for å studere dypere inn i dette emnet. Jeg har lagt til en flott samling av disse ressursene nedenfor:

8 gratis tjuefem barnas temaer
WordPress Online Codex »Barnemner
Hvordan bygge et WordPress Child Theme ved hjelp av kroker og filtre
Noen ord om barnemner
Hvordan lage, modifisere og bruke barnemner i WordPress

Konklusjon

Jeg håper prosessen med å bygge WordPress-temaer er klarere for deg etter å ha lest denne artikkelen. Jeg har forsøkt å forklare hvordan barnemner kan arve både CSS og PHP maler fra en forelder. I tillegg er det veldig enkelt å manipulere bestemte filer og lage dine egne unike temaer.