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.