Författararkiv: Stefan Pettersson

Om Stefan Pettersson

Smålänning, webbkonsult, småbarnspappa, 24-timmarsseglare, fritidsbagare, startat evenemangskalendern Allom. Driver hobbyprojektet Föreningswebben för att dela med mig av det där digitala till föreningar.

Skärmbild Friskis&Svettis Nacka. Inställningarna inringade.

Inställningar för Friskis&Svettis-temat i WordPress

Den här artikeln är en del av en utbildning för flera Friskis&Svettis-föreningar som flyttar sina webbar till WordPress. Artikeln beskriver funktioner som är specifika för Friskis&Svettis-wordpresstema.

Friskis&Svettis-temat i WordPress har en sida med inställningar med saker som skiljer sig mellan de olika föreningarna (men är lika på alla sidor på den egna sajten). Dessa saker än inringade med blått på bilden nedan.

Skärmbild Friskis&Svettis Nacka. Inställningarna inringade.

Exempel som visar var våra inställningar visas på webbsidan.

Gå till Admin-panelen > Inställningar > FS Options

Först har vi en uppsättning med fält om vad som ska visas i sidhuvud och sidfot:

Skärmbild från admin-panelen i WordPress för Friskis&Svettis-temat

Inställningar för Friskis&Svettis-temat i admin-panelen för sidhvud och -fot.

Det lokala namnet visas i vitt på det röda sidhuvudet. Standard är att visa orten, inte föreningens kompletta namn.

Epostadressen och telefonnumret visas i sidfoten. Lämpligen till receptionen.

Vi hoppar över inställningar för att visa schema. När jag skriver detta så är den funktionaliteten inte påkopplad.

Vi har några länkar i anslutning till navigationsmenyn och på startsidan som vi måste peka ut vart de leder.

Skärmbild som visar inställningar i Friskis&Svettis wordpresstema för länkar i navigationen

Inställningar i Friskis&Svettis wordpresstema för länkar i navigationen.

I rullgardinsmenyerna kan du välja bland de sidor som finns på din webbplats. Om du saknar sidan, se till att den är skapad och publicerad först. 🙂

I sidhuvudet visar Friskis&Svettis Nacka sitt senaste inlägg/tweet på Twitter och en länk till sin facebooksida.

Skärmbild som visar sidhuvudet på F&S Nackas webb med senaste tweetet och länk till facebook.

I FS Options ställer vi in vilket twitterkonto och vilken facebooksida som ska visas.

Skärmbild som visar inställningar av twitterkonto och facebooksida,

Inställningar i Friskis&Svettis wordpresstema för twitterkonto och facebooksida.

Vi kan också, överst på bilden nedan ställa in om vi vill visa två puffar nederst på startsidan (standard) eller fyra (1 Exttra Puff Row Height).

Skärmbild på bildspel, växlande bilder med textremsa på startsida.

Bildspel eller rullande bilder i F&S-temat

Den här artikeln är en del av en wordpressutbildning för Friskis&Svettis. Den innehåller funktioner som är specifika för det wordpresstema som Friskis&Svettis använder.

Vi använder bildspel, växlande bilder eller ”rullande bilder” på två ställen på våra webbar:

  • På startsidan.
  • På sidan för en träningsanläggning.

Bilderna är stora, växlar med tonande övergång. Vi skriver en ”bildtext” på dem och kan länka dem till en sida, så att vi puffar användaren till en sida med mer info.

Förbered sidan i WordPress på att visa bildspel

På startsidan behöver vi inte göra något speciellt för att bildspelet ska kunna visas. Det styrs av att startsidan (som heter Home Page) använder sig av mallen ”Home Page” i boxen sidattribut.

Skärmbild: Välj sidattributet "Front Page" i WordPress på startsidan.

Välj mallen "Front Page" i WordPress sidattribut för startsidan, "Front Page"

På sidan för anläggningen förbereder vi genom två steg:

  1. Gå till sidan för anläggningen. Eller skapa en ny. Ge sidan det namn som du vill ska synas gentemot besökarna. Sätt Mall till ”Facility” i sidans Sidattribut.
  2. Skriv in en shortcode för att visa bild. Spara utkast/publicera.
Skärmbild från redigeringsläge i WordPress.

Lägg till bildspel i WordPress genom att skriva in en shortcode.

