Så här byggde jag nya marsapril.se med WordPress

Mitt företag MarsApril har just lanserat en ny sajt, helt byggd i WordPress.

Något jag saknat i WordPress-sverige (och världen) är en inblick i hur andra bygger sina WP-sajter. Hur bygger dom upp sajten, vilka plugins använder dom, hur gör dom ditten, hur gör dom datten. Så med tanke på detta så tänkte här kort berätta lite om hur jag gjort.

1. Installera de plugins som behövs

Oftast vet jag innan jag gör en sajt vilka plugins jag behöver. Till att börja med skyfflar jag alltid in ett par av de plugin jag utvecklat hos/åt MarsApril, i detta fall mer specifikt:

  • CMS Tree Page View för att sköta många sidor på ett smidigare sätt. Ger helt enkelt en mycket bättre översikt än WordPress egna adminverktyg.
  • Simple Thumbs för att enkelt skapa tumnaglar av valfri storlek samt för att lägga på filtret oskarp mask på små tumnaglar, vilket gör dom mycket “krispigare” = snyggare = mer nöjd Art Director 🙂
  • Simple History för att se vad som händer på sajten. När vi arbetar med innehållet på sajten kommer vi vara flera som jobbar på texter och bilder samtidigt, och det är då bra att veta vad som hänt på sajten och vem som gjort vad.
  • Simple SEO för att vi vill kunna ha sidtitlar (<title>) som skiljer sig från en sidas rubrik (<h1>).
  • Simple Fields för att kunna lägga till t.ex. flera bilder till samma artikel/sida. Simple Fields är för övrigt en grundstomme i varje WP-sajt vi bygger. Utan att överdriva så kan det faktiskt vara världens bästa plugin.

Jag vet att det kan verka lite skrytigt att nämna sina egna plugins, men faktum är att alla de plugins jag gjort har jag gjort eftersom jag saknat och behövt funktionaliteten.

Fler plugins: Det finns givetvis ett gäng plugins som vi själva inte gjort, men som vi använder ändå. Dessa är ungefär samma i varje projekt och de är dessa:

  • Autoptimize – för att optimera HTML-koden (dvs. ta bort onödiga radbrytningar och mellanslag osv.)
  • WP Minify – för att minimera och slå samman JavaScript och CSS-filer. Gör att det blir färre anrop till servern och man får även högre poäng i Google PageSpeed! 🙂
  • WP Super Cache – för att WordPress är långsamt ibland. Vi har testat flera andra cache-plugins till WordPress, men denna känns mer säkert eftersom han som utvecklar pluginen gör det för Automattics räkning
  • WP-DBManager – för att jag litar varken på mig själv eller mina medarbetare. Eller på dom som hostar vår server. Kost och sagt litar jag inte på någon och därför är det bra att ha backup på grejjerna.
  • Microkid’s Related Posts – används för att korskoppla saker i vår portfolio.
  • Google Analyticator – lägg enkelt till Google Anlautics kodsnutt på sajten, med alternativet att inte räkna med vi som är inloggade. Ger också möjligheten att hålla koll på hur många som klickar på utgående länkar.
  • Google Analytics Dashboard – ger oss en snabb översikt i panelen över vår statistik i Google Analytics.

2. Installera vårt blanka tema

Att börja utveckla ett tema till WordPress helt från grunden är jobbigt. Att “nedveckla” ett befintligt tema, dvs. att ta bort funktioner och css och grejs man inte vill ha, är också jobbigt. Tricket vi kör med är därför att alltid börja med att installera ett “mini-tema” vi gjort. Du kan förresten ladda hem temat här: wordpress-theme-blank. Det är inte gjort för att användas av andra och det är nog inte så “snyggt”, men jag tycker iaf det är väldigt skönt att ha en mall att börja med varje gng.

