Tuttu vakiosarja muotoilupainikkeita WordPress-editorissa on kaikille tuttu: lihavointi, kursiivi, listat, lainaukset. Mutta kun sinun täytyy säännöllisesti lisätä tietyn värinen painike, varoituslaatikko tai kuvateksti brändätyssä kehyksessä, rutiini iskee täydellä voimalla. Joka kerta: vaihda tekstimuotoon, kirjoita style="", kopioi luokkia lunttilapusta. Yhdestä painikkeesta tuli sininen, toisesta vaaleansininen. Yhdessä lohkossa on varjo, toisessa ei.

Ongelma ei ole työkalujen puute, vaan se, että TinyMCE:n "Muotoilut"-pudotusvalikko on oletuksena piilossa. Ja vaikka ottaisit sen käyttöön, se on tyhjä: WordPress ei tiedä, mitä tyylejä tarvitset. Mutta voit lisätä ne sinne.

On kolme lähestymistapaa: koodilla functions.php-tiedostossa, lisäosalla jossa on visuaalinen rakennin, ja natiivilla lohkoeditorimekanismilla register_block_style(). Kaikki kolme toimivat ja kattavat eri skenaarioita: manuaalisesta jokaisen pikselin hallinnasta "klikkaa ja käytä" -toimintoon.

💡 Pikaopas:

• Otamme "Muotoilut"-pudotusvalikon käyttöön klassisessa editorissa mce_buttons_1-suodattimella ja täytämme sen omilla tyyleillämme tiny_mce_before_init-kohdan kautta, vaiheittainen koodi sisällä.
• Luomme editor-style.css-tiedoston reaaliaikaista esikatselua varten suoraan editorissa: painike näyttää painikkeelta jo ennen julkaisua.
• Asennamme TinyMCE Custom Styles -lisäosan, graafisen rakentimen muotoiluille ilman koodin koskemista, automaattisesti luotavilla CSS-tiedostoilla.
• Katsomme natiivia polkua Gutenberg-editorille: rekisteröimme lohkovariaatioita register_block_style()-funktiolla, yhdistämme tyylit theme.json-tiedoston tai wp_add_inline_style()-funktion kautta.

Mitä mukautetut tyylit ovat ja miksi tarvitset niitä

Mukautettu tyyli on CSS-esiasetus, jonka lisäät valittuun kohtaan editorin pudotusvalikosta. Sen sijaan, että käärisit kappaleen sadasosan kerran <span style="...">-tagin sisään, valitset "Korostus" "Muotoilut"-valikosta ja saat keltaisen korostuksen pyöristetyillä kulmilla. Yhdellä klikkauksella.

Kolme syytä asettaa tämä kerralla kuntoon ja unohtaa:

• Yhdenmukaisuus. Kaikki painikkeet, varoitukset ja kuvatekstit näyttävät samalta julkaisusta toiseen. Ulkoasu ei ajaudu.
• Nopeus. Editorin käyttäjä ei kaivaudu CSS:ään eikä kopioi taikaluokkia muistiosta, vaan painaa vain yhtä painiketta.
• Turvallisuus. Kukaan ei vahingossa ylikirjoita merkintää rivinsisäisillä tyyleillä tekstimuodossa.

Tyypillisiä skenaarioita: toimintakehotuspainike (theme-button), "Tärkeää"-laatikko kuvakkeella ja värillisellä reunuksella, luettelomerkitty lista rastimerkeillä, kuvateksti brändätyssä tyylissä, koodin korostus kappaleen sisällä.

Tapa 1: Koodilla, functions.php:n ja editor-style.css:n kautta

Polku niille, jotka eivät pelkää avata functions.php-tiedostoa kerran. Lopputulos: "Muotoilut"-pudotusvalikko ilmestyy TinyMCE-työkaluriville, ja sen sisällä ovat omat tyylisi. Kymmenen riviä PHP:tä, yksi CSS-tiedosto, nolla turhaa lisäosaa.

Vaihe 1. Ota "Muotoilut"-painike käyttöön

Oletuksena muotoilujen pudotusvalikko styleselect on piilossa. Tämä suodatin palauttaa sen editorin ensimmäiselle riville. Sijoita koodi aktiivisen teeman tai, oikeaoppisemmin, lapsiteeman functions.php-tiedostoon:

1
function myprefix_mce_buttons_1( $buttons ) {
2
    array_unshift( $buttons, 'styleselect' );
3
    return $buttons;
4
}
5
add_filter( 'mce_buttons_1', 'myprefix_mce_buttons_1' );

mce_buttons_1-koukku lisää painikkeen ensimmäiselle työkaluriville. Jos haluat sen toiselle tai kolmannelle riville, käytä mce_buttons_2- tai mce_buttons_3-koukkua.

