Redigera ditt tema den smarta vägen, använd Child Themes
Child Theme WpGuru Tjugotio

Det finns mängder med teman till WordPress, och många är gratis. WordPress.org tex har en enorm kollektion med riktigt snygga teman till ditt förfogande. Men det är inte alltid ett tema passa exakt till dina önskemål, utan ofta vill man redigera en marginal, texttyp eller länkfärg. När temat sedan blir uppdaterat har du sedan två val, att antingen strunta i att uppdatera din version, i rädsla att bli av med dina förändringar, eller uppdatera och försöka komma ihåg vad du redigerade för att sedan kunna återskapa dina förändringar.

Den här guiden kommer att gå igenom ett alternativ till ovan exempel, nämligen Child themes, eller barn teman, vilket möjliggör till redigering utan att egentligen redigera några av grundtemats filer, vilket gör att du säkert kan redigera, och uppdatera ditt tema, utan att vara rädd för att förlora någon information vid ett senare tillfälle.

Child Themes

Ett vanligt tema kräver som ett absolut minimum en stilmall som heter style.css, som innehåller minst en kommentar högst upp med namnet på temat, och en php-fil som är döpt till index.php för att kunna generera alla sidor med.

Ett Child tema, är ett barn till ett vanligt tema. Ett sådant tema behöver som minimum endast en stilmall som heter style.css och innehar minst en kommentar högst upp som definierar child temats namn och viket tema som är dess parent, alltså ”pappan”.

Genom att specificera en förälder i ett temas stilmall, använder WordPress förälder temat som en template, en grundstomme för hur temat ska genereras, så att ifall en specifik fil inte hittas i ditt nyskapade child tema, så låtar den istället efter filen i förälder mappen.

Detta betyder att om vi till exempel har temat TwentyTen och vill göra ett child tema till det så skapar vi en ny mapp i temamappen, skapar en fil, som vi döper till style.css och skriver en kommentar om att vi vill använda TwentyTen som parent theme.

Om vi nu kör vårat nyskapade tema kommer inte WordPress hitta några av filerna om hur den ska bygga upp våran hemsida i vårat eget thema, och kommer därför att plocka samtliga teman från TwentyTen, och vår hemsida kommer se likadan ut, som om vi hade valt att ha temat TwentyTen istället.

Nästan!

Om ni mins så kommer WordPress hitta en fil i vårat barn tema, nämligen style.css. Och kommer således att använda den för att generera färger, marginaler, textstorlekar och allt annat sådant. Men eftersom våran style.css är helt tom förutom en kommentar om TwentyTen och namnet på vårt tema, så kommer ingenting att stylas på något sätt, och hemsidan kommer att helt naken och tråkig.

Men frukta ej käre läsaer. Vidare i den här guiden ska jag gå igenom exakt hur du ska göra för kunna ändra bara precis på en liten text storlek och få allting annat att se exakt likadant ut som det gjorde innan.

Skapa ett eget Child Tema

Om du använder en ftp klient, till exempel FileZilla, och där i din grundmapp (den där du hittar filen wp-config.php) lokaliserar wp-content/themes/ så har du tagit dig till tema mappen i WordPress. Här hittar du mappar med namn som classic, default och tewntyten. Memorera exakt hur namnet är skrivit på det temat du vill ha som förälder tema, om det har stora eller små bokstäver och ifall det använder mellanrum eller understräck. I den här guiden kommer vi använda oss av temat TwentyTen där mappen heter exakt twentyten.

När du känner till den informationen skapar du sedan en ny mapp, antingen direkt i WordPress tema mapp (themes) eller lokalt på din dator för att sedan ladda upp med FileZilla eller liknande senare.

Mappen döper du till vad du vill, men för enkelhetens skull använd namnet du vill ha på ditt child tema, men ersätt mellanrum med understräck och skriv bara med små bokstäver (Detta är inget måste, men det blir snyggast på det viset, då alla gör detta som standard). I det här exemplet kommer vi utgå från att vi bygger ett barn tema till standard temat TwentyTen och vi kommer att döpa vårat tema till WpGuru TjugoTio. Så jag skapar först en mapp som jag döper till wpguru_tjugotio.

