Opprette ditt første WordPress Child Theme
Enten du bare ønsker å lage et litt tilpasset tema eller noe helt unikt, kan du skape et WordPress barnemne i stor grad raskere utviklingsprosessen.
Barn temaer lar deg starte med grunnleggende om et eksisterende tema, så du trenger ikke å gjenoppfinne hjulet. Du kan velge et tema som har funksjonalitet og grunnleggende layout du trenger, men tilpass deretter alt om det som du ville designe et tema fra bunnen av.
For denne opplæringen lager vi et barnemne basert på det nyeste WordPress-standardtemaet, tjuefem. Vi vil også bruke noen praktiske plugins og andre triks for å gjøre det enda enklere å lage et barnemne.
Du trenger litt grunnleggende HTML- og CSS-kunnskap, men den gode nyheten er at for et grunnleggende barnemne trenger du ikke å vite noe PHP! Temaet er veldig grunnleggende, men det vil gi deg byggeklossene du trenger for å komme i gang med å lage dine egne temaer, selv om du aldri har opprettet et WordPress-tema før!
Temaet vi skal skape
Her er en kort titt på det siste temaet vi skal skape:
Et ord om foreldre temaer
Sannsynligvis er det viktigste trinnet i å skape et barntema, å plukke ut ditt overordnede tema. For denne opplæringen, som allerede nevnt, bruker vi tjue elleve. Årsakene til dette er at det er lett tilgjengelig, gratis, er sannsynligvis allerede installert på en oppdatert WP-installasjon, og er godt kodet.
Den siste er den viktigste tingen å vurdere når du velger foreldre temaet: Pass på at det er godt kodet. Hovedårsaken til dette er at hvis foreldretemaet ditt er godt kodet, vil det være uendelig enklere å lage et barntema som er godt kodet, fordi du ikke trenger å ansette hack for å få ting til å fungere.
Når du ønsker å tilpasse til et tema, er det bedre å bruke et barnemne i stedet for å redigere overordnet temaet direkte. På denne måten, hvis en oppdatering for det opprinnelige temaet er utstedt, vil temaet ditt ikke bryte. Og hvis både overordnet og temaet ditt er kodet godt, vil du sannsynligvis ikke merke noen forskjeller i det oppdaterte temaet på nettstedets frontend.
Ett-klikk barn tema
Den raskeste og enkleste måten å komme i gang med et barn tema er å bruke Ett-klikk barn tema plugg inn. Bare installer den, aktiver foreldre temaet du vil at ditt barn tema skal være basert på (hvis det ikke er aktivt allerede), og klikk på "Barn tema" under Utseende i WP dashbordet.
Derfra, skriv inn et navn for ditt nye barnemne, en kort beskrivelse og navnet ditt, og klikk på "Opprett barn". Det er alt der er til det. Ett ord eller advarsel: Jeg fikk en feilmelding etter å ha klikket på "Opprett barn", men barnet temaet ble opprettet uten en hitch.
Alternativt kan du opprette et barnemne fra grunnen av. For å gjøre det, åpner du ønsket tekst eller kode redigeringsverktøy, og skriv inn følgende informasjon (dette tar i betraktning at du bruker det tjue elleve foreldetemaet):
/*Theme Name: Your Child Theme's NameDescription: Your theme's description.Author: Your Name HereTemplate: twentyeleven(optional values you can add: Theme URI, Author URI, Version)*/@import url("../twentyeleven/style.css");"Malen" -delen er det som gjør dette til et barntema i stedet for et vanlig tema, så sørg for at du riktig identifiserer temaets foreldre.
Angi temaalternativer
Før du begynner å tilpasse det nye barnetemaets CSS, må du sjekke ut temaalternativer og gjøre noen tilpasninger der. Det er bedre å gjøre endringer innenfor det eksisterende rammeverket hvis det er et alternativ, da det gjør det enklere å administrere temaets kode.
For denne tilpasningen har jeg valgt en layout fra innhold til venstre med et enkelt sidebjelke, og igjen fargevalg og standard lenkefarge (for nå). Jeg har også forlatt bakgrunnen hvit, overskriften med et av standardbildene, og topptekstfarge svart.
Merk: Hvis du vil deaktivere fargevalg i temaalternativer, legg til !important til fargespesifikasjonene i CSS.
Grunnleggende om redigering av temaet ditt
Hvis du går til WordPress-temaredigereren, ser du et stort sett blankt stilark for ditt nye barnemne. Den første linjen i den nye CSS-filen din (etter barntemainfo) importerer stilarket fra foreldetemaet. Dette er avgjørende, og det må forbli øverst på arket ditt, eller overordnet stilark vil bli ugyldiggjort og vil ikke importere.
En ting du kanskje vil gjøre på dette tidspunktet, er å installere en bedre kode editor plugin for tema redigering. Fargekodet syntaks gjør det betydelig enklere å kode direkte i WP, og vil spesielt være nyttig for de som er vant til å fargelegge syntaks med eksterne redaktører. Mitt personlige valg er Advanced Code Editor .
Du vil også ha en slags tekstredigerer for å sette opp vår functions.php-fil, helst en med syntaxutheving.
Finne koden for å endre
Dette kan være en av de mest frustrerende delene av barnetemautvikling: Å finne hvilke deler av koden som skal redigeres og som kan stå alene. Hele poenget med et barntema er å gjøre temaopprettelse og vedlikehold enklere. For det formål ønsker vi å lage så lite ny kode som mulig.
For å gjøre dette mye enklere, vil du gjøre, er å installere et plugin som Firebug . Dette vil tillate deg å klikke på en del av sidedesignet ditt og se det tilknyttede div og CSS klasser. Du kan også prøve kode for å se hva som fungerer, og deretter kopiere og lime det inn i temaets CSS. Jeg har funnet ut at det er den mest effektive måten å redigere koden på, når du holder temaet på fronten åpen i en fane sammen med en annen fane med WP-dashbordet der du redigerer filer.
Det grunnleggende
La oss begynne med å definere ting som kroppens bakgrunnsfarge, typografi og andre grunnleggende grunner som gir oss grunnlaget for vårt barn tema. Denne koden setter opp alt i overskriften, med unntak av å flytte navigasjonsmenyen. La oss slå det ned i noen få forskjellige trinn.
Denne første kodekoden gir oss all vår grunnleggende typografi (vi drar i "Droid Sans" og "Dancing Script" fra Google Web Fonts, mer på det i avsnittet om functions.php ):
body, input, textarea, p {color: #000000;font-family: 'Droid Sans', sans-serif;}p {font-size: 14px;line-height: 24px;}h1, h2, h3, h4, h5, h6 {font-family: 'Dancing Script', cursive;}Denne neste delen konfigurerer hovedinnholdets bakgrunn og slipp skyggen .
#page {background: #f5f5dc;-moz-box-shadow: 0 0 10px #67949c;-webkit-box-shadow: 0 0 10px #67949c;box-shadow: 0 0 10px #67949c;}Deretter skal vi gjøre noen tilpasninger på bloggens tittel og beskrivelse, samt endre toppkanten på toppteksten og fjerne søknadsskjemaet (som vil bli erstattet med vår navigasjonsmeny i neste trinn).
#site-title a {font-size: 48px;font-weight: 700;line-height: 60px;}#branding {border-top: 2px solid #67949c;}#branding #searchform {display: none;}#site-description {font-size: 18px;margin: 0 270px 3em 0;}Dette gir oss en overskrift som ser slik ut:
Flytt hovednavigasjonsmenyen
Den neste endringen vi ønsker å gjøre, er å flytte navigasjonsmenyen fra standardposisjonen under topptekstbildet til øverst til høyre, motsatt bloggtitelen eller logoen.
Dette formatet fungerer best for nettsteder som bare har et lite antall sider. Større nettsteder, eller nettsteder med undersider, vil trenge ekstra vurdering, og det vil sannsynligvis ikke fungere bra med denne typen layout.
Her er koden du trenger:
#access {clear: both;display: block;float: right;margin: 0 auto 6px;position: relative;top: -410px;width: 500px;background: none;box-shadow: none;}Navigasjonsmenyen din skal nå sitte opp over topptekstbildet, ved siden av logoen. Deretter legger vi til noen stiler i vår navigasjon og gjør dem til knapper i stedet for en solid bar. Her er koden for den grunnleggende skrifttypen:
#access a {font-family: 'Dancing Script', 'Helvetica Neue',Helvetica,Arial,sans-serif;font-size: 1.4em;font-weight: 700;padding: 0 1em;line-height: 2.666em;}Her er grunnleggende formatering for knappen bak teksten, inkludert en fin indre skygge:
#access li {background: #84bbc5;margin-right: 15px;-moz-box-shadow: inset 0 0 3px 3px #739ca3;-webkit-box-shadow: inset 0 0 3px 3px #739ca3;box-shadow: inset 0 0 3px 3px #739ca3;}Og her er koden for å legge til en dråpeskygge bak knappene når de svinger over (som faktisk gir inntrykk av en animasjonseffekt i bruk):
#access li:hover > a, #access a:focus {background: #84bbc5;color: #EEEEEE;-moz-box-shadow: 0 0 3px 3px #739ca3;-webkit-box-shadow: 0 0 3px 3px #739ca3;box-shadow: 0 0 3px 3px #739ca3;}Nå vil overskriften se slik ut:
Grunnleggende styling for sidebjelken
La oss legge til noen svært grunnleggende stiler for din sidefelt. Endringene vi lager her er først og fremst for å få sidebjørene til å samsvare med utformingen av resten av nettstedet. Her er koden:
.widget a {font-weight: 400;font-family: 'Droid Sans', sans-serif !important;}.widget-title {color: #282828;letter-spacing: 0.1em;line-height: 1.5em;text-transform: none;} De .widget-title er allerede i en H3-tag, så det tar på skriften som allerede er spesifisert der.
Og slik ser det ut:
Endringer i postformatet
Først ønsker vi å endre polstring for toppen av innleggene, så det første innlegget rager opp med toppen av sidepanelet.
.entry-title {padding-top: 0px;}Deretter endrer vi kommentarikonet som vises ved siden av posttittelen på hjemmesiden. Dette er enkelt: bare opprett ditt nye ikon (jeg har opprettet versjoner for aktive og inaktive versjoner) og deretter lastet opp dem ved hjelp av WPs mediaopploader. Ta nettadressen for hver, og sett inn dem slik:
.entry-header .comments-link a {background: url("https://blogetic.com/site/wp-content/uploads/2011/11/comment-link.png") no-repeat scroll 0 0;top: 0;}.entry-header .comments-link a:hover, .entry-header .comments-link a:focus, .entry-header .comments-link a:active {background: url("https://blogetic.com/site/wp-content/uploads/2011/11/comment-active.png") no-repeat scroll 0 0;background-color: #f5f5dc !important;} Du må legge til !important til background-color attributt for hover-tilstanden for å overstyre stylingen gjort til koblinger andre steder i temaet. Hover-bildet er en innfelt tekstboble, mens den vanlige tilstanden bare er en disposisjon. Her er resultatet:
Deretter skal vi jobbe med kommentarer styling. Dette er enkelt, da alt vi gjør er å endre fargeskjemaet. Her er koden:
#respond {background: none repeat scroll 0 0 #dadabe;border: 1px solid #67949c;}#respond input[type="text"], #respond textarea {background: none repeat scroll 0 0 #FFFFFF;border: 4px solid #b3b398;}#respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-comment label {background: none repeat scroll 0 0 #b3b398;box-shadow: 1px 2px 2px rgba(204, 204, 204, 0.8);color: #555555;}#respond input#submit {background: none repeat scroll 0 0 #67949c;}Og her er sluttresultatet:
Setter inn kode i hodet ditt eller andre steder i temaet ditt
Dette er trolig den mest tekniske delen av å opprette et barntema, og er bare nødvendig hvis du vil gjøre noe som å legge til Google Web Fonts på nettstedet ditt. Det er akkurat det vi skal gjøre her. Dette er den eneste tiden i å lage ditt barntema som du må jobbe med PHP, og hvis du ikke trenger å sette inn noe i temaets overskrift eller andre steder, trenger du ikke å jobbe med PHP i det hele tatt.
Først oppretter du en functions.php-fil i din valgte tekst- eller kodeditor. Den grunnleggende koden du vil bruke, vil se slik ut:
For barnet temaet ovenfor, trengte vi å sette inn kode i vår topptekst for å koble de riktige Google Web Fonts, slik at vi kunne ringe dem inn i vårt CSS. Slik gjør vi det (du kan få det link direkte fra Google med hvilke skrifttyper du vil bruke):
Nå skal skrifttyper dine fungere skikkelig! Og alle funksjonene som ble inkludert i det opprinnelige foreldremålet, vil fortsatt fungere.
Last ned temafilene
Hvis du vil se hele koden for både CSS og functions.php filen, kan du laste dem ned her . Inkludert er også kommentarbobleikonene.
Konklusjon
Å lage et barnemne er utrolig enkelt i forhold til å designe og kodes et tema fra bunnen av. Med litt grunnleggende CSS kunnskap og bare en liten bit av PHP, kan du lage stort sett alle typer tema du vil ha. Barnemner, i mange tilfeller, kan også brukes kommersielt (så lenge foreldetemaet tillater slik bruk) eller selges som lagertemaer (bare husk å la kjøperne vite at temaet krever et overordnet tema).
Pass på at koden din er godt skrevet, kommentert og organisert. På denne måten, hvis ditt foreldetema er oppdatert, er barnet ditt usannsynlig ikke å bryte.
Barnetemaet som vi har opprettet i denne opplæringen er veldig, veldig grunnleggende. Men det gir deg informasjonen du trenger for å begynne å designe dine egne temaer. Start med grunnleggende restyling for å få føttene våte, og start deretter å utforske de tingene du kan gjøre med PHP i din functions.php-fil. Barn temaer, når de er bygget på et stort foreldre tema, kan være like kraftige som noe annet tema tilgjengelig. For mer informasjon om barn temaer, sjekk ut WordPress Codex .
Har du flere tips for å lage flotte barnemner? Gi oss beskjed i kommentarene!