Mathias Amnell » guide

En guide till wordpress

Amnell — Thu, 11 Feb 2010 20:18:49 +0000

Som jag i tidigare poster nämnt så är jag en av utvecklarna på domainz. Vi håller för tillfället på med en rejäl renovering av hela tjänsten och har i några veckor rotat lite bland vilket ramverk som skulle kunna passa sig för ett nytt domainz. Till en början hade vi tänkt använda oss av CodeIgniter för att skapa allt från grunden, men efter lite tester och överväganden föll i stället beslutet på WordPress. I och med att jag inte har suttit och arbetat med WordPress på några år så kände jag att det var på tiden att jag putsade lite på mina kunskaper.

Så, igår föll det ner ett fint litet paket i brevlådan.

Det var boken Smashing WordPress – Beyond the blog skriven av Tord Daniel Hedengren (@tdhse). Jag har läst lite om boken innan och sett att flera har rekommenderat den, så förra veckan beställde jag, för första gången på länge, något annat än kurslitteratur från Bokus.

I boken går TDH in mer på djupet hur man kan utveckla en sida med WordPress och att, precis som titeln säger, skapa något som är mer än en blogg. Precis vad jag behöver.

Intressanta delar som boken tar upp är bland annat:

Hur du skapar teman och ”child themes”
Hur du bemästrar the_loop()
Hur du skapar plugins och widgets
Hur du sökmotoroptimerar din wordpress-installation

Efter att ha bläddrat lite kan jag nog redan säga att boken var ett kap. TDH skriver riktigt skönt och boken ligger på en lagom skön svårighetsnivå. Jag är riktigt peppad på att kunna lägga undan kurslitteratur till fördel för Smashing WordPress någon dag framöver.

Köp Smashing WordPress – Beyond the blog från Bokus eller Adlibris idag.

Relaterade poster:

Gowalla – Gotta Catch ‘Em All!

Amnell — Sun, 24 Jan 2010 01:27:45 +0000

De senaste månaderna har jag börjat utforska allt fler sociala tjänster online. Tidigare har jag till stor del bara varit en passiv åskådare, men nu har jag gått över till ett mer aktivt deltagande. I samma veva har jag snubblat över en massa intressanta tjänster, bland annat den underbara tjänsten Gowalla. För att få fler att få upp ögonen för Gowalla hade jag tänkt presentera en kort guide och introduktion samt på slutet även ta med lite tips och trix.

Vad är gowalla?

