Skip to content

Alt om WordPress, webutvikling — og mer til

🛠️ Lage et WordPress-tema fra HTML: steg for steg-guide (del 1)
WordPress-temaerWebbutvikling
8 min1,528 ord

🛠️ Lage et WordPress-tema fra HTML: steg for steg-guide (del 1)

Et ferdig HTML-nettsted trenger ikke kastes når du går over til WordPress. Du kan ta oppmerkingen din, index.html og style.css, og gjøre det om til et fullt funksjonelt tema på en times tid eller så. Dette er ikke magi: WordPress er bygget på PHP-maler, som i sin tur settes sammen av vanlig HTML delt opp i logiske deler.

Problemet er at de fleste veiledninger enten overvelder deg med terminologi fra første avsnitt eller stilltiende antar at du allerede kan PHP. Vi tar en annen tilnærming: vi starter med en konkret HTML-skisse (topptekst, innhold, sidefelt, bunntekst) og bygger metodisk, fil for fil, et fungerende tema fra den. Ingen magi, bare kode og logikk.

Når du er ferdig med denne veiledningen, vil du ha et ferdig tema som du kan laste opp til WordPress-administrasjonspanelet, aktivere og se HTML-en din inne på en dynamisk plattform. Dette er den første delen, grunnlaget. I den andre delen vil vi dekke individuelle sidemaler, egendefinerte felt og tilpasseren.

💡 Rask oversikt:

  • Gi temaet et unikt navn og fyll ut style.css-toppteksten, WordPress gjenkjenner temaer basert på disse metadataene.
  • Kutt den opprinnelige index.html i fire PHP-filer: header.php, index.php, sidebar.php og footer.php.
  • Implementer standard WordPress-hooks (get_header, get_sidebar, get_footer, wp_head og wp_footer) slik at plattformen «ser» og plukker opp oppmerkingen din.
  • Legg til WordPress-løkken i index.php, kodebiten som viser blogginnlegg innenfor HTML-rammeverket ditt.
  • Opprett et ZIP-arkiv, last opp temaet til administrasjonspanelet og aktiver det, nettstedet ditt våkner til live på WordPress.

1. Navngi temaet og style.css-filen

Det første du må gjøre er å gi temaet ditt et unikt navn. Selv om du lager temaet utelukkende for ditt eget nettsted, trenger WordPress å identifisere det på en eller annen måte i panelet «Utseende → Temaer».

Utgangspunkt:

  • Du har en index.html og en stilarkfil style.css (eller en annen CSS-fil).
  • Du har en fungerende WordPress-installasjon med minst ett standardtema, for eksempel Twenty Twenty-Five.
  • Du har allerede opprettet en mappe for ditt fremtidige tema i /wp-content/themes/.

Åpne koderedigeringsprogrammet ditt (vi anbefaler Sublime Text eller VS Code), kopier innholdet i stilarket ditt til en ny fil og lagre den som style.css i temamappen. Helt øverst i filen, før all CSS-kode, legger du til metadata-blokken:

1/*
2Theme Name: My HTML-to-WordPress Theme
3Theme URI: https://example.com
4Description: Theme assembled from a static HTML layout.
5Version: 1.0
6Author: Your Name
7Author URI: https://example.com
8Tags: custom-theme, html-to-wordpress, beginner
9*/

Ikke fjern kommentarsymbolene /* og */, WordPress leser akkurat disse. Feltet Theme Name er nøkkelen her: dette er navnet temaet vil vises under i administrasjonspanelet. De andre feltene er valgfrie, men vi anbefaler å fylle dem alle ut, det er god praksis.

Lagre filen. På dette stadiet kan WordPress allerede gjenkjenne temaet ditt, selv om det fortsatt er tomt og ikke gjør noe nyttig.

2. Dele HTML inn i PHP-maler

Et klassisk WordPress-tema settes sammen av flere PHP-filer, hver ansvarlig for sin egen del av siden. Den vanligste layouten er topptekst, innhold, sidefelt, bunntekst. Hvis HTML-en din er strukturert annerledes (for eksempel sidefelt til venstre eller to sidefelt), forblir prinsippet det samme, bare tilpass oppdelingen til din struktur.

Opprett fire tomme filer i temamappen:

  • header.php, nettstedets topptekst
  • index.php, hovedmal, samlingspunkt
  • sidebar.php, sidefeltpanel
  • footer.php, bunntekst

De er tomme foreløpig, ikke forvent mirakler. La oss gå i rekkefølge.

2.1 Header.php, nettstedets topptekst

Gå til WordPress-administrasjonspanelet, åpne «Utseende → Temaredigering» og velg standardtemaet (for eksempel Twenty Twenty-Five). Finn dets header.php og kopier hele <head>-blokken, dette er minimumssettet med metakoder og hooks som WordPress ikke fungerer korrekt uten. Her er det du trenger å overføre til din header.php:

1<head>
2    <meta charset="<?php bloginfo( 'charset' ); ?>">
3    <meta name="viewport" content="width=device-width">
4    <title>&lt;?php wp_title( '|', true, 'right' ); ?&gt;</title>
5    <link rel="profile" href="https://gmpg.org/xfn/11">
6    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
7    <?php wp_head(); ?>
8</head>

Funksjonen bloginfo() setter inn nettstedets innstillinger dynamisk (tegnkoding, pingback-URL). Hooken wp_head() er kritisk: utvidelser og WordPress-kjernen setter inn sine skript, stiler og metakoder gjennom den. Uten den vil temaet være halvdødt.

Åpne nå din opprinnelige index.html og kopier topptekstkoden, alt inni <header> eller en lignende blokk, og lim den inn i header.php **rett etter den avsluttende </head>-taggen og den åpne **<body>-taggen. I vår demooppmerking ser det slik ut:

1<body>
2    <header class="header">
3        <p>This is header section. Put your logo and other details here.</p>
4    </header>
5

Legg til tilkoblingen til stilarket ditt mellom <head>-taggene:

1<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/style.css" />

Funksjonen get_template_directory_uri() returnerer URL-en til temamappen din, banen til CSS vil fungere på enhver server uten hardkoding. Lagre header.php.

2.2 Index.php, samlingspunkt

index.php i WordPress er en påkrevd fil. Den lagrer ikke oppmerking som sådan, men setter sammen siden fra deler. Åpne din tomme index.php og legg til tre linjer:

1<?php get_header(); ?>
2 
3<?php get_sidebar(); ?>
4<?php get_footer(); ?>

Den første linjen inkluderer header.php. De to siste, sidebar.php og footer.php, kommer helt nederst. Hovedinnholdet (innholdsområde og løkke, mer om dette i neste avsnitt) plasseres mellom dem.

Kopier blokken med .content-klassen (hovedinnholdsområdet) fra din opprinnelige index.html og lim den inn mellom get_header() og get_sidebar():

1<?php get_header(); ?>
2 
3    <div class="content">
4        <p>This is the main content area.</p>
5    </div><!-- .content -->
6 
7<?php get_sidebar(); ?>
8<?php get_footer(); ?>
9

Skjemaet er enkelt: WordPress setter sekvensielt sammen siden fra topp til bunn, topptekst, innhold, sidefelt, bunntekst. Hver get_*() henter inn den tilsvarende PHP-filen.

2.3 Sidebar.php og footer.php

Sidefeltet og bunnteksten er veldig enkle. Kopier innholdet i .sidebar- og .footer-blokkene fra din index.html til de tilsvarende PHP-filene.

sidebar.php:

1<aside class="sidebar">
2    <p>This is the side bar</p>
3</aside>
4 
5<?php dynamic_sidebar( 'sidebar' ); ?>
6

Funksjonen dynamic_sidebar() viser widgeter som er tilordnet i administrasjonspanelet («Utseende → Widgeter»). Hvis sidefeltet ikke er nødvendig, slett denne linjen.

footer.php:

1<footer class="footer">
2    <p>And this is the footer.</p>
3</footer>
4 
5<?php wp_footer(); ?>
6</body>
7</html>
8

Merk: </body> og </html> er flyttet til footer.php. I din opprinnelige HTML er de sannsynligvis også helt nederst, og slik skal det være. Hooken wp_footer() er like obligatorisk som wp_head(): uten den vil mange utvidelser og WordPress selv ikke fungere (for eksempel vil ikke administratorlinjen vises).

3. WordPress-løkken: visning av innlegg

Temaet er satt sammen, rammeverket fungerer. Men innholdsområdet er fortsatt statisk, med tekst hardkodet fra den opprinnelige HTML-en. For at WordPress skal begynne å vise ekte blogginnlegg, trenger du Løkken, en spesiell PHP-konstruksjon som itererer gjennom publiserte innlegg og viser dem ett etter ett inni oppmerkingen din.

Dette er den viktigste kodebiten i temaet. Den går i index.php, inni <div class="content">-blokken, og erstatter den statiske plassholderteksten:

1<?php if ( have_posts() ) : ?>
2    <?php while ( have_posts() ) : the_post(); ?>
3        <article <?php post_class(); ?>>
4            <header class="post-header">
5                <time datetime="<?php echo get_the_date( 'c' ); ?>">
6                    <?php echo get_the_date(); ?>
7                </time>
8                <h2>
9                    <a href="<?php the_permalink(); ?>" rel="bookmark">
10                        <?php the_title(); ?>
11                    </a>
12                </h2>
13                <span class="post-author"><?php the_author(); ?></span>
14            </header>
15 
16            <div class="entry">
17                <?php if ( has_post_thumbnail() ) : ?>
18                    <?php the_post_thumbnail( 'medium' ); ?>
19                <?php endif; ?>
20                <?php the_content(); ?>
21                <?php edit_post_link( 'Edit', '<span class="edit-link">', '</span>' ); ?>
22                <?php wp_link_pages(); ?>
23            </div>
24 
25            <footer class="post-footer">
26                <?php comments_popup_link(
27                    'Leave a comment',
28                    '1 comment',
29                    '% comments'
30                ); ?>
31            </footer>
32        </article>
33    <?php endwhile; ?>
34 
35    <nav class="navigation">
36        <div class="prev-posts"><?php next_posts_link( '← Previous posts' ); ?></div>
37        <div class="next-posts"><?php previous_posts_link( 'Newer posts →' ); ?></div>
38    </nav>
39<?php else : ?>
40    <p>No posts found.</p>
41<?php endif; ?>
42

Slik fungerer den:

  • have_posts() sjekker om det er innlegg å vise. Hvis det er det, går den inn i Løkken.
  • the_post() forbereder dataene for neste innlegg.
  • post_class() legger til standard CSS-klasser til <article>, nyttig for styling av ulike innleggstyper.
  • the_permalink() og the_title() viser URL-en og tittelen på innlegget.
  • the_content() er selve brødteksten i innlegget.
  • the_post_thumbnail() er innleggets miniatyrbilde, hvis et slikt er satt.
  • comments_popup_link() er lenken til kommentarer.
  • next_posts_link() og previous_posts_link() håndterer paginering.

else-blokken utløses når det ikke er noen innlegg i det hele tatt, og viser en plassholdermelding.

Etter å ha satt inn Løkken, ser din komplette index.php slik ut:

1<?php get_header(); ?>
2 
3    <div class="content">
4        <?php if ( have_posts() ) : ?>
5            <?php while ( have_posts() ) : the_post(); ?>
6                <article <?php post_class(); ?>>
7                    <header class="post-header">
8                        <time datetime="<?php echo get_the_date( 'c' ); ?>">
9                            <?php echo get_the_date(); ?>
10                        </time>
11                        <h2>
12                            <a href="<?php the_permalink(); ?>" rel="bookmark">
13                                <?php the_title(); ?>
14                            </a>
15                        </h2>
16                        <span class="post-author"><?php the_author(); ?></span>
17                    </header>
18                    <div class="entry">
19                        <?php if ( has_post_thumbnail() ) : ?>
20                            <?php the_post_thumbnail( 'medium' ); ?>
21                        <?php endif; ?>
22                        <?php the_content(); ?>
23                        <?php edit_post_link( 'Edit', '<span class="edit-link">', '</span>' ); ?>
24                        <?php wp_link_pages(); ?>
25                    </div>
26                    <footer class="post-footer">
27                        <?php comments_popup_link(
28                            'Leave a comment',
29                            '1 comment',
30                            '% comments'
31                        ); ?>
32                    </footer>
33                </article>
34            <?php endwhile; ?>
35            <nav class="navigation">
36                <div class="prev-posts"><?php next_posts_link( '← Previous posts' ); ?></div>
37                <div class="next-posts"><?php previous_posts_link( 'Newer posts →' ); ?></div>
38            </nav>
39        <?php else : ?>
40            <p>No posts found.</p>
41        <?php endif; ?>
42    </div><!-- .content -->
43 
44<?php get_sidebar(); ?>
45<?php get_footer(); ?>
46

4. Bygge og installere temaet

Alle fem filene (style.css, header.php, index.php, sidebar.php og footer.php) skal være i temamappen din (gi den navn, for eksempel, mitt-html-tema). Pakk mappen inn i et ZIP-arkiv.

Deretter, standardscenarioet: WordPress admin → «Utseende» → «Temaer» → «Legg til tema» → «Last opp tema». Velg ZIP-filen, klikk «Installer», deretter «Aktiver». Besøk nettstedet, HTML-skissen din har våknet til live inne i WordPress, og blogginnlegg vises i innholdsområdet.

Dette avslutter den første delen. Du har nå et fungerende temaramme: WordPress gjenkjenner det, plukker opp hookene og viser dynamisk innhold gjennom Løkken. I neste del vil vi dekke individuelle sidemaler (single.php, page.php), malhierarkiet og inkludering av skript via functions.php.

⁉️🤔 Ofte stilte spørsmål

Må jeg kunne PHP for å bygge et tema fra HTML?

Nei. Det minimale du vil skrive er noen funksjonskall som get_header() og en 15-linjers Løkke. Alt annet er å kopiere HTML-kode du allerede har. PHP fungerer her som «lim», ikke hovedspråket. Hvis du forstår hvor <?php ?> åpner og lukker, er det nok for å komme i gang.

Hva om HTML-skissen min ikke ser ut som «topptekst-innhold-sidefelt-bunntekst»?

Prinsippet endres ikke. WordPress setter sammen siden ved å sekvensielt kalle PHP-filer, rekkefølgen deres i index.php bestemmer layouten. Hvis sidefeltet ditt er til venstre, bare kall get_sidebar() før innholdsblokken. To sidefelt? Opprett sidebar-left.php og sidebar-right.php med separate kall. Skjemaet er fleksibelt.

Kan jeg lage et tema uten sidefelt?

Ja, og det forenkler til og med oppgaven. Bare fjern kallet <?php get_sidebar(); ?> fra index.php og ikke opprett filen sidebar.php. Mange moderne temaer, inkludert WordPress blokktemaer, fungerer helt uten sidefelt.

Er det obligatorisk å bruke akkurat header.php, index.php, sidebar.php og footer.php?

index.php og style.css er obligatoriske, uten dem vil ikke WordPress se temaet. De andre filene er valgfrie. Men header.php, sidebar.php og footer.php er de facto-standarden for klassiske temaer: alle utviklere forstår dem, og funksjonene get_header(), get_sidebar() og get_footer() er designet for dem. For ditt første tema, hold deg til dette settet med fire.

Fungerer denne tilnærmingen med blokktemaer (FSE)?

Nei, denne veiledningen er for klassiske PHP-temaer, som fortsatt lever og støttes (WordPress har ikke forlatt dem og har ingen planer om det). Blokktemaer (Full Site Editing) bruker HTML-maler og en theme.json-fil. Hvis målet ditt er raskt å gjøre eksisterende HTML om til et fungerende tema, er den klassiske tilnærmingen betydelig enklere: færre abstraksjoner, kjent «topptekst-innhold-sidefelt-bunntekst»-modell.

Hva nå: ditt første steg i temautvikling

Du har satt sammen et grunnleggende temaramme fra HTML-oppmerking, med en fungerende Løkke, inkluderte hooks og dynamisk innhold. Temaet installeres allerede i administrasjonspanelet og viser innlegg. Nå er det to retninger for vekst:

  • Hvis det å vise innlegg i oppmerkingen din er nok, fyll nettstedet med innhold og finpuss CSS-en for å matche merkevaren din.

Start i det små: bygg temaet ved å følge denne veiledningen, aktiver det og legg til et par testinnlegg. Når du ser HTML-en din med levende innlegg inni, vil alt annet komme lettere.

Redaksjonen
RedaksjonenRedaksjonelt team→ All publications

Et profesjonelt team av forfattere og redaktører som spesialiserer seg på å lage kvalitetsinnhold.