WordPress-sivusto toimii hyvin, mutta haluat hieman enemmän: poista päivämäärä tietystä lohkosta, vaihda otsikoiden fontti, lisää mikrotietoja, joita teemasi ei tue. Kuulostaako tutulta? Jokainen WP-sivuston omistaja törmää ennen pitkää teemojen ja lisäosien rajoituksiin. Alla on viisi turvallista tapaa lisätä omaa koodia aina yhden minuutin lisäosan asennuksesta oman minilisäosan kirjoittamiseen.

Verkko on täynnä valmiita PHP- ja CSS-pätkiä jokaiseen tehtävään. Ongelma ei ole koodin löytäminen, vaan se, mihin se laitetaan, jotta sivustosi ei kaadu seuraavassa teemapäivityksessä. Kokosimme kaikki toimivat menetelmät yhteen paikkaan, ja mukana on tarkat suorituskohdat, varoitukset ja esimerkit.

💡 Pikaopas:

• Asenna WPCode tai Code Snippets, turvallisin tapa aloittelijalle: koodi ei katoa teemaa vaihtaessa, ja jokaisen pätkän voi kytkeä päälle tai pois erikseen.
• Jos muokkaat CSS:ää, aloita mukautustyökalusta (Ulkoasu → Mukauta → Lisä-CSS), se on sisäänrakennettu WordPressiin eikä vaadi lisäosia.
• functions.php-tiedoston ja teemapohjien muokkauksiin luo lapsiteema: tämä säilyttää muutoksesi, kun pääteema päivittyy.
• Kun koodinpätkiä alkaa kertyä tai ne muuttavat sivuston logiikkaa yleisesti, paketoi ne omaksi lisäosaksesi.

Tapa 1: koodinpätkien lisäosat

Turvallisin tapa aloittelijalle on erillinen koodinpätkien hallintalisäosa. Syötät PHP-, CSS- tai JavaScript-koodia hallintapaneelissa tavallisen tekstikentän kautta, ja lisäosa suorittaa koodin siellä, missä sitä tarvitaan. Jos koodissa on virhe, tällainen lisäosa nappaa kriittisen virheen ja poistaa pätkän automaattisesti käytöstä, sivusto ei kaadu etkä menetä pääsyä hallintapaneeliin.

Kaksi pääehdokasta vuonna 2026:

WPCode (entinen Insert Headers and Footers), suosituin vaihtoehto, yli 2 miljoonaa aktiivista asennusta ja arvosana 4,9 WordPress.orgissa. Ilmaisversiolla voi lisätä koodia ylätunnisteeseen, alatunnisteeseen sekä sisällön eteen ja jälkeen. Pro-versio tuo mukanaan ehdollisen logiikan (näytä pätkä vain tietyillä sivuilla), kuvauksen perusteella toimivan pätkägeneraattorin ja kirjaston valmiita reseptejä.

Code Snippets, yli 700 000 asennusta, arvosana 4,8. Täysin ilmainen, sisältää graafisen editorin ja syntaksin korostuksen. Pätkät tallennetaan tietokantaan eivätkä ole riippuvaisia teemasta. Voit viedä joukon pätkiä JSON-muodossa ja siirtää ne toiselle sivustolle.

Molemmat lisäosat toimivat samalla periaatteella: luot uuden pätkän, valitset koodityypin (PHP / CSS / JS), liität koodin ja painat "Aktivoi". Jos pätkä aiheuttaa kriittisen virheen, WordPress poistaa sen automaattisesti käytöstä seuraavalla pyynnöllä, eikä valkoinen kuolemanruutu uhkaa sinua.

Ennen minkään koodin lisäämistä tee täydellinen varmuuskopio. Käytännössä WPCode:n ilmaisversio kattaa useimmat tyypilliset tehtävät: ylimääräiset analytiikkapikselit, mikrotiedot, elementtien piilottaminen CSS:llä.

Tapa 2: sisäänrakennettu WordPressin CSS-editori

Tarkista, ettei teema ohita tyylejäsi: avaa sivusto incognito-tilassa CSS:n lisäämisen jälkeen.

Jos tehtävä on puhtaasti kosmeettinen (painikkeen väri, widgetin marginaali, alatunnisteen fonttikoko), et tarvitse lisäosaa. WordPressin versiosta 4.7 lähtien siinä on sisäänrakennettu Lisä-CSS-editori suoraan mukautustyökalussa:

• Ulkoasu → Mukauta → Lisä-CSS.
• Liitä CSS-sääntö vasempaan paneeliin.
• Oikealla näkyy live-esikatselu: näet muutokset ennen julkaisua.

Tämä menetelmä on hyvä, koska CSS tallennetaan tietokantaan teema-asetusten mukana, eikä teemapäivitys pyyhi sitä. Huono puoli on, että editori on perustasoinen, ilman syntaksin korostusta tai virhetarkistusta. Kymmenelle CSS-riville se on täydellinen, sadalle riville kannattaa hankkia lisäosa, kuten Simple Custom CSS and JS (yli 200 000 asennusta), joka tarjoaa korostuksella varustetun editorin ja mahdollistaa CSS:n linkittämisen ulkoisena tiedostona parempaa välimuistitusta varten.

