Optymalizacja ładowania CSS / JAVASCRIPT dla wtyczki WordPress Tooltips, wydanie wtyczki WordPress Tooltips Pro Plus 35.6.8

Cześć drodzy użytkownicy podpowiedzi WordPress(WordPress tooltip ), mam nadzieję, że ta wiadomość zastaje Was w dobrym zdrowiu i cieszycie się radosnymi dniami w gronie bliskich. Ostatnio otrzymaliśmy prośbę o nową funkcję od utalentowanego dewelopera WordPress, który zaproponował nam fantastyczne sugestie. Nasz zespół zajmujący się rozwojem wtyczek pracuje nieustannie, aby jak najszybciej wdrożyć te prośby:

Cześć zespole Tooltips,
Dziękuję za aktualizację 35.5.8 oraz za szybką pomoc wcześniej. Używam Tooltips Pro Plus na stronie działającej na motywie Salient (z WPBakery).

Przyczyna: Podpowiedzi załadowały Bootstrap/Awesome/reset CSS + admin.css na frontend, co nadpisało responsywną siatkę Salient i stos FA.
Kolizja z Font Awesome (motyw/stos używa FA6, wtyczka wstrzyknęła inną wersję FA; ikony społecznościowe stały się pustymi prostokątami / niewłaściwymi glyphami).

Rozwiązanie A:

Przerobiliśmy naszą wtyczkę podpowiedzi WordPress w następujący sposób:

1: Skanuj każdą załadowaną/zrealizowaną arkusz stylów (handle + scr) w poszukiwaniu dowolnego ciągu bootstrap/font-awesome

2: Jeśli motyw lub inna wtyczka już go załadowała, rutyna natychmiast się poddaje, wtyczka podpowiedzi WordPress nie załadowała pakietów bootstrap/font-awesome.

3: W przeciwnym razie wtyczka podpowiedzi WordPress sama ładuje pakiety bootstrap/font-awesome.

Nasz kod wygląda tak:

$enableBootstrapCSS = get_option(‘enableBootstrapCSS’);
if ($enableBootstrapCSS ==NO)
{
}
else
{

global $wp_styles;
$bs_handles = array(
‘bootstrap’,
‘bootstrapcss’,
‘bootstrapstyle’,
‘bootstrap5’,
‘bootstrap5,
‘bootstrap4’,
‘bootstrap4,
‘tbbootstrap’,
‘themebootstrap’,
‘fontenableBootstrapCSS’,
‘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);

Następna prośba o funkcję:

Podpowiedzi wykraczają poza mobilne (okno podpowiedzi wyszło poza widok w pobliżu krawędzi; strzałka również przycięta nad treścią).

Co zrobiłem, aby to ustabilizować: A) Zatrzymałem CSS wtyczki, który nie powinien ładować się na frontendzie.
Usunąłem/zarejestrowałem tylko zasoby Tooltips, które powodują konflikty (admin.css, ionRangeSlider skin, bootstrap/awesome/reset). Minimalny, ukierunkowany fragment:

Rozwiązanie B:

Dokładnie przeglądnęliśmy kod wtyczki podpowiedzi WordPress. W poprzednich wersjach ładaliśmy tylko admin.css i skin ionRangeSlider w obszarze administratora, zapewniając, że nie są one ładowane na froncie. Kod jest zorganizowany w następujący sposób:

add_action(‘admin_head’, ‘tooltips_pro_admin_css’);

add_action(‘admin_head’, ‘tooltips_admin_rangeslider_css_js’);

Następna prośba o funkcję:
B) Ładowany FA6 dokładnie raz (brak duplikatów FA na frontendzie)
To rozwiązało problemy z ikonami (w tym stare klasy fa fa-* dzięki v4-shims).

Rozwiązanie C:

Ten problem został rozwiązany w sekcji Rozwiązanie A.

Prośba o funkcję:
Co by pomogło, gdybyś to wdrożył we wtyczce.

Izolacja zasobów / opcje:

  • Nie ładuj administracyjnych CSS na frontend (jeśli (is_admin()) zabezpieczenia).
    Zrobione.
  • Spraw, aby Bootstrap/Font Awesome były opcjonalne (domyślnie wyłączone). Zapewnij 3 opcje w ustawieniach:

    a) Nie ładuj żadnego zestawu ikon (użyj zestawu z motywu),
    b) Ładuj FA6 (core/brands/solid),
    c) Tylko legacy shim dla starego fa fa-.
    Zrobione, używasz FA6.5, wtyczka podpowiedzi WordPress używa FA6.4.

  • Unikaj ładowania stylów ionRangeSlider na frontend, chyba że suwak jest faktycznie renderowany.
    Zrobione.
  • Przestrzeń nazw i zakres CSS
    Prefiksuj wszystkie selektory wtyczki pod unikalnym korzeniem (np. .tooltips-pro …) i unikaj ogólnych selektorów, takich jak .row, .col, .btn, i, .icon, strong globalnie.
    Zrobione, nigdy nie używamy ogólnych selektorów, takich jak .row, .col, .btn, i, .icon, strong globalnie.
  • Jeśli musisz stylizować klasy podobne do Bootstrapa, ogranicz je: .tooltips-pro .btn { … } a nie .btn { … }.
    Zrobione.
  • Ładuj tylko wtedy, gdy jest to potrzebne
    Dodaj zasoby frontendowe tylko wtedy, gdy na stronie faktycznie znajduje się podpowiedź (skanowanie shortcode/tresci lub flaga po stronie serwera).

