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.

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

Registrera funktionaliteten i ditt tema

Relativt nytt för WordPress är att man måste aktivera nya funktioner i sin functions.php fil. Detta är som tur är väldigt lätt, och liknar i det här fallet en registrering av widgets. Funktionen vi ska använda heter register_nav_menus() och som parameter tar den en lista med nyckel och namn till de menyer du vill ska existera i ditt tema.

I den här guiden visar ju hur man gör två menyer, en topp meny, som vi vill kunna använda en drop down funktion på, och en meny att ha i sidfoten som ska kunna innehålla en drös med alla möjliga länkar till hela sidan. Så vi börjar med att registrera dessa två menyer genom att klistra in följande kod i functions.php:

1
2
3
4
5
6
7
8

/**
 * Två menyer, med nyckelnamnen 'main' och 'footer',
 * och visningsnamnen 'Huvudmeny' och 'Sidfotsmeny'
 **/
register_nav_menus( array(
        'main' => 'Huvudmeny',
        'footer' => 'Sidfotsmeny',
) );

Write it, cut it, paste it, save it, load it, check it, quick – rewrite it

Gå in i administraionpanelen och kika in under Utseende. Poff, så har det dykt upp ett nytt menyval där som heter Menyer. Grymt, navigera dig dit!

Du kommer nu att hitta en helt ny panel med en massa roligt att mixtra runt med, men först måste du skapa din första meny, som kommer att tjäna som en kanvas att placera länkarna på. Mitt på sidan skriver du in ett valfritt namn, och klickar sidan på Skapa Meny.

Fantastiskt! Du har nu lyckats skapa din första meny, men den innehåller inte några länkar än, och den visas ingenstans, så det måste vi genast göra någonting åt.

På vänster sida hittar du Temaposition. Där hittar du även de namn vi skrev in i functions.php i föregående stycke. Börja med att placera rätt meny, under rätt tema position, min meny som jag döpte till ”Huvudmeny” vill jag ska vara på temapositionen ”Huvudmeny” och så vidare. Glöm inte att spara!

Fortsätt sedan med att kryssa i lite sidor och kategorier, och varför inte hitta på några anpassade (egna) länkar också när du ändå håller på? Klicka sedan på Lägg till i meny för att se dina val dyka upp på menyytan i mitten av sidan.

Sist har du också möjligheten att gruppera dina menyval i annorlunda ordning, sätta ett nytt parent->child förhållande eller ta bort och redigera menyerna. Allt detta sker i mitten av skärmen med hjälp av DragOchSläpp teknik. Det kan vara lite trixigt att få menyvalen att hamna på rätt nivå ibland, men efter några försök brukar det alltid fungera.

På Huvudmenyn, försök skapa lite menyer i flera nivåer, så att vi kan gömma dessa för att sedan ta fram som en drop down meny. På Sidfotsmenyn skapa bara länkar i en nivå, då vi ändå kommer att begränsa visningen till toppnivån.

Placera dina menyer i temat

Okej, du har nu aktiverat funktionen wp_nav_menu, du har skapat dina menyer och positionerat dem på rätt ställe på administrations sidan, men de dyker fortfarande inte upp någonstans, och du ser dem fortfarande inte. Det är för att du inte har sagt till i ditt tema var någonstans dessa menyer ska skrivas ut.

Öppna därför filen header.php och leta upp en plats högt upp på sidan där du tycker att din meny ska få existera, förslagsvis strax nedanför loggan till din hemsida. Där klistrar du sedan in följande rader:

1
2
3

<?php
    wp_nav_menu( array( 'theme_location' => 'main' ) );
?>

Och det är allt som behövs. Theme_location talar om vilken meny som ska skrivas ut, och i det här fallet vill du ha huvudmenyn som vi döpte till main så tidigt som i det första stycket av den här guiden i functions.php

Öppna sedan footer.php, leta upp ett snyggt ställe att placera din sidfotsmeny på, förslagsvis precis innan en </div>-tag, och klistra in följande:

1
2
3
4

<?php
    wp_nav_menu( array( 'theme_location' => 'footer',
                        'depth'          => '1' ) );
?>

Det som är intressant här är att vi har lagt till depth och satt det till värdet 1, vilket gör att vi bara visar toppnivå länkar på den här menyn. Theme_location sätter vi till footer då detta var namnet angivet i functions.php.

