Skip to content

Allt om WordPress, webbutveckling — och mer därtill

🛠️ Skapa ett WordPress-tema från HTML: steg för steg-guide (del 1)
WordPress-temanWebbutveckling
8 min1,538 ord

🛠️ Skapa ett WordPress-tema från HTML: steg för steg-guide (del 1)

En färdig HTML-sajt behöver inte kastas bort när du går över till WordPress. Du kan ta din uppmärkning, index.html och style.css, och förvandla den till ett fullt fungerande tema på ungefär en timme. Det här är ingen magi: WordPress är byggt på PHP-mallar, som i sin tur sätts ihop av vanlig HTML uppdelad i logiska delar.

Problemet är att de flesta guider antingen överöser dig med terminologi redan från första stycket eller tyst förutsätter att du redan kan PHP. Vi tar en annan väg: vi börjar med en konkret HTML-mockup (sidhuvud, innehåll, sidopanel, sidfot) och bygger metodiskt, fil för fil, ett fungerande tema från den. Ingen magi, bara kod och logik.

När du är klar med den här guiden har du ett färdigt tema som du kan ladda upp i WordPress adminpanel, aktivera och se din HTML inuti en dynamisk plattform. Det här är den första delen, grunden. I den andra delen går vi igenom individuella sidmallar, anpassade fält och anpassningspanelen.

💡 Snabb översikt:

  • Ge temat ett unikt namn och fyll i style.css-huvudet, WordPress känner igen teman på denna metadata.
  • Klipp isär originalets index.html i fyra PHP-filer: header.php, index.php, sidebar.php och footer.php.
  • Implementera standard WordPress-hookar (get_header, get_sidebar, get_footer, wp_head och wp_footer) så att plattformen "ser" och plockar upp din uppmärkning.
  • Lägg till WordPress-loopen i index.php, kodsnutten som matar ut blogginlägg inuti ditt HTML-ramverk.
  • Skapa ett ZIP-arkiv, ladda upp temat till adminpanelen och aktivera det, din sajt vaknar till liv på WordPress.

1. Namnge temat och style.css-filen

Det första du behöver göra är att ge ditt tema ett unikt namn. Även om du gör temat enbart för din egen sajt behöver WordPress kunna identifiera det i panelen "Utseende → Teman".

Utgångsläge:

  • Du har en index.html och en stilmallsfil style.css (eller någon annan CSS-fil).
  • Du har en fungerande WordPress-installation med minst ett standardtema, till exempel Twenty Twenty-Five.
  • Du har redan skapat en mapp för ditt framtida tema inuti /wp-content/themes/.

Öppna din kodredigerare (vi rekommenderar Sublime Text eller VS Code), kopiera innehållet i din stilmall till en ny fil och spara den som style.css i temamappen. Allra högst upp i filen, före all CSS-kod, lägger du till metadatablocket:

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*/

Ta inte bort kommentarstecknen /* och */, WordPress läser just dessa. Fältet Theme Name är nyckeln här: det är under detta namn temat kommer att visas i adminpanelen. De andra fälten är valfria, men vi rekommenderar att du fyller i alla, det är god praxis.

Spara filen. I det här läget kan WordPress redan känna igen ditt tema, även om det fortfarande är tomt och inte gör något användbart.

2. Dela upp HTML i PHP-mallar

Ett klassiskt WordPress-tema sätts ihop av flera PHP-filer, där var och en ansvarar för sin egen sektion av sidan. Den vanligaste layouten är sidhuvud, innehåll, sidopanel, sidfot. Om din HTML är strukturerad annorlunda (till exempel sidopanel till vänster eller två sidopaneler) är principen densamma, anpassa bara uppdelningen till din struktur.

Skapa fyra tomma filer i temamappen:

  • header.php, sidhuvud
  • index.php, huvudmall, monteringspunkt
  • sidebar.php, sidopanel
  • footer.php, sidfot

De är tomma än så länge, förvänta dig inga underverk. Vi tar det i ordning.

2.1 Header.php, sidhuvud

Gå till WordPress adminpanel, öppna "Utseende → Temaredigerare" och välj standardtemat (till exempel Twenty Twenty-Five). Hitta dess header.php och kopiera hela <head>-blocket, detta är den minsta uppsättningen metataggar och hookar utan vilka WordPress inte fungerar korrekt. Här är vad du behöver föra över till 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>

Funktionen bloginfo() hämtar dynamiskt webbplatsinställningar (teckenkodning, pingback-URL). Hooken wp_head() är kritisk: tillägg och WordPress kärna skjuter in sina skript, stilmallar och metataggar genom den. Utan den är temat halvdött.

Öppna nu din ursprungliga index.html och kopiera sidhuvudets kod, allt inuti <header> eller ett liknande block, och klistra in det i header.php **direkt efter den avslutande </head>-taggen och den inledande **<body>. I vår demo-uppmärkning ser det ut så här:

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

Lägg till anslutningen till din stilmall mellan <head>-taggarna:

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

Funktionen get_template_directory_uri() returnerar URL:en till din temamapp, sökvägen till CSS fungerar på vilken server som helst utan hårdkodning. Spara header.php.

2.2 Index.php, monteringspunkt

index.php i WordPress är en obligatorisk fil. Den lagrar inte uppmärkning som sådan utan sätter ihop sidan av delar. Öppna din tomma index.php och lägg till tre rader:

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

Den första raden inkluderar header.php. De två sista, sidebar.php och footer.php, hamnar längst ner. Huvudinnehållet (innehållsytan och loopen, mer om detta i nästa avsnitt) placeras mellan dem.

Kopiera blocket med klassen .content (huvudinnehållsytan) från din ursprungliga index.html och klistra in det mellan get_header() och 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

Schemat är enkelt: WordPress sätter ihop sidan sekventiellt uppifrån och ner, sidhuvud, innehåll, sidopanel, sidfot. Varje get_*() drar in motsvarande PHP-fil.

2.3 Sidebar.php och footer.php

Sidopanelen och sidfoten är mycket okomplicerade. Kopiera innehållet i .sidebar- och .footer-blocken från din index.html till motsvarande PHP-filer.

sidebar.php:

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

Funktionen dynamic_sidebar() matar ut widgetar som tilldelats i adminpanelen ("Utseende → Widgetar"). Om sidopanelen inte behövs, ta bort den här raden.

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

Notera: </body> och </html> flyttas till footer.php. I din ursprungliga HTML ligger de troligen också längst ner, och så ska det vara. Hooken wp_footer() är precis lika obligatorisk som wp_head(): utan den fungerar inte många tillägg och WordPress självt (till exempel visas inte adminfältet).

3. WordPress-loopen: mata ut inlägg

Temat är monterat, ramverket fungerar. Men innehållsytan är fortfarande statisk, med text hårdkodad från den ursprungliga HTML:en. För att WordPress ska börja mata ut riktiga blogginlägg behöver du The Loop, en speciell PHP-konstruktion som itererar genom publicerade inlägg och visar dem ett efter ett inuti din uppmärkning.

Det här är den viktigaste kodsnutten i temat. Den placeras i index.php, inuti <div class="content">-blocket, och ersätter den statiska platshållartexten:

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

Så här fungerar den:

  • have_posts() kontrollerar om det finns inlägg att visa. Om det finns, går den in i loopen.
  • the_post() förbereder data för nästa inlägg.
  • post_class() lägger till standard CSS-klasser på <article>, användbart för att styla olika inläggstyper.
  • the_permalink() och the_title() matar ut URL:en och titeln på inlägget.
  • the_content() är själva innehållet i inlägget.
  • the_post_thumbnail() är utvald bild, om en sådan är satt.
  • comments_popup_link() är länken till kommentarer.
  • next_posts_link() och previous_posts_link() hanterar sidnumrering.

else-blocket körs när det inte finns några inlägg alls, och visar ett platshållarmeddelande.

Efter att du infogat loopen ser din kompletta index.php ut så här:

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. Bygga och installera temat

Alla fem filer (style.css, header.php, index.php, sidebar.php och footer.php) ska ligga i din temamapp (döp den till exempel till my-html-theme). Paketera mappen i ett ZIP-arkiv.

Därefter följer standardscenariot: WordPress admin → "Utseende" → "Teman" → "Lägg till tema" → "Ladda upp tema." Välj ZIP-filen, klicka på "Installera" och sedan "Aktivera." Besök sajten, din HTML-mockup har vaknat till liv inuti WordPress, och blogginlägg visas i innehållsytan.

Här slutar den första delen. Du har nu ett fungerande temaramverk: WordPress känner igen det, plockar upp hookarna och matar ut dynamiskt innehåll via loopen. I nästa del går vi igenom individuella sidmallar (single.php, page.php), mallhierarkin och skriptinkludering via functions.php.

⁉️🤔 Vanliga frågor

Behöver jag kunna PHP för att bygga ett tema från HTML?

Nej. Det minimum du kommer att skriva är några funktionsanrop som get_header() och en loop på 15 rader. Allt annat är att kopiera HTML-kod du redan har. PHP fungerar här som "lim", inte som huvudspråk. Om du förstår var <?php ?> öppnar och stänger räcker det för att komma igång.

Vad händer om min HTML-mockup inte ser ut som "sidhuvud-innehåll-sidopanel-sidfot"?

Principen förändras inte. WordPress sätter ihop sidan genom att sekventiellt anropa PHP-filer, deras ordning i index.php bestämmer layouten. Om din sidopanel är till vänster anropar du bara get_sidebar() före innehållsblocket. Två sidopaneler? Skapa sidebar-left.php och sidebar-right.php med separata anrop. Schemat är flexibelt.

Kan jag skapa ett tema utan sidopanel?

Ja, och det förenklar till och med uppgiften. Ta bara bort anropet <?php get_sidebar(); ?> från index.php och skapa inte filen sidebar.php. Många moderna teman, inklusive WordPress blockteman, fungerar helt utan sidopanel.

Är det obligatoriskt att använda just header.php, index.php, sidebar.php och footer.php?

index.php och style.css är obligatoriska, utan dem ser inte WordPress temat. De andra filerna är valfria. Men header.php, sidebar.php och footer.php är de facto-standarden för klassiska teman: alla utvecklare förstår dem, och funktionerna get_header(), get_sidebar() och get_footer() är designade för dem. För ditt första tema, håll dig till denna uppsättning om fyra.

Fungerar detta tillvägagångssätt med blockteman (FSE)?

Nej, den här guiden är för klassiska PHP-teman, som fortfarande lever och stöds (WordPress har inte övergett dem och har inga planer på det). Blockteman (Full Site Editing) använder HTML-mallar och en theme.json-fil. Om ditt mål är att snabbt förvandla befintlig HTML till ett fungerande tema är den klassiska metoden betydligt enklare: färre abstraktioner, välbekant "sidhuvud-innehåll-sidopanel-sidfot"-modell.

Vad händer nu: ditt första steg inom temautveckling

Du har satt ihop ett grundläggande temaramverk från HTML-uppmärkning, med en fungerande loop, inkluderade hookar och dynamiskt innehåll. Temat går redan att installera i adminpanelen och matar ut inlägg. Nu finns det två riktningar för vidareutveckling:

  • Om det räcker att mata ut inlägg i din uppmärkning, fyll sajten med innehåll och finslipa CSS:en så att den matchar ditt varumärke.

Börja smått: bygg temat enligt den här guiden, aktivera det och lägg till ett par testinlägg. När du ser din HTML med levande inlägg inuti kommer allt annat att gå lättare.

Redaktionen
RedaktionenRedaktionellt team→ All publications

Ett professionellt team av skribenter och redaktörer specialiserade på att skapa kvalitetsinnehåll.