Gowalla är en positioneringstjänst och ett spel i ett. För tillfället finns Gowalla till iPhone och iPod Touch. För Android-mobiler är det för tillfället den mobila hemsidan (http://m.gowalla.com) som gäller. Meningen är att du ska ”checka in” på ställen du besöker för att på visa för dina kompisar vart du är och vad du har besökt, samla olika badges (emblem) och stamps (stämplar) samt för att få chansen att hitta olika ”items”.

Ett item är kort och gott en liten ikon som syns i din profil. Det kan till exempel vara en longboard, en trave böcker eller en handske. Items slumpas ut och det är inte alltid man får ett när man checkar in. I skrivande stund finns det 98 olika typer av items och det är främst samlandet av alla items som gör Gowalla så otroligt beroendeframkallande.

Exempel på items i Gowalla

Finns inte platsen du är på inlagd Gowalla så kan du själv skapa den. Skapar du en spot blir du automatiskt ”creator” av just den spoten. Lämnar du dessutom ett item blir du ”founder” (grundare). När sedan någon annan checkar in på samma ställe kan personen välja att själv lämna ett item för att också bli founder. Man kan även byta items från sitt pack med items som någon lämnat på en spot.

Alla items du hittar hamnar automatiskt i ditt ”pack”. Allt som ligger där kan du lämna eller byta på de ställen du besöker. Hittar du ett item du inte redan har och du känner att du vill behålla det så kan du välja att lägga det i ditt ”Vault”. Har du väl lagt in ett item i ditt vault kan du inte ta ut det därifrån! Det är helt enkelt din troféhylla där du kan spara alla items du tycker är värda att spara.

När du checkar in på en plats får du möjligheten att posta din incheckning på Twitter och/eller Facebook tillsammans med en kort beskrivning. Utöver detta skickas även en push-notifikation till alla dina vänner i din vännerlista. Har de push påslaget för din användare ser de när och vart du checkar in.

Gowalla i framtiden

Så vad ska man med Gowalla till egentligen? Varför ska man checka in på olika ställen och samla på sig olika items samt berätta för alla vart man är? Många är negativa till tjänster som Gowalla, medans andra ser det som en möjlighet till en helt ny sorts marknad. Något som Gowalla redan har börjat med är möjligheten att vinna riktiga items.

En drive som pågår för tillfället är att man har chans att vinna riktiga produkter från Incase om man checkar in på en Apple Store. Det finns även vissa barer, restauranger och caféer runtomkring i världen som erbjuder rabatterade priser om man samtidigt är incheckad på Gowalla.

Ytterligare en rolig grej som Gowalla höll i under julen var deras Golden Gift-drive där man hade chansen att hitta en Golden Gift när man checkade in någonstans. Innuti en golden gift kunde det antingen ligga en iPod nano, $100 presentkort på iTunes eller en Gowalla T-shirt. Jag hade turen och hittade en Golden Gift och jag vann en T-shirt!

Jag tycker att Gowalla är mycket trevligt och beroendeframkallande. Jag är ständigt på jakt efter nya ställen att checka in på. Kolla in min Gowalla-profil och följ mina enorma framgångar

Saker du kanske inte visste

När du skapar din spot spelar det egentligen ingen större roll ifall du stavar fel, lägger den i fel kategori eller om positionen inte är helt hundra. Det går nämnligen att ändra allt detta på hemsidan.
Spara inte för många items utanför ditt Vault. Du kan nämnligen inte ha fler än 10 åt gången. Så om du går omkring och undrar varför du aldrig får några items så kan det bero på att du bär omkring på 10 st items i ditt pack.
En spot kan inte ha fler än 10 items lagrade åt gången.
När du redigerar en spot via hemsidan och vill veta hur stor omkrets spoten har kan du använda dig av Radius Bookmarklet (dra länken till din bokmärkesrad). När du sedan redigerar en spot är det bara att klicka på bokmärket för att se omkretsen.
Har du en WordPress-blogg kan du installera pluginet WP-Walla för att visa dina incheckningar för dina användare.
Har du inte tillgång till GPS försöker gowalla lokalisera dig genom trådlösa nätverk. Det kan därför fungera bättre att koppla upp sig mot trådlösa nätverk när du är inomhus.
När du är i listan med närliggande spots kan du vrida på iPhonen för att se en karta över alla spots. Gröna har du besökt, röda har du inte besökt.

Bra att tänka på

Att berätta för hela världen att man inte är hemma är kanske inte alltid det säkraste man kan göra. Det finns fall där inbrottstjuvar har följt personer på sociala tjänster för att se när de inte är hemma. Beroende på hur synlig du är i övrigt på nätet borde du tänka två gånger innan du skapar en ”Hemma”-spot.
Att ha en ”Hemma”-spot är kanske roligt för stunden, men det tar bort rätt mycket av meningen med Gowalla. För andra användare och kompisar är ditt ”Hemma” kanske inte deras hem etc. Gatunamnet skulle därför kunna vara ett bra alternativ.
Att alltid posta till Twitter och Facebook är inte alltid uppskattat av alla. Använd funktionen med måtta och välj i stället att bara publicera de viktigaste eller mest intressanta platserna.
Har du slut på items? Enda lösningen är att checka in på fler ställen för att hitta nya. Plötsligt sitter du där med väskan full av fina items.
Bor du i en stad med få Gowalla-användare? Passa på att skapa en massa spots och försök bli founder till så många som möjligt. Gowalla har nämnligen hintat om att founders kan komma att få erkännande för sitt hårda arbete i framtiden.

Relaterade poster:

Kompakta formulär med jQuery och CSS

SEO för din WordPressblogg – Permalänkar

Amnell — Mon, 28 May 2007 07:11:58 +0000

Jag hade tänkt att i några artiklar framöver gå igenom hur man kan sökmotoroptimera sin wordpress-blogg och första inlägget får handla om Permalänkar.

Permalänkar

En permalänk är en URL som pekar på ett specifikt blogginlägg. Meningen med permalänkar är att de ska vara permanenta (därav ”perma” i permalänk). Med permanent menas att även om ett blogginlägg har försvunnit från förstasidan och hamnat i arkivet så ska permalänken fortfarande leda till rätt inlägg.
Det finns inga specifika regler för ur en permalänk ska se ut (förutom standardrestriktionerna för en URL).

Eftersom en permalänk i princip kan se ut hur som helst så kan man använda den för sökmotoroptimering genom att t.ex lägga in relevanta nyckelord. WordPress har en alldeles utomordentlig funktion för att göra just detta.

Som standard skapar tyvärr wordpress ganska dåliga permalänkar, detta pga att permalänk-systemet inte går att använda på alla webbhotell. Det krävs att webbhotellet använder sig av Apache och har mod_rewrite igång.

Med en standardinstallation av WordPress kommer permalänkarna se ut som nedan:

http://blog.proliit.se/?p=134

Detta ger inte mycket information till en sökmotor, sökmotorn ser att en sida vid namn ?p=134 finns på blog.proliit.se, ingenting mer. Med bättre struktur på permalänkarna kan du berätta för webbläsaren vad sidan/posten handlar om och därmed öka positionen i sökmotorerna.

Permalänkar ändrar du under Inställningar -> Permalänkar. Bra och populära strukturer är:

1) /%year%/%monthnum%/%day%/%postname%/

