WordPress-øving 4

Å bygge en side

Tidligere har vi forsøkt å bytte utseende på bloggen ved å veksle mellom ferdiglagede temaer. I dag skal vi se litt på hvordan vi kan endre på oppsett og utseende ved å kode selv.

Det første vi gjør er å tenke ut grunnstrukturen på siden. Hva slags layout skal vi ha? Skal det være banner øverst, skal det være kolonner, i tilfelle hvor mange? Etter å ha kodet grunnstrukturen for siden (eksempel), deler vi den opp i ulike moduler (banner, hovedinnhold, sidemeny, bunntekst) som får hver sin php-fil (eksempel). Et vanlig basis-sett av filer som skal med i et WordPress-tema er banner.php, index.php, sidemeny.php, og footer.php. Annet det kan være nyttig å bygge ut med etter hvert er templater for arkiv, for Pages, for de ulike kategoriene, for søkeresultater osv.

Hva var vi inne på sist angående templathierarkiet?

Jo, for å vise de ulike sidene på bloggen leter WP etter et passende templat i mappen for det temaet bloggen til enhver tid bruker. Dersom ingen templater tilpasset de ulike sidene eksisterer, brukes index.php som templat. Dette er også filen som har ansvar for å vise bloggens forside. Dette er altså den siden det er viktigst å få på plass først. Til forskjell fra typiske index.html-filer så mangler WordPress-temaenes index.php-filer de deklarasjoner og elementer som er obligatorisk å ha øverst i et (X)HTML-dokument. Dette går bra fordi header.php, der denne informasjonen ligger, kalles opp helt på begynnelsen av index.php. Sidemenyen og footeren (bunnteksten) kalles opp på samme måten, via PHP pusles det altså sammen det som for besøkende på siden vises som om det var ett dokument i utgangspunktet (dette kan man sjekke ut selv ved å vise kildekoden for siden i nettleseren).

Å låne litt er lov

En langt lettere måte å lage sitt eget tema på enn å lage alt fra scratch, er å kopiere et ferdig tema og modifisere det til eget bruk. Man kan f.eks kopiere et av temaene som følger med WP-installasjonen (hele mappen altså) i wp-content/themes, og lime den inn igjen under et nytt navn. Merk at navnet på mappen ikke er det som blir temaets navn inne i WordPress, dette navnet setter man under “Theme Name” (øverst i temaets style.css). Derfor er det veldig greit å redigere dette navnet til noe annet med en gang, så man ser forskjell på de når man skal velge tema inne i adminpanelet. Så er det bare til å herje med sitt “eget” tema, går noe galt er det bare å bytte til et av de gamle.

Nok mas, over til praktiske oppgaver

1. Først av alt trenger dere å fylle bloggen med innhold av noe slag. Dere kan enten importere innholdet fra den gamle bloggen, eller lage et par nye poster, poenget er bare at det skal ligge inne poster i (minst) to ulike kategorier.

2. Deretter skal dere installere temaet “skjelett”, hvilket er en helt enkel WordPress-struktur uten markering (eller stiling) av de ulike elementene. Dette temaet ligger her. Legg temaet i mappen wp-content/themes og husk å sette filene i mappen til å være skrivbare fra WordPress. Så skal dere forsøke å få det til slik at de to kolonnene i temaet viser poster fra forskjellige kategorier.

Et tips i så måte er å finne ut av nummeret på kategorien (alle kategorier i WordPress har et ID-nummer), og titte på dette eksempelet (se eventuelt også det som står i ett av de nederste avsnittene i posten fra den forrige øvingen. Husk at “template tags” er PHP-funksjoner og derfor må startes med <?php og avsluttes med ?>.

3. Det neste som skal gjøres er å få det til sånn at kategori-informasjonen vises over, og ikke under innlegget (dere trenger kun å gjøre dette for den ene av de to kolonnene). Igjen er det “template tags” som er stikkordet. Forsøk å få lagt inn tittel på bloggen i banneret.

4. Når dere har fått til dette, er det på tide å bygge litt på skjelettet. Det er kun de grunnleggende elementene i siden som er markert i (X)HTML-dokumentet (pluss det dere eventuelt har markert selv i bloggpostene, og p-elementet for avsnitt som WordPress automatisk legger til). Dette medfører at det ikke er noen mulighet for å styre visningen av tittel, dato osv i stilarket. For å få til dette må dere gi de ustrukturerte elementene i templatene klasser. Dere må altså markere/skille ut de ulike elementene i innlegget.

For overskrifter er det greit å benytte HTMLs innebygde h1-h6 (der tallene angir overskriftsnivå), i stedet for egne klasser. Dette fordi disse (og enkelte andre elementer som blockquote og li) er universelt definert og derfor kan “forstås” av for eksempel søkemotorer – i motsetning til klasser man selv lager. Dermed kan dere markere tittelen på følgende måte:

<h2><?php the_title(); ?></h2>

Klasser eller id-er vi lager selv markeres altså litt annerledes, vi bruker div-elementet, et element uten egen betydning utover det å å innkapsle en spesiell del av dokumentet. F.eks kan dere gjøre følgende med the_author:

<div class="forfatter"><?php the_author(); ?></div>

Forsøk å gi på samme måte gi passende klassenavn til innleggenes dato, innhold, kategori og forfatter.

5. En side der alle elementene er likt formatert (eventuelt ikke formatert i det hele tatt) er ikke spesielt behagelig å se på. Nå er det på tide å gjøre siden flottere og mer lesbar. Ved hjelp av CSS kan dere nå endre visningen av elementene som er markert i siden. For litt om hvordan CSS fungerer, se de to siste seksjonene i denne posten.

Praktisk

Når dere skal gjøre endringer i CSS er det greiest å åpne Firefox, og laste ned og installere utvidelsen (”extension”) Web Developer, den finner dere her.

Web Developer inneholder endel nyttige ting. Dersom man for eksempel lurer på hva slags klasse eller id en spesiell del av siden har, kan man velge “Outline” og “Outline Current Element”, da vises informasjon om elementet man holder muspekeren over nederst på siden. Ved å velge “CSS” og så “Edit CSS” kan man redigere nettleserens lokale versjon av stilarket, hvilket vil si at endringene man gjør vises i sanntid. Her kan man leke med stort sett alle parametrene, det å bytte ut verdier og se hva som skjer er nok den enkleste måten å lære seg CSS. Mens enkelte verdier er ganske selvforklarende enkle å bytte ut (mål for størrelse, til venstre eller til høyre osv), er andre ikke like intuitive. Farger (som spesifiserer med “color:” og “background-color”) for eksempel – man kan gi disse attributtene basisverdier som “red” eller “blue”, men dette er farger i relativt mettede og skrikende varianter. For å HTML-fargekoder til litt andre farger kan man benytte et utall av fargekart og verktøy, for eksempel dette.

Går dere lei av å style fra et såpass begredelig og tomt utgangspunkt, kan dere gå over til et ferdig tema og heller modifisere det. Slike temaer finnes blant annet her.

Litt om CSS

CSS-stilarket består av et sett med stilregler, som har denne formen:

selektor {deklarasjon}

Her står “selektor” for elementet vi ønsker å definere visningen av, for eksempel bilder eller overskrifter eller menyer. Dersom vi ønsker å definere visningen av generelle elementer så lar vi selektoren bestå av HTML-elementer (img, em, h1, p) eller klasser spesifisert i (X)HTML-dokumentet (f.eks <div class="klassenavn">). Dersom vi ønsker å definere visningen av spesifikke elementer (akkurat denne kolonnen, eller akkurat dette bildet) bruker vi det elementets ID, spesifisert i (X)HTML-dokumentet (f.eks <div id="idnavn">). Der en klasse naturlig nok består av alle elementene som utgjør klassen, består en ID kun av ett element, som identifiseres unikt. Klasseselektorer og ID-selektorer skilles fra hverandre i stilarket ved at klasseselektorer har “.” foran seg (eksempel: .klassenavn), mens ID-selektorer har “#” foran seg (eksempel: #idnavn).

Deklarasjonen, altså regelen som skal gjelde for elementet eller elementene som er definert i selektoren, har formen “egenskap: verdi”. Dermed ser det sånn ut:

selektor {egenskap:verdi}

Et eksempel som setter bredden til elementet med IDen “sidemeny” til 200 piksler:

#sidemeny {width: 200px}

Siden det blir tungvint å gjøre dette for hver eneste egenskap vi trenger å definere, så vi kan legge til flere deklarasjoner slik:

selektor { egenskap1:verdi; egenskap2:verdi;}

De ulike deklarasjonene må adskilles med semikolon, og for å gjøre det mer lesbart er det vanlig å også skille de med linjeskift, på denne måten:

#sidemeny { width: 200px,
padding: 5px;
}


