Βελτιστοποιημένη φόρτωση CSS / JAVASCRIPT για το πρόσθετο WordPress Tooltips, κυκλοφορία του πρόσθετου WordPress Tooltips Pro Plus 36.5.8

Γεια σας, χρήστες της προσθήκης WordPress tooltip, Ελπίζουμε να είστε καλά και να περνάτε όμορφα με τους αγαπημένους σας. Πρόσφατα, λάβαμε μια συναρπαστική αίτηση για νέες δυνατότητες από έναν ταλαντούχο προγραμματιστή του WordPress, και πραγματικά μας εντυπωσίασαν οι εξαιρετικές ιδέες που πρότεινε. Η ομάδα ανάπτυξης της προσθήκης εργάζεται σκληρά για να υλοποιήσει αυτές τις αιτήσεις το συντομότερο δυνατό.

Γεια σας, ομάδα Tooltips,
Σας ευχαριστώ για την άμεση απάντησή σας σχετικά με την ενημέρωση 35.5.8 και την προηγούμενη υποστήριξη. Χρησιμοποιώ την προσθήκη Tooltips Pro Plus με το θέμα Salient (και το WPBakery) στον ιστότοπό μου.

Πρόβλημα: Οι Tooltip φορτώνονται στην εμπρόσθια όψη με CSS που σχετίζεται με το Bootstrap/Awesome/reset + admin.css, γεγονός που προκαλεί την κάλυψη του προσαρμοσμένου πλέγματος Salient, καθώς και να δημιουργεί συγκρούσεις με την ομάδα Font Awesome.
Συγκρούσεις με την Font Awesome (το θέμα/η ομάδα χρησιμοποιούν την έκδοση FA6 και η προσθήκη εισάγει διαφορετική έκδοση του FA, γεγονός που προκαλεί την εμφάνιση εικονιδίων επικοινωνίας ως κενές πλαίσια ή λάθη στα εικονίδια).

Λύση A:

Διορθώσαμε την προσθήκη WordPress Tooltip όπως παρακάτω:

  1. Ελέγξτε κάθε αρχείο στυλ που έχει φορτωθεί/τερματιστεί για να δείτε αν περιέχει αλυσίδα bootstrap/font-awesome.
  2. Εάν το θέμα ή άλλες προσθήκες έχουν ήδη φορτωθεί, τερματίστε τη διαδικασία αμέσως, έτσι ώστε η προσθήκη WordPress Tooltip να μην φορτώσει τη δική της βιβλιοθήκη bootstrap/font-awesome.
  3. Διαφορετικά, η προσθήκη WordPress Tooltip θα φορτώσει τη δική της βιβλιοθήκη bootstrap/font-awesome.

Ο κώδικας μας είναι ο εξής:

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

Επόμενο αίτημα δυνατότητας:

Πρόβλημα με την απόκλιση των Tooltips εκτός της οθόνης σε κινητές συσκευές (τα Tooltips καλύπτουν το περιεχόμενο στις άκρες).

Βήματα σταθεροποίησης: A) Διέκοψα τη φόρτωση στυλ από πρόσθετα που δεν πρέπει να φορτώνονται στην εμπρόσθια όψη.
Αφαίρεσα/καταχώρησα μόνο πόρους Tooltips που προκαλούσαν την σύγκρουση (admin.css, skin ionRangeSlider, bootstrap/awesome/reset). Ο ελάχιστος στόχος είναι:

Λύση B:

Μελετήσαμε προσεκτικά τον κώδικα της προσθήκης WordPress Tooltip. Η προηγούμενη έκδοση φορτωνόταν admin.css και skin ionRangeSlider μόνο στην περιοχή διαχείρισης, εμποδίζοντας τη φόρτωσή τους στην εμπρόσθια όψη. Ο κώδικας οργανώνεται έτσι:

add_action('admin_head', 'tooltips_pro_admin_css');

add_action(‘admin_head’, ‘tooltips_admin_rangeslider_css_js’);

Επόμενο αίτημα δυνατότητας:
B) Φόρτωση του FA6 μόνο μία φορά (αφαίρεση επανάληψης στην εμπρόσθια όψη).
Αυτή η λύση επιλύει τα προβλήματα με τα εικονίδια (οι παλιές εκδόσεις της κατηγορίας fa fa-* περιλαμβάνουν v4-shims).

