En vejledning til udvikling af WordPress Child Themes

Der er en række grunde til, at WordPress-udviklere begynder at bruge børntemaer. De giver dig mulighed for at tilpasse et unikt layout oven på et andet eksisterende tema. Dette er perfekt til begyndere, der gerne vil lege med at bygge deres egne temaer.

Derudover vil mange premium designs frigive nye opdateringer over tid. Hvis du ændrer kernefeltfiler, overskrives de, når du udfører en opdatering, men barnetemaer er adskilte og pænt gemt væk. Det betyder, at du kan opbygge eksisterende premium-temaer og spare mange tidspunkter.

I denne vejledning vil jeg introducere de grundlæggende begreber om at opbygge et WordPress barn tema og hvorfor det er en god idé.

Kom i gang

Barnemner er ikke så vanskelige, som de kan forekomme. Fordelene ved at arbejde på et forælderstema betyder, at du ikke behøver at skrive hele HTML / CSS fra bunden. Et børntema bruger automatisk alle skabelonfiler, du indeholder, f.eks sidebar.php eller footer.php. Men hvis de mangler, vil dit barntema trække de samme filer fra sin forælder.

Denne funktionalitet giver en enorm frihed til at tilpasse allerede eksisterende skabeloner. Det er også fantastisk til at røre områder omkring din hjemmeside til særlige begivenheder, såsom at tilføje designmønstre til jul eller nytår.

Dine påkrævede filer

Du behøver kun et enkelt .css stylesheet til at oprette et barnemne i WordPress. Du skal også oprette en ny mappe i / wp-content / temaer mappe, der vil huse dit barn tema. Vær opmærksom på at du er ikke oprettelse af denne mappe inde i forælderstemaet, men lige sammen med det i samme temaer mappe.

Udviklere vil ofte inkludere en functions.php og screenshot.png i samme mappe som din nye CSS-fil. Skærmbilledet vises i dit WordPress-administrationspanel, og funktionens temafil kan bruges til tonsvis af backend-ændringer.

Men for nu skal vi fokusere på de vigtigste stilark. Dette kaldes almindeligvis style.css og indeholder en kommentar header med nøgle meta oplysninger. Dette er vigtigt, fordi dit tema kun vises som et barn, hvis du indeholder forældrenes katalognavn. Nedenfor er et eksempel header kommentar:

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

Værdien for skabelon bør være katalognavnet for det ledsagede overordnede tema. Bortset fra at alle de andre tags skal være kendt for standard WordPress-temaer.

Selv om alle de overordnede PHP-skabeloner vil blive brugt, vil den oprindelige forældres stil.css ikke importeres automatisk. Hvis du vil arbejde ud af de oprindelige stilarter, skal du medtage det øverst på dit barns style.css-dokument. Nedenfor er et eksempel, herunder WP Twenty Eleven tema.

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

Opsætning af nye stilarter

Anvendelse af CSS-regler til dit tema er lige så nemt som at redigere originalen. Hvis du ved hvilke elementer du skal målrette mod, skal du bruge de samme selektorer i dit eget barnemne.

Vi kunne demo med nogle rigtig lette ændringer til links og afsnit. Jeg har brugt kode fra det oprindelige Twenty Eleven-tema til målretning af de forskellige elementer. Til tider er det nødvendigt at bruge en mere specifik vælger til at tilsidesætte det ældre design.

 krop polstring: 0 1.4em;  #page margin: 1.667em auto; maksimal bredde: 900px;  en farve: # 5281df; tekst dekoration: ingen; font-familie: Calibri, Tahoma, Arial, sans-serif;  a: fokus, a: aktiv, a: svæver tekst-dekoration: understrege;  

I disse ændringer har jeg reduceret den samlede kropsstørrelse og fjernet også noget polstring fra kanterne. Alle disse selektorer kan findes i det originale .css-dokument. Det er bemærkelsesværdigt, at jeg også ændrer nogle egenskaber for alle ankerforbindelser, som indeholder en anden skrifttypestabel og farvevalg.

De vigtige ting

CSS har en særlig erklæring for at markere prioritet over andre stilarter. Syntaxen vises som !vigtig begynder med udråbstegn og slutter i slutningen af ​​din CSS-ejendom. Dette er nødvendigt, hvis du har cascading stilarter fra et overordnet tema, som overholder dine egne tilpassede regler.

 en farve: # 5281df! vigtig; tekst dekoration: ingen; font-familie: Calibri, Tahoma, Arial, sans-serif;  

