Încărcare optimizată de CSS / JAVASCRIPT pentru pluginul WordPress Tooltips, lansarea pluginului WordPress Tooltips Pro Plus 36.5.8

Dragi utilizatori ai pluginului WordPress tooltip, Sperăm că vă simțiți bine și că vă bucurați de momentele petrecute alături de familie. Recent, am primit sugestii interesante privind noi funcționalități de la un talentat dezvoltator WordPress, care ne-au atras atenția. Echipa noastră de dezvoltare lucrează din greu la aceste idei pentru a le implementa cât mai curând posibil.

Salutări din partea echipei Tooltips,
Vă mulțumim pentru reacția rapidă în legătură cu actualizarea la versiunea 35.5.8 și pentru sprijinul continuu. Utilizez pluginul Tooltips Pro Plus pentru site-ul meu, care este bazat pe tema Salient (și WPBakery).

Problemă: Tooltips-urile de pe front-end încarcă stiluri CSS legate de Bootstrap/Awesome/reset + admin.css, ceea ce acoperă grila personalizată a Salient și creează conflicte cu echipa de Font Awesome.
Există conflicte cu Font Awesome (tema/echipa folosește versiunea FA6, în timp ce pluginul adaugă o altă versiune de FA, ceea ce face ca icoanele de comunicare să apară ca pătrate goale sau să genereze erori de icoane).

Soluția A:

Am modificat pluginul WordPress Tooltip astfel:

  1. Verificăm dacă fiecare stil încărcat/înlăturat este legat de șirul Bootstrap/font-awesome.
  2. Dacă tema sau alte pluginuri sunt deja încărcate, opriți imediat funcția pentru a evita încărcarea Bootstrap/font-awesome personalizat din pluginul WordPress Tooltip.
  3. Altfel, pluginul WordPress Tooltip va încărca propriul său Bootstrap/font-awesome.

Codul nostru este următorul:

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

Altă cerință funcțională:

Trebuie să rezolvăm problema tooltips-urilor care se mișcă pe ecranele mobile (tooltips-urile acoperă conținutul pe laturi).

Pași pentru stabilizare:

A) Oprirea încărcării stilurilor din plugin care nu ar trebui să fie pe front-end.
Am eliminat/reduse resursele Tooltips care cauzau conflicte (admin.css, skin ionRangeSlider, bootstrap/awesome/reset). Obiectiv minim:

Soluția B:

Am analizat cu atenție codul pluginului WordPress Tooltip. Versiunile anterioare nu încărcau decât admin.css și skin ionRangeSlider în panou, împiedicându-le să se încarce pe front-end. Codul este organizat astfel:

add_action('admin_head', 'tooltips_pro_admin_css');

add_action('admin_head', 'tooltips_admin_rangeslider_css_js');

Altă cerință funcțională:
B) Încărcați FA6 o singură dată (eliminați repetările pe front-end).
Această soluție va rezolva problemele cu icoanele (versiunile anterioare shim în categoriile fa-* sunt disponibile).

Soluția C:

Această provocare a fost abordată în Soluția A.

Cerință funcțională:
Ar fi minunat să implementați aceasta în pluginul dumneavoastră.

Izolarea resurselor/cazuri extreme:

  • Nu încărcați CSS-ul temei pentru back-end pe front-end (is_admin()).
    Finalizat.
  • Oferiți opțiunea de a selecta Bootstrap/Font Awesome (fără aprobat ca configurație implicită). Oferiți 3 opțiuni în configurare:

    A) Nu încărcați echipa de icoane (folosiți echipa temei),
    B) Încărcați FA6 (core/brands/solid),
    C) Încărcați doar versiunile anterioare de shim fa.
    Finalizat. Versiunea anterioară folosește încă FA6.5 și pluginul Tooltip este în FA6.4.

  • Încărcați stilul ionRangeSlider pe front-end numai dacă slider-ul nu este vizibil.
    Finalizat.
  • Numele stilurilor trebuie să fie unice și specifice.
    Adăugați un nume rădăcină unic (de exemplu: .tooltips-pro …) la toate opțiunile din plugin și evitați utilizarea selectorilor prea generali precum .row, .col, .btn, i, .icon, strong.
    Finalizat. Nu putem folosi selectori generali precum .row, .col, .btn, i, .icon, strong.
  • De fiecare dată când este posibil, utilizați stiluri similare cu Bootstrap, limită: .tooltips-pro .btn { … } nu .btn { … }
    Finalizat.
  • Încărcați doar dacă este absolut necesar.
    Adăugați resurse pe front-end doar când tooltips-urile sunt deja prezente pe pagină (verificați shortcode-ul/conținutul sau folosiți o etichetă a serverului).

Deși susținem funcții legate de Tooltip (meniu în Tooltip, folosirea textului alternativ al imaginilor ca tooltip, și Tooltip pentru câmpurile de formular de contact etc.), nu am găsit încă o soluție simplă pentru această nevoie. Ne cerem scuze pentru acest lucru.

Compatibilitate cu Font Awesome:
Dacă schimbați Font Awesome, vă rugăm să folosiți FA6 și să documentați. Evitați importul versiunilor anterioare de FA în FA6 pentru a evita problemele cu icoanele. Utilizarea SVG-urilor ca icoane integrate în interfața utilizatorului este o metodă bună pentru a elimina complet dependențele de FA.
Finalizat. Versiunea anterioară folosește încă FA6.5 și pluginul Tooltip este în FA6.4.

Vă mulțumim sincer pentru sugestiile excelente și dacă aveți alte cerințe funcționale, nu ezitați să ne contactați. Sperăm să le putem implementa pentru dumneavoastră

Mulțumesc. Sperăm să aveți momente frumoase alături de familie

Cu sinceritate,

Echipa de suport a pluginului WordPress Tooltip


Leave a Reply

Your email address will not be published. Required fields are marked *

*