Barnemner Grunnleggende og Opprett Barnemner i WordPress

Et WordPress-tema er en samling av malfiler som lar deg endre brukergrensesnittet, utformingen, utseendet og følelsen av nettstedet. Et WordPress-tema kan enten bare ha noen bare minimal design endringer implementert eller kanskje til og med ha noen avansert logikk som viser det siste innlegget annerledes enn de andre eller viser innleggene fra en bestemt kategori i en annen seksjon på hjemmesiden etc. WordPress-temaer kan spenner fra et enkelt sett med filer til et komplett komplekst rammeverk slik at andre temaer kan bygges utover det. I denne artikkelen kommer vi til å se hvordan man kan lage barnemner for andre temaer å utnytte på koden fra foreldetemaet.

Trinn 1 Forstå barn tema temaer

For å opprette et barntema må vi først opprette en mappe i wp-content / themes mappe for vårt barn tema. Deretter oppretter vi en style.css filen i vår barnemiddag mappe som vist nedenfor:

 / * Tema navn: My Twenty Eleven Child Theme URI: Beskrivelse: Mitt barn tema Forfatter: Abbas Suterwala Forfatter URI: Mal: twentyeleven Versjon: 1 * /

Når vi har gjort dette, bør vi kunne se vårt tema i wp-admin som sett under.

Nå kan vi aktivere vårt barn tema. Når vi aktiverer vårt barntema og ser vår blogg, ser vi alt forvrengt som vi ikke har gitt noen CSS i stilarket. Her skal vi utnytte og gjenbruke stilen fra foreldetemaet, og vi vil bare inkludere det i vårt barnemne. Så bare endre delene som vi vil endre. I dette tilfellet ønsker vi å lage bakgrunnen grå. Vi bør legge til følgende linjer til style.css:

 // Denne @import-linjen laster stilarket fra foreldetemaet @import url ("... /twentyeleven/style.css"); // Nå kan vi overstyre stiler fra overordnet tema ... kropp bakgrunn: #eeeeee;

Nå ser vi vår blogg vi ser det som sett under

Barnetemaet må inneholde en style.css fil. Da bør temaet for barn eventuelt overstyre andre malfiler som author.php, category.php etc. WordPress-rammen ser først etter en malfil i barnetemappen, og hvis den ikke blir funnet, vil den hente den fra foreldrekatalogen. Barnetemaet kan også legge til eget functions.php å legge til egne funksjoner og funksjonalitet i tillegg til det som er gitt fra foreldetemaet.

Trinn 2 Forstå fordeler og ulemper ved bruk av barnemner

Å bruke et barnemne har mange fordeler, hvorav noen er som følger:

Hvis vi oppretter et barntema, trenger vi ikke å lage et nytt tema fra bunnen av, som vil ha raskere utviklingstid.
Det finnes mange gratis og kommersielle temakilder tilgjengelig som gir oss et bredt spekter av funksjonalitet, ikke trenger for mye tilpasning i våre barnemner.
Hvis vi bruker barnemner i motsetning til direkte modifisering av overordnet temaet for å dekke våre behov, vil vi enkelt kunne oppgradere til en nyere versjon av foreldetemaet uten å miste noen av våre tilpasninger.
Mange ganger foreldre temaer ikke bare gi designet, men også inkluderer widgets og plugins som kan brukes direkte hvis vi lager et barn tema av det overordnede temaet.
Hvis det er et populært overordnet tema du bruker, enten gratis eller kommersielt, er det mer sannsynlig at du har færre feil og være mer stabile som det har blitt brukt og testet på flere sider..

Noen av ulemper med barnemner er:

Når vi lager barntemaer, må WordPress se på to steder for å finne malfiler, dette har noen ytelseskostnader, og derfor kan bruk av barnemner ha noen ytelseseffekter på nettstedet ditt. Selv om de i virkeligheten er veldig små.
Mange temarammer er svært omfattende og gir mange funksjoner som kanskje ikke er nyttige for deg. Dette gjør rammene komplekse, og det vil øke tiden for å lære og mestre rammene.

Trinn 3 Å vite noen berømte WordPress Theme Frameworks

Det er mange gratis, så vel som kommersielle temaer for WordPress, som kan brukes som et overordnet tema. Noen av dem er generiske og legger til et bredt spekter av funksjonalitet. Det er også temarammer tilgjengelig for spesifikke behov som å skape et eiendomsområde eller lage et produktkatalognettsted osv.

