Γεια σας, αγαπητοί χρήστες του WordPress Tooltip Plugin, ελπίζω αυτό το μήνυμα να σας βρίσκει καλά και να απολαμβάνετε υπέροχες μέρες με την οικογένειά σας. Λάβαμε ένα αίτημα από έναν καταπληκτικό χρήστη του WordPress Tooltip που ανέφερε μια σύγκρουση CSS με το θέμα του στο WordPress Tooltips Plugin. Ο προγραμματιστής μας του WordPress εξέτασε το θέμα και διαπίστωσε ότι συγκρούεται με το Bootstrap και το Font Awesome, τα οποία χρησιμοποιούνται από τα tooltips, μεταξύ άλλων. Για να επιλύσουμε το πρόβλημα για τον πολύτιμο χρήστη tooltip μας, ο προγραμματιστής του WordPress Tooltips κυκλοφόρησε μια νέα έκδοση: WordPress Tooltips Pro Plus 35.8.8.
1: Επίλυση της σύγκρουσης μεταξύ του θέματος και του Bootstrap framework που περιλαμβάνεται στο WordPress tooltip:
Γεια σας Ομάδα Υποστήριξης,
Πρώτα απ' όλα: τεράστιες ευχαριστίες και πάλι για την απίστευτα γρήγορη ανταπόκριση και τη δουλειά σας αργά τη νύχτα.
Με την έκδοση 35.8.8 σχεδόν όλα είναι τέλεια από την πλευρά μου:
Σελίδα παραγγελιών WooCommerce → οι προειδοποιήσεις PHP έχουν εξαφανιστεί ✅
Salient → Πίνακας διαχείρισης τυπογραφίας → δεν είναι πλέον σπασμένος ✅
Κοινωνικά εικονίδια στην κεφαλίδα/υποσέλιδο → φαίνονται καλά ✅
Υπάρχει μόνο μία υποχώρηση που εμφανίστηκε αμέσως μετά την ενημέρωση στην 35.8.8:
Στην αρχική σελίδα, η διάταξη της κινητής κεφαλίδας/ήρωα είναι σπασμένη (το μπλοκ μενού/κεφαλίδας μετατοπίζεται και η απόσταση είναι εκτός).
Αυτό είχε ήδη διορθωθεί στην προηγούμενη έκδοση, αλλά με την 35.8.8 έχει επιστρέψει.
Και πάλι, σας ευχαριστώ πολύ για τη ακούραστη δουλειά σας και τις υπερ-γρήγορες απαντήσεις — εκτιμώ πραγματικά πόσο ευέλικτοι και χρήσιμοι είστε!
Με εκτίμηση,
Επιλύουμε το πρόβλημα για τον χρήστη tooltip και απαντήσαμε:
Γεια σας
Ελπίζω αυτό το μήνυμα να σας βρίσκει καλά και να έχετε ευτυχισμένες μέρες με την οικογένειά σας
Λυπάμαι για το πρόβλημα, ελέγξαμε τους κωδικούς του θέματος και του plugin μας, δοκιμάσαμε επίσης αυτό το πρόβλημα σε διάφορες αναλύσεις και τελικά ανακαλύψαμε ότι προκλήθηκε από μια σύγκρουση μεταξύ του Bootstrap και του θέματος. Η λύση είναι απλή, παρακαλώ ανοίξτε τον παγκόσμιο πίνακα ρυθμίσεων tooltips και απενεργοποιήστε την επιλογή: “Ενεργοποίηση / Απενεργοποίηση Bootstrap CSS για να αποφευχθούν οι συγκρούσεις με το θέμα;”, από την πλευρά μας, διαπιστώσαμε ότι όλα λειτουργούν καλά
Μπορείτε να κάνετε μια δοκιμή και να μας δώσετε ανατροφοδότηση; Αν υπάρχει κάποιο πρόβλημα, παρακαλώ μην διστάσετε να μας πείτε, θα το επιλύσουμε το συντομότερο δυνατό
Ευχαριστώ, να έχετε μια ευλογημένη μέρα με τους αγαπημένους σας
Με εκτίμηση,
Υποστήριξη WordPress Tooltips
2: Σελίδα παραγγελιών WooCommerce: αρκετές προειδοποιήσεις PHP εξακολουθούν να εμφανίζονται στην ενότητα λεπτομερειών παραγγελίας (σχετικές με το post_type που είναι null):
Έγινε, έχουμε ξαναγράψει τους κωδικούς μας έτσι ώστε να επιλύσουμε το πρόβλημα:
if (isset($post->post_type)) {
if ($post->post_type == ‘tooltips’) { add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Εμφάνιση αποσπάσματος στο tooltip pop up;’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }
Λειτουργεί καλά τώρα
3: Πίνακας τυπογραφίας Salient: η διεπαφή διαχείρισης κάτω από Salient → Τυπογραφία γίνεται σπασμένη και εκτός ευθυγράμμισης όταν είναι ενεργό το WordPress Tooltips Pro.
Έγινε, αναθεωρήσαμε τον κώδικα του βασικού θέματος και διαπιστώσαμε ότι περιλαμβάνει μια κλάση .tooltip, η οποία συγκρούεται με την κλάση .tooltips στο αρχείο admin.css μας. Έχουμε ξαναγράψει το plugin μας του wordpress tooltips με αυτόν τον τρόπο:
Φορτώστε το αρχείο admin.css για το plugin WordPress Tooltips στην περιοχή wp-admin μόνο όταν η τρέχουσα οθόνη ανήκει στο plugin.
Κωδικοί:
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’);
}
}
Λειτουργεί καλά τώρα
4: Κοινωνικά εικονίδια: τα εικονίδια Font Awesome στο μενού και στο υποσέλιδο (κοινωνικοί σύνδεσμοι) εξακολουθούν να εμφανίζονται λανθασμένα ή ως κενά κουτιά.
Έγινε, στο θέμα Salient, διαπιστώσαμε ότι φορτώνουν τα σενάρια τους αργά έτσι:
add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );
Ξαναγράψαμε το plugin μας για να φορτώσουμε το Font Awesome αργά για να αποφύγουμε συγκρούσεις με άλλα θέματα ή plugins:
add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);
Έτσι όλοι οι κωδικοί στο θέμα Salient θα εκτελούνται πρώτοι, οι κωδικοί μας θα φορτώνουν τελευταίοι.
Επομένως, όλοι οι κωδικοί στο θέμα Salient θα εκτελούνται με προτεραιότητα, και το plugin μας θα καλέσει τελικά το Font Awesome για να φορτωθεί.
Λειτουργεί καλά τώρα
Το θέμα του χρήστη χρησιμοποιούσε το Font Awesome 6.5, και τα Font Awesome Tooltips μας χρησιμοποιούσαν επίσης το Font Awesome 6.4 στην έκδοση WordPress Tooltips Pro Plus 35.8.8. Αναβαθμίσαμε τα Font Awesome tooltips για να χρησιμοποιούν την τελευταία έκδοση: Font Awesome 7.1. Τι είναι το Font Awesome;
Το Font Awesome είναι ένα δημοφιλές εργαλείο εικονιδίων και διαδικτυακή γραμματοσειρά που παρέχει μια τεράστια συλλογή από κλιμακωτά εικονίδια και κοινωνικά λογότυπα. Επιτρέπει στους προγραμματιστές να ενσωματώνουν εύκολα εικονίδια υψηλής ποιότητας στις ιστοσελίδες και τις εφαρμογές τους χωρίς την ανάγκη αρχείων εικόνας. Κύρια Χαρακτηριστικά του Font Awesome:
Κλιμακωτά Εικονίδια: Όντας βασισμένα σε διανύσματα, τα εικονίδια Font Awesome μπορούν να κλιμακωθούν σε οποιοδήποτε μέγεθος χωρίς να χάνουν ποιότητα, κάνοντάς τα ιδανικά για responsive σχεδιασμούς.
Συμβατότητα με Όλους τους Περιηγητές: Το Font Awesome λειτουργεί απρόσκοπτα σε όλους τους σύγχρονους διαδικτυακούς περιηγητές.
Εύκολη Ενσωμάτωση: Οι προγραμματιστές μπορούν να ενσωματώσουν εύκολα το Font Awesome στα έργα τους χρησιμοποιώντας μια απλή ετικέτα <link> ή εγκαθιστώντας το μέσω διαχειριστών πακέτων όπως το npm ή το Yarn.
Προσαρμοστικότητα: Τα εικονίδια μπορούν να στιλιστούν με CSS, επιτρέποντας αλλαγές σε χρώμα, μέγεθος, περιστροφή και πολλά άλλα για να ταιριάζουν στις απαιτήσεις σχεδίασης μιας ιστοσελίδας.
Προσβασιμότητα: Τα εικονίδια Font Awesome μπορούν να γίνουν προσβάσιμα μέσω κατάλληλων HTML χαρακτηριστικών, διασφαλίζοντας ότι είναι χρησιμοποιήσιμα από αναγνώστες οθόνης.
Τακτικές Ενημερώσεις: Το εργαλείο ενημερώνεται συχνά με νέα εικονίδια, ενισχύοντας τη βιβλιοθήκη του με την πάροδο του χρόνου.
Γιατί οι Χρήστες Αγαπούν το Font Awesome:
Ποικιλία: Το Font Awesome προσφέρει χιλιάδες εικονίδια που καλύπτουν πολλές κατηγορίες, παρέχοντας στους χρήστες πολλές επιλογές για να βρουν το τέλειο εικονίδιο για οποιαδήποτε εφαρμογή.
Απλότητα: Η σύνταξη για τη χρήση του Font Awesome είναι απλή, καθιστώντας το εύκολο για προγραμματιστές όλων των επιπέδων δεξιοτήτων να το εφαρμόσουν.
Απόδοση: Ως σύνολο εικονιδίων βασισμένο σε γραμματοσειρές, το Font Awesome φορτώνει συνήθως πιο γρήγορα από τα παραδοσιακά εικονίδια εικόνας, συμβάλλοντας στη βελτίωση της απόδοσης της ιστοσελίδας.
Υποστήριξη Κοινότητας: Με μια μεγάλη κοινότητα χρηστών και εκτενή τεκμηρίωση, οι προγραμματιστές μπορούν εύκολα να βρουν υποστήριξη, οδηγίες και παραδείγματα.
Συνεπής Στυλ: Όλα τα εικονίδια έχουν ομοιόμορφο στυλ, το οποίο βοηθά στη διατήρηση οπτικής συνέπειας σε διαδικτυακές εφαρμογές.
Δωρεάν και Πληρωμένες Επιλογές: Το Font Awesome προσφέρει τόσο δωρεάν όσο και premium εκδόσεις, επιτρέποντας στους χρήστες να επιλέξουν με βάση τις ανάγκες και τον προϋπολογισμό τους.
Συμπέρασμα
Το Font Awesome έχει γίνει η προτιμώμενη λύση για πολλούς προγραμματιστές λόγω της ευελιξίας του, της ευκολίας χρήσης και της εκτενούς βιβλιοθήκης εικονιδίων. Είτε δημιουργείτε μια απλή ιστοσελίδα είτε μια σύνθετη διαδικτυακή εφαρμογή, το Font Awesome παρέχει τα εργαλεία που χρειάζεστε για να ενισχύσετε το σχεδιασμό UI και να βελτιώσετε την εμπειρία χρήστη. Τι είναι τα Font Awesome Tooltips;
Τα Font Awesome Tooltips είναι μια δυνατότητα που επιτρέπει στους προγραμματιστές να δημιουργούν πληροφοριακά κουτιά ή υποδείξεις που εμφανίζονται με hover χρησιμοποιώντας εικονίδια Font Awesome, που περιλαμβάνονται στην έκδοση wordpress tooltips pro plus 19.9.8. Αυτά τα tooltips παρέχουν επιπλέον συμφραζόμενα ή πληροφορίες σχετικά με ένα στοιχείο σε μια ιστοσελίδα όταν ο χρήστης περνάει το ποντίκι του πάνω από αυτό. Κύρια Χαρακτηριστικά των Font Awesome Tooltips:
Κύρια Χαρακτηριστικά των Tooltip της Font Awesome:
- Εικονίδια: Μπορείτε εύκολα να ενσωματώσετε εικονίδια από τη βιβλιοθήκη Font Awesome στα tooltips σας, βελτιώνοντας την οπτική απήχηση και την εμπειρία του χρήστη.
- Προσαρμογή: Τα tooltips μπορούν να διαμορφωθούν και να προσαρμοστούν ώστε να ταιριάζουν με το σχέδιο της ιστοσελίδας σας, επιτρέποντας ρυθμίσεις σε χρώμα, μέγεθος και θέση.
- Αντίκτυπος: Συχνά προσαρμόζονται καλά σε διαφορετικά μεγέθη οθόνης, καθιστώντας τα κατάλληλα για επιτραπέζιες και κινητές διεπαφές.
- Προσβασιμότητα: Κατάλληλα υλοποιημένα tooltips μπορούν να βελτιώσουν την προσβασιμότητα παρέχοντας πρόσθετες πληροφορίες χωρίς να γεμίζουν την UI.
- Υποστήριξη JavaScript: Πολλές υλοποιήσεις tooltips χρησιμοποιούν JavaScript ή CSS πλαίσια (όπως το Bootstrap) για να ενισχύσουν τη λειτουργικότητα, όπως είναι οι εφέ εμφάνισης και απόκρυψης.
Πώς να προσθέσετε Tooltips Font Awesome στην ανάρτησή σας στο WordPress
Η δημιουργία ελκυστικού περιεχομένου στις αναρτήσεις σας στο WordPress έγινε πιο εύκολη με τα tooltips Font Awesome! Ακολουθήστε αυτά τα απλά βήματα για να βελτιώσετε τις αναρτήσεις σας με όμορφα εικονίδια που παρέχουν πρόσθετες πληροφορίες στους αναγνώστες σας.
Βήμα 1: Δημιουργήστε μια Νέα Ανάρτηση στο WordPress
Ξεκινήστε δημιουργώντας μια νέα ανάρτηση στο WordPress. Στον επεξεργαστή, απλά εισαγάγετε τον κωδικό συντόμευσης tooltip της Font Awesome όπως αυτό:
[ ttfa tooltip_id="13" set="fas" icon="fa-question-circle" size="2x" color="#9ee2c6" ]
Αυτή η συντόμευση tooltip Font Awesome θα σας επιτρέψει να εμφανίσετε ένα tooltip στην ανάρτησή σας.
Περισσότερες συντομεύσεις tooltips WordPress μπορείτε να βρείτε στο λεπτομερές έγγραφο συντόμευσης tooltips μας: tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/
Βήμα 2: Προεπισκόπηση του Tooltip σας
Μόλις προσθέσετε τη συντόμευση, μεταβείτε στην πρόσοψη της ανάρτησής σας στο WordPress. Θα δείτε ένα όμορφο εικονίδιο ερωτηματικού, το οποίο φαίνεται έτσι:
Εικονίδιο Tooltip Font Awesome
Όταν οι χρήστες περνούν το ποντίκι πάνω από το εικονίδιο ερωτηματικού, θα εμφανιστεί ένα αναδυόμενο tooltip, παρέχοντας περισσότερες λεπτομέρειες:
Αναδυόμενο Tooltip Font Awesome
Βήμα 3: Προσαρμόστε το Tooltip σας
Έχετε την ευχέρεια να προσαρμόσετε το μέγεθος και το χρώμα των εικονιδίων Font Awesome. Για παράδειγμα, αν θέλετε να κάνετε το εικονίδιο του ερωτηματικού μεγαλύτερο, απλά αλλάξτε την παράμετρο μεγέθους από 2x σε 3x, 4x, ή ακόμα και μεγαλύτερο! Να ένα παράδειγμα:
Παράθυρο αναδυόμενου tooltip Font Awesome στην πρόσοψη
Για να αλλάξετε το χρώμα, τροποποιήστε την παράμετρο χρώματος σε οποιαδήποτε τιμή hex προτιμάτε, όπως #cccccc ή #eeeeee.
Βήμα 4: Επιλέξτε το Στυλ του Εικονιδίου σας
Μπορείτε επίσης να προσαρμόσετε το στυλ του tooltip σας Font Awesome αλλάζοντας την παράμετρο set:
- fas — Στερεά εικονίδια
- far — Κανονικά εικονίδια
- fab — Εικονίδια μάρκας
Γρήγορη Περίληψη όσων πρέπει να γνωρίζετε:
- tooltip_id: Αυτό είναι το ID του tooltip που δημιουργήσατε στον επεξεργαστή tooltip του WordPress.
- set: Επιλέξτε μεταξύ συμπαγών (fas), κανονικών (far) ή εικονιδίων μάρκας (fab).
- icon: Χρησιμοποιήσαμε το εικονίδιο του κύκλου ερωτήσεων, αλλά θυμηθείτε, υπάρχουν πάνω από 1.588 εκπληκτικά εικονίδια διαθέσιμα για να επιλέξετε!
- size: Μη διστάσετε να αυξήσετε το μέγεθος σε 3x, 4x κ.λπ., ανάλογα με τις προτιμήσεις σας στο σχεδιασμό.
- color: Προσαρμόστε το χρώμα ώστε να ταιριάζει με τον ιστότοπό σας, όπως το #eeeeee.
Τώρα είστε έτοιμοι να ενισχύσετε τις αναρτήσεις σας στο WordPress με υπέροχα tooltips Font Awesome! Καλή blogging!
Συμπέρασμα:
Το Font Awesome περιλαμβάνει πάνω από 1.500 εικονίδια υψηλής ποιότητας που μπορούν να προσαρμοστούν σε μέγεθος, χρώμα και στυλ χρησιμοποιώντας CSS. Αυτά τα εικονίδια έχουν σχεδιαστεί για να είναι συμβατά με όλους τους περιηγητές. Τα Font Awesome Tooltips είναι ένα χρήσιμο στοιχείο για τη βελτίωση της αλληλεπίδρασης των χρηστών και την παροχή χρήσιμων πληροφοριών με οπτικά ελκυστικό τρόπο στις ιστοσελίδες.
Αν χρειαστεί να αλλάξουμε κάτι, παρακαλώ μην διστάσετε να μας το πείτε, θα προσπαθήσουμε να το ολοκληρώσουμε το συντομότερο δυνατό (είναι 01:52 π.μ. για εμάς).
Αν όλα λειτουργούν καλά, παρακαλώ αλλάξτε την πρόσβαση στον δοκιμαστικό σας ιστότοπο, δεν έχουμε συνδεθεί ποτέ στον λογαριασμό σας, για να προστατεύσουμε τα ιδιωτικά σας δεδομένα και τις προσωπικές σας πληροφορίες
Ευχαριστώ, να έχετε μια ευλογημένη μέρα με τους αγαπημένους σας
Με εκτίμηση,
Υποστήριξη WordPress Tooltips