Detta resulterar i en länk som ser ut som följande: http://blog.proliit.se/2007/05/4/sidans-titel/

2) /%category%/%postname%/

Och den här skulle se ut så här:
http://blog.proliit.se/wordpress/sidans-titel/
(Förutsatt att posten var inlagd i kategorin ”wordpress”)

Båda exemplen är som sagt populära och jag skulle gissa på att det inte är någon större skilnad på dem ur SEO-perspektiv. Jag använder själv första exemplet, främst pga att mina favoritbloggar använde den strukturen när jag startade min blogg.

För att ytterligare optimera sina permalänkar så kan man använda sig av den allt för sällan använda funktionen ”Post Slug”.

Post Slug

Post Slug är det som kommer ersätta %postname% i permalänkstrukturen. Som standard blir Post Slug en konvertering av inläggets titel (ett inlägg med titeln ”det här är ett inlägg” konverteras till ”det-har-ar-ett-inlagg”).

Låt säga att vi har valt att använda oss av permalänkstruktur #2 och postar ett inlägg om webbutveckling och webbdesign i halmstad med titeln ”webbdesign” och lägger det i kategorin ”tips”. Permalänken kommer då se ut så här: ”http://blog.proliit.se/tips/webbdesign”.

Eftersom inlägget handlar om webbutveckling och webbdesign i halmstad så vill vi att de nyckelorden ska finnas i permalänken, därför använder vi oss av egendefinerad post slug, i det här fallet skulle ”webbdesign-webbutveckling-halmstad” passa fint. Permalänken kommer då bli ”http://blog.proliit.se/tips/webbdesign-webbutveckling-halmstad”, mycket bättre för både sökmotor och användare.

Edit: Du hittar Post Slug i menyn till höger när du skriver ett inlägg

