“Исправление конфликтов тем с 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 Tooltips:
Привет, команда поддержки,
Прежде всего: огромное спасибо за невероятно быструю реакцию и работу в позднее время.
С 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 в последнюю очередь.
Поэтому весь код в теме Salient будет выполняться с приоритетом, и наш плагин в конечном итоге вызовет загрузку Font Awesome.
Теперь это работает хорошо
Тема пользователя использовала Font Awesome 6.5, а наши подсказки Font Awesome также использовали Font Awesome 6.4 в WordPress Tooltips Pro Plus 35.8.8. Мы обновили подсказки Font Awesome, чтобы использовать последнюю версию: 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) для улучшения функциональности, например, для эффектов показа и скрытия.
Как добавить Font Awesome Tooltips в ваш пост WordPress
Создание увлекательного контента в ваших постах WordPress стало проще с помощью подсказок Font Awesome! Следуйте этим простым шагам, чтобы улучшить ваши посты красивыми значками, которые предоставляют дополнительную информацию вашим читателям. Шаг 1: Создайте новый пост WordPress
Начните с создания нового поста в WordPress. В редакторе просто вставьте шорткод подсказки Font Awesome следующим образом:
[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]
Этот шорткод подсказки Font Awesome позволит вам отобразить подсказку в вашем посте.
Больше шорткодов 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, изменив параметр set:
fas — Сплошные значки
far — Обычные значки
fab — Брендовые значки
Краткое резюме того, что вам нужно знать:
tooltip_id: Это ID подсказки, которую вы создали в редакторе подсказок WordPress.
set: Выберите между сплошными (fas), обычными (far) или брендированными (fab) значками.
icon: Мы использовали значок вопросительного круга, но помните, что у вас есть более 1,588 потрясающих значков на выбор!
size: Не стесняйтесь увеличивать размер до 3x, 4x и т.д., в зависимости от ваших предпочтений в дизайне.
color: Настройте цвет, чтобы он соответствовал вашему сайту, например, #eeeeee.
Теперь вы готовы улучшить ваши посты WordPress с помощью замечательных подсказок Font Awesome! Счастливого блоггинга! Заключение:
Font Awesome включает более 1,500 высококачественных значков, которые можно настраивать по размеру, цвету и стилю с помощью CSS. Эти значки разработаны для кроссбраузерной совместимости. Подсказки Font Awesome являются полезным компонентом для улучшения взаимодействия с пользователем и предоставления полезной информации визуально привлекательным образом на веб-страницах.
Если вам нужно что-то изменить, пожалуйста, не стесняйтесь сообщить нам, мы постараемся сделать это как можно скорее (сейчас 01:52 ночи).
Если все работает хорошо, пожалуйста, измените доступ к вашему тестовому сайту, мы никогда не входили в вашу учетную запись, чтобы защитить ваши личные данные и информацию
Спасибо, желаем вам благословенного дня с вашими близкими
С наилучшими пожеланиями,
Поддержка WordPress Tooltips
