Åtta svar från en webbdesigner

Åtta-svar-från-en-webbdesigner

Som webbdesigner och skribent får jag ofta frågor om hur jag jobbar. Därför vill jag nu ta en liten stund och svara på de vanligaste i några inlägg, som sedan kan bli webbplatsens ”Vanligaste frågor”. Vi börjar med några frågor kring webbdesign.

Frågorna här har jag snappat upp under kundmöten, nätverkstillfällen och från samarbetspartners. Har du några frågor att ställa mig, lämna gärna en kommentar så ska jag göra mitt bästa för att svara på dem.

I detta inlägg kommer du får svar på:

    1. Kan jag ha kvar min nuvarande webbplats medan du bygger min nya?
    2. Vad kostar en ny webbplats?
    3. Hur påbörjar vi ett samarbete?
    4. Vad behöver jag på min webbplats?
    5. Vad använder du för att skapa webbplatser?
    6. Vad är WordPress?
    7. Är allt i WordPress gratis?
    8. Varför är det så viktigt med ett uppdaterat WordPresstema?

 

1. Kan jag ha kvar min nuvarande webbplats medan du bygger min nya?

Korta svaret är ”Ja”. Din nuvarande webbplats kommer inte bli påverkad av vårt nybygge. Din hemsida kan ligga precis som den ligger tills den nya webbplatsen är klar.

När jag bygger en ny webbplats, så bygger jag alltid upp den på en underdomän till min företagssida. På så sätt kan du se webbplatsen ta form, och flytta över den till din domän när den är färdigställd.

2. Vad kostar en ny webbplats?

Detta beror helt på vad du är ute efter. Webbplatsens storlek och funktioner är det som kan påverka prisbilden. Några vanliga frågor för att komma fram till ett ungefärligt pris kan vara:

  • Hur stor webbplatsen ska vara (antal huvudsidor och undersidor)
  • Vilka funktioner sidan ska ha?
  • Behövs någon del av sidan specialbyggas då funktionen inte finns på marknaden?
  • Vad finns färdigt i dagsläget? (Foton, logotyper, innehåll, grafisk profil och typsnittval med mera)

För att komma fram till en passande prisbild möter jag alltid mina nya kunder och går igenom ett antal frågor, som gör att jag kan få fram en uppfattning om den nya webbplatsen. Efter det skickar jag ut en offert till dig som kund.

3. Hur påbörjar vi ett samarbete?

Vi börjar alltid med ett förbehållslöst möte, för att se om jag är rätt webbdesigner för dig. Detta möte är kostnadsfritt och vi kan träffas på en plats som passar dig. Om du känner att jag passar för jobbet och jag känner detsamma, så bokar vi in ett nytt möte där vi kan diskutera din nya webbplats i mer detalj.

Mellan mötena skickar jag ut ett ”frågebatteri” med ett antal frågor. På så sätt så kan du förbereda dig på vad vi kommer att diskutera. Efter detta möte skickar jag ut en offert. När den är godkänd så kan arbetet börja.

4. Vad behöver jag på min webbplats?

Detta är något som vi kan komma fram till tillsammans under våra möten. Men om du söker inspiration innan dess tänker jag föreslå något ovanligt, eller kanske inte så ovanligt.

Titta på dina konkurrenters webbplatser. Gör de något som du tycker om/inte tycker om?

Jag rekommenderar såklart inte att du härmar någon av dina konkurrenters webbplatser rakt av. Vad skulle vara poängen med det? Men om det brister i inspirationen kan det vara en bra plats att börja.

5. Vad använder du för att skapa webbplatser?

Jag använder främst publiceringsverktyget WordPress för att skapa webbplatser. Jag har valt att jobba uteslutande med WordPress då det erbjuder ett användarvänligt gränssnitt som underlättar för mina kunder.

6. Vad är WordPress?

WordPress är ett publiceringsverktyg som är släppt under en GNU GPL licens, vilket gör det gratis och tillåter hela världen att ladda ned och använda det. WordPress är också baserat på öppen källkod, vilket gör att alla kan studera, använda, modifiera och bygga vidare på det.

Mycket är möjligt inom WordPress tack vare dess öppna källkod, då du har en hel värld i ryggen. Tack vare sin licens behöver du inte heller betala licenspengar för att du nyttjar Wordpres källkod på din webbplats.

Är allt i WordPress gratis?

Ja, men nej. I teorin kan du bygga en hel webbplats med WordPress kärnkod, tema och plugins utan att betala något, förutom webbhotellsplatsen där din webbplats filer ligger. Men bara om du då använder gratisteman och gratisplugin.

