«
»
ElementorWordPressWordPress - CSSПлагины

Использование селекторов в виджетах Elementor для управления CSS

Привет! Хотите узнать больше о возможностях разработчика в Elementor? Этот получает только несколько упоминаний в документах. Поэтому я считаю, что полезно поделиться всем, что я знаю об этом. При создании элемента управления вы можете добавить необязательный параметр с именем selectoror, selectorsкоторый будет управлять CSS предварительного просмотра на лету . Если вы спросите меня, селекторы в Elementor – это то, что сделало этого строителя тем, чем он является сегодня. Это современная интерпретация WYSIWYG, и используя ее, разработчики могут сэкономить часы разочарования пользователей. Почему? Сохранение редактора и перезагрузка другой вкладки больше не нужны для каждого незначительного изменения.

Можно многому научиться из кода Elementor, и это то, что я сделал, чтобы понять, что возможно с селекторами. Это полезно намного больше, чем вы думаете! С некоторой креативностью можно раздвинуть границы, чтобы избежать написания дополнительных обработчиков. В производстве более половины элементов управления в нашем SVG Divider for Elementor в значительной степени зависят от параметра селекторов. Из-за этого мне никогда не приходилось использовать метод (чтобы создать предварительный просмотр с помощью JS). Как вы уже догадались, эта статья предназначена для разработчиков расширений Elementor и требует знания PHP и CSS._content_template()

Где добавить «селектор» или «селекторы» в Elementor?

Когда вы создаете виджет, вы регистрируете элементы управления для него. Все приведенные здесь примеры входят в массив настроек управления метода. Подробнее о создании нового виджета и его элементов управления читайте в документации разработчика Elementor.add_control()

Название параметра selectorдля групповых элементов управления . Это просто строка, которую вы написали бы в CSS перед объявлениями. Есть одна лучшая, на которой я сконцентрируюсь: это более сложная структура, массив пар ключ-значение, транслируемых в объявления селекторов .{ ... }``selectors

Вывод заканчивается в файл, поэтому он не встроен, как только пользователь покидает редактор! Что-то вроде:

/wp-content/uploads/elementor/css/post-1234.css

Переменные фигурные скобки

Необязательное, но жизненно важное значение имеет использование динамических ценностей. Они не являются частью механизма шаблонов, Elementor выполняет их поиск и замену. Вы увидите примеры ниже, но сначала, для вашего удобства, справочную таблицу.

CSS-селекторы (ключ в массиве селекторов)

span>{span>span>{span>WRAPPERspan>}span>span>}span>За кулисами это переводится в нечто вроде:

.elementor-50 .elementor-element.elementor-element-092e113

  • Используйте его почти всегда, чтобы убедиться, что вы выбираете вещи только в конкретном экземпляре виджета.
  • Имеет значение, следите ли вы за этим.
span>{span>span>{span>IDspan>}span>span>}span>Получить только идентификатор виджета (например,092e113).
span>(span>desktopspan>)span>
span>(span>tabletspan>)span>
span>(span>mobilespan>)span>span>(span>desktopspan>+span>span>)span>
span>(span>tabletspan>+span>span>)span>
span>(span>mobilespan>+span>span>)span>
Используйте пару объявление-селектор в соответствующем медиазапросе. Если присутствует, селектор должен начинаться с этого.

В основном это необходимо только при использовании значения другого параметра. Адаптивный контроль решает это автоматически. Тем не менее, это может применить / отключить эффект, в противном случае не реагировать настройки, на некоторых устройствах.

Он определяет устройство, к которому применяются правила, и к чему-либо меньшему (поведение по умолчанию). Тем не менее, когда добавляется знак плюс (+), они будут применяться по крайней мере, разрешение этого устройства или больше .

Объявления (значение в массиве селекторов)

Вы можете использовать их где угодно в свойствах и значениях CSS.

