Miks Elementori arendajad vajavad selektoreid ja kuidas need töötavad

Kui kasutaja muudab redaktoris vidina seadeid, ootab ta ekraanil kohest reageeringut. Ilma selektoriteta peaks arendaja kirjutama JS-i töötleja iga välja muutuse jaoks. Selektoritega lahendab kõik CSS.

Parameeter selectors (ja selle vähem tuntud vastand selectors_dictionary) manustatakse otse add_control() väljakutse massiivi. Elementor asendab dünaamiliselt väljade väärtused CSS-i reeglitesse ja väljastab need postituse faili, umbes nagu /wp-content/uploads/elementor/css/post-1234.css. Niipea kui kasutaja redaktorist väljub, kaovad inline-stiilid, jättes alles puhta genereeritud CSS-i.

💡 Kiire ülevaade:

• Mõista selektorite süntaksit ja kohatäitjate tabelit
• Vaata elavaid näiteid värvi ja suuruste kohta
• Õpi tõmbama väärtusi naaberkontrollidest
• Valda selectors_dictionary CSS-i deklaratsiooni asendamiseks
• Pane kokku CSS-i muutujate ja peidetud kontrollide pusle

Kus selektorid määratletakse

Kui lood vidina, võtab iga add_control() väljakutse vastu seadete massiivi. Just seal asuvad selectors. Grupikontrollide puhul on süntaks sama, massiiv edastatakse grupi registreerimise sees.

Põhivorming:

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

Võti on CSS-i selektor (algab {{WRAPPER}}-ga, et vältida naabervidinate mõjutamist lehel). Väärtus on üks või mitu CSS-i deklaratsiooni dünaamiliste kohatäitjatega. Elementor võtab praeguse kontrolli väärtuse ja asendab selle kohatäitja asemele.

Tulemus renderdatakse postituse välisesse CSS-i faili, stiilid eksisteerivad ainult redaktori avamise ajal ja kohe pärast salvestamist. Ei mingit inline-segadust.

Looksulgude muutujate tabel

Ei mingit maagiat, lihtsalt otsi-ja-asenda. Kuid kohatäitjate mitmekesisus avab uksi üsna nutikatele konstruktsioonidele.

Selektorite jaoks (massiivi võti)

Deklaratsioonide jaoks (massiivi väärtus)

Lihtsad näited, värvist taustapildini

Värv paletist. Ei midagi üleliigset:

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

Numbriline kontroll ühikuga ja ilma. Teine omadus (stroke-width) on tahtlikult ilma {{UNIT}}-ta, joone paksus on pikslites, ilma px-ita:

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

Vahed mõõtmete kontrollist, iga suund eraldi:

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

Taustapilt slaidil korduskontrollis:

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

Tingimuslik positsioon RTL-i jaoks. Sama kontroll pakub erinevaid omadusi sõltuvalt teksti suunast:

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

Kuidas tõmmata väärtust teisest kontrollist

Kui kaks välja mõjutavad sama CSS-i, ära dubleeri massiivi, vaid viita lihtsalt naaberkontrollile:

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

Siin on dash_length ja whitespace_length teiste kontrollide ID-d samas vidinas. Ei mingeid lisakutseid, lihtsalt punktmärgistus.

Versioon, mis arvestab seadet, tõmmatakse väärtused seadme järgi. Päris näide Elementor Prost:

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
],

Iga murdepunkt saab oma columns väärtuse. Ülejäänud atribuudid (border, SIZE) on ühised, need pole seadmega seotud.

Selectors_dictionary, switch-case CSS-i jaoks

Peamine alahinnatud võimekus. selectors_dictionary asendab {{VALUE}} jäigalt kodeeritud stringiga, muutes juhtelemendi väärtuse sisuliselt sõnastiku võtmeks.

Võtame tavalise Joonduse juhtelemendi vasak/keskel/paremal valikutega. Ilma sõnastikuta kirjutaksid midagi ebaloomulikku:

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

center puhul tekitab see margin: 0 auto; margin-center: 0;. margin-center atribuuti pole olemas, brauser ignoreerib seda vaikimisi. Aga see näeb räpane välja.

Sõnastik teeb sama asja puhtalt:

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
],

Juhtelemendi väärtus center → {{VALUE}} muutub margin: 0 auto. Nii lihtne see ongi.

Oluline piirang: pärast selectors_dictionary aktiveerimist kaotad algse {{VALUE}}. Kui samas massiivis on veel mõni selektor-deklaratsioon paar, mis vajab algset väärtust, saab see juba asendatud stringi. Siin on problemaatiline näide:

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

Siin saab transform-origin väärtuseks margin: 0 auto 0; mitte center 0;. Lahendus: eralda sõltuvad deklaratsioonid eraldi juhtelemendiks.

Sõnastik saab hästi hakkama ka üksikute CSS väärtuste tõlkimisega:

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 isegi tervete deklaratsioonikomplektidega, üks võti → mitu CSS atribuuti:

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 muutujad, calc() ja peidetud juhtelemendid, pusle kokkupanek

Selektorite tõeline jõud avaldub kombineerimisel. Üks juhtelement määrab CSS muutuja, teine viitab sellele, kolmas lülitab tingimuse kaudu sisse või välja terve reeglite ploki.

Skaala% liugur kirjutab muutuja:

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

Lüliti „Skaala kärbitud" kasutab seda muutujat kahes kohas, nii transformi jaoks kui ka selle edastamiseks Vahe juhtelemendile:

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
],

Peidetud juhtelement tingimusega, sama transform kuid erineva selektoriga (kärpimata oleku jaoks):

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 Vahe juhtelement kasutab edastatud muutujat koos varuväärtusega:

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

Mis siin toimub: Gap kompenseerib skaleerimist. Kui elementi kahandatakse poole võrra, korrutatakse gap 2-ga, et see jääks visuaalselt samaks. Ilma kahandamiseta (muutuja on määramata) rakendub varuväärtus 100 → jagamine 1-ga → gap ei muutu. Puhas CSS-i matemaatika, ilma ühegi JS-i reata.

Transformide virnastamine, lahendus Edge'i jaoks

Konstruktsioon scale(X) scale(0.01) väärib eraldi mainimist. Miks mitte scale(calc(var(--sde-scale-percentage) / 100))? Sest Edge ei toeta calc() funktsiooni transform sees. Üldse mitte.

Lahendus: virnastamine. Brauserid rakendavad transformi funktsioone järjest, üksteise järel. Seega:

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

Matemaatiliselt võrdne avaldisega scale(var(--sde-scale-percentage) * 0.01), teisisõnu jagamine 100-ga. Kasutaja saab tuttava 0-100 liuguri, samal ajal kui kulisside taga muutub väärtus koefitsiendiks 0-1.

Sama põhimõte kehtib ka teiste transformatsioonide puhul: rotate, translate, skew, ja töötab kõigis kaasaegsetes brauserites, sealhulgas Edge'is.

⁉️🤔 Korduma kippuvad küsimused

Mis täpselt genereeritud CSS-faili läheb?

Elementor kogub kõik selektorid registreeritud vidina juhtelementidest, asendab kasutaja seadete hetkeväärtused ja kirjutab tulemuse faili /wp-content/uploads/elementor/css/post-XXXX.css. Need ei ole inline-stiilid ega lennult dünaamiline CSS: see on staatiline fail, mida brauser puhverdab ja mis püsib kuni järgmise seadete muutmiseni redaktoris. Kohahoidjad {{VALUE}}, {{SIZE}} ja teised ei ole osa WordPressi ega Blade'i mallimootorist: Elementor teeb CSS-i genereerimise ajal tavalise str_replace'i, itereerides läbi kõik selektor-deklaratsioon paarid ja asendades märgid tegelike juhtelemendi väärtustega.

Kuidas selektoreid siluda, kui CSS ei rakendu?