Ved å skrive /* i stilarket “hopper” vi ut av kodemodusen, hvilket er praktisk, ettersom vi kan legge inn vanlig tekst og dermed kommentere og dokumentere koden, slik at den er lettere forståelig i ettertid. Kommentarmodus avsluttes med */

Diverse CSS-ressurser

• W3Schools om CSS
• En mer omfattende guide
• Norsk introduksjon til CSS
• CSS Cheat Sheet – CSS i lommeformat
• Demontrasjon av layout-teknikker i CSS
• Layout-generator
• Et visuelt eksempel på hvordan en velstrukturert side kan endre visningen av en velstrukturert side i CSS.
• Mange flere eksempler hos css Zen Garden

Det var alt for i dag. God middag.

WordPress-øving 3

Litt oppsummering

Sist gang lagde dere sitater og lister og andre ting. I oppgaven der dere skulle legge ut Creative Commons-lisensiert bilde fra Flickr var det flere som la ut bilder, og også forklaringer av CC-lisensen uten å oppfylle kravene til å få bruke bildet. “Attribution” betyr altså at man skal kreditere den man låner fra, en god måte å gjøre dette på er med navn og lenke til opphavspersonen…

Flere har brukt “Pages” til å legge ut den obligatoriske oppgaven, hvilket det forsåvidt ikke er noe i veien med, men det bør påpekes at det er “Posts” som utgjør selve innholdet av bloggene. Poster havner på fremsiden, de indekseres i arkivet, og de inkluderes i sidens feeds, i motsetning til “Pages”, som er beregnet på statiske sider som skal være tilgjengelige uavhengig av når de ble lagt ut – kontaktinformasjon, avanserte arkivsider osv.

Hva som skal gjøres i dag

Denne gangen skal dere laste ned og installere WordPress på Bogus-området deres. Instruksjoner finner dere i pensumbok samt på WordPress sine nettsider. Laste opp de nødvendige filene til bogus.uib.no gjør dere ved hjelp av en SFTP-klient, f.eks den som er installert på skolens maskiner (finnes under SSH Secure Shell i Startmenyen). Evntuelt kan dere når dere sitter på skolemaskiner bare dra og slippe over til hjemmesideområdet deres via Utforsker. Passord og brukernavn til databasen har dere fra dere brukte MySQL i fjor, dette skal legges inn i wp-config-fila. Bloggene må vises gjennom Bogus siden Rasurt ikke støtter PHP, men katalogene vil fremdeles vises på deres vanlige hjemmeområde. Dersom dere ikke ønsker at passord og brukernavn skal være tilgjengelig i klartekst kan dere endre MySQL-passordet deres ved å koble dere på MySQL og skrive følgende

set password = password(”deresnyepassordher”);

Dere kan også lage en fil med “Options -Indexes” som eneste innhold, lagre den som .htaccess og legge den i rotkatalogen på hjemmeområdet deres (public_html). Dette hindrer at folk kan bla i WordPress-katalogen ved å gå gjennom det vanlige hjemmeområdet deres.

.htaccess er en valgfri fil man kan bruke til å endre på diverse innstillinger for Apache (webserveren dere bruker), men er stort sett ikke nødvendig å bale med.

De av dere som har boka bør lese gjennom introduksjonskapittelet (”Understanding WordPress” osv) samt “Customizing Theme”-kapittelet for å få litt mer føling med anatomien i WordPress.

WordPress.com-bloggene er integrert og profesjonelt hostet pakke, men med egeninstallert WP står dere på egne ben. Dette gir endel flere muligheter, men samtidig endel ansvar i forhold til å håndtere spamkommentarer osv. Noe av det første man gjør på en ny WP-installasjon er å aktivere Aksimet, en plugin som håndterer kommentarspam. Instruksjoner finnes på de vanlige plassene.

