Lag ditt eget WordPress-tema


wp2

Du kan laste ned nye ferdiglagde temaer i WordPress, eller du kan lage ditt eget tema helt fra grunnen av. Hvis du velger å lage ditt eget tema, har du full kontroll over hvordan din blogg eller nettside vil se ut, og hvilke funksjoner den har.

Det å lage eget tema, krever imidlertid ganske god kunnskap til koding med HTML, PHP og CSS. Jo mer du kan, jo bedre kontroll får du over sluttresultatet.

Artikkelen du finner under er et redigert utdrag av en artikkel jeg fant på Dataportalen om emne og som gir en grei oversikt over basic trinnene i å lage et eget WordPress tema.

Eget tema vs child-tema

Forskjellen mellom det å lage et «child»-tema, og det å lage et tema fra grunnen av, er at et tema som er laget fra grunnen av har ingen referanse til et annet tema, men lever sitt eget liv.

Artisteer

Før vi går videre ønsker vi å tipse om et verktøy som gjør det enklere å lage et nytt tema. Programmet Artisteer har et visuelt grensesnitt som gjør oppgaven ganske enkel – du velger selv komponentene via menyer, og Artisteer oppretter deretter filene automatisk. Artisteer er imidlertid ikke gratis – les mer.

Ønsker du derimot å gjøre jobben manuelt, helt gratis, kan du lese videre.

Redigeringsverktøy

Filene som lager et WordPress-tema består av ren tekst, så du kan bruke et hvilket som helst tekstprogram, f.eks. Notepad++.

Filer som trengs for å lage et tema

Et tema er laget av følgende filer. Vi deler filene i tre grupper i forhold til hvor nødvendige de er – jo flere filer du har med i et tema, jo «bedre» blir gjerne temaet, men dette avhenger av hva du skal bruke temaet til:

Filer som absolutt må være med:

  • style.css
  • index.php

Strengt tatt er kun style.css nødvendig, men index.php bør også være mer.

Disse filene bør også være med:

  • header.php
  • footer.php
  • sidebar.php

Resten av tema-filene:

Dette er filer som har ulike funksjon, og bør kun være med hvis du ønsker en bestemt funksjon.

  • front-page.php
  • archive.php
  • category.php
  • tag.php
  • single.php
  • page.php
  • attachment.php
  • 404.php
  • author.php
  • comments.php
  • functions.php
  • search.php
  • searchform.php

«The Loop»

«The Loop» er et viktig begrep i WordPress – den brukes til å vise innhold på en nettside. «The Loop» sender en forespørsel om hvilket innlegg eller en side som skal publiseres på nettsiden. The Loop er altså en løkke, en rutine, som kjøres gang på gang, for å hente et eventuelt innhold til nettsiden.

For ordens skyld, dersom du er en vanlig bruker, og ønsker ikke å fordype deg i WordPress, trenger du ikke å tenke på dette. «The Loop» er en prosess som pågår i bakgrunnen, og er kun interessant for utviklere.

Utviklingsprosess av et tema

Det finnes mange måter å gå frem, hvis du skal laget ditt eget tema, men mange utviklere bruker følgende fremgangsmåte:

  1. Du kan tegne opp en skisse av bloggen/nettsiden du skal lage. Bruk Photoshop eller et annet program, eventuelt penn og papir. Forutsetningen er selvfølgelig at du på forhånd vet hvordan nettsiden skal se ut.

  2. Bruk HTML-og CSS-kode til å lage en nettside som er basert på skissen du har tegnet i forrige trinn. Her lager du en statisk index.html-fil.

    Du kan velge å droppe dette trinnet, hvis du av en eller annen grunn ikke har lyst å gå en ekstra runde med statisk HTML. Mange utviklere synes
    dette trinnet er viktig, blant annet fordi de mener denne måten er mer grundig – fordelen er at du har en statisk HTML-fil liggende i tilfelle videreutvikling av prosjektet skal lages på en annen måte enn ved bruk av WordPress.

  3. Lag et WordPress-tema som er basert HTML-filen du kodet i forrige trinn. Her lager du filer som style.css, index.php, header.php, footer.php, sidebar.php og så videre.

Blank tema

Blank tema (også kalt «starter theme») er tema som har alle funksjoner som et WordPress-tema skal ha, altså grunnleggende PHP-koder, men som mangler design. Et tema av denne typen kan sies å være nøytralt.

Blank tema er kjekt å ha for å ha noe å starte med, hvis du ønsker å lage ditt eget tema, men samtidig ønsker å ha et rammeverk som du kan jobbe ut fra.

Eksempler på blanke temaer:
Det finnes mange nedlastbare blanke temaer på internett – dette er bare noen få eksempler:

Slik kan det gjøres

Lag først en skisse som viser hvordan du ønsker nettsiden skal se ut. Lag så en liste over filer du trenger til dette temaet. Tema-filene legger du i en egen mappe i wp-content/theme i din WordPress-installasjon – du oppretter altså en egen mappe som er en undermappe av themes, slik:

  • /wp-content/theme/mitt_tema/

Når denne mappen er på plass, kan du aktivere det nye temaet via Utseende, Tema i kontrollpanelet i WordPress. Du trenger kun filene style.css og index.php for å gjøre det nye temaet synlig i kontrollpanelet. Hvis ikke det nye temaet dukker opp i grensesnittet, må du kanskje oppdatere siden i netttleseren.

En skisse

Dette er en skisse for en nettside vi ønsker å lage et tema for:

wordpress_tema_skisse

For denne nettsiden oppretter vi følgende filer. Dette er de absolutt grunnleggende filene for denne strukturen:

  • style.css
  • index.php
  • header.php
  • footer.php
  • sidebar.php

