skabelon-thumb

En guide til WordPress sideskabeloner



Her kommer lige en lynguide til hvordan du kommer i gang med sideskabeloner i WordPress.

Er du en af dem der bruger WordPress som et CMS, så er sideskabeloner en rigtig god ting at lære. Det giver en god fleksibilitet som blandt andet er det der kendetegner et godt CMS.

I dit WordPress tema har du en række temafiler. Blandt andet er der:

  • index.php (Forsiden)
  • page.php (Til at vise sider med)
  • single.php (Til at vise indlæg med)

Når du opretter en side i WordPress har du, hvis der er flere sideskabeloner, mulighed for at vælge hvilken skabelon du vil bruge til den pågældende side. Det kan som sagt være en fordel at kunne ændre layout og tilpasse forskellige sideskabeloner til forskellige typer sider.

Jeg har blandt andet en sideskabelon som vises når man har tilmeldt sig mit nyhedsbrev. Her skriver jeg en tak for at man har tilmeldt sig, og opfordrer til også at “like” bloggen på Facebook.

(Hvis du vil se den, så er det bare at tilmelde dig mit nyhedsbrev)

Lav din første sideskabelon i WordPress

Da dette er en lille lynguide til sideskabeloner tager vi den hurtige måde. Har du ikke dit tema til at ligge lokalt på din computer, så download filen page.php med dit FTP program. Nu laver du en kopi af den og kalder den skabelon.php (eller et andet sigende navn).

Nu ser starten af min kode i skabelon.php således ud

Nu skal vi fortælle WordPress at det er en skabelon, og det gør vi ved at tilføje følgende kode i toppen af dokumentet.

/*
 * Template Name: Min skabelon
 */

Og så ser toppen af skabelon.php sådan ud

Nu kan du uploade skabelon.php til den tema mappe på serveren og hvis du prøver at oprette en ny side, vil du kunne se at du nu kan vælge den i menuen under sideegenskaber.

Der er dog ikke så meget ved at vælge den nu, da den er magen til den originale side (page.php), da det var den vi kopierede. Men nu er det kun fantasien der sætter grænser.

Du kan nu customize den side (skabelon.php) som du vil. Det kan være med ekstra widget områder, specielle forms, Facebook integrationer, lave en “full width” side, eller placere sidebar i modsatte side osv.

Bruger du WordPress som et CMS, så kan du lave en ekstra skabelon der hedder forside.php, som f.eks. har en billed slider og anden baggrund.

TIP: har du behov for at lave en “splashscreen”, så er det også en nem måde at gøre det på. Du laver bare et tomt dokument, og kalder det splash.php og designer din splachscreen som du vil. Det eneste du skal huske er at fortælle WordPress hvad navnet på skabelonen er.

Eksempel:

<?php

/*
 * Template Name: Min skabelon
 */
?>
<html
<head>
<title>Min splashscreen</title>
</head>
<body>
<h1>Velkommen til min splashscreen</h1>
</body>
</html>

Så har du en helt enkel splash til din WordPress side. Happy coding :)

Skrevet af Lars Bachmann

Iværksætter og Online nørd.
Arbejder med WordPress og online markedsføring i min virksomhed Conseo.

14 kommentarer til En guide til WordPress sideskabeloner

  1. Cool lille tips – fedt Lars :)

  2. Godt indlæg, Lars og tak for hjælpen :)
    Bliv bare ved med dem.

  3. Super indlæg – Jeg har fundet ud af at themes fra eks. elegantthemes.com virker på en lidt anden måde.
    Feks. har de en skabelon som hedder full width, denne skulle jeg bruge, men ønskede ikke side titlen vist på siden. Så jeg levede en kopi af full width (skabelonen) og kaldte den noget andet. Men jeg kunne ikke slette titlen i skabelonen, da den henter sin info fra en fil som hedder loop-page.php.

    Jeg gjorde det at jeg slettede denne kode fra loop-page.php

    Men så forsvandt titlen fra alle sideskabelonerne. Løsningen var for mig, at sætte koden

    ind på de side skabeloner, hvor jeg ønskede sidens titel vist.

    Blot hvis andre skulle kommer forbi med samme problem

  4. @Claus: Elegantthemes, StudioPress osv. bruger som regel deres eget framework/theme-opbygning, for at lette udviklingen af deres themes (og i StudioPress’ Genesis er mange funktioner bygget for at gøre det nemmere at designe sine egne temaer).

    Dette eksempel gælder altså kun for generel WordPress, og selv om princippet er det samme, kan fremgangsmåden variere en smule.

  5. Rigtig godt indlæg Lars!

    Jeg stod faktisk i en her situation får ikke ret lang tid siden, hvor jeg skulle finde ud af hvordan det virkede, men kunne simpelthen ikke finde ud af det.

    Tak for et godt indlæg!

  6. Det er super Christoffer. Jeg tænkte at jeg bare ville skrive løsningen, såfremt andre ramme siden, da det jo er et super indlæg:-)

  7. @Claus: Naturligvis – det var også mere tiltænkt selve indlægget. At poste sine løsninger er jo super, da det kan spare andre masser af timer! :-)

  8. Ah…tak Lars !!

    Jeg har kæmpet lidt med at finde ud af hvordan pokker man gjorde. Jeg troede det var vildt svært. Har godt kunnet tilpasse siderne, men ikke lavet mine egne skabeloner :)
    Nu kan jeg jo tilpasse og få det sat op som jeg vil :)

  9. Thomas

    Tak for dine altid vedkommende posts.

    Jeg er nybegynder med WordPress som CMS og vil gerne hurtigt i gang med at sætte et site op – uden at skulle lære mig selv at kode de sideskabeloner, som jeg nok får behov for. Kan du anbefale et godt gratis tema, som out-of-the-box kommer med en vifte af færdige sideskabeloner, der dækker de fleste behov ? Mit niveau er, at jeg formentlig godt kan hitte rede i at installere tema og plugins, men at kode…. :-)

  10. Hej Thomas. Prøv at tage et kig på http://themeforest.net/category/wordpress . Her bliver der solgt en masse temaer, som typisk indeholder indtil flere sideskabeloner. Prisen ligger fra $25 til $50 og du kan se en demo af designet inden du køber.

    Hvis du vil have et gratis, så er der nogle på http://www.woothemes.com/themes/free/ , men ellers må du i gang med at Google lidt. Bare husk at være kritisk med hvad du downloader og installere?

    God fornøjelse.

  11. Thomas

    Virkelig godt indlæg – mange tak for det!

    Når man har lavet en ny sideskabelon til et theme – er det så muligt, at anvende denne sideskabelon på andre themes også? Eller “knytter” en sideskabelon sig til det specifikke theme?

  12. Super godt Lars, læste lige om det på G+. Jeg har selv bakset med det og hvis jeg havde din artikel ville det ikke have taget mig en halv dag at få det lavet :-)

    Hvis du overvejer at lave en to’er kunne jeg personligt godt bruge lidt tips til hvordan man rent teknisk arbejder med andres plugins, fx. hvordan finder WpTouch ud af hvornår den skal bruge hvilket stylesheet, hvornår finder GDStar ud af at den skal indsætte stjerner osv. Hvis jeg skal rette i det hvor gør jeg det?

  13. Pingback: Widgets og sideskabeloner i WordPress

Skriv et svar

Din e-mail-adresse vil ikke blive offentliggjort. Krævede felter er markeret med *