And thats it folks, om du uppdaterar din sida så har du dina menyer som du precis har skapat placerade på dem ställen du placerade dem på. Nu gäller det bara att snygga till dem lite. För en guide på hur man skapar Drop Down menyer av huvudmenyn läs min guide: Bygg en Drop Down meny för sidor i WordPress men byt ut menyn som beskrivs där till den som du har här.

Godtagbara parametrar till wp_nav_menu()

Du har sett att man kan ändra temapositionen och nivådjupet på menyerna som ska visas med några enkla parametrar. Vad mer kan man ändra frågar ni? Jag har listan:

menu
Om du vill specificera en exakt meny, vid namn, som ska dyka upp, så kan du göra det med menu, parametern accepterar id, slug eller namn.

container
Elementet som ringar in hela menyn är som standard en div, det kan du ändra med den här parametern.
Default: div

container_class
Elementet som ringar in hela menyn kan få en klass som du kan specificera här.
Default: menu-{menu slug}-container

container_id
Samma som ovan, men id:t i det här fallet. Och inget standard värde.

menu_class
Ul elementet som är själva menyn har vanligt vis klassen menu, men du kan ändra det här.
Default: menu

menu_id
Samma som ovan men id:t. Standard är menyns slug med en ökande siffra efter.
Default: menu slug, incremented

echo
Huruvida menyn ska skrivas ut direkt eller returneras till en variabel att leka friskt med.
Default: true

fallback_cb
Om menyn du specificerar, eller meny positionen du har angett inte har en meny skapad åt sig, så kan du här specificera en funktion som ska kallas istället. Perfekt om du gör temat åt kunder eller för nedladdning. Eller för bakåtkompatibilitet för den delen. Som standard använder listar den alla sidor.
Default: wp_page_menu

before
Skriver ut en text före varje länktext (i länken)

after
Skriver ut en text efter varje länktext (i länken)

link_before
Skriver ut en text före varje länk (innan <a>)

link_after
Skriver ut en text efter varje länk (efter </a>)

depth
Talar om hur måna nivåer som ska få visas maximalt. 2 betyder alltså första och andra nivån, 0 betyder alla nivåer
Default: 0

walker
Avancerat! Detta är till för att göra en egen vandringsfunktion som ska användas när menyn ska skrivas ut.

theme_location
Placeringen i temat som ska användas. Namnet på positionen måste överensstämma med namnet som användes i register_nav_menu() för att användaren ska kunna välja positionen i adminpanelen.

Styla dina menyer

När menyn sedan skrivs ut loopas dina meny val genom och skrivs ut på följande sätt, så att du kan styla dem i style.css på rätt sätt:

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

<div class="menu">
    <ul id="menu-main-menu" class="menu">
        <li id="menu-item-1" class="menu-item menu-item-type-post_type">
            <a href="http://www.wordpressguru.se/om/">About</a>
            <ul class="sub-menu">
	        <li id="menu-item-2" class="menu-item menu-item-type-post_type">
                    <a href="http://www.wordpressguru.se/om/och_om_igen/">Om igen</a>
	        </li>
	        <li id="menu-item-3" class="menu-item menu-item-type-post_type">
	            <a href="http://www.wordpressguru.se/om/lank/">Länk igen</a>
	        </li>
            </ul>
        </li>
        <li id="menu-item-4" class="menu-item menu-item-type-post_type">
            <a href="http://www.wordpressguru.se/fraga_gurun">Fråga Gurun</a>
        </li>
    </ul>
</div>

Avslutning

Det var allt för den här gången. Nu borde ni kunna skapa riktigt snygga navigationsmenyer för, och uppdatera alla era gamla. Den här funktionen går nästan inte att misslyckas med, men om ni ändå skulle få problem, lämna en kommentar, så ska jag göra mitt bästa för att hjälpa er.

Glöm inte heller bort att det krävs minst version 3.0 av WordPress för att kunna använda detta, så har du inte uppdaterat än, gör det nu!

Egna användardefinierade menyer

