Skip to content

Kõik WordPressist, veebiarendusest — ja mitte ainult

Mis programmeerimiskeeles on WordPress kirjutatud

Mis programmeerimiskeeles on WordPress kirjutatud

Kui inimesed küsivad, mis keeles WordPress on kirjutatud, on selle taga peaaegu alati veel üks küsimus: „Kust peaksin alustama, kui tahan sellest aru saada?" See on õige lähenemine.

WordPressi arendus ei ole maagia ega suletud klubi. See on viiest tehnoloogiast koosnev komplekt, millest neli on igale front-end arendajale tuttavad. Viies, PHP, käitab tuuma, teemasid, pluginaid ja kogu serveripoolset loogikat. Kuid sa ei hakka õppima „ühte keelt". Sa pead mõistma, kuidas need koos töötavad, ja õiget järjekorda nende õppimiseks.

💡 Kiire ülevaade:

  • WordPressi tuum on kirjutatud PHP-s. Andmed asuvad MySQL-is. See on serveripool, kasutaja eest varjatud.
  • Brauseris on leht ehitatud HTML-ist (struktuur), CSS-ist (kujundus) ja JavaScriptist (interaktiivsus): kolm front-end tehnoloogiat.
  • Õpi neid selles järjekorras: HTML, siis CSS, siis PHP, siis JavaScript, siis SQL. Lihtsast keeruliseni.

PHP, WordPressi mootor

WordPressi tuum koosneb kümnetest tuhandetest PHP koodiridadest. Kui brauser küsib lehte, käivitab server PHP skriptid, hangib andmed andmebaasist, suunab need läbi teema mallide ja tagastab valmis HTML-i. Kasutaja ei näe kunagi PHP koodi; ta saab juba kokku pandud lehe.

PHP koodi näide muutujate ja tingimusloogikaga

PHP töötab WordPressis nagu dirigent: see „orchestreerib" HTML-i, kutsub välja andmebaasi funktsioone, lisab administraatoripaneeli seadeid ja paneb kokku lõpliku lehe. Iga teema mall on PHP fail koos manustatud HTML-iga. Iga plugin on PHP fail, mis haakub tuuma külge add_action ja add_filter abil.

Ilma PHP-ta WordPress lihtsalt ei tööta. Seega on vastus pealkirjas esitatud küsimusele selge: WordPress on kirjutatud PHP-s. Kuid see pole ainus keel, mida arendaja vajab.

HTML, iga lehe skelett

HTML ei ole programmeerimiskeel; see on märgistuskeel. See ei „arvuta"; see kirjeldab struktuuri: kus on pealkiri, kus on lõik, kus on pilt, kus on nupp. Brauser loeb HTML märgendust ja muudab selle nähtavaks leheks.

WordPressis ei salvestata HTML-i eraldi failidena. Teema mallid on kirjutatud PHP-s, kuid nende väljund on HTML. Kui muudad lehte Gutenbergis, salvestab redaktor sisu andmebaasi, kuid külastajad saavad ikkagi HTML-i.

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-i põhiomadus on sildid. Igal sildil on oma roll. <h1> on esimese taseme pealkiri. <p> on lõik. <a> on link. Kaldkriipsuga sulgev silt (</h1>) näitab, kus element lõpeb. Mõned sildid, nagu <meta> või <img>, on isesulguvad: nad ei vaja paari.

HTML siltidel võivad olla klassid: class="intro" ülaltoodud näites. Klass on CSS-i jaoks „ankur". Brauser leiab kõik selle klassiga elemendid ja rakendab CSS failist stiile.

Lühidalt: HTML määratleb, mida kasutaja lehel näeb. Aga see, kuidas see välja näeb, on määratud CSS-iga.

CSS, veebisaidi rõivastus

CSS tähendab kaskaadlaadistikke (Cascading Style Sheets). Kui HTML annab lehele struktuuri, siis CSS annab sellele värvi, fondid, vahed, plokkide paigutuse ja mobiilse reageerivuse.

CSS kood HTML klasside reeglitega

Ilma CSS-ita näeb iga veebisait välja nagu valge leht musta teksti ja siniste linkidega. Pealkirjade stiilid, veergude ruudustikud, animatsioonid, varjud, ümarad nurgad: kõik see on CSS.

