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.