Skip to content

Kõik WordPressist, veebiarendusest — ja mitte ainult

🛠️ WordPressi teema loomine HTML-ist: samm-sammuline juhend (1. osa)
WordPressi teemadVeebiarendus
7 min1,334 sõna

🛠️ WordPressi teema loomine HTML-ist: samm-sammuline juhend (1. osa)

Valmis HTML-saiti ei pea ära viskama, kui liigud WordPressile. Sa võid võtta oma märgendi, index.html ja style.css, ning muuta need umbes tunniga täielikult toimivaks teemaks. See ei ole maagia: WordPress on üles ehitatud PHP mallidele, mis omakorda pannakse kokku tavalisest HTML-ist, mis on jagatud loogilisteks osadeks.

Probleem on selles, et enamik õpetusi kas ujutab sind esimestest lõikudest alates terminoloogiaga üle või eeldab vaikimisi, et sa juba oskad PHP-d. Meie läheneme teisiti: alustame konkreetse HTML-maketiga (päis, sisu, külgriba, jalus) ning ehitame sellest metoodiliselt, fail faili haaval, töötava teema. Ei mingit maagiat, ainult kood ja loogika.

Selle juhendi lõpuks on sul valmis teema, mille saad WordPressi administraatori paneeli üles laadida, aktiveerida ja näha oma HTML-i dünaamilise platvormi sees. See on esimene osa, vundament. Teises osas käsitleme üksikute lehtede malle, kohandatud välju ja kohandajat.

💡 Kiire ülevaade:

  • Anna teemale kordumatu nimi ja täida style.css päis, WordPress tuvastab teemad nende metaandmete järgi.
  • Lõika algne index.html neljaks PHP-failiks: header.php, index.php, sidebar.php ja footer.php.
  • Rakenda standardsed WordPressi konksud (get_header, get_sidebar, get_footer, wp_head ja wp_footer), et platvorm sinu märgendit „näeks" ja üles korjaks.
  • Lisa index.php-sse WordPressi Loop, koodijupp, mis väljastab blogipostitusi sinu HTML-raamistikus.
  • Loo ZIP-arhiiv, laadi teema administraatori paneeli üles ja aktiveeri see, sinu sait ärkab WordPressis ellu.

1. Teema nimetamine ja style.css fail

Esimene asi, mida pead tegema, on anda oma teemale kordumatu nimi. Isegi kui teed teemat ainult oma saidi jaoks, peab WordPress selle kuidagi tuvastama paneelis „Välimus → Teemad".

Algtingimused:

  • Sul on index.html ja stiililehe fail style.css (või mõni muu CSS-fail).
  • Sul on töötav WordPressi installatsioon vähemalt ühe standardteemaga, näiteks Twenty Twenty-Five.
  • Sa oled juba loonud oma tulevase teema jaoks kausta asukohas /wp-content/themes/.

Ava oma koodiredaktor (soovitame Sublime Text või VS Code), kopeeri oma stiililehe sisu uude faili ja salvesta see teemakaustas nimega style.css. Faili kõige ülaossa, enne kogu CSS-koodi, lisa metaandmete plokk:

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

Ära eemalda kommentaarisümboleid /* ja */, WordPress loeb just neid. Väli Theme Name on siin võtmetähtsusega: see on nimi, mille all teema administraatori paneelis kuvatakse. Teised väljad on valikulised, kuid soovitame need kõik täita, see on hea tava.

Salvesta fail. Selles etapis suudab WordPress sinu teemat juba ära tunda, kuigi see on endiselt tühi ega tee midagi kasulikku.

2. HTML-i tükeldamine PHP-mallideks

Klassikaline WordPressi teema pannakse kokku mitmest PHP-failist, millest igaüks vastutab oma lehe sektsiooni eest. Kõige tavalisem paigutus on päis, sisu, külgriba, jalus. Kui sinu HTML on struktureeritud teisiti (näiteks külgriba vasakul või kaks külgriba), jääb põhimõte samaks, kohanda lihtsalt tükeldus oma struktuurile.

Loo teemakausta neli tühja faili:

  • header.php, saidi päis
  • index.php, peamine mall, koondamispunkt
  • sidebar.php, külgriba paneel
  • footer.php, jalus

Need on praegu tühjad, ära oota imesid. Lähme järjekorras.

2.1 Header.php, saidi päis

Mine WordPressi administraatori paneeli, ava „Välimus → Teema redaktor" ja vali standardteema (näiteks Twenty Twenty-Five). Leia selle header.php ja kopeeri kogu <head> plokk, see on minimaalne meta-siltide ja konksude komplekt, ilma milleta WordPress korrektselt ei tööta. Siin on see, mida pead oma header.php-sse üle kandma:

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>

Funktsioon bloginfo() asendab dünaamiliselt saidi seaded (kodeering, pingback-URL). Konks wp_head() on kriitiline: pistikprogrammid ja WordPressi tuum sisestavad selle kaudu oma skriptid, stiilid ja meta-sildid. Ilma selleta on teema poolsurnud.

Nüüd ava oma algne index.html ja kopeeri päise kood, kõik, mis on <header> või sarnase ploki sees, ning kleebi see header.php-sse **kohe pärast sulgevat </head> silti ja avavat **<body> silti. Meie demo-märgendis näeb see välja nii:

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

Lisa oma stiililehe ühendus <head> siltide vahele:

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

Funktsioon get_template_directory_uri() tagastab sinu teemakausta URL-i, CSS-i tee töötab igas serveris ilma kõvakodeerimiseta. Salvesta header.php.

2.2 Index.php, koondamispunkt

index.php WordPressis on kohustuslik fail. See ei salvesta märgendit kui sellist, vaid paneb lehe osadest kokku. Ava oma tühi index.php ja lisa kolm rida:

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

Esimene rida kaasab header.php. Viimased kaks, sidebar.php ja footer.php, lähevad kõige lõppu. Peamine sisu (sisuala ja Loop, sellest lähemalt järgmises jaotises) paigutatakse nende vahele.

Kopeeri klassiga .content plokk (peamine sisuala) oma algsest index.html-ist ja kleebi see get_header() ja get_sidebar() vahele:

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

Skeem on lihtne: WordPress paneb lehe järjest kokku ülalt alla, päis, sisu, külgriba, jalus. Iga get_*() tõmbab sisse vastava PHP-faili.

2.3 Sidebar.php ja footer.php

Külgriba ja jalus on väga lihtsad. Kopeeri .sidebar ja .footer plokkide sisu oma index.html-ist vastavatesse PHP-failidesse.

sidebar.php:

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

Funktsioon dynamic_sidebar() väljastab vidinaid, mis on määratud administraatori paneelis („Välimus → Vidinad"). Kui külgriba pole vaja, kustuta see rida.

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

Pane tähele: </body> ja </html> on viidud footer.php-sse. Sinu algses HTML-is on need tõenäoliselt samuti kõige all ja nii see peabki olema. Konks wp_footer() on sama kohustuslik kui wp_head(): ilma selleta ei tööta paljud pistikprogrammid ja WordPress ise (näiteks administreerimisriba ei ilmu).

3. WordPressi Loop: postituste väljastamine

Teema on kokku pandud, raamistik töötab. Kuid sisuala on endiselt staatiline, tekst on algsest HTML-ist kõvakodeeritud. Selleks, et WordPress hakkaks väljastama tõelisi blogipostitusi, vajad sa Loopi, spetsiaalset PHP-konstruktsiooni, mis itereerib läbi avaldatud postitused ja kuvab need ükshaaval sinu märgendi sees.

See on teema kõige olulisem koodijupp. See läheb index.php-sse, <div class="content"> ploki sisse, asendades staatilise aseteksti:

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

Kuidas see töötab:

  • have_posts() kontrollib, kas kuvamiseks on postitusi. Kui on, siseneb Loopi.
  • the_post() valmistab ette järgmise postituse andmed.
  • post_class() lisab <article>-le standardsed CSS-klassid, kasulik erinevate postitusetüüpide kujundamiseks.
  • the_permalink() ja the_title() väljastavad postituse URL-i ja pealkirja.
  • the_content() on postituse tegelik sisu.
  • the_post_thumbnail() on postituse pisipilt, kui see on määratud.
  • comments_popup_link() on link kommentaaridele.
  • next_posts_link() ja previous_posts_link() tegelevad lehekülgede jagamisega.

else plokk käivitub, kui postitusi pole üldse, kuvades aseteksti.

Pärast Loopi sisestamist näeb sinu täielik index.php välja selline:

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. Teema ehitamine ja paigaldamine

Kõik viis faili (style.css, header.php, index.php, sidebar.php ja footer.php) peaksid olema sinu teemakaustas (nimeta see näiteks my-html-theme). Pakenda kaust ZIP-arhiivi.

Järgmiseks standardne stsenaarium: WordPressi administraator → „Välimus" → „Teemad" → „Lisa teema" → „Laadi teema üles". Vali ZIP-fail, klõpsa „Paigalda", seejärel „Aktiveeri". Külasta saiti, sinu HTML-makett on WordPressi sees ellu ärganud ja blogipostitused kuvatakse sisualas.

Sellega esimene osa lõpeb. Sul on nüüd töötav teemaraamistik: WordPress tunneb selle ära, korjab üles konksud ja väljastab Loopi kaudu dünaamilist sisu. Järgmises osas käsitleme üksikute lehtede malle (single.php, page.php), mallide hierarhiat ja skriptide kaasamist faili functions.php kaudu.

⁉️🤔 Korduma kippuvad küsimused

Kas ma pean PHP-d oskama, et HTML-ist teemat ehitada?

Ei. Miinimum, mida sa kirjutad, on mõned funktsiooniväljakutsed nagu get_header() ja 15-realine Loop. Kõik muu on juba olemasoleva HTML-koodi kopeerimine. PHP toimib siin „liimina", mitte peamise keelena. Kui saad aru, kus <?php ?> avaneb ja sulgub, on sellest alustamiseks piisavalt.

Mis siis, kui minu HTML-makett ei näe välja nagu „päis-sisu-külgriba-jalus"?

Põhimõte ei muutu. WordPress paneb lehe kokku PHP-faile järjestikku välja kutsudes, nende järjekord index.php-s määrab paigutuse. Kui sinu külgriba on vasakul, kutsu lihtsalt get_sidebar() enne sisuplokki. Kaks külgriba? Loo sidebar-left.php ja sidebar-right.php eraldi väljakutsetega. Skeem on paindlik.

Kas ma saan luua teemat ilma külgribata?

Jah, ja see isegi lihtsustab ülesannet. Lihtsalt eemalda <?php get_sidebar(); ?> väljakutse index.php-st ja ära loo sidebar.php faili. Paljud kaasaegsed teemad, sealhulgas WordPressi plokiteemad, töötavad täiesti ilma külgribata.

Kas on kohustuslik kasutada just faile header.php, index.php, sidebar.php ja footer.php?

index.php ja style.css on kohustuslikud, ilma nendeta WordPress teemat ei näe. Teised failid on valikulised. Kuid header.php, sidebar.php ja footer.php on klassikaliste teemade de facto standard: kõik arendajad mõistavad neid ning funktsioonid get_header(), get_sidebar() ja get_footer() on nende jaoks loodud. Oma esimese teema puhul pea kinni sellest neljast failist koosnevast komplektist.

Kas see lähenemine töötab plokiteemadega (FSE)?

Ei, see juhend on mõeldud klassikalistele PHP-teemadele, mis on endiselt elus ja toetatud (WordPress ei ole neist loobunud ega plaani seda teha). Plokiteemad (Full Site Editing) kasutavad HTML-malle ja faili theme.json. Kui sinu eesmärk on kiiresti muuta olemasolev HTML töötavaks teemaks, on klassikaline lähenemine oluliselt lihtsam: vähem abstraktsioone, tuttav „päis-sisu-külgriba-jalus" mudel.

Mis saab edasi: sinu esimene samm teemaarenduses

Sa oled HTML-märgendist kokku pannud põhilise teemaraamistiku koos töötava Loopi, kaasatud konksude ja dünaamilise sisuga. Teema juba paigaldub administraatori paneelis ja väljastab postitusi. Nüüd on kaks kasvusuunda:

  • Kui postituste väljastamine sinu märgendis on piisav, täida sait sisuga ja viimistle CSS-i, et see vastaks sinu brändile.

Alusta väikeselt: ehita teema seda juhendit järgides, aktiveeri see ja lisa paar testpostitust. Kui näed oma HTML-i koos elusate postitustega sees, tuleb kõik muu kergemini.

Toimetus
ToimetusToimetuse meeskond→ All publications

Professionaalne kirjanike ja toimetajate meeskond, kes on spetsialiseerunud kvaliteetse sisu loomisele.