Ava postituse genereeritud CSS-fail (asukoht on lehe lähtekoodis näha) ja kontrolli, kas reegel on seal olemas. Kui reegel puudub, otsi trükiviga juhtelemendi ID-s või süntaksiviga selectors massiivis. Kui reegel on olemas, aga ei tööta, kontrolli selektori spetsiifilisust: {{WRAPPER}} annab kõrge prioriteedi, kuid sisestatud teemad võivad !important abil üle kirjutada. Luba WP_DEBUG ja jälgi PHP logisid: Elementor jätab vigased massiivid vaikselt vahele, ilma ekraanil vigu kuvamata. Kasuta ALATI {{WRAPPER}}-it, välja arvatud juhtudel, kui sihid tahtlikult body või html elementi.

Mille poolest erinevad selektorid vidina seadetes olevast kohandatud CSS-ist?

Kohandatud CSS (Advanced tab) on kasutaja poolt käsitsi kirjutatud, need on staatilised reeglid, mis ei reageeri seadete muutustele. Selektorid seovad juhtelemendid dünaamiliselt CSS-iga: liiguta liugurit, width muutub, muuda joondust, margin ehitatakse ümber. Kasutaja ei näe seda mehhanismi, ta lihtsalt saab reaalajas eelvaate. Arendaja jaoks on peamine võit _content_template() meetodi puudumine: ilma selektoriteta peaksid iga juhtelemendi jaoks kirjutama JS-i eelvaate renderduse.

Kas ma vajan selectors_dictionary't, kui ma juba kasutan selektoreid?

Jah, koodi puhtuse kvalitatiivse hüppe jaoks. Ilma sõnastikuta töötled juhtelemendi väärtust kaudselt, läbi kummaliste CSS-omaduste nagu olematu margin-center, mida brauser ignoreerib. Sõnastikuga täpsustad selgelt: „kui väärtus on left, asenda margin-right: auto, kui center, siis margin: 0 auto". Kood muutub isedokumenteerivaks ja mis peamine, {{VALUE}} ei lohista enam algset juhtelemendi väärtust sama massiivi teistesse deklaratsioonidesse.

Kas ma saan ühes vidinas kombineerida selektoreid ja _content_template()'i?

Tehniliselt jah, kuid praktikas on see signaal arhitektuuri ümbervaatamiseks. Kui selektoritest piisab enamiku juhtelementide jaoks, kuid paar välja nõuavad JS-i renderdust, eralda JS-i loogika eraldi meetodisse ja kutsu seda täpselt. Selektorite täielik hülgamine _content_template() kasuks tähendab, et kirjutad kogu PHP juhtloogikast JS-i duplikaadi, sellise vidina tugi muutub kiiresti probleemiks.

Kas selektoreid tasub 2026. aastal omandada

Elementor arendab edasi aatom-infrastruktuuri, Variables Managerit, Grid ja Flexbox konteinereid, globaalseid stiile. Kuid vidina mehaanika alus pole neljandast versioonist saadik muutunud: selectors ja selectors_dictionary jäävad peamiseks viisiks juhtelemendi sidumiseks reaalajas eelvaatega.

Seda tehnikat omandades elimineerid hea poole kogu JS-i loogikast tüüpilises vidinas. Iga välja jaoks mõeldud handlerite asemel üks selectors massiiv juhtelemendi kohta. Keerulise positsioneerimise asemel eelvaates kombinatsioon CSS-muutujatest koos calc()-iga ja paarist peidetud juhtelemendist. SVG Divider for Elementor plugin on elav näide: üle poole selle juhtelementidest hallatakse eranditult selektorite kaudu, ilma ühegi _content_template() väljakutseta.

Peamine reegel on mitte üle keerutada. Kui tabad end kirjutamas neljandat sisestatud calc()-i kolme muutujaga, peatu. Võib-olla on lihtsam lisada peidetud vahepealne juhtelement või jagada loogika kaheks eraldi väljaks. Ja Elementori lähtekood on parim õpik: add_control_rules() meetod failis core/files/css/base.php näitab, kuidas selektoreid sisemiselt töödeldakse.