Tallensit functions.php-tiedoston, avasit minkä tahansa artikkelin, "Muotoilut"-pudotusvalikko ilmestyi yläriville vasemmalle. Toistaiseksi vielä tyhjänä.

Vaihe 2. Rekisteröi omat tyylisi

Täytetään nyt valikko oikeilla muotoiluilla. Lisää toinen suodatin samaan functions.php-tiedostoon:

1
function myprefix_add_format_styles( $init_array ) {
2
    $style_formats = array(
3
        array(
4
            'title'    => __( 'Theme Button', 'text-domain' ),
5
            'selector' => 'a',
6
            'classes'  => 'theme-button',
7
        ),
8
        array(
9
            'title'    => __( 'Highlight', 'text-domain' ),
10
            'inline'   => 'span',
11
            'classes'  => 'text-highlight',
12
        ),
13
    );
14
    $init_array['style_formats'] = json_encode( $style_formats );
15
    return $init_array;
16
}
17
add_filter( 'tiny_mce_before_init', 'myprefix_add_format_styles' );

Mitä kunkin elementin parametrit tarkoittavat:

• title, nimi, jonka editorin käyttäjä näkee pudotusvalikossa.
• selector, HTML-tagi, johon tyyliä sovelletaan. 'a' tarkoittaa, että "Teemapainike" toimii vain linkeille.
• inline, käärii valitun tekstin tagiin (yleensä span) määritetyllä luokalla. Täydellinen sanan tai lauseen korostamiseen kappaleen sisällä.
• classes, CSS-luokka (tai välilyönnillä erotetut luokat), joka lisätään elementtiin.

Lisää omia kohtiasi taulukkoon samaa mallia noudattaen. Täydellinen lista hyväksytyistä parametreista löytyy TinyMCE-dokumentaatiosta developer.wordpress.org-sivustolla.

Vaihe 3. Kirjoita CSS julkiselle puolelle

Valikko on täytetty, mutta selain ei vielä tiedä, miltä .theme-button näyttää. Lisää CSS teeman tyylitiedostoon (tai lapsiteemaan):

1
.theme-button {
2
    display: inline-block;
3
    padding: 10px 15px;
4
    color: #fff;
5
    background: #1796c6;
6
    text-decoration: none;
7
}
8
.theme-button:hover {
9
    text-decoration: none;
10
    opacity: 0.8;
11
}
12
.text-highlight {
13
    background: #FFFF00;
14
}

Tallennuksen jälkeen painike on tyylitelty julkisella puolella. Mutta hallintapaneelissa editori ei vielä näytä sitä.

Vaihe 4. Lisää editor-style.css esikatselua varten editorissa

Jotta tyylit näkyvät suoraan visuaalisessa editorissa ennen julkaisua, tarvitset erillisen editor-style.css-tiedoston. WordPress osaa poimia sen:

1
function myprefix_theme_add_editor_styles() {
2
    add_editor_style( 'editor-style.css' );
3
}
4
add_action( 'init', 'myprefix_theme_add_editor_styles' );

Luo editor-style.css-tiedosto teeman juureen ja kopioi siihen vaiheen 3 CSS. Jos työskentelet jonkun toisen teeman kanssa, luo tämä tiedosto lapsiteemaan: WordPress tarkistaa ensin lapsiteeman ja, löytäessään sieltä editor-style.css-tiedoston, lataa sen ylätason tiedoston sijaan.

Tulos: valittu teksti, valittu "Highlight", keltainen korostus näkyy heti editorissa. Klikattu linkkiä, valittu "Theme Button", se muuttuu siniseksi painikkeeksi.

Tapa 2: TinyMCE Custom Styles -lisäosa, ilman koodin koskemista

Jos et halua säätää functions.php-tiedoston kanssa mutta tarvitset tyylejä, on olemassa valmis lisäosa. Se tekee saman asian visuaalisen käyttöliittymän kautta hallintapaneelissa.

Asenna ja aktivoi TinyMCE Custom Styles. Kesäkuussa 2026 lisäosalla on yli 8 000 aktiivista asennusta ja se tukee klassista Gutenberg-lohkoa versiosta 1.1.1 alkaen. Viimeisin päivitys (v1.1.5, kesäkuu 2024) sulki haavoittuvuuksia. Tekijä, Tim Reeves, etsii avoimesti seuraajaa, mutta koodipohja on vakaa: lisäosa ei vedä ulkoisia riippuvuuksia eikä koske tietokantaan oman optiotaulunsa ulkopuolella.

