WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm

Transkript

1 WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm 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 Skapa ny webbplats 1. Börja med att gå in på din nya fortsättningsplats 2. Gå in på panelen Sidor och välj Skapa ny och skapa 4 nya sidor på din plats 3. Skriv bara lite kortfattad text på varje sida 4. Välj Utseende/Teman 5. Aktivera temat Canvas 6. Gå till utsidan och kontrollera Canvas är ett tema från WooThemes som är ett bra tema för de som vill ha stora anpassningsmöjligheter med layouten och konstruktionen av webbplatsen utan att behöva gå in på CSSkoden. Canvas kan också framöver användas som webshop 2

3 Anpassa temat Canvas 1. Väl panelen Canvas/Theme Options/General Settings 2. Ladda up Logga och Favicon som du tidigare gjort i GIMP 3. Välj Layout i General Settings och ställ in Site Width, Main Layout och Footer 4. Gå vidare till General Styling 5. Ställ in bakgrundsfärg, bakgrundsbild, kantfärger och länkfärger 6. I General Typography kan du ställa in rubriker och brödtext 7. I Boxed Layout ställer du in sidans utseende 8. I Header Styling anger du sidhuvudets utseende 9. Footer Styling och Navigation Styling anger du utseendet i sidfoten och menyraden (Post Styling och Widget Styling styr utseendet av inlägg och dynamiska sidor som vu kommer till senare) 10. Spara dina ändringar och kontrollera i utsidan 3

4 Du kan också prova temat Inspire som också är ganska anpassningsbar, men som inte har riktigt lika mycket anpassningsmöjligheter som Canvas. Uppgift: Fyll dina sidor med mer innehåll (text, rubriker etc) Använd sedan temats Styling för att anpassa utseendet på din webbplats (texter, bakgrunder, färger, kanter, marginaler och utfyllnader ) så att du blir nöjd med layouten. Experimentera gärna. 4

5 Anpassa inställningarna i Canvas Vi ska nu rensa en del inställningar så att sidan blir ren och klar att börja bygga på 1. Gå till panelen Inställningar/Allmänna 2. Radera Titel för webbplats samt Slogan 3. Gå till panelen Canvas/Theme Options 4. Gå till Footer Styling 5. Välj Enable Custom Footers 6. Skriv en passande sidfotstext 7. Gå till Navigation Styling 8. Avbocka Show Subscribe Link. Spara 5

6 Canvastemat och grafik Logotype/Sidhuvud Sidhuvudet är viktigt för helhetstintrycket. Det är också porten/hallen till sidan och bör fungera som en uppsamlare/fångare av besökare. Vi ska nu skapa ett sidhuvud och anpassa den sedan i Canvas-temat. Skapa sidhuvud i GIMP 1. Starta GIMP 2. Välj Arkiv/Ny 3. Välj bildstorleken efter hur bred din sida ska vara (Se i Canvas/Layout/Site width i det här faller får bilden bli lite mindre än sidbredden dvs 940 px) 4. Skapa sidhuvudet (bild, text, färger etc) 5. Spara som JPG eller PNG 6. Växla över till WP 7. Gå till Canvas/Header Styling 8. Klicka på Upload för att infoga din sparade bild 9. Se till att bilden inte repeteras 10. Anpassa nu Header Padding för att bilden passar in perfekt i sidhuvudet 6

7 Bakgrundsbilder Om du inte bara vill ha en färg så kan du använda texturer till bakgrunder. Du kan hämta texturer från nätet eller ännu bättre göra en egen textur i GIMP. Hemligheten är att göra en liten bild som upprepas på bakgrunden. Vi ska nu göra en snygg rutad bakgrund. 1. Logga in på din webbplats i WP 2. Starta GIMP 3. Välj Arkiv/Ny 4. Välj bildstorlek 100x100 pixlar 5. Zooma upp bilden till ca 300% 6. Skapa ett nytt lager och namnge den till linjer 7. Ta fram Pennverktyget och välj minsta storlek (1 px) 8. Välj en lämplig färg i Färgväljaren 9. Rita ut en vågrät och en lodrät linje (håll inne shift-tangenten för att få räta linjer) 10. Sänk gärna opaciteten på lagret för att få dämpa färgerna lite 11. Ta fram Beskäringsverktyget och zooma in bilden ännu mer 12. Beskär runt skärningspunkten 13. Tryck Enter 14. Radera nu bakgrundslagret 15. Spara bilden som en Gif eller PNG 16. Växla över till WP 17. Gå till panelen Canvas/General Styling 18. Ladda upp bakgrundsbilden 7

8 19. Välj Background Image Repeat: reapeat. Spara Favicon En Favicon är en minilogga som syns i webbläsarens flik och som bokmärke/favorit. Vi ska skapa en favicon i GIMP 1. Välj Arkiv/ny 2. Välj bildstorlek 16x16 px 3. Zooma upp bilden till ca 1600% 4. Ta fram ett nytt lager och dölj bakgrundslagret 5. Ta fram pennan i minsta storlek 6. Måla din logga med passande färger 7. Spara som Gif eller PNG 8. Växla över till WP 9. Gå till Canvas/General Settings 10. Välj Upload Custom Favicon 11. Hämta och infoga din faviconbild. Spara 8

9 Bildgalleri Det finns ett antal olika bildgallerier som kan laddas ner som tillägg i WP. På Itlyftet har vi ett galleri som heter NextGEN. Vi ska nu skapa ett bildgalleri 1. Gå till panelen Galleri/Lägg till Galleri/Bilder 2. Skriv ett namn på galleriet 3. Klicka på Skapa nytt galleri 4. Markera och kopiera taggen [nggallery id=1] 5. Klicka på Bläddra och ladda upp dina bilder 6. Ladda upp dina bilder 7. Gå till Galleri/Hantera galleri. Här kan du t ex ange titeltexter och beskrivningar 8. Gå nu till din sida som ska ha bildgalleriet 9. Gå till HTML-läget och klistra in taggen [nggallery id=1] 10. Gå till utsidan för att testa bildgalleriet 9

10 11. På panelen Galleri/Inställningar finns många anpassningsmöjligheter 12. Du kan också gå Utseende/Widgets för att dra galleriet till en plats på sidan Tillägg Anpassa och konfigurera tilläggen Usernoise och Hit Counter (besöksräknare) 1. Välj panelen Inställningar/Usernoise 2. Anpassa inställningarna där 3. Välj panelen Inställningar/Hit Counter 4. Anpassa inställningarna där 5. Gå till panelen Utseende/Widgets 6. Dra widgeten Hit Counter till ett widgetfält 10

11 Sökmotoroptimering Med en sökmotoroptimering ser du till att du blir hittad av Google och andra sökmotorer. Med en bra sökmotoroptimering hamnar du också högt upp i träfflistan. Så här gör du: 1. Gå till panelen Canvas/SEO 2. Gå till Description Meta 3. Skriv en beskrivande text på hemsidans innehåll 4. Gå till Keyword Meta 5. Skriv nyckelord som beskriver innehållet på hemsidan Flera användare När du gör en webbplats så kan du skapa flera användare med olika roller och rättigheter 1. Gå till panelen Användare/Skapa ny 2. Skriv in e-posten till den nya användaren 3. Välj roll t ex författare 11