Skip to content

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

Millä ohjelmointikielellä WordPress on kirjoitettu

Millä ohjelmointikielellä WordPress on kirjoitettu

Kun ihmiset kysyvät, millä kielellä WordPress on kirjoitettu, taustalla on melkein aina toinen kysymys: "Mistä minun pitäisi aloittaa, jos haluan ymmärtää sitä?" Se on oikea lähestymistapa.

WordPress-kehitys ei ole taikuutta eikä jäsenten yksityiskerho. Se on pino viittä teknologiaa, joista neljä on tuttuja kenelle tahansa front-end-kehittäjälle. Viides, PHP, pyörittää ydintä, teemoja, lisäosia ja kaikkea palvelinpuolen logiikkaa. Mutta et opettele "yhtä kieltä". Sinun on ymmärrettävä, miten ne toimivat yhdessä ja missä järjestyksessä ne kannattaa opetella.

💡 Nopea yleiskatsaus:

  • WordPressin ydin on kirjoitettu PHP:llä. Data sijaitsee MySQL:ssä. Tämä on palvelinpuoli, piilossa käyttäjältä.
  • Selain rakentaa sivun HTML:stä (rakenne), CSS:stä (tyylit) ja JavaScriptista (interaktiivisuus): kolme front-end-teknologiaa.
  • Opettele pino tässä järjestyksessä: HTML, sitten CSS, sitten PHP, sitten JavaScript, sitten SQL. Yksinkertaisesta monimutkaiseen.

PHP, WordPressin moottori

WordPressin ydin koostuu kymmenistä tuhansista riveistä PHP-koodia. Kun selain pyytää sivua, palvelin suorittaa PHP-skriptit, hakee tiedot tietokannasta, välittää ne teemapohjien läpi ja palauttaa valmiin HTML:n. Käyttäjä ei koskaan näe PHP-koodia; hän vastaanottaa jo kootun sivun.

Esimerkki PHP-koodista, jossa on muuttujia ja ehtologiikkaa

PHP toimii WordPressissä kuin kapellimestari: se "orkestroi" HTML:n, kutsuu tietokantafunktioita, lisää asetuksia hallintapaneelista ja kokoaa lopullisen sivun. Mikä tahansa teemapohja on PHP-tiedosto, johon on upotettu HTML:ää. Mikä tahansa lisäosa on PHP-tiedosto, joka kytkeytyy ytimeen add_action- ja add_filter-funktioilla.

Ilman PHP:tä WordPress ei yksinkertaisesti toimi. Vastaus otsikon kysymykseen on siis selvä: WordPress on kirjoitettu PHP:llä. Mutta se ei ole ainoa kieli, jota kehittäjä tarvitsee.

HTML, jokaisen sivun luuranko

HTML ei ole ohjelmointikieli, vaan merkintäkieli. Se ei "laske", vaan kuvaa rakenteen: missä on otsikko, missä on kappale, missä on kuva, missä on painike. Selain lukee HTML-merkinnän ja muuttaa sen näkyväksi sivuksi.

WordPressissä HTML:ää ei tallenneta erillisinä tiedostoina. Teemapohjat on kirjoitettu PHP:llä, mutta ne tulostavat HTML:ää. Kun muokkaat sivua Gutenbergissa, editori tallentaa sisällön tietokantaan, mutta kävijät saavat silti HTML:ää.

1<html>
2 <head>
3 <meta charset="UTF-8" />
4 <title>Page title in search</title>
5 </head>
6 <body>
7 <h1>Page heading</h1>
8 <p class="intro">Introduction paragraph text</p>
9 </body>
10</html>

HTML:n keskeinen ominaisuus ovat tägit. Jokaisella tagilla on oma roolinsa. <h1> on ensimmäisen tason otsikko. <p> on kappale. <a> on linkki. Sulkutagi vinoviivalla (</h1>) osoittaa, mihin elementti päättyy. Jotkin tägit, kuten <meta> tai <img>, ovat itsestään sulkeutuvia: ne eivät tarvitse paria.

HTML-tageilla voi olla luokkia: class="intro" yllä olevassa esimerkissä. Luokka on "ankkuri" CSS:lle. Selain löytää kaikki elementit, joilla on tuo luokka, ja soveltaa niihin CSS-tiedoston tyylejä.

Lyhyesti: HTML määrittelee mitä käyttäjä näkee sivulla. Mutta sen ulkoasun määrittelee CSS.

CSS, verkkosivuston vaatetus

CSS tulee sanoista Cascading Style Sheets. Jos HTML antaa sivulle rakenteen, CSS antaa sille värin, fontit, välistykset, lohkojen sijoittelun ja mobiiliresponsiivisuuden.

CSS-koodia, jossa on säännöt HTML-luokille

Ilman CSS:ää mikä tahansa verkkosivusto näyttää valkoiselta paperilta, jossa on mustaa tekstiä ja sinisiä linkkejä. Otsikkotyylit, sarakeristikot, animaatiot, varjot, pyöristetyt kulmat: kaikki tämä on CSS:ää.

WordPressissä CSS sijaitsee teematiedostoissa (yleensä style.css). Jokaisella teemalla on oltava tämä tiedosto; ilman sitä WordPress ei tunnista teemaa. Lisäosat voivat myös ladata omia CSS-tiedostojaan wp_enqueue_style()-mekanismin kautta.

1.intro {
2 color: #325050;
3 background: #fff;
4 font-family: 'Libre Baskerville', serif;
5 font-size: 0.85rem;
6 line-height: 1.6;
7}

Piste ennen .intro-merkintää tarkoittaa: "sovella näitä tyylejä KAIKKIIN elementteihin, joilla on luokka intro." Tämä on periytyvyys: yksi luokka, monta elementtiä eri sivuilla. Muuta sääntöä yhdessä paikassa, ja koko sivusto päivittyy.

Moderniin WordPress-kehitykseen tarvitset perus-CSS:n lisäksi responsiivisia asetteluja käyttäen media queryjä. Teemat ilman responsiivisuutta eivät selviä nykypäivänä; Google rankkaa sivustoja mobile-first-lähestymistavalla.

JavaScript, sivun käyttäytyminen

JavaScript on viidestä ainoa, jota ilman WordPress teknisesti ottaen voi toimia. Teema voi toimia täysin ilman yhtäkään JS-riviä. Mutta käytännössä mikään moderni sivusto ei tule toimeen ilman sitä.

JavaScript hoitaa sen, mitä tapahtuu sen jälkeen, kun sivu latautuu: pudotusvalikot, modaali-ikkunat, kuvien laiska lataus, lomakkeiden validointi ennen lähetystä, teeman vaihto ilman uudelleenlatausta. Kaikki, mikä reagoi käyttäjän toimiin (klikkaus, vieritys, tekstinsyöttö), perustuu JS:ään.

1(function($) {
2 var navMenu = '.primary-navigation';
3 var pageContent = '.main-content';
4 var gap = parseInt($('html').css('font-size'), 10) * 2;
5
6 function setPageMin() {
7 var height = $(navMenu).height();
8 $(pageContent).css('min-height', height + gap);
9 }
10
11 $(window).on('load', function() {
12 setPageMin();
13 $(window).on('resize', function() {
14 setTimeout(setPageMin, 120);
15 });
16 });
17})(jQuery);

Tämä jQuery-esimerkki näyttää tyypillisen tehtävän: laske navigaation korkeus ja aseta sisältöalueelle minimikorkeus, jotta sivu ei "hypi". Koodi suoritetaan latauksen yhteydessä ja jokaisella ikkunan koon muutoksella.

Mutta JavaScriptin suurin vaikutus WordPressiin tuli Gutenbergin, Reactilla kirjoitetun lohkoeditorin, myötä. Koko artikkelien muokkauskäyttöliittymä, kaikki lohkot (kappale, otsikko, galleria, sarakkeet), on JavaScript-sovellus, joka toimii WordPressin hallintapaneelissa.

Siksi nykyään WordPress-kehittäjä, joka jättää JavaScriptin kokonaan huomiotta, on melko rajoittunut. Voit rakentaa teeman, mutta et voi kirjoittaa mukautettuja Gutenberg-lohkoja ilman JS:ää.

SQL ja MySQL, missä data asuu

Artikkelit, sivut, asetukset, käyttäjät, kommentit, metakentät: kaikki WordPressin sisältö on tallennettu MySQL- (tai MariaDB-) tietokantaan. PHP kommunikoi tietokannan kanssa SQL-kyselyillä, mutta kehittäjien on harvoin tarpeen kirjoittaa "raakaa" SQL:ää.

WordPress tarjoaa oman abstraktiokerroksensa, wpdb-luokan. Kutsut, kuten get_posts(), update_post_meta() ja WP_Query, sisältävät jo valmiita SQL-kyselyitä. Tämä suojaa yleisiltä virheiltä ja SQL-injektioilta, kunhan käytät sisäänrakennettuja metodeja manuaalisten kyselyiden kirjoittamisen sijaan.

Silti SQL:n ymmärtäminen on hyödyllistä: kun projekti kasvaa kymmeniin tuhansiin artikkeleihin ja kyselyt alkavat hidastua, kyky lukea EXPLAIN ja löytää puuttuva indeksi on korvaamaton.

Miten WordPress-teema on rakennettu

WordPress-teema ei ole monoliitti. Se on joukko PHP-tiedostoja, joista jokainen vastaa eri sivutyypistä. index.php hoitaa kotisivun ja oletuksena kaiken muun. single.php hoitaa yksittäiset artikkelit. page.php hoitaa staattiset sivut. archive.php hoitaa kategoria-arkistot. WordPress valitsee automaattisesti oikean pohjan Template Hierarchy -nimisen hierarkian perusteella.

Jokaisen pohjan sisällä: tavallisia PHP-funktioita WordPressin ytimestä. the_title() tulostaa otsikon. the_content() tulostaa artikkelin rungon. wp_nav_menu() tulostaa valikon. Täydellinen lista löytyy WordPressin dokumentaatiosta. HTML ja PHP on sekoitettu teemoissa: avaa <?php, kutsu funktiota, sulje ?>, jatka HTML:llä. Se ei ole ihanteellinen arkkitehtuuri nykystandardien mukaan, mutta se pyörittää yli 40% internetin verkkosivustoista.

Teeman luomiseen tarvitset vähintään PHP:n, HTML:n ja CSS:n osaamista. JavaScript on valinnainen, mutta hyödyllinen interaktiivisille elementeille (mobiilivalikko, välilehdet, haitarit).

Miten WordPress-lisäosa on rakennettu

Lisäosa on PHP-tiedosto (vähintään yksi), jonka alussa on erityinen kommenttiotsake. Tästä kommentista WordPress lukee nimen, version ja tekijän: kaiken, mitä näet hallintapaneelin lisäosasivulla.

Lisäosa on vuorovaikutuksessa ytimen kanssa koukkujen (hooks) kautta. Niitä on kahta tyyppiä:

  • Toiminnot (add_action) suorittavat koodia tietyillä hetkillä: kun sivu latautuu, kun artikkeli tallennetaan, kun lisäosa aktivoidaan.
  • Suodattimet (add_filter) sieppaavat ja muokkaavat dataa: muuta tekstiä, lisää CSS-luokka, korvaa URL-osoite.

Yksinkertaisin lisäosa on kirjaimellisesti muutama rivi:

1<?php
2/**
3 * Plugin Name: Greeting Plugin
4 * Description: Adds a greeting at the end of every post.
5 * Version: 1.0
6 */
7
8function my_greeting($content) {
9 if (is_single()) {
10 $content .= '<p>Thank you for reading our blog!</p>';
11 }
12 return $content;
13}
14add_filter('the_content', 'my_greeting');

Näetkö add_filter? Juuri näin WordPress-lisäosat laajentavat toiminnallisuutta: ei muokkaamalla ydintä (mikä on ehdottomasti kielletty), vaan sieppaamalla dataa koukkujen kautta. Siksi WordPress-päivitykset eivät riko mukautettua koodia, kunhan kehittäjä on käyttänyt virallista API:a ydintiedostojen muokkaamisen sijaan.

WordPress ja Node.js: korvaajaa ei ole tulossa

Huhut siitä, että WordPress "vaihtaa Node.js:ään", ovat kiertäneet vuodesta 2015 lähtien, jolloin Calypso ilmestyi. Calypso on työpöytähallintakäyttöliittymä WordPress.comille, kirjoitettu Node.js:llä ja Reactilla. Sitten tuli Gutenberg, myös Reactilla. JavaScript tuli näkyvämmäksi, ja jotkut päättelivät PHP:n olevan viimeisillään.

Tämä ei pidä paikkaansa. WordPressin virallinen kanta on muuttumaton: ydin pysyy PHP:ssä. Kukaan ei suunnittele 20 vuotta vanhan koodipohjan uudelleenkirjoittamista Node.js:llä; se olisi turhaa ja rikkoisi taaksepäin yhteensopivuuden tuhansien teemojen ja lisäosien kanssa.

Mitä todella tapahtui: WordPressistä tuli hybridi-alusta. Taustajärjestelmä: PHP ja MySQL. Hallintapaneelin front end: JavaScript (React). Julkinen sivusto: HTML, CSS ja hieman JS:ää. REST API, joka on ollut sisäänrakennettuna ytimessä versiosta 4.7 lähtien, mahdollistaa JavaScript-sovellusten kommunikoinnin WordPressin kanssa ilman sivun uudelleenlatauksia. Tämä avasi oven headless-ratkaisuille, joissa WordPress toimii headless CMS -taustajärjestelmänä ja front end on rakennettu Next.js:llä tai Gatsbyllä.

Lopputulos: Node.js:n ja Reactin opettelu WordPress-työtä varten on hyödyllistä, mutta ei PHP:n sijasta. Opettele ne PHP:n rinnalla.

Mistä aloittaa WordPressin opettelu

Oppimispolku kulkee yksinkertaisesta monimutkaiseen, siitä mitä käyttäjä näkee selaimessa siihen, mitä tapahtuu palvelimella.

Vaihe 1: HTML. Ilman tägien, attribuuttien ja dokumentin rakenteen ymmärtämistä ei ole mitään järkeä edetä. HTML on webin aakkoset. Onneksi perusteet voi oppia viikossa.

Vaihe 2: CSS. Kun sivulla on rakenne, se tarvitsee tyylit. Opettele box model, positiointi, flexbox, grid ja media queryt. Ilman responsiivisia asetteluja et voi rakentaa WordPress-teemaa.

Vaihe 3: PHP. Nyt tärkein osa. Opettele PHP WordPress-kontekstissa: miten ydinfunktiot toimivat, mikä on WP_Query-silmukka, miten template hierarchy on rakennettu. Yleistä "PHP:tä yleisesti" tarvitaan perustaksi, mutta keskity siihen, mitä todella kohtaat teemoissa ja lisäosissa.

Vaihe 4: JavaScript. Aloita yksinkertaisesti: jQuery DOM-manipulointiin ja tapahtumien käsittelyyn. Sitten moderni JavaScript (ES6+), jota seuraa React mukautettuja Gutenberg-lohkoja varten.

Vaihe 5: SQL. Älä kirjoita kyselyitä manuaalisesti, ellei ole aivan pakko, mutta osaa lukea ja ymmärtää, mitä WP_Queryn konepellin alla tapahtuu. Suurissa projekteissa tämä säästää tunteja debuggausta.

Järjestyksellä on väliä. Jos aloitat JavaScriptista PHP:n jättäen huomiotta, osaat kirjoittaa Gutenberg-lohkoja, mutta et osaa rakentaa teemaa. Jos aloitat PHP:stä ilman HTML/CSS:ää, sinulla on palvelinpuolen koodia, mutta ei mitään näytettävää käyttäjälle. Seuraa polkua, ja muutamassa kuukaudessa pystyt rakentamaan kokonaisen teeman tyhjästä.

⁉️🤔 Usein kysytyt kysymykset

Tarvitseeko minun osata kaikki viisi kieltä luodakseni WordPress-teeman?

Yksinkertaisen teeman rakentamiseen riittävät PHP, HTML ja CSS. JavaScriptiä tarvitaan interaktiivisiin elementteihin: mobiilivalikko, liukusäädin, laiska lataus. SQL ei ole välttämätön alussa, koska valmiit ydinfunktiot piilottavat tietokantakyselyt. Mutta monimutkaisissa projekteissa ja optimoinnissa et tule toimeen ilman JS:ää ja SQL:ää.

Voinko tulla WordPress-kehittäjäksi osaamalla vain JavaScriptiä?

Et. Ydin, teemat ja lisäosat toimivat PHP:llä. JavaScript on hyödyllinen Gutenberg-lohkoissa ja front-endin interaktiivisuudessa, mutta ilman PHP:tä et voi luoda edes yksinkertaisinta lisäosaa. JavaScript ja PHP ovat WordPressissä kumppaneita, eivät kilpailijoita.

Onko totta, että WordPress siirtyy pian kokonaan JavaScriptiin?

Ei. WordPress-tiimin virallinen kanta: ydin pysyy PHP:ssä. JavaScript laajentaa mahdollisuuksia (Gutenberg, REST API), mutta ei korvaa PHP:tä palvelinpuolella. Huoli syntyi Reactin kasvavasta läsnäolosta hallintapaneelissa, mutta kyse on evoluutiosta, ei alustan korvaamisesta.

Kuinka kauan WordPress-kehityksen opettelu tyhjästä kestää?

Johdonmukaisella lähestymistavalla (HTML → CSS → PHP → JS → SQL) ja päivittäisellä harjoittelulla voit odottaa 4-8 kuukautta saavuttaaksesi tason, jolla pystyt itsevarmasti rakentamaan mukautetun teeman ja yksinkertaisen lisäosan. Ensimmäiset kaksi viikkoa ovat pelkkää HTML:ää ja CSS:ää. Sen jälkeen PHP vie suurimman osan ajastasi, koska kaikki riippuu siitä.

Onko minun opeteltava jQuery, vai voinko siirtyä suoraan Reactiin?

jQuery on edelleen käytössä useimmissa WordPress-teemoissa ja on sisäänrakennettuna ytimeen; sen tunteminen auttaa vanhojen projektien ylläpidossa. Mutta uutta kehitystä varten (erityisesti Gutenberg-lohkot) opettele React. Aloita modernista JavaScriptista (ES6+), sitten React: se on tulevaisuudenkestävämpi polku.

Kannattaako WordPressiä opetella vuonna 2026

Lyhyt vastaus: kyllä. WordPress pyörittää yli 43% kaikista internetin verkkosivustoista, ja tämä luku on pysynyt vakaasti 43-44 prosentin haarukassa viime vuodet. Kysyntä kehittäjille, jotka ymmärtävät muutakin kuin "klikkaa asenna teema -painiketta" ja osaavat kirjoittaa mukautettua toiminnallisuutta PHP:llä, on pysynyt jatkuvasti korkeana.

Avain on oikea järjestys. HTML ja CSS antavat sinulle perustan parissa viikossa. PHP avaa pääsyn ytimeen, koukkuihin ja lisäosiin. JavaScript tuo interaktiivisuuden ja kasvupotentiaalin (Gutenberg, headless, React). SQL täydentää kuvan tietokantatasolla.

Aloita ensimmäisestä askeleesta, ja puolessa vuodessa näet WordPressin ei "verkkosivuston rakentajana", vaan tehokkaana alustana, jota hallitset jokaisella tasolla HTML-tägistä SQL-indeksiin.