Varje år firas dagen den 9:e April, och WordPress Gurun är med för andra året i rad. Var med du också!

Jag skriv ihop ett litet filter som gör att inga WordPress css:er laddas:

function wpguru_strip_styles() {
    return "";
}
add_filter( 'style_loader_src', 'wpguru_strip_styles' );

Lägg till koden i din functions.php så tas all style bort från tillägg och annat. Filen hittar du om du går in i Administrationspanelen och väljer ”Utseende > Redigerare”.

Dessutom måste du gå in i header.php som du hittar om du hittar på samma ställe som functions.php. Här letar du upp en rad som ser ut ungefär så här:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Kommentera ut raden genom att ersätta den mot följande:

<!--<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />-->

Så, spara(!) och all din style ska nu vara helt borta från din hemsida.

Ha detta igång under hela dagen, för att vara med och fira Naked CSS Day 2011.

Men vad gör du ifall just ditt typsnitt inte existerade i den listan. Och som grafisk designer kan du inte ha det på något annat vis än att använda just ditt specialdesignade typsnitt. Bilder är inget alternativ, så vad gör du då?

Med css definitionen @font-face är det möjligt. @font-face låter dig definiera en egen font-familj och låta besökaren ladda ner det aktuella typsnittet och sedan visa din hemsida precis som du vill ha den. Funktionen är egentligen en CSS2 definition, men då var det bara Internet Explorer som stödde den, och då endast med specialformatet .eot (vilket för övrigt fortfarande är det ända IE stödjer). Nu när CSS3 och HTML5 gör intåg stödjer alla stora webbläsare @font-face till en viss grad, och med lite special kodning och alternativa typsnitt att falla tillbaka på kan vi visa hemsidan precis som vi vill ha den utan att oroa oss för att gamla webbläsare och uråldriga användare inte ska kunna hänga med.

Bulletproof smily version av @font-face

Koden som rekommenderas att använda för @font-face och som framförallt är framarbetad av Paul Irish ser ut som följer:

1
2
3
4
5
6

@font-face {
  font-family: 'WpGuru Familjen';
  src: url('WpGuruFamiljen.eot?') format('eot'),
       url('WpGuruFamiljen.woff') format('woff'),
       url('WpGuruFamiljen.ttf') format('truetype');
}

Koden ovanför gör så att jag kan använda mig av font-familjen ‘WpGuru Familjen’ i min style.css, där konden ovan också för övrigt ska in. Anledning till att den är på så många rader är för att alla webbläsare ska förstå, framförallt IE. Genom koden ocan kan man lura de olika webbläsarna så att till och med ie6 kan förstå. Om du vill veta exakt varför läs gärna Paul Irish inlägg om saken

Första raden @font-face talar om att här börjar en definition om en ny font. Andra raden specificerar namnet på fonten. Det är detta namnet man ska skriva ifall man sedan vill använda fonten.

Tredje raden är till för Internet Explorer som bara förstår .eot filer, och detta är alltså platsen på hårddisken relativt till stylesheet filen där fint typsnittsfil ligger.

Rad 4-7 är till för alla andra webbläsare. Rad 4 säger att ifall besökaren redan har ett typsnitt installerat på datorn som heter samma sak som står mellan local, så ska man använda detta typsnitt, vilket kan vara bra, för att besökaren ska slippa ladda ner din fil, men ifall besökaren råkar ha fel typsnitt med samma namn installerat, så kommer alltsammans se fel ut, så därför testar man och ser ifall användaren har ett typsnitt som heter (smily), för att den alltid ska misslyckas. Varför då inte helt strunta i det, frågar du dig? För att IE inte förstår vad local betyder, och kommer att hoppa över den raden. Skulle man IE lasa vidare, skulle IE ladda ner även nästkommande typsnittsfiler trots att IE inte förstår sig på dessa typsnitt, vilket bara skapar massa jobbigheter. Så detta är den bästa lösningen (läs mer på Paul Irish sidan specificerad ovan).

Vidare på rad 5-7 sedan när IE är ur vägen, specificeras olika typer av din font, för olika typer av webbläsare. WOFF är ett litet och snabbt format som stödjs av FF3.6+, true-type stödjs av de flesta och är special designat för att visas bra på webben. Svg tillslut är xml format som södjs av ett fåtal webbläsare men framförallt av iPhone och iPad.

Tillslut på rad 8-10 tar vi bort några buggar i webkit läsare genom att specificera alla stil varianter till normala. Så får vi inga dumma kraschar på grund av detta. Läs gärna mer om detta här.

Förut var det The Bulletproof smily syntax som gällde, men skaparen till Font Squirrel har lyckats komma på en smart metod som ersätter den och genom de få raderna ovan lyckats göra så att till och med ie6 kan få special designade fonts. Genom att lägga till information om 3 stycken fonts, kan man erbjuda det bästa typsnittet för varje webbläsare. eot filen till Internet Explorer mindre än 9, woff filen till alla moderna webbläsare, och slutligen ttf-filen till Safari, Android, iOS.

Den här metoden heter ”The Fontspring @font-face syntax” och Font Spring har skrivit ett bra inlägg om precis vad som händer i syntaxen.

Generera dina typsnitt

-Men, tänker ni, så många filer av ett och samma typsnitt har inte jag!

Så hur får du tag i typsnitten i alla de där formaten som beskrevs ovan?

Lugn, som tur är finns det smidiga och bra verktyg på internet, där det bästa är skapat av Font Squirrel.

Här kan du ladda upp dina normala .ttf filer som du till exempel kan hitta i din dators font mapp eller lite varstans på internet. Och sedan ser generatorn till att skapa filerna du behöver. Tänk vad lätt det kan vara ibland.

Hur du sedan använder dina familjer

Ok, koden är redo, filerna är redo. Hur får du nu din text att formad som du vill ha den? Enkelt, precis som du skulle vilken annan font som helst.

p{

   font-family: WpGuru, 'WpGuru Familjen', verdana, helvetica, arial, sans-serif;

}

Nu kommer den att använda WpGuru fonten som allting går som det ska, och ifall den inte hittar typsnittet trots alla våra koder och filer (och under de få sekunder innan webbläsaren har hunnit ladda ner och installera typsnittet), så kommer den att falla tillbaka på verdana i första hand, helvetica i andra hand och så vidare.

Så nu kan du styla din hemsida precis så som du vill ha den, med de coolaste typsnitten du kan då tag i, få det att fungera i alla webbläsare och skulle det mot förmodan ändå gå åt pipan, så har du lösningen för det också.

Poängen är att din typografi är viktig. Tyvärr kan vi inte använda vilka fonts som helst på webben, då det gäller att alla webbläsare ska kunna förstå hur vi vill ha vår text. Så vad har vi för alternativ?

För det första kan vi göra bilder av alla text, så får vi allt att se ut precis som vi vill ha det, eller så använder vi den relativt nya css definitionen @font-face som du kan läsa mer om i artikeln Strunta i webbsäkra font-familjer och låt @font-face skapa typografisk magi, eller slutligen så använder du webbsäkra font-familjer som fungerar i alla webbläsare.

Special fonts som bilder

Alternativet att använda bilder för statiska texter (loggor, överskrifter, menyer) är i mitt tycke endast ett alternativ vid ett specifikt tillfälle, och det är till din logga, och då endast så länge du har ditt namn skrivet någon annanstans eller på något annat sätt med klar text. Varför? Anledning är att Google inte kan läsa bilder (än). För att Google och andra sökmotorer ska förstå vad som händer på din hemsida, kunna orientera sig och kunna sända relevant trafik åt ditt håll, så måste Google kunna läsa dina texter. Det kan de inte ifall du har valt att göra bilder av all text.

Jag rekommenderar därför emot att använda enbart bilder till menyer och överskrifter. En logga är som sagt okej eftersom detta är en logotyp som ska skilja sig från övrig text och ofta är något slags motiv, eller väldigt specifik text, som ska se ut på ett speciellt sätt.

För att Google ändå ska kunna läsa din hemsidas namn är då istället det bästa alternativet att skriva namnet i en div som du absolutpositionerar -9999px till vänster eller något liknande, så att en vanlig användare inte ser den dubbla texten.

.logo-text{
    position: absolute;

    left: -9999px;
}

Websafe font-families

Det andra alternativet är att välja fonts som du vet fungerar på de flesta webbläsarna och då försäkra dig om att din text är läsbar på samma sätt överallt. Detta gör du genom att specificera font-family i din css, och som värde anger du en komma separerad lista med typsnitt som du föredrar. Skulle din webbläsare trots allt inte kunna hitta ditt typsnitt först i listan, kommer den att använda den andra, och så vidare.

Här kommer en lista på alla webbsäkra typsnitt du kan använda dig av, med för det mesta en liknande fallback font och alltid en så kallad Generic font Family (serif, sans-serif, cursive, monospace) som definitivt existerar i varenda webbläsare där ute.

För en lista på alla fonts, säkra eller inte ta en titt på den här sidan: font Tester – All Fonts Preview

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.

Ö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.

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

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:

Strukturen på en hemsida

Okej, vi börjar med att förklara konceptet ”hemsida”. Moderna hemsidor och framförallt stora ramverk som WordPress, försöker så långt det går att separera presentation från logik, och sedan vidare hålla allting så separat det går för att vi som användare enkelt ska kunna modifiera så mycket som möjligt utan att behöva leta så mycket.

Html

För enkelhetens skull, låt oss likna en hemsida vid en bil. Html koden beskriver hur bilen ska vara uppbyggd. Den säger att hela bilen är en bil, och i den ska det finnas 5 platser, 4 dörrar, en motor, 4 hjul. och så vidare. Allting delas in i element som ringar in andra element. Ett startelement kan se ut så här: <bil>. Alla element måste avslutas, och det görs dem genom att placera ett framåt snedstreck (front slash) i elementet: </bil>. Varje text snutt som är inringat med ”krokodilmunnar” kallas för en tagg och en starttagg och en sluttagg skapar ett element.

Exempel:

<bil>
    <dörr>
        <fönster>
        </fönster>
    </dörr>
    <säte>
    </säte>
    <dörr>
        <fönster>
        </fönster>
    </dörr>
</bil>

För att lättare kunna identifiera de olika elementen så kan vi sätta klasser (class) och id:n (id) på dem. Se klassen som bilmodellen, den kan delas av många bilar som ser likadana ut, och id:t är registreringsnumret, och pekar på precis en specifik bil, och inga fler.

<bil class="wp70" id="abc123">
    <dörr class="vänster">
        <fönster>
        </fönster>
    </dörr>
    <säte>
    </säte>
    <dörr class="höger">
        <fönster>
        </fönster>
    </dörr>
</bil>

CSS

