WordPress – koden bakom
En artikel av Wordpressgurun, som du hittar på www.wordpressguru.se Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och ge dig möjligheten att kunna modifiera ditt tema.
Strukturen på en hemsida Okej, vi börjar med att förklara konceptet ”webbsida”. Moderna webbsidor och framförallt stora ramverk som WordPress och Joomla, 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, 1 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 Lisa Svensson Kontakt: info@isokrates.se
©isokrates.se
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> Lisa Svensson Kontakt: info@isokrates.se
©isokrates.se
</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.
Lisa Svensson Kontakt: info@isokrates.se
©isokrates.se
Databas Databasen tar hand om all information om bilen, 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. RegBil nummer modell Ägare
Adress
Internetvägen WordPressGuru 123, Storstad
123abc
wp70
456def
Internetvägen guru40 WordPressGuru 123, Storstad
I tabellen finns det nu två bilar registrerade, båda är bundna till WordPressGuru, men så länge den
Lisa Svensson Kontakt: info@isokrates.se
©isokrates.se
primära nyckeln är olika så kan man ändå hitta en specifik bil.
Php1 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 <?php 2 if( $vrida == true 3 && $motorn != 4 'igång' ) 5 { 6 startaMotorn(); 7 } 8 else 9 { 10 stängAvMotorn(); } ?> 1
PHP är en förkortning av "PHP Hypertext Preprocessor" där själva förkortningen ingår som första ord i förkortningen vilket kallas för återkommande akronym (recursive acronyme). Namnet "Hypertext Preprocessor" antyder också vad PHP gör förbehandlar kod som sedan visas som hypertext i webbläsaren. PHP är ett scriptspråk som skrivs direkt i HTML-koden där instruktionerna utförs av webbservern och inte i webbläsaren. Om du väljer att visa källkoden i webbläsaren så ser du inte PHP-koden då den redan är interpreterad till HTML av webbservern innan den skickas till webbläsaren (klienten). PHP har likheter med CGI-script (Perl) men då CGI-script körs som egen fil så infogas PHP direkt i HTML-koden. PHP används för att skapa dynamiska och interaktiva sidor som e-butiker, forum, gästböcker, communities, formulär, inloggningssystem mm. PHP kan alltså användas tillsammans med databaser där information kan hämtas och sparas. Du har även stor användning av PHP i dina "vanliga" HTML-dokument. Ett exempel är menyer som återanvänds på flera sidor i din webbplats - genom att infoga samma menysida i alla dokument med PHP-kod så kan du ändra menyn i ett enda dokument och menyn på alla sidor uppdateras - du har då dynamiska sidor med hjälp av PHP. Du kan alltså inte använda endast PHP för att bygga dina webbplatser utan som ett komplement till HTML.
Lisa Svensson Kontakt: info@isokrates.se
©isokrates.se
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 att 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. Lisa Svensson Kontakt: info@isokrates.se
©isokrates.se
• • •
•
•
• • • •
•
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> Lisa Svensson Kontakt: info@isokrates.se
©isokrates.se
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: Lisa Svensson Kontakt: info@isokrates.se
©isokrates.se
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år 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 Lisa Svensson Kontakt: info@isokrates.se
©isokrates.se
(style.css) så hittar du precis dessa definitioner, och vilka element de modifierar. 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.
Nyfiken på kodningen bakom? 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. 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å.
Lisa Svensson Kontakt: info@isokrates.se
©isokrates.se