Etikettarkiv: CMS

Omslaget på gratisboken "Webbpublicering med Wordpress".

Bästa guiden för att komma i gång med WordPress

Jag har i flera år rekommenderat och delat ut Internetstiftelsens eminenta guide: ”Skapa en webbplats med WordPress”. Den är riktigt bra men börjar bli lite daterad eftersom den visar WordPress 3.0 och de senaste versionerna skiljer sig en hel del utseendemässigt i admingränssnittet.

Så nu är mitt förstahandsval Thord Daniel Hedengren pdf-bok: ”Webbpublicering med WordPress”. För mig dök den upp på radarn under wordpresskonferensen WordCamp Sthlm, i anslutning till Internetdagarna 2012.

Boken innehåller det viktigaste för att komma förstå och komma igång med en wordpressajt. Kapitelindelningen följer ett naturligt flöde.

Webbpublicering med WordPress  finns för nedladdning från Thord Daniel Hedengrens webbplats.

Sa jag att den är på svenska? Bara det…

Boken är sponsrad av en rad svenska webbhotell.

Thord Daniel Hedengren har skrivit flera böcker om WordPress. Jag har inte läst någon annan.

Sökmotoroptimering för webbredaktörer

Den här presentationen kommer från en inspirationsföreläsning för Friskis&Svettis.

Vi började med att prova att söka efter gym i södertälje i Google, en sökfras som verkar rimlig av personer i Friskis&Svettis målgrupp.

Skärmbild: Sökning efter gym i södertälje i Google.

Träfflista från Google när vi söker efter gym i södertälje. Klicka för att se i större format

Vi resonerar lite kring:

  • Friskis&Svettis syns inte i träfflistan som vi hoppats.
  • Högst upp och längst ned ser vi betalt annonsutrymme.
  • Diskussionsforuminlägg placerar sig bra. Uppfattas som relevanta. Tyvärr står det inget om Friskis&Svettis i inläggen, bara lokala konkurrenter. Här skulle vi ha svarat.
  • Kartbilden och de geografiska träffarna tar mycket plats. Här finns vi inte med heller.
  • Konsumentsajterna Reco och Rejta finns med.
  • Några gymportaler finns med och en av dem nämner faktiskt Friskis&Svettis så att det syns i träfflistan. Bra!
  • I början av andra träffsidan finns F&S Södertäljes facebooksida. Långt ned på sidan finns F&S Södertäljes hemsida.

Den nuvarande lösningen är verkligen inte bra. Att flytta till egen domän och använda WordPress kommer i sig förbättra utgångsläget att synas i Google och andra sökmotorer.

Hur ska vi då tänka när vi bygger upp våra nya sidor? Ett första steg är att skriva tydligt och förstå vad sökmotorerna uppfattar och vad de inte ser. Men om det i presentationen…

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

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]