Css:en eller stilmallen, talar om hur din bil ser ut. Allt från längd och bredd till färg och form. När man skriver i sin stil mall så filtrerar man ut vissa element som man vill ange attribut på och talar sedan om hur alla filtrerade element ska se ut. Om vi vill förändra en specifik elementtyp, behöver vi bara skriva namnet på det elementet, utan ”större än”, ”mindre än” tecknen, exempelvis bil. Vill vi filtrera ut element utefter deras klasser så skriver vi en punkt och sedan klass-namnet, exempelvis .vänster. På samma sätt gör vi för att filtrera efter ett visst id, men då använder vi fyrkant, stakettecken, så då blir det #abc123. Vi kan även kombinera flera av dessa med mellanrum ifall det ska vara element i ett annat element och komma ifall det ska inkludera även en ny filtrering av element. Om vi har en skada på sätet och en repa i vänster fönster på bil abc123 så skulle vi kunna skriva så här:

bil#abc123 .vänster fönster
{
    skada: stenskott;
    djup: 1 cm;
}
bil#abc123 säte
{
    skada: brännmärke;
}

Måsvingarna talar om att här slutar filtreringen av element och nu börjar deklarationen av hur elementet ska formateras. Först skriver du en nyckel med ett kolon efter och sedan ett värde, och avslutar raden med ett semikolon. När du är färdig med alla deklarationer avslutar du med en måsvinge igen.

Databas

Databasen tar hand om all information om bilden, den skulle tex kunna innehålla all information som registreringsverket har, alltså ägaren till bilen, adressen och så vidare. Den här informationen ska vara enkel att ändra då man ska kunna sälja bilen och byta ägare.

En databas är uppbyggd precis som ett excel dokument med rader och kolumner. Varje kolumn representerar en typ av information och varje rad motsvarar en post. Varje databas tabell måste också ha en primär nyckel som ska vara unik och göra det möjligt att hitta en specifik post. I vårat exempel skulle det vara helt perfekt att använda registreringsnumret som denna nyckel, då vi vet att det bara får finnas en bil för varje registreringsnummer. I många fall använder man bara en siffra som hela tiden räknar upp för varje ny post utan att vara direkt kopplad till någonting specifikt på bilen.

I tabellen finns det nu två bilar registrerade, båda är bundna till WordPressGuru, men så länge den primära nyckeln är olika så kan man ändå hitta en specifik bil.

Php

Php är ett serverspråk som talar ser till att informationen i databasen visas på hemsidan, och får saker och ting att hända. Om du vrider på nyckeln så är det php-språket som talar om att du ska ändra värdet på tändning från av till på. Det är php som placerar alla saker på rätt plats och får din bil att leva. Du kan se php som motorn i din bil. Med hjälp av villkorssatser kan du få saker att ske beroende på andra saker. Om vi tar exemplet med att vrida på nyckeln igen, så skulle du kunna skriva en sats som är
”Om du vrider på nyckeln och motorn är av -> starta motorn
annars -> stäng av motorn”

1
2
3
4
5
6
7
8
9
10

<?php
if( $vrida == true && $motorn != 'igång' )
{
    startaMotorn();
}
else
{
    stängAvMotorn();
}
?>

På rad 1 och 10 ser vi php taggarna. Dessa talar om att mellan dessa är det php-kod, så att vår hemsida vet hur den ska tolka det vi skriver.
Rad två är våran villkorssats som säger att ifall värdet på $vrida är lika med sant och värdet på $motor är ‘inte lika med’ igång så ska vi köra funktionen ”startaMotorn” annars ska vi köra funktionen ”stängAvMotorn”.

Sammanfattning

Där har vi de fyra huvudsakliga delarna i en hemsida. Html för att tala om strukturen, stilmallen för att visualisera, databasen för fakta och php för att sätta ihop allting och få det all leva.

Hur ser detta ut på riktigt?

Vi har hittills bara gått igenom detta genom ett låtsasexempel på en bil för att det ska vara lättare att förstå, men det är ny dags att börja med lite riktiga taggar så att ni ska kunna lära er att modifiera era egna hemsidor.

Det första elementet, och det som omringar alla hemsidor, är alltid taggen <html> den säger att ”här börjar en hemsida” och när webbläsaren hittar </html> så vet den att ”här slutar hemsidan”.
Inuti detta har vi först hemsidans huvud <head></head> och sedan kropp <body></body>. I huvudet skriver du saker som titel och länkar till stilmallar och lite sådant. I kroppen kommer själva hemsidan med alla dess element.

Här kommer en lista på lite bra element att känna till:

• div – Ett block, ett fyrkantigt område.
• span – Ett område som omsluter text för att kunna styla.
• p – En paragraf.
• h1 – Header 1 – brukar oftast ringa in titeln på din hemsida.
• h2, h3… h6 – Header 2-6 – h2 är ofta rubriker till inlägg, eller saker i sidopanelen. H3 är ofta underrubriker i ett inlägg och så vidare.
• strong – Gör text till fetstil, är tillsammans med em det ända element som får användas för att styla din text på andra ställen än i stilmallen.
• em – Gör text till kursiv, är tillsammans med strong det ända element som får användas för att styla din text på andra ställen än i stilmallen.
• ul – Ringar in en onumrerad lista
• li – Ett listobjekt
• a – Ett ankare – Länkar till antingen en annan hemsida, eller en annan sida på din egen hemsida.
• img – Bilder. Detta element behöver ingen avslutnings tagg utan avslutas i starttaggen: <img src=”adressen till en bild” />
• br – En radmatning i text. Detta element behöver ingen avslutnings tagg utan avslutas i starttaggen: <br />

