Виправлення конфліктів теми з Awesome і Bootstrap у плагіні WordPress Tooltips, як використовувати підказки font-awesome – Версія 35.8.8 тепер доступна Опубліковано 15 жовтня 2025 року автором WordPress Tooltips Опубліковано в Документації плагіна WordPress Tooltip — Немає коментарів ↓

Привіт, дорогі користувачі плагіна WordPress Tooltip, сподіваюся, це повідомлення застане вас у доброму здоров’ї, і ви насолоджуєтеся чудовими днями з вашою родиною. Ми отримали запит від чудового користувача WordPress Tooltip, який повідомив про конфлікт CSS з їхньою темою у плагіні WordPress Tooltips. Наш розробник WordPress перевірив тему і виявив, що вона конфліктує з Bootstrap і Font Awesome, які використовуються в підказках, серед іншого. Щоб вирішити цю проблему для нашого цінного користувача підказок, наш розробник WordPress Tooltips випустив нову версію: WordPress Tooltips Pro Plus 35.8.8.

1: Виправлено конфлікт між темою та фреймворком Bootstrap, включеним у WordPress tooltip:

Привіт, команда підтримки,
По-перше: величезне спасибі ще раз за неймовірно швидкий відгук і роботу вночі.
З версією 35.8.8 майже все в порядку з мого боку:

Сторінка замовлень WooCommerce → PHP-попередження зникли ✅

Salient → Панель адміністратора типографіки → більше не зламана ✅

Соціальні іконки в заголовку/футері → виглядають добре ✅

Є лише одна регресія, яка з'явилася відразу після оновлення до 35.8.8:

На головній сторінці мобільний заголовок/геройський макет зламаний (блок меню/заголовка зміщується, а відстань порушується).

Це вже було виправлено в попередній версії, але з 35.8.8 це повернулося.

Ще раз дякую вам за вашу невтомну роботу та надшвидкі відповіді — я справді ціную вашу гнучкість і допомогу!

З найкращими побажаннями,

Ми вирішили проблему для користувача підказок і відповіли:

Привіт

Сподіваюся, це повідомлення застане вас у доброму здоров'ї та щасливими днями з вашою родиною 

Вибачте за проблему, ми перевірили коди теми та нашого плагіна, ми також протестували цю проблему на різних роздільних здатностях і врешті-решт виявили, що це було викликано конфліктом між Bootstrap і темою. Рішення просте, будь ласка, відкрийте панель глобальних налаштувань підказок і вимкніть опцію: “Увімкнути / Вимкнути CSS Bootstrap, щоб уникнути конфліктів з темою?” На нашій стороні ми виявили, що все працює добре 

Чи могли б ви провести тест і дати нам зворотний зв'язок? Якщо виникнуть будь-які проблеми, будь ласка, не соромтеся повідомити нам, ми вирішимо це для вас якомога швидше 

Дякую, бажаю вам благословенного дня з вашими близькими 

З найкращими побажаннями,

Підтримка WordPress Tooltips

2: Сторінка замовлень WooCommerce: кілька PHP-попереджень все ще з’являються під розділом деталей замовлення (пов’язані з post_type, що дорівнює null):

Готово, ми переписали наші коди так, щоб вирішити цю проблему:

if (isset($post->post_type)) {

if ($post->post_type == ‘tooltips’) { add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Показати витяг у спливаючій підказці?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }

Тепер це працює добре

3: Панель типографіки Salient: інтерфейс адміністратора під Salient → Типографіка стає зламаним і неправильно вирівняним, коли активний WordPress Tooltips Pro.

Готово, ми переглянули код основної теми і виявили, що він містить клас .tooltip, який конфліктує з класом .tooltips у нашому файлі admin.css. Ми переписали наш плагін WordPress Tooltips таким чином:

Завантажити файл admin.css для плагіна WordPress Tooltips у зоні wp-admin лише тоді, коли поточний екран належить плагіну.

Коди:

if (isset($_GET[‘post_type’]))
{
$tooltips_admin_post_type_check = sanitize_text_field($_GET[‘post_type’]);
if ($tooltips_admin_post_type_check === ‘tooltips’)
{
wp_enqueue_style(‘tooltips_pro_admin_css’, plugin_dir_url(__FILE__) . ‘asset/css/admin/admin.css’);
}
}

Тепер це працює добре 

4: Соціальні іконки: іконки Font Awesome у меню та футері (соціальні посилання) все ще відображаються неправильно або як порожні коробки.

Готово, у темі Salient ми виявили, що вони завантажують свої скрипти пізно так:

add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );

Ми переписали наш плагін, щоб завантажити Font Awesome пізно, щоб уникнути конфліктів з іншими темами або плагінами:

add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);

Таким чином, всі коди в темі Salient будуть виконані першими, наші коди останніми — виклик завантаження Font Awesome.

Тепер це працює добре 

Тема користувача використовувала Font Awesome 6.5, а наші Font Awesome Tooltips також використовували Font Awesome 6.4 у WordPress Tooltips Pro Plus 35.8.8. Ми оновили Font Awesome tooltips, щоб використовувати останню версію: Font Awesome 7.1. Що таке Font Awesome?

Font Awesome — це популярний набір іконок і веб-шрифт, який надає величезну колекцію масштабованих векторних іконок і соціальних логотипів. Він дозволяє розробникам легко впроваджувати високоякісні іконки у свої веб-сайти та додатки без необхідності у файлах зображень. Ключові особливості Font Awesome:

Масштабовані іконки: Оскільки іконки Font Awesome є векторними, їх можна масштабувати до будь-якого розміру без втрати якості, що робить їх ідеальними для адаптивних дизайнів.
Сумісність з усіма браузерами: Font Awesome працює безперебійно в усіх сучасних веб-браузерах.
Легка інтеграція: Розробники можуть легко інтегрувати Font Awesome у свої проекти, використовуючи простий тег <link> або встановлюючи його через менеджери пакетів, такі як npm або Yarn.
Налаштування: Іконки можна стилізувати за допомогою CSS, що дозволяє змінювати колір, розмір, обертання та багато іншого, щоб відповідати вимогам дизайну веб-сайту.
Доступність: Іконки Font Awesome можна зробити доступними через правильні HTML-атрибути, що забезпечує їх використання з екранними зчитувачами.
Регулярні оновлення: Набір інструментів часто оновлюється новими іконками, що покращує його бібліотеку з часом.

Чому користувачі люблять Font Awesome:

Широкий вибір: Font Awesome пропонує тисячі іконок, що охоплюють численні категорії, надаючи користувачам безліч варіантів для пошуку ідеальної іконки для будь-якого застосування.
Простота: Синтаксис використання Font Awesome є простим, що робить його легким для розробників усіх рівнів.
Продуктивність: Оскільки це набір іконок на основі шрифтів, Font Awesome зазвичай завантажується швидше, ніж традиційні іконки зображень, що сприяє покращенню продуктивності веб-сайту.
Підтримка спільноти: Завдяки великій спільноті користувачів і всебічній документації розробники можуть легко знайти підтримку, навчальні посібники та приклади.
Узгоджений стиль: Усі іконки мають єдиний стиль, що допомагає підтримувати візуальну узгодженість у веб-додатках.
Безкоштовні та платні варіанти: Font Awesome пропонує як безкоштовні, так і преміум-версії, що дозволяє користувачам вибирати відповідно до своїх потреб і бюджету.

Висновок

Font Awesome став популярним рішенням для багатьох розробників завдяки своїй універсальності, простоті використання та великій бібліотеці іконок. Незалежно від того, чи створюєте ви простий веб-сайт, чи складний веб-додаток, Font Awesome надає інструменти, необхідні для покращення дизайну інтерфейсу та поліпшення користувацького досвіду. Що таке Font Awesome Tooltips?

Font Awesome Tooltips — це функція, яка дозволяє розробникам створювати інформаційні бокси або підказки, які з’являються при наведенні, використовуючи іконки Font Awesome, включені в версію wordpress tooltips pro plus 19.9.8. Ці підказки надають додатковий контекст або інформацію про елемент на веб-сторінці, коли користувач наводить на нього курсор. Ключові особливості Font Awesome Tooltips:

