Fullstendig redesign og teknisk ombygging av STLs Wordpress-nettside

Hjem / Portefølje / Fullstendig redesign og teknisk ombygging av STLs Wordpress-nettside
Hovedbildet: Fullstendig redesign og teknisk ombygging av STLs Wordpress-nettside - Kalis Media Nettsiden

Prosjektoversikt

Omstrukturering av eksisterende Wordpress-nettside, med fullstendig redesign basert på skreddersydd tema laget av en webdesigner. Programmering av custom Wordpress theme, med funksjonalitet skreddersydd til kravspesifikasjonene.

Type prosjekt: Wordpress Custom Theme

Kunde: Samarbeidsrådet for Tros- og Livssynssamfunns (STL)

Nettside: stl.no

Oppstart: September 2022

Utviklingstid: ca. 2 måneder

Arbeidstid: 130 timer

Problemstillingen

Samarbeidsrådet for tros- og livssynssamfunn (STL) er en paraplyorganisasjon for tros- og livssynssamfunn i Norge. Samarbeidsrådet arbeider for likebehandling av religioner og livssyn, og legger til rette for dialogarbeid mellom samfunnene.

STL har i flere år brukt en nettside bygget på Wordpress. Nettsiden har benyttet Enfold theme med et undertema (child-theme) som ytterligere modifiserer utseendet. Eksisterende nettside har brukt Avia Layout-bygger i tillegg til Gutenberg og Classic editor. Disse har blitt brukt om hverandre, uten en helhetlig plan. Nettsiden har også fått installert mange forskjellige utvidelser gjennom årene og har brukt 20 utvidelser av varierende omfang og kvalitet.

STL ønsket redesign av sin nåværende nettside og samtidig en opprydding i sidens innhold. De ønsket også en teknisk løsning som er mer brukervennlig, slik at det blir lettere for STL å legge til og redigere innhold.

STL samler også ulike lokale dialoggrupper som hver for seg er egne små organisasjoner. De ønsket en løsning for disse, slik at hver dialoggruppeleder kan logge inn og endre innhold på en enkel landingsside for sin dialoggruppe. Dialoggruppesiden skulle ha få eller flere seksjoner, avhengig av hva gruppelederen ønsker å sette opp. Noen dialoggrupper skal bruke STLs dialoggruppeside til å legge inn nyheter og arrangementer, mens andre har egne nettsider og skal bruke dialoggruppesiden til en kort introduksjon, for så å sende besøkende videre til egen nettside.

STL ønsket også en enkel kalenderløsning for visning av høytider samt arrangementer fra STL og underliggende dialoggrupper.

Vi startet med et forprosjekt som gikk ut på å definere nøyaktige kravspesifikasjoner, og planlegging av hvordan eksisterende innhold skulle plasseres på en mer ryddig måte i en menystruktur.

STLs nettside har fram til nå ligget under webadressen trooglivssyn.no. Sammen med kunden har vi avgjort at stl.no passer bedre som hovedadresse, og vi har bestemt oss for å gjennomføre domeneskifte samtidig med redesign. Den nye nettsiden skal ligge på stl.no, mens trooglivssyn.no skal sende sine besøkende til de respektive sidene på stl.no.

Designspesifikasjoner har også blitt forberedt og sendt til det designbyrået som Kalis Media samarbeider med. STL ønsket mye bruk av bilder samt ekstra flisbaserte menyer i tillegg til vanlige menyer.

Løsningen

Vi har planlagt ny fordeling av innhold mellom sider og meny-elementer. Basert på den nye fordelingen har vi fått følgende side-typer:

  • Hovedside
  • Flisbaserte menysider
    • ‘Om oss’-sider
    • Fordelt i forskjellige undergrupper som «Styret», «Lederforum» osv.
  • Dialoggruppe-sider
  • ‘Bli medlem’-side
  • Kalenderside
  • Ressurs-sider
    • Fordelt på forskjellige innleggskategorier

Alle disse sidene med sine seksjoner har blitt designet i nytt Figma-verktøy, og STL har godkjent dem før vi har begynt med programmeringen.

Som teknisk løsning bak den nye STL-nettsiden har vi valgt å bruke Wordpress, med et custom theme vi programmerer fra bunnen av i PHP. Fordelen med custom theme er at man unngår å bruke mange eksterne Wordpress-utvidelser, spesielt de tunge «Site Builder» plugins. Nettsiden er blitt skreddersydd til kravspesifikasjonene, og den er blitt robust, brukervennlig og veldig rask og responsiv.

For å legge til ekstra theme-innstillinger og ekstra innstillinger på «Sider» i Wordpress, såkalte «Maldokumenter», har vi brukt Advanced Custom Fields PRO (ACF). Ved hjelp av denne utvidelsen kan vi designe teknisk arkitektur av brukergrensesnitt. Vi kan programmere inn ekstra felter for forskjellige innstillinger. På denne måten vil det være mulig for kunden å fylle ut og endre disse feltene med egen tekst, bilder og andre innstillinger. Vår erfaring er at dette er en veldig brukervennlig løsning, der sluttbrukeren har tilgjengelig kun de innstillinger som denne kommer til å trenge. Samtidig er det ikke mulig for brukeren å endre på design-strukturen.

