Привіт, дорогі користувачі підказок WordPress(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, ionRangeSlider skin, 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 { … }.
Готово. - Завантажуйте лише за потреби
Додайте ресурси фронтенду лише тоді, коли на сторінці фактично присутня підказка (сканування shortcode/вмісту або прапор з боку сервера).
Оскільки плагін підказок WordPress підтримує багато видів ефектів підказок, наприклад, підказки для елементів меню, використання ALT зображення як підказок до зображень, підказки для полів контактних форм тощо, фактично, зараз підказки працюють для будь-якого елемента на сторінці… оскільки ми не знаємо, як користувачі використовують підказки на сторінці WordPress, ми поки не можемо знайти рішення для цього запиту, вибачте.
Сумісність з Font Awesome:
Якщо ви постачаєте FA, будь ласка, використовуйте FA6 та документуйте стек; уникайте впорскування старшої версії FA разом з FA6, щоб уникнути невідповідностей гліфів. Розгляньте використання inline SVG для ваших ікон UI, щоб зовсім уникнути будь-якої залежності від FA.
Готово, ви використовуєте FA6.5, плагін підказок WordPress використовує FA6.4.
Дякуємо за чудові пропозиції, якщо у вас є ще якісь запити на функції, не соромтеся зв’язатися з нами, ми дуже раді їх реалізувати для вас
Дякую, бажаю вам благословенного дня з родиною
З повагою,
Підтримка плагіна підказок WordPress
Leave a Reply