Den största och mest välkomnade förändringen i den nya versionen är de användardefinierade menyerna. Hittills när man har byggt teman åt en kund, har man kunnat låta användaren förändra och redigera allt från adminpanelen, allt utom menyerna där användaren har varit tvungen att gå in i koden för att inkludera eller exkludera specifika sidor genom id-nummer. Nu är den tiden äntligen över. WordPress navigations menyer aktiveras på ett tema med en enkel kodrad i functions.php och går sedan att hitta bland panelerna. En meny blir sedan en kanvas som användaren kan fylla med precis de länkar användaren önskar, genom DragOchSläpp-teknik precis som Widgets en tid fungerat. Nu akn användaren inkludera precis efter tycke, oavsett om det så är till sidor, kategorier, enskilda inlägg eller externa hemsidor som en Flickr sida eller en gästbok. I nya standardtemat TwentyTen kan man dessutom se hur man kan utnyttja den nya funktionaliteten till att skapa drop down menyer till din WordPress sida.

Det nya standardtemat TwentyTen

När vi ändå är inne på ämnet så har äntligen theamet kubrik gjort sitt i rampljuset som WordPress standardtema, och byts nu ut mot det nya TwentyTen (TjugoTio), som är ett ljust och användarvänlig templet som utnyttjar alla nya funktioner i WordPress. Den väl kommenderade koden kan dessutom ligga som en bra grund för framtida referenser när du ska bygga och modifiera dina egna teman.

Anledningen till att det har tagit så lång tid för WordPress att skapa sig ett nytt standardtema har framför allt varit att ju längre man väntar, ju bättre måste det sedan bli när det väl kommer. Till slut blir förväntningarna och pressen på det nya temat så pass stora att det blir omöjliga att uppfylla. Så blev det här, men efter att slopa alla dessa idéer och bestämma sig för att bara skapa ett tema som är flexibelt så vart det mycket lättare att tillfredsställa. Genom namnet TwentyTen är också förhoppningen att temat ska kännas inaktuellt redan efter att år, och då automatiskt vilja bli ersatt mot ett nytt tema hela tiden, TwentyEleven (TjugoElva).

Egna inläggs typer

Vidare bland nyheter kan vi se egna inläggs typer (custom post types). Detta gör att du äntligen kan slopa de egna fältet (customer fields) ifall du vill konfigurera dina inlägg på olika sätt. Nu har du möjligheten att i förväg ställa in vilka rutor en användare ska kunna fylla i, så om du har en sida för en festival till exempel, kan du låta artister ha sina egna inläggstyper med fält som ”bandnamn” och ”medlemmar” medan en annan inläggstyp skulle kunna existera för konserter där ett fält kan finnas för startdatum och tid.

Välj användarnamn under installtion

Fortsättningsvis när man skapar en ny blogg kan du redan här välja användarnamnet på din första användare, vilket täpper till ett stort säkerhetshål som existerat i de tidigare versionerna av WordPress där man nästan garanterat har vetat att alla bloggar har haft en användare som heter ”admin” vilken har administrativa rättigheter.

WordPress och WordPress MultiUser sammanslagning

En annan stor förändring i bakgrunden som inte syns så mycket på ytan är sammanslagningen mellan WordPress och systerprojektet WordPress Mu (Multi User), vilket gör det möjligt för oss att ha en blogg eller en miljon bloggar på en och samma installation. I nuläget syns det inte mycket skillnad för oss dödliga, oavsett om man använder sig av Mu eller inte, och det krävs en manuellt inskriven kodrad i wp-config.php för att aktivera möjligheten till multianvändning. Och även om gränssnittet från WordPress inte riktigt hunnit bli portat till alla sidor hos mutisite avdelningarna så är sammanslagningen mellan de båda ett stort steg för Mu, vilket gör det mycket lättare till bättre integrering i framtida versioner.

Mycket smått och gått

Vad mer? Bland de mindre uppdateringarna ser vi att administrationspanelen har fått sig ett grafiskt ansiktslyft och blivit ljusare. Detta för att ge mer uppmärksamhet åt det viktiga, dina inlägg.

Inläggs miniatyrer har gjorts om en aningen, vilket ska underlätta användandet och möjligheten till andra användningsområden för bilderna, mer än som miniatyrer i inläggslistningen som att till exempel skapa möjlighet till inläggsspecifika bildhuvuden på varje enskilt inlägg eller sida.

I samma spår går även den nya möjligheten till att låta användaren av ditt tema ändra bakgrunden på temat från administrations panelen.

Allt detta och mycket mer hittar vi i WordPress 3.0, och med det nya TwentyTen temat hittar vi dessutom väl dokumenterad och kommenderad kod på alla funktioner för att kunna lära oss av, låna, modifiera och experimentera med. För att hitta hela listan på vad som har uppdaterats rekommenderar jag codex sidan om just WordPress version 3.0.

Nu väntar 3.1 som planeras komma ut om ungefär tre månader, som kommer att vara en uppdatering som enbart ska koncentrera sig på plugins, hemsidan och api:et. Vi har kommit in i ett nytt kapitel i sagan om WordPress. Det går bra för det öppna projektet och de har fortfarande vinden med sig. Oavsett ifall du hoppar på nu eller om du är en veteran, så har du helt klart gjort rätt val.

Har du inte fått nog än? Ta då en titt på Matt Mullenweg när han pratar en timme om WordPress i filmen State of the Word 2010.

Gilla Knapp från Facebook Developers

Svaret finner man hos Facebook Developers, och mer exakt på deras sida om sociala tillägg. Där kan du generera den gilla knapp du föredrar, men bredd, typ, visning av miniatyrer med mera. Efter att sedan klicka på knappen ”Get Code” får du upp en ruta med text som du ska lägga in på din hemsida.

Med standardvärdena skapas en kod likt den nedan:

1
2
3
4
5
6

<iframe 
    src="http://www.facebook.com/plugins/like.php?href=http%253A%252F%252Fexample.com%252Fpage%252Fto%252Flike" 
    scrolling="no" 
    frameborder="0" 
    style="border:none; overflow:hidden; width:450px;" allowTransparency="true">
</iframe>

Det viktiga här är texten som står mellan citationstecknen efter src så detta ska vara permalänken till hemsidan du vill att Gilla-knappen ska associeras till. Vill du att det ska vara till din startsida skriver du enkelt ”http://wordpressguru.se/” (som det skulle bli i mitt fall). Men ofta vill du likt jag, ha en gilla knapp på varje blogginlägg som alltid riktas till det inlägg den visas på.

Permalänkar i WordPress

Genom att använda kodsnutten

1

<?php echo get_permalink(); ?>

kan vi se till att vi alltid har rätt länk till vår gillaknapp. Facebook tycker dock inte om kolon (:), snedstreck (/) och andra märkliga tecken, så vi måste också använda oss av en php funktion som konverterar alla sådana tecken till oläslig text likt %253A för ett kolon.

1

<?php echo urlencode( get_permalink() ); ?>

Hela koden som ska sättas in på din WordPress-blogg kommer alltså att se ut så här:

1
2
3
4
5
6

<iframe 
    src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode( get_permalink() ); ?>" 
    scrolling="no" 
    frameborder="0" 
    style="border:none; overflow:hidden; width:450px;" allowTransparency="true">
</iframe>

Sätta in den i WordPress

Så vart placerar du nu denna kodrad? Och hur?

Om du bloggar genom bloggnätverket WordPress.com kan du inte lägga till plugins hur du vill och inte heller redigera dina teman hur du vill och blir därför relativt begränsad att sätta dit en gilla knapp. Om du däremot äger en egen WordPress blogg genom att ha laddad ner och installerat hela programmet från WordPress.org, då är det lättast att gå in på Inställningar > Redigera och klicka på förslagsvis sidan single.php (som du hittar på höger hand på sidan).
Leta upp en bra plats i denna kod, tex direkt före en </div>, klistra in koden, spara och se hur det ser ut. Om det inte kändes rätt, så är det bara att försöka igen.

Bredden på området, gillaknappen får använda, ställer du in där det står ”width:450px”. Den på min sida får lov att använda 110px.

Lycka till!

År 2007 startades siten IconFinder som nu är en av världens populäraste hemsidor för att söka fram och ladda ner bloggikoner. Men en snygg design, enkel navigation och smarta funktioner gör IconFinder ikonsöknandet till en fröjd för utvecklaren och genom att kunna söka på en viss typ av ikon istället för ett set av ikoner, skiljer den ut sig från mängden ikonhemsidor och gör det roligt att hitta dina små bilder.