For redigering av innhold har vi valgt den gode gamle velkjente Wordpress-editoren Classic Editor. Den nye editoren Gutenberg kan kanskje gi flere muligheter, men den er veldig avansert for vanlige ikke-tekniske brukere.

Den ene ekstra utvidelsen som er tatt i bruk på nettsiden, heter «TinyPNG Image compression». Vi har valgt denne fordi nettsiden er veldig bildebasert. STL og dialoggruppene skal laste opp bilder som ofte kan være veldig tunge og ikke optimaliserte, derfor trenger vi en plugin som skal optimalisere bilder med hensyn til størrelse i megabytes.

Totalt bruker vi kun 4 plugins:

  • Advanced Custom Fields PRO
  • Classic Editor
  • Contact Form 7
  • TinyPNG – JPEG, PNG & WebP image compression

Dette gjør at nettsiden er veldig lett, lastes inn ekstremt raskt, og får veldig gode Google PageSpeed resultater.

Hovedsiden er delt i flere seksjoner. Vi har programmert inn en egen slider-seksjon basert på Flickity bibliotek, men implementert det via custom PHP-koding med ACF for innlegging av nye slides. På den måten har vi unngått å bruke en tung og lite brukervennlig slider plugin som f.eks. Revolution Slider.

På hovedsiden har vi også brukt en innbygd «Klebrig post» Wordpress-funksjon, slik at STL kan velge noen få innlegg som vises som uthevede innlegg på hovedsiden. Lokale nyheter er dialoggruppenyheter som blir hentet separat fra databasen. Seksjonen for nyhetsbrev er også utviklet uten bruk av eksterne plugins og fører direkte til Mailchimp.

Kalender er heller ikke basert på eksterne utvidelser. Kalendersiden har vi skreddersydd ved hjelp av «Custom Post Types» – en avansert Wordpress-funksjon som er tilgjengelig for PHP-utviklere. Den har noen få ekstra felter, som dato, klokkeslett og ekstra valg, heldags-arrangement og type. Arrangementer i kalender kan bli lagt inn av dialoggruppebrukere eller av STL administrator / editor brukerkonto. Full kalender vises på egen side, med mulighet for sortering etter type, kilde og måned. På hovedsiden viser vi en kortversjon med fem innlegg. På hver dialoggruppeside vises også en kortversjon med fem innlegg fra den respektive dialoggruppen.

Enkelte innlegg har blitt importert fra den gamle nettsiden, omgjort til Classic Editor, og fordelt på nytt innen flere kategorier. Innlegg redigeres ved hjelp av Classic Editor, og bildene legges inn via den innbygde «Add Media»-knappen. Bilder kan legges inn som enkeltbilder eller som galleri. Her bruker vi også den innbygde galleriløsningen som Wordpress tilbyr – ingen eksterne plugins. Bildegallerier på front-end er vist som vanlige slides ved hjelp av Flickity bibliotek.

Hver enkelt STL dialoggruppe får en ny Wordpress-konto med en spesiell «Custom User Type» som vi har programmert inn. På den måten, når administratorer for dialoggruppene logger inn, får de kun tilgang til nødvendige funksjoner i Wordpress Admin. Dette innebærer å legge inn og redigere sine egne innlegg i kategorien «Lokale nyheter», legge inn og redigere sine egne arrangementer i kalenderen samt redigere sin egen profilside. Profilsiden er modifisert slik at den tillater endring av dialoggruppens landingsside.

Den gamle «Bli medlem»-siden hadde bare tekst og link til nedlasting av Wordfil-skjema for utfylling og innsending via e-post. Vi har modernisert dette, slik at skjemaet vises direkte på siden ved hjelp av riktig konfigurert Contact Form 7-utvidelse.

For å legge inn generelle innstillinger har vi programmert inn et ekstra felt i hovedmenyen av Wordpress Admin, som gir mulighet til å endre footer, subscribe-seksjonen, generelle kalenderinnstillinger, e-postadresse, sosiale medier osv.

PHP HTML + CSS ACF Pro Custom User Type Custom Post Type
Kundens uttalelse
logo
“Vi hadde behov for en nettside som både var mer estetisk tiltalende enn den vi hadde, men fremfor alt en side som var enklere å navigere på for brukerne og så enkel å bruke og oppdatere at hvem som helst skulle kunne klare det uten en lang og tidkrevende innføring. Kalis Media leverte meget godt på begge disse punktene. I sær på brukervennlighet.“
Sjekk også

Andre Prosjekter

Nyheter

LinkedIn

Tanker

X / Twitter