Det är alltså koden [facility-images name=”Friskishallen”] som förbereder sidan på att vi ska visa ett bildspel här. Namnet ”Friskishallen” ersätter du med namnet på din anläggning. Det visas inte utåt, bara för av WordPress internt för att hitta var bildspel kan visas. Var noga med att skriva namnet exakt likadant om du använder det på flera ställen.

Strax under bilden ser vi shortcode för att visa öppettider. Vi använder samma namn på anläggningen där för att inte förvirra oss själva.

Förbered bilder för bildspelet

Nu ska vi lägga in bilder som kan snurra runt i bildspelet. Välj bilder som är tydliga, syns bra och inte gör sidan plottrig. Fundera också över vilka andra bilder du tänker visa i bildspelet så att de passar ihop.

Välj ut bilder och beskär dem till exakt bredd/höjd: 530 x 330 pixlar innan du laddar in dem i WordPress. Döp gärna bilderna så att du vet att de är förberedda för bildspelet. Exempel: glad-kille-spinning-530×330.jpg.

Skärmbild på bildspel, växlande bilder med textremsa på startsida.

Exempel på bildspelssida.

Om du använder en dator där du inte har ditt favoritbildredigeringsprogram så kan du använda den gratis webbaserade bildredigeraren Pixlr.com.

I teorin kan du använda bildbeskärningsfunktionen i WordPress mediabibliotek men i praktiken funkar det inte bra. WordPress tror att du ska skära till bilden så att den passar till de standardstorlekar som den känner till. (Inloggad som admin kan du se standardstorlekarna under Admin-panelen > Inställningar > Media.)

Ladda upp bilderna i WordPress mediabibliotek: Admin-panelen > Media > Lägg till.

Lägg in förberedda bilder i bildspel

Gå till admin-panelen > Rullande bilder > Rullande bilder. Lägg till en ny (med ”add new”). Se exempel nedan.

Skärmbild av att lägga till en bild i bildspel i Friskis&Svettis-webb med WordPress.

Lägg till en bild i bildspelet.

De olika fälten:

Titeln i det stora översta fältet: Visas som en textremsa på bilden.

Synlig på sida: På vilken sida finns bildspelet som du ska visa bilden i? Hittar du inte sidan här? Felsök genom att kolla att sidan har rätt mall, enligt instruktionen ”Förebered sidan…”

Bild: Välj en av dina förberedda bilder i storlek 530×330 pixlar. Du kan använda samma bild på flera ställen men måste då skapa flera ”rullande bilder” som använder samma bild.

Undertitel: Visas också som textremsa efter titeln (skiljt åt med en pinne/stolptecken/pipe-tecken).

Text som länkas: Text i mindre grad som visas på mörk remsa längst ned till höger. Blir en länktext. Frivillig

Länka till sida: Till vilken sida ska länken leda? Frivillig.

Publicera nu eller tidsstyr publicering

Skärmbild från WordPress på tidsstyrd publicering av bild i bildspel.

Tidsstyr publicering och avpublicering av bild i bildspel.

Nästa steg är att antingen klicka på knappen ”publicera” (eller ”uppdatera” om du redan publicerat) om du vill göra bilden synlig direkt i bildspelet.

Du kan också tidsstyra publiceringen för att bilden ska bli synlig från en viss tidpunkt och eventuellt avpubliceras vid en annan tidpunkt. Kanske lämpligt för bilden som ska locka till spinningpasset innan julottan på juldagsmorgonen. 🙂

Post-it-lappar i olika färger för att bygga navigatiosmeny.

En metod för att bygga navigationsmeny

Nu ska vi bygga en navigationsmeny för din webbplats. Om vi ska göra det optimalt bra så har vet vi mycket om webbplatsens användare, vad de använder webbplatsen till, deras förväntningar och språkbruk. I nödfall kan vi ta genvägar men vi ska alltid testa av menyn på riktiga människor som inte varit med i arbetet.

Skriv ned syftet på webbplatsen på en postit-lapp. Vad vill du att besökarna ska göra. Skriv på en annan postitlapp ned vad dina användare vill göra när de kommer till webbplatsen.

Om du jobbar med persona, en sorts detaljerade schablonbilder av några typiska användare så tejpar du upp dem också.

Gör en snabb undersökning av liknande webbplatser. Är det några alternativ i menyerna som ofta eller alltid finns med? Vi ser nästan alltid något för att komma till startsidan ”HEM”, ”START” eller liknande. Och något val för att komma till kontaktinformation, hitta till oss, karta eller liknande. Skriv ned dessa kandidater på postitlappar också. Vi kan bryta mot branschpraxis men då ska vi göra det medvetet.