Іконки: Ви можете легко впроваджувати іконки з бібліотеки Font Awesome у свої підказки, покращуючи візуальну привабливість і користувацький досвід.
Налаштування: Підказки можна стилізувати та налаштовувати, щоб відповідати дизайну вашого веб-сайту, дозволяючи вносити зміни в колір, розмір і позиціювання.
Адаптивність: Вони часто добре адаптуються до різних розмірів екранів, що робить їх підходящими як для настільних, так і для мобільних інтерфейсів.
Доступність: Правильно реалізовані підказки можуть покращити доступність, надаючи додаткову інформацію без захаращення інтерфейсу.
Підтримка JavaScript: Багато реалізацій підказок використовують JavaScript або CSS-фреймворки (такі як Bootstrap) для покращення функціональності, наприклад, ефектів показу та приховування.

[ ttfa tooltip_id="13" set="fas" icon="fa-question-circle" size="2x" color="#9ee2c6" ]

Цей шорткод Font Awesome tooltip дозволить вам відобразити підказку у вашому пості.

Більше шорткодів для WordPress tooltips можна знайти в нашому детальному документі про шорткоди; tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/

Крок 2: Перегляньте вашу підказку

Як тільки ви додали шорткод, перейдіть на фронт-енд вашого поста WordPress. Ви побачите чудову іконку питання, яка виглядає ось так:

Іконка підказки Font Awesome

Коли користувачі наведуть курсор на іконку питання, з’явиться спливаюча підказка, що надає більше деталей:

Спливаюча підказка Font Awesome

Крок 3: Налаштуйте вашу підказку

Ви маєте можливість налаштувати розмір та колір ваших іконок Font Awesome. Наприклад, якщо ви хочете зробити іконку питання більшою, просто змініть параметр розміру з 2x на 3x, 4x або навіть більше! Ось приклад: вікно спливаючої підказки font awesome на фронт-енді

Щоб змінити колір, змініть параметр кольору на будь-яке значення в шістнадцятковій системі, яке вам подобається, наприклад, #cccccc або #eeeeee.

Крок 4: Виберіть стиль вашої іконки

Ви також можете відрегулювати стиль вашої підказки Font Awesome, змінивши параметр набору:

• fas — Солідні іконки
• far — Звичайні іконки
• fab — Брендові іконки

Швидке резюме того, що вам потрібно знати:

• tooltip_id: Це ID підказки, яку ви створили в редакторі підказок WordPress.
• set: Виберіть між солідними (fas), звичайними (far) або брендовими (fab) іконками.
• icon: Ми використовували іконку питання, але пам’ятайте, що доступно понад 1,588 приголомшливих іконок на вибір!
• size: Не соромтеся збільшувати розмір до 3x, 4x тощо, залежно від ваших дизайнерських уподобань.
• color: Налаштуйте колір, щоб він відповідав вашому сайту, наприклад, #eeeeee.

Тепер ви готові покращити ваші пости WordPress за допомогою приємних Font Awesome tooltips! Щасливого блогування!

Висновок:

Font Awesome включає понад 1,500 високоякісних іконок, які можуть бути налаштовані за розміром, кольором та стилем за допомогою CSS. Ці іконки призначені для крос-браузерної сумісності. Font Awesome Tooltips є корисним компонентом для покращення взаємодії з користувачами та надання корисної інформації в привабливій візуально формі на веб-сторінках.

Якщо потрібно внести зміни, будь ласка, не соромтеся повідомити нам, ми докладемо всіх зусиль, щоб завершити це якомога швидше (зараз у нас 01:52 ранку).

markdown

Якщо все працює добре, будь ласка, змініть доступ до вашого тестового сайту. Ми ніколи не входили у ваш обліковий запис, щоб захистити ваші приватні дані та особисту інформацію 

Дякуємо, бажаємо вам благословенного дня з вашими близькими 

З найкращими побажаннями,