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 :)

Lars Bachmann

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

Prøv lige at se disse indlæg også!

22 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. Laila Jensen siger:

    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 siger:

    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. Lars Bachmann siger:

    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 siger:

    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?

    • Marrit siger:

      Hej Thomas,

      Fik du svar på dit spørgsmål? For jeg sidder med samme :-)

    • Lars Bachmann siger:

      Hej Thomas og Marrit
      I princippet kan du godt bruge det på andre temaer, men typisk vil et andet tema have en anden HTML struktur, og andre CSS klasser. Så det er ikke givet det vil se godt ud.

  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. Marrit siger:

    Er der nogen der ved hvad proceduren er når den ikke vil downloade page.php? Den siger at forbindelsen til serveren er afbrudt

  14. Lars Bachmann siger:

    Hej Marrit
    Du kan ikke kopiere direkte fra Filezilla. Du skal downloade den til din PC/Mac og lave en kopi der. Kopien åbner du så på computeren og tilføjer/ændrer -> Template name:
    Og så uploader du den igen med Filezilla.

    • Marrit siger:

      Hej Lars,

      Jeg er med på at jeg skal downloade den først og derefter lave en kopi, men jeg kan simpelthen ikke få den downloaded til min PC. Hver gang jeg prøver at downloade så siger den:
      Status: Påbegynder download af /wp-content/themes/CherryFramework/page.php
      Fejl: Kunne ikke åbne “C:\Windows\page.php” for skrivning
      Fejl: Filoverførsel slog fejl

      • Lars Bachmann siger:

        Hej Marrit.
        Det er højst sandsynlig fordi du downloadet til C:\Windows.. mappen. Her har man normalt ikke skriverettigheder. Prøv at downloade til din Dokument mappe, eller til skrivebordet i stedet?

  1. 7. februar 2013

    [...] har tidligere skrevet hvordan du opretter ekstra sideskabeloner til dit WordPress tema. Men har du også behov for have forskellige widgets på dine sider, og ikke vil bruge et plugin, [...]

Skriv et svar

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

Disse HTML koder og attributter er tilladte: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>