Etikettarkiv: wordpress

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

Skärmbild av Friskis&Svettis hemsida baserad på Wordpress

Friskis&Svettis Nackas wordpresstema

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

Vi utgår från ett wordpresstema som Friskis&Svettis i Nacka låtit utveckla med hjälp av Kommunikationsbyrån Tills och utvecklaren/formgivaren Klas Ehnemark.

Skärmbild av Friskis&Svettis hemsida baserad på WordPress

Friskis&Svettis i Nacka använder ett eget tema till sin wordpresswebb.

Temat styr skribenterna hur sidorna ska se ut och fungera för att skapa en bra helhet. Temat följer Friskis&Svettis centrala grafiska designregler.

WordPresstemat använder inte alls inlägg, bara sidor. Det är inte gjort för att blogga.

På startsidan och några andra ställen används bildspel eller ”rullande bilder” för att visa en uppsättning bilder.

På startsidan och andra sidor används puffar för att med bild och korta texter locka besökaren till andra sidor.

Startsidan visar upp schemat i dag och i morgon för Friskis&Svettis Nackas två anläggningar.

På en sida visas ett komplett schema där det är möjligt att boka ett pass. All schemainformation kommer från det schema- och inpasseringssystem som föreningen använder, BRP.

Anläggningarnas öppettider skrivs in på ett enda ställe och visas på flera.

Navigationsmenyn är i en nivå.

Föreningens senaste tweet på Twitter visas i sidhuvudet och där finns också länk till föreningens sida på Facebook.

Rundade hörn på bilder

Det är möjligt att få rundade hörn på bilder utan att bearbeta dem i Photoshop eller liknande verktyg. Rundningen ansluter till designen med ett rundat hörn i sidhuvudet.

Skärmbild som visar hur vi rundar hörnen på en bild i WordPress.

Vi rundar hörnen på en bild i WordPress redigeringsläge

Vi omsluter bilden med shortcoden

[roundcorners] och [/roundcorners]

Resultatet blir:

Skärmbild som visar en bild med rundade hörn i WordPress.

Resultatet i WordPress med rundande hörn på en bild.

Inramning ”redbox”

Vi kan rama in med en röd inramning som knyter an till den grafiska profilen. Inramningen skapas med en ”shortcode” som du skriver i redigeringsfältet. För att kunna tolka koden måste den vara skriven exakt rätt, med raka klamrar.

Skärmbild med exempel på inramning i F&S wordpresstema

Inramning med "redbox" i F&S wordpresstema.

Inramningen som visas i bilden skapas med följande kod:

[redbox title = ”Rubrik för inramningen”]

Lite innehåll. En tabell kunde ha varit bättre exempel.

[/redbox]