LinkedIn Twitter Facebook

BLOGGPOST

Hur är denna webbplats konstruerad?

Swisch
Nästa
3 december 2015
Twitter

WordPress

www.elseif.se använder WordPress som publiceringsverktyg. Vi har också valt att lägga till ett antal spännande komponenter som vi skriver om här.

Tema

Webbplatsens design är framtaget med hjälp av Webflow. Ett webbaserat Photoshop som erbjuder väldigt smarta funktioner för att få fram kod som används till bas för mallimplementation.

Temat är utvecklat av oss med inspiration från Roots Sage, dock utan deras ”template wrapper” eftersom vi använder Blade för templating.

Plugins / Tillägg

Vi använder Papi som modulhanterare vilket gör att det blir en mycket trevlig användarupplevelse till hanteringen av innehållet på sidorna i WP.

Papi har hämtat sin inspiration från EpiServer Page Types vilket ger kontroll på data som är mer än bloggposter i WP.

modules
Bild från wp-admin när en ny modul ska skapas. Varje modul har en bild/tumnagel definierad i Papi, vilket underlättar för ögat.

 

För mallutvisning använder vi WordPress Blade som är en ”fork” på Blade från Laravel fast gjord för WordPress. På så vis kan vi arbeta med baslayouter och få fram väldigt ren kod för mallar. Vi hoppas kunna använda det mer i framtiden till våra kunder.

Konceptuellt upplägg ”moduler”

Webbplatsen har en Custom Post Type som heter ”Modules” med flera olika ”sidtyper” på sig. Konceptet ”sidtyper” kommer från Papi. Det innebär att en posttyp kan ha olika skepnader (egenskaper) på en och samma posttyp.

Exempel på en modul är ”Kontakt”. Denna sidtyp har egenskaper om kontakten. En unik sådant ”Kontakt” skapas i ”moduler”.

edit-contact-card
Finns lite att putsa på eftersom det blir Svengelska i admin-UI 🙂

 

Varje sida i WordPress har sedan en egenskap som heter ”Moduler”. Där väljs unika moduler in och dessa renderas sedan ut efter de inställningar som gjorts för mall i Papi.

contact-code
Definitionen av modulen innehåller vilken ”template” som ska renderas.

 

På detta vis får vi en flexibel och enkel hantering av dynamiska sidor som innehåller många olika komponenter.

page-modules
Startsidans ”Moduler” som är valda.

 

I exemplet ovan ligger ”kontakt” modulen i en annan modul. Det går alltså utmärkt att nästla dessa funktionsmoduler inuti varandra för att skapa ännu mer dynamik.

Ett alternativ till ”Moduler” hade varit att använda ”Widgets” i WordPress. Vi tycker dock att widgets är begränsat och väldigt svårt att implementera som UI för redaktörerna. Ett annat alternativ hade varit att använda Visual Composer för front-end justeringar. Det är dock en licensierad plugin och tanken var här att använda öppen källkod så långt det går.

Vi kommer dock att falla på repet kring öppet eftersom vi satsar på WPML för språkhanteringen. Kanske finns det någon med tips om att använda något dugligt där istället för WPML?

Bedrock samt deploy

WordPress-installationen är konfigurerad med Roots Bedrock.
Samtliga plugins och externa kodbibliotek är hanteras via Composer.
Deployment (deploy & pull) hanteras via PHP Deployer.

Kod

Om du vill kolla närmare på hur det är byggt i detalj kan du granska koden på Github.

Hosting

Webbplatsen hostas (managed) av Cloudnet vilka vi varmt kan rekommendera som täta samarbetspartner i lyckade webbprojekt.

cloudnet

 

Arbetsinsats

Total arbetsinsats (systemutveckling) för denna webbplats ligger kring 24h exklusive design.

 

Swisch

Ledord för oss är respons, nyfikenhet, affärsförståelse och kvalitetsinsatser.

Elseif AB är placerat i Mälardalen och har kunder kring Stockholm. Vi arbetar med tjänster och produkter för digitala, redaktionella system. Utgångspunkten för våra leveranser startar i öppenhet där öppen källkod eftersträvas där det är möjligt.

Code

Elseif AB

(besök oss på)
Munkgatan 20d
722 12 Västerås

 

E-post: info@elseif.se
Telefon: 070 - 303 22 03