Lisäosa näkyy asennettujen lisäosien yleisessä listassa. Varmista, että se on aktivoitu ennen kuin siirryt määrityksiin.

Aktivoinnin jälkeen mene kohtaan Asetukset → TinyMCE Custom Styles. Ensimmäinen näyttö tarjoaa valintaa CSS-tiedostojen tallennuspaikasta. Suosittelen kolmatta vaihtoehtoa: luo erillinen kansio (esimerkiksi tinymce-styles) hakemistoon wp-content/uploads. Tämä suojaa tyylejä teemaa tai itse lisäosaa päivitettäessä. Klikkaa "Tallenna asetukset."

Ensimmäinen näyttö näyttää kolme sijoitusvaihtoehtoa CSS:lle. Valitse kolmas ja aseta kansion nimi, esimerkiksi tinymce-styles.

Vieritä sivua alas ja klikkaa "Lisää uusi tyyli". Avautuu rakentaja, jossa määrität:

• Otsikko, nimi pudotusvalikossa (esimerkiksi "Iso sininen painike").
• Tyyppi, valitsinpohjainen (koskee tiettyä tagia), inline (käärii span-elementtiin) tai block.
• Luokat ja CSS-ominaisuudet, suoraan käyttöliittymässä, ilman tiedostoja.

Asetusten tallentamisen jälkeen klikkaa "Lisää uusi tyyli" sivun alaosassa. Avautuu rakentaja, jossa on kentät otsikolle, tyypille ja CSS-ominaisuuksille.

Tallenna, avaa mikä tahansa artikkeli ja etsi "Formats"-pudotusvalikko toiselta työkaluriviltä. Uusi tyyli on siellä valmiina. Valitse teksti, valitse tyyli, ja se otetaan käyttöön heti.

Lisäosan etu: CSS-tiedostot (editor-style.css ja editor-style-shared.css) luodaan automaattisesti valitsemaasi kansioon. Nappaat ne FTP:llä, muokkaat mieleiselläsi editorilla ja lataat takaisin ilman, että tarvitsee koskea functions.php-tiedostoon lainkaan.

Tapa 3: register_block_style(), natiivi polku Gutenbergille

Kaksi edellistä tapaa toimivat klassisessa TinyMCE-editorissa ja sen Classic-lohkossa Gutenbergin sisällä. Mutta jos elät yksinomaan lohkoeditorissa, on olemassa suorempi polku: register_block_style().

Tämä funktio rekisteröi tyylivariaation tietylle lohkolle, napille, otsikolle, lainaukselle, ryhmälle. Variaatio ilmestyy lohkon sivupaneeliin, ja editori ottaa sen käyttöön yhdellä napsautuksella.

Esimerkki: lisätään napille "Fancy"-variaatio keltaisella taustalla ja pyöristetyillä kulmilla:

1
function myprefix_register_block_styles() {
2
    register_block_style(
3
        'core/button',
4
        array(
5
            'name'  => 'fancy',
6
            'label' => __( 'Fancy', 'text-domain' ),
7
        )
8
    );
9
}
10
add_action( 'init', 'myprefix_register_block_styles' );

CSS liitetään joko theme.json-tiedoston kautta (moderneille lohkoteemoille) tai wp_add_inline_style()-funktiolla:

1
.is-style-fancy .wp-block-button__link {
2
    background-color: #f0c040;
3
    color: #fff;
4
    border: none;
5
    border-radius: 15px;
6
    padding: 10px 20px;
7
}

Tämä lähestymistapa ei riipu TinyMCE:stä ja toimii natiivisti Gutenbergissa. Teemoille, joissa on theme.json (kaikki modernit lohkoteemat), tyylit voidaan kuvailla suoraan styles.blocks-osiossa ilman yhtäkään PHP-riviä.

⁉️🤔 Yleisiä kysymyksiä

Formaatit eivät näy editorissa. Mistä on kyse?

Mene ensin kohtaan Asetukset → Advanced Editor Tools ja varmista, ettei "Formats"-painiketta ole poistettu työkalupalkista. AET kaappaa painikerivien hallinnan, ja mce_buttons_1-suodattimesi saatetaan sivuuttaa, kunnes lisäät painikkeen erikseen liitännäisen käyttöliittymän kautta. Tarkista myös, että mce_buttons_1-suodatin on rekisteröity ja palauttaa taulukon, jossa on 'styleselect'-elementti. Tyhjennä selaimen välimuisti ja palvelimen välimuisti, usein ongelma on vain tässä.

Voinko sitoa tyylin useampaan valitsimeen kerralla?