Om du hittar en ikon du tycker om, kan du självklart titta på hela settet för att hitta liknande ikoner som passar bra ihop.

Genom en användarvänlig meny kan du ställa in bakgrund till ikonerna, vilken storlek du önskar och huruvida du letar efter ikoner som går att använda till kommersiella ändamål eller inte.

De klassiska och populära ikonsamlingarna hittar du självklart också på hemsidan, likt silk2 till exempel. Genom att skriva iconset: före ditt sökord letar du enkelt upp det specifika iconset som du önskar, för just silk2 blir alltså adressen: iconset:silk2.

Som om detta inte var tillräckligt, IconFinder erbjuder dessutom ett eget API för dig att kunna programmera dina egna applikationer och funktioner emot. Kanske visa de senaste ikonpaketen på din egen hemsida?

Har du egna ikoner som du gjort hemma och känner att du också vill finnas med på IconFinder, då kan du enkelt ladda upp dina ikoner på siten och bli tillgänglig i sökmotorn för att nedladdas du med.

Detta är lite av vad IconFinder har att erbjuda, ta en titt själv för att se hur det fungerar. Har du någon annan bra ikonsida att rekommendera? Släng iväg en kommentar och berätta för mig i så fall. Tills WordPressGuru har hittat någonting bättre kommer jag i alla fall att använda IconFinder.

För många kommer det tillfället att bli det första mötet med WordPress 3.0 trots att jag har rabblat på om den nya versionen och betor och alphor nu i snart 2 månader. Ni har minsann inte blivit ombedda av WordPress att uppdatera till någon beta version. Så hur gör man egentligen?

Automatiska uppdateringar

I WordPress finns det en funktion som jämför ditt versionsnummer av WordPress mot den aktuella versionen hos WordPress.org. Ifall ditt versionsnummer är lägre än versionen på deras hemsida, så får du ett meddelande, och blir ombedd att uppdatera. Easy enough.

Samma sak gäller för de instabila versionerna av WordPress, alpha- och beta-versioner. När du är inne i ett instabilt uppdateringsspår så jämförs ditt versionsnummer mot den senaste instabila versionen av WordPress på deras server, och du kan även här bli ombedd att uppdatera till en nyare version av en alpha eller beta testvariant.

WordPress versionsnummer

WordPress versionsnummer består av 3 siffror som delas av med en punk emellan.

Den första siffran betyder stor förändring, det är någonting att verkligen se fram emot. Nya funktioner och ofta också nytt utseende. Detta är ofta också ett steg som avgör gränsen för bakåtkompatibilitet.

Den andra siffran är ett släpp med ny funktionalitet. Inte lika stor som den första siffran, men definitivt någonting nytt.

Den tredje siffran betyder buggfix. Dessa kan komma precis när som helst och ofta tätt efter en större versionsökning. När man släpper en version som bara ökar den tredje siffran får ingen ny funktionalitet tillkomma, utan bara omplåstring av den gamla.

Beta versioner

Om du är inne i ett utvecklingsspår så kommer versionsnumren ha en text efter sig likt:

Att placera sig i ett utvecklingsspår

Det finns ett helt gäng sätt att förflytta sig från den stabila uppdaterings linjen till den instabila utvecklingslinjen.

Ändra versionnummer

Ett relativt enkelt sätt att placera dig i en utvecklingslinje är att öppna filen: /include/version.php från din root katalog och leta upp raden $wp_version = . Som värde skriver du någonting i stil med:

$wp_version = '3.0-dev';

Detta kommer att placera dig i utvecklingsgrenen för version 3.0, ända tills den stabila versionen av 3.0 kommer ut, då du kommer att återgå till den stabila uppdateringslinjen och får på nytt ändra värdet till tex: 3.0.1-test

Ordet dev eller test kan vara precis vad som helst, så länge det är en sträng av någon sort.

Ladda ner och installera

Ett annat alternativ är att ladda ner en beta version och installera från början. På så sätt är WordPress automatiskt redan placerad i rätt utvecklings läge. Här är länken till 3.0-beta 1.

Beta Tester Plugin