Andre nyttige plugins er listet opp i Codexen, hvilket er et brukerdrevet dokumentasjonssystem der det finnes enorme mengder informasjon. I tillegg til wikien er det også forum og andre nyttige ting.

Etter at dere har installert bloggen på bogus.uib.no, kan dere forsøke å importere postene fra wordpress-com-bloggen deres. Etter dette får vi ta det litt som det kommer, men hovedpoenget er å utvikle en forståelse av hvordan vi kan bruke WP som verktøy til å presentere innhold på litt andre måter enn man vanligvis gjør med blogger.

Litt om hvordan WordPress virker

Selve innholdet i bloggen befinner seg i databasen. I stedet for at vi skriver spørringer direkte mot databasen når vi skal vise postene, benytter vi oss av WordPress sine innebygde funksjoner i form av “template tags”. Dette er instruksjoner til WordPress om hva som skal gjøres eller hva slags type innhold som skal hentes. Skal vi vise forfatter, tittel, kategori og innholdet i et blogginnlegg benytter vi henholdsvis the_author, the_title(), the_category() og the_content(). Dersom dere titter litt i koden til to templatene som følger med WordPress så vil dere kjenne igjen flere av disse.

Dere bør få en oversikt over hvordan man manipulerer “template tags”, først og fremst i forbindelse med å flytte elementer til ulike steder på siden, men også ved å endre hvordan funksjonen oppfører seg. Mange template tags har parametre vi kan benytte oss av for å endre default-oppførselen. Det står masse om template tags i Codexen, begynn gjerne her.

WordPress-installasjonen er knyttet opp mot selve databasen ved hjelp av PHP. Men PHP brukes til mer enn bare funksjoner knyttet til databasen. De ulike hovedelementene i bloggen har hver sin php-fil, slik at disse kan settes sammen litt ettersom når man trenger dem. Det en fil for header, en for sidemeny, en for footer, osv. Disse filene settes sammen til den brukeren tilslutt får se, ved hjelp av en “hovedfil”, hvilket for eksempel er index.php eller archive.php. Dette foregår omtrent på denne måten:

<?php
get_header(); // henter php-fil der headeren ligger
if (have_posts()) : // sjekker om det finnes noen poster
   while (have_posts()) //starter løkke som kjøres så lenge parantesen stemmer
      the_post();//henter post som gjelder akkurat denne løkkekjøringen
      the_content(); // henter innholdet av posten funnet over
   endwhile; // gjør slutt på while-løkke og dermed loopen
endif; // gjør slutt på if have_posts
get_sidebar(); // henter sidemenyfil
get_footer(); // henter sidebunnfil
?> // her var det slutt på php-en også, gitt

(At kodeeksempelet over bryter ut av innholdskolonnen og dytter menyen nedover i Internet Explorer eksemplifiserer begrensningene med å ha bloggen hos wordpress.com – med egen blogg har vi kontroll på visningen selv.)

Hva er det som avgjør hva som kommer med i en post? Postene på bloggen vises i henhold til kriteriene man gir innenfor det som i WordPress-terminologien kalles The Loop. Alt som skal være med i posten må plasseres innenfor denne løkka. Dere ser den i kodeeksempelet over, den begynner gjerne sånn: <?php while (have_posts()) : the_post(); ?>

Dette betyr altså at WordPress skal hoste opp alt som er av poster. Dersom vi vil være litt mer spesifikke på hva slags poster som skal hentes ut kan vi angi dette i forkant av løkken, for eksempel sånn som dette:

<?php query_posts('cat=1&showposts=7'); ?>

Alle kategoriene har et id-nummer, og dette betyr altså at de første 7 postene i kategori 1 hentes opp.

Templathierarkiet har endel å si for hvordan WordPress oppfører seg. Det kan være litt vanskelig å få tak på (eller i hvertfall å forklare), men det er nyttig når man f.eks ønsker å gi skreddersy enkelte sider (pages) eller poster. Her er et eksempel på forholdet mellom templatene i hierarkiet:

1. category-6.php
2. category.php
3. archive.php
4. index.php

WordPress forsøker alltid å lete frem passende templat for siden brukeren laster. Dersom brukeren for eksempel følger lenken til kategorien “ballongdrama”, og dette er kategori 6, vil WordPress se etter filen category-6.php i katalogen til det gjeldende temaet. Eksisterer ikke denne filen, leter den den etter category.php. Finnes ikke den, ser den etter archive.php, og som en siste løsning henter den fram index.php.

Det dette betyr i praksis er at selv om det ikke i utgangspunktet finnes et eget templat for ulike kategorier, kan vi lage et slikt templat, og for eksempel kalle det for category-6.php. Dermed vil denne kategorien kunne vises på en annen måte enn de andre kategoriene. Men det er ikke noe krise dersom kategorien har et eget templat, siden WordPress vil benytte et templat som ligger lavere i templathierarkiet (typisk ligger både category.php, archive.php og index.php inne i de ulike temaene som standard).

WordPress-øving 2: Oppgaver

Formålet med forrige øving var å få en grunnleggende forståelse av blogger som verktøy og kommunikasjonsform. Dere satt opp en blogg på WordPress.com og utførte små, uformelle oppgaver. I dag skal det fortsatt handle om å utvikle en forståelse av verktøyet, men siden det kanskje er litt kjedelig i lengden å pusle med frivillige og ustrukturerte oppgaver, gjør vi det på en litt annen måte.

I stedet for å plassere de ulike oppgavene etter hverandre i denne posten, har jeg strødd de litt rundtomkring på weben. Dere må dermed gjennom et slags rebusløp. Bare uten rebuser. Og uten løp.

For å løse disse oppgavene trengs ikke så mye mer enn å ha fulgt sånn halvveis med på det som foregikk sist samt å ha en noenlunde forståelse av hvordan en søkemotor og et bloggverktøy fungerer.

Den første oppgaven består av følgende ord:

Gamingassistent

Den neste oppgaven finner dere ved svaret på den første.

Dersom dere har noen spørsmål angående oppgavene er svaret på de fleste av dem “det får dere finne ut av selv”. Hvis det er tekniske ting dere lurer på, får dere spørre. Blir dere ferdige før tiden får dere spise potetgull, ha klassens time og hoppe strikk.

Beskyttet: WordPress-øving 2: flere deloppgaver…

Denne posten er passordbeskyttet. Skriv inn ditt passord i feltet under for å lese:

Passord:

Beskyttet: WordPress-øving 2: deloppgaver…

Denne posten er passordbeskyttet. Skriv inn ditt passord i feltet under for å lese:

Passord:

WordPress-øving 1: Diverse Bloggpussel

Sette opp en blogg på wordpress.com
Gjør dere kjent med grensesnittet. Hvor administrerer man innholdet, hvor endrer man innstillingene og hvor endrer man utseendet? Finn ut av forskjellen på Post og Page.

Bytt til et “theme”/utseende dere liker bedre enn det som ligger inne som standard

Rediger tittelen på det første innlegget til å være “hello world” på et annet språk enn engelsk eller norsk.

Fjerne dummy-teksten i det første innlegget og legge ut (embedde) en video dere finner på YouTube – framgangsmåten for dette skiller seg litt fra det dere er vant med dersom dere har testet det andre steder, oppskriften er å finne inne på siden der dere skriver/redigerer poster. Gi posten en eller annen kategori.

Logg dere inn på mevi171-kontoen på Bloglines (brukernavn: mevi171, passord: mevi171). Finn ut av hvordan dere legger til egen blogg.

Finn ut av forskjellen på “Post Status” (Published, Draft Private)

Fjern innholdet i bloggrollen og legg til tre eller flere andre i klassen der

Slett dummykommentaren som ligger i bloggen

Endre innstillinger for kommentarer, ved å fjerne krysset ved “Comment author must have a previously approved comment”

Ta en titt på noen andre i klassen sine blogger, legg gjerne til kommentarer. Finn siden i adminpanelet der dere kan holde styr på kommentarene deres har gjort på andre wordpress.com-blogger.

Teste ut hva dere liker best av å med å skrive med rich text editoren eller med kode (”visual” eller “code”)

Finn ut hva widgets er og hvordan de virker. Velg ut noen som kan virke nyttige å bruke.

Finne ut hva Snap Preview er, og om dette egentlig er noe dere trenger?

Hvis dere vil:
Legge inn en avatar/bilde
Endre “slagord” /tagline
Sette klokkeslett til å vise riktig tid.

Hej värld!