Så här är den här sidan byggd

Den här sajten är alltså ett exempel på hur jag skulle kunna bygga en hemsida till dig som kund. Den är byggd på Wordpress-CMS:et (Content Management System), som ett eget sk "tema". Från början var ju Wordpress en plattform för att skapa egna bloggar och med "tema" menade man då bloggens layout. Det kan det fortfarande vara, om man använder Wordpress som bloggplattform, men när man som webbutvecklare säger att man bygger egna Wordpress-teman, menar man snarare att man bygger hemsidor i kodspråken html, css, php och javascript, men med Wordpress som stomme.

Vad gäller det som syns utåt, kan det här sättet att bygga en hemsida på innebära i princip lika mycket programmering som att bygga från scratch, men det finns en stor grundfördel: man får ett administrationsgränssnitt med på köpet, alltså varifrån man kan sköta sin hemsida, ändra och uppdatera innehållet på den. Man brukar kalla det här administationsgränssnittet för "admin" eller "backend". Till admin kan man hämta tillägg (plugins) av alla möjliga slag, som andra användare har kodat och som ytterligare förbättrar möjligheterna att skapa den hemsida man vill, en del är gratis, andra kostar pengar. Det brukar dock sägas att det är en poäng att inte använda för många plugins, dels eftersom det kan göra hemsidan långsam, dels för att det finns risk att sajten plötsligt inte fungerar som den ska, pga att du inte själv har full koll på koden och eventuella uppdateringar av den. Jag använder just nu i huvudsak ett plugin som heter Advanced Custom Fields Pro (ACF Pro). ACF Pro gör det möjligt att skapa användarvänliga gränssnitt i admin som gör det väldigt lätt för någon som ska sköta en hemsida att göra det utan att behöva ha så mycket förkunskaper. ACF Pro kostar ett par tusen kronor i engångsavgift, men har väldigt många nöjda användare världen över.

Classic Editor

Jag använder Wordpress Classic Editor till den här hemsidan, i kombination med ACF Pro:s Flexible Content Fields. Hela gränssnittet för att underhålla en hemsida finns då mitt på sidan. Det här uppfattar jag fortfarande är ett bra och populärt sätt att bygga Wordpress-hemsidor på, även om Wordpress nya Gutenberg Editor, eller Block Editor, nu har funnits ett par år. Mitt kundprojekt cirion.se har jag byggt på Gutenberg editorn, se under Referenser.

ACF Pro - Field Groups

Så här ser det ut där jag som utvecklare skapar gränssnittet för att kunna underhålla hemsidan. Jag har skapat några Field Groups, några för enskilda sidor, någon för grupper av sidor som ska se ungefär likadana ut.

ACF Pro - Layouts

I Field Group ”Front Page Settings” t ex, har jag skapat ett Flexible Content som innehåller Layouts för de olika sektionerna på förstasidan. I varje sådan Layout definierar jag exakt vilka fält som ska finnas.

ACF Pro - Gränssnittet

När jag har gjort det kan jag gå in på sidan i admin och använda fälten för att skapa ett innehåll. Den första Layouten på förstasidan heter ”Hero Image Section”. Den innehåller den stora bilden i huvudet på förstasidan plus huvudrubriken och välkomsttexterna som ligger i bilden. Det är alltså här en administratör av hemsidan själv kan byta bild och ändra texterna.

Programmering - Templates

Men för att innehållet ska kunna visas på hemsidan krävs det lite programmering. Wordpress bygger på att man skapar templates i html och php, alltså mallar. Här är en del av mallen till förstasidan. Den i sin tur länkar till ett antal undermallar som motsvarar layouterna som jag skapade i Field Groups. Det är i undermallarna som respektive layouts faktiska utseende skapas. På rad 7 här länkar jag t ex till undermallen ”section-hero_image.php”.

Programmering - Templates Parts

Här är delar av den undermallen (”template-part”).

Programmering - CSS

För att sidan ska få ett vettigt utseende, alltså med definition av exakt placering av allt på sidan, definition av typsnitt, ev kantlinjer och marginaler, animationer mm, behövs dock också sk ”style”. Den skriver man i CSS (Cascading Style Sheets). På samma sätt som för mallarna har jag skapat ett style sheet (en css-fil) till varje layout. Här är delar av hero_section.css.

Programmering - JS

Det finns även lite JavaScript i Hero Section. Det gäller animationen som gör att de två välkomsttexterna zoomar in och sätter sig på plats under huvudrubriken. Jag har här använt ett JavaScript bibliotek som heter Greensock. De här raderna räckte med Greensock för att får till den animationen.

Programmering - Functions.php

Men ett Wordpress-temas verkliga hjärna brukar anses vara filen functions.php. Det är här man bland annat aktiverar de style sheets och JavaScript-filer som används till hemsidan utöver Wordpress egna. Det är även här man t ex definierar navigations-menyer bildformat som ska användas och kodar delar av funktionen för ett kontaktfomulär.

Bootstrap

CSS och JavaScript från Bootstrap kopplas även på här. Bootstrap är ett fiffigt bibliotek som bland annat innefattar ett sk grid-system som skapar en bra grund för responsivitet på sidan, alltså att den beter sig vettigt i olika skärmstorlekar. Genom att använda en hierarki av klasser på sidornas html-element - ”container”, ”row” och ”col” - skapas den här grunden.

"Mobile First"

Det anses rimligt att anta att fler besöker hemsidor via sin mobil än via en dator, därför måste sidan först och främst fungera och se bra ut i på en mobilskärm. Från scratch, när man börjar bygga, måste man börja hålla koll på hur det ser ut i mobilläge. Väntar man till senare under utvecklingen kan det bli jobbigt att anpassa sidorna så att det blir bra.