Lag ditt eget WordPress-tema
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.
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. Vi anbefaler Notepad++, men du finner flere alternativer i vår oversikt.
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:
-
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.
-
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. -
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:
- Chris Coyier
- Roots
- Bones
- HTML5 Reset WordPress Theme
- HTML5-Boilerplate for WordPress
- Naked WordPress
- BlankSlate
- Underscores
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:
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’) ?>
Les også: PHP-guide
Les også: Innføring i HTML
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.
Siste kommentarer