En standard hemsida skulle kunna se ut som följer:

<html>
    <head>
        <title>
           Hello World - Min första hemsida
        </title>
    </head>
    <body>
        <h1>
            Hello World!
        </h1>
        <p>
            Det här är min första hemsida.
        </p>
        <ul>
            <li>
                En lista
            </li>
            <li>
                Ett element till
            </li>
        </ul>
        <div>
            Det här är en div
        </div>
        <span>
            Det här är en span
        </span>
    </body>
</html>

Spara koden i ett dokument som du döper till index.html och dubbelklicka på filen för att öppna den i en webbläsare.

Yes! Det fungerade, men det ser ju inte så roligt ut, så vi lägger till en stilmall också.

Skapa ett nytt dokument som du döper till style.css och placera det på samma ställe som index.html.

Ändra nu i headern (mellan <head> och </head>) så att den ser ut enligt följande:

    <head>
        <title>
           Hello World - Min första hemsida
        </title>
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>

Vi har nu lagt till en länk till vår stilmall, attributet rel talar om att det är en stilmall, href talar om vad filen heter och type talar återigen om att det är en stilmall.

Gå nu in i style.css och skriv följande:

h1
{
    color: blue;
    text-decoration: underline;
    font-size: 26px;
    font-family: Georgia, 'Times New Roman', times,serif;
}
 
p
{
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
div,
span
{
    border: 1px solid green;
    color: red;
    background: yellow;
    margin-bottom: 10px;
}

Spara och ladda om din sida för att se ändringarna.

Våran header har nu bytt färg, blivit understruken och ändrat font. Vår paragraf har ändrat radhöjd och font och både våran span och div har fått bakgrund, border, text färg och en marginal i botten på 10px. Vi kan nu se hur enkelt det är ett modifiera våra element med stilmallen och få saker att se helt annorlunda ut. Vi kan också se skillnaden mellan ett div element och ett span element.

Applicera detta i WordPress

I WordPress hittar du alla filer som är värda att modifiera under ”Utseende > Redigera”. Här är saker och ting exakt likadana som jag precis har beskrivit bara lite mer avancerade. Om du kikar i din stilmall (style.css) så hittar du precis dessa definitioner, och vilka element de modifierar. Testa gärna att ändra på någonting, spara och se hur det förändrar din hemsida.

Om du använder en egen installation från WordPress.org, så hittar du även alla andra temafiler här, de som skriver ut inläggen på din sida, de som talar om hur ett inlägg ska se ut när det är ensamt och hur en sida ska formateras. Om du går in i en sådan fil och ändrar så kan du direkt se hur saker förändras på din blogg.

Det är nu kunskap och fantasi kommer med i spelet. Det gäller att veta vad man kan göra, och hitta på ett sätt att använda den informationen på. Vad beträffar databasen och php, så ignorerar jag det i denna grundläggande guide, då det kan bli relativt komplicerat och WordPress redan sköter det mesta av detta i bakgrunden åt oss i vilket fall, vilket gör att html och css är det första vi behöver lära oss.

Ett sista ord

Nu är det egentligen bara att börja testa och leka med de givna verktygen. Skapa gärna en ny blogg, och testa runt med att ta bort element, sätta in nya, och formatera dem i stilmallen.

Om du vill lära dig mer om html och css så skulle jag skarpt rekommendera att du kollar in W3Schools och deras guider och dokumentation. Annars är Google rent allmänt ett fantastiskt verktyg (jag rekommenderar inte längre W3Schools, ta istället en titt på tex Html Dog).

Viktigast av allt är dock att du vågar, och inte ger upp. Jag vet inte hur många år jag har hållit på med alla dessa språk och många fler, och jag lär mig nya saker hela tiden. Det finns alltid mer information där ute, och ingen blir någonsin fullärd, så börja på din nivå, läs och testa och våga göra fel, det gör jag också.

Projektet är startades 2006 med initiativ från http://naked.dustindiaz.com/, och även om den inte verkar uppdaterad till 2010, så tänker i alla fall jag trots det vara med och fira.

Om du vill vara med och fira ska du helt enkelt ta bort din stilmall under hela dagen den 9:e April.

Vill du göra det korrekt så betyder hela dagen från 00:00 -12 timmar till 23:59:59 +12 timmar, så alltså egentligen 48 timmar.
Jag kommer dock bara köra det nationellt och sätta tillbaka min css när klockan slagit midnatt här hemma i Sverige. Så tills dess får ni vara utan stilmallar på WordPressGuru.

Är du med och firar?

wp_list_pages()

För att göra detta i WordPress kommer vi att använda oss av funktionen wp_list_pages() som listar alla sidor precis på ett sånt vis som vi vill ha dem.

Gå in i header.php och leta upp ett bra ställe att placera dina sidor på. När du hittar en bra plats skriver du följande:

1
2
3
4
5
6
7
8

<div id="nav">
    <ul>
        <li <?php if(is_front_page()) { ?>class="current_page_item"<?php } ?>>
            <a href="<?php echo get_option('home'); ?>/">Hem</a>
        </li>
        <?php wp_list_pages('sort_column=menu_order&title_li=' ); ?>
    </ul>
</div>

Ok, nu har vi skapat oss en lista med först en länk till ”Hem” och sedan en lista av resterande sidor och undersidor. Raden om ”current_page_item” är till för att vi ska kunna ändra färg på ”Hem” när vi är placerade på den sidan.

Vi kommer nu få en meny som ser ut ungefär så här:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div id="nav">
    <ul>
        <li>
            <a href="#">Hem</a>
        </li>
        <li>
            <a href="#">Topp Sida</a>
            <ul>
                <li>
                    <a href="#">Undersida 1</a>
                </li>
                <li>
                    <a href="#">Undersida 2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Sida utan undersidor</li>
        </li>
    </ul>
</div>

Style.css

Gå nu vidare till din stilmall i filen style.css och börja med följande:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#nav{
	background: #464646;
	color: #999999;
}
#nav li{
	display: inline;
	list-style: none;
	margin: 0;
	position: relative;
}
#nav a{
	text-decoration: none;
	color: #999999;
	padding: 0px 15px;
	margin: 0;
	display: inline-block;
	font: normal 14px/47px Georgia,"Times New Roman","Bitstream Charter",Times,serif;
}

Det som är viktigt här är att ha li som inline så att de hamnar på en horisontell linje istället för under varandra. Sedan att ha position som relative så att vi senare kan få våra drop down menyer att hamna rätt.

I a är det viktigt att använda inline-block så att de hålls kvar på en linje, men fortfarande accepterar line-hight och padding. Line-hight är det som står efter / i deklarationen om font, alltså i exemplet 47 px. Detta ska vara höjden på din meny. Så har du en högre eller mindre meny, ändra detta värde.

Göm dina undersidor

Som läget är nu, så kommer vi att se våra undersidor hela tiden, så vill vi inte ha det, utan vi vill bara att undersidorna ska synas ifall vi håller musen på huvud sidan. Så vi lägger till följande.

1
2
3
4
5
6
7

#nav ul ul{
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	background: #464646;
}

Vi definierar #nav ul ul eftersom det betyder en onumrerad lista inuti en onumrerad lista, alltså en undermeny. Sätt display till none så visas den inte. Sätt till din ”Absolut” så blir vi fria att placerade den var som helst. Eftersom vi vill ha den precis under huvud sidan så sätter vi left: 0; och top: 100%; det är här det är viktigt att vi redan definierat #nav li till position: relative, annars skulle undermenyn hamna högst upp i vänster hörn.

Bakgrunds färgen är bara att den ska synas.

Ta fram undersidorna igen

Vi vill att undersidorna ska visas när vi håller musen över länken till huvud sidan, alltså a:hover, men detta skulle göra att under menyn skulle försvinna ifall vi försöker flytta ner musen till undermenyn. Så istället använder vi oss av li:hover, då vi har en <li>-tag som sträcker sig runt hela undermenyn. Koden blir alltså:

1
2
3

#nav li:hover > ul{
	display: block;
}

Genom att sätta display till block får vi dem dessutom på en vågrät linje under varandra. Vill vi att undermenyerna också ska vara på en horisontell linje kan vi sätta display till inline.

Eftersom alla li, enligt tidigare definition är satta som inline och vi här vill ha dem som block, kan det vara bra att definiera det här också:

1
2
3

#nav li ul li{
	display: block;
}

Snygga till

Om vi är på en under-under-sida (Pappa > Son > Barnbarn) och vill att alla tidigare sidor, plus den vi är på (Barnbarn, Son och Pappa) ska bli färgade på ett speciellt sätt så kan vi använda oss av vissa klasser som automatiskt kommer att skapas. Den aktiva sidan (Barnbarn) kommer att få klassen current_page_item sidan ovanför den (Son) kommer att få klassen current_page_parent och alla sidor ovan för denna (Pappa, och Farfar och…) kommer att få klassen current_page_ancestor. Vi kan deklarera dessa separat eller gemensamt enligt:

1
2
3
4
5

#nav li.current_page_ancestor > a,
#nav li.current_page_parent > a,
#nav li.current_page_item > a{
	color: #FFFFFF;
}

Koden ovan gör så att länken direkt efter ett list item som har någon av dessa klasser kommer att få en vit text.

Under-under-sidor

Om du har sidor som är barn till en undersida så kommer du att få problem med våran kod. Det mest klassiska är att dessa menyer ska dyka upp bredvid menyn till höger om denna. Vi kan då skriva in följande:

1
2
3
4
5

#nav ul ul ul{
	position: absolute;
	left: 100%;
	top: 0;
}

Vilket kommer att flytta alla under-undersidor en meny till höger.

Vill du att menyerna ska ligga lite omlott kan du tex skriva:

1
2
3
4
5

#nav ul ul ul{
	position: absolute;
	left: 98%;
	top: 10px;
}

Hover effekter

Det sista vi kan snygga till är så att vi får ändra färger på menyvalen när vi håller musen på dem. Det ordnar vi enklast så här:

1
2
3
4

#nav li a:hover{
	color: #FFFFFF;
	background: #999999;
}

Detta kommer att göra så att när du håller musen på ett menyalternativ kommer det alternativet att bli vitt och få en bakgrundsfärg som är #999999;

Vill du göra det lite mer avancerat, så att det blir likt bilden högst upp, där det inte någon bakgrund på top-länken, men på undersidorna, och färgen dessutom stannar kvar när man kommer vidare till en undersida kan du använda följande kod:

1
2
3
4
5
6

#nav li ul li:hover > a{
	background: #999;
}
#nav li:hover > a{
	color: #FFFFFF;
}

Avslutning

