Cześć, drodzy użytkownicy wtyczki WordPress Tooltip, mam nadzieję, że ta wiadomość zastaje Was w dobrym zdrowiu i że spędzacie wspaniałe dni z rodziną. Otrzymaliśmy zgłoszenie od niesamowitego użytkownika WordPress Tooltip, który zgłosił konflikt CSS z ich motywem w wtyczce WordPress Tooltips. Nasz programista WordPress sprawdził motyw i stwierdził, że koliduje on z Bootstrapem i Font Awesome, które są używane przez tooltipy, między innymi. Aby rozwiązać problem dla naszego cenionego użytkownika tooltipów, nasz programista WordPress Tooltips wydał nową wersję: WordPress Tooltips Pro Plus 35.8.8.
1: Rozwiązano konflikt między motywem a frameworkiem Bootstrap zawartym w tooltipach WordPress:
Cześć Zespole Wsparcia,
Przede wszystkim: ogromne dzięki za niesamowicie szybkie reakcje i pracę w późnych godzinach.
W wersji 35.8.8 prawie wszystko działa idealnie z mojej strony:
Strona zamówień WooCommerce → ostrzeżenia PHP zniknęły ✅
Salient → Panel administracyjny typografii → już nie jest uszkodzony ✅
Ikony społecznościowe w nagłówku/stopce → wyglądają dobrze ✅
Jest tylko jedna regresja, która pojawiła się zaraz po aktualizacji do 35.8.8:
Na stronie głównej układ nagłówka/hero na urządzeniach mobilnych jest uszkodzony (blok menu/nagłówka przesuwa się i odstępy są nieprawidłowe).
To już zostało naprawione w poprzedniej wersji, ale w 35.8.8 wróciło.
Jeszcze raz dziękuję za Waszą nieustanną pracę i super szybkie odpowiedzi — naprawdę doceniam, jak elastyczni i pomocni jesteście!
Serdecznie,
Rozwiązaliśmy problem dla użytkownika tooltipów i odpowiedzieliśmy:
Cześć
Mam nadzieję, że ta wiadomość zastaje Cię w dobrym zdrowiu i że spędzasz szczęśliwe dni z rodziną
Przepraszam za problem, sprawdziliśmy kody motywu i naszej wtyczki, przetestowaliśmy ten problem w różnych rozdzielczościach i ostatecznie odkryliśmy, że był spowodowany konfliktem między Bootstrapem a motywem. Rozwiązanie jest proste, proszę otworzyć globalny panel ustawień tooltipów i wyłączyć opcję: „Włącz/wyłącz CSS Bootstrap, aby uniknąć konfliktów z motywem?” Z naszej strony stwierdziliśmy, że wszystko działa dobrze
Czy moglibyście przeprowadzić test i dać nam znać? Jeśli pojawią się jakiekolwiek problemy, nie wahajcie się powiedzieć, rozwiążemy to dla Was tak szybko, jak to możliwe
Dziękuję, życzę błogosławionego dnia z bliskimi
Z poważaniem,
Wsparcie WordPress Tooltips
2: Strona zamówień WooCommerce: kilka ostrzeżeń PHP nadal pojawia się
w sekcji szczegółów zamówienia (związane z post_type będącym null):
Zrobione, przepisaliśmy nasze kody w ten sposób, aby rozwiązać problem:
if (isset($post->post_type))
{
if ($post->post_type == ‘tooltips’)
{
add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Pokaż
fragment w tooltipie?’, ‘wordpress-tooltips’),
‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null);
}
}
Teraz działa dobrze
3: Panel typografii Salient: interfejs administracyjny w Salient →
Typografia staje się uszkodzony i źle wyrównany, gdy WordPress Tooltips
Pro jest aktywny.
Zrobione, przejrzeliśmy kod głównego motywu i stwierdziliśmy, że zawiera klasę .tooltip, która koliduje z klasą .tooltips w naszym pliku admin.css. Przepisaliśmy naszą wtyczkę WordPress Tooltips w ten sposób:
ładujemy plik admin.css dla wtyczki WordPress Tooltips w obszarze wp-admin tylko wtedy, gdy bieżący ekran należy do wtyczki.
Kody:
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’);
}
}
Teraz działa dobrze
4: Ikony społecznościowe: ikony Font Awesome w menu i stopce (linki
społecznościowe) nadal wyświetlają się niepoprawnie lub jako puste
pudełka.
Zrobione, w motywie Salient stwierdziliśmy, że ładują swoje skrypty późno w ten sposób:
add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );
Przepisaliśmy naszą wtyczkę, aby ładować Font Awesome późno, aby uniknąć konfliktów z innymi motywami lub wtyczkami:
add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);
Tak więc wszystkie kody w motywie Salient będą działać najpierw, nasze kody na końcu ładują Font Awesome.
Dlatego wszystkie kody w motywie Salient będą wykonywane z priorytetem, a nasza wtyczka ostatecznie wywoła Font Awesome do załadowania.
Teraz działa dobrze
Motyw użytkownika używał Font Awesome 6.5, a nasze tooltipy Font
Awesome również wykorzystywały Font Awesome 6.4 w WordPress Tooltips Pro
Plus 35.8.8. Zaktualizowaliśmy tooltipy Font Awesome, aby używały
najnowszej wersji: Font Awesome 7.1.
Czym jest Font Awesome?
Font Awesome to popularny zestaw ikon i czcionek internetowych, który
oferuje ogromną kolekcję skalowalnych ikon wektorowych i logo
społecznościowe. Umożliwia programistom łatwe włączenie wysokiej jakości
ikon do swoich stron internetowych i aplikacji bez potrzeby używania
plików graficznych.
Kluczowe cechy Font Awesome:
Skalowalne ikony: Jako ikony wektorowe, ikony Font Awesome można skalować do dowolnego rozmiaru bez utraty jakości, co czyni je idealnymi do responsywnych projektów.
Kompatybilność między przeglądarkami: Font Awesome działa bezproblemowo we wszystkich nowoczesnych przeglądarkach internetowych.
Łatwa integracja: Programiści mogą łatwo zintegrować Font Awesome w swoich projektach za pomocą prostego tagu <link> lub instalując go za pomocą menedżerów pakietów, takich jak npm lub Yarn.
Możliwość dostosowania: Ikony można stylizować za pomocą CSS, co pozwala na zmiany w kolorze, rozmiarze, obrocie i wielu innych, aby dopasować do wymagań projektowych strony internetowej.
Dostępność: Ikony Font Awesome można uczynić dostępnymi dzięki odpowiednim atrybutom HTML, co zapewnia ich użyteczność dla czytników ekranu.
Regularne aktualizacje: Zestaw jest często aktualizowany o nowe ikony, co wzbogaca jego bibliotekę w czasie.
Dlaczego użytkownicy lubią Font Awesome:
Szeroki wybór: Font Awesome oferuje tysiące ikon obejmujących liczne kategorie, co daje użytkownikom wiele możliwości znalezienia idealnej ikony do każdej aplikacji.
Prostota: Składnia używania Font Awesome jest prosta, co ułatwia implementację programistom na każdym poziomie umiejętności.
Wydajność: Jako zestaw ikon oparty na czcionkach, Font Awesome zazwyczaj ładowa się szybciej niż tradycyjne ikony graficzne, co przyczynia się do poprawy wydajności strony internetowej.
Wsparcie społeczności: Z dużą społecznością użytkowników i obszerną dokumentacją, programiści mogą łatwo znaleźć wsparcie, samouczki i przykłady.
Spójny styl: Wszystkie ikony mają jednolity styl, co pomaga utrzymać wizualną spójność w aplikacjach internetowych.
Opcje darmowe i płatne: Font Awesome oferuje zarówno wersje darmowe, jak i premium, co pozwala użytkownikom wybierać w zależności od ich potrzeb i budżetu.
Podsumowanie
Font Awesome stał się rozwiązaniem, po które sięga wielu programistów
ze względu na swoją wszechstronność, łatwość użycia i rozbudowaną
bibliotekę ikon. Niezależnie od tego, czy budujesz prostą stronę
internetową, czy złożoną aplikację internetową, Font Awesome dostarcza
narzędzi potrzebnych do poprawy projektu UI i poprawy doświadczeń
użytkowników.
Czym są Font Awesome Tooltips?
Font Awesome Tooltips to funkcja, która pozwala programistom tworzyć
informacje lub wskazówki, które można wyświetlić po najechaniu kursorem
na ikony Font Awesome, zawarte w wersji wordpress tooltips pro plus
19.9.8. Te tooltipy dostarczają dodatkowego kontekstu lub informacji o
elemencie na stronie internetowej, gdy użytkownik na niego najedzie.
Kluczowe cechy Font Awesome Tooltips:
Ikony: Możesz łatwo włączyć ikony z biblioteki Font Awesome do swoich tooltipów, co zwiększa atrakcyjność wizualną i doświadczenie użytkownika.
Dostosowanie: Tooltipy można stylizować i dostosowywać do projektu Twojej strony internetowej, co pozwala na zmiany w kolorze, rozmiarze i położeniu.
Responsywność: Zazwyczaj dobrze dostosowują się do różnych rozmiarów ekranów, co czyni je odpowiednimi zarówno dla interfejsów desktopowych, jak i mobilnych.
Dostępność: Odpowiednio zaimplementowane tooltipy mogą poprawić dostępność, dostarczając dodatkowe informacje bez zagracania interfejsu użytkownika.
Wsparcie JavaScript: Wiele implementacji tooltipów wykorzystuje JavaScript lub frameworki CSS (takie jak Bootstrap), aby zwiększyć funkcjonalność, na przykład efekty pokazywania i ukrywania.
Jak dodać Font Awesome Tooltips w swoim poście WordPress
Tworzenie angażującej treści w postach WordPress stało się łatwiejsze
dzięki Font Awesome tooltips! Wykonaj te proste kroki, aby wzbogacić
swoje posty o piękne ikony, które dostarczają dodatkowych informacji
Twoim czytelnikom.
Krok 1: Utwórz nowy post WordPress
Zacznij od utworzenia nowego posta w WordPressie. W edytorze po prostu wstaw shortcode tooltipa Font Awesome w ten sposób:
[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]
Ten shortcode tooltipa Font Awesome pozwoli Ci wyświetlić tooltip w Twoim poście.
Więcej shortcode’ów tooltipów WordPress można znaleźć w naszym
szczegółowym dokumencie o shortcode’ach tooltipów;
tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/
Krok 2: Podgląd Twojego tooltipa
Gdy dodasz shortcode, przejdź do front-endu swojego posta WordPress. Zobaczysz piękną ikonę okręgu zapytania, która wygląda tak:
Ikona tooltipa Font Awesome
Gdy użytkownicy najedzie na okrąg zapytania, pojawi się okno tooltipa, dostarczając więcej szczegółów:
Okno popup tooltipa Font Awesome
Krok 3: Dostosuj swój tooltip
Masz możliwość dostosowania rozmiaru i koloru swoich ikon Font
Awesome. Na przykład, jeśli chcesz, aby ikona okręgu zapytania była
większa, po prostu zmień parametr rozmiaru z 2x na 3x, 4x lub nawet
większy! Oto przykład:
okno popup tooltipa font awesome na froncie
Aby zmienić kolor, zmodyfikuj parametr koloru na dowolną wartość hex, którą preferujesz, na przykład #cccccc lub #eeeeee.
Krok 4: Wybierz styl swojej ikony
Możesz również dostosować styl swojego tooltipa Font Awesome, zmieniając parametr set:
fas — Ikony solidne
far — Ikony regularne
fab — Ikony marki
Szybkie podsumowanie tego, co musisz wiedzieć:
tooltip_id: To jest ID tooltipa, który utworzyłeś w edytorze tooltipów WordPress.
set: Wybierz między ikonami solidnymi (fas), regularnymi (far) lub markowymi (fab).
icon: Użyliśmy ikony okręgu zapytania, ale pamiętaj, że jest ponad 1,588 oszałamiających ikon do wyboru!
size: Śmiało zwiększ rozmiar do 3x, 4x itd., w zależności od preferencji projektowych.
color: Dostosuj kolor, aby pasował do Twojej strony, na przykład #eeeeee.
Teraz jesteś gotowy, aby wzbogacić swoje posty WordPress o urocze tooltipy Font Awesome! Szczęśliwego blogowania!
Podsumowanie:
Font Awesome zawiera ponad 1,500 wysokiej jakości ikon, które można
dostosować pod względem rozmiaru, koloru i stylu za pomocą CSS. Te ikony
są zaprojektowane tak, aby były kompatybilne z różnymi przeglądarkami.
Font Awesome Tooltips to przydatny komponent do poprawy interakcji
użytkownika i dostarczania pomocnych informacji w atrakcyjny wizualnie
sposób na stronach internetowych.
Jeśli potrzebujesz, abyśmy coś zmienili, nie wahaj się powiedzieć, postaramy się zrobić to jak najszybciej (jest 01:52 w nocy).
Jeśli wszystko działa dobrze, proszę zmień dostęp do swojej strony
testowej, nigdy nie logowaliśmy się na Twoje konto, aby chronić Twoje
prywatne dane i informacje osobiste
Dziękuję, życzę błogosławionego dnia z bliskimi
Z poważaniem,
Wsparcie WordPress Tooltips
