Et typisk WordPress-nettsted består av en forside, innlegg – og en håndfull undersider. Ofte har man et ønske om at disse undersidene skal ha ulik oppbygning og varierende innhold, utover det man får til ved å bruke den innebygde editoren. Dette løses ved hjelp av sidemaler, som er en enkel sak å lage.

Før du begynner jobben med å lage en sidemal er det nyttig å ha tenkt igjennom om malen skal brukes til å vise flere ulike sider, eller kun til å vise én underside. Skal den benyttes for flere sider, og også være tilgjengelig for eventuelle fremtidige sider, benyttes en spesiell syntaks for å gi malen et navn og gjøre den tilgjengelig fra editoren. Skal den derimot kun benyttes for én underside løses tildelingen av malen ganske enkelt ved å navne PHP-fila på riktig måte.

Aller først; en gjennomgang av hvordan du gjør det når malen skal være tilgjengelig for et ubegrenset antall undersider.

Sidemaler for gjenbruk

Et godt utgangspunkt for en sidemal er page.php, som du med stor sannsynlighet finner i mappen til temaet du benytter. Dette er malen som velges hvis det ikke eksisterer andre maler spesifikke for undersiden som vises. Det er med andre ord nettopp dette vi nå er ute etter; å lage en alternativ sidemal som skal velges fremfor page.php, og som skal kunne velges fra WordPress-editoren for alle sider der den ønskes brukt.

Nettside eksempel. Illustrasjon.

La oss si at vi ønsker oss en «Om oss»-side der ikke bare teksten skrevet inn i editoren skal vises, men også et bilde over tekstinnholdet. Dette er fullt mulig å løse også inne i editoren, men ikke hvis vi ønsker bildet over – og ikke inne i – tekstområdet.

Dette er en mal det kan være kjekt også å ha i andre tilfeller, og det gir dermed mening å lage en sidemal som kan gjenbrukes.

Fremgangsmåten

  • Kopiér page.php og gi den nye fila et passende navn, for eksempel page_med_bilde.php. Navnet her er ikke viktig, men for ryddighetens del er det en fordel å benytte et beskrivende navn.
  • Øverst i fila skriver du inn følgende kode: 
    <?php /* Template Name: Side med bilde */ ?>

    Nettside eksempel. Illustrasjon.Det du nå allerede har gjort er å lage en sidemal med et navn, som vil være tilgjengelig i høyre meny i administrasjonpanelet når du er inne og endrer på innholdet til en underside – under valget Maldokument. (Se bildet til høyre). Men foreløpig vil det ikke ha noe for seg å velge malen, i og med at den ellers er identisk med page.php. Du kan likevel endre mal, lagre og se at siden ser identisk ut som før du endret mal.

  • Det vi nå skal gjøre er å foreta de endringene i malen vi ønsker å gjøre. Det vil variere hvordan ulike temaer er bygget opp, men det du nå må gjøre er å lokalisere stedet der sideinnholdet vises. Over dette området setter vi inn koden som viser bildet. I dette eksempelet benyttes temaet Twenty Fifteen, som følger med en standardinstallasjon av WordPress.Vi setter inn følgende kode i page_med_bilde.php: 
    <?php if ( is_page( 'om-oss' ) ) : ?> <div style="width:83.3334%;margin:0 8.3333%;overflow:hidden;">
<img style="height:100%;width:100%;" src="<?php echo get_template_directory_uri(); ?>/img/bil.jpg" />
</div>
<?php endif; ?>
<!--NB. Styling inline vha style attributtet er ikke å anbefale og kan være på kant med WCAG 2.0 Dette er kun for eksempelhets skyld-->

Denne lille kodesnutten sørger for å vise bildet dersom siden som vises har permanlenke (slug) «om-oss». Bildet vises kun på denne ene siden, og ikke eventuelle andre sider der malen er valgt. For øvrig bør visningen av bildet gjøres mer dynamisk i en ferdig løsning. Slik den fremstår nå vil man måtte endre koden for å bytte bilde, mens et bedre alternativ ville vært å velge bilde et sted i administrasjonspanelet – eksempelvis ved redigering av sideinnholdet. Løsningen illustrerer likevel hvordan sidemaler fungerer.

Merk også at kodesnutten kunne vært lagt inn i page.php, med samme resultat. Å opprette en egen sidemal gir i dette tilfellet bare mening hvis det også er aktuelt å gjøre ytterligere endringer, spesielt endringer av sidemalen som skal gjelde for en gruppe sider – og ikke bare navngitte enkeltsider. Eksempelvis å fjerne kommentarfeltet for alle sider der malen er valgt.

Hele koden i den nye fila page_med_bilde.php ser slik ut:

<?php /* Template Name: Side med bilde */ ?> 
<?php get_header(); ?>

<div id="primary" class="content-area">

<main id="main" class="site-main" role="main">
<!-- start på innsatt kode -->
<?php if ( is_page( 'om-oss' ) ) : ?>
<div style="width:83.3334%;margin:0 8.3333%;overflow:hidden;">
<img style="height:100%;width:100%;" src="<?php echo get_template_directory_uri(); ?>/img/bil.jpg" />
</div>
<?php endif; ?>
<!-- slutt -->
<?php
// Start the loop.
while ( have_posts() ) : the_post();

// Include the page content template.
get_template_part( 'content', 'page' );

// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;

// End the loop.
endwhile;
?>

</main><!-- .site-main -->
</div><!-- .content-area -->

<?php get_footer(); ?>

Voila, det ferdige resultatet:

Nettside eksempel. Illustrasjon.

Sidemaler for enkeltsider

Å opprette en egen sidemal for en enkelt underside foregår på samme måte som nevnt ovenfor, men styres av filnavnet istedenfor av en syntaks inne i fila. Dette innebærer for det første at malen ikke vil måtte velges, men automatisk benyttes av WordPress så snart fila er opprettet. For det andre innebærer det at man ikke risikerer at en bruker velger en sidemal for en side der den ikke var tenkt brukt. Hver sidemal er knyttet til én bestemt underside.

WordPress har et innebygget og fast navningsregime for sidemaler, som definerer hvilke maler som har høyest prioritet. Prioriteringsrekkefølgen er slik:

  1. Sidemal — Hvis det i administrasjonspanelet er valgt en spesialtilpasset sidemal, som beskrevet ovenfor, velges denne først.
  2. page-{slug}.php — Er det ikke valgt noen sidemal ser WordPress etter en fil navnet med permalenken. Skulle vi laget en enkelt sidemal i eksempelet ovenfor ville navnet dermed vært page-om-oss.php.
  3. page-{id}.php — Finnes det heller ingen slik fil, ser WordPress etter en fil med ID-nummeret til undersiden. I eksempelet ovenfor ville dette vært page-3.php. (Du finner ID-en ved å gå til editeringsmodus i administrasjonspanelet og sjekke adresselinjen).
  4. page.php — Nest siste mulighet er temaets standard visning av undersider; page.php.
  5. index.php — Finnes det ingen maler for visning av undersider benytter WordPress index.php til å vise siden.

Fremgangsmåten

  • Kopiér page.php og gi den nye fila nytt navn. Denne gangen har altså navnet alt å si, og sørger for å benytte malen på riktig underside. Navnet kan enten være page-om-oss.php eller page-3.php, hvis vi holder oss til eksempelet ovenfor. Så sant det ikke finnes andre maler i temaet ditt som kan påvirke valget, vil begge filnavn gi samme resultat; malen vil benyttes.
  • Gjør deretter endringene i malen, hva du nå enn ønsker at skal fravike fra standardvisningen.

Dette var en kort introduksjon til sidemaler i WordPress, som gjør det lekende lett å gi ulike undersider et varierende utseende og innhold. Mer om hvordan de fungerer finner du i den offisielle dokumentasjonen.