Webbjobb sen sist

I know. Det har varit dåligt med uppdateringar sen sist. Men några sajter har jag vi på MarsApril faktiskt hunnit med. T.ex.:

  • danarne.se – sajt till en av sveriges främst creative direktors när det gäller modevisningar. Vi på MarsApril stod för design och teknik.
  • linassverigeresa.se – kampanjsajt för Linas Matkasse, som firade att de lanserade sin matkasse på 24 nya orter. Vi på MA fixade med databasmodeller och PHP-kodning.
  • koncept.se – webbplats åt arkitekterna på Koncept Stockholm. Vi stod för HTML, PHP, JavaScript och lite allmän rådgivning av tekniken och SEO.
  • modelljaktdomino.se – kampanjsajt för Galleria Domino, med bland annat en facebook-koppling som gjorde att besökarna kunde bläddra och välja bland sina bilder på facebook. Vi på MA fixade det tekniska.

I övrigt har jag jobbat hårt med mina WordPress-plugins. Särskilt Admin Menu Tree Page View har fått en välbehövd uppdatering och kommer nu med expand/collapse av sidor. Måste testas och upplevas!

WordPress 3.1: more CMS than ever

This week has been all about the new WordPress release: 3.1. It is a great release and some of the new features that I really like are the new add link popup that easy let’s you choose among your existing pages and the writing interface that now features a lot less panels than before (something I’ve been bothered by for a long time).

Also, as Matt says: “With the 3.1 release, WordPress is more of a CMS than ever before“.

These words from Matt feels very good for me since most of my plugins for WordPress focus on extending it’s CMS functionality.

So: WordPress 3.1 + CMS Tree Page View + Simple Fields + Simple History = a heck of a CMS!

Länge sedan senaste lanseringen

Tror inte jag skrivit om någon ny sajt jag gjorde sedan Histcon.se lanserades innan sommaren.

Senior & Young webbplatsDen senaste tiden har jag jobbat mycket som konsult och inte hunnit med att göra så mycket webbplatser. En sajt vi lanserade för några veckor sedan är dock rekryteringsbolaget Senior & Young. Som vanligt är det jag som gör både backend och frontend, men designen står Torkel på vårt företag MarsApril för. Som vanligt. Som sagt.

Vi har även långsamt med säkert börjat övergå från PolarBear CMS till WordPress CMS för våra sajter. Mitt egenutvecklade PolarBear är fortfarande helt underbart att jobba med (sparkar rumpan på WordPress flera gånger om på många sätt) men med tanke på att WordPress är större och dessutom ett system som kunderna oftare känner till så.. ja.. ni fattar.

Utöver konsultandet så har därför även utvecklingen av mina WordPress-plugins tagit mycket tid. Mycket av funktionalitetet i PolarBear flyttar jag nu över till WordPress och släpper som open source tillägg. Alla sajer vi gör numera använder faktiskt som minst Simple Fields, CMS Tree Page view och Simple History. Och efter att ha använt WordPress för lite mer avancerade projekt på sistone så kan jag konstatera att det börjar kännas som ett helt ok system. Det är en väldigt bra grund att stå på, men man måste se till att kunna sköta sina custom post types och custom taxonomies och custom fields för att anpassa det till behoven på respektive sajt. Men, som sagt, en bra grund att bygga vidare på.

Så nu vet ni. Läget.

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.

View your pages directly in the admin area menu with this new WordPress plugin

Can’t believe I haven’t told you about my new plugin yet! It’s so good that I can’t use a WordPress installation without it. That’s pretty good for a plugin that’s still in version 0.1! 🙂

Ok, it’s called Admin Menu Treee Page View and it will display all your pages direcly in the WordPress admin menu. And when I say directly, I mean directly: no need to click “pages” and no need to click the Tree Page View (still a good plugin though!).

This is very good for CMS-like installations of WordPress, where you have many pages in a hierarchy. After using WordPress for our clients for a while I noticed that I really hated to have to go to a new page just too see all my pages. It was very cumbersome to change the current page to edit. Also, I would often forget where in the page hierarchy I currently was.

I really needed a way to always show the pages, no matter where I was in the admin area. And the result is simple but very effective. Just take a look at this screenshot and you will understand:

Screenshot of the WordPress plugin Admin Menu Tree Page View

See! All the pages, visible while editing an article. Wanna edit another article? Just click on it.

If you use WordPress as a CMS you will love this plugin. Give it a try and then let me know what you think.

Download from wordpress.org: http://wordpress.org/extend/plugins/admin-menu-tree-page-view/