WordPressis asub CSS teema failides (tavaliselt style.css). Igal teemal peab see fail olema; ilma selleta ei tunne WordPress teemat ära. Pluginad saavad samuti laadida oma CSS faile wp_enqueue_style() mehhanismi kaudu.

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}

Punkt enne .intro tähendab: „rakenda neid stiile KÕIGILE elementidele klassiga intro." See ongi kaskaad: üks klass, palju elemente erinevatel lehtedel. Muuda reeglit ühes kohas ja kogu sait uueneb.

Kaasaegse WordPressi arenduse jaoks pead teadma mitte ainult baas-CSS-i, vaid ka reageerivaid paigutusi, kasutades meediapäringuid. Ilma reageerivuseta teemad ei ela tänapäeval üle; Google hindab saite mobiilipõhise lähenemisega.

JavaScript, lehe käitumine

JavaScript on viiest ainus, ilma milleta WordPress tehniliselt töötada saab. Teema võib täielikult toimida ilma ühegi JS reata. Kuid praktikas ei saa ükski kaasaegne sait ilma selleta hakkama.

JavaScript tegeleb sellega, mis juhtub pärast lehe laadimist: rippmenüüd, modaalaknad, piltide laisklaadimine, vormi valideerimine enne saatmist, teema vahetamine ilma lehte uuesti laadimata. Kõik, mis reageerib kasutaja tegevustele (klikk, kerimine, teksti sisestamine), tugineb JS-ile.

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);

See jQuery näide näitab tüüpilist ülesannet: arvuta navigatsiooni kõrgus ja määra sisuala minimaalne kõrgus, et leht ei „hüppaks". Kood käivitub laadimisel ja igal akna suuruse muutmisel.

Kuid JavaScripti suurim mõju WordPressile saabus koos Gutenbergiga, Reactis kirjutatud plokkredaktoriga. Kogu postituse redigeerimise liides, kõik plokid (lõik, pealkiri, galerii, veerud), on JavaScripti rakendus, mis töötab WordPressi administraatorivaates.

Seetõttu on tänapäeval WordPressi arendaja, kes JavaScripti täielikult ignoreerib, üsna piiratud. Sa võid ehitada teema, kuid ilma JS-ita ei saa sa kirjutada kohandatud Gutenbergi plokke.

SQL ja MySQL, kus andmed elavad

Postitused, lehed, seaded, kasutajad, kommentaarid, meta väljad: kogu WordPressi sisu on salvestatud MySQL (või MariaDB) andmebaasi. PHP suhtleb andmebaasiga SQL päringute kaudu, kuid arendajad peavad harva kirjutama „toorest" SQL-i.

WordPress pakub oma abstraktsioonikihti, wpdb klassi. Väljakutsed nagu get_posts(), update_post_meta() ja WP_Query sisaldavad juba valmis SQL päringuid. See kaitseb levinud vigade ja SQL süstimise eest, eeldusel et kasutad sisseehitatud meetodeid, mitte ei kirjuta käsitsi päringuid.

Sellegipoolest on SQL-i mõistmine kasulik: kui projekt kasvab kümnete tuhandete postitusteni ja päringud hakkavad aeglustuma, on hindamatu võime lugeda EXPLAIN tulemust ja leida puuduv indeks.

Kuidas WordPressi teema on üles ehitatud

WordPressi teema ei ole monoliit. See on PHP failide komplekt, millest igaüks vastutab erineva lehe tüübi eest. index.php käsitleb avalehte ja vaikimisi kõike. single.php käsitleb üksikuid postitusi. page.php käsitleb staatilisi lehti. archive.php käsitleb kategooria arhiive. WordPress valib automaatselt õige malli, tuginedes hierarhiale nimega Malli hierarhia (Template Hierarchy).

Iga malli sees: standardsed PHP funktsioonid WordPressi tuumast. the_title() väljastab pealkirja. the_content() väljastab postituse sisu. wp_nav_menu() väljastab menüü. Täielik nimekiri on saadaval WordPressi dokumentatsioonis. HTML ja PHP on teemades segamini: ava <?php, kutsu funktsioon, sulge ?>, jätka HTML-iga. See ei ole tänapäevaste standardite järgi ideaalne arhitektuur, kuid see käitab 40%+ veebisaitidest internetis.