Det absolut enklaste och smidigaste sättet är dock att ladda ner pluginet WordPress Beta Tester. Genom att ha detta plugin aktiverat placeras du automatiskt i utvecklingsläget och ser på så sätt till att aldrig missa en uppdatering.

Var inte blyg, se till att inte missa en ända uppdatering, berätta om du hittar fel, hjälp WordPress teamet, lappa ihop de fel ni hittar, dela med er av eran kunskap och tillsammans skapar vi det bästa WordPress vi hittills skådat.

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?

Allt var fortfarande väldigt instabil då och vissa funktioner gick inte ens att få igång. Wp-testers mailing lista har gått varm sedan Alpha versionen kom ut, och nu när Betan kom ut den 3:e april är den riktigt het. Skillnaden mellan Alpha och Beta versionerna är framförallt att de största buggarna ska vara avklarade och man vill ha ännu fler personer till testningen för att också hitta och lösa de mindre felen så att alla användare ska kunna uppdatera till en stabil version när den officiella uppdateringen kommer ut om några veckor.

Efter uppdateringen till Beta versionen är det första man lägger märke till att de tagit bort den mörka #464646 bakgrunden på headern och footern i administrations panelen, och istället bytt ut den mot en ljus gradient kring #E7E7E7.

I övrigt är det inte mycket skillnad utanpå beta versionen av WordPress 3.0. Alla sidor är sig lika Alpha med undantag från små till putsningar och fin poleringar. Den nya funktionen Menyer som skeppas med den här versionen är fortfarande under konstruktion och vi beta testare blir tillsagda att mycket troligtvis kommer att ändas här innan den färdiga versionen kommer ut. Men ändå är det framför allt kring denna funktion det pratas mest om. Och integreringen med WordPress Mu, då detta måste finkammas för att inga problem ska uppstå för de stora närverken där ute.

En annan ny funktion som kommer att bli väldigt spännande till 3.0 är ”Custom Post Type” eller ”valbara inläggstyper”. Men denna funktionalitet kommer du enkelt att kunna lägga till special inläggstyper som inte behöver vara ”blogg inlägg”. Om du har en sida om en musikfestival, skulle du kunna skapa en inläggstyp för ”Artister” där du kan specificera saker som ”Medlemmar” och ”Kommer från”. Du slipper specificera information i ”Egna fält” och ”Kategorier” för att få dina specialinlägg på rätt ställe, vilket också kommer att underlätta en hel del för sidor med fler skribenter, då det helt enkelt blir lättare att be en person publicera någonting specifikt.

Några exempel på tänkte inläggstyper:
- Varor (till en webbshop)
- Podcast
- Video
- Foto
- Nyheter
- Artister
- Puffar

För mer information om hur man gör för att använda funktionen, vänligen håll ut, så ska jag snart skriva ett inlägg dedikerat till detta område. Tills dess håll till godo med artikeln av <? kovshenin.com eller studera inlägget i WordPress Codex om Register_post_type.

Nu väntar jag på Beta 2 och snart det riktiga släppet av WordPress 3.0.

Att dessutom bli sedd av Google är inte heller fy skam då deras arbetsplats har värderats som den mest åtråvärda nu under flera år.

Under GSoC förra året (2009) skapades två projekt för WordPress, det ena är ett Sök API och det andra är en tema generator.

Search API

Sök funktionen i WordPress har länge varit fruktansvärd dålig, och man har med hjälp av små trix och fix i alla fall kunnat få den att bli ”ok”, men du har fortfarande inte haft någon möjlighet till mer avancerade sökningar, som ett visst ord i en viss kategori, eller sök efter en etikett i två olika kategorier, men inte den tredje. Man har inte kunnat använda tilläggs ord som AND, OR eller NOT.

Search API gör allt detta möjligt, och går att anpassa precis efter dina behov. Du kan dessutom använda dig av Google som backend sökmotor för dina sökningar.

Just nu finns Search API som ett plugin till WordPress, men från och med version 3.0 kommer det att ingå som standard för sökningar i WordPress.

Elastic theme generator

Det andra projektet skapade en avancerad temagenerator där du genom ett interface kan välja ett rutnäts storlek och sedan med hjälp av Dra&Släpp metod ”rita” rutor för dina element i temat och med en rullgardinslista tala om ifall du vill att elementet ska vara header, footer eller content bland annat.

