Skapa webbplats med WordPress En guide hur man använder publiceringsverktyget WordPress

Transkript

1 Skapa webbplats med WordPress En guide hur man använder publiceringsverktyget WordPress WordPress är ett kraftfullt publiceringsverktyg för webben som trots sin flexibilitet och styrka är lätt att komma igång med. Du jobbar direkt mot webben med hjälp av ett administrationsgränssnitt där du kan kontrollera hur webbplatsen ska se ut samt fylla den med allt möjligt innehåll Gunnar Markinhuhta ITlyfttet

2 VAD ÄR WORDPRESS? Kärt barn har många namn. WordPress kallas för Content Management System, CMS, publiceringssystem, innehållshanteringssystem, webbadministrationssystem eller webbpubliceringssystem. Den term på svenska som rekommenderas av Svenska datatermgruppen är innehållshanteringssystem, även om de flesta i branschen fortfarande säger publiceringssystem. RÖTTERNA I BLOGGEN Ursprungligen konstruerades WordPress för bloggar men eftersom systemet blivit så populärt har det även börjat att användas som fullskaligt innehållshanteringssystem /publiceringssystem. Skillnaden är egentligen inte så stor men man förväntar sig funktioner som exempelvis rollhantering och arbetsflöde i ett innehållshanteringssystem. ÖPPEN KÄLLKOD En viktig sak med WordPress är att det är open source, eller öppen källkod som det heter på svenska och kan laddas ner kostnadsfritt. WordPress är utvecklat med det öppna programspråket PHP och använder databasen MySQL för datalagring. INSTALLATION (OBS! För ITlyftet är installationen redan gjord) 1. Ladda ner WordPress från 2. Packa upp arkivet i en tom mapp på din dator. 3. Öppna wp-config-sample.php med en vanlig textredigerare och fyll i dina detaljer för databasanslutningen och säkerhetnycklar. (Generera automatiskt unika säkerhetsnycklar via Spara filen som wp-config.php 4. Ladda upp allt till den plats du vill ha det på servern (webbhotell). 5. Gå till och fyll i önskade uppgifter 6. Notera lösenordet som visas på skärmen. 7. Du kan nu gå till loginsidan. Logga in med användarnamnet admin eller det användarnamn du valt vid installationen och lösenordet som genererades vid installationen LOGGA IN 1. Skriv in ditt Användarnamn och Lösenord i WordPress-formuläret 2. Klicka på Logga in 2

3 ARBETSYTAN I WORDPRESS I WordPress har du en Utsida (frontend) som är din webbplats som besökare kan se och en Insida (backend) där du jobbar och redigerar din webbplats. Högerklicka på menyvalet Besök sida och välj Öppna länk i ny flik så kan du enkelt uppdatera (F5) din utsida varje gång du gör ändringar i din insida. Längst till vänster i WordPress arbetsyta har du Panelen som kan liknas vid en kontrollcentral för WP. När du för pekaren över de olika innehållen i Panelen så kan du klicka på listpilen för att visa/dölja alternativen INSTÄLLNINGAR I menyraden till vänster ser du ditt användarnamn. Där kan du logga ut och ändra personliga inställningar i din profil Klicka på Inställningar och välj Allmänt. Där kan t ex ange titel, slogan, datumformat mm. Titeln är viktig för bl a sökmotorerna. Klicka på Spara inställningar när du gjort dina ändringar. 3

4 SKAPA SIDOR Dags att börja utveckla webbplatsen. I detta exempel ska vi skapa en webbplats som handlar om vad man kan göra med bildredigeringsprogrammet GIMP. Webbplatsen ska innehålla sidor med länkar, text och bilder. Statiska sidor är tänkta att ligga kvar på samma plats under lång tid. De lämpar sig för genomarbetat innehåll som inte blir inaktuellt kort tid efter att de publicerats. Vi börjar med startsidan som ska vara en statisk sida. 1. Klicka på panelen Sidor och välj Skapa ny. Skriv in följande text på sidan. 2. Använd verktygsknapparna för att formatera rubriker och brödtext 3. Gör formateringarna på sidan så att det blir så att resultatet blir ungefär så här. 4. Klicka på knappen Fullskärm för att se sidan helt och hållet. Växla tillbaka till normalläge 4

5 5. Växla över till HTML-redigering när du klickar på HTML-fliken. 6. Skriv in följande kod-snutt för att infoga en vågrät linje så att copyrighten hamnar under den. 7. Klicka på knappen (om du väljer spara så sparas sidan i systemet men visas inte på utsidan förrän du väljer att publicera den) 8. Växla över till utsidan för att se resultatet i webbläsaren Vi ska också se till att denna sida ska visas som startsida på webbplatsen. 9. Gå in på Inställningar/Läsa 10. Ändra i inställningarna så att sidan visas som startsida 11. Spara ändringar På startsidan ska det inte finnas några kommentarer. Det ska vi ta bort. 12. Gå till panelen Sidor/Alla sidor 13. Välj Snabbredigera 14. Avbocka Tillåt kommentarer 15. Klicka på Uppdatera Startsidan är därmed klar! Granska i utsidan/webbläsaren för att se att allt är ok. 5

6 SKAPA NYA SIDOR 1. Välj Sidor/Skapa ny 2. Ge sidan ett innehåll 3. Klicka på 4. Kontrollera sidan på utsidan/webbläsaren 5. Gå till Snabbredigera och ta bort möjligheten att kommentera 6. Upprepa proceduren även för nästa sida 7. Skapa ytterligare 3 sidor. Titlar: Förbättra, Retuschering, och Webbgrafik. Vänta med att fylla på sidorna med innehåll. Menyraden bör se ut ungefär som det här. 8. Menytexterna följer bokstavsordningen, men det kan du ändra på i redigeringsläget. Välj ordningsnummer nere i högra hörnet. 1,2,3 osv placeras från vänster till höger Grattis! Du har nu gjort din första webbplats i WP! 6

7 Du ska nu bygga vidare med webbplatsen. Du ska skapa och formatera sidinnehållet på två av de tre nya sidorna som du just skapade (Retuschering och Förbättra) Uppgift 1: Öppna sidan Retuschering. Gör ett sidinnehåll som detta. Använd punklista och indrag. Infoga en vågrät linje längst ner med hjälp av HTML-kod Uppgift 2: Öppna sidan Förbättra Gör ett sidinnehåll som detta. Öppna bilden Murkatt (eller annan bild) och ljusa upp bilden, förbättra skärpa och ändra bildstorlek så att bredden blir 400 bildpunkter. Spara som en jpg-fil och infoga på sidan. Du kan därefter behöva gå till HTML-läget för att kunna infoga en enkel tabell med 2 rader och 3 kolumner 7

8 JOBBA MED BAKGRUNDSBILDER I WP I WP har du ett antal olika teman att välja mellan. Vi ska börja med WP:s senaste standardtema Twenty Eleven 1.2. Vi ska först anpassa sidhuvud och bakgrund i detta tema. 1. Välj Utseende i panelen. Här ser du ditt aktuella tema och diverse inställningar för temat. 2. Välj Sidhuvud. Här kan du välja mellan att ladda upp en anpassad egen bild eller mellan temats valda bilder samt slumpade bilder. Optimera bilden helst först i GIMP. Har du inte gjort det så kan du få ett hyfsat resultat med WP:s egen bildredigerare 3. Välj Visa text/nej för att ta bort den översta titeltexten i sidhuvudet. Spara detta. 8

9 4. Välj Bakgrund. Här kan du ladda upp en egen bakgrundsbild som du t ex gjort i GIMP och välja hur den ska upprepas på bakgrunden. Välj Utseende/Inställningar för Teman för allmänna inställningar för temat 9

10 INFOGA BILDER I Inställningar/Media så hittar du inställningar för bl a bilder Nu ska vi infoga en bild på sidan 1. Öppna sidan Retuschering som du gjorde tidigare. Klicka på 2. Välj rätt bildstorlek och fyll i textinformation i dialogrutan 3. Välj Infoga i innehåll 10

11 Om du vill redigera bilden efteråt i WP: 1. Klicka på bilden 2. Klicka på knappen Redigera bild 3. Gör ändringar i dialogrutan I Avancerade inställningar finns ytterligare alternativ: 11

12 INFOGA MEDIA 1. Gå till youtube.com och kopiera html-koden(hö-klicka på videon) 2. Välj Kopiera inbäddningskod Du kan också klicka på knappen Dela i Youtube för att komma åt fler inställningar för kopiering- 3. Gå till WP och editorn på den sida som videon ska bäddas in i 4. Klistra in koden I HTML-läget 5. Förhandsgranska i webbläsaren 12

13 Den inbäddade koden: Eller: LÄNKAR 1. Markera texten 2. Klicka på verktygsknappen Infoga länk 3. Kopiera länkadressen från GIMP:s webbplats 4. Klistra in länken i fältet URL 5. Skriv in ev titel och ange Öppna länken i ny flik 6. Klicka på knappen Lägg till länk 13

14 Du kan också länka till egen sida (intern länk) genom att välja bland de befintliga sidorna Om du vill skapa en bildlänk så gör du på samma sätt som med textlänkar. Markera bilden och Klicka på verktygsknappen Infoga länk osv. 14

15 Länka till PDF-dokument eller annat dokument 1. Markera texten 2. Välj 3. Hämta upp filen på din dator 15

16 Skapa en personlig webbplats Du ska nu skapa en egen webbplats som du senare ska ska bygga ut allt eftersom kursen pågår. Webbplatsen kan innehålla precis det du själv vill men vi ska från början skapa 6 sidor: Startsidan En CV-sida En bloggsida En fotosida med bildgalleri En länksida för bra att ha -länkar En arkivsida för arkiverade filer (sidan kan vara lösenorsskyddad) 1. Börja med att radera alla dina sidor i din gamla webbplats (GIMP bildbehandling). Gå till panelen Alla sidor och kasta sidorna i papperskorgen. Töm också papperskorgen. 2. Skapa en ny sida (Startsidan) som du fyller med textinnehåll och och ett par foton. Välj Publicera. 3. Skapa därefter de övriga sidorna. Du kan också skriva lite kortfattat text på sidorna. Infoga någon bild etc. Granska sidorna på utsidan 4. Ändra ev inställningar för Temat: Inställningar för tema, Bakgrund och Sidhuvud så det passar för din smak. 16

17 Jobba med menyer 1. Välj panelen Utseende/Menyer 2. Skriv ett Namn för menyn och klicka på knappen Skapa meny 3. Välj vilka av dina sidor ska komma med i menyn. Klicka på Lägg till i meny 4. Nu kan du dra och släppa för att anpassa din meny. Ordningen bestäms efter vilken sida som är överst etc. Du kan också skapa undermenyer genom att släppa sidorna med lite indrag Välj till sist din meny från Primär meny. Spara 17

18 Skapa en bloggsida Med Inlägg kan du skapa skapa bloggar 1. Välj panelen Inlägg/Skapa nytt 2. Skriv en titel samt lite välkomsttext. Publicera 3. Gå till panelen Inställningar/Läsa 4. Se till att din startsida också visas som Startsida och att din bloggsida visas som en inläggssida Du har också möjlighet att skapa Kategorier och Etiketter. Det kan vara användbart om du med tiden skapar många inlägg. Du kan då dela upp inläggen i kategorier och använda etiketter som nyckelord. Lösenordsskydda sidor Välj panelen Sidor/Snabbredigera och skriv in ett valfritt lösenord 18