Det ska nog vara allt som krävs, självklart man man leka mer om man vill, testa att sätta en border på #nav li ul och se vad som händer. Ändra på top och left och se hur det förändrar ditt utseende, skriv menyvalen i andra storlekar, bold och med andra färger och ändra detta när du håller musen över för att få en annan effekt. Sätt en bakgrund med en gradient färg för att skapa en webb 2.0 känsla över menyn.

Skriv en kommentar och visa din meny eller fråga om det är någonting som inte fungerar.

Här följer en exempel fil med css koden som används i exemplet.

Överkurs, undermenys inikator

Om man vill sätta dit en liten pil på undersidorna som indikerar att det finns fler undermenyer så finns det ett ganska snyggt sätt att göra det på, men tyvärr syns det inte i IE.

Eftersom WordPress inte sätter dit några klasser som visar på att det finns under menyer, och jag i den här guiden inte vill göra några avancerade javascript eller php-funktioner för att lägga till det, så kan vi använda oss av en css kod för att lösa problemet.

Vi utnyttjar :not() och :last-child, som fungerar utmärkt i Firefox, Opera och Crome, men tyvärr inte i någon version av IE. Koden ser ut så här:

1
2
3

#nav li li a:not(:last-child){
	background: url(./images/arrowInd.png) no-repeat 100% 50%;
}

Det koden säger är att li li a, en länk i en lista i en lista (alltså en länk i en undermeny) som inte är det sista barnet i det listobjektet, ska ha en bakgrund.

Om vi tittar på våran förenklade modell av menyn från tidigare:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div id="nav">
    <ul>
        <li>
            <a href="#">Hem</a>
        </li>
        <li>
            <a href="#">Topp Sida</a> <!-- Länk med undermeny -->
            <ul> <!-- Fler barn i <li> -->
                <li>
                    <a href="#">Undersida 1</a>
                </li>
                <li>
                    <a href="#">Undersida 2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Sida utan undersidor</li> <!-- Länk utan undermeny. Ända barnet -->
        </li>
    </ul>
</div>

Som ni kan se har länkar med undermenyer fler element under sig, och blir då alltså ”inte sista barnet” och uppfyller kraven från innan.

På detta länkar vill vi sätta en bakgrund som ser ut som en pil, som vi sedan placerar längst ut till höger (Häger 100% och vertikalt i mitten 50%).

I exemplet krävs också att du har en bild som heter arrowInd.png som ligger i mappen Images

I föregående inlägg om 960 gs gick jag igenom grunderna tillräckligt för att kunna programmera en hemsida som ser ut som följer:

Låt oss anta att vi vill skapa samma hemsida, men den här gången som ett WordPress templet. Vi kommer att vilja ha den översta gröna titeln i header.php, den undre gröna i footer.php. I det orangea i mitten vill vi att våra blogginlägg ska synas, alltså index.php. Slutligen får de blå spalterna för enkelhetens skull slås samman till en sidopanel, sidebar.php .

Låt oss börja

Skapa en mapp som heter tema960gs, detta kommer att vara din templet mapp där du placerar alla filer som har med ditt theme att göra.

I din nyligen skapade mapp placerar du filen 960.css, och rekommenderat även en reset.css och text.css. Alla dessa filer hittar du om du laddar ner filerna från 960 Grids Systems hemsida.

I samma mapp skapar du också en ny fil som du döper till style.css. Detta kommer att vara där du placerar all din riktiga designkod. Denna fil är också obligatorisk för att WordPress ska kunna hitta ditt tema.

I style.css skriver du följande rader:

1
2
3
4
5
6
7
8
9
10
11
12

/*   
Theme Name: WpGuru 960
Theme URI: http://www.wordpressguru.se/bygg-ett-wordpress-tema-med-960-grid-system/
Description: A shell theme with 960 Grid System
Author: Kristoffer Emanuelsson
Author URI: http://www.wordpressguru.se/
Tags: 960, grid system, framework
Version: 1.0--frivilligt
.
All övrig information om ditt tema, licenser, behov av vissa plugins, eller hur man använder vissa funktioner
.
*/

Byt ut svaren till saker som passar in på ditt eget tema. Theme Name är det viktigaste, då detta är det namn ditt tema får i temavalsmenyn i WordPress administrationspanel.

Header.php

Skapa en ny fil som du döper till header.php (eller kopiera en från ett annat tema, default tex). Öppna den och skriv följande:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
        <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/reset.css" type="text/css" /> <!-- Återställer css attribut -->
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/text.css" type="text/css" /> <!-- Sätter tillbaka en del gemensamma css attribut -->
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/960.css" type="text/css" /> <!-- Lägger till 960 Grid System -->
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> <!-- Din egen style.css -->
 
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <!-- Tillåt pingar -->
 
        <?php wp_head(); ?> <!-- Gör så att plugins och WordPress kan placera saker i headern -->
    </head>

Det viktigaste och den största skillnaden i koden ovan från vanliga teman är raden

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/960.css" type="text/css" /> <!-- Lägger till 960 Grid System -->

som talar om att vi ska lägga till alla klasser vi behöver för att kunna använda oss av 960 Grid System. ‘stylesheet_directory’ är samma sak som din templet mapp, alltså mappen tema960gs där du tidigare just placerade filen 960.css.

Efter detta vill vi börja starta <body>-taggen och börja våran hemsida, så fortsätt med