Vill du vara på den säkra sidan, och det vill du, så rekommenderar jag att du använder så kallade betalteman som kontinuerligt utvecklas och säljs som en vara.

Du köper en licens till ditt valda tema och får då rätt till temats filer, en viss tids uppdateringar och teknisk support (ofta ett år). Du kommer aldrig bli av med ditt tema om du inte förlänger licensen. Men när licensen går ut får du inga mer uppdateringar och har inte rätt till den tekniska supporten från utvecklaren. Men den rätten är aldrig garanterad med ett gratistema.

8. Varför är det viktigt med ett uppdaterat tema?

Att ha tillgång till uppdateringar är viktigt ur en funktion- och säkerhetsaspekt då WordPress ofta uppdateras för att hållas funktionsdugligt, och för att stoppa hackningsförsök. Då är det viktigt att även ditt tema hänger med i svängarna. Något som inte kan garanteras på samma sätt om du använder ett gratistema.

Vad har jag  missat?

Så, detta var åtta svar från en webbdesigner. Jag valde att svara på de frågor som jag hör oftast. Men om du kände att jag missade något eller har en fråga på lager, ställ dem som en kommentar! Så ska jag göra mitt bästa för att besvara den.

Du kan också kontakta mig på anna@annalerneryd.se om du vill träffa mig för att prata om din webbplats.

Barntema childtheme vad är detEller vill du fortsätta läsa fler tips? Vad sägs om ”Vad är ett barntema till WordPress och varför det är så viktigt

Read More

Använd ditt barntema i WordPress

Använd ditt barntema i wordpress

Det första jag gör när jag har installerat ett tema åt en kund är att skapa ett barntema i WordPress. På så vis kan jag justera webbplatsens utseende, utan att mina kodändringar blir överskrivna när modertemat får en uppdatering.

I detta inlägg kan du lära dig hur du använder ditt barntema för att ändra ditt hemsidas utseende och funktioner.

Vill du läsa mer om barnteman och dess fördelar? Läs mitt tidigare inlägg ”Vad är ett barntema

Ändra aldrig i originalkoden

Jag ska berätta en liten hemlighet, det finns en extra anledning till att använda ett barntema. Om jag lägger till kod i mitt barntema, trycker på spara och inte gillar resultatet, så kan jag bara ta bort koden igen. Webbplatsen återgår direkt till att använda modertemats kod och allt blir återställt.

Om jag istället hade sparat över originalkoden, blir det mycket svårare att återställa. Speciellt om du ändrar i koden som ligger live på din webbplats, vilket du aldrig bör göra.

Visst går det att återställa. Du kan ladda ned en ny version av ditt tema, hitta koden du ändrade, klippa och klistra in den. Men det är mycket extra jobb, speciellt om du är ovan vid kod. Därför säger jag ändra aldrig i originalkoden. Använd ett barntema.

Nu ska vi istället lära oss hur vi använder vårt bartema som vi skapade i föregående blogginlägg.

Har du inte läst förra inlägget? Läs guiden om hur du kan ”Skapa ett barntema till WordPress”

Vad behöver jag för att ändra i mitt barntema?

Ja, först och främst behöver du ett barntema. I många köpeteman så skickar utvecklaren med ett färdigt barntema som du installerar och aktiverar på samma sätt som du installerade modertemat. Om inte, följ min guide här ovan för att skapa ditt barntema.

För att förstå denna tutorial behöver du:

  • En allmän förståelse av att ändra i css-kod
  • Admin-rättigheter för din WordPress-installation
  • Webbläsare Google Chrome (kan även fungera med andra, men denna används här)
  • Viss förståelse filerna inuti ett barntema, främst stilmallsfilen ”style.css”

Använda ditt barntema

  1. Vårt mål är att ändra länkfärgen i ditt tema. Öppna först en flik i din webbläsare där vi ser din webbplats. Hitta en textlänk. Kom ihåg att vi nu ändrar färgen på alla länkar som har denna färg.
  2. Högerklicka på din länk och välj ”Inspektera”.
    Inspektera din kod för att använda ditt barntema
  3. Du får nu upp en ny ruta i din webbläsare där html-koden som hör till din länk är markerad. Prova gärna att föra musen över de andra kodraderna och se hur delar av din webbplatser blir markerade. Det signalerar att koden du står över kontrollerar den delen av din webbplats.
  4. För tillbaka musen till länkens kod. Har du problem att hitta den igen, återupprepa föregående steg.
  5. Titta nu till höger i den nya rutan. Där finns all stilmallskod som kontrollerar utseendet av din webbplats. Det är den vi vill åt.
  6. Den stilmallskod (css) som vi vill ha hamnar oftast högst upp i den högra kolumnen. Men om du är osäker på vilken kod som kontrollerar det du vill ändra, så kan du här ändra i css-koden fritt för att se om något händer. Men var lugn, detta syns bara hos dig i din webbläsare. Vill du ha tillbaka det som det var behöver du bara uppdatera webbläsarens flik.
  7. I css-kod kontrolleras länkar av bokstaven ”a” (kallas för selector i kodspråk) som syns här på skärmbilden. Markera din version av den kod jag har markerat, högerklicka och välj kopiera.
  8. Nu loggar du in på din WordPress-sida och går till Utseende -> Redigerare. Detta val ser du endast om du har administratörsrättigheter.
  9. Nu klistrar du in den kod du just kopierat, under kodraden som börjar ”@Import url(….”
  10. Nu är det dags att ändra färgen. Färgkoder på webben kan se ut så här: #fc6b0a och kallas för hex-koder. Detta är den delen av koden som du ska byta ut.
  11. Gå till w3schools.com och välj en färg och kopiera hex-koden.
  12. Markera den nuvarande hex-koden och klistra in din nya. Kom ihåg att avsluta kodraden med en ; som fanns där innan. Det stänger kodraden, och utan den kommer det inte att fungera.
  13. Tryck sedan på ”uppdatera fil”.
  14. Du har nu bytt ut färgen på dina länkar. Om de inte ändras, kolla först att koden är den samma som i guiden, töm sedan din webbplats och webbläsares cache-minne och uppdatera sidan igen.

Så för att sammanfatta. För att lägga till ny kod i ditt barntema så:

  • Öppnar du din webbplats
  • Högerklickar på det du vill ändra och välj ”inspektera”
  • Avgör vilken css-kod som kontrollerar elementet du vill ändra.
  • Kopiera css-koden
  • Klistra in den i ditt barntema stilmall
  • Gör din ändring
  • Spara

I en perfekt värld skulle du göra dina ändringar i din stilmalls-fil lokalt på din dator och sedan ladda upp den, då det är bättre att göra ändringar lokalt för minska risken att något går fel. Men för enkelhetens skull visar jag er detta sätt. Ni kan såklart även göra det på det andra sättet om ni känner er bekväma med det.

Var något oklart? Kontakta mig gärna. Jag svarar på alla frågor.

Eller vill du fortsätta läsa fler tips?

planera blogginlägg med wordpress editorial calendarVad sägs om ”Planera blogginlägg med WordPress editorial calendar

Read More

Skapa ett barntema (child theme) till WordPress

Skapa barntema (child theme) för wordpress

Vill du skapa ett barntema i WordPress? Har du läst ”Vad är ett barntema?” så vet du redan varför det är en bra idé. Men för dig som är ny på sidan, så kan du läsa en kort återblick.

Ett barntema är en samling av filer som du kan använda för att skräddarsy ditt temas utseende och funktioner. Dessa ändringar blir inte överskrivna när ditt huvudtemas filer uppdateras. Ett barntema kan du använda för att helt ändra utseendet på ditt tema, eller för att göra små ändringar som bakgrundsfärg och typsnittsval.

Vad behöver jag för att skapa ett barntema?

Den enklaste versionen av ett barntema består av en mapp som ligger bredvid mappen med ditt modertema hos ditt webbhotell. I mappen finns en fil vid namn ”style.css” som är kopplat till ditt huvudtema. Denna fil är ditt barntemas stilmall och skapar din hemsidas utseende. Det är den vi ska skapa idag.

För att förstå denna tutorial behöver du:

  • En basal förståelse av html/css.
  • En viss förståelse av mappsystemet som bygger upp publiceringsverktyget WordPress.
  • Ftp-programmet Winscp (gratis), som vi kommer använda för att ladda upp ditt färdiga barntema till samma plats där din webbplats filer ligger. Ett ftp-progam fungerar och ungefär ut som utforskaren i Windows. Programmet ger oss tillgång till filerna som bygger upp din WordPress-installation. Du kan gratis ladda ned FTP-programmet ”Winscp” via Winscp’s offciella webbplats.

Vill du inte skapa ett barntema, men fortfarande ha en plats för kod som kan ändra ditt temas utseende?

Läs inlägget ”Vad är ett barntema?” Där ger jag tips på ett plugin som kan vara till hjälp.

Överkurs om barnteman

Ett barntema fungerar genom att du lägger till dubbletter av filer som finns i ditt modertema i ditt barntemas mapp. WordPress läser barntemats mapp först och därmed syns dina ändringar i filerna snarare än original-koden. Därför kan man även lägga dubbletter av andra filer från ditt huvudtema som du vill ändra i. Med vissa undantag för ”functions.php”-filen som behöver andra kopplingar. Men för att ditt barntema ska fungera måste du först skapa filen ”style.css”, då det är den filen som kopplar barntemat till modertemat.

Extra tips: Redigera aldrig kod live på din webbplats

Som allt annat gällande din hemsida, ändra aldrig i kod som ligger live din webbplats, utan skapa allt nytt lokalt på din dator innan du laddar upp det. Ta också alltid en komplett backup av din webbplats filer och databas innan du gör ändringar. Om du inte vet hur du gör, fråga ditt webbhotell.

Skapa ett barntema:

  1. Det första vi behöver är en kopia av mappen med ditt modertema. Det kan vi ladda ner från ditt webbhotell till din dator via ett ftp-program. Så det första vi gör är att ladda ned programmet ”Winscp” från deras officiella webbplats.
  2. Nu behöver vi ta reda på dina ftp-inloggningsuppgifter. Dessa kan få från ditt webbhotell. Fråga efter ditt ftp-login eller skapa ett via ditt webbhotells kontrollpanel. De uppgifter du behöver är: värdnamn, användarnamn och lösenord.
  3. Nu kan du starta Winscp, klicka på ”New site”, välja File protocol; FTP och fyll i dina uppgifter och logga in.skapa ett barntema och logga in i ftp-programmet Winscp
  4. Nu ska vi ladda ned en kopia av din webbplats modertema och här kan det se lite olika ut. Du kan se en mapp som heter ”Public html” eller så är du direkt inne i den och ser en mapp som heter ”wp-content”. Klicka på dig in i ”wp-content” och sedan på mappen ”themes”. Klicka där inne på mappen med ditt temas namn och dra över den till din dator. Detta kan ta en liten stund beroende på din internetuppkoppling.
    skapa ett barntema och ladda upp i ftp-programmet Winscp
  5. Skapa ny en ny mapp bredvid ditt tema-mappen du just laddat ned och döp den till ”ditt-tema-namn barntema”. För mig blir ”Sparkling barntema” då min webbplats använder temat Sparkling.
  6. Nu ska du skapa din stilmall, alltså css-fil. Öppna ett anteckningsprogram, exempelvis Notepad, och skapa en fil.
  7. Klistra in denna kod i mallen:

    /*
    Theme Name: Sparkling barntema
    Theme URI: http://www.annalerneryd.se/
    Description: Ett Sparkling Barntema
    Author: Copy & Kod
    Author URI: http://www.annalerneryd.se
    Template: sparkling
    Version: 1.0.0*/

    @import url(”../sparkling/style.css”);

    skapa ett barntema i notepad

  8. Nu ska du byta ut viss information i denna kod till din egen. Den mesta är självförklarande, men det som är viktigt är raden ”Template: sparkling” Denna rad säger till WordPress att detta är ett barntema till ditt huvudtema. Denna text är känslig för små och stora bokstäver och måste vara skriven på exakt samma sätt som på din modertemas mapp. Så se hur det är skrivet på den och härma.
  9. Sista raden ”@import url(”../sparkling/style.css”);” är också viktig för det är den som kopplar ihop ditt barntema med ditt modertema. Byt även här ut ”sparkling” till ditt egna modertemats namn.
  10.  Nu är vi så gott som klara, och det är dags att ladda upp det, så öppna Winscp igen.
  11.  Nu ska du ladda upp mappen ”ditt-tema-namn barntema” via ftp och det gör du på samma sätt som du laddade ned din modertema-mapp. Lägg ditt barntema precis bredvid mappen som innehåller ditt modertema. Titta gärna på den första bilden igen hur mitt ligger. Dra från den vänstra delen av Winscp (där du ser din lokala filer) och släpp den på högra sidan. Modertema kan du behålla lokalt som en backup.
  12.  Om allt har gått har du nu ett barntema uppladdat. Och du kan nu logga in på din webbplats och gå till Utseende → Tema och aktivera det. Du kommer inte se någon skillnad då vi inte lagt till någon ny kod. Det tar vi i nästa tutorial.

Var något oklart? Kontakta mig gärna. Jag svarar på alla frågor.

lägga bloggkategori i wordpress menyEller vill du fortsätta läsa fler tips? Vad sägs om ”Lägg till en bloggkategori i din WordPress huvudmeny

Read More