Dataporten.net

hjelper deg på nettet

Lag ditt eget WordPress-tema

by · 02/05/2022

Du kan på en enkel måte aktivere et annet tema i WordPress, eventuelt laste ned nye ferdiglagde temaer i WordPress – les mer om dette i vår guide.

Et alternativ er å lage ditt eget tema helt fra grunnen av – du får da full kontroll over hvordan din blogg eller nettside vil se ut, og hvilke funksjoner den har.

Les også: WordPress-skolen

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.

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. Les mer i vår guide.

Redigeringsverktøy

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

Les også: PHP-guide
Les også: Innføring i HTML

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

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

Vi skal nå gjennomgå den grunnleggende prosessen ved å lage ditt eget tema. Vi legger først frem en skisse, slik en nettside kan se ut, og kommer med eksempler på filer som kan brukes til å lage en nettside som er basert på denne skissen. 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.

Les også: Innføring i CSS

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>Overskrift</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Skrevet <?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.

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.

Archive.php

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

Attachment.php

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

Author.php

Viser informasjon om forfatter.

Category.php

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

Comments.php

Denne filen styrer kommentarer på nettsiden din.

Front-Page.php

Viser forsiden på nettstedet ditt.

Functions.php

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

Page.php

Visning av en side.

Search.php

Denne filen lager siden for et søkeresultat.

SearchForm.php

Dette er filen som lager selve søkefeltet.

Single.php

Visning av et helt innlegg, gjerne med kommentarer.

Tag.php

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

Veien videre

Skal du lage et WordPress-tema, akkurat slik du vil ha det, må du ha ganske god kunnskap om koding på HTML, CSS og PHP. Det er viktig å huske at dette er ikke gjort over natta, men øvelse gjør mester. Sett gjerne opp en server på egen PC, og installer WordPress-på denne, slik at du kan øve deg på koding og WordPress-utvikling. Det finnes tilrettelagte pakkeløsninger for dette – les mer.

Les også: Slik installerer du WordPress på egen PC

Du finner gode ressurser og hjelp i denne oversikten – her finner du både nettsider som omhandler det grunnleggende, men også ressurser for avansert WordPress-utvikling. Videre finner du diskusjonsfora du kan stille spørsmål, og gode bøker som beskriver prosessene ved å utvikle ditt eget WordPress-tema.

Les også: Her får du WordPress-hjelp

Du finner også god informasjon og tips på følgende nettsider:

Til slutt kan vi nevne WordPress Themes in Depth – dette er en bok som ikke er gratis, men som er tilgjengelig til overkommelig pris. Denne boken anbefales for alle som ønsker å lage sitt eget WordPress-tema. Boken er skrevet av samme forfatter som har skrevet boka Digging into WordPress, som omhandler WordPress mer generelt, men en bok som også anbefales for WordPress-entusiaster.

Tags:

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *