Оптимизированная загрузка CSS / JAVASCRIPT для плагина WordPress Tooltips, выпущен плагин WordPress Tooltips Pro Plus 36.5.8

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

Привет, команда Tooltips,
Спасибо за обновление 35.5.8 и за быструю поддержку ранее. Я использую Tooltips Pro Plus на сайте, который работает на теме Salient (с WPBakery).

Причина: Подсказки загружают Bootstrap/Awesome/reset CSS + admin.css на фронтенде, что перезаписывает адаптивную сетку Salient и стек FA.
Конфликт с Font Awesome (тема/стек использует FA6, плагин подставил другую версию FA; иконки соцсетей стали пустыми коробками / неправильными глифами).

Решение A:

Мы переписали наш плагин подсказок WordPress следующим образом:

  1. Просканируйте каждый загруженный/завершенный файл стиля (handle + scr) на наличие любых строк bootstrap/font-awesome.
  2. Если тема или другой плагин уже загрузили его, процедура сразу выходит, плагин подсказок WordPress не загрузит пакеты bootstrap/font-awesome.
  3. В противном случае плагин подсказок WordPress загружает пакеты bootstrap/font-awesome самостоятельно.

Наш код выглядит следующим образом:

$enableBootstrapCSS = get_option('enableBootstrapCSS');
if ($enableBootstrapCSS == 'NO')
{
}
else
{

global $wp_styles;
$bs_handles = array(
‘bootstrap’,
‘bootstrap-css’,
‘bootstrap-style’,
‘bootstrap5’,
‘bootstrap-5’,
‘bootstrap4’,
‘bootstrap-4’,
‘tb-bootstrap’,
‘theme-bootstrap’,
‘font-enableBootstrapCSS’,
‘enableBootstrapCSS’,
);
foreach ( $bs_handles as $hdl ) {
if ( wp_style_is( $hdl, ‘registered’ ) || wp_style_is( $hdl, ‘done’ ) ) {
return;
}
}

$needles = array( ‘bootstrap’, ‘bootstrap.min.css’ );
foreach ( array_merge( $wp_styles->done, $wp_styles->queue ) as $done_or_queued ) {
$obj = $wp_styles->registered[ $done_or_queued ] ?? false;
if ( ! $obj ) {
continue;
}
$src = $obj->src ?? “”;
foreach ( $needles as $n ) {
if ( stripos( $src, $n ) !== false ) {
return;
}
}
}

wp_enqueue_script(‘bootstrap’, plugin_dir_url( __FILE__ ) . ‘js/bootstrap/bootstrap.min.js’, array(‘jquery’), ‘5.0’, true);

Следующий запрос на функцию:

Подсказки выходят за пределы на мобильных устройствах (коробка с подсказкой вылазила за пределы экрана у краев; стрелка также накладывалась на контент).

Что я сделал, чтобы это стабилизировать: A) Остановил CSS плагина, который не должен загружаться на фронтенде.
Я удалил/зарегистрировал только те ресурсы Tooltips, которые вызвали конфликты (admin.css, skin ionRangeSlider, bootstrap/awesome/reset). Минимальный целевой фрагмент:

Решение B:

Мы внимательно проверили код в плагине подсказок WordPress. В предыдущих версиях мы загружали только admin.css и skin ionRangeSlider в административной части, обеспечивая отсутствие их загрузки на фронте. Код организован следующим образом:

add_action('admin_head', 'tooltips_pro_admin_css');

add_action(‘admin_head’, ‘tooltips_admin_rangeslider_css_js’);

Следующий запрос на функцию:
B) Загружать FA6 ровно один раз (без дубликатов FA на фронтенде)
Это решило проблемы с иконками (включая старые классы fa fa-* благодаря v4-shims).

Решение C:

Эта проблема была решена в разделе Решение A.

Запрос на функцию:
Что помогло бы, если вы это реализуете в плагине.

Изоляция ресурсов / опции:

  • Не загружать административный CSS на фронтенде (если (is_admin()) охраны).
    Готово.
  • Сделать Bootstrap/Font Awesome необязательными (выключено по умолчанию). Предоставьте 3 варианта в настройках:

    a) Не загружать ни один набор иконок (используйте набор темы),
    b) Загрузить FA6 (core/brands/solid),
    c) Только legacy shim для старого fa fa-.
    Готово, вы используете FA6.5, плагин подсказок WordPress использует FA6.4.

  • Избегать загрузки стилей ionRangeSlider на фронтенде, если слайдер фактически не отображается.
    Готово.
  • Пространственное имя и область CSS
    Добавьте ко всем селекторам плагина уникальный корень (например, .tooltips-pro …) и избегайте общих селекторов, таких как .row, .col, .btn, i, .icon, strong на глобальном уровне.
    Готово, мы никогда не используем общие селекторы, такие как .row, .col, .btn, i, .icon, strong на глобальном уровне.
  • Если вы должны стилизовать классы, похожие на Bootstrap, ограничьте их: .tooltips-pro .btn { … } а не .btn { … }.
    Готово.
  • Загружайте только по требованию
    Добавляйте ресурсы фронтенда только тогда, когда подсказка фактически присутствует на странице (сканирование шорткода/содержимого или флага на стороне сервера).

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

Совместимость с Font Awesome:
Если вы поставляете FA, пожалуйста, используйте FA6 и документируйте стек; избегайте впрыска более ранней версии FA вместе с FA6, чтобы избежать несоответствий глифов. Рассмотрите возможность использования inline SVG для ваших иконок UI, чтобы полностью избежать зависимости от FA.
Готово, вы используете FA6.5, плагин подсказок WordPress использует FA6.4.

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

Спасибо, желаю вам благословенного дня с семьей

С уважением,

Поддержка плагина подсказок WordPress

Tagged with:

Leave a Reply

Your email address will not be published. Required fields are marked *

*