1
2
3
4
5
6

    </head>
    <body <?php body_class(); ?>>
        <div id="wrapper" class="container_12"> <!-- Definiera conteinern som talar om ifall vi använder oss av 12 eller 16 kolumner -->
            <div id="header" class="grid_12"> <!-- Vår header ska sträcka sig över alla 12 kolumner -->
                <h1>Ett WordPress tema som använder 960 GS</h1>
            </div>

Nu har vi startat bodyn med en container och en titel, det får räcka för header.php. Spara.

Index.php

Skapa filen index.php och placera även den i mappen tema960gs där du har alla andra filer som hör till ditt tema. Skriv följande

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php get_header(); ?> <!-- Inkludera header.php -->
 
<div id="main" class="grid_8"> 
    <!-- Main... Här kommer the_loop(); det är här vi ska få upp våra inlägg   -->
    <div id="tom1" class="grid_1 alpha"> <!-- Första barnet med klassen alpha och ett mellanrum i sig -->
    &nbsp;
    </div>
    <div id="child1" class="grid_2"> <!-- Första riktiga barnet som vi har text i -->
        <p>En "puff" med lite text i</p>
    </div>
    <div id="child2" class="grid_2">
        <p>En mitten "puff" med lite mer information</p>
    </div>
    <div id="child3" class="grid_2"> <!-- Sista synliga barnet -->
        <p>En tredje och sista puff</p>
    </div>
    <div id="tom2" class="grid_1 omega"> <!-- Sista barnet med klassen omega, dessa vill vi inte ska synas -->
    &nbsp;
    </div>
</div> <!-- Avsluta main -->
 
<div id="sidebar" class="grid_4"> <!-- Sidebaren måste vara 4 kolumner stor eftersom main tar upp 8 -->
    <?php get_sidebar(); ?> <!-- Inkludera sidebar.php -->
</div>
 
<?php get_footer(); ?> <!-- Inkludera footer.php -->

Efter att ha inkluderat header.php med standard funktionen delar vi upp våra 12 kolumner till två spalter, main med 8 kolumner och sidebaren med de resternade 4.

I main kan du koda precis som vanligt, och genom att placera the_loop() här kommer våra blogginlägg att synas på den här ytan.

Jag lät barnen från den tidigare guiden få vara kvar, men eftersom de tar upp 2 kolumner var, och vi har 8 stycken som vi måste utnyttja är vi tvungen att göra några små förändringar, antingen utöka bredden på en eller fler av dem, lägga till fler barn, eller placera tomhet före och efter det första och sista barnet. Det sistnämnda gör man genom att lägga till klasserna prefix_x eller suffix_x för x antal kolumner tomma före respektive efter barnet i fråga. Problemet med detta är att padding används, vilket gör att bakgrunden på barnet kommer att sträcka sig ut över den ytan. Så istället valde jag att placera två barn, ett på vardera sida om de tre barnen, som använder sig av en kolumn var, och sedan endast fylla dessa med ett mellanslag &nbsp;.

Sidebar.php

Skapa en fil som du döper till sidebar.php och fyll den precis som vanligt med sidopanels kod.

Eftersom vi bestämde dess bredd i divarna i index.php är det ingenting annorlunda i den här filen:

1
2
3
4
5
6
7
8
9
10

<div id="sidebar" role="complementary">
    <ul>
    <?php  /* Widgetized sidebar, if you have the plugin installed. */
	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
            <li>
		<?php get_search_form(); ?>
	    </li>
        <?php endif; ?>
    </ul>
</div>

Eller vad du nu kan hitta på.

Glöm inte att tillåta en sidebar genom att skapa filen functions.php och skriva följande

<?php register_sidebar(); ?>

Footer.php

Avsluta hela din kod genom att skapa filen footer.php och fylla den med följande:

1
2
3
4
5
6
7

        <div id="footer" class="grid_12"> <!-- En Footer som sträcker sig över alla 12 kolumner -->
            <p>Skapad av WordPressGuru.se</p>
        </div>
    </div> <!-- Avsluta containern från header.php -->
<?php wp_footer(); ?> <!-- Tillåt plugins och WordPress att lägga till saker i footern -->
</body>
</html>

I footern skapar du en ruta som sträcker sig över alla 12 kolumner och efter att ha avslutat den så får du inte glömma att du också måste avsluta containern som du startade i header.php.

Innan allt är över inkludera wp_footer() och avsluta sedan både bodyn och hela html-koden. Allt klart.

Avslutaning och testkörning

Styla som du vill i style.css och lägg till massa häftiga funktioner och text som vanligt.

När du är färdig laddar du upp hela mappen tema960gs med innehåll till /wp-content/themes/. Gå nu till administrationspanelen (/wp-admin/) på din WordPress blogg och navigera dig vidare till Utseende > Teman. Där kommer du att hitta en tema med namnet som du gav i style.css. I mitt fall ”WpGuru 960″. Temat kommer inte ha någon bild, eftersom du inte har någon screenshot.png i din templet mapp. Men aktivera ditt nya tema ändå och poff, så har du precis gjort ditt första egna tema i 960 Grid System.

Ladda ner alla filerna och testa själv, lek och ändra allt hur mycket du vill:

Alla skärmar i dagsläget stödjer minst 1024*768 px, så ifall man bygger en hemsida bör man bygga den med dessa mått i åtanke.

Eftersom det sedan finns många standardmått på hur breda olika rutor bör vara har 960 Grid System skapats för att underlätta ditt programmerande då du ändå gör om samma sak om och om igen. Med hjälp av 960 GS kan du snabbt och enkelt skapa komplicerade magasin liknande hemsidor utan att oroa dig för hur du ska sätta ”float” på dina element för att få dem på rätt plats.