Riktigt snabbt och smidigt plugin med enorm kapacitet. Men i skrivandets skull kallas den nuvarande versionen för 0.0.3 och rekommenderas inte att användas för seriösa hemsidor. Men det är ett bevis på vad som kan göras och vilken kapacitet som existerar.

Google Summer of Code 2010

Just nu pågår sökningarna för fullt till årets omgång av GSoC2010. Ansökningarna antas från den 29:e Mars till den 9:e April.

Tidigare år har det mer eller mindre varit obligatoriskt att man skickar in sin anmälan via Wp-hackers mailinglista för att få feedback innan man skickar in den till Google på riktigt. Så har du inte redan anmält dig på den listan, gör det nu.

I din ansökan krävs att du inkluderar ett förslag på ett projekt för WordPress. För inspiration ta en titt på WordPress egen idé bank på deras GSoC sida. Här finns bland annat förslag om Forum, Media, Widgets, Kommentarer och Profiler.

Skriv ditt förslag nu, och sök du med. För mer läsning kolla in Googles egen sida om Google Summer of Code.

Men säg nu att du har fått en känsla över bloggandet, du känner att det här är din grej. Du börjar få regelbundna besökare och det börjar kännas som att du lite har växt ur WordPress.com’s skor. Du vill helt enkelt ha mer, men på samma sätt. Vad gör du då?

Det jag skulle rekommendera är att konvertera din blogg från en WordPress.com blogg, till en WordPress.org blogg. Det är samma gränssnitt, menyerna är dem samma, du kan säkert till och med hitta samma tema som du haft på WordPress.com, eftersom programvaran fortfarande är den samma, men ändå är allting både annorlunda och bättre.

Fördelar med WordPress.org

Den största och viktigaste fördelen med att ha en egen installation av WordPress, genom att ladda ner och installera det själv, är att du har full kontroll över allting. Du bestämmer vilka teman som ska finnas, vilka plugin man ska kunna använda, och du kan ta exakt så mycket utrymme som du har plats med.

Det finns en skog av Plugins där ute som du inte har kunnat komma åt tidigare på grund av att WordPress.com ägarna bestämmer vad du ska få ha, och inte ha.

Du kan redigera allt, framförallt hela ditt tema. Lägga till texter du vill ha, ta bort texter du inte vill ha.

Du kan skapa dina egna teman, och ladda ner andras från hela internet.

Och det är ingen som kan säga någonting om någonting.

Nackdelar med WordPress.org

Nackdelarna med att ha en egen installation av WordPress är självklart att du måste göra allting själv. Du måste läsa på, ta reda på, välja och konfigurera allting själv. Självklart finns det vänliga själar där ute som kan hjälpa dig, men i slutändan är det alltid upp till dig själv att få det att fungera.

Du måste ha en plats att ha din installation. Vanligast är att man köper ett webbhotell på tex One.com, Binero.se eller Loopia.se, men det går också att ha den på en egen webbserver.

Du kommer att bli tvungen att köpa ett eget domännamn, men detta är ändå rekommenderat, ifall du vill att dina besökare ska kunna hitta dig. Då du inte längre kan använda dig av http://minblogg.wordpress.com

Och slutligen, om det blir fel, så har du bara dig själv att skylla! (detta kan dock också vara en fördel)

Men jag har bloggat i flera år, jag vill inte börja om!

Ingen panik, det är det som är det fiffiga med att byta från WordPress till WordPress, du kommer inte att gå miste om någonting, dina besökare kommer inte att märka ett dugg, då du nämligen kan exportera alla dina inlägg, sidor, kommentarer och bilder till din nya blogg, och få det att se ut som om ingenting har hänt.

Ok, jag är såld! Vad gör jag?

Börja med att skaffa dig ett webbhotell eller sätt upp din egen webbserver. One.com må vara den billigaste där ute, men rekommenderas inte till ändamålet, då de har så dåliga erbjudanden och inställningar att de senaste versionerna av WordPress inte ens brukar gå att köra. Så välj istället något dyrare webbhotell som du inte kommer att bli besviken på. Loopia.se är en personlig favorit, och det är också här jag har alla mina domännamn. Binero.se är ett annat bra webbhotell liksom Manufrog.com.

