Skärmbild: Sätt ett lösenord på en sida eller ett inlägg i Wordpress.

Skapa en lösenordsskyddad sida som dokumentarkiv

Nu ska vi använda standardfunktioner i WordPress för att skapa en simpel form av intranät med dokumentarkiv. En eller fler sidor som är skyddade med lösenord.

Jag börjar med att göra klart: Det här är en lösning som du inte ska använda för känslig information som affärshemligheter och personalärenden. Vi kör med ett gemensamt lösenord som lätt får vingar och sprider sig. Nättrafiken till vår sida krypteras inte och kan potentiellt avlyssnas.

Den som känner till länken/adressen till ett dokument som ligger på en lösenordsskyddad sida kan komma åt den.

Vad kan vi använda den här simpla inloggningen till? Till sådant som inte är hemligt. Adminstrativa saker som du inte vill visa upp för kunder. Sidor som du inte vill ska hamna i sökmotorer. Sidor som är under utveckling och som du vill remissa till enstaka personer innan de publiceras. Material som du kan visa en mindre grupp människor för att de ha faktaunderlag och känna sig initierade.

Ungefär sådant som du kan tänka dig att skriva i en medlemstidning.

Ok, då kör vi.

Lösenordsskydda en webbsida eller inlägg

  1. Skapa sidan eller inlägget som vanligt.
  2. I rutan ”Publicera” på redigeringssidan, ange ett lösenord.
  3. Om du har flera sidor som ska användas av samma målgrupp ger du dem samma lösenord.
Skärmbild: Sätt ett lösenord på en sida eller ett inlägg i WordPress.

Sätt ett lösenord på en sida eller ett inlägg i WordPress.

Svårare än så är det inte. Besökare till sidan kommer att se rubriken men inte mer utan att ange lösenord.

Skärmbild: Lösenordsskyddat inlägg i WordPress

Lösenordsskyddat inlägg i WordPress. Ange det hemliga lösenordet för att få läsa artikeln.

Lägg till dokument på sida i WordPress

Låt oss anta att vår lösenordssida används för föreningsfunktionärer som behöver tillgång till protokoll, telefonlistor och dokumentmallar.

Enstaka dokument

Innan du gör något i WordPress: Se till att dokumentet har ett filnamn som fungerar i alla webbläsare på alla operativsystem.

  • Använd bokstäverna A till Z (versaler och gemener), siffror och minustecken en (endast en) punkt innan filtypen (t.ex. pdf) för att vara på säkra sidan. Det finns andra tecken som fungerar men dessa räcker.
  • Olika sorters operativsystem (på olika sorters datorer) är känsliga för olika tecken (mellanslag, komma, punkt, semikolon, tab, snedstreck, bakåtsnedstreck/backslash, citattecken, accent, och-tecken) som har specialfunktioner som att peka ut sökväg eller skilja flera olika filer åt.
  • Å, Ä och Ö borde fungera men när filer flyttas mellan olika sorters datorer så kodas de olika och det kan bli stört omöjligt att få tag på filen.
  • Det är bättre att använda minustecken mellan ord i ett filnamn än understrykningsstreck. Om filnamnet är länkat, det vill säga understruket syns det inte om det är ett understruket mellanslag eller understrykningsstreck.
Exempel på filnamn med felaktig teckenkodning som inte kan laddas ned.

Exempel på filnamn med teckenkodning och specialtecken som gör att de inte kan laddas ned till alla vanliga sorters datorer.

Sedan: Klicka på den lilla solliknande ikonen ovanför redigeringsrutan för att ladda upp dokumentet från din dator till WordPress.

Ge dokumentet en bra titel i  Wordpress. Titeln kommer att synas som länktext till det uppladdade dokumentet.

Ge en bra och tydlig titel till dokumentet. Det används i WordPress som länktext.

Ge en bra och tydlig titel till dokumentet. Det används i WordPress som länktext.

Klicka på ”Filadress” för att få rätt sorts ”Länkadress”. Annars kommer inte användaren åt pdf-filen.

När du klickar på knappen ”Infoga i innehåll” så länkas dokumentet in i sidan/inlägget.

Ladda upp många dokument till WordPress

När du har många dokument som ska laddas upp och länkas in går det snabbare om du först lägger alla dokument i samma mapp på din dator. Sedan laddar du upp dem från Admin-panelen > Media > Lägg till.

Klicka ”Välj filer”. Nu kan du välja flera filer (Control + musklick).

Om det är många och stora filer så kan det ta tid att ladda upp.

Nu kan du ange bra titlar på alla filer och sedan klicka ”Spara alla ändringar”.

När det sedan är dags att länka in ett dokument i en sida som du jobbar med, klicka på den lilla sol-ikonen ”Lägg till media” ovanför redigeringsfönstret. Välj fliken ”Mediabibliotek”. Leta reda på dokumentet. Klicka ”Visa” och sedan ”Infoga i innehåll”.

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