Nu går vi igenom vårt innehåll av sidor och skriver ned titel och kanske en kort beskrivning av varje sida på en postitlapp. Om du har många sidor som har liknande innehåll, en uppsjö av liknande produkter, flera mötesprotokoll eller liknande, så kan du sammanfatta dem med en postitlapp.

Nu grupperar vi ihop sidor som hör ihop, som har liknande innehåll. Vi tillåter att en del grupper är stora och en del är små. Flytta grupperna med liknande innehåll så att de ligger nära varandra.

Post-it-lappar i olika färger för att bygga navigatiosmeny.

Bygg upp navigationsmenyn för din webb steg för steg med postit-lappar.

Skriv en lapp med avvikande färg med ett eller några sammanfattande ord för varje grupp. Kan vi använda någon av lapparna som vi redan skrivit ned branschstandarden på vad som finns i andra webbplatsers menyer? Flytta in sidorna under lappen med sammanfattningen. Förstår vi vad som döljer sig under?

Om du är osäker på vad som funkar, kolla på postitlapparna vi satte upp först: webbplatsen syfte, vad du vill att besökarna ska göra, vad besökarna vill göra och eventuella personas som beskriver användarna.

Hur många sammanfattande lappar – som är kandidater till att bli menyalternativ har du kvar nu? För många för att få plats i navigationsmenyn? Då får vi antingen slå ihop några grupper eller bygga menyn i flera nivåer.

Hur vet jag om det är för många alternativ i menyn? Ett traditionellt synsätt baserat på hur många saker som vi kan hålla i huvudet är 5-9 alternativ. Jag tycker att det framförallt gäller att menyn ska synas bra och att det ska gå att hitta i den. Det finns så många olika sätt att bygga upp navigationsmenyn att det är svårt att ge konkreta råd. Oftast hamnar vi i en utrymmesbegränsning, en horisontell meny på sidan kan inte vara bredare än vad designen tillåter.

Bästa sättet är att prova sig fram. Gör något du är nöjd med. Be sedan någon som inte varit med i arbetet att leta reda på sidan som handlar om kundreklamationer, vänstergängade skruvar eller liknande och observera hur det går. Och observera är det samma som att titta på, inte att fråga ”vad tycker du?”.

Om du bygger menyn i flera nivåer så tar du gruppen av postitlappar med bara sammanfattningarna synliga, grupperar dem och sammanfattar dem i en postitlapp med ett eller få ord på. Alltså precis som i steget innan.

Så där fortsätter du att pussla. Backa och gör om när det behövs, hoppa tillfälligt över svårigheter och återkom.

Om ni är flera kan ni göra en postitlappbaserad meny tillsammans eller så kan ni göra varsin som ni presenterar för varandra. Då kan ni plocka det bästa från de olika menyerna.

Några tips:

  • Ett menyalternativ för att komma till sidans startsida.
  • Lägg aldrig in länkar i navigationsmenyn till dokument eller bilder. Det är inte vad användare förväntar sig att hitta där.
  • Använd inte navigationsmenyn för att länka bort från webbplatsen (till annan webbplats i organisationen). Om du har det behovet, lös det på något annat sätt. Vänj användarna att navigationsmenyn används för att navigera på och inom den egna webbplatsen.
  • Överväg ett alternativ för att hitta till sidor på annat språk. Även om du inte har en komplett sajt på till exempel engelska är det ofta bra att ha en sammanfattande sida som förklarar var jag hamnat, vad du erbjuder och om jag kan få hjälp på något annat sätt än via webbsidor på ett språk jag inte förstår.

Nu har vi en meny som vi är rätt nöjda med. Nu bjuder vi in en kollega eller någon annan som inte varit med i arbetet. Visa upp de sammanfattande postitlapparna. Fråga: Vad förväntar du dig finns under respektive lapp? Lyft på sammanfattningen och visa vad som står på dessa lappar och fråga: Var det här vad du förväntade dig? Skulle du sammanfatta med ett annat ord?

Lyssna och lär. Ställ gärna frågor för att förstå men gå inte in i någon argumentation. Personen som testar har alltid rätt, hon är expert på hur hon resonerar.

Använd några stycken personer för att testa. Ofta får vi bygga om lite. Testa igen, gärna med personer ur den riktiga målgruppen.

Skärmbild på användarkonton i Wordpress. En del använder avatarer från gravatar.com

Skapa en egen avatar på Gravatar för WordPress

Skärmbild som exemplifierar användning av avatarer i ett kommentarflöde.

Avatarer från gravatar.com i kommentarsflödet på axbom.se.

I WordPress kan du fixa en liten bild av dig själv som (kanske) visas i anslutning till ditt användarkonto. Den visas för den som är administratör för wordpressinstallationen och kanske i anslutning till artiklar eller kommentarer som du skriver. Det beror på om wordpresstemat är designat för att visa vem som skriver något.

Det förenklar för den som är admin på en stor sajt och gör det trevligt för  besökare att se en bild (avatar) av de som jobbar med sajten.

Bilden lägger du in på den fristående tjänsten gravatar.com. Genom att ange samma mejladress som för ditt konto på wordpressinstallationen kan din avatarbild kopplas ihop med dig, inte bara på den egna wordpressinstallationen utan också på wordpress.com om andra tjänster på nätet.

Skärmbild på användarkonton i WordPress. En del använder avatarer från gravatar.com

Användarkonton i WordPress kan visas med avatar (personlig bild) från gravatar.com

Användarkonton och behörighet i WordPress

Inlägget är en del av en wordpressutbildning för Friskis&Svettis-föreningar i stockholmstrakten.

Admininstrativt konto i wordpress

För varje webbplats skapar jag ett administrativt användarkonto. Jag ger kontot samma namn som ”förnamnet” på webbplatsen. Om webbplatsen heter sodertalje.friskissvettis.se så heter kontot ”sodertalje”.

Det här kontot är opersonligt för att inte hela webbplatsen ska bli beroende av mejladressen till någon som slutar. Utgående från det kontot delar vi ut användarkonton till de som jobbar med webben.

Det dagliga arbetet med webben ska ske med personliga användarkonton, kopplade mot personens mejladress. Det ger en spårbarhet som är nödvändig om man råkar ut för intrång. Man behöver då veta var man ska täppa igen.

Administrativt mejlkonto för wordpressinstallationen

För det administrativa användarkontot skapar jag ett mejlkonto på gmail, Googles mejltjänst. Detta mejlkonto använder jag för att aktivera en del nättjänster som vi kommer att behöva, som:

  • Google Webmaster Tools (hålla koll på att Googles sökmotor hittar alla våra sidor),
  • Google Analytics (webbstatistik) och
  • Akismet (spamfilter för kommentarsfält).

Du får det inloggningsuppgifterna till gmail-kontot av mig. Och nähä, jag skriver inte ut användarnamn och lösenord här. 🙂 Du får gärna gå in på inställningarna i gmail-kontot för att ändra t.ex. hur man kan återställa lösenordet, men byt inte lösenord under projektet, jag behöver logga in då och då. När projektet är klart är det bara bra om du byter lösenord. Se till att ha en rutin så att andra kan komma in på kontot om du slutar eller råkar ut för något. Till exempel: Lösenordet nedskrivet på en lapp i ett igentejpat kuvert, inlåst i kollegans skåp.

Om du inte gjort det redan, skapa nya personliga användarkonton för de som ska jobba med webbplatsen.

Behörighetsnivåer eller roller i WordPress

WordPress har olika roller med olika nivå på rättigheter. Jag rekommenderar att de används så här:

  • Admin – för dem som under projektet ändrar i menyer, delar ut behörighet.
  • Redaktör – för den som normalt jobbar med webbpublicering. Kan förutom att ändra sina egna artiklar ändra i andras.
  • Skribent – kan skriva och publicera egna artiklar men inte ändra i andras. Lämpligt för någon som skriver inom ett visst verksamhetsområde men inte har ansvar för helheten.
  • Medarbetare – kan skriva artiklar men inte publicera dem själv. Kanske lämpligt för volontärer, praktikanter.
  • Prenumerant – inte relevant i det här fallet. Låg nivå av rättigheter, typ kommentera (lite beroende på sajtspecifika inställningar).

Användare skapas från administrationspanelen (till vänster som inloggad admin).

Komplettera din egen profil (under ”Användare i admin-panelen) med tillräcklig information för att folk som jobbar med webben ska känna igen dig. Uppmana övriga att göra det också.

För att göra det lite trevligare kan du välja en egen avatar, ett personligt foto som kan visas i anknytning till ditt användarkonto.