Om du vill sätta upp din egen webbserver kan du läsa min guide om det. Men tänk på att ifall du stänger av din dator, kommer ingen kunna se din hemsida.

Köp sen också ett Domännamn som passar din blogg, för tips om vad du ska tänka på när du väljer domän namn, läs gärna min guide: Konsten att välja rätt domännamn.

Right! Jag har ett webbhotell, jag har ett domännamn, vad gör jag nu?

Nu är det dags att ladda ner och installera WordPress. För en svensk version av WordPress börja med att ladda ner WordPress från wp-support.se.

Packa upp och med hjälp av ftp, laddar du upp det till ditt webbhotel.

När allt är på plats surfar du in på ditt webbhotell och installationen kommer att starta automatiskt.

För mer information och en längre guide på hur man installerar WordPress, läs och följ gärna min guide: Installera din WordPress med 9 enkla steg.

Yey, jag har installerat WordPress på mitt webbhotell, men det är ju tomt!

Ta det lugnt, det är nu magin börjar på riktigt.

Logga in på din WordPress.com blogg. Gå till ”Verktyg > Exportera” och välj att du vill exportera ”alla författare” och klicka sedan på ”Ladda ner Exportfil”. Då får välja en plats på datorn att spara filen som kommer att heta wordpress.dagensdatum.xml. Kom ihåg vart du sparar ner den.

Gå sedan in på din nya WordPress.org installation på ditt webbhotell, och logga in. Gå till ”Verktyg > Importera” och klicka på länken längst ned, ”WordPress”.

Du får nu välja att ladda upp en fil, och du vill välja filen du precis laddare ner, xml-filen från förra punkten.

Nu kommer du att kunna välja att koppla ihop användare och ifall du vill ta med alla bifogade filer. Dina val här bör var att du vill koppla din förra användare (ditt inloggningsnamn) med din nya användare (admin), och du vill gärna ta med alla bifogade filer, då detta antagligen mest är bilder, som du gärna vill flytta över. Så klicka ja, and let the process begin.

Detta kan ta en stund beroende på hur aktiv du varit på din förra blogg, men avbryt den inte, utan låt den ta sin tid, och vänta tills allt är klart. Ta en kopp kaffe så länge.

Phew! Nu är det klart. Vad ska jag göra?

Testa att visa din blogg (länken med ditt namn högst upp till vänster), och kontrollera att alla inlägg, kommentarer, bilder och allting nu existerar på din nya installation.

Om det gör det, så är det nu det roliga börjar. Det är nu du ska undersöka dina inställningar, välja ett tema, lägga till plugins och göra det så snyggt som möjligt här istället.

För mer information om vilka inställningar du bör ha kan du läsa min guide: Så börjar du din blogg. Och för lite tips om bra plugins att ha och börja med så kan du läsa artiklarna 5 Plugins du måste ha och 7 till Plugins du bör skaffa.

Men alla mina besökare fortsätter att gå till min WordPress.com blogg!!!

Om du hade ett eget domännamn till din WordPress.com blogg så är det läge nog att rikta om det till din nya installation nu, så att alla besökare som går in på http://www.dindomän.se automatiskt hamnar på din nya blogg. Detta gör du där du köpt ditt domännamn, kontakta webbhotellet för mer information.

Om du inte har haft ett domännamn tidigare, utan dina besökare har blivit tvungna att gå in på http://dittnamn.wordpress.com så är det smartaste att ta bort (eller sätta ”privat” på) alla dina inlägg på den gamla bloggen, och sedan skriva ett nytt och sista inlägg på den gamla bloggen där du skriver ”Jag har bytt blogg. Vänligen besök mig på <länk till min nya blogg> istället.”

Cool! What now?

Ingenting, och allting. Du är klar, samtidigt som du precis bara har börjat. Du har lyckats byta till en egen installation av WordPress där du har full kontroll. Nu är hela världen framför dina fötter, och det ska mycket till för att du ska växa ur dessa skor. Du kan fortsätta läsa på den här sidan, tex resten av inläggen under kategorin Nybörjare, eller hitta på någonting annat roligt.

Om det är någonting som du inte lyckats med, eller om det fungerade perfekt, släng gärna iväg en kommentar så jag får veta. Lycka till!