Gå sedan in i mappen och skapa en ny fil som du döper till style.css.

Om du inte kan välja ny stilmallsfil (.css) så kan du alltid välja ny textfil (.txt) och sedan döpa om hela filnamnet till style.css, och trycka ja när frågan kommer ifall du vi ändra filändelsen.

Öpnna din nyskapade style.css och skriv följande saker:

1
2
3
4
5
6
7
8
9
/*
Theme Name: WpGuru TjugoTio
Theme URI: http://www.wordpressguru.se/
Description: Barntema till TwentyTen 
Author: WordPressGuru
Author URI: http://www.wordpressguru.se/
Template: twentyten
Version: 1.0
*/

Du behöver inte ha alla de här raderna om du inte vill. Det ända du egentligen behöver är ”Theme Name” och ”Template” ifall du vill ha en barntema. Men det är alltid trevligare med mer information.
Theme Name är temats namn. Det som kommer att dyka upp som namn när man väljer ditt tema i Administrationpanelen.
Theme URI är temats hemaddress. Detta bör vara en länk till vart man kan ladda ner temat ifall du vill publicera det.
Description är en beskrivning till temat. Det som kommer att dyka upp under temats namn i Administrationpanelen.
Author är temats skapare.
Author URI är en adress till skaparens hemsida.
Template är viktigt och det är mappnamnet till det tema du vill använda som förälder tema. Mappnamnet måste skrivas exakt så som det är skrivet.
Version är temats version. Detta är bra att ha om du publicerar ditt tema och vill att folk ska kunna uppdatera det när du uppdaterar ditt tema.
Vidare finns det några till saker man kan skriva som Tags för att folk ska veta vad det är för typ av tema bland annat.

Om du nu sparar filen och laddar upp allting i din tema mapp så har du precis lyckats skapa ditt allra första barntema! Grattis!

Men så roligt ska vi inte ha det, exakt nu. Först ska vi göra en liten detalj till. Strax under ditt kommentarshuvud i style.css skriver du följande rad:

1
@import url("../twentyten/style.css");

Den här raden importerar alla stildeklarationer som finns i TwentyTen’s stilmall och placerar den överst i ditt barns temas stilmall, så att du nu kan skriva över bara de deklarationer du vill ha. Men vi går igenom vad vi har gjort:
@import betyder att vi vill hämta en fil och placera innehållet i den här stilmallen. Sedan deklarerar vi url(””); som ska innehålla adressen till filen vi vill importera. Länken är relativ från filen vi skriver i, vilket betyder att TwentyTen’s stil mall, relativt från våran stilmall ligger först ett mappsteg bakåt, sedan in i mappen twentyten, och sedan filen style.css. När man skriver en relativ länk så betyder en punkt samma mapp, och två punkter en mapp bakåt. Så våran address blir alltså ../twentyten/style.css.

Nu kan du spara. Ladda upp hela mappen. Gå in i Administrationpanelen > Utseende > Teman och hitta ditt nya tema. Aktivera det och du kommer att se att det är exakt likadant som ifall du hade aktiverat temat TwentyTen direkt.

Skriva över stil deklarationer

Nu kommer vi till de roliga bitarna. Nämligen till att skriva över och ändra på se stildeklarationer vi inte gillar, och förändra dem precis som vi själva vill ha dem.

Om två saker deklarerar samma sak i en stylesheet, så är det alltid den sista som tar effekt. Eftersom vi har skrivit @import raden högst upp i våran style.css så kommer allt vi deklarerar att kommer efter de gamla deklarationerna från TwentyTen, och på så sätt är det våra deklarationer som kommer att gälla.

Så hur vet du vad du ska deklarera och skriva över?

För det första krävs det en allmän förståelse av hur stilmallar fungerar. Att man först skriver vad deklarationen ska gälla för. Sedan mellan två måsvingar skriver man nycklar och de värden man vill ska gälla för nyckeln. För att ändra färgen på alla paragrafer till blått text, så kan vi till exempel skriva så här:

p{
    color: blue;
}

Men det lättaste är att öppna TwentyTen’s style.css, kopiera precis den deklaration du vill ändra på, klistra in den i din egen stilmall och sedan ändra värdena till dina egna.

Ändra länkarna