Det var allt jag hade om Permalänkar för tillfället. Kom gärna med kompletteringar/korrigeringar genom att kommentera nedan.

[tags]Wordpress, Sökmotoroptimering[/tags]

Relaterade poster:

Ett inspirerande Illustrator-tips från Veerle’s blog

Amnell — Fri, 18 May 2007 07:32:50 +0000

Snubblade över en skön Illustrator-guide på Veerle’s Blog där hon visar vad man kan åstakomma med ”Transform again”-kommandot (äpple/control + D) i Illustrator. Kort men trevlig liten ”guide”, eller man kanske borde kalla det tips?

”Transform Again in Illustrator” Veerle’s Blog

Har tidigare nämnt Veerle’s Blog i ”Följ ett kreativt flöde”

[tags]Illustrator, Guider, Tutorials[/tags]

Relaterade poster:

Kompakta formulär med jQuery och CSS

Amnell — Tue, 23 Jan 2007 20:52:51 +0000

För någon dag sedan snubblade jag över en artikel på alistapart.com där Mike Brittain går igenom hur man kan göra sina inloggningsformulär (och andra formulär också för den delen) lite mer kompakta och samtidigt behålla tillgängligheten.

I artikeln använder sig Mike av Javascript och CSS för att visa/dölja label’s (hädanefter kallar jag dem för etiketter) ovanpå input-fälten. I stället för att som i Mark’s exempel använda ett ”vanligt” Javascript så hade jag tänkt gå igenom hur man kan använda sig av det utmärkta Javascript-biblioteket jQuery, och dessutom få till lite snygga effekter.

Innan vi sätter igång så rekomenderar jag att ni läser igenom hela artikeln på alistapart.com.
Jag kommer utgå från Mark’s Färdiga Exempel och vidareutveckla det.

Eftersom vi inte kommer använda oss av Marks javascript så kan vi helt ta bort det.
Exempel utan javascript

1) Ladda ner jQuery och inkludera det i dokumentet
För att vi ska kunna använda oss av jQuery på sidan så måste vi inkludera det i dokumentet, det finns två sätt att göra detta på.

Alternativ 1)
Ladda ner senaste versionen av jQuery och lägg jquery-latest.js i samma mapp som semicolor_login.html. Lägg sedan till följande innanför head-taggarna:

Alternativ 2)
Istället för att ladda ner jQuery så kan vi bara länka till senaste versionen som ligger ute genom att lägga till följande i innanför head-taggarna:

Fördelen med den här lösningen är att du aldrig kommer behöva uppdatera jQuery om det kommer ut i en ny version, du länkar alltid till den senaste. Nackdelen är att scripten på din sida inte kommer fungera om jQuery’s sida är nere eller är överbelastad.

2) Börja scripta
Nu kan vi börja lägga till lite jQuery-kod i dokumentet. Börja med att lägga till följande längst ner i head-taggen:

Ok, vad är det vi vill uppnå då, jo till att börja med så vill vi att alla etiketter ska ligga ovanpå respektive input-fält. I exemplet finns redan all css vi behöver för att uppnå detta.

Klassen overlabel
Alla etiketter i exemplet har klassen ”overlabel” som standard.
Klassen ”overlabel” gör inte mycket annat än ändrar färg på alla labels, i det här fallet till en grå nyans. Det här är standardklassen för alla etiketter, endast denna visas för användare utan javascript.

Klassen overlabel-apply
Den är den här klassen som vi vill att alla etiketter ska få så fort sidan laddas. Klassen gör så att alla etiketter hamnar i ett eget lager och därav hamnar input-fälten automatiskt under dem.

Anledningen varför användarnamn- och lösenords-etiketterna inte har overlabel-apply som standard är att utifall att användaren inte har javascript aktiverat i webbläsaren så kommer etikettern bara ha klassen overlabel och därav visas korrekt brevid input-fälten. Istället kommer vi med hjälp av jQuery lägga till klassen overlabel-apply till etiketterna.