Style.css

I utgangspunktet trenger du kun filene style.css, og index.php bør også være med. Strengt tatt er ikke index.php nødvendig, men temaet kan ikke aktiveres hvis ikke denne filen er med.

Slik kan style.css se ut:

THEME NAME: MittTema
THEME URI: http://www.din_nettside.com/mitttema/
DESCRIPTION: Tema for din nettside.
VERSION: 1.0
AUTHOR: Navnet Ditt

Temanavnet (THEME NAME) bør være unikt – dette er spesielt viktig hvis du har tenkt å dele temaet ditt på nettet. Du bør derfor sjekke om det finnes andre temaer som har et navn som ligner, og eventuelt endre navnet, hvis det viser seg å være nødvendig.

Du kan gjerne utvide koden i CSS-filen, for eksempel slik:

THEME NAME: MittTema
THEME URI: http://www.din_nettside.com/mitttema/
DESCRIPTION: Tema for din nettside.
VERSION: 1.0
AUTHOR: Navnet Ditt
body { text-align: left; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }

Du kan selvfølgelig justere kodene og verdiene slik du ønsker å ha dem. Denne filen er laget med CSS-koder.

Index.php

Index.php er standard malen for nettsiden din. Det er denne filen som setter sammen nettsiden til en helhet – den kan legge inn filer som header.php, footer.php og sidebar.php, det vil si de ulike «modulene» som kan være i en nettside.

Denne filen kan se slik ut:

<?php get_header(); ?>
<div id=»main»>
<div id=»content»>
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time(‘F jS, Y’) ?></h4>
<p><?php the_content(__(‘(more…)’)); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id=»delimiter»>
</div>
<?php get_footer(); ?>

Denne koden henter informasjonen fra filen header.php:

<?php get_header() ?>

Denne koden henter inn informasjon fra filen footer.php:

<?php get_footer() ?>

Denne koden henter informasjon fra filen sidebar.php:

<?php get_sidebar() ?>

Følgende kode kan brukes i tilfelle du skal ha to menyer i nettsiden din (høyre og venstre) – denne henter informasjon fra filen sidebar-right.php:

<?php get_sidebar(‘right’) ?>

Header.php

Denne filen viser innholdet på toppen på nettsiden din. Den inneholder både <head> slik det forekommer i et HTML-dokument, men også starten av nettsiden. Dette inkluderer gjerne en logo og eventuell navigasjon (lenker eller knapper), pluss eventuelt søkevindu.

En viktig del av header.php er wp_head(), det er en kommando som gir filen en bestemt funksjon. Denne kommandoen er viktig for videre utvikling av temaet.

Slik kan filen header.php se ut:

<html>
<head>
<title>>Tittel</title>
<link rel=»stylesheet» href=»<?php bloginfo(‘stylesheet_url’); ?>»>
</head>
<body>
<div id=»wrapper»>
<div id=»header»>
<h1>Overskrift</h1>
</div>

Footer.php

Viser innholdet på bunnen på nettsiden din. Denne inneholder gjerne «copyright»-og kontakt-informasjon, men kan også ha noen widgeter som viser mer informasjon, altså informasjon som vises på alle sider. Den innholder også slutt-taggene i en HTML-fil, nemlig </body></html>.

Slik kan filen footer.php se ut:

<div id=»footer»>
<h1>Overskrift</h1>
</div>
</div>
</body>
</html>

Sidebar.php

Viser en meny på venstre eller høyre side på nettsiden din, eventuelt på begge sider. Der går an å opprette eventuelle flere slike filer, for eksempel sidebar-lef.php, sidebar-right.php, sidebar-banner.php, sidebar-photos, og så videre. Kommendoen get_sidebar() brukes il index.php, for å hente innholdet i sidebar.php. For eksempel slik:

<?php get_sidebar(‘left’); ?>

Denne linjen kan legges inn så mange ganger du bare orker, hvis du vil legge inn flere sider.

I vårt eksempel legger vi inn en meny på høyre siden. Her plasseres gjerne navigasjonsmuligheter.

Slik kan sidebar.php se ut:

<div id=»sidebar»>
<h2 ><?php _e(‘Categories’); ?></h2>
<ul >
<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0?); ?>
</ul>
<h2 ><?php _e(‘Archives’); ?></h2>
<ul >
<?php wp_get_archives(‘type=monthly’); ?>
</ul>
</div>

Andre filer

Resten av filene legger du inn hvis du vil legge inn flere funksjoner i ditt WordPress-tema.

Front-Page.php

Viser forsiden på nettstedet ditt.

Archive.php

Viser eldre innhold, altså innhold på en dag, en måned, kategoriliste.

Single.php

Visning av et helt innlegg, gjerne med kommentarer.

Page.php

Visning av en side.

Category.php

Dette er en fil som overskriver archive.php for kategorier.

Tag.php

Dette er en fil som overskriver archive.php for tagger.

Attachment.php

Denne filen brukes blant annet til å lage image.php, en fil som brukes til å vise bilder på nettsiden din.

404.php

Noen ganger skjer det feil på nettsiden din, altså at noen funksjoner ikke gjør jobben sin. Da dukker opp en side som viser innholdet i 404.php.

Author.php

Viser informasjon om forfatter.

Comments.php

Denne filen styrer kommentarer på nettsiden din.

Functions.php

Denne filene generer ikke noe innhold på nettsiden din, men er likevel veldig viktig. Her finner du ulike funksjoner.

Search.php

Denne filen lager siden for et søkeresultat.

SearchForm.php

Dette er filen som lager selve søkefeltet.

For mer informasjon les originalteksten her.

Kilde: Dataportalen