1. udgave 2012 Udgivet af Softworld Kurser A/S Kopiering samt gengivelse af indholdet er ikke tilladt, medmindre der er givet skriftlig tilladelse herom. Copyright Softworld Kurser A/S Forfatter: Martin Bregnhøi Redaktør: Puneet Oberoi Grafisk design: Trine Brandt Ryhede Grafisk produktion: Sten Olsen Indhold Case 1: Introduktion 3 Case 2: Vælg og indstil tema 12 Case 3: Sider og indlæg 17 Gørtlervej 4, 2400 København nv. bødk er balles Gård 19, 8000 aarhus C r ing til os på 7020 8055 eller besøg www.softworld.dk
Trin 1 Download WordPress Det første der skal gøres, når man vil lave en ny WordPress installation, er at downloade WordPress. Du kan vælge, om du vil have den danske eller engelske version, der downloades fra henholdsvis da.wordpress.org og wordpress.org. Her bruger vi den danske version. 1. Åbn en browser og gå ind på da.wordpress.org. Klik på linket 1 for at downloade den nyeste version af WordPress til computeren. Den downloadede.zip fil indeholder en mappe - wordpress - med en masse filer. Alle disse filer skal uploades til den webserver, hvor WordPress sitet skal ligge. WordPress introduktion 2. Pak.zip filen ud og gem filerne i en mappe på computeren. Denne mappe skal fremover bruges som lokal rod mappe til websitet. For at kunne installere wordpress på en webserver kræves det, at den understøtter php og Mysql. I skrivende stund er den nyeste version af WordPress 3.3.1. Denne kræver som et minimum, at php 5.2.4. er installeret på serveren. I denne case gennemgår vi: Download af wordpress upload af wordpress Installation introduktion til brugerfladen 4 WordPress Temadag 5
Trin 2 Upload WordPress For at uploade WordPress filerne til et webhotel, skal du bruge et FTP program. I eksemplet her benyttes Dreamveawer, men ethvert FTP program kan benyttes. Bemærk, at det kun er filerne, og altså ikke mappen, der skal uploades. 1. Åbn Dreamweaver og definer en ny site 1: Site > New Site. Som Local Root folder vælges mappen med WordPress filerne 2. 2. Lav indstillingerne for webserveren. Klik på + tegnet for at definere en ny server 3 og indsæt oplysningerne fra webhotellet i dialogboksen 4. 3. Åbn Files panelet via Window > Files og forbind til serveren ved at klikke på det lille Connect-ikon 5. I venstre side af vinduet vises indholdet af serveren, og i højre side vises den lokale rod mappe. 4. Marker alle filerne i højre side og træk dem over i mappen i venstre side af vinduet, for at overføre dem til serveren. Trin 3 Installer WordPress Når filerne er overført, kan du gå igang med den egentlige WordPress installation på domænet: 1. Åbn http://mitdomæne.dk/wp-admin/install.php i en browser 1. Du vil derefter blive hjulpet gennem processen, der vil klargøre wp-config.php filen med oplysningerne vedr. forbindelsen til din database 2. Når konfigurationsfilen er klargjort, så vil installeringsprogrammet oprette de tabeller, som din blog skal bruge. Her skal du bruge de oplysninger, du har fået fra webhotellet m.h.t. brugernavn og adgangskoder samt navn på mysql databasen. 2. Følg vejledningen og indsæt oplysningerne i formularen 3. 3. Vælg brugernavn og kodeord 4. Om alt går vel burde WordPress nu være installeret, og du kan nu logge ind på den nyoprettede WordPress site fra http://mitdomæne.dk/wp-admin 5. Normalt vil installationsprogrammet sende dig til denne side. Alternativt klik på det lille pil op ikon (put) 6, hvilket giver samme resultat. Filerne bliver nu overført til serveren. Det kan godt tage nogle minutter, da det er temmelig mange filer. 6 WordPress Temadag 7
Trin 4 Login 1. Indsæt brugernavn og adgangskode i felterne 1 og log ind. Kontrolpanelet 2 er hovedvinduet i WordPress CMS (Content Management System). Øverst er der en topbar med log ind/ud og adgang til profiloplysninger 3, link til at se selve websitet 4 samt div. genveje til at oprette indhold 5. I venstre side findes et panel med links til alle de forskellige dele af administrationssystemet. Det er her, man styrer udseende, indhold og funktionalitet. Trin 6 Indstillinger 2 - Sidetitel Den næste indstilling er Sidetitel og Tagline (undertitel) på sitet. 1. Gå ind under Indstillinger > Generelt. I det øverste felt skriver du sidens titel 1, altså det, der skal stå i toppen af hver side. Under tema-indstillinger er det muligt at vælge, om denne skal vises eller skjules. 2. I feltet Tagline 2 skrives en undertitel. Dette kan udelades, men er en hjælp til søgemaskinerne. Udover de ovennævnte indstillinger, kan du her bl.a. også indstille dato- og tidsformater. 3. Husk at klik Gem ændringer i bunden af vinduet. trin 5 indstillinger 1 - Permanente links Det første, der skal indstilles, er Permanente links. Denne indstilling styrer, hvordan links ser ud i browserens adresselinie. Hvis du intet foretager dig, vil de eksempelvis se sådan ud: http://mitdomæne.dk/?page_id=8, hvilket ikke er særlig hensigtsmæssigt, da det ikke siger noget som helst om indholdet. En bedre løsning er, at få vist navnet på selve linket: http://mitdommæne.dk/ eksempel-side/. 1. Gå ind under 6 Indstillinger > Permanente links, og skriv /%postname%/ i feltet Egen struktur. Nu vil det være navnet på indlæg og sider, der vises i adresselinien. 2. Husk at klik Gem ændringer i bunden af vinduet. trin 7 Indstillinger 3 - Diskussion WordPress er oprindeligt tænkt som et blogværktøj med mulighed for at skrive og kommentere indlæg. Derfor et det som udgangspunkt muligt, at skrive komentarer til alle sider/indlæg. Bruges WordPress som CMS til en website, ønsker man som regel at slå denne mulighed fra. 1. Gå ind under Indstillinger > Diskussion. 2. Fjern fluebenet i Tillad folk at skrive kommentarer til nye indlæg 3. Muligheden er nu generelt slået fra. Du kan dog sagtens slå den til på enkeltsider, hvis du senere ønsker det. 8 WordPress Temadag 9
Trin 1 Vælg tema Vælg og indstil tema I denne case gennemgår vi: Indstil grundtema vælg et andet tema Installation af tema temaindstillinger header Alt design i WordPress er baseret på temaer. Et tema består af en række prædefinerede stylesheets og funktioner, og det er disse, der definerer udseendet og funktionaliteten. Der findes en uoverskuelig mængde af temaer. Både professionelle temaer, der koster penge, og gratis temaer. Sidstnævnte har tit en begrænset funktionalitet og kræver mere arbejde, for at komme til at se lækre ud. Prøv bare at Google Wordpress themes! Inden du begynder at indsætte indhold, skal du have valgt et tema og set på de instillinger, der kan laves i det pågældende tema for at styre dit layout. 1. Gå ind under Udseende > Temaer 1 i menuen i venstre side. Vælg fanebladet Installer temaer 2. 2. Der er flere måder at søge og indskrænke sin søgning. Du kan bruge søgeord 3, eller du kan sætte flueben i felterne i Funktionsfilter-panelet 4, og på den måde målrette søgningen. Øverst 5 findes der også links til f.eks. nyeste. 3. Hvis du ønsker at se, hvordan temaet ser ud, kan du klikke på Preview 6. 4. Når du har fundet et tema, klikker du Installer, hvorefter en dialogboks dukker op, hvor du skal klikke Installer nu. Temaet bliver nu automatisk installeret og er klart til at blive aktiveret fra fanebladet Håndter temaer. 10 WordPress Temadag 11
Trin 2 Aktiver tema Under hvert installeret tema er der en menu: Aktiver Preview Slet 1. Med Preview kan du (logisk nok) se, hvordan websitet kommer til at se ud med det pågældende tema. 1. Aktiver 1 aktiverer temaet. Det er altså temmelig ligetil at skifte tema og dermed udseende og funktionalitet på dit WordPress website. Der er stor forskel fra tema til tema på, hvor mange funktioner og muligheder for styring af layoutet, der er indbygget. Typisk jo mere man betaler, jo flere muligheder får man. Man har dog altid mulighed for at lave sine egne stylesheets og php filer, og på den måde fuldstændig skræddersy layout og funktionalitet. trin 3 Baggrund 1. Gå ind under Udseende > Baggrund i menuen i venstre side 1. Her kan du vælge baggrundsfarve og/eller baggrundsbillede. 2. Klik på Vælg en farve 2, der åbner en farvepalette 3. Vælg en farve i paletten og husk at klik Gem ændringer. 3. For at vise selve websitet og se resultatet, kan du gå op i top-baren, hvor navnet på WordPress sitet står, og klikke på Besøg websted 4. TIP! Hvis du holder Ctrl på pc eller Cmd på Mac nede, mens du klikker, åbner siden i et nyt faneblad i browseren. I alle temaer kan du grundlæggende styre udseendet af baggrund og header (top logo) samt f.eks. grundfarve holdning. Som udgangspunkt er temaet Twenty Eleven valgt/aktiveret. I det følgende vil vi se nærmere på de grundlæggende indstillinger, der er i dette tema. 12 WordPress Temadag 13
T r i n 4 Baggrundsbillede t r i n 5 Header Hvis du vil indsætte et baggrundsbillede, gøres det ved at uploade et billede 1, og sætte indstillinger for billedet 2. Under menupunktet Header er der en række indstillingsmuligheder: 1. Lav et baggrundsbillede i dit yndlingsprogram, og gem det som enten gif, jpg eller png. 2. Klik på Vælg fil 3 for at finde billedet på computeren, og derefter på Upload 4. 3. Under Baggrundsindstillinger kan du sætte indstillingerne for baggrundsbilledet. Prøv at leg med de forskellige muligheder, og se ændringerne i Preview vinduet 5. 4. Når du er færdig, så husk at klik Gem ændringer. 5. Se siden i browseren og se, hvordan den ser ud med den nye baggrund. Du kan vælge, hvorvidt titel og undertitel skal vises 1 og hvilken farve, den skal have 2. Der er en række standardbilleder, du kan vælge imellem 3, men normalt vil man vælge at bruge sit eget. For at anvende dit eget headerbillede, skal du bruge et billede på 1000 x 288px. Du kan godt bruge et billede i et andet format, men så bliver det enten beskåret eller strakt, så det smarteste er at lave det i den nøjagtige størrelse. 1. Klik på Vælg Fil 4 for at åbne et vindue til computerens filsystem. Find frem til dit header-billede og tryk Upload 5. Det bliver nu vist i preview feltet 6. I eksemplet 6 er valgt Placering: Center Gentag: Lagt som fliser Vedhæftning: Låst Husk at tryk gem ændringer! 14 WordPress Temadag 15
Trin 6 Temaindstillinger Sidste trin er temaindstillingerne. Afhængigt af temaet er der forskellige muligheder. For Twenty Eleven er der nogle helt basale indstillinger. 1. I Farveskema 1 kan du vælge mellem et lyst/ hvidt og mørkt/sort layout. 2. Dernæst kan du vælge farve på links 2. 3. Den tredie indstilling er muligheden for at vælge mellem tre forskellige opsætninger. En med sidebaren placeret i højre side 3, en med sidebaren placeret til venstre 4, og endelig et layout helt uden sidebar 5. Andre temaer har andre og ofte flere indstillingsmuligheder. Et tema som Platform fra PageLines har f.eks. selv i den gratis version rigtig mange muligheder for at styre design og layout 6. Vil du finde ud af, hvilke muligheder der er i et tema, må du aktivere det for at se, hvilke settings det har (eller besøge producentens website, hvor der ofte er en grundig beskrivelse af temaets features). Sider og indlæg I denne case gennemgår vi: forskellen på sider og indlæg oprettelse af sider oprettelse af indlæg oprettelse af kategorier indsætning tekst og billeder oprettelse af menuer 16 WordPress Temadag 17
trin 1 Opret sider I WordPress er der to måder, du kan indsætte indhold på: sider og indlæg. Sider er, som navnet indikerer, sider i din website. Her kan du indsætte tekst og billeder. Afhængig af temaet, kan du vælge layout på siden, med eller uden sidebars, eksempelvis. Sider danner også udgangspunket for menuen. 1. Klik på menuen Sider i venstre side og vælg Alle sider. Her få du et overblik over alle oprettede sider. Det er også her, du opretter nye sider og vælger sider, der skal redigeres. 2. Klik på Tilføj ny 1 for at oprette en ny side 2. En side indeholder en titel 3, hvilken også umiddelbart bliver menupunktet, og et indholdsområde 4. Indholdsområdet har øverst en formateringslinie som man kender det fra div. teksteditorer. Yderst til højre er der en knap 5 til at udvidde formateringslinien med ekstra muligheder 6. Har du brug for at indsætte html, kan du åbne siden i en html editor 7. Afhængig af temaet kan du vælge forskellige layout-skabeloner for siden 8. Er du lidt inde i php, kan du også lave dine egne skabeloner. Når du har indsat dit indhold, kan du enten gemme siden til senere ofentliggørelse 9, eller offentliggøre den med det samme. trin 2 Indsæt billeder 1. Over formateringslinien er der et lille ikon, Upload/indsæt 1. Klik på det for at åbne vinduet 2. Herfra kan du indsætte medier: billeder, video og lyd, enten ved at trække dem ind fra computeren, eller klikke på knappen Vælg filer 3. Fra fanebladene øverst kan du også vælge at indsætte indhold ved at pege på en URL eller vælge allerede uploadede filer fra Mediebiblioteket. Et billede har foreskellige properties: Titel, Alt-tekst (til søgemaskiner og skærmlæsere), Billedtekst (undertekst) og Beskrivelse 4. Som standard er billedets Link-URL stien til det originale billede, men det kan også bruges til at pege andre steder hen. Justering 5 styrer, hvordan tekst skal flyde omkring billedet, og Størrelse 6 styrer størrelsen på billedet på siden. 2. Når de ønskede properties er indsat/stillet, klikker du Indsæt i indlæg 7, og billedet bliver indsat i siden. Wordpress skelner ikke mellem sider og indlæg i denne dialogboks, og proceduren for at indsætte indhold i et indlæg er nøjagtig den samme. Når billedet er indsat, så husk at klik opdater på siden! 18 WordPress Temadag 19
trin 4 Rediger billede 1. Klik på et billede for at få de to små redigeringsikoner frem 1. 2. Klik på billed-ikonet for at åbne redigerings vinduet 2. Her kan du ændre grundlæggende indstillinger som skalering, titel, billedtekst, link m.m. 3. Under fanebladet Avancerede indstillinger 3 får du yderligere en række muligheder. Her kan du trinløst justere størrelsen, og under Kilde f.eks. vælge det originale, ikke størrelsesjusterede, billede. Du kan også styre ramme og afstande samt avancerede linkindstillinger, hvor du bl.a. kan styre udseendet med egne css styles. Husk at trykke opdater hver gang du har lavet nogle ændringer på en side! trin 5 Opret indlæg WordPress er oprindeligt tænkt som et blog-værktøj, og oprerer derfor med indlæg. Indlæg lægger sig umiddelbart efter dato, og vises som standard på forsiden. Indlæg optræder ikke som selvstændige menupunkter, men kan knyttes til en kategori, der så kan bruges som et menupunkt. 1. Klik på menuen Indlæg i venstre side og vælg Alle indlæg. Her få du et overblik over alle oprettede indlæg. Det er også her du opretter nye indlæg og vælger indlæg, der skal redigeres. 2. Klik på Tilføj nyt 1 for at oprette et nyt indlæg 2. Et indlæg indeholder ligesom en side en titel 3. 3. Indsæt titel. Måden du indsætter indhold 4 i et indlæg er fuldstændig ligesom i en side. 4. Indsæt indhold. For at knytte et indlæg til en kategori, skal du vælge det på listen i højre side 5. I dette eksempel her kan du også oprette nye 6. Kategorier finder du også i menuen i venstre side 7. 20 WordPress Temadag 21
trin 6 Opret kategorier 1. Vælg Kategorier i menuen 1. 2. Giv den nye kategori et navn 2. Hvis kategorien skal være underkategori i en anden kategori kan det vælges her. 3. Klik på Tilføj ny kategori 3. I højre side af vinduet er der en oversigt over alle oprettede kategorier, hvor man kan redigere og slette dem. 3. Vælg den nyoprettede menu i Temaets menuområde 3. Ved at klikke på fanebladene Se alle 4 for henholdsvis sider og kategorier, kan du vælge de sider og kategorier, der skal indgå i menuen. 4. Vælg menupunkter og klik Tilføj til menu. Menupunkerne vises nu som en liste i menufeltet i højre side 5. Rækkefølgen af menupunkterne kan ændres ved at rykke felterne med menupunkterne op og ned med simpelt træk og slip. Hvis menupunktet skal hedde noget andet end sidetitlen eller kategorien, kan du klikke på den lille pil i højre side af menufeltet 6 for at åbne menupunktets indstillinger og give det et andet navn i Menutitel feltet. trin 7 Opret menu 1. Gå ind under Udseende > Menuer 1. I dette vindue kan du oprette menuer og knytte sider og kategorier til en menu. Ved at sætte et flueben i feltet 7, kan du vælge at alle fremtidige sider automatisk skal tilføjes som menupunkter. 5. Husk at gemme! Hvis du ikke opretter en menu, bliver sider automatisk sat ind som menu på websiten. 2. Giv menuen et navn 2 f.eks Menu og klik Tilføj menu. Der er nu oprettet en menu, og resten af felterne i vinduet bliver tilgængelige. 22 WordPress Temadag 23
Gørtlervej 4, 2400 København nv. bødk er balles Gård 19, 8000 aarhus C r ing til os på 7020 8055 eller besøg www.softworld.dk Brevpapir 2011.indd 1 23/11/10 14.19