Поправяне на конфликти между теми с Awesome и Bootstrap в плъгина за подсказки на WordPress, как да използвате подсказки с font-awesome – Версия 35.8.8 вече налична

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

1: Разрешен е конфликтът между темата и Bootstrap рамката, включена в подсказките на WordPress:

Здравейте, екип за поддръжка,
Първо: огромни благодарности отново за невероятно бързото реагиране и работата през нощта.
С версия 35.8.8 почти всичко е наред от моя страна:

Страница с поръчки на WooCommerce → PHP предупрежденията изчезнаха ✅

Salient → Административен панел за типография → вече не е счупен ✅

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

Има само една регресия, която се появи веднага след актуализацията до 35.8.8:

На началната страница мобилният заглавен/геройски макет е счупен (блокът с менюто/заглавието се измести и разстоянието е неправилно).

Това вече беше поправено в предишната версия, но с 35.8.8 отново е обратно.

Отново, благодаря ви много за неуморната работа и супер бързите отговори — наистина оценявам колко гъвкави и полезни сте!

С уважение,

Разрешаваме проблема за потребителя на подсказки и отговорихме:

Здравейте

Надявам се това съобщение да ви намери в добро здраве и да имате щастливи дни с вашето семейство 

Извинявайте за проблема, проверихме кодовете на темата и нашия плъгин, също така тестваме този проблем на различни резолюции и в крайна сметка открихме, че е причинен от конфликт между Bootstrap и темата. Решението е просто, моля, отворете глобалния панел за настройки на подсказките и деактивирайте опцията: „Активиране/Деактивиране на Bootstrap CSS, за да избегнете конфликти с темата?“. От наша страна установихме, че всичко работи добре 

Моля, направете тест и дайте ни обратна връзка? Ако има някакъв проблем, не се колебайте да ни кажете, ще го разрешим възможно най-скоро 

Благодаря, желая ви благословен ден с вашите близки 

С най-добри пожелания,

Поддръжка на 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 по следния начин:

Зареждаме файла admin.css за плъгина за подсказки на WordPress в областта 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 Tooltips също използваха 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), за да подобрят функционалността, като например ефекти на показване и скриване.