Hallo, liebe Benutzer des WordPress Tooltip Plugins, ich hoffe, diese Nachricht erreicht euch wohl und dass ihr wunderbare Tage mit eurer Familie verbringt. Wir haben ein Ticket von einem großartigen WordPress Tooltip-Benutzer erhalten, der einen CSS-Konflikt mit seinem Theme im WordPress Tooltips Plugin gemeldet hat. Unser WordPress-Entwickler hat das Theme überprüft und festgestellt, dass es Konflikte mit Bootstrap und Font Awesome gibt, die unter anderem von den Tooltips verwendet werden. Um das Problem für unseren geschätzten Tooltip-Benutzer zu lösen, hat unser WordPress Tooltips-Entwickler eine neue Version veröffentlicht: WordPress Tooltips Pro Plus 35.8.8.
1: Der Konflikt zwischen dem Theme und dem Bootstrap-Framework, das im WordPress Tooltip enthalten ist, wurde behoben:
Hallo Support-Team,
Zunächst einmal: Vielen Dank für die unglaublich schnelle Bearbeitung und die späte Arbeit.
Mit 35.8.8 ist fast alles auf meiner Seite perfekt:
WooCommerce Bestellseite → die PHP-Warnungen sind verschwunden ✅
Salient → Typografie-Admin-Panel → nicht mehr kaputt ✅
Soziale Icons im Header/Footer → sehen gut aus ✅
Es gibt nur einen Rückschritt, der direkt nach dem Update auf 35.8.8 aufgetreten ist:
Auf der Startseite ist das mobile Header/Hero-Layout kaputt (Menü/Header-Block verschiebt sich & der Abstand stimmt nicht).
Dies wurde bereits im vorherigen Build behoben, aber mit 35.8.8 ist es zurück.
Nochmals vielen Dank für eure unermüdliche Arbeit und die super schnellen Antworten – ich schätze es wirklich, wie flexibel und hilfsbereit ihr seid!
Herzliche Grüße,
Wir haben das Problem für den Tooltip-Benutzer gelöst und geantwortet:
Hallo
Ich hoffe, diese Nachricht erreicht dich wohl und du hast glückliche Tage mit deiner Familie
Entschuldige das Problem, wir haben den Code des Themes und unseres Plugins überprüft, wir haben dieses Problem auch über verschiedene Auflösungen getestet und letztendlich festgestellt, dass es durch einen Konflikt zwischen Bootstrap und dem Theme verursacht wurde. Die Lösung ist einfach: Bitte öffne das globale Einstellungsfeld für Tooltips und deaktiviere die Option: „Bootstrap CSS aktivieren/deaktivieren, um Konflikte mit dem Theme zu vermeiden?“. Auf unserer Seite haben wir festgestellt, dass alles gut funktioniert
Könntest du bitte einen Test durchführen und uns Feedback geben? Wenn es irgendwelche Probleme gibt, zögere bitte nicht, uns zu informieren, wir werden es so schnell wie möglich für dich lösen
Danke, hab einen gesegneten Tag mit deinen Lieben
Mit freundlichen Grüßen,
WordPress Tooltips Support
2: WooCommerce Bestellseite: mehrere PHP-Warnungen erscheinen weiterhin im Abschnitt Bestelldetails (bezogen auf post_type, der null ist):
Erledigt, wir haben unseren Code wie folgt umgeschrieben, um das Problem zu lösen:
if (isset($post->post_type)) {
if ($post->post_type == ‘tooltips’) { add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Ausschnitt im Tooltip-Popup anzeigen?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }
Es funktioniert jetzt gut
3: Salient Typografie-Panel: Die Admin-Oberfläche unter Salient → Typografie wird kaputt und falsch ausgerichtet, wenn WordPress Tooltips Pro aktiv ist.
Erledigt, wir haben den Code des Kern-Themes überprüft und festgestellt, dass es eine .tooltip-Klasse enthält, die mit der .tooltips-Klasse in unserer admin.css-Datei in Konflikt steht. Wir haben unser WordPress Tooltips-Plugin wie folgt umgeschrieben:
Lade die admin.css-Datei für das WordPress Tooltips-Plugin im wp-admin-Bereich nur, wenn der aktuelle Bildschirm zum Plugin gehört.
Codes:
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');
}
}
Es funktioniert jetzt gut
4: Soziale Icons: Die Font Awesome-Icons im Menü und Footer (soziale Links) werden weiterhin falsch oder als leere Kästchen angezeigt.
Erledigt, im Salient-Theme haben wir festgestellt, dass sie ihre Skripte spät laden, so:
add_action('wp_enqueue_scripts', 'nectar_enqueue_dynamic_css', 20);
Wir haben unser Plugin umgeschrieben, um Font Awesome spät zu laden, um Konflikte mit anderen Themes oder Plugins zu vermeiden:
add_action('wp_enqueue_scripts', 'ttfa_load_font_awesome', 10000);
So wird der gesamte Code im Salient-Theme zuerst ausgeführt, unser Code lädt Font Awesome zuletzt.
Daher wird der gesamte Code im Salient-Theme mit Priorität ausgeführt, und unser Plugin ruft schließlich Font Awesome zum Laden auf.
Es funktioniert jetzt gut
Das Theme des Benutzers verwendete Font Awesome 6.5, und unsere Font Awesome Tooltips verwendeten ebenfalls Font Awesome 6.4 in WordPress Tooltips Pro Plus 35.8.8. Wir haben die Font Awesome Tooltips auf die neueste Version aktualisiert: Font Awesome 7.1. Was ist Font Awesome?
Font Awesome ist ein beliebtes Icon-Toolkit und Webfont, das eine riesige Sammlung von skalierbaren Vektor-Icons und sozialen Logos bietet. Es ermöglicht Entwicklern, hochwertige Icons einfach in ihre Websites und Anwendungen zu integrieren, ohne dass Bilddateien erforderlich sind. Hauptmerkmale von Font Awesome:
Skalierbare Icons: Da Font Awesome-Icons vektorbasiert sind, können sie auf jede Größe skaliert werden, ohne an Qualität zu verlieren, was sie perfekt für responsive Designs macht.
Browserübergreifende Kompatibilität: Font Awesome funktioniert nahtlos in allen modernen Webbrowsern.
Einfache Integration: Entwickler können Font Awesome einfach in ihre Projekte integrieren, indem sie einen einfachen <link>-Tag verwenden oder es über Paketmanager wie npm oder Yarn installieren.
Anpassbar: Icons können mit CSS gestaltet werden, was Änderungen in Farbe, Größe, Rotation und vielem mehr ermöglicht, um den Designanforderungen einer Website gerecht zu werden.
Barrierefreiheit: Font Awesome-Icons können durch geeignete HTML-Attribute zugänglich gemacht werden, um sicherzustellen, dass sie von Screenreadern verwendet werden können.
Regelmäßige Updates: Das Toolkit wird häufig mit neuen Icons aktualisiert, wodurch seine Bibliothek im Laufe der Zeit erweitert wird.
Warum Benutzer Font Awesome mögen:
Große Auswahl: Font Awesome bietet Tausende von Icons, die zahlreiche Kategorien abdecken und den Benutzern viele Möglichkeiten bieten, das perfekte Icon für jede Anwendung zu finden.
Einfachheit: Die Syntax zur Verwendung von Font Awesome ist unkompliziert, was es Entwicklern aller Fähigkeitsstufen erleichtert, es zu implementieren.
Leistung: Da es sich um ein fontbasiertes Icon-Set handelt, lädt Font Awesome in der Regel schneller als traditionelle Bild-Icons, was zur Verbesserung der Website-Leistung beiträgt.
Community-Support: Mit einer großen Community von Benutzern und umfassender Dokumentation können Entwickler leicht Unterstützung, Tutorials und Beispiele finden.
Konsistenter Stil: Alle Icons haben einen einheitlichen Stil, der hilft, visuelle Konsistenz in Webanwendungen zu wahren.
Kostenlose und kostenpflichtige Optionen: Font Awesome bietet sowohl kostenlose als auch Premium-Versionen an, sodass Benutzer je nach Bedarf und Budget wählen können.
Fazit
Font Awesome ist für viele Entwickler zur bevorzugten Lösung geworden, aufgrund seiner Vielseitigkeit, Benutzerfreundlichkeit und umfangreichen Icon-Bibliothek. Egal, ob du eine einfache Website oder eine komplexe Webanwendung erstellst, Font Awesome bietet die Werkzeuge, die benötigt werden, um das UI-Design zu verbessern und die Benutzererfahrung zu optimieren. Was sind Font Awesome Tooltips?
Font Awesome Tooltips sind eine Funktion, die es Entwicklern ermöglicht, hoverbare Informationskästen oder Hinweise mit Font Awesome-Icons zu erstellen, die in der WordPress Tooltips Pro Plus-Version 19.9.8 enthalten sind. Diese Tooltips bieten zusätzlichen Kontext oder Informationen zu einem Element auf einer Webseite, wenn ein Benutzer mit dem Cursor darüber fährt. Hauptmerkmale von Font Awesome Tooltips:
Icons: Du kannst Icons aus der Font Awesome-Bibliothek einfach in deine Tooltips integrieren, was die visuelle Attraktivität und Benutzererfahrung verbessert.
Anpassung: Tooltips können gestaltet und angepasst werden, um dem Design deiner Website zu entsprechen, was Anpassungen in Farbe, Größe und Positionierung ermöglicht.
Responsivität: Sie passen sich oft gut an verschiedene Bildschirmgrößen an, was sie sowohl für Desktop- als auch für mobile Schnittstellen geeignet macht.
Barrierefreiheit: Richtig implementierte Tooltips können die Barrierefreiheit verbessern, indem sie zusätzliche Informationen bereitstellen, ohne die Benutzeroberfläche zu überladen.
JavaScript-Unterstützung: Viele Tooltip-Implementierungen nutzen JavaScript oder CSS-Frameworks (wie Bootstrap), um die Funktionalität zu verbessern, wie z.B. Anzeige- und Ausblendeffekte.
So fügst du Font Awesome Tooltips in deinen WordPress-Beitrag ein
Das Erstellen ansprechender Inhalte in deinen WordPress-Beiträgen ist mit Font Awesome Tooltips jetzt einfacher! Befolge diese einfachen Schritte, um deine Beiträge mit schönen Icons zu bereichern, die deinen Lesern zusätzliche Informationen bieten. Schritt 1: Erstelle einen neuen WordPress-Beitrag
Beginne damit, einen neuen Beitrag in WordPress zu erstellen. Füge im Editor einfach den Font Awesome Tooltip-Shortcode wie folgt ein:
[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]
Dieser Font Awesome Tooltip-Shortcode ermöglicht es dir, einen Tooltip in deinem Beitrag anzuzeigen.
Weitere WordPress Tooltip-Shortcodes findest du in unserem detaillierten Tooltip-Shortcode-Dokument; tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/ Schritt 2: Vorschau deines Tooltips
Sobald du den Shortcode hinzugefügt hast, gehe zur Frontend-Ansicht deines WordPress-Beitrags. Du wirst ein schönes Fragezeichen-Icon sehen, das so aussieht:
Font Awesome Tooltip-Icon
Wenn Benutzer über das Fragezeichen-Icon fahren, erscheint ein Tooltip-Popup, das weitere Details bereitstellt:
Font Awesome Tooltip-Popup Schritt 3: Passe deinen Tooltip an
Du hast die Flexibilität, die Größe und Farbe deiner Font Awesome-Icons anzupassen. Wenn du beispielsweise das Fragezeichen-Icon größer machen möchtest, ändere einfach den Größenparameter von 2x auf 3x, 4x oder sogar größer! Hier ist ein Beispiel: Font Awesome Tooltip-Popup-Fenster im Frontend
Um die Farbe zu ändern, modifiziere den Farbparameter auf jeden gewünschten Hex-Wert, wie z.B. #cccccc oder #eeeeee. Schritt 4: Wähle deinen Icon-Stil
Du kannst auch den Stil deines Font Awesome Tooltips ändern, indem du den Set-Parameter änderst:
fas — Fette Icons
far — Reguläre Icons
fab — Marken-Icons
Kurze Zusammenfassung, was du wissen musst:
tooltip_id: Dies ist die ID des Tooltips, den du im WordPress Tooltip-Editor erstellt hast.
set: Wähle zwischen fetten (fas), regulären (far) oder Marken (fab) Icons.
icon: Wir haben das Fragezeichen-Icon verwendet, aber denk daran, dass es über 1.588 atemberaubende Icons zur Auswahl gibt!
size: Fühle dich frei, die Größe auf 3x, 4x usw. zu erhöhen, je nach deinem Designvorlieben.
color: Passe die Farbe an, um sie an deine Seite anzupassen, z.B. #eeeeee.
Jetzt bist du bereit, deine WordPress-Beiträge mit wunderbaren Font Awesome Tooltips zu bereichern! Viel Spaß beim Bloggen! Fazit:
Font Awesome umfasst über 1.500 hochwertige Icons, die in Bezug auf Größe, Farbe und Stil mit CSS angepasst werden können. Diese Icons sind so konzipiert, dass sie browserübergreifend kompatibel sind. Font Awesome Tooltips sind ein nützliches Element zur Verbesserung der Benutzerinteraktion und zur Bereitstellung hilfreicher Informationen auf visuell ansprechende Weise auf Webseiten.
Wenn du etwas ändern möchtest, zögere bitte nicht, uns zu informieren, wir werden unser Bestes tun, um es so schnell wie möglich zu erledigen (es ist 01:52 Uhr).
Wenn alles gut funktioniert, ändere bitte den Zugang zu deiner Testseite, wir haben uns nie in dein Konto eingeloggt, um deine privaten Daten und persönlichen Informationen zu schützen
Danke, hab einen gesegneten Tag mit deinen Lieben
Mit freundlichen Grüßen,
WordPress Tooltips Support
Leave a Reply