Optimalizált CSS / JAVASCRIPT betöltés a WordPress Tooltips bővítményhez, kiadva a WordPress Tooltips Pro Plus bővítményt 36.5.8 verzióban

Kedves WordPress tooltip bővítmény felhasználók, Reméljük, jól vagytok és kellemes időt töltötök a szeretteitekkel. Nemrég egy tehetséges WordPress fejlesztőtől izgalmas javaslatokat kaptunk új funkciók tekintetében, és igazán lenyűgözött minket, amit ajánlott. Fejlesztő csapatunk keményen dolgozik ezeken az ötleteken, hogy hamarosan elkészíthessük őket.

Üdv, Tooltips csapat,
Köszönöm a gyors válaszotokat a 35.5.8-as frissítéssel kapcsolatban és a korábbi támogatást. A Tooltips Pro Plus bővítményt használom a Salient téma (és WPBakery) keretein belül a weboldalamon.

Probléma: A Tooltip-ek a front-end-en CSS-t töltenek be, amely a Bootstrap/Awesome/reset + admin.css-hez kapcsolódik, ami lefedi a Salient testreszabott rácsot, és konfliktust okoz a Font Awesome csapattal.
Konfliktusok a Font Awesome-val (a téma/csapat FA6 verziót használ, és a bővítmény eltérő verziót ad hozzá a FA-ból, ami miatt a kommunikációs ikonok üres dobozként jelennek meg vagy ikonhibákat okoznak).

A megoldás A:

Kijavítottam a WordPress Tooltip bővítményt az alábbiak szerint:

  1. Ellenőrizzük, hogy minden betöltött/megállított stílusfájl a Bootstrap/font-awesome láncra vonatkozik-e.
  2. Ha a téma vagy más bővítmények már betöltődtek, azonnal szakítsuk meg a folyamatot, hogy a WordPress Tooltip bővítmény ne töltse be a saját Bootstrap/font-awesome könyvtárát.
  3. Ha nem, a WordPress Tooltip bővítmény betölti a saját Bootstrap/font-awesome könyvtárát.

A kódunk a következő:

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

A következő funkciókérésem:

Oldjuk meg a tooltip-ek eltérülését a mobilképernyőkön (a tooltip-ek lefedik a tartalmat a szélek mentén).

Stabilizálási lépések: A) Szüntessem meg a bővítmények stílusainak betöltését, amelyek nem kellene, hogy a front-end-en legyenek.
Eltávolítottuk/újraírtuk csak a Tooltips erőforrásokat, amelyek konfliktust okoztak (admin.css, skin ionRangeSlider, bootstrap/awesome/reset). Minimális cél:

A megoldás B:

Alaposan megvizsgáltuk a WordPress Tooltip bővítmény kódját. A korábbi verzió csak az admin.css-t és a skin ionRangeSlider-t töltötte be a vezérlőpanelen, így megakadályozva, hogy ezeket a front-end-en betöltsük. A kód a következőképpen van szervezve:

add_action('admin_head', 'tooltips_pro_admin_css');

add_action('admin_head', 'tooltips_admin_rangeslider_css_js');

A következő funkciókérésem:
B) Töltsük be az FA6-ot csak egyszer (eltávolítva az ismétléseket a front-end-en).
Ez a megoldás megoldja az ikonproblémákat (a régi verziók v4-shim-jei a fa fa-* kategóriáknál jelen vannak).

A megoldás C:

Ez a kihívás megoldva az A megoldásban.

Funkciókérés:
Jó lenne ezt implementálni a bővítményetekbe.

Erőforrások/szélek elszigetelése:

  • Ne töltsétek be a back-end téma CSS-t a front-end-en (is_admin()).
    Befejeztük.
  • Kérjük, a Bootstrap/Font Awesome választást (ennek engedélyezése nélkül az alapértelmezett választásként). Kínáljatok 3 lehetőséget a beállítások között:

    A) Ne töltsenek be semmilyen ikoncsapatot (használják a téma csapatát),
    B) Töltsenek be FA6-ot (core/brands/solid),
    C) Töltsenek be csak örökség shim fa fa- verziókat.
    Befejeztük. Továbbra is FA6.5-öt használnak és a WordPress Tooltip bővítmény FA6.4-et használ.

  • Töltsétek be az ionRangeSlider stílust a front-end-en csak akkor, ha a csúszka nem látható.
    Befejeztük.
  • A stílusneveknek egyedieknek és specifikusaknak kell lenniük
    Adjatok hozzá minden választásotokhoz a bővítményhez egyedülálló gyökér (pl.: .tooltips-pro …) és kerüljétek el a túl általános választók, mint .row, .col, .btn, i, .icon, strong használatát.
    Befejeztük. Nem tudunk általános választók használni, mint .row, .col, .btn, i, .icon, strong általánosan.
  • Ha szükséges, hasonló stílusok használata Bootstrap-hoz, korlátozzátok: .tooltips-pro .btn { … } nem .btn { … }
    Befejeztük.
  • Töltsétek be csak akkor, ha ez elengedhetetlen
    Erőforrásokat a front-end-re csak akkor adjatok hozzá, ha a tooltip-ek már jelen vannak az oldalon (ellenőrizzék a shortcode/tartalomot vagy használjanak a szerver címkét).

Tekintettel arra, hogy támogatjuk a vonatkozó Tooltip funkciókkal (Tooltip menübe, alternatív képszövegek használata tooltipként, és Tooltipok kapcsolatfelvételi űrlap mezőkhöz stb.), eddig nem volt egyszerű megoldást találni erre a kérésre. Kérlek, bocsáss meg ezért.

Kompatibilitás a Font Awesome-val:
Ha a Font Awesome-ot váltjátok, akkor kérlek, használjatok FA6-ot, és dokumentáljátok ezt. Kerüljétek az öreg verziók importálását a FA-ból az FA6-al, hogy elkerüljétek az ikonok kompatibilitási problémáit. Az SVG-k használata beépített felhasználói felület ikonként jó módszer, hogy teljesen megszabaduljatok a FA-függőségtől.
Befejeztük. Továbbra is FA6.5-öt használnak és a WordPress Tooltip bővítmény FA6.4-et használ.

Köszönjük szépen a nagyszerű javaslatot, és ha van még funkciókérésed, ne habozz kapcsolatba lépni velünk. Nagyon izgatottan várjuk, hogy ezt megvalósíthassuk számodra

Köszönjük. Reméljük, kellemes napot töltötök a családotok körében

Üdvözlettel,

A WordPress Tooltip bővítmény támogatói csapata


Ha további segítségre van szükséged, vagy bármi más változtatásra, kérlek, jelezd!

today at 8:34 AM

Tagged with:

Leave a Reply

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

*