960 GS är ett css framework som bygger på att du har en hemsida med bredden 960 px. Den skapar sedan 12 eller 16 kolumner åt dig med 10 px marginal på vardera sida (alltså 20 px mellan varje kolumn) vilket resulterar i att varje kolumn får en bredd på 60 px respektive 40 px. När du sedan skapar ett element behöver du bara tala om hur många av dessa kolumner du vill att elementet ska innehålla. Ta en titt på demo sidan för att få ett bättre grepp om saken, och fortsätt att referera till denna sida till en början.

Okej jag vet att det låter krångligt, men låt oss göra lite exempel så ska vi se att det är ganska lätt.

Setup:

Det första vi måste göra att att gå in på 960 GS hemsida och ladda ner deras Framework. När det är gjort behöver du ladda upp filerna till din hemsida. Men det är inte så många av filerna vi behöver;
sketch_sheets innehåller en pdf som man kan skriva ut och kladda på. (behöver vi inte)
licenses och readme filen kan vi också kasta efter att ha läst dem.
Templates är bra att ha då den innehåller startsidor för olika bildbehandlingsprogram så att du kan designa din hemsida med hjälplinjer redan utritade.
Code är den mapp vi verkligen vill ha och specifikt det som finns i css mappen. Du kan antingen ladda upp de tre css filerna som ligger där, eller ta de okomprimerade ifall du inte bryr dig om storleken.

Jag placerade css filerna i en mapp jag döpte till 960 och placerade denna på samma plats där jag har min index fil.

I index filen måste vi sedan referera till filerna vi precis laddade upp, så mellan head taggarna skriver vi:

1
2
3

<link rel="stylesheet" href="/960/reset.css" type="text/css" />
<link rel="stylesheet" href="/960/text.css" type="text/css" />
<link rel="stylesheet" href="/960/960.css" type="text/css" />

Reset.css inehåller kod för att ta bort så mycket förinställda värden som möjligt i css koden. Om du har din egen reset fil kan du strunta i denna. Text.css är en fil för att återge lite värden till olika element och skapa en standard på hemsidan. Har du din egen text fil kan du strunta i denna också.
960.css är den filen där all magi skapas. Det är där alla definitioner på bredden på de olika klasserna är.

Så nu när vi har refererat till css filerna är det bara att börja.

The Magic:

Låt oss säga att vi vill ha en hemsida med en huvudkolumn högst upp, en ”header”. Sedan vill vi ha tre kolumner. En stor och två mindre. Och under alltsammans vill vi återigen ha en stor kolumn, en footer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<body>
    <div class="container_12"> <!-- Det första vi måste göra är att definiera en conteiner som talar om ifall vi använder oss av 12 eller 16 kolumner -->
        <div id="header" class="grid_12"> <!-- Vår header ska sträcka sig över alla 12 kolumner -->
            <h1>En hemsida som använder 960 GS</h1>
        </div>
        <div id="main" class="grid_6"> <!-- Main elementet i mitten skall inehålla 6 av de 12 kolumnerna -->
            <p>Här kommer massa text som skall finnas i mitten</p>
        </div>
        <div id="sidebar1" class="grid_3"> <!-- Nästa element på samma rad använder de tre nästa kolumnerna -->
            <p>Första sidebaren</p>
        </div>
        <div id="sidebar2" class="grid_3"> <!-- Det sista elementet använder sig av de sista tre kolumnerna (6+3+3 = 12) -->
            <p>En sidebar till höger</p>
        </div>
        <div id="footer" class="grid_12"> <!-- Footern ska sträcka sig över alla 12 kolumner -->
            <p>Skapad av BeforeYouDie.se</p>
        </div>
    </div> <!-- Avsluta conteinern -->
</body>

Ok allt är färdigt. Vi behöver inte göra någonting mer än så. Genom att specificera de där klasserna så har 960.css gjort allting åt oss.

Låt oss säga att vi vill ha ytterligare 3 element inuti ”main” som vardera ska ta upp 2 kolumner (main använder 6 kolumner, så barnen måste ha en summa av 6, 2+2+2 = 6). Då är det lika enkelt gjort som det vi precis gjorde. Det ända vi behöver komma ihåg är att ifall vi har element inuti ett annat element måste det första element ha klassen ”alpha” och det sista elementet ha klassen ”omega”.

1
2
3
4
5
6
7
8
9
10
11

<div id="main" class="grid_6"> <!-- Main från tidigare  -->
    <div id="child1" class="grid_2 alpha"> <!-- Första barnet med klassen alpha -->
        <p>Det första barnet</p>
    </div>
    <div id="child2" class="grid_2"> <!-- Mellan bocken bruse -->
        <p>Barn nummer två</p>
    </div>
    <div id="child3" class="grid_2 omega"> <!-- Sista barnet med klassen omega -->
        <p>Och det sista barnet</p>
    </div>
</div> <!-- Avsluta main -->

Avslutning:

Då var allting klart. Så enklast kan man sätta upp en komplicerad hemsida med 960 Grid System. Jag byggde ihopp hemsida precis som ovan och placerade den här. Jag la in lite genererad text från lipsum.com för att få lite mer i den. Och satte lite bakgrunds färger så att man enkelt ska kunna se elementen.

Glöm inte bort att läsa källkoden till demo sidan när ni bygger för att komma ihåg hur man skriver. All lycka.