Finjustera utseendet på webbplatsen

finjusteraNär du har kommit så här långt börjar din webbplats se ut ungefär som du hade tänkt dig, men några små justeringar till vill du säkert göra. I detta avsnitt får du lära dig att välja vad som ska synas i webbplatsens sidokolumn – givetvis förutsatt att ditt tema har en sidokolumn. Troligtvis kommer du redan ha valt språk, men om du valde fel vid installationen eller har ångrat dig så går vi igenom hur du byter. Vi visar också hur du laddar upp en egen bild till sidhuvudet för att sätta en personlig prägel på webbplatsen.

Välja block och sortera sidokolumnen

I det tema vi använder som exempel, Patchwork, finns en sidokolumn till höger. I den finns ett antal block som visar sådant som en förteckning över alla sidor som finns på webbplatsen eller länkar för att logga in i administrationsgränssnittet. Varje sådant block kallas för en widget.

WordPress låter dig välja vilka block som ska synas, samt i vilken ordning de ska sorteras. Klicka på Utseende i sidomenyn i administrationsgränssnittet och sedan på Widgets för att komma till sidan där du kan välja och sortera dina block.

Nu visas en lista på alla tillgängliga block i vänsterkant, samt en lista på de aktiva i högerkant. Ytterligare widgets som lägger till specialfunktioner kan läggas till. Hur man gör går vi igenom senare i kapitlet.

Du kan lägga till nya block och sortera de aktiva blocken genom att dra och släppa dem i den ordning du vill. Du kan även ändra inställningar för aktiva block genom att klicka på pilen till höger om widgetrubriken.

Inställningarna skiljer sig åt mellan olika typer av block, men de flesta har åtminstone en inställning för vilken rubrik de ska använda samt ett alternativ för att radera blocket från listan över aktiva block.

Du kan själv utforska funktionen på de olika blocken och bestämma dig för vilka du vill använda. Till exempel skapar Etikettmoln en samling med dina etiketter, där de som används oftast visas med större text.

Lägg till egna widgets

Ett par widgets följer alltså med WordPress, men det finns många fler användbara att ladda hem. De kan ses som specialfunktioner på webbplatsen, som du enkelt placerar i till exempel en sidokolumn. Användningsområdena är många. Till exempel kan du visa nyhetsflöden från en annan sajt eller ett fotogalleri.

finjustera-tillaggEn widget installeras på samma sätt som insticksmoduler, även kallad plugins eller tilläggsmoduler (som vi går igenom senare). Men medan insticksmoduler kan göra allt möjligt för din webbplats är syftet med en widget just att lägga dem i en sidokolumn.
finjustera-sok
Däremot installeras de på samma plats. Klicka därför Tillägg och sen Lägg till nytt i WordPress administrationsgränssnitt.

Där kan du söka efter alla tänkbara typer av insticksmoduler. Lägg till ordet ”widget” i din sökning så kan du hitta mycket intressant. Direkt i sökresultatet kan du klicka Installera nu. Modulen laddas in. Klicka Aktivera tillägget för att testa det.

När du nu går till sidan för dina widgets, alltså där du anpassar sidokolumnens block, kommer en ny widget ha dykt upp. Dra den till spalten, gör dina inställningar och du är färdig.

varningVarning!

Alla Widgetar är inte bra

Eftersom vem som helst kan tillverka en widget så varierar kvaliteten kraftigt. Notera vilket betyg den har fått i WordPress egen katalog. Fem stjärnor är högst. Här ser vi en insticksmodul från Facebook som har fått tre av fem i betyg. Det är okej, men inte jättebra. Undvik framförallt de som har riktiga bottenbetyg.

finjustera-varning

johannaJohanna

Fyra block till höger

Eftersom Johannas tema har en meny i överkant som listar alla sidor på webbplatsen väljer hon att inte använda blocket för Sidor.

Däremot lägger hon till blocken för Senaste inlägg och Senaste kommentarer så att kommentarer från hennes besökare syns direkt på startsidan.

Hon lägger även till ett block för Sök samt ett för Text så att hon direkt i sidokolumnen kan skriva en kort text om Lilla Fiket.