Så låt oss börja. Som sagt så ska först och främst alla etiketter få klassen overlabel-apply. Tack vare jQuery krävs inte mer än en liten rad med kod.

$(document).ready(function(){
	/*Alla jQuery-script nedanför den här raden */
	$("label.overlabel").addClass("overlabel-apply");
});

Ser väl rätt enkelt ut?

$("label.overlabel")
Skapar ett jQuery-objekt som innehåller alla etiketter (label) och som har klassen overlabel.

addClass
är en jQuery-funktion som i det här fallet lägger till klassen ”overlabel-apply” till alla element i objektet $(”label.overlabel”).

Sidan ser nu ut Exempel med jQuery och overlabel-apply.
Som ni ser så försvinner inte etiketterna när man klickar på de underliggande input-fälten, det ska vi fixa med ytterligare några rader jQuery-kod:

$("input#username-field, input#password-field").focus(function() {
	if($(this).val() === "") {
		$(this).prev().fadeOut("fast");
	}
});

Kanske aningen krångligare än koden innan, men samtidigt mycket logiskt.

$("input#username-field, input#password-field")
Skapar ett jQuery objekt som innehåller alla input-fält med ID satt till username-field eller password-field.

focus(function() { });
Focus är en jQuery funktion som känner av ifall något av elementen inne i jQuery-objektet får fokus (i det här fallet om man klickar i något av input-fälten) i så fall så ska funktionen innanför parenteserna köras.

if($(this).val() === "") { }
En if-sats som kollar om $(this) (this är i det här fallet det input-fältet som har fått fokus) har värdet ”” (ingenting), i så fall ska koden innanför { } köras.

$(this).prev().fadeOut("fast");
Det är här magin sker, $(this) är objektet som fått fokus, prev() väljer det element som ligger ovanför input-fältet (etiketten ligger ovanför input-fältet i html-koden och blir då det element som nästa funktion kommer påverka). Nästa funktion är fadeOut som ”tonar ut” etiketten och får den därmed att försvinna (”fast”) anger hur snabbt detta ska ske.

Sidan ser nu ut Exempel med fadeOut. Och som ni ser så funkar fadeOut prima, men någonting fattas, såklart vill vi ju att etiketterna kommer tillbaka om man inte har skrivit någonting i input-fältet och lämnar det. Vi lägger därför till ytterligare en funktion.

$("input#username-field, input#password-field").blur(function() {
	if($(this).val() === "") {
		$(this).prev().fadeIn("fast");
	}
});

Det här är i princip samma som funktionen innan, med två små ändringar i stället för focus så använder vi blur, som är motsatsen till focus, dvs kollar om fältet mister fokus och lämnas. Och i stället för fadeOut så använder vi här fadeIn, vilket tonar in etiketten.

Sådär, nu är vi färdiga!
Såhär ser det färdiga inloggningsformuläret ut.

Sammanfattning
Det finns självklart för och nackdelar med att köra jQuery istället för som i Mark’s exempel bara använda ”vanligt” javascript.

Fördelar:

Man har ett robust bibliotek bakom sig som man kan använda till så mycket mer på sidan.
Funktionerna är väldokumenterade och just jQuery har en fantastisk community där man snabbt kan få svar på frågor och hjälp med script.
Det finns flera plugins till jQuery som kan göra ganska fantastiska saker. De är dessutom mycket enkla att implementera.
Scripten är lätta att förstå, även för personer som inte har full koll på jQuery.
Det går att göra egna funktioner och plugins för jQuery ganska enkelt.

Nackdelar:

Man har inte 100% koll på precis vad som sker under ytan, något som många tycker om att ha.
Kommer inte på fler nackdelar just nu.

Det här var min första guide och jag hoppas att någon kommer finna användning av den. Kom gärna med förslag.

[tags]jQuery, ajax, web 2.0, css, webbdesign[/tags]

Relaterade poster: