Standardsed vormindusnuppude komplekt WordPressi redaktoris on kõigile tuttav: paks kiri, kaldkiri, loendid, tsitaadid. Aga kui sul on vaja regulaarselt lisada kindlat värvi nuppu, hoiatusplokki või pildiallkirja bränditud raamis, lööb rutiin täie hooga sisse. Iga kord: lülita tekstirežiimi, kirjuta style="", kopeeri klasse spikrilt. Üks nupp tuli sinine, teine helesinine. Üks plokk varjuga, teine ilma.

Probleem pole tööriistade puudumises, vaid selles, et TinyMCE „Vormingud" rippmenüü on vaikimisi peidetud. Ja isegi kui sa selle sisse lülitad, on see tühi: WordPress ei tea, milliseid stiile sul vaja on. Aga sa saad need sinna lisada.

On kolm lähenemist: koodi kaudu failis functions.php, visuaalse konstruktoriga pluginaga ja plokiredaktori sisseehitatud mehhanismi register_block_style() kaudu. Kõik kolm töötavad ja katavad erinevaid stsenaariume: alates iga piksli käsitsi juhtimisest kuni „klõpsas ja rakendas"-lahenduseni.

💡 Kiirülevaade:

• Lubame klassikalises redaktoris „Vormingud" rippmenüü filtriga mce_buttons_1 ja täidame selle oma stiilidega läbi tiny_mce_before_init, samm-sammult kood sees.
• Loome faili editor-style.css eelvaate kuvamiseks otse redaktoris: nupp näeb välja nagu nupp juba enne avaldamist.
• Paigaldame TinyMCE Custom Styles, GUI-põhise vormingute konstrueerija ilma koodi puutumata, koos automaatselt genereeritud CSS-failidega.
• Vaatame Gutenbergi sisseehitatud teed: registreerime ploki variatsioonid läbi register_block_style(), ühendame stiilid läbi theme.json või wp_add_inline_style().

Mis on kohandatud stiilid ja miks neid vaja on

Kohandatud stiil on CSS eelseadistus, mille rakendad valitud fragmendile redaktori rippmenüü kaudu. Selle asemel, et sajandat korda mähkida lõiku <span style="..."> sisse, valid „Vormingud" menüüst „Esiletõst" ja saad kollase ümarate nurkadega esiletõstu. Ühe klõpsuga.

Kolm põhjust, miks see üks kord seadistada ja siis unustada:

• Järjepidevus. Kõik nupud, hoiatused ja allkirjad näevad välja ühesugused avaldamisest avaldamiseni. Disain ei triivi.
• Kiirus. Toimetaja ei kaevu CSS-i ega kopeeri märkmikust maagilisi klasse, vaid vajutab lihtsalt ühte nuppu.
• Turvalisus. Keegi ei kirjuta kogemata tekstirežiimis inline-stiilidega märgendit üle.

Tüüpilised stsenaariumid: tegevusele kutsuv nupp (theme-button), „Oluline" plokk ikooni ja värvilise äärisega, täpploend linnukestega, pildiallkiri bränditud stiilis, koodi esiletõstmine lõigu sees.

Meetod 1: Kood, läbi functions.php ja editor-style.css

Tee neile, kes ei karda üks kord functions.php avada. Tulemus: TinyMCE tööriistaribale ilmub „Vormingud" rippmenüü ja selle sees on sinu enda stiilid. Kümme rida PHP-d, üks CSS-fail, null üleliigset pluginat.

Samm 1. Luba „Vormingud" nupp

Vaikimisi on vormingute ripploend styleselect peidetud. See filter toob selle redaktori esimesele reale tagasi. Aseta kood aktiivse teema või, õigemini, alamteema faili functions.php:

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

Konks mce_buttons_1 lisab nupu esimesele tööriistariba reale. Kui eelistad teist või kolmandat rida, kasuta mce_buttons_2 või mce_buttons_3.

Salvestasid functions.php, avasid ükskõik millise postituse, ülemisse ritta vasakule ilmus „Vormingud" rippmenüü. Esialgu veel tühi.

Samm 2. Registreeri oma stiilid

Nüüd täidame menüü tegelike vormingutega. Lisa samasse functions.php faili teine filter:

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

Mida iga elemendi parameetrid tähendavad:

• title, nimi, mida toimetaja rippmenüüs näeb.
• selector, HTML-element, millele stiili rakendatakse. 'a' tähendab, et „Teema nupp" töötab ainult linkidel.
• inline, mähib valitud teksti elemendiga (tavaliselt span), millel on määratud klass. Ideaalne sõna või fraasi esiletõstmiseks lõigu sees.
• classes, elemendile lisatav CSS-klass (või tühikuga eraldatud klassid).

Lisa massiivi sama malli järgi oma elemendid. Aktsepteeritavate parameetrite täielik loend on TinyMCE dokumentatsioonis saidil developer.wordpress.org.

Samm 3. Kirjuta CSS esikülje jaoks

Menüü on täidetud, kuid brauser ei tea veel, milline .theme-button välja näeb. Lisa CSS teema (või alamteema) stiilifaili:

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
}

Pärast salvestamist on nupp esiküljel kujundatud. Kuid administraatorivaates redaktor seda veel ei näita.

Samm 4. Lisa editor-style.css redaktorisisese eelvaate jaoks

Et stiile kuvataks otse visuaalses redaktoris enne avaldamist, on vaja eraldi faili editor-style.css. WordPress oskab selle üles korjata:

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

Loo teema juurkataloogi fail editor-style.css ja kopeeri sinna 3. sammu CSS. Kui töötad kellegi teise teemaga, loo see fail alamteemasse: WordPress kontrollib esmalt alamteemat ja kui leiab sealt faili editor-style.css, laadib selle ülemteema oma asemel.

Tulemus: valitud tekst, valitud „Highlight", kollane esiletõst on redaktoris kohe nähtav. Klõpsatud lingil, valitud „Theme Button", see muutub siniseks nupuks.

Meetod 2: TinyMCE Custom Styles plugin, ilma koodi puutumata

Kui sa ei taha failiga functions.php jännata, aga vajad stiile, on olemas valmis plugin. See teeb sama asja läbi haldusliidese visuaalse liidese kaudu.

Paigalda ja aktiveeri TinyMCE Custom Styles. 2026. aasta juuni seisuga on pluginil üle 8000 aktiivse installatsiooni ja see toetab klassikalist Gutenbergi plokki alates versioonist 1.1.1. Viimane uuendus (v1.1.5, juuni 2024) sulges turvaaugud. Autor Tim Reeves otsib avalikult endale mantlipärijat, kuid koodibaas on stabiilne: plugin ei tõmba väliseid sõltuvusi ega puuduta andmebaasi peale oma seadistuste tabeli.

Plugin ilmub paigaldatud pluginate üldisesse nimekirja. Veendu, et see on aktiveeritud, enne kui seadistamise juurde liigud.

Pärast aktiveerimist mine Seaded → TinyMCE Custom Styles. Esimene ekraan pakub võimalust valida, kuhu CSS-faile salvestada. Soovitan kolmandat varianti: luua eraldi kaust (näiteks tinymce-styles) kataloogi wp-content/uploads. See kaitseb stiile teema või plugina enda uuendamisel. Klõpsa „Save Settings".

Esimene ekraan näitab CSS-i jaoks kolme paigutusvalikut. Vali kolmas ja määra kausta nimi, näiteks tinymce-styles.

Keri lehte alla ja klõpsa „Add New Style". Avaneb konfiguraator, kus saad määrata:

• Title, nimi rippmenüüs (näiteks „Large Blue Button").
• Type, selektoripõhine (rakendub kindlale sildile), reasisene (mähib span-i) või blokk.
• Classes ja CSS-i omadused, otse liideses, ilma failideta.

Pärast seadete salvestamist klõpsa lehe allosas „Add New Style". Avaneb konfiguraator väljadega pealkirja, tüübi ja CSS-i omaduste jaoks.

Salvesta, ava mõni postitus ja leia teiselt tööriistaribalt rippmenüü „Vormingud". Uus stiil on juba olemas. Vali tekst, vali see ja see rakendub kohe.

Lisamooduli eelis: CSS-failid (editor-style.css ja editor-style-shared.css) luuakse valitud kaustas automaatselt. Tõmbad need FTP kaudu alla, muudad mugavas redaktoris ja laed tagasi, ilma et peaksid functions.php faili ühtegi rida muutma.

Meetod 3: register_block_style(), Gutenbergi loomulik tee

Kaks eelmist meetodit töötavad klassikalises TinyMCE redaktoris ja selle klassikalises plokis Gutenbergi sees. Kuid kui elate ainult plokiredaktoris, on olemas otsem tee: register_block_style().

See funktsioon registreerib stiilivariatsiooni konkreetsele plokile, nupule, pealkirjale, tsitaadile, grupile. Variatsioon ilmub ploki külgriba paneelil ja redaktor rakendab selle ühe klõpsuga.

Näide: lisame nupule „Fancy" variatsiooni kollase tausta ja ümarate nurkadega:

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 ühendatakse kas theme.json kaudu (kaasaegsete plokiteemade puhul) või wp_add_inline_style() abil:

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
}

See lähenemine ei sõltu TinyMCE-st ja töötab Gutenbergis loomulikult. theme.json-iga teemade puhul (kõik kaasaegsed plokiteemad) saab stiile kirjeldada otse styles.blocks jaotises, ilma ühegi PHP reata.

⁉️🤔 Levinud küsimused

Vormingud ei kuvata redaktoris. Milles viga?

Esmalt minge Seaded → Advanced Editor Tools ja veenduge, et „Formats" nuppu pole tööriistaribalt eemaldatud. AET haarab kontrolli nuppude ridade üle ja teie mce_buttons_1 filtrit võidakse ignoreerida, kuni lisate nupu sõnaselgelt plugin liidese kaudu. Samuti kontrollige, kas mce_buttons_1 filter on registreeritud ja tagastab massiivi elemendiga 'styleselect'. Tühjendage brauseri vahemälu ja serveri vahemälu, sageli on probleem ainult selles.

Kas ma saan siduda stiili korraga mitme valijaga?

Jah. Stringi 'selector' => 'a' asemel edastage massiiv: 'selector' => 'a, button, span'. TinyMCE rakendab stiili esimesele sobivale ülemsildile nimekirjast. Praktikas on see kasulik, kui üks visuaalne stiil peaks töötama nii linkidel kui ka <button> nuppudel. Massiivi järjekord on oluline: kui valitud tekst on div sees oleva lingi sees ja valijad määravad 'div, a', rakendub stiil div-le, mitte a-le. Pange spetsiifilisemad valijad ette.

Mille poolest erineb editor-style.css failist editor-style-shared.css?

TinyMCE Custom Styles plugin loob kaks faili. editor-style.css laaditakse ainult TinyMCE redaktoris. editor-style-shared.css laaditakse nii redaktoris kui ka avalikus vaates, selle stiilid on saidi külastajatele nähtavad. Kui stiili on vaja ainult redigeerimise mugavuseks, pange see editor-style.css-i. Kui stiil peaks töötama saidil, siis editor-style-shared.css-i. Manuaalse lähenemise puhul on jagatud faili analoogiks teema peamine stiilileht ja editor-style.css (eraldi fail, mis on registreeritud add_editor_style() kaudu) mõjutab ainult eelvaadet TinyMCE sees.

Kas nende muudatuste jaoks on kohustuslik luua alamteema?

Ei, kood töötab ka peateema functions.php failis. Kuid järgmisel teema uuendusel kirjutatakse kõik muudatused üle. Reegel on lihtne: igasugune kohandamine functions.php kaudu läheb alamteemasse, see on kindlustus muudatuste kaotsimineku vastu. Kui teil veel alamteemat pole, looge see kümne minutiga, järgides alamteema juhendit: kaks faili, style.css päisega ja functions.php ülemteema stiilide importimisega, ja teie kohandatud vormingud jäävad iga uuenduse puhul alles.

Plugina pole alates 2024. aastast uuendatud. Kas ma peaksin selle installima?

1. aasta juuni seisuga on TinyMCE Custom Styles plugin endiselt WordPress.org kataloogis, üle 8000 aktiivse installatsiooniga. Autor otsib avalikult mantlipärijat, kuid koodibaas pole hüljatud: viimane uuendus (v1.1.5, juuni 2024) sulges turvaaugud. Risk on olemas, kuid see on hallatav: plugin ei tõmba väliseid sõltuvusi ega kaevu sügavale andmebaasi. Kui tulevikus pluginat enam ei uuendata, saate stiilid alati üle viia manuaalsele meetodile (ülaltoodud sammud 1-4) ilma CSS-i kaotamata. Alternatiiv aktiivse arendusega on Advanced Editor Tools (AET) Automatticult, kuid selle „Create CSS classes menu" valik ajab menüü sageli ebavajalike klassidega segamini. TinyMCE Custom Styles annab manuaalse kontrolli iga elemendi üle, seega pole need konkurendid, vaid pigem täiendavad teineteist.

Kood, plugin või plokid: mida oma stsenaariumi jaoks valida

Valik taandub kahele küsimusele: millises redaktoris te töötate ja kas olete valmis üks kord functions.php avama.

Kui töötate klassikalises redaktoris või Gutenbergi klassikalises plokis ega karda koodi, võtke meetod 1. Kümme rida PHP-d, üks CSS-fail, täielik kontroll.

Kui soovite visuaalset vormingukonstruktorit ilma koodi puudutamata ja automaatse CSS-i genereerimisega, installige TinyMCE Custom Styles. Pidage meeles pikaajalise toe riski, kuid tänase seisuga plugin täidab oma lubadused.

Kui elate plokiredaktoris, omandage register_block_style(). See tee on Gutenbergi jaoks loomulik, ei sõltu TinyMCE-st ja on WordPressi tuuma poolt toetatud.

Kõigi kolme stsenaariumi puhul saate peamise: vormindamine ühe klõpsuga, mitte klasside ja sisemiste stiilide käsitsi kopeerimine. Ja see on tund või paar säästetud aega kuus igal regulaarselt avaldataval saidil.