Tärkeä vivahde: CSS periytyy ylhäältä alas, myöhemmin kirjoitettu sääntö ohittaa aiemman. Siksi Lisä-CSS:n tai lisäosan CSS voittaa aina teeman tyylit. Jos sääntösi ei toteutunut, lisää !important tai tarkenna valitsinta spesifimmäksi.

Tapa 3: lapsiteema PHP- ja teemapohjamuokkauksiin

Lapsiteema perii kaiken yläteemasta, mutta antaa sinun korvata minkä tahansa mallipohjatiedoston tai funktion. Tämä on perinteinen tapa tehdä muutoksia sivuston logiikkaan ilman pelkoa niiden menettämisestä päivityksen yhteydessä.

Milloin tarvitset lapsiteemaa:

• Muokkaat sivun merkintää (header.php, single.php, footer.php).
• Lisäät koodia yläteeman functions.php-tiedostoon, etkä voi tehdä sitä suoraan, koska päivitys korvaa tiedoston.
• Korvaat WooCommerce-mallipohjia verkkokauppaasi varten.

Luominen, 5 minuuttia:

Luo kansio hakemistoon /wp-content/themes/, esimerkiksi twentytwentyfive-child. Sisälle kaksi tiedostoa:

1
/*
2
 Theme Name:   Twenty Twenty-Five Child
3
 Template:     twentytwentyfive
4
*/
5
@import url("../twentytwentyfive/style.css");

functions.php-tiedosto:

1
<?php
2
add_action('wp_enqueue_scripts', function () {
3
    wp_enqueue_style(
4
        'child-style',
5
        get_stylesheet_directory_uri() . '/style.css',
6
        ['parent-style'],
7
        wp_get_theme()->get('Version')
8
    );
9
});

Pakkaa kansio ZIP-tiedostoksi, lataa se polun Ulkoasu → Teemat → Lisää uusi kautta ja ota käyttöön. Katso lisätietoja WordPress-lapsiteemaoppaastamme.

Lapsiteeman ainoa haittapuoli on, että sinun täytyy tutustua yläteeman rakenteeseen, jotta et riko riippuvuuksia. Jos muokkaat vain CSS:ää ja lisäät pari PHP-koukkua, menetelmän 1 koodinpätkäliitännäinen riittää, lapsiteemaa ei tarvita.

Menetelmä 4: oma liitännäinen pysyvälle koodille

Jos olet kerännyt yli kymmenen koodinpätkää ja osa niistä on kriittisiä sivuston toiminnalle (mukautetut sisältötyypit, REST API -päätepisteiden korvaukset, oma taksonomia), paketoi ne omaksi liitännäiseksesi. Se ei kytkeydy pois päältä, kun vaihdat teemaa, eikä katoa päivityksen yhteydessä.

Minimaalinen liitännäinen, yksi PHP-tiedosto:

Luo my-site-core-kansio hakemistoon /wp-content/plugins/. Sisälle my-site-core.php:

1
<?php
2
/**
3
 * Plugin Name:       My Site Core
4
 * Description:       Custom site code: CPT, hooks, shortcodes
5
 * Version:           1.0.0
6
 * Requires at least: 6.0
7
 * Requires PHP:      8.0
8
 */

Kirjoita kaikki mukautettu PHP tämän otsikon alle. Liitännäinen ilmestyy Lisäosat-listalle, ja voit aktivoida ja deaktivoida sen kuten tavallisen liitännäisen.

Koodille, jonka on aina oltava käynnissä (esimerkiksi sisällön kannalta kriittisen mukautetun sisältötyypin rekisteröinti), käytä must-use-liitännäisiä. Luo /wp-content/mu-plugins/-kansio ja laita sinne PHP-tiedosto. MU-liitännäiset suoritetaan automaattisesti, eikä niissä ole hallintapaneelissa kytkintä, joten et voi vahingossa poistaa niitä käytöstä.

Huomio: jos pudotat PHP-tiedostoja suoraan mu-plugins-kansioon ilman lataajaa, WordPress ei poimi niitä alikansioista. Laita tiedosto joko mu-plugins-juureen tai lisää lataaja, yhden rivin PHP-tiedosto, joka sisällyttää tiedostot alikansioista require_once-komennolla.

Menetelmä 5: koodin näyttäminen artikkelissa ilman suoritusta

Erillinen tehtävä ei ole koodin lisääminen sivustolle, vaan sen näyttäminen lukijoille artikkelissa. WordPress suorittaa oletuksena visuaaliseen editoriin lisätyn HTML:n ja PHP:n, mikä voi rikkoa artikkelin asettelun. Ratkaisu riippuu siitä, mitä editoria käytät:

Gutenberg (lohkoeditori): käytä Koodi- tai Mukautettu HTML -lohkoa. Koodilohko näyttää koodin tasalevyisellä fontilla kehyksessä suorittamatta sitä. PHP- ja CSS-syntaksin korostusta varten asenna Syntax-highlighting Code Block -liitännäinen, se värittää koodin Koodi-lohkon sisällä kielen mukaan.

Classic Editor: visuaalisella välilehdellä koodin lisääminen tavallisena tekstinä toimii näyttämiseen (mutta ei anna tasalevyistä muotoilua). HTML-välilehdellä koodi tulkitaan oikeana, WordPress suorittaa tagit ja rikkoo sivun. Välttääksesi tämän, korvaa aktiiviset merkit HTML-entiteeteillä:

Yksittäisen tagin kohdalla manuaalinen korvaaminen toimii. 20 rivin lohkolle käytä verkkoenkooderia tai lisäosaa. Täydellinen lista merkki-entiteeteistä löytyy WordPress-viitteestä.

⁉️🤔 Yleisiä kysymyksiä

Voinko lisätä PHP-koodia suoraan WordPress-artikkeliin?

Et, WordPress ei suorita PHP:tä artikkelin sisällössä tietoturvasyistä. Jos sinun täytyy suorittaa PHP:tä tietyllä sivulla, käytä shortcodea, joka on rekisteröity lapsiteeman functions.php-tiedostossa tai snippetti-lisäosassa. Vaihtoehtona ovat lisäosat kuten Insert PHP Code Snippet, joiden avulla voit luoda snippetin ja lisätä sen shortcodella mihin tahansa artikkeliin.

Mikä on turvallisempaa aloittelijalle: snippetti-lisäosa vai lapsiteema?

WPCode- tai Code Snippets -lisäosa. Se eristää jokaisen koodinpätkän: virhe yhdessä snippetissä ei vaikuta muihin, ja WordPress havaitsee vakavat virheet ja poistaa ongelmallisen snippetin automaattisesti käytöstä. Lapsiteema ei tarjoa tällaista mekanismia, kirjoitusvirhe functions.php-tiedostossa kaataa koko sivuston. Lisäksi lisäosa ei ole sidottu teemaan: vaihdoit teemaa, koodi säilyi.

Miten testaan koodia ennen sen ajamista live-sivustolla?

Luo sivustosta staging-kopio. Useimmat palveluntarjoajat (SiteGround, Cloudways, Kinsta) tarjoavat "Create Staging" -painikkeen hallintapaneelissa. Paikallisesti voit pystyttää kopion Local- tai XAMPP-työkalulla. Testaa kopiolla, siirrä sitten tuotantosivustolle. Nopeita CSS-sääntöjä varten avaa vain Chromen DevTools (F12), etsi elementti ja lisää tyyli suoraan selaimessa, se on väliaikainen ja näkyy vain sinulle.

Täytyykö minun luoda lapsiteema, jos muokkaan vain CSS:ää?

Ei. Aloita Customizerin sisäänrakennetulla Lisä-CSS:llä (Ulkoasu → Mukauta). Se riittää useimpiin visuaalisiin muokkauksiin, ei pyyhkiydy teemapäivityksessä eikä vaadi lisäosaa eikä lapsiteemaa. Lapsiteema tarvitaan, kun korvaat PHP-pohjatiedostoja (header.php, single.php, teeman funktiot).

Mikä menetelmä kannattaa valita kriittiselle koodille, jota ei saa kadota?

Must-use-lisäosa (/wp-content/mu-plugins/). MU-lisäosien koodi suoritetaan aina, sitä on mahdotonta poistaa käytöstä hallintapaneelista, ja se säilyy teemanvaihdoissa ja tavallisissa lisäosapäivityksissä. Sopii mukautettujen sisältötyyppien (CPT), taksonomioiden ja kriittisten REST API -yliajojen rekisteröintiin. Ei sovi kosmeettisiin muokkauksiin, niihin riittää Lisä-CSS tai snippetti-lisäosa.

Mitä valita omaan tehtävääsi

Jos sinun täytyy korjata napin väri kerran, avaa Ulkoasu → Mukauta → Lisä-CSS, liitä sääntö ja unohda koko juttu. Jos keräät hyödyllisiä PHP-snippettejä sivustolle, asenna WPCode: se on ilmainen, turvallinen eikä riipu teemasta. Jos muokkaat sivupohjia tai liität omia skriptejäsi wp_enqueue_scripts-funktion kautta, luo lapsiteema. Ja kun snippettejä on yli kymmenen ja niistä puolet on kriittisiä sivuston toiminnalle, paketoi ne omaksi lisäosaksesi.

Aloita pienesti: avaa Customizer ja lisää ensimmäinen CSS-sääntösi heti. Kirjoita kommentteihin, mitä menetelmää käytät ja mikä snippetti osoittautui hyödyllisimmäksi sivustollasi.