Hon sorterar dem i ordningen Sök, Text, Senaste inlägg, Senaste kommentarer och Länkar. När hon är klar justerar hon inställningarna och skriver en kort presentation i textblocket.

Ladda upp en egen logotyp

Detta avsnitt går igenom hur man lägger in en egen logotyp eller bild i sidhuvudet på ett tema som inte är förberett för det. Vissa WordPress-teman (till exempel standardtemat och Patchwork som används i exemplet) tillåter att man ändrar färger eller lägger upp bilder i sidhuvudet utan manuell uppladdning och redigering av HTML-kod. Du kan kontrollera om ditt tema stödjer detta genom att klicka på Utseende i administrationsgränssnittets vänstermeny. Därunder hittar du, om ditt tema stödjer det, ett alternativ för att redigera sidhuvudet. En annan fördel är att WordPress då kan beskära bilden till rätt storlek. Inget behov av bildredigeringsprogram alltså. Se bara till att din originalbild är tillräckligt stor.

ÖverkursÖverkurs!

Bättre och anpassade menyer

I listan över tillgängliga widgets finns en som heter Anpassad meny. Det är ett sätt att skapa egna menyer i sidospalten. Menyer är listor med länkar, som kan leda till både sidor på den egna sajten och till andra.

Innan det fungerar så måste Johanna skapa en egen meny. De sidor hon har skapat (”Meny”, ”Hitta hit” och så vidare) syns redan på sajten, men genom att göra egen meny kan hon enkelt ändra ordning på länkarna. Dessutom kan hon lägga till en länk till Lilla Rosteriet, som hon köper sitt kaffe från. Samma sorts meny kan användas både som navigering i sidhuvudet och i sidospalten. Vi passar därför på att ändra den vanliga menyn nu.

Johanna klickar på Utseende och sen Menyer. I rutan Namn för meny skriver hon ”Sajtnavigering” och klickar på Skapa meny. Därefter väljer hon vad hon vill ha med i menyn. Under Anpassade länkar fyller hon i adressen www.lillarosteriet.se i URL-fältet och skriver ”Lilla Rosteriet” i etikettfältet (den klickbara texten på sajten). Till sist klickar hon på Lägg till i meny.

Under Sidor syns de sidor hon nyss skapade. Hon klickar för allihop och sedan på Lägg till i meny. Hennes val dyker upp till höger. Där kan hon också ändra ordningen på länkarna genom att dra och släppa länkarna.

Till sist tittar hon längst upp till vänster, under Temaposition. Det anger var i temat den meny hon just skapade ska ligga. Eftersom temat Patchwork bara har plats för en meny finns bara ett val att göra. Hon väljer ”sajtnavigering” i listan och klickar Spara. Nu har navigeringen på webbplatsen bytts ut mot hennes nya meny.

När hon i framtiden skapar sidor måste dessa manuellt läggas in i menyn för att synas på webbplatsen.

Så till de anpassade menyerna i sidospalten. Johanna har regelbundna kaffeprovningar på Lilla Fiket, och vill gärna lyfta fram dem lite extra på bloggen.

Dessutom gillar hon att bjuda på recept på bakverk. Därför har hon tidigare skapat en kategori för nyhetsinlägg som heter ”Kaffeprovningar” och en som heter ”Recept”. Nu vill hon skapa en meny som länkar till dessa två kategorier.

Hon börjar med att klicka på Utseende och sen Menyer och sedan på plus-symbolen för att skapa ännu en meny. Hon kallar den nya menyn ”Aktuellt”, och klickar Skapa meny. Sedan tittar hon längst ner i den vänstra kolumnen. Där finns hennes kategorier listade. (Titta under Visa alla om du inte ser dem.) Hon markerar Kaffeprovningar och Recept, klickar på Lägg till i meny och sedan på Spara meny. Nu är den färdig, men syns ännu inte på webbplatsen.