span>{span>span>{span>VALUEspan>}span>span>}span>Многие элементы управления возвращают одно значение , доступ к нему с помощью этого. selectors_dictionaryМожет изменить это на лету.
span>{span>span>{span>SIZEspan>}span>span>}span> а также span>{span>span>{span>UNITspan>}span>span>}span>Числовые элементы управления дают вам размер и единицу отдельно, поэтому они обычно выглядят приклеенными друг к другу, но не всегда.
span>{span>span>{span>CURRENT_ITEMspan>}span>span>}span>Используется в элементах управления повторителем .
span>{span>span>{span>otherspan>.span>SIZEspan>}span>span>}span>
span>{span>span>{span>other_tabletspan>.span>SIZEspan>}span>span>}span>
span>{span>span>{span>other_mobilespan>.span>SIZEspan>}span>span>}span>
Получить значения из других элементов управления, используяVALUE, SIZE, UNIT,или любое именованное значение. Суффиксы доступны_tablet а также _mobile для доступа к отзывчивым данным.
span>{span>span>{span>TOPspan>}span>span>}span>
span>{span>span>{span>LEFTspan>}span>span>}span>
span>{span>span>{span>RIGHTspan>}span>span>}span>
span>{span>span>{span>BOTTOMspan>}span>span>}span>
Это для каждого значения направления контроля размеров .
span>{span>span>{span>URLspan>}span>span>}span> или другие именаИспользуется для доступа к именованным свойствам в «Multiple Controls», которые возвращают массив, например Media Control .
span>{span>span>{span>settingspan>.span>SIZE span>||span> span>5span>span>}span>span>}span>
span>{span>span>{span>a_tabletspan>.span>SIZE span>||span> span>"fallback"span>span>}span>span>}span>
span>{span>span>{span>aspan>.span>SIZE span>||span> bspan>.span>DEFAULTspan>}span>span>}span>
span>{span>span>{span>aspan>.span>URL span>||span> bspan>.span>URLspan>}span>span>}span>
span>{span>span>{span>aspan>.span>VALUE span>||span> a_tabletspan>.span>DEFAULTspan>}span>span>}span>
Используйте запасное значение.
  • Параметр должен быть назван : включить точку и добавить любое свойство сверху.
  • Левая сторона лучше всего работает с элементами управления, которые становятся пустыми при очистке ( на ум приходят слайдер и URL ). Нетронутые адаптивные элементы управления также по умолчанию пусты.
  • Правая сторона может быть жестко заданным числом, строкой или именованным параметром.
  • DEFAULT работает только с теми элементами управления, которые имеют VALUE, Вы можете подключиться к мобильным по умолчанию, если таковые имеются.

Простые примеры

Значение из палитры цветов:

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

Размер с и без единицы:

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

Создать отступы из размеров:

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

Фоновое изображение слайда в слайдере (с использованием повторителя):

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

Ориентация некоторого класса на тело, например , или или даже :.elementor-msie``body.rtl``body:not(.rtl)``.woocommerce

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

Значения из других настроек

Это легко получить значения из других элементов управления, как только вы знаете, как. Если две настройки вносят вклад в одну и ту же вещь, вы можете использовать один и тот же массив селекторов, в дополнение к копанию значений друг друга.

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

Обратите внимание, что это получает значения для определенных устройств, когда цель реагирует. Вот расширенный пример, основанный на Elementor pro:

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

Динамические значения в свойствах CSS

Вместо лучшего примера из реального мира следующее происходит из элемента управления Align с опциями left / center / right . Я знаю, что это не выглядит чисто, но само ядро ​​Elementor использовало это так. Окраина-центр CSS свойство не существует, поэтому он игнорируется браузерами.

// Somewhere else $sde_selector = '{{WRAPPER}} .sde'; // In a control 'selectors' => [ $sde_selector => 'margin: 0 auto; margin-{{VALUE}}: 0;' ],

Смысл этого примера – открыть глаза. Как видите, динамические значения также могут формировать имена свойств.

Вы можете повторно использовать селекторы, помещая их в переменную, особенно если они длинные. Однако вы не можете использовать значения из других настроек в селекторной части CSS, только в объявлении !

(!) Словарь селекторов

Лучшей альтернативой вышеупомянутой странности является недокументированный Святой Грааль, selectors_dictionaryсобственность. В двух словах, это как оператор переключения для селекторов! Если значение элемента управления X, используйте Z вместо. Это невероятно полезно, когда CSS, который вы хотите написать, не имеет ничего общего с опциями вашего контроля.

'selectors_dictionary' => [ 'left' => 'margin-right: auto', 'center' => 'margin: 0 auto', 'right' => 'margin-left: auto', ], 'selectors' => [ '{{WRAPPER}} .sde' => '{{VALUE}}', ]

Вот и все. Единственное предостережение в том, что оно переопределяет переменную фигурных скобок, и вы больше не можете использовать исходное значение (даже в самом словаре). Если бы у вас была другая пара селектор-объявление, которая основывалась на начальном значении, у вас были бы проблемы:{{VALUE}}

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

