Et typisk WordPress-nettsted består av en forside, innlegg og en håndfull undersider. Ofte vil man at noen av sidene skal ha en annen oppbygning enn resten, for eksempel et stort toppbilde, ingen sidekolonne eller en helt egen layout. Det løses med sidemaler.
Hvordan du lager en sidemal, avhenger av hva slags tema nettstedet bruker. I dag finnes det tre vanlige varianter:
- Klassiske tema – malene er PHP-filer i temamappen. Dette er metoden guiden opprinnelig handlet om, og den fungerer fortsatt.
- Blokktema – malene lages og redigeres i nettstedsredigeringen, uten kode.
- Sidebyggere som Elementor – malene lages i sidebyggeren.
Er du usikker på hvilket tema du har: Har du menyvalget Utseende → Editor (nettstedsredigering), bruker du et blokktema. Har du Utseende → Tilpass, er det et klassisk tema.
Sidemaler i klassiske tema (PHP)
Før du begynner, bør du tenke gjennom om malen skal kunne brukes på flere sider, eller bare på én bestemt side. Skal den gjenbrukes, gir du den et navn så den kan velges i redigeringen. Skal den bare gjelde én side, er det nok å gi PHP-fila riktig navn.
Viktig: Gjør endringene i et barnetema (child theme), ikke direkte i temaet. Endringer i selve temaet blir overskrevet neste gang temaet oppdateres.
Sidemal som kan gjenbrukes
La oss si at vi vil ha en «Om oss»-side der fremhevet bilde vises stort over teksten, og at vi vil kunne bruke samme oppsett på andre sider også.
- Kopier page.php fra temaet til barnetemaet, og gi fila et beskrivende navn, for eksempel page-med-toppbilde.php.
- Legg inn en malkommentar helt øverst i fila. Den gjør at malen dukker opp som et valg under Mal når du redigerer en side.
- Finn stedet i fila der sideinnholdet skrives ut, og legg inn koden for bildet rett over.
- Rediger siden, velg malen under Mal i innstillingene til høyre, og oppdater.
Malkommentaren øverst i fila:
<?php
/*
* Template Name: Side med toppbilde
* Template Post Type: page
*/Koden som viser fremhevet bilde over innholdet:
<?php if ( has_post_thumbnail() ) : ?>
<div class="toppbilde">
<?php the_post_thumbnail( 'full' ); ?>
</div>
<?php endif; ?>Fordi bildet hentes fra fremhevet bilde på hver side, kan du bytte bilde i redigeringen uten å røre koden. Stilen legger du i barnetemaets style.css, ikke som inline-stil i HTML-koden.
Med linjen Template Post Type kan du også gjøre malen tilgjengelig for innlegg, for eksempel Template Post Type: post, page.
Sidemal for én bestemt side
Skal malen bare gjelde én side, styres det av filnavnet. Da trenger ingen å velge malen, og den kan ikke velges på feil side ved et uhell. Kopier page.php og gi den et av disse navnene:
- page-om-oss.php – bruker sidens slug (permalenke)
- page-42.php – bruker sidens ID. ID-en ser du i adresselinjen når du redigerer siden.
Slik velger WordPress mal for en side
WordPress følger et fast malhierarki og bruker den første fila som finnes:
- Valgt sidemal – malen som er valgt under Mal i redigeringen
- page-{slug}.php – for eksempel page-om-oss.php
- page-{id}.php – for eksempel page-42.php
- page.php – temaets standardmal for sider
- singular.php – felles mal for enkeltsider og enkeltinnlegg
- index.php – temaets siste reserve
Sidemaler i blokktema
I blokktema, som WordPress sine egne standardtema fra Twenty Twenty-Two og nyere, er malene HTML-filer med blokker, og du redigerer dem visuelt:
- Gå til Utseende → Editor og velg Maler.
- Legg til en ny mal. Velg en egendefinert mal hvis den skal kunne brukes på flere sider, eller en mal for én bestemt side.
- Bygg opp malen med blokker, for eksempel et fremhevet bilde øverst og innholdsblokken under.
- Rediger siden, og velg malen under Mal i innstillingene til høyre.
Malhierarkiet over gjelder også for blokktema, men filene heter .html og ligger i temaets templates-mappe.
Sidemaler i Elementor
Bruker du Elementor, gjøres det meste i sidebyggeren:
- Elementor Canvas og Elementor Full Width – to ferdige sidemaler du kan velge under Mal. Canvas gir en tom side uten header og footer. Full Width beholder header og footer, men fjerner temaets marger og sidekolonne.
- Lagrede maler – lagre en side eller seksjon som mal, og gjenbruk den på nye sider.
- Theme Builder (Elementor Pro) – lag egne maler for header, footer, innlegg og arkiver, og bestem hvilke sider de skal gjelde for.
Oppsummert
Sidemaler gjør det enkelt å gi ulike sider ulik oppbygning. I klassiske tema lager du dem som PHP-filer i et barnetema. I blokktema bygger du dem i nettstedsredigeringen. I Elementor bruker du ferdige maler eller Theme Builder. Mer om malhierarkiet finner du i WordPress sin offisielle dokumentasjon.
Trenger du hjelp med maler, tema eller tilpasninger av WordPress-siden din? Se WordPress-hjelp og support.