Vårt tema innehåller bland annat följande:

  • En färdig mappstruktur som innehåller style.css, index.php, functions.php samt mappar för inc-filer och skript.
  • En skript-mapp där vi lagt in de JavaScript vi oftast använder på sajter, t.ex. jQuery, jQuery Cycle Plugin och jQuery.scrollTo, så jag slipper ladda hem dessa varje gång vi gör en ny sajt.
  • En functions.php som innehåller mina favoritkodsnuttar för WordPress. Det är till exempel  kod för att
    • flytta om menyer i admin (varför är t.ex. inte Inlägg och Sidor intill varandra som standard!?)
    • ta bort diverse “skräp” i <meta>
    • lätt skriva ut innehållet i en artikel/sida utan att behöva grejja med setup_postadata osv. varje gång
    • skapa tumnaglar av uppladdade bilder (med hjälp av TimThumb).

3. Mata in innehåll och konfigurera Simple Fields

Att ha rätt innehåll när man sätter igång är väldigt bra. Först då ser man exakt vilka fält som behövs internt.

marsapril.se består i princip enbart av inlägg med rubrik, brödtext samt en eller flera bilder. Ett önskemål från art director var att kunna välja en bild som syns på översiktssidan, men som inte syns på ett projects undersida. Utöver detta så skulle det såklart gå att lägga till valfritt antal bilder. Allt detta ordnade jag enkelt i Simple Fields. En sista grej var att vi vid varje projekt ville kunna handplocka ett gäng projekt som vi tyckte var relaterade till projektet man tittade på. Till detta använde vi tidigare nämnda Microkid’s Related Posts.

Allt som allt så ser vår redigerasida ut såhär. Observera hur oerhört enkelt och smidigt hanteringen av bilder blir med hjälp av Simple Fields!

4. Skapa sidmallar

Baserat på skisser jag fått av vår art director sätter jag nu igång och skapar sidmallarna. Vanligtvis börjar jag med index.php och sätter upp en mer eller mindre statisk HTML-stomme som jag applicerar CSS på, tills det ser ut som skisserna.

Nästa steg är att göra så att all HTML-kod skapas med rätt innehåll och att rätt utseende hamnar på rätt sida. Ofta fortsätter jag jobba i index.php, men jag flyttar ut kod efter behov. På nya marsapril.se så blev varje projektsida en egen single.php och om-oss-sidan blev även den en egen sida.

Det mesta jobbet med sajten var att skriva ut alla tumnaglar i kolumner och att hämta rätt artiklar beroende på filtrering. Detta görs enkelt genom att använda funktionen Get Posts och skicka med lite olika argument till den. Sen så gällde den också att hämta den där bilden som bara ibland fanns och som skulle visas på översiktssidan, men inte på undersidan. Men det är en piece of a cake med Simple Fields ändå.

Som ofta när vi gör “CMS-sajter” så behöver vi hämta och visa mycket info från enstaka sidor. T.ex. sidfoten på marsapril.se består av fyra enskilda artiklar, vars innehåll jag lätt hämtar med min egen funktion ma_get_post(). Vet inte om jag misstförstått hur WordPress fungerar, men att behöva mixa med den globala $post-variabeln så fort man ska göra något vettigt är jävligt jobbigt. Med min funktion blir det ofta lite lättare iaf.

5. Lansera sajt

Ja, när sidmallarna är klara och vi pillat färdig med finliret så är det bara att lansera. Hux flux och vi har en WordPress-driven sajt.

Jag vet att det är många steg jag utelämnat och mycket som är underförstått i texten. Jag vet också att detta var en väldigt enkelt sajt, men det ger ändå en god inblick i hur jag jobbar med WordPress.

Sist med inste minst bjussar jag på lite skärmdumpar från insidan av WordPress, så ni verkligen kan få en känsla/inblick i hur det ser ut och funkar:

Panelen (dashboard). Våra egna plugin Simple History och CMS Tree Page View syns, plus en av Google Analytics-pluginen.

Sidan med alla inlägg. Av en slump så körde vi med “blogginlägg” för vår hemsida, men det skulle fungerat lika bra med inlägg eller någon custom post type.

Firefox-tips: använd sidebaren

Här kommer ett snabbt tips för er som använder webbläsaren Firefox:

Firefox har en trevlig och fiffig funktion som gör att du kan öppna webbplatser i ett litet fönster – kallad “sidebar” – vid sidan om sidan du tittar på. Man kan säga att du med denna funktion kan ha öppet två webbplatser samtidigt. Perfekt om du vill kolla upp något, t.ex. om du fått nya mail eller hur din kalender ser ut – utan att behöva öppna ett nytt fönster eller en ny flik. Och utan att lämna sidan du är på. Smidigt va?

Firefox utan någon sidebar aktiverad

Firefox med sidebar aktiverad

Såhär gör du:

  1. Gå till en sida du skulle vilja ha snabb tillgång till. Webbplatser anpassade för mobila enheter funkar oftast bäst eftersom sidebaren inte är så bred. Vi kan testa med DN:s mobila sajt: http://mobil.dn.se/
  2. När du är på sidan så lägger du till den till bokmärkesfältet genom att välja menyalternativet “Bookmarks” -> “Bookmark this page” och sedan lägga bokmärket i “Folder: Bookmarks Toolbar”.
  3. Högerklick nu på det nytillagda bokmärket och välj “properties” och bocka i “Load this bookmark in the sidebar”.
  4. Klicka ok och du är klar! Prova nu att klicka på bokmärket. Har allt funkar fint så laddas nu sajten i sidebaren.

Några tips på sajter som jag tycker är bra att ha i sidebaren:

Tyvärr så leder klick på länkar ofta att sajten lämnar sidebaren och dyker upp i huvudfönstret istället. GMail är dock ett bra exempel på en sajt där detta inte händer. Testa dig fram så du vet hur din sajt funkar så slipper du bli överraskad.

Snabbguide: såhär synkar du ditt skrivbord i Dropbox

Jag ♥ Dropbox. Men en sak som jag stört mig på är att jag måste lagra filer och mappar i just dropbox-mappen för att de ska synkas/säkerhetskopieras. Ibland är jag slö/praktisk och lägger nya filer och projekt direkt på skrivbordet. Det finns dock en enkel lösning: skapa en symbolisk länk till skrivbordet från dropboxmappen.

Jag öppnade terminalen och skrev:

ln -s /Users/bonny/Desktop/ /Users/bonny/Dropbox/Desktop_link

och voila! dropbox synkar mitt skrivbord. Har haft det igång i snart en halvtimme och ännu inte stött på några problem 🙂

Såhär tar du bort rättstavningen i OS X

OS X har en himla jobbig funktion: rättstavning. Funktionen är igång hela tiden och gör så att varenda liten ruta jag skriver något i blir full med små fula röda markeringar. Väldigt irriterande. Funktionen går att stänga av. Fast bara per program, och när man startar om programmet så är rättstavningsjäveln igång igång.

Det hela är en tydligen en sån bra funktion att Apple inte tycker man ska kunna stänga av den. Som tur var var det tydligen fler än jag som tyckte funktionen var jobbig och onödig, så jag hittade faktiskt den här hardcorelösningen.

[Hittad hos http://fuerstnet.de/en/disable-spell-checking-mac-os-x]

It drove me nuts to disable the automatic spell checking on text input fields in Mac OS X again and again to make that red lines going away on technical terms or other stuff not known by the spell checker.

Thankfully I found a post on http://dryfish.livejournal.com/8148.html which describes how to permanently disable automatic spell checking on Mac OS X.

I was going one step further and disabled all languages by renaming the whole ”Resources” directory:

[shell]sudo mv /System/Library/Services/AppleSpell.service/Contents/Resources \
/System/Library/Services/AppleSpell.service/Contents/Resources.disabled[/shell]

and creating an empty directory:

[shell]sudo mkdir /System/Library/Services/AppleSpell.service/Contents/Resources[/shell]

Det borde göra susen. Kanske måste du även köra

[shell]sudo killall AppleSpell[/shell]

efteråt, men sen ska allt vara fixat.

Puh. Härligt. Nu är det bara resten av konstigheterna med OS X som jag måste ta tag i…