Kyllä. Merkkijonon 'selector' => 'a' sijaan välitä taulukko: 'selector' => 'a, button, span'. TinyMCE soveltaa tyylin ensimmäiseen täsmäävään ylätason tunnisteeseen listalta. Käytännössä tämä on hyödyllistä, kun yhden visuaalisen tyylin pitäisi toimia sekä linkeissä että <button>-painikkeissa. Järjestyksellä taulukossa on väliä: jos valittu teksti on div-elementin sisällä olevassa linkissä ja valitsimet määrittelevät 'div, a', tyyli sovelletaan div-elementtiin, ei a-elementtiin. Laita tarkemmat valitsimet ensin.

Miten editor-style.css eroaa editor-style-shared.css-tiedostosta?

TinyMCE Custom Styles -liitännäinen luo kaksi tiedostoa. editor-style.css latautuu vain TinyMCE-editorissa. editor-style-shared.css latautuu sekä editorissa että julkisella sivustolla, joten sen tyylit näkyvät sivuston vierailijoille. Jos tyyliä tarvitaan vain muokkauksen helpottamiseksi, laita se tiedostoon editor-style.css. Jos tyylin pitää toimia sivustolla, laita se tiedostoon editor-style-shared.css. Manuaalisessa lähestymistavassa jaetun tiedoston vastine on teeman päätyylitiedosto, ja editor-style.css (erillinen tiedosto, joka rekisteröidään add_editor_style()-funktiolla) vaikuttaa vain esikatseluun TinyMCE:n sisällä.

Onko pakko luoda lapsiteema näitä muokkauksia varten?

Ei, koodi toimii myös pääteeman functions.php-tiedostossa. Mutta seuraavassa teemapäivityksessä kaikki muokkaukset ylikirjoitetaan. Sääntö on yksinkertainen: kaikki functions.php-tiedoston kautta tehtävä räätälöinti menee lapsiteemaan, tämä on vakuutus muutosten menettämistä vastaan. Jos sinulla ei vielä ole lapsiteemaa, luo se kymmenessä minuutissa lapsiteemaohjeen avulla: kaksi tiedostoa, style.css otsikkotietoineen ja functions.php pääteeman tyylien tuontia varten, ja räätälöidyt formaattisi säilyvät minkä tahansa päivityksen yli.

Liitännäistä ei ole päivitetty vuoden 2024 jälkeen. Kannattaako se asentaa?

Kesäkuussa 2026 TinyMCE Custom Styles -liitännäinen on edelleen WordPress.orgin valikoimassa ja sillä on yli 8 000 aktiivista asennusta. Tekijä etsii avoimesti seuraajaa, mutta koodipohjaa ei ole hylätty: viimeisin päivitys (v1.1.5, kesäkuu 2024) sulki haavoittuvuuksia. Riski on olemassa, mutta se on hallittavissa: liitännäinen ei vedä ulkoisia riippuvuuksia eikä kaivaudu syvälle tietokantaan. Jos liitännäisen päivitykset loppuvat tulevaisuudessa, voit aina siirtää tyylit manuaaliseen menetelmään (vaiheet 1-4 yllä) menettämättä CSS:ää. Vaihtoehto aktiivisella kehityksellä on Advanced Editor Tools (AET) Automatticilta, mutta sen "Create CSS classes menu" -valinta usein sotkee valikon tarpeettomilla luokilla. TinyMCE Custom Styles antaa manuaalisen hallinnan jokaisesta elementistä, joten ne eivät ole kilpailijoita vaan pikemminkin täydentävät toisiaan.

Koodi, liitännäinen vai lohkot: mitä valita omaan skenaarioosi

Valinta kiteytyy kahteen kysymykseen: missä editorissa työskentelet ja oletko valmis avaamaan functions.php-tiedoston kerran.

Jos työskentelet klassisessa editorissa tai Gutenbergin Classic-lohkossa etkä pelkää koodia, valitse tapa 1. Kymmenen riviä PHP:tä, yksi CSS-tiedosto, täysi hallinta.

Jos haluat visuaalisen formaattikonstruktorin koskematta koodiin ja automaattisella CSS-generoinnilla, asenna TinyMCE Custom Styles. Muista pitkän aikavälin tukiriski, mutta tänä päivänä liitännäinen toimittaa sen mitä lupaa.

Jos elät lohkoeditorissa, hallitse register_block_style(). Tämä polku on natiivi Gutenbergille, ei riipu TinyMCE:stä ja on WordPress-ytimen tukema.

Missä tahansa näistä kolmesta skenaariosta saat pääasian: muotoilun yhdellä napsautuksella manuaalisen luokkien ja inline-tyylien kopioinnin sijaan. Ja se tarkoittaa tunnin tai kaksi säästettyä aikaa kuukaudessa millä tahansa säännöllisesti julkaistavalla sivustolla.