En guide till WordPress barnteman utveckling

Det finns ett antal skäl att WordPress-utvecklare börjar använda barnteman. De ger dig möjlighet att anpassa en unik layout ovanpå ett annat befintligt tema. Det här är perfekt för nybörjare som vill leka med att bygga sina egna teman.

Dessutom kommer många premiumdesigner att släppa nya uppdateringar över tiden. Om du ändrar kärna temafiler skrivs de över när du utför en uppdatering, men barnteman är separata och snyggt borta. Det innebär att du kan bygga upp befintliga premiumteman och spara mycket tid på gång.

I den här guiden vill jag presentera de grundläggande begreppen att bygga ett WordPress barntema och varför det är en bra idé.

Komma igång

Barnteman är inte lika svåra som de kan visas. Fördelarna med att arbeta på ett föräldertema betyder att du inte behöver skriva hela HTML / CSS från början. Ett barntema använder automatiskt alla mallfiler du inkluderar, till exempel sidebar.php eller footer.php. Men om de saknas kommer ditt barntema att dra samma filer från sin förälder.

Denna funktion erbjuder en enorm frihet att anpassa redan befintliga mallar. Det är också bra att röra upp områden runt din webbplats för speciella evenemang, till exempel att lägga till designmönster för jul eller nyår.

Erforderliga filer

Du behöver bara ett enda .css-stilark för att skapa ett barntema i WordPress. Du måste också skapa en ny katalog i / wp-content / teman mapp som kommer att rymma ditt barntema. Var uppmärksam på att du inte skapa den här mappen inuti föräldertemat, men rätt tillsammans med det i samma teman katalog.

Utvecklare kommer ofta att inkludera en functions.php och screenshot.png i samma mapp som din nya CSS-fil. Skärmbilden visas i din WordPress-administratörspanel och funktionens temafil kan användas för många ändringar av backend.

Men för tillfället borde vi fokusera på det huvudsakliga stilarket. Detta heter vanligen style.css och innehåller en kommentarhuvud med viktig metainformation. Detta är viktigt eftersom ditt tema bara visas som ett barn om du inkluderar föräldrars katalognamn. Nedan är en exempelrubrikkommentar:

 / * Tema Namn: Tjugo Eleven Barn Tema URI: http: //example.com/ Beskrivning: Barn tema för tjugo elva design Författare: Jake Rocheleau Författare URI: http: //www.hongkiat.com/blog/ Mall: twentyeleven Version: 0,1 * / 

Värdet för mall bör vara katalognamnet för det medföljande modertemat. Förutom att alla andra taggar ska vara bekanta med standard WordPress-teman.

Även om alla parentes PHP mallar kommer att användas, kommer den ursprungliga förälderns style.css inte importeras automatiskt. Om du vill arbeta utifrån de ursprungliga stilarna måste du inkludera det längst upp i ditt barns style.css-dokument. Nedan finns ett exempel som inkluderar WP Twenty Eleven-temat.

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

Ställa in nya stilar

Att tillämpa CSS-regler på ditt tema är lika enkelt som att redigera originalet. Om du vet vilka element du behöver rikta in använder du samma väljare i ditt eget barntema.

Vi kunde demo med några riktigt lätta ändringar i länkar och stycken. Jag har använt kod från det ursprungliga tjugo elva temat för att rikta in de olika elementen. Ibland är det nödvändigt att använda en mer specifik väljare för att åsidosätta den äldre designen.

 kropp vaddering: 0 1.4em;  #page margin: 1.667em auto; maxbredd: 900px;  en färg: # 5281df; text-dekoration: ingen; fontfamilj: Calibri, Tahoma, Arial, sans-serif;  a: fokus, a: aktiv, a: svävar text-decoration: underline;  

I dessa förändringar har jag minskat den totala kroppsstorleken och även tagit bort vaddering från kanterna. Alla dessa selektorer kan hittas i det ursprungliga .css-dokumentet. Det är anmärkningsvärt att jag också ändrar vissa egenskaper för alla ankarlänkar som innehåller en annan typsnittstack och färgval.

De viktiga sakerna

CSS har en särskild deklaration för att markera prioritet över andra stilar. Syntaxen visas som !Viktig börjar med utropstecken och avslutas i slutet av din CSS-egendom. Detta är nödvändigt om du har cascading stilar från ett föräldertema som överträffar dina egna regler.

 en färg: # 5281df! viktig; text-dekoration: ingen; fontfamilj: Calibri, Tahoma, Arial, sans-serif;  