Λύση C:

Αυτή η πρόκληση έχει λυθεί στη λύση A.

Αίτημα δυνατότητας:
Θα ήταν υπέροχο να το υλοποιήσετε στην προσθήκη σας.

Απομόνωση πόρων/ρυθμίσεων:

  • Μην φορτώνετε το CSS διαχείρισης στην εμπρόσθια όψη (is_admin()).
    Έχει ολοκληρωθεί.
  • Κάντε το Bootstrap/Font Awesome επιλογή (με μη ενεργοποίησή του ως προεπιλογή). Παρέχετε 3 επιλογές στις ρυθμίσεις:

    Α) Μην φορτώνετε καμία ομάδα εικονιδίων (χρησιμοποιήστε την ομάδα του θέματος),
    Β) Φόρτωση του FA6 (core/brands/solid),
    Γ) Φόρτωση μόνο της κληρονομιάς shim για την έκδοση fa fa-.
    Έχει ολοκληρωθεί. Χρησιμοποιείται ακόμη το FA6.5, και η προσθήκη WordPress Tooltip χρησιμοποιεί το FA6.4.

  • Φόρτωση του στυλ ionRangeSlider στην εμπρόσθια όψη μόνο όταν η ρυθμιστική μπάρα δεν εμφανίζεται.
    Έχει ολοκληρωθεί.
  • Ονόματα στυλ πρέπει να είναι μοναδικά και συγκεκριμένα
    Προσθέστε έναν μοναδικό ρίζα για όλους τους επιλεγείς στην προσθήκη (π.χ.: .tooltips-pro …) και αποφύγετε τη χρήση γενικών επιλεγών όπως .row, .col, .btn, i, .icon, strong.
    Έχει ολοκληρωθεί. Δεν μπορούμε να χρησιμοποιήσουμε τις γενικές επιλεγές όπως .row, .col, .btn, i, .icon, strong παγκοσμίως.
  • Εάν είναι απαραίτητο να χρησιμοποιηθούν στυλ παρόμοια με το bootstrap, περιορίστε το: .tooltips-pro .btn { … } αντί για .btn { … }
    Έχει ολοκληρωθεί.
  • Φόρτωση μόνο όταν είναι αναγκαίο
    Προσθέστε πόρους στην εμπρόσθια όψη μόνο όταν τα Tooltips υπάρχουν ήδη στη σελίδα (ελέγξτε τα shortcode/περιεχόμενα ή χρησιμοποιήστε σήμα server).

Δεδομένου ότι παρέχουμε υποστήριξη για σχετικές δυνατότητες Tooltips (Tooltips για στοιχείο μενού, χρήση εναλλακτικού κειμένου εικόνας ως Tooltips, και Tooltips για πεδίο φόρμας επικοινωνίας κλπ.), μέχρι τώρα δεν ήταν εύκολο να βρούμε λύση σε αυτό το αίτημα. Ζητούμε συγγνώμη γι’ αυτό.

Συμβατότητα με την Font Awesome:
Εάν παρέχετε την Font Awesome, παρακαλώ χρησιμοποιήστε το FA6 και τεκμηριώστε το. Αποφύγετε την εισαγωγή παλιών εκδόσεων του FA με το FA6 για να αποφύγετε προβλήματα με την ασυμβατότητα των εικονιδίων. Η χρήση SVG ως ενσωματωμένα εικονίδια της διεπαφής χρήστη είναι μια καλή μέθοδος για να απαλλαγείτε εντελώς από την εξάρτηση από το FA.
Έχει ολοκληρωθεί. Χρησιμοποιεί ακόμη το FA6.5, και η προσθήκη WordPress Tooltip χρησιμοποιεί το FA6.4.

Σας ευχαριστούμε για τη σπουδαία πρόταση και εάν έχετε περισσότερα αιτήματα για δυνατότητες, μη διστάσετε να επικοινωνήσετε μαζί μας. Είμαστε πολύ ενθουσιασμένοι να το υλοποιήσουμε για εσάς

Σας ευχαριστούμε. Ευχόμαστε να περάσετε μια όμορφη ημέρα με την οικογένειά σας

Με εκτίμηση,

Ομάδα υποστήριξης προσθήκης WordPress Tooltip

Leave a Reply

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

*