Det är här anpassade menyer kommer in i bilden. Johanna klickar Utseende → Widgets. Där drar hon Anpassad meny till högerspalten. Hon klickar på den lilla pilen, vilket öppnar inställningarna för meny. Under Titel skriver hon ”Aktuellt” och väljer sedan menyn Aktuellt från rullgardinsmenyn. Hon klickar Spara. Nu syns den nya menyn i webbplatsens högra kolumn.

finjustera-menyer

finjustera-laggtillmeny

Denna del tillhör de mer avancerade i guiden eftersom du kommer att ändra i källkoden för temat manuellt. Guiden följer dig genom alla steg och du behöver egentligen inga förkunskaper, men om du känner dig osäker kan det ändå vara värt att hoppa över denna del eftersom man lätt kan ha sönder temat när man ändrar i koden.

Ett bra sätt att ge sin webbplats en egen identitet är att använda en egen bild i sidhuvudet. Det är förvisso inte alla teman som har en bild i sidhuvudet, men de instruktioner som följer förutsätter att du valt ett tema med bild i sidhuvudet.

Det första vi ska göra är att skapa den bild som ska läggas in i sidhuvudet. Det är viktigt att den bild vi skapar är exakt på pixeln lika stor som den gamla bilden. Därför börjar vi med att ta reda på hur stor den gamla bilden är. Det finns ett par olika sätt att göra detta, men det enklaste är oftast att öppna din webbplats i webbläsaren. Högerklicka sedan på bilden i sidhuvudet.

Nu får du upp en meny, exakt vad som står i den beror på vilken webbläsare du har, men leta efter ett alternativ som påminner om Visa bild. Ibland ligger temats grafiska sidhuvud inlagt som en bakgrundsbild i sidhuvudet och då ska du istället välja Visa bakgrundsbild.

Om du har gjort rätt öppnar nu din webbläsare en sida som enbart innehåller bilden. Högerklicka igen på bilden och leta efter ett alternativ som påminner om Egenskaper. Nu får du upp ett nytt fönster med information om bilden och här står dimensionerna angivna i pixlar. För temat Patchwork är dimensionerna 650 × 150 pixlar.

Precis så stor, varken större eller mindre, ska den nya bilden vara. Notera även adressen (URL:en) till bilden, den behövs längre fram.

