Share
En av de første tingene jeg la merke til da jeg begynte å bruke WordPress var hvor godt det benytter utviklerens mantra, "Separasjon av bekymringer." I programmeringsverdenen vil du at hver komponent skal stole på de andre komponentene så lite som mulig; Dette gjør hver komponent mer gjenbrukbar. Et perfekt eksempel på dette i WordPress er Temaer. De skiller designen helt fra innholdet. Vi kan endre temaet, og innholdet forblir uendret. WordPress gjør noe lignende med de måten vi kan bygge på temaer i WordPress. I stedet for å endre et eksisterende tema (og risikere å miste endringene ved neste oppdatering), kan vi opprette et barnemne som skiller våre endringer fra foreldrene. I denne veiledningen vil jeg vise deg hvordan du lager et enkelt barn tema.
Fra WordPress Codex:
I hovedsak betyr dette at vi kan bygge på foreldetemaet uten å endre sine filer. Vi kan endre CSS, legge til en egendefinert innleggstype, eller bygge inn vårt eget sett med funksjoner. Dette er også den anbefalte måten å lage et tema basert på et annet tema.
Bortsett fra barntemaer, er det to andre måter vi kan lage et tema som er basert på en annen. Den første måten er å bare endre det temaet. Men hvis vi gjør det, og temaet er oppdatert, mister vi alle våre endringer. Den andre måten er å kopiere dette temaet til en annen mappe og gå fra tema. Vi ville ikke tapt temaet (forutsatt at vi omdøpt det riktig), men vi ville ha duplikater av alle filene, selv de vi ikke endret.
"Et WordPress barn tema er et tema som arver funksjonaliteten til et annet tema, kalt overordnet temaet, og lar deg endre eller legge til funksjonaliteten til det overordnede temaet."
I denne opplæringen vil vi endre det nyeste standardtemaet (fra 3.2), Tjuefem
Det første vi vil gjøre etter å oppgradere WordPress til 3.2 eller laste ned og installere Twenty Eleven er opprett egen katalog for vårt barn tema. I / Wp-content / themes / lag katalogen twentyeleven-barn. Vi kan nå begynne å legge til filer i vårt barn tema.
Det er bare en obligatorisk fil når du oppretter et barntema: style.css. Det er her at vi vil erklære vårt tema, samt fortelle WordPress at det er barn av et annet tema. Opprett style.css i twenty-twenty-barn-mappen og legg til følgende linjer:
/ * Tema navn: Twenty Eleven Child Theme URI: http: //example.com/ Beskrivelse: Barn tema for de tjue elleve tema Forfatter: Ditt navn Forfatter URI: http: //your-site.com/ Mal: twentyeleven Versjon: 0,1,0 * /
Mesteparten av informasjonen ovenfor er hva du vil gjøre i et annet tema: det er navn, lenke, Forfatter-kreditt og versjon. Det er imidlertid også en linje for Mal. Dette er hvor du forteller WordPress hva den skal bruke for foreldre-temaet. Det må være navn på katalogen av overordnet tema, og det er saksensitivt.
En ting å merke seg før vi begynner å legge til vår egen tilpassede CSS: Vårt barntema's style.css-fil vil helt over skrive foreldrenes. Derfor, etter vår informasjon om temaopplysninger, bør vår første linje importere foreldrenes CSS:
Accentsconagua
@import url ("? /twentyeleven/style.css"); Vi er nå klar til å endre foreldrenes CSS. Mens vi skal gjøre noen enkle endringer her, hvis du vil gjøre mer avansert redigering, foreslår jeg å bruke Firefox med Firebug eller Google Chrome utviklerverktøy for å hjelpe deg. De er ganske nyttige! For nå legger du til følgende linjer i style.css-filen din, under @importere linje:
en farge: # 254655; kropp bakgrunn: # 727D82; header # branding bakgrunn: # 29305C; farge: # B3BDC1; header # branding h1, header # branding h2, header # branding a color: # B3BDC1; #respond bakgrunn: # E7DFD6;
Disse linjene vil endre bakgrunns- og skriftfargen til kropps-, topptekst- og kommentarfeltene. Du, selvfølgelig, kan spille rundt så mye som du ville :-)
Hvis jeg skulle rangordne WordPress-temaer i rekkefølge av betydning, ville jeg sette style.css og index.php i et slips for først som du trenger dem til å løpe. På andre vil jeg sette functions.php. Funksjonen.php-filen er hvordan du legger til tilpasset funksjonalitet til temaet: egendefinerte typer, meny- og miniatyrstøtte, ekstra sidebars og modifikasjoner for løkken, blant annet.
Mens funksjoner.php ikke er nødvendig for et barn tema (husk, style.css er den eneste nødvendige filen), er det den beste måten å legge ned i din egen funksjonalitet. Og i motsetning til style.css, som overskriver foreldrenes style.css, er vårt barns funksjoner.php lastet før foreldrene. Vi skal lage et widget-område for toppteksten og tilsidesette en av Tjue Elevens innebygde funksjoner.
Først legger vi til widgetområdet. Lag din functions.php og legg til følgende kode:
__ ('Header Widget', 'twentyeleven-child'), 'id' => 'header-widget', 'before_widget' => '',' after_widget '=> ""," before_title '=>'',' after_title '=>'
',)); ?> Dette registrerer widgetområdet som vi legger til i overskriften i neste trinn.
Nå vil vi tilsidesette en av de innebygde Twenty Eleven-funksjonene. De tjue elleve beslutningstakere gjorde det veldig enkelt for barntemautviklere å overstyre sine funksjoner, da de først sjekker for å se om en funksjon med samme navn eksisterer. Ta en titt på eksemplet i twentyeleven / functions.php at vi vil modifisere:
Hvis (! function_exists ('twentyeleven_posted_on')): / ** * Skriver HTML med metainformasjon for nåværende postdato / tid og forfatter. * Opprett din egen twentyeleven_posted_on for å overstyre i et barn tema * * @since Twenty Eleven 1.0 * / function twentyeleven_posted_on () printf (__ ('postet på av % 7 $ sesc_url (get_the_date ('c')), esc_html (get_the_date ()), esc_url (get_author_posts_url (get_the_author_meta ('ID'))) , sprintf (esc_attr __ ('Se alle innlegg av% s', 'twentyeleven'), get_the_author ()), esc_html (get_the_author ())); slutt om; Legg merke til hvordan den første linjen sjekker for å se om det er en funksjon av navnet twentyeleven_posted_on () først. Ved å plassere en funksjon med det navnet i vårt barntema's funksjoner.php, vil vi overstyre foreldetemaets funksjon.
Merk for temautviklere:Hvis du vil gjøre temaet ditt enklere for barnetemautviklere ("plugbar"), bør du følge Twenty Eleven's lead og sørge for at en funksjon med samme navn ikke eksisterer for hver av dine tilpassede funksjoner også!
Funksjonen skriver ut en linje etter posttittelen med dato og skjult forfatterinformasjon. Vi endrer denne linjen litt med samme funksjonsanrop. Legg til følgende kode i din functions.php fil:
funksjon twentyeleven_posted_on () $ link = esc_url (get_permalink ()); $ title = esc_attr (get_the_title ()); $ time = esc_attr (get_the_time ()); $ dateGMT = esc_attr (get_the_date ('c')); $ date = esc_html (get_the_date ()); $ authorURL = esc_url (get_author_posts_url (get_the_author_meta ('ID'))); $ author = esc_html (get_the_author ()); ekko ('postet på av '. $ Forfatter.'); Det første vi gjorde var å sette alle verdiene vi bruker i variabler. Dette er en personlig preferanse av meg fordi jeg føler at koden er litt lettere å lese. Som du kan se, endret vi ikke for mye her. Først trykte vi tiden og datoen. For det andre fjernet vi bylinjen, slik at folk kunne se koblingen til forfatterens andre innlegg.
Igjen, mens vi ikke gjorde noen banebrytende, kunne vi demonstrere hvordan man overstyrer en [riktig kodet] tilpasset temafunksjon. La oss nå gå videre til selve malfilene!
Det siste jeg vil dekke her er malfiler for barnetemaet. Kanskje vi ønsker å endre toppteksten for nettstedet, eller single post loop, eller til og med legge til en arkivside. Det og mer er mulig å bruke barnemner. Vi ville bare nevne filen vår samme navn som hvilken fil vi vil erstatte i foreldrene. Disse filene, som style.css, vil overstyre overordnetes fil. Vi endrer toppteksten og lager en ny sidemal.
Først skal vi gjøre overskriften. Skape header.php, kopier koden fra twentyeleven / header.php og lim det inn i vår header.php-fil. Når vi gjør det, skal vi erstatte linjene 104 og 109 () med følgende funksjonsanrop:
Nå legger vi til følgende kode i vår functions.php-fil:
funksjon techild_header_widget () if (! dynamic_sidebar ('header-widget')): get_search_form (); slutt om; Denne koden vil gjøre det slik at hvis det er noen widgets i Header Widget-området, viser vi dem, ellers vil vi vise søkefeltet. Til slutt trenger vi litt CSS for å gjøre vår topptekst widgetvennlig. Legg dette til din style.css-fil:
header # branding .widget posisjon: absolute; topp: 2em; høyre: 7,6%;
Dette vil utforme widgeten på samme måte som søkeboksen er stylet, men vær forsiktig. Denne metoden er ikke akkurat bulletproof. Det er bare å demonstrere modifisering av malfiler i barnemner. Her er vårt resultat:
Neste Up, vi lager en ny sidemal. Opprett filen twentyeleven-barn / side-welcome.php og kopier koden fra Twenty Eleven's page.php (twentyeleven / page.php). Det første vi må gjøre, er å endre kommentarene øverst for å la WordPress vite at dette er en sidemal. Erstatt kommentarene på toppen med dette:
/ ** * Malnavn: Velkommen * /
Når vi lager en ny side, kan vi bruke "Welcome" -malen. Det vi skal gjøre nå, er å legge til en egendefinert melding øverst på siden. Du hele filen skal se slik ut:
Velkommen til min hjemmeside! Jeg kjører en modifisering av WordPress 'Twenty Eleven tema. Ta gjerne med å peke litt!
Legg merke til at i mellom #primary og #content divs, har vi lagt en div med klassen velkommen. La oss gå til vår style.css-fil og legge til noe CSS for det:
.velkommen margin: 15px 60px; bakgrunn: # fbffd8; grense: 1px solid # f6ff96; polstring: 15px; tekst-align: center;
Vårt sluttresultat skal se slik ut:
Jeg bør nevne at den bedre måten å gjøre dette på, ville være å legge til et tilpasset felt i den malmen, men som jeg sa tidligere, ønsket jeg å holde ting enkelt slik at vi kunne fokusere på å skape barnetemaet.
Mens innlegget vil ta litt lang tid for meg å omregistrere koden i hver av filene, har jeg tatt med barnetemaet for deg å laste ned. Åpenbart klarte vi bare å skape overflaten av å skape barnemner; Målet mitt var å gi deg en god ide om hvordan du oppretter en basert på hvordan WordPress håndterer hver type fil. En ting å merke seg er at når du refererer til bilder eller andre filer fra barnet ditt, må du bruke get_stylesheet_directory_uri () i motsetning til get_template_directory_uri () som sistnevnte vil lenke til overordnet temaet.
Husk at du kan opprette et tema fra et WordPress-tema. Det er imidlertid også en rekke temarammer der ute derfra vi kan lage ganske grundige barnemner. Noen av de mest populære inkluderer Carrington, tematisk og avhandling. De har hver en lærekurve, men de er alle veldig kraftige!