Неправильное использование приводит к такой мерзости, как transform-origin: margin: 0 auto 0; вместо оригинала transform-origin: center 0;, так что будьте осторожны . Однако нет необходимости отображать все возможные значения!

Конечно, вы все еще можете использовать словарь селекторов для перевода только значений CSS в объявлении, таких как:

'selectors_dictionary' => [ 'top' => 'flex-start', 'middle' => 'center', 'bottom' => 'flex-end', ], 'selectors' => [ '{{WRAPPER}} .elementor-price-table__currency' => 'align-self: {{VALUE}}', ],

Или используйте его для нескольких объявлений, расширенных от параметров одного слова:

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

Не забывайте переменные CSS и calc!

В программировании мне нравится то, что это похоже на головоломку. Прежде чем отказаться от селекторов в пользу написания более сложного кода для обработки значений , подумайте еще раз. Почти все можно решить с помощью инструментов, которые я здесь представляю. Особенно, если вы помните, что помимо использования динамических значений селекторов в Elementor, вы можете:

Подобная комбинация позволила мне создать один слайдер для управления двумя разными вещами, в зависимости от значения другого параметра

Следующее определяет переменную CSS, и это из ползунка Scale% :

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

Я использую эту переменную CSS в двух местах. Одним из них является Scale обрезанный переключатель, который имитирует переключение между двумя селекторами. Переменная передается другому (для использования Gap , см. Это позже). Когда переключатель включен:

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

Существует скрытый элемент управления, который зависит от того, выключен ли переключатель, и содержит аналогичное объявление, но с другим селектором (обратите внимание на это).

'condition' => [ 'scale_the_cropped!' => 'cropped' ], 'selectors' => [ '{{WRAPPER}} .sde svg' => 'transform: scale(var(--sde-scale-percentage)) scale(0.01);' ],

Кроме того, параметр Gap имеет следующее:

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

Ну вот, калькуляция с переменной, у которой даже есть запасной вариант ! Разрыв означает , что некоторое дополнительное пространство выше и ниже элемент (с дополнением незначащей информации ). Но если преобразование масштабируется так, некоторая математика должна противодействовать корректировке. Уравнение удваивает разрыв для чего-то, что в половине размера. Если не масштабировать все это, это не нужно, следовательно, запасной вариант (100/100).

Штабелирование преобразований

Вы можете спросить, почему переменная, почему двойная шкала? Я хотел дать пользователям обычный слайдер 0-100, поэтому значение является заданным. Должен быть способ разделить его на 100. Изначально это выглядело так:

transform: scale(calc(var(--sde-scale-percentage) / 100));

Но Edge не поддерживает трансформации, облом. Мы получаем тот же эффект, складывая преобразования одного типа, так как браузеры выполняют их последовательно.calc()

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

А это просто деление на 100.scale(0.01)

Резюме

При разработке SVG Divider для Elementor я полагался на селекторы, чтобы свести к минимуму количество настроек, которые визуально перезагружают или повторно запускают виджет в живом редакторе . Посмотрите другие примеры того, как они работают в реальной жизни, или, как всегда, изучите код Elementor. Для моего исследования я отсканировал около тысячи вариантов использования «селекторов» как в профессиональном, так и в бесплатном режиме. Кроме того, я пошел на их Github, чтобы понять более продвинутые части, которые они даже не используют. Итак, я надеюсь, что эта статья охватывает все.

Соответствующий исходный файл Elementor:

  1. Факир / ядро ​​/ файлы / CSS / base.php
  2. Ищите метод.add_control_rules()

К настоящему времени вы должны быть знакомы с селекторами в элементах управления Elementor. Если вы воспринимаете эту концепцию как головоломку и задумываетесь, вы найдете решения, которые не требуют никакого другого кода. Не стесняйтесь делиться своими мыслями и вопросами в комментариях ниже!

Источник записи: https://letswp.io

Связанные записи
PageSpeed InsightsWordPressПлагиныПолезные сайты

Как использовать домен без файлов cookie в WordPress? (Полное руководство)

GoogleGoogle AnalyticsGoogle ChromePageSpeed InsightsWordPressПолезные сайты

60 лучших бесплатных инструментов SEO [100% бесплатно] - от Moz Блога

WEBWordPress

Как добавить «Режим чтения» в ваши сообщения на блоге

WordPressПлагины

Как сделать резервную копию вашего сайта WordPress с плагином BackupBuddy