Ovan har jag kopierat mina ursprungliga ändringar och redigerat ankare textfärgen med en viktig klausul. Detta kommer att ha företräde framför alla andra stilar på samma väljardjup. Mer definierade element (t.ex. #access li: sväva> a) brukar hålla sina egna stilar om inte Färg varvs fortfarande från vår ursprungliga väljare. I det här fallet ställer vårt föräldertema inte upp en typsnittfamilj på ankarlänkar, så att vi inte löser några arvsproblem.

Om du har problem med att göra dina ändringar pinne, försök poppa ett av dessa viktiga varumärken i slutet av ditt fastighetsdeklaration. Det här är inte en perfekt lösning för varje arvsproblem, men det är praktiskt mycket oftare än du skulle tro.

Kloning funktioner.php

Till skillnad från det huvudsakliga stilarket kommer ditt barntema att importera dess föräldrars funktioner automatiskt. Det betyder att du inte behöver kopiera över någon av PHP-koden för att den fortfarande ska fungera i ditt nya tema. Men om du vill definiera några av funktionerna kan du bygga upp en annan functions.php och skriva in din nya kod med några ändringar.

Som ett exempel har jag byggt en funktion som analyserar några JavaScript-filer när mallen initierar. Detta tar bort alla äldre versioner av jQuery och SWFObject-skript, samtidigt som du lägger till de senaste versionerna till wp_head område.

 // kö js-filer för laddningsfunktion mytheme_js () if (is_admin ()) returnerar; 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 ( 'Flashobject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ( 'Flashobject');  add_action ('init', mytheme_js); 

Jag borde påpeka att om du importerar kod från parent functions.php måste du använda ett annat funktionsnamn. Annars kommer PHP att ge ett dödligt fel och du måste FTP till servern för att åtgärda misstaget.

Arbeta med temafiler

Den bredaste kategorin av teman bygger upp anpassade layouter och sidtyper. Som standard kommer ditt barntema att arva alla dess förälders temafiler. Men du har möjlighet att skapa nya tematfiler för barn och WP kommer att registrera dem som "primära" mall.

Till exempel archive.php och index.php används för att visa respektive postarkiv och hemsida. Om det finns ändringar som du vill göra som kräver ändringar i HTML-filen så skulle du vara säkrare att klona föräldrarnas filer och redigera dem i barnets temakatalog.

Anpassade sidmallar

Medan vi pratar om mallfiler vill jag också presentera en del WordPress-funktionalitet som många inte känner till. Du kan skapa sid- och postmallar som kan väljas från administratörspanelen när du skapar nytt innehåll. Även om föräldertemat inte har den nya anpassade mallfilen använder WordPress fortfarande barnet i stället för a page.php eller single.php.

Skapa först en ny fil med namnet page-offer.php. Detta blir en “Specialerbjudande” PR-sida som är tema annorlunda än alla andra. Här kan du kopiera över din ursprungliga sidkod eller bygga upp temat helt från början. Den enda koden vi behöver för att låta WordPress veta om den här nya mallen är en kommentar inställning i PHP.

Ett annat alternativ till denna metod är att bygga anpassade sidor som heter det unika ID-numret. Så istället för att ladda standard archive.php För författarsidor kan du skapa en fil som author-ID.php där ID är användarens unika WordPress ID-nummer. Även om det här systemet är mer beskattande eftersom du behöver skapa en ny mallfil för var och en av författarna på din webbplats.

Det blir mer användbart om du kan kombinera dessa två tekniker med andra mallfiler. Speciellt kategorier och taggar fungerar bra med egna temafiler. Också om du länkar till bilagor i ditt innehåll så vill du överväga olika möjliga malllayouter för varje mime-typ. Jag inkluderade mallhierarkin nedan för en enkel JPEG-bildbilaga:

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

Användbara WordPress-verktyg

WordPress har ett mångsidigt pluginsystem som kan hantera en hel del anpassningar. Eftersom barnteman är så nya finns det inte ett helt slag mot tredjepartsversioner (ännu). Men det finns ett par verktyg du kan kolla för att göra din utvecklingstid lite kortare.

En uppenbar omnämnelse är One-Click Child Theme plugin byggd och testad för den senaste WordPress 3.x-versionen. Den lägger till en meny länk i din Admin “teman” avsnitt för att automatiskt bygga ett barn med ditt aktuella aktiva tema. Det här är fantastiskt om du inte vill röra med FTP och ser ut att leka med några nya idéer.

Om du planerar att redigera dessa filer i adminpanelen kommer du också att få tydligare syntaxmarkering. Detta erbjuds inte i WordPress som standard, men du kan installera Advanced Code Editor för lite förbättrad funktionalitet. Detta gör att wading via PHP-kodblock och HTML / CSS mycket mer hanterbar.

Ytterligare resurser

Tillsammans med alla tips i den här guiden vill jag dela en rad viktiga länkar för temat utvecklare. Det finns redan så många bra artiklar och gratis barnteman som du kan kolla in för att studera djupare i ämnet. Jag lade till en underbar samling av dessa resurser nedan:

• 8 Gratis Tjugo Eleven Barn Teman
• WordPress Online Codex »Barnteman
• Hur man bygger ett WordPress-barntema med krokar och filter
• Några ord om barnteman
• Hur man skapar, ändrar och använder barnteman i WordPress

Slutsats

Jag hoppas att processen med att bygga WordPress-barnteman är tydligare för dig efter att ha läst den här artikeln. Jag har försökt att förklara hur barnteman kan ärva både CSS och PHP mallar från en förälder. Dessutom är det mycket enkelt att manipulera specifika filer och skapa egna unika teman.

.