Öppna nu den bild du vill använda som nytt sidhuvud i ditt program för bildredigering. Det bästa programmet för bildredigering är Adobe Photoshop, men det kostar pengar. Om du inte har det installerat finns det alternativ på nätet, till exempel Pixlr (http://pixlr.com/).

Oavsett vilket program du använder ska du öppna bilden och sedan beskära den så att den blir exakt lika stor som den gamla bilden i sidhuvudet. När du är klar sparar du bilden, förslagsvis på skrivbordet.

Därefter är det dags att ladda upp bilden till WordPress.

Det enklaste sättet att ladda upp en bild är att använda WordPress eget mediabibliotek. Klicka på Media och sen Lägg till i menyn i WordPress administrationsgränssnitt. Använd knappen Välj filer som öppnar ett nytt fönster där du kan ladda upp din bild, eller dra och släpp bildfilen till det angivna området.

Nu visas den uppladdade bilden tillsammans med diverse fält där du kan fylla i en bildrubrik eller en bildtext. I fältet Filadress finns sökvägen till bilden du nyss laddade upp och det är den sökvägen vi är intresserade av. Markera därför hela adressen och kopiera den.

Exakt hur du nu ska göra beror på vilket tema du har valt och därför är det svårt att ge detaljerade instruktioner. Strax till höger om redigeringsrutan finns i alla fall en lista över de filer som hört till temat. I de allra flesta teman är det filen style.css du ska ändra i. Klicka därför på den för att öppna källkoden för filen.

Det enklaste sättet att ta reda på var du ska ändra är att söka efter adressen till den gamla bilden. I fönstret där du kunde se dimensionerna på den gamla bilden står även adressen till den, och denna kan vi använda som ledtråd.

I WordPress standardtema heter bilden path.jpg, men i andra teman heter den ganska säkert något annat. Om du tittar noggrant i koden i style.css bör du dock någonstans hitta namnet på eller adressen till den gamla bilden, och där ska alltså sökvägen till den nya bild vi nyss laddade upp skrivas in.

När du har hittat adressen till den gamla bilden tar du därför bort den och klistrar istället in adressen till den nya bilden. Det är troligt att den gamla adressen är en så kallad relativ sökväg. Med det menas att den pekar mot den gamla bilden utifrån den plats där filen style.css ligger. Relativa sökvägar innehåller inte ”http://”. Adressen du ska klistra in ska dock vara en absolut sökväg, vilket innebär att den börjar med ”http://” och innehåller hela sökvägen fram till bilden. Kontrollera noggrant att adressen du klistrar in är en absolut sökväg.

När du är klar klickar du på Uppdatera fil och ändringarna sparas. Du kan kontrollera slutresultatet på webbplatsens utsida, om du gjort rätt ska din bild nu synas i sidhuvudet.

Tips! Tips!

Det kan vara en bra idé att klistra in adressen i ett textdokument eller liknande för att ha den kvar längre fram. Det återstår ett par steg innan vi kommer att infoga adressen till bilden, och det är lätt hänt att man råkat kopiera något annat innan det är dags att klistra in adressen.

Nu är det dags att ändra koden i temat för att tala om för WordPress att det är den nya bilden som ska användas istället för den gamla. Börja med att klicka på Utseende och sen Redigerare i administrationsgränssnittets vänstermeny.

Nu visas en redigeringsruta där källkoden för temat finns direkt tillgänglig. Här kan du skriva om koden precis som du själv vill, och även om man sällan vill det är det precis vad vi ska göra för att byta bild i sidhuvudet.

varningVarning!

Koden kan gå sönder

Det är lätt att tabba sig när man redigerar direkt i koden. Även små misstag kan göra att webbplatsen helt slutar fungera. Om du är osäker kan det därför vara bra att kopiera hela koden till ett textdokument på datorn så du kan gå tillbaka till en fungerande version om något går snett.

johannaJohanna

Byter till bild på kaffebönor

Johanna har valt temat Patchwork, och nu vill hon byta ut mönstret i sidhuvudet mot en närbild på kaffebönor. Johanna börjar med att ta reda på dimensionerna på den gamla bilden genom att högerklicka på den. Eftersom bilden i Patchwork är inlagd som en bakgrundsbild klickar Johanna på Visa bakgrundsbild. Då visas bilden från sidhuvudet på en egen sida. Johanna högerklickar på bilden igen och klickar sedan på Egenskaper vilket visar att den heter patchwork.jpg och är 596 × 255 pixlar stor.

finjustera-bildstorlek

Johanna ser direkt att bilden inte är stor nog för att fylla hela bakgrunden – däremot är den designad för att automatiskt läggas flera gånger efter varandra utan några synliga skarvar.

Hon bestämmer sig för att använda samma höjd på bilden, men dra ut bredden rejält. Det spelar ingen roll om den blir för bred, eftersom den ligger som bakgrundsbild och bara tar upp så mycket plats som den tilldelas.

Därefter öppnar Johanna bilden på kaffebönorna i sitt bildredigeringsprogram.

Eftersom Johanna även tycker om att fota till vardags har hon Photoshop installerat och hon använder det programmet för att beskära bilden till 1500 × 255 pixlar.

Johanna loggar sedan in i WordPress administrationsgränssnitt och klickar sig fram till mediauppladdningen där hon laddar upp bilden på kaffebönorna.

När bilden är uppladdad markerar hon och kopierar adressen till bilden innan hon går vidare. Därefter klickar Johanna på Utseende i huvudmenyn, och därefter på Redigerare.

Nu får Johanna upp koden för temat. Hon klickar på style.css för att redigera den filen och börjar sedan ögna igenom koden. En bit ner hittar hon mycket riktigt en länk till bilden patchwork.jpg och hon byter ut hela adressen till den gamla bilden mot adressen till den nya, som hon tidigare kopierade.

Till sist klickar Johanna på Uppdatera fil för att spara ändringarna och till hennes stora glädje dyker bilden på kaffebönorna upp på webbplatsens utsida. Precis som det var tänkt!