Ponieważ wtyczka podpowiedzi WordPress obsługuje wiele rodzajów efektów podpowiedzi, na przykład, podpowiedzi dla elementów menu, używanie ALT obrazu jako podpowiedzi obrazów, podpowiedzi dla pól formularza kontaktowego itp., obecnie podpowiedzi działają dla dowolnego elementu na stronie… ponieważ nie mamy sposobu, wiedzieć, jak użytkownicy korzystają z podpowiedzi na stronie WordPress, w tej chwili nie możemy znaleźć rozwiązania dla tej prośby, przepraszam.

Kompatybilność z Font Awesome:
Jeśli dostarczasz FA, używaj FA6 i dokumentuj stos; unikaj wstrzykiwania starszej wersji FA obok FA6, aby zapobiec niezgodności glyph. Rozważ inline SVG dla swoich ikon UI, aby całkowicie uniknąć jakiejkolwiek zależności od FA.
Zrobione, używasz FA6.5, wtyczka podpowiedzi WordPress używa FA6.4.

Dziękujemy za świetne sugestie, jeśli masz jeszcze jakieś prośby o funkcje, nie wahaj się z nami skontaktować, bardzo chętnie je zrealizujemy dla Ciebie

Dziękuję, życzę błogosławionego dnia z rodziną

Z poważaniem,

Wsparcie dla Wtyczki Podpowiedzi WordPress

Tagged with: , , ,

Optimized CSS / JAVASCRIPT Loading for the WordPress Tooltips Plugin, WordPress Tooltips Pro PLus Plugin 35.6.8 Released

Hi dear WordPress tooltip users, I hope this message finds you well and enjoying joyful days with your loved ones.   We recently received a feature request from a talented WordPress developer who offered us some fantastic suggestions. Our dedicated plugin development team has been working tirelessly to implement these requests as quickly as possible:

Hi Tooltips team,
Thanks for the 35.5.8 update and for the quick support earlier. I’m using Tooltips Pro Plus on a site running the Salient theme (with WPBakery).

Cause: Tooltips enqueued Bootstrap/Awesome/reset CSS + an admin.css on the frontend, which overrode Salient’s responsive grid and FA stack.
Font Awesome collision (theme/stack uses FA6, plugin injected another FA; social icons became empty boxes / wrong glyphs).

Solution A:

We have rewritten our WordPress tooltips plugin to address theme conflicts in the following way:

1: Scan every queued / done stylesheet (handle + scr) for any bootstrap string / font-awesome string

2: If a theme or another plugin has already enqueued it, the routine bails out immediately, wordpress tooltips plugin will not load bootstrap / font-awesome packages.

3: Otherwise wordpress tooltips plugin itself loads the bootstrap / font-awesome packages

Our code looks like this::

$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);

Next feature request:

Tooltips overflow on mobile (tooltip box ran off the viewport near the edges; arrow also clipped over content).

What I did to make it stable
A) Stopped plugin CSS that shouldn’t load on the frontend
I dequeue/deregistered only the Tooltips assets that cause conflicts (admin.css, ionRangeSlider skin, bootstrap/awesome/reset). Minimal, targeted snippet:

Solution B:

We have thoroughly reviewed the code in the wordpress tooltips plugin. In previous versions, we only loaded admin.css and the ionRangeSlider skin in the admin area, ensuring that they are not loaded on the front end. The code is structured as follows:

add_action(‘admin_head’, ‘tooltips_pro_admin_css’);

add_action(‘admin_head’, ‘tooltips_admin_rangeslider_css_js’);

Next feature request:
B) Loaded FA6 exactly once (no duplicate FA on frontend)
This resolved the icon issues (including old fa fa-* classes thanks to v4-shims).

Solution C:

This issue has been resolved in Solution A section

 

Feature request:
What would help if you implement it in the plugin

Asset isolation / options

Don’t enqueue admin CSS on the frontend (if ( is_admin() ) guards).
Done

Make Bootstrap/Font Awesome optional (off by default). Provide 3 choices in settings:
> a) Don’t load any icon set (use theme’s),
> b) Load FA6 (core/brands/solid),
> c) Legacy shim only for old fa fa-*.
Done , you are using FA6.5, wordpress tooltips using FA6.4

Avoid loading ionRangeSlider styles on frontend unless a slider is actually rendered.
Done

Namespace & scope CSS
Prefix all plugin selectors under a unique root (e.g., .tooltips-pro …) and avoid generic selectors like .row, .col, .btn, i, .icon, strong globally.
Done, we never use generic selectors like .row, .col, .btn, i, .icon, strong globally.

If you must style Bootstrap-like classes, scope them: .tooltips-pro .btn { … } not .btn { … }.
Done

Load only when needed
Enqueue frontend assets only if a tooltip is actually present on the page (shortcode/content scan or server-side flag).

Because wordpess tooltips plugin support many kinds of tooltips effect, for example, tooltips for menu item, use image ALT as image tooltips , tooltips for contact form fields…etc, actually now tooltips works for any element in a page…, because we have no way know how users using tooltips in a wordpress page, currently, we cannot find a solution for this feature request, sorry.

Font Awesome compatibility
If you ship FA, please use FA6 and document the stack; avoid injecting an older FA alongside FA6 to prevent glyph mismatches. Consider inline SVG for your UI icons to avoid any FA dependency at all.
Done , you are using FA6.5, wordpress tooltips using FA6.4

Thanks for the great suggestions, if you have any more feature request, please don’t hesitate to contact us, we are very happy to realize it for you 🙂

Thanks, have a blessed day with your family 🙂

Best Regards,

WordPress Tooltips Plugin Support

Tagged with: , , ,
Top