Miksi Elementor-kehittäjät tarvitsevat valitsimia ja miten ne toimivat

Kun käyttäjä säätää widgetin asetuksia editorissa, hän odottaa välitöntä vastetta ruudulla. Ilman valitsimia kehittäjän pitäisi kirjoittaa JavaScript-käsittelijä jokaista kenttämuutosta varten. Valitsimien avulla kaikki ratkaistaan CSS:llä.

selectors-parametri (ja sen vähemmän tunnettu vastine selectors_dictionary) upotetaan suoraan add_control()-kutsun taulukkoon. Elementor korvaa kenttien arvot dynaamisesti CSS-sääntöihin ja tulostaa ne julkaisun tiedostoon, kuten /wp-content/uploads/elementor/css/post-1234.css. Heti kun käyttäjä poistuu editorista, inline-tyylit katoavat ja jäljelle jää siistiä, generoitua CSS:ää.

💡 Pikakatsaus:

• Ymmärrä valitsimien syntaksi ja paikkamerkkitaulukko
• Katso live-esimerkit väreistä ja mitoista
• Opi hakemaan arvoja viereisistä kontrolleista
• Hallitse selectors_dictionary CSS-määrittelyjen korvaamiseen
• Kokoa palapeli CSS-muuttujista ja piilotetuista kontrolleista

Missä valitsimet määritellään

Kun luot widgetin, jokainen add_control()-kutsu vastaanottaa asetustaulukon. Juuri siellä selectors sijaitsevat. Ryhmäkontrolleille syntaksi on sama, taulukko välitetään ryhmän rekisteröinnin sisällä.

Perusmuoto:

1
'selectors' => [
2
    '{{WRAPPER}} .my-widget-class' => 'color: {{VALUE}}',
3
]

Avain on CSS-valitsin (alkaa {{WRAPPER}}-merkinnällä, jotta se ei vaikuta sivun viereisiin widgetteihin). Arvo on yksi tai useampi CSS-määrittely dynaamisine paikkamerkkeineen. Elementor ottaa kontrollin nykyisen arvon ja korvaa sillä paikkamerkin.

Tulos renderöidään julkaisun ulkoiseen CSS-tiedostoon, tyylit ovat olemassa vain editorin ollessa auki ja välittömästi tallennuksen jälkeen. Ei inline-sotkua.

Aaltosulkumuuttujataulukko

Ei taikuutta, pelkkää etsi-ja-korvaa-toimintoa. Paikkamerkkien monipuolisuus avaa kuitenkin ovia varsin näppäriin rakenteisiin.

Valitsimille (taulukon avain)

Määrittelyille (taulukon arvo)

Yksinkertaisia esimerkkejä, väristä taustakuvaan

Väri paletista. Ei mitään ylimääräistä:

1
'selectors' => [
2
    '{{WRAPPER}} .elementor-svg-divider-basic-text' => 'color: {{VALUE}}',
3
],

Numerokontrolli yksikön kanssa ja ilman. Toinen ominaisuus (stroke-width) on tarkoituksella ilman {{UNIT}}-merkintää, viivan paksuus on pikseleinä, ilman px-päätettä:

1
'selectors' => [
2
    '{{WRAPPER}} svg.sde-classic' =>
3
        'height: {{SIZE}}{{UNIT}}; stroke-width: {{SIZE}};',
4
],

Välistys dimensiokontrollista, jokainen suunta erikseen:

1
'selectors' => [
2
    '{{WRAPPER}} .elementor-svg-divider-basic-button' =>
3
        'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
4
],

Dian taustakuva toistokontrollissa:

1
'selectors' => [
2
    '{{WRAPPER}} {{CURRENT_ITEM}} .swiper-slide-bg' =>
3
        'background-image: url({{URL}})',
4
],

Ehdollinen sijainti RTL:lle. Sama kontrolli tarjoaa eri ominaisuudet tekstin suunnasta riippuen:

1
'selectors' => [
2
    'body:not(.rtl) {{WRAPPER}} .dialog-close-button' => 'right: {{SIZE}}{{UNIT}}',
3
    'body.rtl {{WRAPPER}} .dialog-close-button' => 'left: {{SIZE}}{{UNIT}}',
4
],

Miten arvo haetaan toisesta kontrollista

Jos kaksi kenttää vaikuttaa samaan CSS:ään, älä kopioi taulukkoa, vaan viittaa viereiseen kontrolliin:

1
'selectors' => [
2
    '{{WRAPPER}} svg.sde-classic' =>
3
        'stroke-dasharray: {{dash_length.SIZE}} {{whitespace_length.SIZE}};',
4
],

Tässä dash_length ja whitespace_length ovat saman widgetin muiden kontrollien ID:itä. Ei ylimääräisiä kutsuja, pelkkä pistenotaatio.

Responsiivinen versio, arvot haetaan laitteen mukaan. Todellinen esimerkki Elementor Prosta:

1
'selectors' => [
2
    '(desktop).elementor-msie {{WRAPPER}} .elementor-portfolio-item' =>
3
        'width: calc( 100% / {{columns.SIZE}} ); border: {{SIZE}}px solid transparent',
4
    '(tablet).elementor-msie {{WRAPPER}} .elementor-portfolio-item' =>
5
        'width: calc( 100% / {{columns_tablet.SIZE}} ); border: {{SIZE}}px solid transparent',
6
    '(mobile).elementor-msie {{WRAPPER}} .elementor-portfolio-item' =>
7
        'width: calc( 100% / {{columns_mobile.SIZE}} ); border: {{SIZE}}px solid transparent',
8
],

Jokainen taitekohta saa oman columns-arvonsa. Loput ominaisuudet (border, SIZE) ovat yhteisiä, niitä ei ole sidottu laitteeseen.

Selectors_dictionary, switch-case CSS:lle

Tärkein aliarvostettu ominaisuus. selectors_dictionary korvaa {{VALUE}}-kohdan kovakoodatulla merkkijonolla, mikä käytännössä muuttaa ohjausarvon sanakirja-avaimeksi.

Otetaan tavallinen Tasaus-ohjain, jossa on vasen/keskellä/oikea -vaihtoehdot. Ilman sanakirjaa kirjoittaisit jotain luonnotonta:

1
'selectors' => [
2
    $sde_selector => 'margin: 0 auto; margin-{{VALUE}}: 0;',
3
],

Arvolla center tämä tuottaa margin: 0 auto; margin-center: 0;. Ominaisuutta margin-center ei ole olemassa, selain ohittaa sen äänettömästi. Mutta se näyttää sotkuiselta.

Sanakirja tekee saman siististi:

1
'selectors_dictionary' => [
2
    'left'   => 'margin-right: auto',
3
    'center' => 'margin: 0 auto',
4
    'right'  => 'margin-left: auto',
5
],
6
'selectors' => [
7
    '{{WRAPPER}} .sde' => '{{VALUE}}',
8
],

Ohjausarvo center → {{VALUE}} muuttuu muotoon margin: 0 auto. Siinä kaikki.

Tärkeä rajoitus: kun otat selectors_dictionary-toiminnon käyttöön, menetät alkuperäisen {{VALUE}}-arvon. Jos samassa taulukossa on toinen valitsin-määrittely-pari, joka tarvitsee alkuperäistä arvoa, se saa jo korvatun merkkijonon. Tässä ongelmallinen esimerkki:

1
'selectors' => [
2
    '{{WRAPPER}} .sde' => '{{VALUE}}',
3
    '{{WRAPPER}}.elementor-sde-scale-the-cropped .sde-cropping-allow .sde' =>
4
        'transform-origin: {{VALUE}} 0;',
5
],

Tässä transform-origin saa arvon margin: 0 auto 0; eikä center 0;. Ratkaisu: erota riippuvaiset määrittelyt omaksi ohjaimekseen.

Sanakirja hoitaa hyvin myös yksittäisten CSS-arvojen kääntämisen:

1
'selectors_dictionary' => [
2
    'top'    => 'flex-start',
3
    'middle' => 'center',
4
    'bottom' => 'flex-end',
5
],
6
'selectors' => [
7
    '{{WRAPPER}} .elementor-price-table__currency' => 'align-self: {{VALUE}}',
8
],

Ja jopa kokonaisten määrittelyjoukkojen kanssa, yksi avain → useita CSS-ominaisuuksia:

1
'selectors_dictionary' => [
2
    'left'  => 'right: auto; left: 0',
3
    'right' => 'left: auto; right: 0',
4
],
5
'selectors' => [
6
    '{{WRAPPER}}.elementor-wc-products ul.products li.product span.onsale' => '{{VALUE}}',
7
],

CSS-muuttujat, calc() ja piilotetut ohjaimet, palapelin kokoaminen

Valitsimien todellinen voima paljastuu yhdistelmissä. Yksi ohjain asettaa CSS-muuttujan, toinen viittaa siihen, kolmas ottaa käyttöön tai poistaa käytöstä kokonaisen sääntölohkon ehdon kautta.

Skaalaus%-liukusäädin kirjoittaa muuttujan:

1
'selectors' => [
2
    '{{WRAPPER}} .sde' => '--sde-scale-percentage: {{SIZE}};',
3
],

"Skaalaus rajattu" -valintakytkin käyttää tätä muuttujaa kahdessa paikassa, sekä transformaatioon että sen välittämiseen Väli-ohjaimelle:

1
'selectors' => [
2
    '{{WRAPPER}} .sde' =>
3
        'transform: scale(var(--sde-scale-percentage)) scale(0.01);
4
         --sde-scale-pct-for-gap: var(--sde-scale-percentage);',
5
],

Piilotettu ohjain ehdolla, sama transformaatio mutta eri valitsimella (rajaamatonta tilaa varten):

1
'condition' => [
2
    'scale_the_cropped!' => 'cropped',
3
],
4
'selectors' => [
5
    '{{WRAPPER}} .sde svg' =>
6
        'transform: scale(var(--sde-scale-percentage)) scale(0.01);',
7
],

Ja Väli-ohjain käyttää välitettyä muuttujaa varavaihtoehdon kanssa:

1
'selectors' => [
2
    '{{WRAPPER}} .sde' =>
3
        'padding: calc({{SIZE}}{{UNIT}} / (var(--sde-scale-pct-for-gap, 100) / 100)) 0;',
4
],

Mitä tässä tapahtuu: Gap kompensoi skaalausta. Jos elementti kutistetaan puoleen, gap kerrotaan kahdella, jotta se pysyy visuaalisesti samana. Ilman kutistusta (muuttujaa ei ole asetettu) varasijaintiarvo 100 astuu voimaan → jako 1:llä → gap ei muutu. Puhdasta CSS-matematiikkaa, ilman yhtäkään JavaScript-riviä.

Transformien pinoaminen, kiertotapa Edgelle

Rakenne scale(X) scale(0.01) ansaitsee erityismaininnan. Miksei scale(calc(var(--sde-scale-percentage) / 100))? Koska Edge ei tue calc()-funktiota transform-ominaisuuden sisällä. Ei lainkaan.

Ratkaisu: pinoaminen. Selaimet suorittavat transform-funktiot peräkkäin, yksi toisensa jälkeen. Siksi:

1
transform: scale(var(--sde-scale-percentage)) scale(0.01);

Matemaattisesti sama kuin scale(var(--sde-scale-percentage) * 0.01), toisin sanoen jako 100:lla. Käyttäjä saa tutun 0-100-liukusäätimen, kun taas taustalla arvo muuttuu 0-1-kertoimeksi.

Sama periaate pätee muihin muunnoksiin: rotate, translate, skew, ja se toimii kaikissa moderneissa selaimissa, Edge mukaan lukien.

⁉️🤔 Usein kysytyt kysymykset

Mitä tarkalleen ottaen päätyy generoituun CSS-tiedostoon?

Elementor kerää kaikki valitsimet rekisteröidyistä widgetin säätimistä, korvaa nykyiset arvot käyttäjän asetuksista ja kirjoittaa tuloksen tiedostoon /wp-content/uploads/elementor/css/post-XXXX.css. Nämä eivät ole inline-tyylejä eivätkä lennossa tuotettua dynaamista CSS:ää: kyseessä on staattinen tiedosto, jonka selain välimuistittaa ja joka säilyy seuraavaan editorissa tehtävään asetusmuutokseen asti. Paikkamerkit {{VALUE}}, {{SIZE}} ja muut eivät ole osa WordPressiä tai Blade-mallinnusmoottoria: Elementor tekee tavallisen str_replace-operaation CSS:n generoinnin aikana, käyden läpi kaikki valitsin-määrittely-parit ja korvaten tokenit todellisilla säädinarvoilla.

Miten debuggaan valitsimia, jos CSS ei toimi?

Avaa julkaisun generoitu CSS-tiedosto (polku näkyy sivun lähdekoodissa) ja tarkista, että sääntö on siellä. Jos sääntö puuttuu, etsi kirjoitusvirhettä säätimen ID:stä tai syntaksivirhettä selectors-taulukosta. Jos sääntö on olemassa mutta ei toimi, tarkista valitsimen spesifisyys: {{WRAPPER}} antaa korkean prioriteetin, mutta sisäkkäiset teemat voivat ohittaa sen !important-määreellä. Ota käyttöön WP_DEBUG ja seuraa PHP-lokeja: Elementor ohittaa virheelliset taulukot äänettömästi näyttämättä virheitä ruudulla. Käytä {{WRAPPER}}-valitsinta AINA, paitsi tapauksissa, joissa tähdätään tarkoituksella body- tai html-elementtiin.

Miten valitsimet eroavat widgetin asetusten mukautetusta CSS:stä?

Mukautettu CSS (Advanced-välilehti) on käyttäjän itse kirjoittamaa, ja sen säännöt ovat staattisia eivätkä reagoi asetusmuutoksiin. Valitsimet linkittävät säätimet dynaamisesti CSS:ään: käännä liukusäädintä, width muuttuu, vaihda tasausta, margin rakentuu uudelleen. Käyttäjä ei näe tätä mekanismia, hän vain saa live-esikatselun. Kehittäjälle suurin hyöty on _content_template()-metodin puuttuminen: ilman valitsimia joutuisit kirjoittamaan JS-esikatselun renderöinnin jokaiselle säätimelle.

Tarvitsenko selectors_dictionarya, jos käytän jo selectorsia?

Kyllä, koodin siisteyden laadullisen harppauksen vuoksi. Ilman sanakirjaa käsittelet säätimen arvoa implisiittisesti, oudoilla CSS-ominaisuuksilla kuten olemattomalla margin-center-arvolla, jonka selain jättää huomiotta. Sanakirjan avulla määrittelet eksplisiittisesti: "jos arvo on left, korvaa margin-right: auto, jos center, margin: 0 auto". Koodista tulee itseään dokumentoivaa, ja mikä tärkeintä, {{VALUE}} ei enää raahaa alkuperäistä säädinarvoa saman taulukon muihin määrittelyihin.

Voinko yhdistää selectorsin ja _content_template():n samassa widgetissä?

Teknisesti kyllä, mutta käytännössä tämä on merkki arkkitehtuurin uudelleenarviointiin. Jos selectors riittää useimmille säätimille, mutta pari kenttää vaatii JS-renderöintiä, eristä JS-logiikka omaan metodiinsa ja kutsu sitä tarkasti. Täydellinen luopuminen selectorsista _content_template():n hyväksi tarkoittaa, että kirjoitat JS-kaksoiskappaleen kaikesta PHP-säädinlogiikasta, ja tällaisen widgetin ylläpidosta tulee nopeasti ongelma.

Kannattaako selectors hallita vuonna 2026

Elementor kehittää edelleen atomista infrastruktuuria, Variables Manageria, Grid- ja Flexbox-säiliöitä sekä globaaleja tyylejä. Mutta widget-mekaniikan perusta ei ole muuttunut versiosta neljä lähtien: selectors ja selectors_dictionary ovat yhä ensisijainen tapa linkittää säädin live-esikatseluun.

Hallitsemalla tämän tekniikan eliminoit hyvän puolet kaikesta JS-logiikasta tyypillisessä widgetissä. Jokaisen kentän käsittelijöiden sijaan yksi selectors-taulukko säädintä kohden. Monimutkaisen esikatselun asemoinnin sijaan CSS-muuttujien, calc()-funktion ja muutaman piilotetun säätimen yhdistelmä. SVG Divider for Elementor -lisäosa on elävä esimerkki: yli puolta sen säätimistä hallitaan yksinomaan selectorsin kautta, ilman ainuttakaan _content_template()-kutsua.

Pääsääntö on, älä tee liian monimutkaista. Jos huomaat kirjoittavasi neljättä sisäkkäistä calc()-funktiota kolmella muuttujalla, pysähdy. Ehkä on yksinkertaisempaa lisätä piilotettu välittäjäsäädin tai jakaa logiikka kahteen erilliseen kenttään. Ja Elementorin lähdekoodi on paras oppikirja: add_control_rules()-metodi tiedostossa core/files/css/base.php näyttää, miten selectors käsitellään sisäisesti.