Skip to content

Kaikki WordPressistä, web-kehityksestä — ja paljon muuta

🛠️ WordPress-teeman luominen HTML:stä: vaiheittainen opas (osa 1)
WordPress-teematVerkkokehitys
6 min1,228 sanaa

🛠️ WordPress-teeman luominen HTML:stä: vaiheittainen opas (osa 1)

Valmis HTML-sivusto ei ole roskis, kun siirryt WordPressiin. Voit ottaa merkintäkielesi, index.html:n ja style.css:n ja muuttaa ne täysin toimivaksi teemaksi noin tunnissa. Tämä ei ole taikuutta: WordPress on rakennettu PHP-pohjille, jotka puolestaan kootaan tavallisesta HTML:stä loogisiin osiin jaettuna.

Ongelmana on, että useimmat oppaat joko hukuttavat sinut terminologiaan heti ensimmäisistä kappaleista lähtien tai olettavat hiljaisesti, että osaat jo PHP:tä. Me otamme erilaisen lähestymistavan: aloitamme tietystä HTML-mockupista (header, sisältö, sidebar, footer) ja rakennamme siitä järjestelmällisesti, tiedosto kerrallaan, toimivan teeman. Ei taikuutta, vain koodia ja logiikkaa.

Tämän oppaan päätteeksi sinulla on valmis teema, jonka voit ladata WordPressin hallintapaneeliin, aktivoida ja nähdä HTML:si dynaamisen alustan sisällä. Tämä on ensimmäinen osa, perusta. Toisessa osassa käsittelemme yksittäisiä sivupohjia, mukautettuja kenttiä ja kustomoijaa.

💡 Pikaopas:

  • Anna teemalle yksilöllinen nimi ja täytä style.css:n otsikkotiedot, WordPress tunnistaa teemat näiden metatietojen perusteella.
  • Pilko alkuperäinen index.html neljäksi PHP-tiedostoksi: header.php, index.php, sidebar.php ja footer.php.
  • Ota käyttöön WordPressin standardikoukut (get_header, get_sidebar, get_footer, wp_head ja wp_footer), jotta alusta "näkee" ja poimii merkintäkielesi.
  • Lisää WordPress Loop index.php:hen, koodinpätkä, joka tulostaa blogikirjoitukset HTML-kehyksesi sisällä.
  • Luo ZIP-arkisto, lataa teema hallintapaneeliin ja aktivoi se, sivustosi herää eloon WordPressissä.

1. Teeman nimeäminen ja style.css-tiedosto

Ensimmäinen asia, joka sinun on tehtävä, on antaa teemallesi yksilöllinen nimi. Vaikka tekisit teeman vain omaa sivustoasi varten, WordPressin on tunnistettava se jotenkin "Ulkoasu → Teemat" -paneelissa.

Lähtötilanne:

  • Sinulla on index.html ja tyylitiedosto style.css (tai mikä tahansa muu CSS-tiedosto).
  • Sinulla on toimiva WordPress-asennus, jossa on vähintään yksi vakio-teema, esimerkiksi Twenty Twenty-Five.
  • Olet jo luonut kansion tulevalle teemallesi polkuun /wp-content/themes/.

Avaa koodieditorisi (suosittelemme Sublime Textiä tai VS Codea), kopioi tyylitiedostosi sisältö uuteen tiedostoon ja tallenna se nimellä style.css teemakansioon. Lisää tiedoston aivan alkuun, ennen kaikkea CSS-koodia, metatietolohko:

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

Älä poista kommenttimerkkejä /* ja */, WordPress lukee juuri nämä. Theme Name -kenttä on tässä avainasemassa: tällä nimellä teema näkyy hallintapaneelissa. Muut kentät ovat valinnaisia, mutta suosittelemme täyttämään ne kaikki, se on hyvä käytäntö.

Tallenna tiedosto. Tässä vaiheessa WordPress voi jo tunnistaa teemasi, vaikka se onkin vielä tyhjä eikä tee mitään hyödyllistä.

2. HTML:n pilkkominen PHP-pohjiksi

Klassinen WordPress-teema kootaan useista PHP-tiedostoista, joista jokainen vastaa omasta osiostaan sivulla. Yleisin asettelu on header, sisältö, sidebar, footer. Jos HTML:si on rakenteeltaan erilainen (esimerkiksi sidebar vasemmalla tai kaksi sidebaria), periaate pysyy samana, mukauta jako vain omaan rakenteeseesi.

Luo neljä tyhjää tiedostoa teemakansioon:

  • header.php, sivuston ylätunniste
  • index.php, pääpohja, kokoamispiste
  • sidebar.php, sivupalkki
  • footer.php, alatunniste

Ne ovat toistaiseksi tyhjiä, älä odota ihmeitä. Edetään järjestyksessä.

2.1 Header.php, sivuston ylätunniste

Siirry WordPressin hallintapaneeliin, avaa "Ulkoasu → Teemaeditori" ja valitse vakio-teema (esimerkiksi Twenty Twenty-Five). Etsi sen header.php ja kopioi koko <head>-lohko, tämä on vähimmäismäärä metatageja ja koukkuja, joita ilman WordPress ei toimi oikein. Tässä on mitä sinun on siirrettävä omaan header.php-tiedostoosi:

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>

bloginfo()-funktio hakee dynaamisesti sivuston asetukset (merkistökoodaus, pingback-URL). wp_head()-koukku on kriittinen: lisäosat ja WordPress-ydin lisäävät skriptinsä, tyylinsä ja metataginsa sen kautta. Ilman sitä teema on puolikuollut.

Avaa nyt alkuperäinen index.html ja kopioi ylätunnisteen koodi, kaikki <header>- tai vastaavan lohkon sisällä, ja liitä se header.php-tiedostoon **heti sulkevan </head>-tagin ja avaavan <body>-tagin jälkeen. Demomerkintäkielessämme se näyttää tältä:

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

Lisää linkitys tyylitiedostoosi <head>-tagien väliin:

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

get_template_directory_uri()-funktio palauttaa teemakansiosi URL-osoitteen, polku CSS:ään toimii millä tahansa palvelimella ilman kovakoodausta. Tallenna header.php.

2.2 Index.php, kokoamispiste

index.php on WordPressissä pakollinen tiedosto. Se ei säilytä merkintäkieltä sellaisenaan, vaan kokoaa sivun osista. Avaa tyhjä index.php ja lisää kolme riviä:

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

Ensimmäinen rivi sisällyttää header.php:n. Kaksi viimeistä, sidebar.php ja footer.php, menevät aivan loppuun. Pääsisältö (sisältöalue ja Loop, tästä lisää seuraavassa osiossa) sijoitetaan niiden väliin.

Kopioi .content-luokan omaava lohko (pääsisältöalue) alkuperäisestä index.html-tiedostostasi ja liitä se get_header():n ja get_sidebar():n väliin:

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

Kaava on yksinkertainen: WordPress kokoaa sivun peräkkäin ylhäältä alas, header, sisältö, sidebar, footer. Jokainen get_*() hakee vastaavan PHP-tiedoston.

2.3 Sidebar.php ja footer.php

Sidebar ja footer ovat hyvin suoraviivaisia. Kopioi .sidebar- ja .footer-lohkojen sisällöt index.html-tiedostostasi vastaaviin PHP-tiedostoihin.

sidebar.php:

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

dynamic_sidebar()-funktio tulostaa hallintapaneelissa ("Ulkoasu → Vimpaimet") määritetyt vimpaimet. Jos sidebaria ei tarvita, poista tämä rivi.

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

Huom: </body> ja </html> siirretään footer.php-tiedostoon. Alkuperäisessä HTML:ssäsi ne ovat todennäköisesti myös aivan lopussa, ja niin kuuluukin olla. wp_footer()-koukku on aivan yhtä pakollinen kuin wp_head(): ilman sitä monet lisäosat ja WordPress itse eivät toimi (esimerkiksi hallintapalkki ei tule näkyviin).

3. WordPress Loop: kirjoitusten tulostaminen

Teema on koottu, kehys toimii. Mutta sisältöalue on edelleen staattinen, teksti on kovakoodattu alkuperäisestä HTML:stä. Jotta WordPress alkaa tulostaa oikeita blogikirjoituksia, tarvitset Loopin, erityisen PHP-rakenteen, joka käy läpi julkaistut kirjoitukset ja näyttää ne yksi kerrallaan merkintäkielesi sisällä.

Tämä on teeman tärkein koodinpätkä. Se menee index.php-tiedostoon, <div class="content">-lohkon sisään, korvaten staattisen paikkamerkin tekstin:

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

Miten se toimii:

  • have_posts() tarkistaa, onko näytettäviä kirjoituksia. Jos on, se siirtyy Loopin sisään.
  • the_post() valmistelee seuraavan kirjoituksen tiedot.
  • post_class() lisää standardit CSS-luokat <article>-elementtiin, hyödyllinen eri kirjoitustyyppien tyylittelyyn.
  • the_permalink() ja the_title() tulostavat kirjoituksen URL-osoitteen ja otsikon.
  • the_content() on kirjoituksen varsinainen leipäteksti.
  • the_post_thumbnail() on kirjoituksen pienoiskuva, jos sellainen on asetettu.
  • comments_popup_link() on linkki kommentteihin.
  • next_posts_link() ja previous_posts_link() hoitavat sivutuksen.

else-lohko suoritetaan, kun kirjoituksia ei ole lainkaan, näyttäen paikkamerkkiviestin.

Loopin lisäämisen jälkeen valmis index.php näyttää tältä:

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. Teeman kokoaminen ja asentaminen

Kaikkien viiden tiedoston (style.css, header.php, index.php, sidebar.php ja footer.php) tulisi olla teemakansiossasi (nimeä se vaikkapa my-html-theme). Pakkaa kansio ZIP-arkistoon.

Seuraavaksi vakioskenaario: WordPress-hallintapaneeli → "Ulkoasu" → "Teemat" → "Lisää teema" → "Lataa teema." Valitse ZIP-tiedosto, napsauta "Asenna" ja sitten "Aktivoi." Vieraile sivustolla, HTML-mockupisi on herännyt eloon WordPressin sisällä, ja blogikirjoitukset näkyvät sisältöalueella.

Tähän päättyy ensimmäinen osa. Sinulla on nyt toimiva teemakehys: WordPress tunnistaa sen, poimii koukut ja tulostaa dynaamista sisältöä Loopin kautta. Seuraavassa osassa käsittelemme yksittäisiä sivupohjia (single.php, page.php), pohjahierarkiaa ja skriptien sisällyttämistä functions.php:n kautta.

⁉️🤔 Usein kysytyt kysymykset

Tarvitseeko minun osata PHP:tä rakentaakseni teeman HTML:stä?

Ei. Vähimmäismäärä, jonka kirjoitat, on muutama funktiokutsu, kuten get_header(), ja 15-rivinen Loop. Kaikki muu on jo olemassa olevan HTML-koodin kopioimista. PHP toimii tässä "liimana", ei pääkielenä. Jos ymmärrät, missä <?php ?> avautuu ja sulkeutuu, se riittää alkuun pääsemiseksi.

Entä jos HTML-mockupini ei näytä "header-sisältö-sidebar-footer"-mallilta?

Periaate ei muutu. WordPress kokoaa sivun kutsumalla PHP-tiedostoja peräkkäin, niiden järjestys index.php:ssä määrittää asettelun. Jos sidebarisi on vasemmalla, kutsu vain get_sidebar() ennen sisältölohkoa. Kaksi sidebaria? Luo sidebar-left.php ja sidebar-right.php erillisillä kutsuilla. Kaava on joustava.

Voinko luoda teeman ilman sidebaria?

Kyllä, ja se jopa yksinkertaistaa tehtävää. Poista vain <?php get_sidebar(); ?> -kutsu index.php:stä äläkä luo sidebar.php-tiedostoa. Monet modernit teemat, mukaan lukien WordPressin lohkoteemat, toimivat täysin ilman sidebaria.

Onko pakko käyttää juuri tiedostoja header.php, index.php, sidebar.php ja footer.php?

index.php ja style.css ovat pakollisia, ilman niitä WordPress ei näe teemaa. Muut tiedostot ovat valinnaisia. Mutta header.php, sidebar.php ja footer.php ovat de facto -standardi klassisille teemoille: kaikki kehittäjät ymmärtävät ne, ja funktiot get_header(), get_sidebar() ja get_footer() on suunniteltu niitä varten. Ensimmäistä teemaasi varten pysy tässä neljän tiedoston sarjassa.

Toimiiko tämä lähestymistapa lohkoteemojen (FSE)?

Ei, tämä opas on klassisille PHP-teemoille, jotka ovat edelleen elossa ja tuettuja (WordPress ei ole hylännyt niitä eikä sillä ole suunnitelmia siihen). Lohkoteemat (Full Site Editing) käyttävät HTML-pohjia ja theme.json-tiedostoa. Jos tavoitteesi on muuttaa olemassa oleva HTML nopeasti toimivaksi teemaksi, klassinen lähestymistapa on huomattavasti yksinkertaisempi: vähemmän abstraktioita, tuttu "header-sisältö-sidebar-footer"-malli.

Mitä seuraavaksi: ensimmäinen askeleesi teemakehityksessä

Olet koonnut perusteemakehyksen HTML-merkintäkielestä, jossa on toimiva Loop, sisällytetyt koukut ja dynaaminen sisältö. Teema asentuu jo hallintapaneeliin ja tulostaa kirjoituksia. Nyt on kaksi kasvusuuntaa:

  • Jos kirjoitusten tulostaminen merkintäkielessäsi riittää, täytä sivusto sisällöllä ja viimeistele CSS vastaamaan brändiäsi.

Aloita pienestä: rakenna teema tämän oppaan mukaan, aktivoi se ja lisää pari testikirjoitusta. Kun näet HTML:si elävien kirjoitusten kanssa sisällä, kaikki muu sujuu helpommin.

Toimitus
ToimitusToimitustiimi→ All publications

Ammattimainen kirjoittajien ja toimittajien tiimi, joka on erikoistunut laadukkaan sisällön luomiseen.