Velkommen til Lag ditt eget WordPress-tema! Dette er leksjon 1 av 8. Du kan starte uten konto — fremgangen lagres mens du jobber, og du kan ta en pause når som helst.
Hvordan et tema er bygget
Malfiler, style.css-headeren og mappestrukturen — temaets anatomi.
Et tema er ikke et program du installerer fra en butikk — det er en mappe med malfiler som bestemmer hvordan innholdet ditt ser ut. Denne leksjonen kartlegger anatomien: mappen, visittkortet i style.css og de to filene som gjør mesteparten av jobben.
Obs
PHP kjører på serveren
WordPress er skrevet i PHP, og PHP kjører på en WordPress-server — ikke i nettleseren. Arbeidsområdet her på skol.no kan kjøre web, JavaScript og SQL, men ikke PHP. PHP-koden i dette kurset er derfor statiske figurer du leser og forstår — øvingen skjer på din egen WordPress-installasjon, for eksempel med Local eller wp-env. Hver figur er en oppskrift du kan taste inn der.
Et tema er en mappe
Alle temaer bor i wp-content/themes/. Lag en mappe der, legg de riktige filene i den, og vises temaet i Utseende → Temer i WordPress-admin — klart til å aktiveres. Filene har faste navn WordPress kjenner igjen; navnet på mappen velger du selv og brukes som temaets identitet i filsystemet.
wp-content/└── themes/ └── furuvik/ ← temaet ditt ├── style.css ← stiler + temaets visittkort ├── index.php ← reservemalen som fanger alt ├── functions.php ← motorrommet som lastes hver gang ├── header.php ← toppen av hver side └── footer.php ← bunnen av hver sideÉn mappe = ett tema, og bare ett tema er aktivt om gangen. De andre temaene i mappen ligger der som alternativer — og som kode som må holdes oppdatert. Har du et tema du ikke bruker, kan det like gjerne slettes.
style.css — stiler og visittkort
style.css er temaets eneste obligatoriske fil, og den har to jobber. Nedover i filen er det vanlig CSS. Men aller øverst står en spesiell kommentarblokk som WordPress leser som temaets visittkort — den gir temaet navnet og beskrivelsen du ser i admin.
/*Theme Name: FuruvikAuthor: DuDescription: Eget tema for Furuvik Gjestegård.Version: 1.0*/ body { background: #faf7f2; color: #1d1d1b;}Mangler Theme Name-linjen, vises temaet ikke i admin i det hele tatt — filen er bare stiler uten identitet. Navnet må stå i den første kommentarblokken i filen, før noe annet CSS.
De to filene som gjør jobben
index.phper reservemalen: den WordPress bruker når ingen mer spesifikk mal passer. Et tema kan ikke aktivere seg uten den — den fanger alt som ikke har egen mal.functions.phper motorrommet: en PHP-fil som lastes ved hver forespørsel og registrerer stiler, meny-plasser og innebygd funksjonalitet. Du møter den grundig i leksjon 5.header.phpogfooter.phper gjengitte biter — toppen og bunnen av hver side. De hentes inn av de andre malene, som du ser i leksjon 6.
Tips
Slik øver du
Installer Local (localwp.com) eller bruk wp-env — begge gir deg en ekte WordPress-server på egen maskin. Lag en tom temamappe, taste inn visittkortet og de to filene, og aktiver temaet. Det trenger ikke se pent ut første dag — det skal bare vises.
Du kan nå
- forklare hva et tema er — en mappe med malfiler under wp-content/themes
- si hva visittkortet i style.css gjør, og hva som skjer uten Theme Name
- navngi jobben til index.php og functions.php