Etikettarkiv: Friskis

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. 🙂

Skärmbild på Friskis&Svettis i Södertäljes hemsida

Följ Friskis&Svettis flyttprojekt på webben

 

Friskis&Svettis består av 158 ideella föreningar och en riksförening. Man har en gemensam webbplattform som används av majoriteten av föreningarna. Vid årsskiftet upphör supporten på den gemensamma plattformen. Det är upp till de enskilda föreningarna vilken webbplattform, eller CMS-verktyg, de väljer.

Flera Friskis&Svettisföreningar i stockholmsregionen har gått samman för att tillsammans göra en flytt till WordPress. Jag, Stefan Pettersson, har i mitt konsultbolag Lumano fått uppdraget att leda projektet och hjälpa till med utbildning.

Det absolut viktigaste syftet med projektet är att landa föreningarnas webbar i en vanlig, enkel och billig CMS-lösning (Content Management System). På köpet kommer vi också att förbättra sökbarhet, tillgänglighet för funktionshindrade och göra det lättare att jobba med sociala medier.

Vi har kommit överens om att berätta om projektet på den här bloggen, vad och hur vi jobbar. Det gör vi primärt för att dela med oss av kunskap, erfarenheter och inspiration till andra Friskis&Svettis-föreningar. Om andra idella verksamheter har nytta av det så är det bara roligt.

Några av de viktigaste aktiviteterna som vi kommer att rapportera om:

  • Inventera befintligt innehåll.
  • Anpassa design (wordpress-tema).
  • Skruva upp tekniken (wordpress network/multi site).
  • Planera drift, förvaltning och support.
  • Utbildning i form av två halvdagar.
  • Föreningarna flyttar själva sitt befintliga innehåll.
  • Omkoppling till nya sajterna.
  • Uppföljning av projektet och planering av fortsatt arbete.

Dokumentationen kommer inte att bli en helt komplett instruktionsbok men med lite grundkunskap om webbpublicering så ska det räcka. Vi kommer att hänvisa till bra källor på nätet och en och annan bok.

Det här och kommande inlägg licensieras enligt Creative Common Attribution Share Alike (CC BY-SA 3.0).

Det betyder förenklat att du får: kopiera, ändra i och distribuera dokumentationen. Du får använda dokumentationen för kommersiella ändamål. Du måste alltid ange Friskis&Svettis och Lumano som upphovsmän och/eller licensgivare. Om du ändrar, bearbetar eller bygger vidare på verket får du endast distribuera resultatet under samma licens eller en liknande licens som denna. För detaljer hänvisas till: Det här och kommande inlägg licensieras enligt Creative Common Attribution Share Alike (CC BY-SA 3.0).

Om du har frågor eller vill komma med tips, skriv gärna en kommentar.