Teema loomiseks pead minimaalselt tundma PHP-d, HTML-i ja CSS-i. JavaScript on valikuline, kuid kasulik interaktiivsete elementide jaoks (mobiilimenüü, vahekaardid, akordionid).

Kuidas WordPressi plugin on üles ehitatud

Plugin on PHP fail (vähemalt üks), mille alguses on spetsiaalne kommentaari päis. Sellest kommentaarist loeb WordPress nime, versiooni ja autori: kõik, mida näed administraatorivaates pluginade lehel.

Plugin suhtleb tuumaga konksude (hooks) kaudu. Neid on kahte tüüpi:

  • Tegevused (add_action) käivitavad koodi kindlatel hetkedel: kui leht laaditakse, kui postitus salvestatakse, kui plugin aktiveeritakse.
  • Filtrid (add_filter) püüavad kinni ja muudavad andmeid: muuda teksti, lisa CSS klass, asenda URL.

Lihtsaim plugin on sõna otseses mõttes paar rida:

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äed add_filter? Just nii WordPressi pluginad funktsionaalsust laiendavad: mitte tuuma redigeerides (mis on rangelt keelatud), vaid andmeid konksude kaudu püüdes. Seetõttu ei lõhu WordPressi uuendused kohandatud koodi, seni kuni arendaja kasutas ametlikku API-t, mitte ei muutnud tuuma faile.

WordPress ja Node.js: asendust ei tule

Kuulujutud, et WordPress „läheb üle Node.js-ile", on ringelnud alates 2015. aastast, kui ilmus Calypso. Calypso on WordPress.com-i töölaua administreerimisliides, mis on kirjutatud Node.js-is ja Reactis. Seejärel tuli Gutenberg, samuti Reactis. JavaScript muutus nähtavamaks ja mõned järeldasid, et PHP on viimast hingetõmmet tegemas.

See ei ole tõsi. WordPressi ametlik seisukoht on muutumatu: tuum jääb PHP peale. Keegi ei plaani 20 aastat vana koodibaasi Node.js-is ümber kirjutada; see oleks mõttetu ja lõhuks tagasiühilduvuse tuhandete teemade ja pluginatega.

Mis tegelikult juhtus: WordPressist sai hübriidne platvorm. Taustsüsteem: PHP ja MySQL. Administraatori front end: JavaScript (React). Avalik veebisait: HTML, CSS ja natuke JS-i. REST API, mis on tuuma sisse ehitatud alates versioonist 4.7, võimaldab JavaScripti rakendustel WordPressiga suhelda ilma lehe uuesti laadimiseta. See avas ukse peata lahendustele, kus WordPress töötab peata CMS-i taustsüsteemina, samal ajal kui front end on ehitatud Next.js-i või Gatsby peale.

Kokkuvõte: Node.js-i ja Reacti õppimine WordPressi töö jaoks on kasulik, kuid mitte PHP asemel. Õpi neid koos PHP-ga.

Kust alustada WordPressi õppimist

Õpitee kulgeb lihtsast keeruliseni, sellest, mida kasutaja brauseris näeb, selleni, mis serveris toimub.

1. samm: HTML. Ilma siltide, atribuutide ja dokumendi struktuuri mõistmiseta pole mõtet edasi liikuda. HTML on veebi tähestik. Õnneks saab põhitõed selgeks nädalaga.

2. samm: CSS. Kui lehel on struktuur, vajab see kujundust. Õpi kastmudelit, positsioneerimist, flexboxi, gridi ja meediapäringuid. Ilma reageerivate paigutusteta ei saa sa WordPressi teemat ehitada.

3. samm: PHP. Nüüd kõige olulisem osa. Õpi PHP-d WordPressi kontekstis: kuidas tuuma funktsioonid töötavad, mis on WP_Query tsükkel, kuidas on üles ehitatud malli hierarhia. Üldine „PHP üldiselt" on vajalik alusena, kuid keskendu sellele, mida sa tegelikult teemades ja pluginades kohtad.

4. samm: JavaScript. Alusta lihtsast: jQuery DOM-i manipuleerimiseks ja sündmuste käsitlemiseks. Seejärel kaasaegne JavaScript (ES6+), millele järgneb React kohandatud Gutenbergi plokkide jaoks.

5. samm: SQL. Ära kirjuta päringuid käsitsi, välja arvatud juhul, kui see on hädavajalik, kuid ole võimeline lugema ja mõistma, mis toimub WP_Query kapoti all. Suurte projektide puhul säästab see tunde silumist.

Järjekord on oluline. Kui alustad JavaScriptiga, ignoreerides PHP-d, suudad kirjutada Gutenbergi plokke, kuid ei suuda teemat ehitada. Kui alustad PHP-ga ilma HTML-i/CSS-ita, on sul serveripoolne kood, kuid pole midagi kasutajale näidata. Järgi seda teed ja mõne kuu jooksul suudad nullist tervikliku teema ehitada.

⁉️🤔 Korduma kippuvad küsimused

Kas ma pean teadma kõiki viit keelt, et WordPressi teemat luua?

Lihtsa teema ehitamiseks piisab PHP-st, HTML-ist ja CSS-ist. JavaScripti on vaja interaktiivsete elementide jaoks: mobiilimenüü, liugur, laisklaadimine. SQL ei ole alguses hädavajalik, kuna valmis tuumafunktsioonid peidavad andmebaasi päringud. Kuid keerukate projektide ja optimeerimise puhul ei saa ilma JS-i ja SQL-ita hakkama.

Kas ma võin saada WordPressi arendajaks, teades ainult JavaScripti?

Ei. Tuum, teemad ja pluginad töötavad PHP peal. JavaScript on kasulik Gutenbergi plokkide ja front-end interaktiivsuse jaoks, kuid ilma PHP-ta ei saa sa luua isegi kõige lihtsamat pluginat. JavaScript ja PHP on WordPressis partnerid, mitte konkurendid.

Kas on tõsi, et WordPress läheb varsti täielikult JavaScriptile üle?

Ei. WordPressi meeskonna ametlik seisukoht: tuum jääb PHP peale. JavaScript laiendab võimalusi (Gutenberg, REST API), kuid ei asenda PHP-d serveri poolel. Mure tekkis Reacti kasvava kohaloleku tõttu administraatoripaneelis, kuid see on evolutsioon, mitte platvormi väljavahetamine.

Kui kaua võtab aega WordPressi arenduse õppimine nullist?

Järjestikuse lähenemise (HTML → CSS → PHP → JS → SQL) ja igapäevase praktikaga arvesta 4 kuni 8 kuud, et jõuda tasemele, kus suudad enesekindlalt ehitada kohandatud teema ja lihtsa plugina. Esimesed kaks nädalat on ainult HTML ja CSS. Pärast seda võtab PHP suurema osa sinu ajast, sest kõik sõltub sellest.

Kas ma pean õppima jQuery't või võin kohe Reacti juurde minna?

jQuery on endiselt kasutusel enamikus WordPressi teemades ja on tuuma sisse ehitatud; selle tundmine aitab pärandprojektide hooldamisel. Kuid uue arenduse jaoks (eriti Gutenbergi plokid) õpi Reacti. Alusta kaasaegsest JavaScriptist (ES6+), seejärel React: see on tulevikukindlam tee.

Kas WordPressi tasub 2026. aastal õppida

Lühike vastus: jah. WordPress käitab 43%+ kõigist veebisaitidest internetis ja see näitaja on viimased mitu aastat püsinud 43-44% vahemikus. Nõudlus arendajate järele, kes mõistavad rohkem kui „klõpsa paigalda teema nuppu" ja oskavad kirjutada kohandatud funktsionaalsust PHP-s, on püsivalt kõrge.

Võti on õiges järjekorras. HTML ja CSS annavad sulle paari nädalaga vundamendi. PHP avab juurdepääsu tuumale, konksudele ja pluginadele. JavaScript lisab interaktiivsust ja kasvupotentsiaali (Gutenberg, peata lahendused, React). SQL täiendab pilti andmebaasi tasandil.

Alusta esimesest sammust ja kuue kuu pärast näed sa WordPressi mitte kui „veebisaidi ehitajat", vaid kui võimsat platvormi, mida sa kontrollid igal tasandil, HTML sildist kuni SQL indeksini.