Noen av de gratis, populære temarammene er:

Tjuefem - Selv om dette er et komplett tema, er det et veldig godt utgangspunkt for å skape et barnemne som det har alle funksjonalitetene til å skape et godt nettsted. Stilen på dette temaet kan enkelt tilpasses. Dette er et gratis tema og leveres med standard WordPress installasjon. Så det er et flott rammeverk å se på hvis du vil lage et enkelt og kult nettsted.
Tematisk - Dette er et veldig populært tema rammeverk for WordPress. Dette er et gratis tema. Dette har også mange barnemner gjort på toppen av det, som også er fritt tilgjengelige. Dette temaramme har mange kroker som barnetemaet kan bruke til å tilpasse. Det har også flere stilarter som 2-kolonne og 3-kolonne som kan brukes. Det har også god dokumentasjon tilgjengelig som vil gjøre det lettere å komme i gang med dette rammeverket.
WhiteBoard - Dette er også en veldig god og nyttig rammeverk. Dette kommer med bare minimal funksjonalitet og god struktur som kan tilpasses etter dine behov. Det er et veldig nyttig rammeverk.

For en mer omfattende liste over WordPress-rammer kan du besøke en interessant artikkel The Wordpress Theme Frameworks Starter Guide

Trinn 4 Opprett barnets tema til TwentyEleven som et eksempel

Nå vil vi endre utformingen av TwentyEleven-foreldetemaet i vårt barn tema. Foreløpig antar vi at en 2-kolonne legger seg ut med sidebjørnen til høyre. I så fall er oppsettet vi trenger, det samme som for foreldentemaet. Så vi får det direkte fra foreldetemaet, og vi vil ikke gjøre noen endringer i barnetemaet.

For mitt barntema vil jeg ikke ha et topptekstbilde. I TwentyEleven kan jeg endre eller fjerne topptekstbildet fra temaalternativer som vist nedenfor.

Følgende er endringene i style.css av barnet temaet:

 / * Tema Navn: Min Twenty Eleven Child Theme URI: Beskrivelse: Mitt barn tema Forfatter: Abbas Suterwala Forfatter URI: Mal: twentyeleven Versjon: 1 * / @import url ("... /twentyeleven/style.css"); kropp, inngang linjehøyde: 1,75em; bakgrunn: # A9D0D6; skriftstørrelse: 11,5pt; farge: # 5A6466; font-familie: Kreon, serif;  en farge: # 2A3436;  # site-title en font-family: "Open Sans", sans-serif; skriftstørrelse: 3em;  #access bakgrunn: #FFFFFF;  #access en text-transform: store bokstaver; tekst-dekorasjon: ingen; farge: # 1C1C1C; fontstørrelse: 1.2em;  #access .current-menu-item> a, #access. current-meny-forfedre> a, #access .current_page_item> a, #access .current_page_ancestor> en bakgrunn: # F2EBDE; grense: solid 1px # BFB5A4; boks-skygge: innsett 0px 0px 0px 1px #fff; tekstskygge: 1px 1px 0px rgba (255,255,255,0,9);  #secondary bakgrunn: # EEF5F6; polstring: 20px; grense: solid 1px # D6E0E2; margin: 0 10px 0 0; tekstskygge: 1px 1px 0px rgba (255,255,255,1); boks-skygge: innsett 0px 0px 0px 1px #fff;  .widget a text-decoration: understreke; farge: # 2A3436;  .widget a: svever, .widget a: fokus, .widget a: aktiv text-decoration: none;  # site-generator polstring: 40px 40px 0 40px; farge: # 302F2C; bakgrunn: # F2EBDE; font-familie: Kreon, serif; border-top: solid 1px # BFB5A4; boks-skygge: innsett 0px 0px 0px 1px #fff; tekstskygge: 1px 1px 0px rgba (255,255,255,0,9);  .entry-title, .entry-title en font-family: "Open Sans", sans-serif; farge: # 2A3436; margin-bunn: 1em; skriftstørrelse: 1.5em; tekst-transformer: store bokstaver; font-weight: normal;  .left-sidebar #secondary margin-left: 3%;

I den ovennevnte koden har jeg endret bakgrunnen ved hjelp av kroppsmerket, menypunktene 'design ved hjelp av tilgangen og sidebjelken ved hjelp av den sekundære taggen. På lignende måter kan du endre utformingen av en hvilken som helst del av foreldrene som passer dine behov. Temaet ser nå ut som vist nedenfor:

For mer informasjon om å lage et barnemne ved hjelp av TwentyEleven kan du se artikkelen Opprette et enkelt barn tema ved hjelp av tjue elleve.

Trinn 5 Opprette et barnemne for tema som et eksempel

Nå skal vi lage et tema for temaet Tematisk. Når vi har lastet ned temaet tema og lagt det til i vår wp-content / themes mappe vil vi legge til en ny mappe for vårt barn tema kalt mythematicchildtheme. I den tematiske mappen er det en mappe thematicsamplechildtheme der det finnes prøvefiler for å lage et barnemne fra tematisk. Vi kan bruke disse filene som utgangspunkt og lime dem inn i vår barnemagemappe.

Tematisk har forskjellige layouter som allerede er definert, som vi kan bruke i barnetemaet vårt. For vårt barn tema vil vi bruke en 3-kolonne layout. Vi vil gjøre noen endringer i utformingen av nettstedet som er som følger:

 / * Tema navn: Tematisk tema for tema tema URI: Beskrivelse: Dette er et tema for barn tema for tema opprettet av meg Forfatter: Abbas Suterwala Forfatter URI: Template: tematisk Versjon: 1.0 * / / * Tilbakestill nettleser standardinnstillinger * / @import url '... / tematisk / bibliotek / stiler / resett.css'); / * Bruk grunnleggende typografi stiler * / @import url ('... /thematic/library/styles/typography.css'); / * Bruk en grunnleggende layout * / @import url ('... /thematic/library/layouts/3c-fixed.css'); / * Bruk grunnleggende bildestiler * / @import url ('... /thematic/library/styles/images.css'); / * Bruk standard tema stiler og farger * / / * Det er bedre å faktisk kopiere over default.css til denne filen (eller lenke til en kopi i barnetemaet ditt) hvis du skal gjøre noe forferdelig * / @import url ( '... / tematisk / bibliotek / stiler / standard.css'); / * Forbered tema for plugins * / @import url ('... /thematic/library/styles/plugins.css'); kropp farge: # 787878;  #header background: # 339900;  #footer bakgrunn: # 339900;  #siteinfo a: aktiv, #siteinfo a: svever farge: # 000000;  #siteinfo a color: # 000000;  #siteinfo color: # 000000;  # blog-title a color: # 000000;  # blog-beskrivelse color: # 000000;  .aside a color: # 006600;  a, a: aktiv, a: svever farge: # 006600;  .aside h3 color: # 006600;  .entry-title color: # 006600;  .entry-title a color: # 006600;  .entry-title a: aktiv, .entry-title a: svever color: # 006600;

Temaet ser slik ut:

Tematisk har også mange kroker i temarammen der barnetemaet kan hekte seg inn. La oss ta thematic_belowheader krok som et eksempel og vis Hello Dolly-teksten som følger med den berømte plugin Hello Dolly skrevet av Matt Mullenweg som er i WordPress-installasjonen som standard. Først la oss aktivere Hello Dolly-pluginet fra administrasjonen.

Så i functions.php i barnetemaet legg til følgende kode:

Nå vil vi tilfeldigvis vise en linje fra Hello Dolly-teksten på hjemmesiden som vist nedenfor:

Tematisk gir mange kroker som virkelig gjør det enkelt for barnetemaet å legge til funksjoner ved hjelp av disse krokene. Du kan få en liste over alle kroker som er gitt av Tematisk i Tematisk Guide's Theme Hooks-siden.

Konklusjon

WordPress er en flott plattform for å bygge blogger og nettsteder. Det gir også infrastrukturen til å lage plugin-rammer eller temarammer på toppen av det. Temarammene som er bygd på toppen av WordPress, kan hjelpe deg med å utvikle et stabilt tema av god kvalitet i rask tid, og vil også la uniktiteten til nettstedet ditt forbli intakt. Dette bidrar til raskere utviklingstid og lavere kostnader. Så ha det gøy å lage ditt WordPress barn tema.

Kode