Skapa ditt första WordPress barntema
Oavsett om du bara vill skapa ett något anpassat tema eller något helt unikt, skapar ett WordPress barntema det kan påskynda utvecklingsprocessen.
Barnteman låter dig börja med grunderna i ett befintligt tema, så du behöver inte återuppfinna hjulet. Du kan välja ett tema som har funktionalitet och grundläggande layout du behöver, men sedan anpassa allt om det som du skulle utforma ett tema från början.
För den här handledningen skapar vi ett barntema baserat på det senaste WordPress-temat, tjugo elva. Vi använder också några praktiska plugins och andra knep för att göra det ännu enklare att skapa ett barntema.
Du behöver lite grundläggande HTML- och CSS-kunskap, men den goda nyheten är att för ett grundläggande barntema behöver du inte veta något PHP! Temat skapat är väldigt grundläggande, men det ger dig de byggstenar du behöver för att komma igång med att skapa egna teman, även om du aldrig skapat ett WordPress-tema tidigare!
Temat vi ska skapa
Här är en kort titt på det slutliga temat vi ska skapa:
Ett ord om överordnade teman
Förmodligen är det viktigaste steget i att skapa ett barntema att plocka ut ditt föräldertema. För denna handledning, som vi nämnde, använder vi tjugo elva. Anledningen till detta är att det är lättåtkomligt, gratis, är förmodligen redan installerat på alla uppdaterade WP-installationer och är välkodad.
Den sista är det viktigaste att tänka på när du väljer ditt föräldertema: se till att det är välkodat. Huvudskälet till detta är att om ditt föräldertema är välkodat är det oändligt lättare att skapa ett barntema som är välkodat, eftersom du inte behöver använda hackar för att få saker att fungera.
När du vill göra anpassningar till ett tema, är det bättre att du använder ett barntema istället för att redigera huvudämnet direkt. På det här sättet, om en uppdatering för det ursprungliga temat utfärdas, kommer ditt tema inte att brytas. Och om både modertemat och ditt tema kodas väl, kommer du sannolikt inte att märka några skillnader i det uppdaterade temat på webbplatsens främre del.
One-Click Child Theme
Det snabbaste och enklaste sättet att komma igång med ett barntema är att använda One-Click Child Theme plugin. Installera bara den, aktivera det överordnade temat du vill ha ditt barntema att baseras på (om det inte är aktivt redan) och klicka på "Barntema" under Utseende i WP-instrumentpanelen.
Därifrån ange ett namn för ditt nya barntema, en kort beskrivning och ditt namn och klicka på "Skapa barn". Det är allt som finns där. Ett ord eller varning: Jag fick ett felmeddelande efter att ha klickat på "Skapa barn", men barntemat skapades utan hitch.
Alternativt kan du skapa ett barntema från början. För att göra det, öppna din text eller kodredigerare och välj följande information (det här tar hänsyn till att du använder det tjugo elva föräldrarnas tema):
/*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");"Mall" -delen är vad som gör detta till ett barntema snarare än ett vanligt tema, så se till att du korrekt identifierar tematets förälder.
Ställa in teman Alternativ
Innan du börjar anpassa ditt nya barntema CSS, se till att du kolla in temainställningarna och gör några anpassningar där. Det är bättre att göra ändringar inom ramen för temat om det är ett alternativ, eftersom det gör det enklare att hantera ditt temas kod.
För den här anpassningen har jag valt en layout från innehåll till vänster med ett enda sidofält och lämnat färgschemat och standardlänkfärgen (för nu). Jag har också lämnat bakgrunden vit, rubriken med en av standardbilderna och rubrikens färgfärg svart.
Obs! Om du vill inaktivera färgvalet i tematillbehör, lägg till !important till färgspecifikationerna i din CSS.
Grunderna för att redigera ditt tema
Om du går till WordPress-temredigeraren ser du ett mestadelsstort stilark för ditt nya barntema. Den första raden i din nya CSS-fil (efter informationen om barntema) importerar stilarket från modertemat. Det här är viktigt och det måste förbli överst på ditt ark eller det överordnade formatet kommer att ogiltigförklaras och kommer inte att importeras.
En sak du kanske vill göra vid denna punkt är att installera ett bättre kodredigeringsprogram för redigering av tema. Färgkodad syntax gör det betydligt enklare att koda direkt i WP, och kommer speciellt att vara användbart för dem som är vana vid färgad syntax med externa redaktörer. Mitt personliga val är Avancerad kodredigerare .
Du vill också ha någon typ av textredigerare för att konfigurera vår functions.php-fil, helst en med syntaxmarkering.
Hitta koden för att ändra
Detta kan vara en av de mest frustrerande delarna av barntemautveckling: hitta vilka delar av koden som behöver redigeras och vilka kan lämnas ensamma. Hela punkten för ett barntema är att göra temakonstruktion och underhåll enklare. För det ändamålet vill vi skapa så lite ny kod som möjligt.
För att göra det mycket enklare, du vill göra är att installera ett plugin som Pyroman . Det här låter dig klicka på en del av din siddesign och visa den därtill hörande div och CSS klasser. Du kan också prova kod för att se vad som fungerar, och sedan kopiera och klistra in det i ditt temas CSS. Jag har funnit att det är ditt mest effektiva sätt att redigera din kod genom att hålla ditt front-end-tema öppet i en flik tillsammans med en annan flik med WP-instrumentpanelen där du redigerar filer.
Det grundläggande
Låt oss börja med att definiera saker som bakgrundsfärg, typografi och andra grunder som ger oss grunden för vårt barntema. Den här koden sätter upp allt i rubriken, med undantag för att flytta vår navigeringsmeny. Låt oss bryta ner det i några olika steg.
Det här första koden ger oss all vår grundläggande typografi (vi kommer att dra in "Droid Sans" och "Dancing Script" från Google Web Fonts, mer om 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;}Det här avsnittet innehåller huvudinhoudsbakgrund och droppe skugga .
#page {background: #f5f5dc;-moz-box-shadow: 0 0 10px #67949c;-webkit-box-shadow: 0 0 10px #67949c;box-shadow: 0 0 10px #67949c;}Då gör vi några justeringar på vår bloggtitel och beskrivning, samt ändrar topprubriken på rubriken och tar bort sökformuläret (som kommer att ersättas med vår navigationsmeny i nästa steg).
#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;}Detta ger oss en rubrik som ser ut så här:
Flytta huvudnavigationsmenyn
Nästa förändring vi vill göra är att flytta navigeringsmenyn från dess standardposition under rubrikbilden till höger, mitt emot bloggtiteln eller logotypen.
Detta format fungerar bäst för webbplatser som endast har ett litet antal sidor. Större webbplatser, eller webbplatser med undersidor, behöver ytterligare överväganden, och det kommer troligen inte att fungera bra med den här typen av layout.
Här är koden du behöver:
#access {clear: both;display: block;float: right;margin: 0 auto 6px;position: relative;top: -410px;width: 500px;background: none;box-shadow: none;}Din navigationsmeny bör nu sitta upp ovanför huvudbilden, intill din logotyp. Nästa lägger vi till några stilar i vår navigering och gör dem till knappar i stället för en solid stapel. Här är koden för den grundläggande teckensnittstypen:
#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;}Här är den grundläggande formateringen för knappen bakom texten, inklusive en fin inre skugga:
#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;}Och här är koden för att lägga till en droppskugga bakom knapparna när de svängs över (vilket faktiskt ger intryck av en animeringseffekt som används):
#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;}Nu ser din rubrik ut så här:
Grundläggande styling för ditt sidofält
Låt oss lägga till några väldigt grundläggande stilar för ditt sidofält. De förändringar som vi gör här är framförallt att göra sidofälten matchande resten av webbplatsens design. Här är 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 finns redan i en H3-tagg, så det tar på teckensnittet som redan anges där.
Och här är hur det ser ut:
Ändringar av postformatet
Först vill vi ändra vaddering för toppen av inläggen, så den första posten rader upp med toppen av sidofältet.
.entry-title {padding-top: 0px;}Nästa ändrar vi kommentarsymbolen som visas bredvid posttiteln på hemsidan. Det här är enkelt: skapa bara din nya ikon (jag har skapat versioner för aktiva och inaktiva versioner) och sedan ladda upp dem med WPs media uppladdare. Ta webbadressen för varje och sätt in dem så här:
.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åste lägga till !important till background-color attribut för svävarstaten för att åsidosätta styling gjort till länkar någon annanstans i temat. Huvudbilden är en fylld textbubbla, medan det normala tillståndet bara är en skiss. Här är resultatet:
Nästa kommer vi att arbeta på kommentar styling. Det här är enkelt, eftersom allt vi gör ändrar färgschemat. Här är 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;}Och här är slutresultatet:
Infoga kod i ditt huvud eller någon annanstans i ditt tema
Det här är förmodligen den mest tekniska delen av att skapa ett barntema och är bara nödvändigt om du vill göra något som att lägga till Google Web Fonts till din webbplats. Det är precis vad vi ska göra här. Detta är den enda gången när du skapar ditt barntema som du behöver arbeta med PHP, och om du inte behöver infoga något i tematets rubrik eller någon annanstans behöver du inte jobba med PHP alls.
Skapa först en functions.php-fil i din text eller kodredigerare. Den grundläggande koden du använder kommer att se ut så här:
För barntema ovan måste vi infoga kod i vår rubrik för att länka lämpliga Google-webbfonter så att vi kan ringa dem till vår CSS. Så här gör vi det (du kan få link direkt från Google med vilka teckensnitt du vill använda):
Nu måste dina teckensnitt fungera ordentligt! Och alla funktioner som inkluderades i det ursprungliga modertemat kommer fortfarande att fungera.
Ladda ner temafilerna
Om du vill se hela koden för både CSS och functions.php-filen kan du ladda ner dem här . Inkluderas även i kommentarbubbelpictogrammen.
Slutsats
Att skapa ett barntema är oerhört enkelt jämfört med att man designar och kodar ett tema från början. Med lite grundläggande CSS kunskap och bara en liten bit av PHP, kan du skapa i grund och botten vilken typ av tema du vill ha. Barnteman kan i många fall också användas kommersiellt (så länge som föräldertema tillåter sådan användning) eller säljs som lagerteman (bara kom ihåg att låta dina köpare veta att temat kräver ett överordnat tema).
Se till att din kod är välskriven, kommenterad och organiserad. På så sätt kan ditt barntema inte brytas om ditt föräldratema uppdateras.
Barntemat som vi har skapat i denna handledning är väldigt, väldigt grundläggande. Men det ger dig den information du behöver för att börja utforma dina egna teman. Börja med grundläggande restyling för att få fötterna blöt och börja sedan utforska de saker du kan göra med PHP i din functions.php-fil. Barnteman, när de bygger på ett stort föräldertema, kan vara lika kraftfulla som alla andra tillgängliga teman. För mer information om barnteman, kolla in WordPress Codex .
Har du fler tips för att skapa bra barnteman? Låt oss veta i kommentarerna!