Ovenfor har jeg kopieret mine oprindelige ændringer og redigeret ankertekstfarven med en vigtig bestemmelse. Dette vil have forrang over alle andre stilarter på samme vælgerdybde. Mere definerede elementer (f.eks #access li: svever> a) vil normalt holde deres egne stilarter medmindre farve blev stadig arvet fra vores oprindelige vælger. I dette tilfælde opsætter vores forælderstema ikke en skrifttype familie ejendom på anker links, så vi ikke løber ind i arveproblemer.

Hvis du har problemer med at lave dine ændringer, skal du prøve at trykke på et af disse vigtige mærker i slutningen af ​​din ejendomserklæring. Dette er ikke en perfekt løsning til ethvert arvelig problem, men det er meget nyttigt, hyppigere end du tror.

Kloning funktioner.php

I modsætning til det overordnede stilark vil dit barntema importere dets forældres funktioner automatisk. Det betyder, at du ikke behøver at kopiere over nogen af ​​PHP-koden for at have den aktiv i dit nye tema. Men hvis du gerne vil omdefinere nogle af funktionerne, kan du opbygge en anden funktioner.php og skrive i din nye kode med eventuelle ændringer.

Som et eksempel har jeg opbygget en funktion, der analyserer et par JavaScript-filer, når skabelonen starter. Dette fjerner alle ældre versioner af jQuery og SWFObject scripts, samtidig med at du tilføjer de seneste versioner til wp_head areal.

 // kø js filer til load funktion mytheme_js () hvis (is_admin ()) returnere; 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 skal påpege, at hvis du importerer kode fra parent functions.php så skal du bruge et andet funktionsnavn. Ellers vil PHP udgive en fatalt fejl, og du bliver nødt til at FTP til serveren for at rette fejlen.

Arbejde med temafiler

Den bredeste kategori af temaer er at opbygge brugerdefinerede layouter og sidetyper. Som standard vil dit barnemne arve alle dets forældres temafiler. Men du har mulighed for at oprette nye temaer for børn, og WP registrerer dem som "primære" skabelon.

For eksempel archive.php og index.php bruges til at vise henholdsvis postarkiverne og startskærmen. Hvis der er ændringer, du gerne vil lave, der kræver redigeringer til HTML'en, så ville du være mere sikker kloning af stamfilerne og redigering af dem i barnets temakatalog.

Brugerdefinerede sideskabeloner

Mens vi snakker om skabelonfiler, vil jeg også introducere et stykke WordPress-funktionalitet, som mange ikke er bekendt med. Du kan oprette side- og postskabeloner, som kan vælges fra Admin panelet, når du opretter nyt indhold. Selvom forældetemaet ikke har den nye brugerdefinerede skabelonfil, vil WordPress stadig bruge barnet i stedet for a page.php eller single.php.

Opret først en ny fil med navnet page-offer.php. Dette bliver en “Special tilbud” salgsfremmende side, som er tema forskelligt fra alle de andre. Her kan du kopiere over din originale sidekode eller endda bygge temaet helt fra bunden. Den eneste kode, vi har brug for til at lade WordPress vide om denne nye skabelon, er en kommentaropsætning i PHP.

Et andet alternativ til denne metode er at opbygge brugerdefinerede sider opkaldt efter det unikke ID-nummer. Så i stedet for at indlæse standard archive.php For forfattersider kan du oprette en fil som f.eks forfatter-ID.php hvor id er brugerens unikke WordPress ID nummer. Selvom dette system er mere beskatende, da du skal oprette en ny skabelonfil for hver af forfatterne på dit websted.

Det bliver mere nyttigt, hvis du kan kombinere disse to teknikker med andre skabelonfiler. Navnlig kategorier og tags fungerer godt ved hjælp af deres egne tema filer. Også hvis du linker til vedhæftede filer i dit indhold så vil du overveje de forskellige mulige skabelonlayouter for hver mime-type. Jeg inkluderede skabelonhierarkiet herunder for en simpel JPEG-billedvedhæftning:

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

Nyttige WordPress-værktøjer

WordPress selv har et alsidigt pluginsystem, der kan klare en hel masse tilpasninger. Da barnetemaer er så nye, er der ikke et helt angreb på tredjepartsudgivelser (endnu). Men der er et par værktøjer, du kan tjekke for at gøre din udviklingstid lidt kortere.

En åbenbar omtale er One-Click Child Theme plugin bygget og testet for den nyeste WordPress 3.x-version. Det tilføjer et menu link til din administrator “Temaer” sektion til automatisk at opbygge et barn ved hjælp af dit aktuelt aktive tema. Dette er fantastisk, hvis du ikke vil rote med FTP og søger at lege med nogle nye ideer.

Hvis du planlægger at redigere disse filer i admin panelet, vil du også nyde klarere syntaksfremhævning. Dette tilbydes ikke som standard i WordPress, men du kan installere Advanced Code Editor for nogle meget forbedrede funktionaliteter. Dette gør wading gennem PHP kodeblokke og HTML / CSS en hel del mere håndterbar.

Yderligere ressourcer

Sammen med alle de tips i denne vejledning vil jeg gerne dele et sæt vigtige links til temaudviklere. Der er allerede så mange gode artikler og gratis barnemner du kan tjekke for at studere dybere ind i dette emne. Jeg tilføjede en vidunderlig samling af disse ressourcer nedenfor:

• 8 Gratis Tyve Eleven Barnetemaer
• WordPress Online Codex »Børne Temaer
• Hvordan man opbygger et WordPress Child Theme ved hjælp af kroge og filtre
• Et par ord om børnetemaer
• Sådan oprettes, ændres og bruges børntemaer i WordPress

Konklusion

Jeg håber, at processen med at opbygge WordPress-temaer er klarere for dig efter at have læst denne artikel. Jeg har forsøgt at forklare, hvordan barnemner kan arve både CSS og PHP skabeloner fra en forælder. Derudover er det meget nemt at manipulere specifikke filer og oprette dine egne unikke temaer.

.