På rad 313 till 322 i wp-content/themes/twentyten/style.css hittar du följande:

a:link {
	color: #0066cc;
}
a:visited {
	color: #743399;
}
a:active,
a:hover {
	color: #ff4b33;
}

Detta beskriver färgerna som en länk ska ha, först om det bara är en vanlig länk, sen om länken är besökt och sist ifall du håller musen, eller precis har klickat på länken.

Kopiera raderna och klista in i din egen style.css och ändra lite på värden eller skriv dit nya deklarationer som du vill ska gälla länkar. Exempelvis så här:

a:link {
    color: #2243e6;
    text-decoration: none;
}
a:visited {
    color: #2243e6;
    text-decoration: none;
}
a:active,
a:hover {
    color: #e11717;
    background-color: #f8dada;
    text-decoration: underline;
}

Dessa länkar kommer att vara blå utan ett sträck under som normalt. Men om du håller musen över dem så kommer de bli röda, med en ljus ljus rosa färg som bakgrund och ett sträck under i samma röda färg som länktexten.

Child Theme WpGuru Tjugotio

Så nu om du sparar och testar ditt tema igen, så kommer allt att se ut som vanligt, förutom att länkarna är annorlunda. Bra va?!

Ändra texten

Vilken typ av font som ska användas för text deklareras i TwentyTen’s style.css på raderna 109 till 151. Och ser ut så här:

/* =Fonts
-------------------------------------------------------------- */
body,
input,
textarea,
.page-title span,
.pingback a.url {
	font-family: Georgia, "Bitstream Charter", serif;
}
h3#comments-title,
h3#reply-title,
#access .menu,
#access div.menu ul,
#cancel-comment-reply-link,
.form-allowed-tags,
#site-info,
#site-title,
#wp-calendar,
.comment-meta,
.comment-body tr th,
.comment-body thead th,
.entry-content label,
.entry-content tr th,
.entry-content thead th,
.entry-meta,
.entry-title,
.entry-utility,
#respond label,
.navigation,
.page-title,
.pingback p,
.reply,
.widget-title,
.wp-caption-text,
input[type=submit] {
	font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
pre {
	font-family: "Courier 10 Pitch", Courier, monospace;
}
code {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

Dessa är ganska klassiska och bra textval, titlar kommer i huvudsak att få typen ”Georgia” vilket är en font med ganska runda former och gör sig bra som överskrifter. I övrigt kommer det mesta andra att få typen ”Helvetica Neue” vilket är en ganska rak och lättläslig font som liknar Arial.

För att ändra någonting här, gör vi det lättast genom att kopiera hela alltihop till vår egen stilmall och lägger till vår egen lista av fonts som vi vill använda, på samma sätt som de har gjort.

Ju längre till vänster i den komma separerade listan en font är, ju högre prioriterad är den att användas. Om webbläsaren inte förstår eller har den angivna fonten så tar den nästa i listan.

Vi kan till exempel skriva.

Verdana, "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;

För att först och främst använda oss Verdana som font, men om det inte finns, så använder vi oss av samma saker som TwentyTen hade specificerat tidigare.

Functions.php

Filen functions.php är lite speciell, det är nämligen den ända filen som kommer att läsas in både från huvudtemat och barntemat automatiskt. Du behöver alltså inte använda några import funktioner eller liknande utan det räcker med att bara skapa functions.php i din egen tema mapp och sedan skriva de funktioner du vill använda. Tänk bara på att du inte deklarerar en funktion som redan finns, utan hitta på dina egna funktion namn. Det finns dock ett undantag; öppna TwentyTen’s egna function.php fil och leta efter en text som börjar med

if ( ! function_exists(

Det är en funktion som gör så att TwentyTen bara definierar och skapar en funktion ifall du inte redan har gjort det i en barntema. Det gör att alla funktioner som börjar på det viset kan du skapa upp och skriva över i din egen funktions.php. Se bara till att de returnerar samma saker som orginal funktionen gör, så att ingenting går sönder.

Många andra av TwentyTen’s funktioner kan vi indirekt skriva över, även om det inte texten ovan står före. Vi letar då istället efter en text likt:

add_filter( 'wp_page_menu_args', 'twentyten_page_menu_args' );

Den säger att funktionen twentyten_page_menu_args ska sättas in som en filter funktion när wp_page_menu_args körs. Om vi vill skriva våran egen meny arguments fukntion, så kan vi ta bort TwentyTen’s fukntion från filtret och lägga till vår egen istället:

1
2
3
4
5
6
function min_egen_page_menu_args_funktion()
{
    ...
}
remove_filter( 'wp_page_menu_args', 'twentyten_page_menu_args' );
add_filter( 'wp_page_menu_args', 'min_egen_page_menu_args_funktion' );

Hur vet vi då när det här ska köras eller om det ens körs? Det lättaste och snyggaste är att skapa får egen setup funktion på liknande sätt, och sätta in all kod i den:

1
2
3
4
add_action( 'after_setup_theme', 'mitt_temas_setup' );
function mitt_temas_setup() {
    ...
}

Övriga Filer

Tyvärr finns det inget enkelt sätt att ändra bara en rad i till exempel index.php filen, för om vi skapar en index.php fil så kommer bara den att användas och inte TwentyTen’s alls. Och ifall vi inkluderar deras index.php i våran, så kommer antingen hela deras fil att köras först, och sedan hela våran, eller tvärt om beroende på vart vi inkluderar filen.

Så ifall vi vill ändra någonting i index.php så får vi lov att kopiera hela filen och ändra det vi vill ändra helt enkelt, och hoppas att de inte gör så mycket uppdateringar på den koden, för dem kommer vi inte få tag på.

Ett bättre sätt är dock att ändra sidorna bara för några specifika sidor. Säg att vi tex har en sida som heter länkar. Och vill ha special utseende på just den sidan. Då skapar vi en fil i vårat tema som heter page-lankar.php där biten lankar i filnamnet är det exakta permalänksnamnet på vår sida. Sedan skriver vi precis hur vi vill att sidan genereras i den här filen, och när vi är inne på vår Länkar sida så kommer WordPress att använda våran page-lankar.php sida för genereringen.

Stylesheet_directory och Template_directory

En sista sak som är bra att veta om Child Teman och Parent Teman är php vägen bloginfo(‘template_directory’); och bloginfo(‘stylesheet_directory’);. Om ditt tema är ett vanligt tema utan barn eller föräldrar så kommer båda de här funktionerna att peka på samma plats. Man kommer att få tillbaka en länkadress till temats mapp. Men i fallet av ett barn-förälder förhållande så kommer stylesheet_directory alltid att peka på barnets temamapp eftersom det är barnet som använder style.css filen, och template_directory kommer alltid att peka på förälderns temamapp eftersom det är den som är templeten, eller mallen för temat. Detta kan vara bra att känna till speciellt när man skapar ett tema som är tänkt att kunna användas som föräldertema, då man tex länkar till bilder och ikoner. Om man använder sig av stylesheet_directory och har lite bilder i förälder mappen så kommer allting att gå bra ända tills man skapar barntemat. Plötsligt pekar ju nu nämligen adressen till barnets mapp, och om det inte finns några bilder att hämta därifrån så kommer inga bilder att visas. Samtidigt om man länkar till till exempel en favicon, som är den lilla bilden som visas högst upp i webbläsaren bredvid din adress så kanske man specifikt vill att länken ska användas från barnets mapp och inte från föräldern.

Oavsett vad man vill göra, så är det viktigt att känna till skillnaden.

Sammanfattning och avslutning

Så! Det var allt för den här gången. Nu bör ni veta tillräckligt mycket om child teman för att kunna skapa era egna varianter. Och när en uppdatering kommer av ert förälder tema så är det bara att uppdatera och inte vara rätt att uppdateringen kommer att skriva över några av era ändringar, så dessa är gjorda i ett helt eget tema.

Här är exemple temat vi precis skapade:

Download: Ladda ner exempeltemat: wpguru_tjugotio.rar (1 kB) senast uppdaterad 17 February 2011

12 kommentarer till 'Redigera ditt tema den smarta vägen, använd Child Themes' »»

Lämna en kommentar

XHTML: Du kan använda dessa taggar:
<a href="">, <em>, <strong>, <img src="">,
<pre lang="php">, <code>, <blockquote>