Home › Posts tagged font-awesome tooltips

Rezolvarea conflictelor de teme între Awesome și Bootstrap în pluginul de tooltip-uri WordPress, cum să folosești tooltip-urile font-awesome – Versiunea 35.8.8 acum disponibilă

Posted on by team Posted in Document Plugin Tooltip pentru Wordpress(Romanian) — No Comments ↓

Bună, dragi utilizatori ai pluginului WordPress Tooltip, sper că acest mesaj vă găsește bine și că vă bucurați de zile minunate alături de familie. Am primit un ticket de la un utilizator uimitor al pluginului WordPress Tooltip care a raportat un conflict CSS cu tema lor în pluginul WordPress Tooltips. Dezvoltatorul nostru WordPress a verificat tema și a constatat că aceasta intră în conflict cu Bootstrap și Font Awesome, care sunt utilizate de tooltips, printre altele. Pentru a rezolva problema pentru utilizatorul nostru valoros de tooltips, dezvoltatorul nostru de WordPress Tooltips a lansat o nouă versiune: WordPress Tooltips Pro Plus 35.8.8.

1: Am rezolvat conflictul dintre temă și cadrul Bootstrap inclus în tooltipurile WordPress:

Bună echipă de suport,
În primul rând: mulțumiri enorme din nou pentru răspunsul incredibil de rapid și pentru munca de noapte târziu.
Cu 35.8.8 aproape totul este perfect de partea mea:

Pagina de comenzi WooCommerce → avertismentele PHP au dispărut ✅

Salient → Panoul de administrare tipografie → nu mai este rupt ✅

Iconițele sociale din antet/subsol → arată bine ✅

Există doar o regresie care a apărut imediat după actualizarea la 35.8.8:

Pe pagina principală, aspectul antetului/eroi pe mobil este rupt (blocul de meniu/antet se deplasează și distanțarea este greșită).

Aceasta a fost deja reparată în versiunea anterioară, dar cu 35.8.8 a revenit.

Din nou, vă mulțumesc foarte mult pentru munca voastră neobosită și pentru răspunsurile super-rapide — apreciez cu adevărat cât de flexibili și de ajutor sunteți!

Cu căldură,

Am rezolvat problema pentru utilizatorul de tooltipuri și am răspuns:

Bună

Sper că acest mesaj te găsește bine și că ai zile fericite alături de familie 

Ne pare rău pentru problemă, am verificat codurile temei și ale pluginului nostru, am testat această problemă pe diverse rezoluții și, în cele din urmă, am descoperit că a fost cauzată de un conflict între Bootstrap și temă. Soluția este simplă, te rugăm să deschizi panoul de setări globale ale tooltipurilor și să dezactivezi opțiunea: „Activează / Dezactivează CSS Bootstrap pentru a evita conflictele cu tema?”, din partea noastră, am constatat că toate lucrurile funcționează bine 

Ai putea, te rog, să faci un test și să ne dai un feedback? Dacă există vreo problemă, te rugăm să nu eziți să ne spui, o vom rezolva pentru tine cât mai repede posibil 

Mulțumim, să ai o zi binecuvântată alături de cei dragi 

Cu cele mai bune gânduri,

Suport WordPress Tooltips

2: Pagina de comenzi WooCommerce: mai multe avertismente PHP apar încă sub secțiunea detalii comenzi (legate de post_type fiind null):

Am rezolvat, am rescris codurile noastre astfel pentru a rezolva problema:

if (isset($post->post_type)) {

if ($post->post_type == ‘tooltips’) { add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Afișați extrasul în tooltip pop-up?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }

Funcționează bine acum

3: Panoul de tipografie Salient: interfața de administrare sub Salient → Tipografie devine ruptă și nealiniată atunci când WordPress Tooltips Pro este activ.

Am rezolvat, am revizuit codul temei de bază și am constatat că include o clasă .tooltip, care intră în conflict cu clasa .tooltips din fișierul nostru admin.css. Am rescris pluginul nostru WordPress Tooltips astfel:

încărcați fișierul admin.css pentru pluginul WordPress Tooltips în zona wp-admin doar atunci când ecranul curent aparține pluginului.

Coduri:

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

Funcționează bine acum

4: Iconițele sociale: iconițele Font Awesome din meniu și subsol (linkuri sociale) încă se afișează incorect sau ca niște casete goale.

Am rezolvat, în tema Salient, am constatat că acestea își încarcă scripturile târziu astfel:

add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );

Am rescris pluginul nostru pentru a încărca Font Awesome târziu pentru a evita conflictele cu alte teme sau pluginuri:

add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);

Astfel, toate codurile din tema Salient vor rula mai întâi, codurile noastre vor apela la încărcarea fontului awesome la final.

Prin urmare, toate codurile din tema Salient vor fi executate cu prioritate, iar pluginul nostru va apela în cele din urmă Font Awesome pentru a se încărca.

Funcționează bine acum

Tema utilizatorului folosea Font Awesome 6.5, iar tooltipurile noastre Font Awesome utilizau de asemenea Font Awesome 6.4 în WordPress Tooltips Pro Plus 35.8.8. Am actualizat tooltipurile Font Awesome pentru a folosi cea mai recentă versiune: Font Awesome 7.1. Ce este Font Awesome?

Font Awesome este un toolkit popular de iconițe și font web care oferă o vastă colecție de iconițe vectoriale scalabile și logo-uri sociale. Permite dezvoltatorilor să încorporeze cu ușurință iconițe de înaltă calitate în site-urile și aplicațiile lor fără a necesita fișiere de imagine. Caracteristici cheie ale Font Awesome:

Iconițe scalabile: Fiind bazate pe vectori, iconițele Font Awesome pot fi scalate la orice dimensiune fără a pierde calitate, făcându-le perfecte pentru designuri responsive.
Compatibilitate între browsere: Font Awesome funcționează perfect pe toate browserele web moderne.
Integrare ușoară: Dezvoltatorii pot integra cu ușurință Font Awesome în proiectele lor folosind un simplu tag <link> sau instalându-l prin manageri de pachete precum npm sau Yarn.
Personalizabil: Iconițele pot fi stilizate cu CSS, permițând modificări de culoare, dimensiune, rotație și multe altele pentru a se potrivi cerințelor de design ale unui site web.
Accesibilitate: Iconițele Font Awesome pot fi făcute accesibile prin atribute HTML corespunzătoare, asigurându-se că sunt utilizabile de cititoarele de ecran.
Actualizări regulate: Toolkitul este actualizat frecvent cu noi iconițe, îmbunătățind biblioteca sa în timp.

De ce utilizatorii apreciază Font Awesome:

Varietate largă: Font Awesome oferă mii de iconițe care acoperă numeroase categorii, oferind utilizatorilor suficiente opțiuni pentru a găsi iconița perfectă pentru orice aplicație.
Simplitate: Sintaxa pentru utilizarea Font Awesome este simplă, făcându-l ușor de implementat pentru dezvoltatori de toate nivelurile de abilități.
Performanță: Fiind un set de iconițe bazat pe fonturi, Font Awesome se încarcă de obicei mai repede decât iconițele tradiționale din imagini, contribuind la îmbunătățirea performanței site-ului.
Suport comunitar: Cu o comunitate mare de utilizatori și documentație cuprinzătoare, dezvoltatorii pot găsi cu ușurință suport, tutoriale și exemple.
Stil consistent: Toate iconițele au un stil uniform, ceea ce ajută la menținerea consistenței vizuale în aplicațiile web.
Opțiuni gratuite și plătite: Font Awesome oferă atât versiuni gratuite, cât și premium, permițând utilizatorilor să aleagă în funcție de nevoile și bugetul lor.

Concluzie

Font Awesome a devenit o soluție preferată pentru mulți dezvoltatori datorită versatilității, ușurinței de utilizare și bibliotecii extinse de iconițe. Indiferent dacă construiești un site web simplu sau o aplicație web complexă, Font Awesome oferă instrumentele necesare pentru a îmbunătăți designul UI și a îmbunătăți experiența utilizatorului. Ce sunt Tooltipurile Font Awesome?

Tooltipurile Font Awesome sunt o caracteristică care permite dezvoltatorilor să creeze casete de informații sau sugestii hoverabile folosind iconițe Font Awesome, incluse în versiunea wordpress tooltips pro plus 19.9.8. Aceste tooltipuri oferă context sau informații suplimentare despre un element de pe o pagină web atunci când un utilizator trece cu cursorul peste acesta. Caracteristici cheie ale Tooltipurilor Font Awesome:

Iconițe: Poți încorpora cu ușurință iconițe din biblioteca Font Awesome în tooltipurile tale, îmbunătățind atractivitatea vizuală și experiența utilizatorului.
Personalizare: Tooltipurile pot fi stilizate și personalizate pentru a se potrivi designului site-ului tău, permițând ajustări de culoare, dimensiune și poziționare.
Responsivitate: Acestea se adaptează bine la diferite dimensiuni de ecran, făcându-le potrivite atât pentru interfețele desktop, cât și pentru cele mobile.
Accesibilitate: Tooltipurile implementate corect pot îmbunătăți accesibilitatea prin furnizarea de informații suplimentare fără a aglomera UI-ul.
Suport JavaScript: Multe implementări de tooltipuri folosesc JavaScript sau cadre CSS (cum ar fi Bootstrap) pentru a îmbunătăți funcționalitatea, cum ar fi efectele de afișare și ascundere.

Cum să adaugi Tooltipuri Font Awesome în Postarea ta WordPress

Crearea de conținut captivant în postările tale WordPress a devenit mai ușoară cu tooltipurile Font Awesome! Urmează acești pași simpli pentru a-ți îmbunătăți postările cu iconițe frumoase care oferă informații suplimentare cititorilor tăi. Pasul 1: Creează o Nouă Postare WordPress

Începe prin a crea o nouă postare în WordPress. În editor, pur și simplu inserează shortcode-ul tooltip Font Awesome astfel:

[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]

Acest shortcode pentru tooltip Font Awesome îți va permite să afișezi un tooltip în postarea ta.

Mai multe shortcode-uri pentru tooltipuri WordPress pot fi găsite în documentația noastră detaliată despre shortcode-uri; tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/ Pasul 2: Previziunea Tooltipului Tău

Odată ce ai adăugat shortcode-ul, mergi la partea din față a postării tale WordPress. Vei vedea o frumoasă iconiță de cerc cu întrebare, care arată astfel:

Iconița Tooltip Font Awesome

Când utilizatorii trec cu mouse-ul peste cercul cu întrebare, un popup tooltip va apărea, oferind mai multe detalii:

Popup Tooltip Font Awesome Pasul 3: Personalizează-ți Tooltipul

Ai flexibilitatea de a personaliza dimensiunea și culoarea iconițelor tale Font Awesome. De exemplu, dacă vrei să faci iconița cercului cu întrebare mai mare, pur și simplu schimbă parametrul de dimensiune de la 2x la 3x, 4x sau chiar mai mare! Iată un exemplu: fereastra popup tooltip font awesome în partea din față

Pentru a schimba culoarea, modifică parametrul de culoare la orice valoare hex preferi, cum ar fi #cccccc sau #eeeeee. Pasul 4: Alege Stilul Iconiței Tale

Poți, de asemenea, să ajustezi stilul tooltipului tău Font Awesome schimbând parametrul set:

fas — Iconițe solide
far — Iconițe regulate
fab — Iconițe de marcă

Rezumat rapid al ceea ce trebuie să știi:

tooltip_id: Acesta este ID-ul tooltipului pe care l-ai creat în editorul de tooltipuri WordPress.
set: Alege între iconițe solide (fas), regulate (far) sau de marcă (fab).
icon: Am folosit iconița cercului cu întrebare, dar amintește-ți, există peste 1.588 de iconițe uimitoare disponibile pentru tine!
size: Nu ezita să crești dimensiunea la 3x, 4x etc., în funcție de preferințele tale de design.
color: Personalizează culoarea pentru a se potrivi cu site-ul tău, cum ar fi #eeeeee.

Acum ești pregătit să îmbunătățești postările tale WordPress cu tooltipuri delicioase Font Awesome! Blogging plăcut! Concluzie:

Font Awesome include peste 1.500 de iconițe de înaltă calitate care pot fi personalizate în ceea ce privește dimensiunea, culoarea și stilul folosind CSS

„Acum ești pregătit să îmbunătățești postările tale WordPress cu minunatele tooltip-uri Font Awesome! Blogging plăcut!

Concluzie:

Font Awesome include peste 1.500 de pictograme de înaltă calitate care pot fi personalizate în ceea ce privește dimensiunea, culoarea și stilul folosind CSS. Aceste pictograme sunt concepute pentru a fi compatibile cu diferite browsere. Tooltip-urile Font Awesome sunt un component util pentru îmbunătățirea interacțiunii utilizatorului și oferirea de informații utile într-un mod vizual atrăgător pe paginile web.

Dacă este nevoie să facem vreo modificare, te rugăm să nu eziți să ne spui, vom încerca să o finalizăm cât mai repede posibil (este ora 01:52 AM pentru noi).

Dacă totul funcționează bine, te rugăm să schimbi accesul site-ului tău de test, nu ne-am conectat niciodată la contul tău, pentru a-ți proteja datele private și informațiile personale

Mulțumim, să ai o zi binecuvântată alături de cei dragi

Cu cele mai bune gânduri,

Asistența pentru Tooltip-uri WordPress

Tagged with: , ,

Résolution des Conflits de Thème avec Awesome et Bootstrap dans le Plugin Tooltip WordPress, comment utiliser les tooltips font-awesome – Version 35.8.8 Maintenant Disponible

Posted on by wordpress tooltips Posted in Document sur le plugin WordPress Tooltip(French) — No Comments ↓

Salut, chers utilisateurs du plugin WordPress Tooltip, j’espère que ce message vous trouve en bonne santé et que vous passez de merveilleux moments avec votre famille. Nous avons reçu un ticket d’un utilisateur incroyable du plugin WordPress Tooltip qui a signalé un conflit CSS avec son thème dans le plugin WordPress Tooltips. Notre développeur WordPress a vérifié le thème et a constaté qu’il était en conflit avec Bootstrap et Font Awesome, qui sont utilisés par les tooltips, entre autres. Pour résoudre le problème pour notre précieux utilisateur de tooltips, notre développeur WordPress Tooltips a publié une nouvelle version : WordPress Tooltips Pro Plus 35.8.8.

1 : Résolution du conflit entre le thème et le framework Bootstrap inclus dans le tooltip WordPress :

Bonjour équipe de support,
Tout d'abord : un énorme merci encore pour le retour incroyablement rapide et le travail tardif.
Avec la version 35.8.8, presque tout est parfait de mon côté :

Page des commandes WooCommerce → les avertissements PHP ont disparu ✅

Salient → Panneau d'administration de typographie → plus cassé ✅

Icônes sociales dans l'en-tête/pied de page → ça a l'air bien ✅

Il y a juste une régression qui est apparue juste après la mise à jour vers 35.8.8 :

Sur la page d'accueil, la mise en page de l'en-tête/hero mobile est cassée (le bloc menu/en-tête se déplace et l'espacement est incorrect).

Cela avait déjà été corrigé dans la version précédente, mais avec 35.8.8, c'est de retour.

Encore une fois, merci beaucoup pour votre travail acharné et vos réponses super rapides — j'apprécie vraiment votre flexibilité et votre aide !

Cordialement,

Nous avons résolu le problème pour l’utilisateur de tooltip et nous avons répondu :

Bonjour

J'espère que ce message vous trouve en bonne santé et que vous passez des jours heureux avec votre famille 

Désolé pour le problème, nous avons vérifié les codes du thème et de notre plugin, nous avons également testé ce problème sur différentes résolutions et avons finalement découvert qu'il était causé par un conflit entre Bootstrap et le thème. La solution est simple, veuillez ouvrir le panneau des paramètres globaux des tooltips et désactiver l'option : « Activer / Désactiver le CSS Bootstrap pour éviter les conflits de thème ? ». De notre côté, nous avons constaté que tout fonctionne bien 

Pourriez-vous faire un test et nous donner un retour ? S'il y a un problème, n'hésitez pas à nous le dire, nous le résoudrons pour vous dès que possible 

Merci, passez une journée bénie avec vos proches 

Cordialement,

Support WordPress Tooltips

2 : Page des commandes WooCommerce : plusieurs avertissements PHP apparaissent toujours sous la section des détails de la commande (liés à post_type étant nul) :

Fait, nous avons réécrit notre code comme ceci pour résoudre le problème :

if (isset($post->post_type)) {

if ($post->post_type == ‘tooltips’) { add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Afficher l’extrait dans le tooltip pop-up ?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }

Ça fonctionne bien maintenant

3 : Panneau de typographie Salient : l’interface d’administration sous Salient → Typographie devient cassée et désalignée lorsque WordPress Tooltips Pro est actif.

Fait, nous avons examiné le code du thème principal et avons constaté qu'il inclut une classe .tooltip, qui entre en conflit avec la classe .tooltips dans notre fichier admin.css. Nous avons réécrit notre plugin WordPress Tooltips de cette manière :

Charger le fichier admin.css pour le plugin WordPress Tooltips dans la zone wp-admin uniquement lorsque l'écran actuel appartient au plugin.

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

Ça fonctionne bien maintenant

4 : Icônes sociales : les icônes Font Awesome dans le menu et le pied de page (liens sociaux) s’affichent toujours incorrectement ou sous forme de cases vides.

Fait, dans le thème Salient, nous avons constaté qu'ils chargent leurs scripts tard comme ceci :

add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );

Nous avons réécrit notre plugin pour charger Font Awesome tard afin d'éviter les conflits avec d'autres thèmes ou plugins :

add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);

Ainsi, tout le code dans le thème Salient s'exécutera en premier, notre code chargera Font Awesome en dernier.

Par conséquent, tout le code dans le thème Salient sera exécuté avec priorité, et notre plugin appellera enfin Font Awesome pour le charger.

Ça fonctionne bien maintenant

Le thème de l’utilisateur utilisait Font Awesome 6.5, et nos tooltips Font Awesome utilisaient également Font Awesome 6.4 dans WordPress Tooltips Pro Plus 35.8.8. Nous avons mis à jour les tooltips Font Awesome pour utiliser la dernière version : Font Awesome 7.1. Qu’est-ce que Font Awesome ?

Font Awesome est un ensemble d’icônes populaire et une police web qui fournit une vaste collection d’icônes vectorielles évolutives et de logos sociaux. Il permet aux développeurs d’incorporer facilement des icônes de haute qualité dans leurs sites web et applications sans avoir besoin de fichiers image. Caractéristiques clés de Font Awesome :

Icônes évolutives : Étant basées sur des vecteurs, les icônes Font Awesome peuvent être redimensionnées à n'importe quelle taille sans perdre en qualité, ce qui les rend parfaites pour les designs responsives.
Compatibilité entre navigateurs : Font Awesome fonctionne parfaitement sur tous les navigateurs web modernes.
Intégration facile : Les développeurs peuvent facilement intégrer Font Awesome dans leurs projets à l'aide d'une simple balise <link> ou en l'installant via des gestionnaires de paquets comme npm ou Yarn.
Personnalisable : Les icônes peuvent être stylisées avec CSS, permettant des changements de couleur, de taille, de rotation, et bien plus pour s'adapter aux exigences de design d'un site web.
Accessibilité : Les icônes Font Awesome peuvent être rendues accessibles grâce à des attributs HTML appropriés, garantissant qu'elles sont utilisables par les lecteurs d'écran.
Mises à jour régulières : L'ensemble d'outils est fréquemment mis à jour avec de nouvelles icônes, enrichissant sa bibliothèque au fil du temps.

Pourquoi les utilisateurs aiment Font Awesome :

Large variété : Font Awesome propose des milliers d'icônes couvrant de nombreuses catégories, offrant aux utilisateurs de nombreuses options pour trouver l'icône parfaite pour n'importe quelle application.
Simplicité : La syntaxe pour utiliser Font Awesome est simple, ce qui facilite la mise en œuvre pour les développeurs de tous niveaux de compétence.
Performance : En tant qu'ensemble d'icônes basé sur une police, Font Awesome se charge généralement plus rapidement que les icônes d'image traditionnelles, contribuant à améliorer les performances du site web.
Support communautaire : Avec une grande communauté d'utilisateurs et une documentation complète, les développeurs peuvent facilement trouver du soutien, des tutoriels et des exemples.
Style cohérent : Toutes les icônes ont un style uniforme, ce qui aide à maintenir la cohérence visuelle à travers les applications web.
Options gratuites et payantes : Font Awesome propose à la fois des versions gratuites et premium, permettant aux utilisateurs de choisir en fonction de leurs besoins et de leur budget.

Conclusion

Font Awesome est devenu une solution incontournable pour de nombreux développeurs en raison de sa polyvalence, de sa facilité d’utilisation et de sa vaste bibliothèque d’icônes. Que vous construisiez un site web simple ou une application web complexe, Font Awesome fournit les outils nécessaires pour améliorer le design de l’interface utilisateur et améliorer l’expérience utilisateur. Qu’est-ce que les tooltips Font Awesome ?

Les tooltips Font Awesome sont une fonctionnalité qui permet aux développeurs de créer des boîtes d’information ou des indices survolables en utilisant des icônes Font Awesome, incluses dans la version 19.9.8 de WordPress Tooltips Pro Plus. Ces tooltips fournissent un contexte ou des informations supplémentaires sur un élément d’une page web lorsque l’utilisateur passe la souris dessus. Caractéristiques clés des tooltips Font Awesome :

Icônes : Vous pouvez facilement incorporer des icônes de la bibliothèque Font Awesome dans vos tooltips, améliorant l'attrait visuel et l'expérience utilisateur.
Personnalisation : Les tooltips peuvent être stylisés et personnalisés pour correspondre au design de votre site web, permettant des ajustements de couleur, de taille et de positionnement.
Réactivité : Ils s'adaptent souvent bien à différentes tailles d'écran, ce qui les rend adaptés aux interfaces de bureau et mobiles.
Accessibilité : Les tooltips correctement implémentés peuvent améliorer l'accessibilité en fournissant des informations supplémentaires sans encombrer l'interface utilisateur.
Support JavaScript : De nombreuses implémentations de tooltips tirent parti de JavaScript ou de frameworks CSS (comme Bootstrap) pour améliorer la fonctionnalité, comme les effets d'affichage et de masquage.

Comment ajouter des tooltips Font Awesome dans votre article WordPress

Créer un contenu engageant dans vos articles WordPress est devenu plus facile avec les tooltips Font Awesome ! Suivez ces étapes simples pour améliorer vos articles avec de belles icônes qui fournissent des informations supplémentaires à vos lecteurs. Étape 1 : Créer un nouvel article WordPress

Commencez par créer un nouvel article dans WordPress. Dans l’éditeur, insérez simplement le shortcode de tooltip Font Awesome comme ceci :

[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]

Ce shortcode de tooltip Font Awesome vous permettra d’afficher un tooltip dans votre article.

Plus de shortcodes WordPress tooltips peuvent être trouvés dans notre document détaillé sur les shortcodes de tooltips ; tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/ Étape 2 : Prévisualiser votre tooltip

Une fois que vous avez ajouté le shortcode, rendez-vous sur le front-end de votre article WordPress. Vous verrez une jolie icône de cercle de question, qui ressemble à ceci :

Icône de tooltip Font Awesome

Lorsque les utilisateurs passent la souris sur le cercle de question, un pop-up de tooltip apparaîtra, fournissant plus de détails :

Pop-up de tooltip Font Awesome Étape 3 : Personnaliser votre tooltip

Vous avez la flexibilité de personnaliser la taille et la couleur de vos icônes Font Awesome. Par exemple, si vous souhaitez agrandir l’icône de cercle de question, il vous suffit de changer le paramètre de taille de 2x à 3x, 4x, ou même plus grand ! Voici un exemple : fenêtre pop-up de tooltip font awesome en front-end

Pour changer la couleur, modifiez le paramètre de couleur à n’importe quelle valeur hexadécimale que vous préférez, comme #cccccc ou #eeeeee. Étape 4 : Choisir le style de votre icône

Vous pouvez également ajuster le style de votre tooltip Font Awesome en changeant le paramètre set :

fas — Icônes solides
far — Icônes régulières
fab — Icônes de marque

Résumé rapide de ce que vous devez savoir :

tooltip_id : C'est l'ID du tooltip que vous avez créé dans l'éditeur de tooltips WordPress.
set : Choisissez entre des icônes solides (fas), régulières (far) ou de marque (fab).
icon : Nous avons utilisé l'icône de cercle de question, mais rappelez-vous, il y a plus de 1 588 icônes magnifiques disponibles pour vous !
size : N'hésitez pas à augmenter la taille à 3x, 4x, etc., en fonction de vos préférences de design.
color : Personnalisez la couleur pour correspondre à votre site, comme #eeeeee.

Vous êtes maintenant prêt à améliorer vos articles WordPress avec de délicieux tooltips Font Awesome ! Bon blogging ! Conclusion :

Font Awesome comprend plus de 1 500 icônes de haute qualité qui peuvent être personnalisées en termes de taille, de couleur et de style à l’aide de CSS. Ces icônes sont conçues pour être compatibles entre navigateurs. Les tooltips Font Awesome sont un composant utile pour améliorer l’interaction utilisateur et fournir des informations utiles de manière visuellement attrayante sur les pages web.

Si vous avez besoin que nous apportions des modifications, n’hésitez pas à nous le dire, nous ferons de notre mieux pour le compléter dès que possible (il est 01h52 chez nous).

Si tout fonctionne bien, veuillez changer l’accès de votre site de test, nous ne nous sommes jamais connectés à votre compte, pour protéger vos données privées et vos informations personnelles

Merci, passez une journée bénie avec vos proches

Cordialement,

Support WordPress Tooltips

Tagged with: , ,

Corriendo Conflictos de Tema con Awesome y Bootstrap en el Plugin de Tooltips de WordPress, cómo usar tooltips de font-awesome – Versión 35.8.8 Ahora Disponible

Posted on by wordpress tooltips Posted in Documento del plugin de Wordpress Tooltip(Spanish) — No Comments ↓

WordPress Tooltips: Hola, queridos usuarios del Plugin de Tooltip de WordPress, espero que este mensaje los encuentre bien y que estén disfrutando de maravillosos días con su familia. Recibimos un ticket de un increíble usuario de Tooltip de WordPress que reportó un conflicto de CSS con su tema en el Plugin de Tooltips de WordPress. Nuestro desarrollador de WordPress revisó el tema y encontró que hay un conflicto con Bootstrap y Font Awesome, que son utilizados por los tooltips, entre otras cosas. Para resolver el problema para nuestro valioso usuario de tooltips, nuestro desarrollador de Tooltips de WordPress ha lanzado una nueva versión: WordPress Tooltips Pro Plus 35.8.8.

1: Se resolvió el conflicto entre el tema y el marco de Bootstrap incluido en el tooltip de WordPress:

Hola equipo de soporte,
Primero que nada: muchas gracias nuevamente por la increíble rapidez y el trabajo nocturno.
Con la versión 35.8.8 casi todo está perfecto de mi lado:

Página de pedidos de WooCommerce → las advertencias de PHP han desaparecido ✅

Salient → Panel de administración de tipografía → ya no está roto ✅

Iconos sociales en el encabezado/pie de página → se ven bien ✅

Solo hay una regresión que apareció justo después de actualizar a 35.8.8:

En la página de inicio, el diseño del encabezado/héroe móvil está roto (el bloque de menú/encabezado se desplaza y el espaciado se desajusta).

Esto ya se había solucionado en la versión anterior, pero con 35.8.8 ha vuelto.

Nuevamente, muchas gracias por su incansable trabajo y las respuestas súper rápidas; ¡realmente aprecio lo flexibles y útiles que son!

Con cariño,

Resolvímos el problema para el usuario de tooltip y respondimos:

Hola

Espero que este mensaje te encuentre bien y que estés teniendo días felices con tu familia 

Lamentamos el problema, revisamos los códigos del tema y nuestro plugin, también probamos este problema en varias resoluciones y, finalmente, descubrimos que fue causado por un conflicto entre Bootstrap y el tema. La solución es sencilla, por favor abre el panel de configuraciones globales de tooltips y desactiva la opción: “¿Habilitar / Deshabilitar CSS de Bootstrap para evitar conflictos con el tema?”, de nuestra parte, encontramos que todo funciona bien 

¿Podrías hacer una prueba y darnos tu opinión? Si hay algún problema, no dudes en decírnoslo, lo resolveremos lo antes posible 

Gracias, que tengas un día bendecido con tus seres queridos 

Saludos cordiales,

Soporte de WordPress Tooltips

2: Página de pedidos de WooCommerce: varias advertencias de PHP aún aparecen en la sección de detalles del pedido (relacionadas con post_type siendo nulo):

Hecho, hemos reescrito nuestros códigos así para resolver el problema:

if (isset($post->post_type)) {

if ($post->post_type == ‘tooltips’) { add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘¿Mostrar extracto en el tooltip emergente?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }

Ahora funciona bien

3: Panel de tipografía de Salient: la interfaz de administración bajo Salient → Tipografía se vuelve rota y desalineada cuando WordPress Tooltips Pro está activo.

Hecho, revisamos el código del tema principal y encontramos que incluye una clase .tooltip, que entra en conflicto con la clase .tooltips en nuestro archivo admin.css. Hemos reescrito nuestro plugin de tooltips de WordPress de esta manera:

Cargar el archivo admin.css para el plugin de Tooltips de WordPress en el área de wp-admin solo cuando la pantalla actual pertenece al plugin.

Códigos:

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

Ahora funciona bien

4: Iconos sociales: los iconos de Font Awesome en el menú y pie de página (enlaces sociales) aún se muestran incorrectamente o como cuadros vacíos.

Hecho, en el tema Salient, encontramos que cargan sus scripts tarde así:

add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );

Reescribimos nuestro plugin para cargar Font Awesome tarde para evitar conflictos con otros temas o plugins:

add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);

Así que todo el código en el tema Salient se ejecutará primero, nuestro código cargará Font Awesome al final.

Por lo tanto, todo el código en el tema Salient se ejecutará con prioridad, y nuestro plugin finalmente llamará a Font Awesome para cargar.

Ahora funciona bien

El tema del usuario estaba utilizando Font Awesome 6.5, y nuestros Tooltips de Font Awesome también estaban utilizando Font Awesome 6.4 en WordPress Tooltips Pro Plus 35.8.8. Actualizamos los tooltips de Font Awesome para usar la última versión: Font Awesome 7.1. ¿Qué es Font Awesome?

Font Awesome es un popular conjunto de iconos y fuente web que proporciona una vasta colección de iconos vectoriales escalables y logotipos sociales. Permite a los desarrolladores incorporar fácilmente iconos de alta calidad en sus sitios web y aplicaciones sin necesidad de archivos de imagen. Características clave de Font Awesome:

Iconos escalables: Al ser basados en vectores, los iconos de Font Awesome se pueden escalar a cualquier tamaño sin perder calidad, lo que los hace perfectos para diseños responsivos.
Compatibilidad entre navegadores: Font Awesome funciona sin problemas en todos los navegadores web modernos.
Integración fácil: Los desarrolladores pueden integrar fácilmente Font Awesome en sus proyectos utilizando una simple etiqueta <link> o instalándolo a través de gestores de paquetes como npm o Yarn.
Personalizable: Los iconos se pueden estilizar con CSS, permitiendo cambios en color, tamaño, rotación y mucho más para adaptarse a los requisitos de diseño de un sitio web.
Accesibilidad: Los iconos de Font Awesome se pueden hacer accesibles a través de atributos HTML adecuados, asegurando que sean utilizables por lectores de pantalla.
Actualizaciones regulares: El conjunto se actualiza frecuentemente con nuevos iconos, mejorando su biblioteca con el tiempo.

¿Por qué a los usuarios les gusta Font Awesome?

Amplia variedad: Font Awesome ofrece miles de iconos que cubren numerosas categorías, proporcionando a los usuarios muchas opciones para encontrar el icono perfecto para cualquier aplicación.
Simplicidad: La sintaxis para usar Font Awesome es sencilla, lo que facilita su implementación a desarrolladores de todos los niveles de habilidad.
Rendimiento: Al ser un conjunto de iconos basado en fuentes, Font Awesome generalmente se carga más rápido que los iconos de imagen tradicionales, contribuyendo a mejorar el rendimiento del sitio web.
Soporte comunitario: Con una gran comunidad de usuarios y documentación completa, los desarrolladores pueden encontrar fácilmente soporte, tutoriales y ejemplos.
Estilo consistente: Todos los iconos tienen un estilo uniforme, lo que ayuda a mantener la consistencia visual en las aplicaciones web.
Opciones gratuitas y de pago: Font Awesome ofrece versiones tanto gratuitas como premium, permitiendo a los usuarios elegir según sus necesidades y presupuesto.

Conclusión

Font Awesome se ha convertido en una solución preferida para muchos desarrolladores debido a su versatilidad, facilidad de uso y extensa biblioteca de iconos. Ya sea que estés construyendo un sitio web simple o una aplicación web compleja, Font Awesome proporciona las herramientas necesarias para mejorar el diseño de la interfaz de usuario y mejorar la experiencia del usuario. ¿Qué son los Tooltips de Font Awesome?

Los Tooltips de Font Awesome son una característica que permite a los desarrolladores crear cuadros de información o pistas que se pueden activar al pasar el cursor sobre iconos de Font Awesome, incluidos en la versión 19.9.8 de WordPress Tooltips Pro Plus. Estos tooltips proporcionan contexto o información adicional sobre un elemento en una página web cuando un usuario pasa el cursor sobre él. Características clave de los Tooltips de Font Awesome:

Iconos: Puedes incorporar fácilmente iconos de la biblioteca de Font Awesome en tus tooltips, mejorando el atractivo visual y la experiencia del usuario.
Personalización: Los tooltips se pueden estilizar y personalizar para que coincidan con el diseño de tu sitio web, permitiendo ajustes en color, tamaño y posicionamiento.
Responsividad: A menudo se adaptan bien a diferentes tamaños de pantalla, lo que los hace adecuados tanto para interfaces de escritorio como móviles.
Accesibilidad: Los tooltips implementados correctamente pueden mejorar la accesibilidad al proporcionar información adicional sin desordenar la interfaz de usuario.
Soporte de JavaScript: Muchas implementaciones de tooltips aprovechan JavaScript o marcos de CSS (como Bootstrap) para mejorar la funcionalidad, como efectos de mostrar y ocultar.

Cómo agregar Tooltips de Font Awesome en tu publicación de WordPress

¡Crear contenido atractivo en tus publicaciones de WordPress ahora es más fácil con los tooltips de Font Awesome! Sigue estos simples pasos para mejorar tus publicaciones con hermosos iconos que proporcionan información adicional a tus lectores. Paso 1: Crea una nueva publicación de WordPress

Comienza creando una nueva publicación en WordPress. En el editor, simplemente inserta el shortcode de tooltip de Font Awesome así:

[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]

Este shortcode de tooltip de Font Awesome te permitirá mostrar un tooltip en tu publicación.

Más shortcodes de tooltips de WordPress se pueden encontrar en nuestro documento detallado sobre shortcodes de tooltips; tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/ Paso 2: Previsualiza tu Tooltip

Una vez que hayas agregado el shortcode, dirígete a la parte frontal de tu publicación de WordPress. Verás un hermoso icono de círculo de pregunta, que se ve así:

Icono de Tooltip de Font Awesome

Cuando los usuarios pasen el cursor sobre el círculo de pregunta, aparecerá un popup de tooltip, proporcionando más detalles:

Popup de Tooltip de Font Awesome Paso 3: Personaliza tu Tooltip

Tienes la flexibilidad de personalizar el tamaño y el color de tus iconos de Font Awesome. Por ejemplo, si deseas hacer que el icono de círculo de pregunta sea más grande, simplemente cambia el parámetro de tamaño de 2x a 3x, 4x o incluso más grande. Aquí tienes un ejemplo: ventana emergente de tooltip de font awesome en el front-end

Para cambiar el color, modifica el parámetro de color a cualquier valor hexadecimal que prefieras, como #cccccc o #eeeeee. Paso 4: Elige el estilo de tu icono

También puedes ajustar el estilo de tu tooltip de Font Awesome cambiando el parámetro de conjunto:

fas — Iconos sólidos
far — Iconos regulares
fab — Iconos de marca

Resumen rápido de lo que necesitas saber:

tooltip_id: Este es el ID del tooltip que creaste en el editor de tooltips de WordPress.
set: Elige entre iconos sólidos (fas), regulares (far) o de marca (fab).
icon: Usamos el icono de círculo de pregunta, pero recuerda, ¡hay más de 1,588 iconos impresionantes disponibles para que elijas!
size: Siéntete libre de aumentar el tamaño a 3x, 4x, etc., según tu preferencia de diseño.
color: Personaliza el color para que coincida con tu sitio, como #eeeeee.

¡Ahora estás listo para mejorar tus publicaciones de WordPress con encantadores tooltips de Font Awesome! ¡Feliz blogging! Conclusión:

Font Awesome incluye más de 1,500 iconos de alta calidad que se pueden personalizar en términos de tamaño, color y estilo utilizando CSS. Estos iconos están diseñados para ser compatibles entre navegadores. Los Tooltips de Font Awesome son un componente útil para mejorar la interacción del usuario y proporcionar información útil de manera visualmente atractiva en las páginas web.

Si necesitas que cambiemos algo, no dudes en decírnoslo, haremos nuestro mejor esfuerzo para completarlo lo antes posible (son las 01:52 AM).

Si todo funciona bien, por favor cambia el acceso de tu sitio de prueba, nunca hemos iniciado sesión en tu cuenta, para proteger tus datos privados e información personal

Gracias, que tengas un día bendecido con tus seres queridos

Saludos cordiales,

Soporte de WordPress Tooltips

Tagged with: , ,

Řešení konfliktů motivů s Awesome a Bootstrap v pluginu WordPress Tooltips, jak používat tooltipy font-awesome – Verze 35.8.8 nyní k dispozici

Posted on by wordpress tooltips Posted in Dokument Pluginu Tooltip pro Wordpress(Czech) — No Comments ↓

Ahoj, milí uživatelé pluginu WordPress Tooltip, doufám, že vás tato zpráva zastihne v pořádku a že si užíváte krásné dny se svou rodinou. Obdrželi jsme tiket od úžasného uživatele WordPress Tooltip, který nahlásil konflikt CSS se svým motivem v pluginu WordPress Tooltips. Náš WordPress vývojář zkontroloval motiv a zjistil, že je v konfliktu s Bootstrapem a Font Awesome, které jsou použity v tooltipech, mimo jiné. Abychom vyřešili problém pro našeho cenného uživatele tooltipu, náš vývojář WordPress Tooltips vydal novou verzi: WordPress Tooltips Pro Plus 35.8.8.

1: Vyřešen konflikt mezi motivem a frameworkem Bootstrap zahrnutým v tooltipu WordPress:

Ahoj podpora,
Především: obrovské díky za neuvěřitelně rychlou reakci a noční práci.
S verzí 35.8.8 je téměř vše na mé straně v pořádku:

Stránka objednávek WooCommerce → PHP varování zmizela ✅

Salient → Administrativní panel typografie → již není rozbitý ✅

Sociální ikony v záhlaví/zápatí → vypadají dobře ✅

Je tu jen jedna regrese, která se objevila hned po aktualizaci na 35.8.8:

Na úvodní stránce je rozbitý mobilní záhlaví/hero layout (blok menu/záhlaví se posouvá a rozestupy jsou špatné).

To bylo již opraveno v předchozí verzi, ale s 35.8.8 se to vrátilo.

Ještě jednou, moc děkuji za vaši neúnavnou práci a super rychlé odpovědi — opravdu si vážím vaší flexibility a pomoci!

S pozdravem,

Vyřešili jsme problém pro uživatele tooltipu a odpověděli jsme:

Ahoj

Doufám, že vás tato zpráva zastihne v pořádku a že máte šťastné dny se svou rodinou 

Omlouváme se za problém, zkontrolovali jsme kódy motivu a našeho pluginu, také jsme tento problém testovali na různých rozlišeních a nakonec jsme zjistili, že byl způsoben konfliktem mezi Bootstrapem a motivem. Řešení je jednoduché, prosím, otevřete globální nastavení tooltipů a deaktivujte možnost: „Povolit / Zakázat Bootstrap CSS, aby se předešlo konfliktům s motivem?“, na naší straně jsme zjistili, že vše funguje dobře 

Můžete prosím provést test a dát nám zpětnou vazbu? Pokud bude nějaký problém, neváhejte nám říct, vyřešíme to pro vás co nejdříve 

Děkujeme, mějte požehnaný den se svými blízkými 

S pozdravem,

Podpora WordPress Tooltips

2: Stránka objednávek WooCommerce: pod sekcí podrobností objednávky se stále objevuje několik PHP varování (týkající se post_type, který je null):

Hotovo, přepsali jsme naše kódy takto, abychom vyřešili problém:

if (isset($post->post_type)) {

if ($post->post_type == ‘tooltips’) { add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Zobrazit úryvek v tooltipu?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }

Nyní to funguje dobře

3: Administrativní panel typografie Salient: uživatelské rozhraní pod Salient → Typografie se stává rozbitým a nevyrovnaným, když je aktivní WordPress Tooltips Pro.

Hotovo, zkontrolovali jsme kód jádra motivu a zjistili jsme, že obsahuje třídu .tooltip, která je v konfliktu s třídou .tooltips v našem souboru admin.css. Přepsali jsme náš plugin WordPress Tooltips tímto způsobem:

Načíst soubor admin.css pro plugin WordPress Tooltips v oblasti wp-admin pouze tehdy, když aktuální obrazovka patří k pluginu.

Kódy:

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

Nyní to funguje dobře

4: Sociální ikony: Ikony Font Awesome v menu a zápatí (sociální odkazy) se stále zobrazují nesprávně nebo jako prázdné boxy.

Hotovo, v motivu Salient jsme zjistili, že načítají své skripty pozdě takto:

add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );

Přepsali jsme náš plugin, abychom načítali Font Awesome pozdě, abychom se vyhnuli konfliktům s jinými motivy nebo pluginy:

add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);

Takže všechny kódy v motivu Salient se spustí jako první, naše kódy nakonec načtou Font Awesome.

Nyní to funguje dobře

Motiv uživatele používal Font Awesome 6.5 a naše Font Awesome Tooltips také využívaly Font Awesome 6.4 ve WordPress Tooltips Pro Plus 35.8.8. Aktualizovali jsme Font Awesome tooltips, aby používaly nejnovější verzi: Font Awesome 7.1. Co je Font Awesome?

Font Awesome je populární ikony toolkit a webový font, který poskytuje obrovskou sbírku škálovatelných vektorových ikon a sociálních log. Umožňuje vývojářům snadno začlenit vysoce kvalitní ikony do svých webových stránek a aplikací bez potřeby souborů obrázků. Hlavní funkce Font Awesome:

Škálovatelné ikony: Díky tomu, že jsou vektorové, mohou být ikony Font Awesome škálovány na jakoukoli velikost bez ztráty kvality, což je činí ideálními pro responzivní designy.
Kompatibilita napříč prohlížeči: Font Awesome funguje bez problémů ve všech moderních webových prohlížečích.
Snadná integrace: Vývojáři mohou snadno integrovat Font Awesome do svých projektů pomocí jednoduchého <link> tagu nebo jeho instalací prostřednictvím správců balíčků jako npm nebo Yarn.
Přizpůsobitelnost: Ikony mohou být stylizovány pomocí CSS, což umožňuje změny v barvě, velikosti, rotaci a mnohem více, aby vyhovovaly designovým požadavkům webu.
Přístupnost: Ikony Font Awesome mohou být učiněny přístupnými prostřednictvím správných HTML atributů, což zajišťuje, že jsou použitelné pro čtečky obrazovky.
Pravidelné aktualizace: Toolkit je často aktualizován o nové ikony, což vylepšuje jeho knihovnu v průběhu času.

Proč uživatelé mají rádi Font Awesome:

Široká rozmanitost: Font Awesome nabízí tisíce ikon pokrývajících různé kategorie, což uživatelům poskytuje dostatek možností najít ideální ikonu pro jakoukoli aplikaci.
Jednoduchost: Syntaxe pro používání Font Awesome je přímočará, což usnadňuje implementaci vývojářům všech úrovní dovedností.
Výkon: Jako sada ikon založená na písmu se Font Awesome obvykle načítá rychleji než tradiční obrázkové ikony, což přispívá k lepšímu výkonu webových stránek.
Podpora komunity: S velkou komunitou uživatelů a komplexní dokumentací mohou vývojáři snadno najít podporu, návody a příklady.
Konzistentní styl: Všechny ikony mají jednotný styl, což pomáhá udržovat vizuální konzistenci napříč webovými aplikacemi.
Bezplatné a placené možnosti: Font Awesome nabízí jak bezplatné, tak prémiové verze, což uživatelům umožňuje vybrat si podle svých potřeb a rozpočtu.

Závěr

Font Awesome se stal oblíbeným řešením pro mnoho vývojářů díky své všestrannosti, snadnému použití a rozsáhlé knihovně ikon. Ať už vytváříte jednoduchou webovou stránku nebo složitou webovou aplikaci, Font Awesome poskytuje nástroje potřebné k vylepšení designu uživatelského rozhraní a zlepšení uživatelského zážitku. Co jsou Font Awesome Tooltips?

Font Awesome Tooltips jsou funkce, která umožňuje vývojářům vytvářet hoverable informační boxy nebo nápovědy pomocí ikon Font Awesome, zahrnutých ve verzi wordpress tooltips pro plus 19.9.8. Tyto tooltips poskytují další kontext nebo informace o prvku na webové stránce, když nad ním uživatel přejede kurzorem. Hlavní funkce Font Awesome Tooltips:

Ikony: Můžete snadno začlenit ikony z knihovny Font Awesome do svých tooltips, což zvyšuje vizuální přitažlivost a uživatelský zážitek.
Přizpůsobení: Tooltips mohou být stylizovány a přizpůsobeny tak, aby odpovídaly designu vaší webové stránky, což umožňuje úpravy v barvě, velikosti a umístění.
Responzivita: Často se dobře přizpůsobují různým velikostem obrazovky, což je činí vhodnými pro desktopové i mobilní rozhraní.
Přístupnost: Správně implementované tooltips mohou zlepšit přístupnost tím, že poskytují další informace, aniž by zaneřádily uživatelské rozhraní.
Podpora JavaScriptu: Mnoho implementací tooltipů využívá JavaScript nebo CSS frameworky (jako Bootstrap) k vylepšení funkčnosti, jako jsou efekty zobrazení a skrytí.

Jak přidat Font Awesome Tooltips do vašeho příspěvku WordPress

Vytváření atraktivního obsahu ve vašich příspěvcích WordPress je nyní snazší s Font Awesome tooltips! Postupujte podle těchto jednoduchých kroků, abyste vylepšili své příspěvky krásnými ikonami, které poskytují další informace vašim čtenářům. Krok 1: Vytvořte nový příspěvek WordPress

Začněte vytvořením nového příspěvku ve WordPressu. V editoru jednoduše vložte zkrácený kód Font Awesome tooltip takto:

[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]

Tento zkrácený kód Font Awesome tooltip vám umožní zobrazit tooltip ve vašem příspěvku.

Další zkrácené kódy wordpress tooltips naleznete v našem podrobném dokumentu o zkrácených kódech tooltipů; tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/ Krok 2: Náhled vašeho tooltipu

Jakmile přidáte zkrácený kód, přejděte na front-end vašeho příspěvku WordPress. Uvidíte krásnou ikonu otázkového kruhu, která vypadá takto:

Ikona Font Awesome Tooltip

Když uživatelé přejedou kurzorem nad otázkovým kruhem, objeví se vyskakovací okno tooltipu, které poskytne více podrobností:

Vyskakovací okno Font Awesome Tooltip Krok 3: Přizpůsobte svůj tooltip

Máte flexibilitu přizpůsobit velikost a barvu vašich ikon Font Awesome. Například, pokud chcete, aby byla ikona otázkového kruhu větší, jednoduše změňte parametr velikosti z 2x na 3x, 4x nebo dokonce větší! Zde je příklad: vyskakovací okno tooltipu font awesome na front-endu

Chcete-li změnit barvu, upravte parametr barvy na jakoukoli hex hodnotu, kterou preferujete, například #cccccc nebo #eeeeee. Krok 4: Vyberte styl své ikony

Můžete také upravit styl svého Font Awesome tooltipu změnou parametru set:

fas — Solid ikony
far — Pravidelné ikony
fab — Brand ikony

Rychlé shrnutí toho, co potřebujete vědět:

tooltip_id: Toto je ID tooltipu, který jste vytvořili v editoru tooltipů WordPress.
set: Vyberte mezi solid (fas), pravidelnými (far) nebo brand (fab) ikonami.
icon: Použili jsme ikonu otázkového kruhu, ale pamatujte, že máte na výběr více než 1 588 úžasných ikon!
size: Nebojte se zvýšit velikost na 3x, 4x atd., podle vašich designových preferencí.
color: Přizpůsobte barvu tak, aby odpovídala vašemu webu, například #eeeeee.

Nyní jste připraveni vylepšit své příspěvky WordPress s potěšujícími Font Awesome tooltips! Šťastné blogování! Závěr:

Nyní jste připraveni obohatit své příspěvky na WordPressu o nádherné tooltipy Font Awesome! Šťastné blogování!

Závěr:

Font Awesome zahrnuje více než 1 500 vysoce kvalitních ikon, které lze přizpůsobit velikosti, barvě a stylu pomocí CSS. Tyto ikony jsou navrženy tak, aby byly kompatibilní s různými prohlížeči. Tooltipy Font Awesome jsou užitečnou součástí pro zlepšení interakce uživatelů a poskytování užitečných informací vizuálně atraktivním způsobem na webových stránkách.

Pokud je něco, co bychom měli změnit, neváhejte nám to říct, pokusíme se to co nejdříve splnit (je 01:52 ráno).

Pokud vše funguje správně, prosím, změňte přístup na vaší testovací stránce, nikdy jsme se nepřihlásili do vašeho účtu, abychom chránili vaše soukromé údaje a osobní informace

Děkujeme, mějte požehnaný den se svými blízkými

S pozdravem,

Podpora WordPress Tooltipů

Tagged with: , ,

Risoluzione dei conflitti di tema con Awesome e Bootstrap nel plugin Tooltip di WordPress, come utilizzare i tooltip font-awesome – Versione 35.8.8 ora disponibile

Posted on by wordpress tooltips Posted in Plugin di Tooltip per Wordpress Documento(Italiano) — No Comments ↓

WordPress Tooltips: Ciao, cari utenti del Plugin Tooltip di WordPress, spero che questo messaggio vi trovi bene e che stiate trascorrendo giorni meravigliosi con la vostra famiglia. Abbiamo ricevuto un ticket da un fantastico utente di WordPress Tooltip che ha segnalato un conflitto CSS con il proprio tema nel Plugin Tooltip di WordPress. Il nostro sviluppatore WordPress ha controllato il tema e ha scoperto che c’è un conflitto con Bootstrap e Font Awesome, che sono utilizzati dai tooltip, tra le altre cose. Per risolvere il problema per il nostro prezioso utente di tooltip, il nostro sviluppatore di Tooltip di WordPress ha rilasciato una nuova versione: WordPress Tooltips Pro Plus 35.8.8.

1: Risolto il conflitto tra il tema e il framework Bootstrap incluso nel tooltip di WordPress:

Ciao Team di Supporto,
Prima di tutto: un enorme grazie ancora per il turnaround incredibilmente veloce e il lavoro notturno.
Con la versione 35.8.8 quasi tutto è a posto da parte mia:

Pagina Ordini WooCommerce → gli avvisi PHP sono scomparsi ✅

Salient → Pannello di amministrazione Tipografia → non è più rotto ✅

Icone social nell'intestazione/piè di pagina → sembrano buone ✅

C'è solo una regressione che è apparsa subito dopo l'aggiornamento a 35.8.8:

Nella pagina principale il layout dell'intestazione/ero mobile è rotto (il blocco menu/intestazione si sposta e lo spazio va fuori).

Questo era già stato risolto nella versione precedente, ma con 35.8.8 è tornato.

Ancora, grazie mille per il vostro instancabile lavoro e le risposte super-veloci — apprezzo davvero quanto siate flessibili e disponibili!

Cordialmente,

Abbiamo risolto il problema per l’utente del tooltip e abbiamo risposto:

Ciao

Spero che questo messaggio ti trovi bene e che tu stia trascorrendo giorni felici con la tua famiglia 

Ci scusiamo per il problema, abbiamo controllato i codici del tema e del nostro plugin, abbiamo anche testato questo problema su varie risoluzioni e alla fine abbiamo scoperto che era causato da un conflitto tra Bootstrap e il tema. La soluzione è semplice, per favore apri il pannello delle impostazioni globali dei tooltip e disabilita l'opzione: “Abilita / Disabilita Bootstrap CSS per evitare conflitti con il tema?” Dalla nostra parte, abbiamo trovato che tutto funziona bene 

Potresti fare un test e darci un feedback? Se ci sono problemi, non esitare a dircelo, lo risolveremo per te il prima possibile 

Grazie, ti auguro una giornata benedetta con i tuoi cari 

Cordiali saluti,

Supporto Tooltip di WordPress

2: Pagina Ordini WooCommerce: diversi avvisi PHP continuano a comparire nella sezione dettagli dell’ordine (relativi a post_type che è nullo):

Fatto, abbiamo riscritto i nostri codici in questo modo per risolvere il problema:

if (isset($post->post_type)) {

if ($post->post_type == ‘tooltips’) { add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Mostra estratto nel tooltip pop-up?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }

Ora funziona bene

3: Pannello Tipografia Salient: l’interfaccia di amministrazione sotto Salient → Tipografia diventa rotta e disallineata quando WordPress Tooltips Pro è attivo.

Fatto, abbiamo esaminato il codice del tema principale e abbiamo scoperto che include una classe .tooltip, che confligge con la classe .tooltips nel nostro file admin.css. Abbiamo riscritto il nostro plugin tooltip di WordPress in questo modo:

Carica il file admin.css per il plugin Tooltip di WordPress nell'area wp-admin solo quando lo schermo attuale appartiene al plugin.

Codici:

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

Ora funziona bene

4: Icone social: le icone Font Awesome nel menu e nel piè di pagina (link social) continuano a visualizzarsi in modo errato o come caselle vuote.

Fatto, nel tema Salient, abbiamo scoperto che caricano i loro script in ritardo in questo modo:

add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );

Abbiamo riscritto il nostro plugin per caricare Font Awesome in ritardo per evitare conflitti con altri temi o plugin:

add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);

Quindi tutti i codici nel tema Salient verranno eseguiti per primi, i nostri codici caricheranno Font Awesome in ultima chiamata.

Pertanto, tutto il codice nel tema Salient verrà eseguito con priorità, e il nostro plugin infine chiamerà Font Awesome per caricarlo.

Ora funziona bene

Il tema dell’utente stava utilizzando Font Awesome 6.5, e i nostri Tooltip Font Awesome stavano anche utilizzando Font Awesome 6.4 nella versione WordPress Tooltips Pro Plus 35.8.8. Abbiamo aggiornato i tooltip Font Awesome per utilizzare l’ultima versione: Font Awesome 7.1. Cos’è Font Awesome?

Font Awesome è un popolare toolkit di icone e font web che fornisce una vasta collezione di icone vettoriali scalabili e loghi sociali. Permette agli sviluppatori di incorporare facilmente icone di alta qualità nei loro siti web e applicazioni senza la necessità di file immagine. Caratteristiche principali di Font Awesome:

Icone scalabili: Essendo basate su vettori, le icone Font Awesome possono essere scalate a qualsiasi dimensione senza perdere qualità, rendendole perfette per design reattivi.
Compatibilità cross-browser: Font Awesome funziona senza problemi su tutti i moderni browser web.
Integrazione facile: Gli sviluppatori possono integrare facilmente Font Awesome nei loro progetti utilizzando un semplice tag <link> o installandolo tramite gestori di pacchetti come npm o Yarn.
Personalizzabile: Le icone possono essere stilizzate con CSS, consentendo modifiche nel colore, dimensione, rotazione e molto altro per adattarsi ai requisiti di design di un sito web.
Accessibilità: Le icone Font Awesome possono essere rese accessibili attraverso attributi HTML appropriati, garantendo che siano utilizzabili da lettori di schermo.
Aggiornamenti regolari: Il toolkit viene frequentemente aggiornato con nuove icone, arricchendo la sua libreria nel tempo.

Perché agli utenti piace Font Awesome:

Ampia varietà: Font Awesome offre migliaia di icone che coprono numerose categorie, fornendo agli utenti ampie scelte per trovare l'icona perfetta per qualsiasi applicazione.
Semplicità: La sintassi per utilizzare Font Awesome è semplice, rendendo facile per gli sviluppatori di tutti i livelli implementarla.
Prestazioni: Essendo un set di icone basato su font, Font Awesome di solito si carica più velocemente rispetto alle tradizionali icone immagine, contribuendo a migliorare le prestazioni del sito web.
Supporto della comunità: Con una grande comunità di utenti e una documentazione completa, gli sviluppatori possono facilmente trovare supporto, tutorial ed esempi.
Stile coerente: Tutte le icone hanno uno stile uniforme, il che aiuta a mantenere la coerenza visiva nelle applicazioni web.
Opzioni gratuite e a pagamento: Font Awesome offre sia versioni gratuite che premium, consentendo agli utenti di scegliere in base alle loro esigenze e budget.

Conclusione

Font Awesome è diventato una soluzione di riferimento per molti sviluppatori grazie alla sua versatilità, facilità d’uso e vasta libreria di icone. Che tu stia costruendo un semplice sito web o un’applicazione web complessa, Font Awesome fornisce gli strumenti necessari per migliorare il design dell’interfaccia utente e migliorare l’esperienza dell’utente. Cos’è Font Awesome Tooltips?

I Tooltip Font Awesome sono una funzionalità che consente agli sviluppatori di creare caselle informative o suggerimenti hoverabili utilizzando icone Font Awesome, inclusi nella versione wordpress tooltips pro plus 19.9.8. Questi tooltip forniscono ulteriore contesto o informazioni su un elemento di una pagina web quando un utente ci passa sopra con il cursore. Caratteristiche principali dei Tooltip Font Awesome:

Icone: Puoi facilmente incorporare icone dalla libreria Font Awesome nei tuoi tooltip, migliorando l'appeal visivo e l'esperienza utente.
Personalizzazione: I tooltip possono essere stilizzati e personalizzati per adattarsi al design del tuo sito web, consentendo modifiche nel colore, dimensione e posizionamento.
Responsività: Si adattano bene a diverse dimensioni dello schermo, rendendoli adatti sia per interfacce desktop che mobili.
Accessibilità: I tooltip implementati correttamente possono migliorare l'accessibilità fornendo informazioni aggiuntive senza ingombrare l'interfaccia utente.
Supporto JavaScript: Molte implementazioni di tooltip sfruttano JavaScript o framework CSS (come Bootstrap) per migliorare la funzionalità, come effetti di visualizzazione e nascondimento.

Come aggiungere Tooltip Font Awesome nel tuo post WordPress

Creare contenuti coinvolgenti nei tuoi post WordPress è diventato più facile con i tooltip Font Awesome! Segui questi semplici passaggi per migliorare i tuoi post con bellissime icone che forniscono informazioni aggiuntive ai tuoi lettori. Passo 1: Crea un nuovo post WordPress

Inizia creando un nuovo post in WordPress. Nell’editor, inserisci semplicemente il shortcode del tooltip Font Awesome in questo modo:

[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]

Questo shortcode del tooltip Font Awesome ti permetterà di visualizzare un tooltip nel tuo post.

Ulteriori shortcode per i tooltip di WordPress possono essere trovati nel nostro documento dettagliato sugli shortcode dei tooltip; tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/ Passo 2: Anteprima del tuo Tooltip

Una volta aggiunto lo shortcode, vai alla parte frontale del tuo post WordPress. Vedrai una bella icona a forma di cerchio con un punto interrogativo, che appare così:

Icona Tooltip Font Awesome

Quando gli utenti passano il mouse sopra il cerchio con il punto interrogativo, apparirà un popup tooltip, fornendo ulteriori dettagli:

Popup Tooltip Font Awesome Passo 3: Personalizza il tuo Tooltip

Hai la flessibilità di personalizzare la dimensione e il colore delle tue icone Font Awesome. Ad esempio, se vuoi rendere l’icona del cerchio con il punto interrogativo più grande, basta cambiare il parametro della dimensione da 2x a 3x, 4x o anche più grande! Ecco un esempio: finestra popup tooltip font awesome nel front-end

Per cambiare il colore, modifica il parametro del colore in qualsiasi valore esadecimale preferisci, come #cccccc o #eeeeee. Passo 4: Scegli il tuo stile di icona

Puoi anche regolare lo stile del tuo tooltip Font Awesome cambiando il parametro set:

fas — Icone solide
far — Icone regolari
fab — Icone di marca

Riepilogo Veloce di Ciò Che Devi Sapere:

  • tooltip_id: Questo è l’ID del tooltip che hai creato nell’editor dei tooltip di WordPress.
  • set: Scegli tra icone solide (fas), regolari (far) o di marca (fab).
  • icon: Abbiamo utilizzato l’icona a forma di cerchio con punto interrogativo, ma ricorda, ci sono oltre 1.588 icone straordinarie disponibili per te da scegliere!
  • size: Sentiti libero di aumentare la dimensione a 3x, 4x, ecc., in base alle tue preferenze di design.
  • color: Personalizza il colore per abbinarsi al tuo sito, ad esempio #eeeeee.

Ora sei pronto per migliorare i tuoi post di WordPress con deliziosi tooltip Font Awesome! Buon blogging!

Conclusione:

Font Awesome include oltre 1.500 icone di alta qualità che possono essere personalizzate in termini di dimensioni, colori e stili utilizzando CSS. Queste icone sono progettate per essere compatibili con vari browser. I Tooltip Font Awesome sono un componente utile per migliorare l’interazione dell’utente e fornire informazioni utili in modo visivamente accattivante sulle pagine web.

Se hai bisogno di apportare modifiche, non esitare a dircelo, faremo del nostro meglio per completarlo il prima possibile (sono le 01:52 AM).

Se tutto funziona bene, ti preghiamo di cambiare l’accesso del tuo sito di test, noi non ci siamo mai loggati nel tuo account, per proteggere i tuoi dati privati e le informazioni personali

Grazie, ti auguriamo una giornata benedetta con i tuoi cari

Cordiali Saluti,

Supporto Tooltip di WordPress

 

Tagged with: , ,

Behebung von Themenkonflikten mit Awesome und Bootstrap im WordPress Tooltips Plugin, wie man Font-Awesome Tooltips verwendet – Version 35.8.8 jetzt verfügbar

Posted on by wordpress tooltips Posted in Wordpress Tooltip Glossary Plugin Dokumentation(German) — No Comments ↓

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

Tagged with: , ,

Поправяне на конфликти между теми с Awesome и Bootstrap в плъгина за подсказки на WordPress, как да използвате подсказки с font-awesome – Версия 35.8.8 вече налична

Posted on by wordpress tooltips Posted in wordpress tooltip plugin document (Bulgarian) — No Comments ↓

Здравейте, скъпи потребители на плъгина за подсказки в WordPress, надявам се това съобщение да ви намери в добро здраве и да се наслаждавате на прекрасни дни с вашето семейство. Получихме билет от един невероятен потребител на WordPress Tooltip, който съобщи за конфликт с CSS с темата си в плъгина за подсказки на WordPress. Нашият разработчик на WordPress провери темата и установи, че тя конфликтува с Bootstrap и Font Awesome, които се използват от подсказките, наред с други неща. За да разрешим проблема за нашия ценен потребител на подсказки, нашият разработчик на WordPress Tooltips пусна нова версия: WordPress Tooltips Pro Plus 35.8.8.

1: Разрешен е конфликтът между темата и Bootstrap рамката, включена в подсказките на WordPress:

Здравейте, екип за поддръжка,
Първо: огромни благодарности отново за невероятно бързото реагиране и работата през нощта.
С версия 35.8.8 почти всичко е наред от моя страна:

Страница с поръчки на WooCommerce → PHP предупрежденията изчезнаха ✅

Salient → Административен панел за типография → вече не е счупен ✅

Социални икони в заглавието/футера → изглеждат добре ✅

Има само една регресия, която се появи веднага след актуализацията до 35.8.8:

На началната страница мобилният заглавен/геройски макет е счупен (блокът с менюто/заглавието се измести и разстоянието е неправилно).

Това вече беше поправено в предишната версия, но с 35.8.8 отново е обратно.

Отново, благодаря ви много за неуморната работа и супер бързите отговори — наистина оценявам колко гъвкави и полезни сте!

С уважение,

Разрешаваме проблема за потребителя на подсказки и отговорихме:

Здравейте

Надявам се това съобщение да ви намери в добро здраве и да имате щастливи дни с вашето семейство 

Извинявайте за проблема, проверихме кодовете на темата и нашия плъгин, също така тестваме този проблем на различни резолюции и в крайна сметка открихме, че е причинен от конфликт между Bootstrap и темата. Решението е просто, моля, отворете глобалния панел за настройки на подсказките и деактивирайте опцията: „Активиране/Деактивиране на 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”, __(‘Показване на откъс в подсказка?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }

Сега работи добре

3: Панел за типография на Salient: административният интерфейс под Salient → Типография става счупен и неправилно подреден, когато WordPress Tooltips Pro е активен.

Готово, прегледахме кода на основната тема и установихме, че включва клас .tooltip, който конфликтува с класа .tooltips в нашия файл admin.css. Пренаписахме нашия плъгин за подсказки на WordPress по следния начин:

Зареждаме файла admin.css за плъгина за подсказки на WordPress в областта wp-admin само когато текущият екран принадлежи на плъгина.

Кодове:

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

Пренаписахме нашия плъгин, за да заредим Font Awesome късно, за да избегнем конфликти с други теми или плъгини:

add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);

Така че всички кодове в темата Salient ще се изпълнят първо, нашите кодове ще извикат зареждането на Font Awesome последно.

Следователно, целият код в темата Salient ще бъде изпълнен с приоритет, а нашият плъгин в крайна сметка ще извика Font Awesome за зареждане.

Сега работи добре

Темата на потребителя използва Font Awesome 6.5, а нашите Font Awesome Tooltips също използваха Font Awesome 6.4 в WordPress Tooltips Pro Plus 35.8.8. Актуализирахме Font Awesome подсказките, за да използват последната версия: Font Awesome 7.1. Какво е Font Awesome?

Font Awesome е популярен инструмент за икони и уеб шрифт, който предоставя огромна колекция от мащабируеми векторни икони и социални лога. Той позволява на разработчиците лесно да вграждат висококачествени икони в своите уебсайтове и приложения без необходимост от файлове с изображения. Ключови характеристики на Font Awesome:

Мащабируеми икони: Като векторни, иконите на Font Awesome могат да се мащабират до всякакъв размер без загуба на качество, което ги прави идеални за отзивчиви дизайни.
Съвместимост с различни браузъри: Font Awesome работи безпроблемно на всички съвременни уеб браузъри.
Лесна интеграция: Разработчиците могат лесно да интегрират Font Awesome в своите проекти, използвайки прост <link> таг или като го инсталират чрез пакетни мениджъри като npm или Yarn.
Персонализируем: Иконите могат да бъдат стилизирани с CSS, позволявайки промени в цвета, размера, завъртането и много други, за да отговарят на изискванията на дизайна на уебсайта.
Достъпност: Иконите на Font Awesome могат да бъдат направени достъпни чрез подходящи HTML атрибути, осигурявайки, че те са използваеми от четец на екрана.
Редовни актуализации: Инструментът често се актуализира с нови икони, подобрявайки библиотеката си с времето.

Защо потребителите харесват Font Awesome:

Широко разнообразие: Font Awesome предлага хиляди икони, обхващащи множество категории, предоставяйки на потребителите достатъчно избор, за да намерят перфектната икона за всяко приложение.
Простота: Синтаксисът за използване на Font Awesome е прост, което го прави лесен за разработчици на всички нива на умения.
Производителност: Като набор от икони, базиран на шрифт, Font Awesome обикновено се зарежда по-бързо от традиционните икони с изображения, което допринася за подобрена производителност на уебсайта.
Подкрепа от общността: С голяма общност от потребители и обширна документация, разработчиците лесно могат да намерят подкрепа, уроци и примери.
Последователен стил: Всички икони имат унифициран стил, който помага за поддържане на визуална последователност в уеб приложенията.
Безплатни и платени опции: Font Awesome предлага както безплатни, така и премиум версии, позволявайки на потребителите да избират в зависимост от техните нужди и бюджет.

Заключение

Font Awesome е станал предпочитано решение за много разработчици заради своята универсалност, лесна употреба и обширна библиотека от икони. Независимо дали изграждате прост уебсайт или сложна уеб приложение, Font Awesome предоставя инструментите, необходими за подобряване на дизайна на потребителския интерфейс и подобряване на потребителското изживяване. Какво е Font Awesome Tooltips?

Font Awesome Tooltips са функция, която позволява на разработчиците да създават информационни кутии или подсказки при задържане с мишката, използвайки икони на Font Awesome, включени в версията wordpress tooltips pro plus 19.9.8. Тези подсказки предоставят допълнителен контекст или информация за елемент на уеб страница, когато потребителят задържи курсора си върху него. Ключови характеристики на Font Awesome Tooltips:

Икони: Можете лесно да вградите икони от библиотеката на Font Awesome в подсказките си, подобрявайки визуалната привлекателност и потребителското изживяване.
Персонализация: Подсказките могат да бъдат стилизирани и персонализирани, за да съответстват на дизайна на вашия уебсайт, позволявайки корекции в цвета, размера и позиционирането.
Отзивчивост: Те често се адаптират добре към различни размери на екрана, което ги прави подходящи за настолни и мобилни интерфейси.
Достъпност: Правилно реализираните подсказки могат да подобрят достъпността, предоставяйки допълнителна информация без да затрупват потребителския интерфейс.
Поддръжка на JavaScript: Много реализации на подсказки използват JavaScript или CSS рамки (като Bootstrap), за да подобрят функционалността, като например ефекти на показване и скриване.

Как да добавите Font Awesome подсказки в публикацията си в WordPress

Създаването на ангажиращо съдържание в публикациите ви в WordPress стана по-лесно с Font Awesome подсказки! Следвайте тези прости стъпки, за да подобрите публикациите си с красиви икони, които предоставят допълнителна информация на вашите читатели.

Стъпка 1: Създайте нова публикация в WordPress

Започнете, като създадете нова публикация в WordPress. В редактора просто вмъкнете шорткода за подсказка на Font Awesome, както следва:

[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]

Този шорткод за подсказка на Font Awesome ще ви позволи да покажете подсказка в публикацията си.

Повече шорткодове за подсказки в WordPress можете да намерите в нашия подробен документ за шорткодове за подсказки; tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/

Стъпка 2: Прегледайте вашата подсказка

След като добавите шорткода, отидете на предния край на вашата публикация в WordPress. Ще видите красив иконка на въпросен кръг, която изглежда така:

Икона на подсказка на Font Awesome

Когато потребителите задържат курсора над въпросния кръг, ще се появи изскачаща подсказка, предоставяща повече детайли:

Изскачаща подсказка на Font Awesome

Стъпка 3: Персонализирайте вашата подсказка

Имате гъвкавост да персонализирате размера и цвета на вашите икони на Font Awesome. Например, ако искате да направите иконата на въпросния кръг по-голяма, просто променете параметъра size от 2x на 3x, 4x или дори по-голям! Ето един пример: изскачащ прозорец на подсказка на Font Awesome на предния край

За да промените цвета, модифицирайте параметъра color на всяка шеснадесетична стойност, която предпочитате, като #cccccc или #eeeeee.

Стъпка 4: Изберете стила на вашата икона

Можете също така да регулирате стила на вашата подсказка на Font Awesome, като промените параметъра set:

  • fas — Солидни икони
  • far — Редовни икони
  • fab — Бранд икони

Бързо резюме на това, което трябва да знаете:

  • tooltip_id: Това е ID на подсказката, която създадохте в редактора за подсказки на WordPress.
  • set: Изберете между солидни (fas), редовни (far) или бранд (fab) икони.
  • icon: Използвахме иконата на въпросния кръг, но помнете, че има над 1,588 зашеметяващи икони, от които можете да избирате!
  • size: Не се колебайте да увеличите размера на 3x, 4x и т.н., в зависимост от вашите дизайнерски предпочитания.
  • color: Персонализирайте цвета, за да съответства на вашия сайт, например #eeeeee.

Сега сте готови да подобрите публикациите си в WordPress с очарователни подсказки на Font Awesome! Приятно блогване!

Заключение:

Font Awesome включва над 1,500 висококачествени икони, които могат да бъдат персонализирани по отношение на размер, цвят и стил с помощта на CSS. Тези икони са проектирани да бъдат съвместими с различни браузъри. Подсказките на Font Awesome са полезен компонент за подобряване на взаимодействието с потребителите и предоставяне на полезна информация по визуално привлекателен начин на уеб страниците.

Ако нещо трябва да променим, моля, не се колебайте да ни кажете, ще се постараем да го завършим възможно най-скоро (в момента е 01:52 ч.).

Ако всичко работи добре, моля, променете достъпа до вашия тестов сайт, никога не сме влизали в акаунта ви, за да защитим вашите лични данни и информация

Благодарим ви, желаем ви благословен ден с вашите близки

С най-добри пожелания,

Поддръжка на подсказки за WordPress

Tagged with: , ,

A témaütközések javítása az Awesome és a Bootstrap használatával a WordPress Tooltips bővítményben, hogyan használjuk a font-awesome tooltip-eket – 35.8.8 verzió most elérhető

Posted on by wordpress tooltips Posted in Wordpress Tooltip Plugin dokumentum (Hungary) — No Comments ↓

Kedves WordPress Tooltip Plugin felhasználók!

Remélem, hogy ez az üzenet jól talál titeket, és csodás napokat töltötök a családotokkal. Kaptunk egy jegyet egy csodálatos WordPress Tooltip felhasználótól, aki CSS ütközést jelentett a témájával a WordPress Tooltips Pluginban. WordPress fejlesztőnk ellenőrizte a témát, és megállapította, hogy ütközik a Bootstrap és a Font Awesome használatával, amelyeket a tooltip-ek is használnak, többek között. Az ügyfél számára a WordPress Tooltips fejlesztőnk kiadott egy új verziót: WordPress Tooltips Pro Plus 35.8.8.

1: Megoldottuk a konfliktust a téma és a WordPress tooltipben található Bootstrap keretrendszer között:

Hi Támogató Csapat,
Először is: hatalmas köszönet az elképesztően gyors válaszért és a késő esti munkáért.
A 35.8.8 verzióval szinte minden rendben van az én oldalamon:

WooCommerce Rendelések oldal → a PHP figyelmeztetések eltűntek ✅

Salient → Tipográfia admin panel → már nem törött ✅

Szociális ikonok a fejlécben/láblécben → jól néznek ki ✅

Csak egy regresszió jelentkezett közvetlenül a 35.8.8 frissítése után:

A főoldalon a mobil fejléc/hős elrendezés törött (menü/fejléc blokk eltolódik és a távolságok elcsúsznak).

Ezt már javították az előző verzióban, de a 35.8.8 verzióval visszatért.

Ismét köszönöm a fáradhatatlan munkátokat és a szupergyors válaszokat — nagyon értékelem, hogy mennyire rugalmasak és segítőkészek vagytok!

Üdvözlettel,

Megoldottuk a problémát a tooltip felhasználó számára, és válaszoltunk:

Hi

Remélem, hogy ez az üzenet jól talál, és boldog napokat töltesz a családoddal 

Elnézést a problémáért, ellenőriztük a téma és a plugin kódjait, valamint teszteltük ezt a problémát különböző felbontásokon, és végül felfedeztük, hogy a Bootstrap és a téma közötti konfliktus okozta. A megoldás egyszerű, kérlek, nyisd meg a tooltip globális beállítási panelt, és tiltsd le a következő opciót: “Bootstrap CSS engedélyezése/letiltása a téma ütközések elkerülése érdekében?” A mi oldalunkon minden jól működik 

Kérlek, végezz egy tesztet, és adj visszajelzést! Ha bármilyen probléma merül fel, ne habozz szólni, megoldjuk neked a lehető leghamarabb 

Köszönöm, legyen áldott napod a szeretteiddel 

Üdvözlettel,

WordPress Tooltips Támogatás

2: WooCommerce Rendelések oldal: több PHP figyelmeztetés még mindig megjelenik a rendelési részletek szekció alatt (a post_type null értékével kapcsolatos):

Kész, átírtuk a kódjainkat így, hogy megoldjuk a problémát:

if (isset($post->post_type)) {

if ($post->post_type == ‘tooltips’) { add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Kivonat megjelenítése a tooltip felugró ablakban?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }

Most jól működik

3: Salient Tipográfia panel: az admin felület a Salient → Tipográfia alatt törötté és elcsúszottá válik, amikor a WordPress Tooltips Pro aktív.

Kész, átnéztük a téma alap kódját, és megállapítottuk, hogy tartalmaz egy .tooltip osztályt, amely ütközik a .tooltips osztállyal az admin.css fájlunkban. Átírtuk a WordPress tooltips plugint így:

Az admin.css fájlt a WordPress Tooltips pluginhoz csak akkor töltjük be a wp-admin területen, ha a jelenlegi képernyő a pluginhoz tartozik.

Kódok:

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

Most jól működik

4: Szociális ikonok: a Font Awesome ikonok a menüben és a láblécben (szociális linkek) még mindig helytelenül vagy üres dobozként jelennek meg.

Kész, a Salient témában felfedeztük, hogy késlekedve töltik be a scriptjeiket így:

add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );

Átírtuk a plugint, hogy a Font Awesome-t késlekedve töltsük be, hogy elkerüljük a konfliktusokat más témákkal vagy pluginekkel:

add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);

Így a Salient téma összes kódja először fut le, a mi kódunk utoljára hívja meg a Font Awesome-t.

Ezért a Salient téma összes kódja prioritással fog végrehajtódni, és a pluginunk végül hívja meg a Font Awesome-t a betöltéshez.

Most jól működik

A felhasználó témája a Font Awesome 6.5-öt használta, míg a mi Font Awesome Tooltips is a Font Awesome 6.4-et használta a WordPress Tooltips Pro Plus 35.8.8 verzióban. Frissítettük a Font Awesome tooltips-t, hogy a legújabb verziót használja: Font Awesome 7.1.

Mi az a Font Awesome?

A Font Awesome egy népszerű ikon toolkit és webfont, amely egy hatalmas, skálázható vektorgrafikus ikonok és szociális logók gyűjteményét kínálja. Lehetővé teszi a fejlesztők számára, hogy könnyedén beépítsenek kiváló minőségű ikonokat weboldalaikba és alkalmazásaikba anélkül, hogy képfájlokra lenne szükségük.

A Font Awesome kulcsfontosságú jellemzői:

Skálázható ikonok: Mivel vektor alapúak, a Font Awesome ikonok bármilyen méretre skálázhatók anélkül, hogy elveszítenék a minőségüket, így tökéletesek a reszponzív tervezéshez.
Böngészőkompatibilitás: A Font Awesome zökkenőmentesen működik minden modern webböngészőben.
Könnyű integráció: A fejlesztők könnyedén integrálhatják a Font Awesome-t projektjeikbe egy egyszerű <link> tag segítségével, vagy telepíthetik csomagkezelők, mint az npm vagy Yarn használatával.
Testreszabható: Az ikonok CSS-sel formázhatók, lehetővé téve a szín, méret, forgatás és sok más változtatását, hogy illeszkedjenek a weboldal tervezési követelményeihez.
Hozzáférhetőség: A Font Awesome ikonok hozzáférhetővé tehetők megfelelő HTML attribútumokkal, biztosítva, hogy a képernyőolvasók számára is használhatóak legyenek.
Rendszeres frissítések: A toolkit gyakran frissül új ikonokkal, folyamatosan bővítve a könyvtárát.

Miért szeretik a felhasználók a Font Awesome-t?

Széles választék: A Font Awesome több ezer ikont kínál számos kategóriában, lehetőséget adva a felhasználóknak, hogy megtalálják a tökéletes ikont bármilyen alkalmazáshoz.
Egyszerűség: A Font Awesome használatának szintaxisa egyszerű, így a fejlesztők minden szintjén könnyen megvalósítható.
Teljesítmény: Mivel egy font-alapú ikon készletről van szó, a Font Awesome általában gyorsabban betöltődik, mint a hagyományos képkonfigurációk, hozzájárulva a weboldal teljesítményének javításához.
Közösségi támogatás: Nagy közössége van a felhasználóknak és átfogó dokumentációja, így a fejlesztők könnyen találhatnak támogatást, útmutatókat és példákat.
Konzisztens stílus: Minden ikon egységes stílussal rendelkezik, ami segít fenntartani a vizuális konzisztenciát a webalkalmazásokban.
Ingyenes és fizetős lehetőségek: A Font Awesome ingyenes és prémium verziókat is kínál, lehetővé téve a felhasználók számára, hogy igényeik és költségvetésük alapján válasszanak.

Következtetés

A Font Awesome sok fejlesztő számára a legjobb megoldássá vált sokoldalúsága, könnyű használata és kiterjedt ikon könyvtára miatt. Akár egy egyszerű weboldalt, akár egy összetett webalkalmazást építesz, a Font Awesome biztosítja a szükséges eszközöket a UI tervezés javításához és a felhasználói élmény fokozásához.

Mi az a Font Awesome Tooltips?

A Font Awesome Tooltips egy olyan funkció, amely lehetővé teszi a fejlesztők számára, hogy lebegő információs dobozokat vagy tippeket hozzanak létre Font Awesome ikonokkal, amelyek a WordPress Tooltips Pro Plus 19.9.8 verziójában találhatók. Ezek a tooltip-ek további kontextust vagy információt nyújtanak egy weboldal eleméről, amikor a felhasználó az egérmutatójával föléjük viszi.

A Font Awesome Tooltips kulcsfontosságú jellemzői:

Ikonok: Könnyedén beépítheted a Font Awesome könyvtár ikonjait a tooltipjeidbe, fokozva a vizuális vonzerőt és a felhasználói élményt.
Testreszabás: A tooltip-ek stílusozhatók és testreszabhatók, hogy illeszkedjenek a weboldalad dizájnjához, lehetővé téve a szín, méret és pozicionálás módosítását.
Reszponzivitás: Gyakran jól alkalmazkodnak a különböző képernyőméretekhez, így alkalmasak asztali és mobil felületekhez egyaránt.
Hozzáférhetőség: A megfelelően megvalósított tooltip-ek javíthatják a hozzáférhetőséget, további információt nyújtva anélkül, hogy zsúfolttá tennék a felhasználói felületet.
JavaScript támogatás: Sok tooltip megvalósítás JavaScript vagy CSS keretrendszereket (mint például Bootstrap) használ a funkcionalitás fokozására, például a megjelenítési és eltüntetési hatásokhoz.

Hogyan adjunk hozzá Font Awesome Tooltips-t a WordPress bejegyzésedhez

A Font Awesome tooltips segítségével könnyebbé vált a vonzó tartalom létrehozása a WordPress bejegyzéseidben! Kövesd ezeket az egyszerű lépéseket, hogy gyönyörű ikonokkal gazdagítsd bejegyzéseidet, amelyek további információt nyújtanak az olvasóidnak.

  1. lépés: Hozz létre egy új WordPress bejegyzést

Kezdj el egy új bejegyzést létrehozni a WordPressben. A szerkesztőben egyszerűen illeszd be a Font Awesome tooltip shortcode-ot így:

[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]

Ez a Font Awesome tooltip shortcode lehetővé teszi, hogy tooltipet jeleníts meg a bejegyzésedben.

További WordPress tooltips shortcode-okat találhatsz a részletes tooltip shortcode dokumentációnkban: tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/

  1. lépés: Előnézet a tooltipedhez

Miután hozzáadtad a shortcode-ot, lépj át a WordPress bejegyzésed előnézetére. Látni fogsz egy szép kérdőjel ikon, ami így néz ki:

Font Awesome Tooltip Ikon

Amikor a felhasználók az egérmutatójukat a kérdőjel köré viszik, egy tooltip felugró ablak jelenik meg, amely további részleteket nyújt:

Font Awesome Tooltip Felugró Ablak

  1. lépés: Testreszabás a tooltipedhez

Rugalmasságod van a Font Awesome ikonjaid méretének és színének testreszabására. Például, ha nagyobbá szeretnéd tenni a kérdőjel ikonodat, egyszerűen változtasd meg a méret paramétert 2x-ről 3x-re, 4x-re vagy akár nagyobbra! Íme egy példa:

A Font Awesome tooltip felugró ablak a front-end-en

A szín megváltoztatásához módosítsd a szín paramétert bármilyen hex értékre, amit preferálsz, például #cccccc vagy #eeeeee.

  1. lépés: Válaszd ki az ikon stílusát

A Font Awesome tooltip stílusát is módosíthatod a set paraméter megváltoztatásával:

fas — Szilárd ikonok
far — Rendes ikonok
fab — Márka ikonok

Gyors összefoglaló, amit tudnod kell:

tooltip_id: Ez a tooltip azonosítója, amelyet a WordPress tooltip szerkesztőben hoztál létre.
set: Válassz a szilárd (fas), rendes (far) vagy márka (fab) ikonok közül.
icon: A kérdőjel-kör ikont használtuk, de ne feledd, hogy több mint 1,588 lenyűgöző ikon közül választhatsz!
size: Nyugodtan növeld a méretet 3x-re, 4x-re stb., a tervezési preferenciáid alapján.
color: Testreszabhatod a színt, hogy illeszkedjen a weboldaladhoz, például #eeeeee.

Most már készen állsz arra, hogy feldobd a WordPress bejegyzéseidet a csodás Font Awesome tooltip-ekkel! Boldog blogolást!

Következtetés:

A Font Awesome több mint 1,500 kiváló minőségű ikont tartalmaz, amelyeket méret, szín és stílus szerint testre lehet szabni CSS segítségével. Ezek az ikonok úgy lettek tervezve, hogy böngészőfüggetlenek legyenek. A Font Awesome tooltip-ek hasznos elemek a felhasználói interakció javítására és hasznos információk vizuálisan vonzó módon történő megjelenítésére a weboldalakon.

Ha bármire szükséged van, amit meg kell változtatnunk, kérlek, ne habozz szólni, mindent megteszünk, hogy a lehető leghamarabb teljesítsük (most 01:52 van).

Ha minden jól működik, kérlek, változtasd meg a tesztoldalad hozzáférését, soha nem léptünk be a fiókodba, hogy megvédjük a magánadataidat és személyes információidat

Köszönjük, legyen áldott napod a szeretteiddel

Üdvözlettel,

WordPress Tooltip Támogatás

Tagged with: , ,

Teemakonfliktien korjaaminen Awesome ja Bootstrap – WordPress Tooltip -lisäosassa, kuinka käyttää font-awesome tooltipseja – Versio 35.8.8 Nyt saatavilla

Posted on by wordpress tooltips Posted in WordPress Tooltipit -lisäosan asiakirja (Finnish) — No Comments ↓

Hei, rakkaat WordPress Tooltip Plugin -käyttäjät, toivottavasti tämä viesti löytää teidät hyvin ja että nautitte upeista päivistä perheenne kanssa. Saimme lipun eräältä mahtavalta WordPress Tooltip -käyttäjältä, joka ilmoitti CSS-yhteensopivuusongelmasta teeman kanssa WordPress Tooltips Pluginissa. WordPress-kehittäjämme tarkisti teeman ja huomasi, että se on ristiriidassa Bootstrapin ja Font Awesomen kanssa, joita käytetään työkaluvihjeissä, muiden asioiden ohella. Ratkaistaksemme ongelman arvokkaalle työkaluvihjeen käyttäjällemme, WordPress Tooltips -kehittäjämme on julkaissut uuden version: WordPress Tooltips Pro Plus 35.8.8.

1: Ratkaistu ristiriita teeman ja WordPress-työkaluvihjeeseen sisältyvän Bootstrap-kehyksen välillä:

Hei tukitiimi,
Ensinnäkin: valtavat kiitokset jälleen uskomattoman nopeasta käännöksestä ja myöhästyneestä työstä.
Versiossa 35.8.8 lähes kaikki on kohdallani kunnossa:

WooCommerce-tilaus-sivu → PHP-varoitukset ovat poissa ✅

Salient → Typografia-hallintapaneeli → ei enää rikki ✅

Sosiaaliset ikonit ylä-/alatunnisteessa → näyttävät hyviltä ✅

On vain yksi regressio, joka ilmestyi heti päivityksen jälkeen versioon 35.8.8:

Etusivulla mobiili ylä-/hero-asettelu on rikki (valikko/yliosa siirtyy ja väli on pielessä).

Tämä oli jo korjattu edellisessä versiossa, mutta versiossa 35.8.8 se on palannut.

Kiitos jälleen niin paljon väsymättömästä työstäsi ja supernopeista vastauksista — arvostan todella, kuinka joustava ja avulias olet!

Lämpimin terveisin,

Ratkaisimme ongelman työkaluvihjeen käyttäjälle ja vastasimme:

Hei

Toivottavasti tämä viesti löytää sinut hyvin ja että sinulla on onnellisia päiviä perheesi kanssa 

Anteeksi ongelmasta, tarkistimme teeman ja lisäosamme koodit, testasimme myös tätä ongelmaa eri resoluutioissa ja lopulta huomasimme, että se johtui ristiriidasta Bootstrapin ja teeman välillä. Ratkaisu on yksinkertainen, avaa työkaluvihjeiden globaalit asetukset ja poista käytöstä vaihtoehto: "Ota käyttöön / Poista Bootstrap CSS käytöstä teemaongelmien välttämiseksi?" Meidän puoleltamme kaikki toimii hyvin 

Voisitko tehdä testin ja antaa meille palautetta? Jos on ongelmia, älä epäröi kertoa meille, ratkaisemme sen sinulle mahdollisimman pian 

Kiitos, ja toivottavasti sinulla on siunattu päivä rakkaidesi kanssa 

Parhain terveisin,

WordPress Tooltips -tuki

2: WooCommerce-tilaus-sivu: useita PHP-varoituksia ilmestyy edelleen tilauksen yksityiskohtien osioon (liittyen post_type:n olevan null):

Tehty, olemme kirjoittaneet koodimme uudelleen näin ratkaistaksemme ongelman:

 

if (isset($post->post_type))
{

if ($post->post_type == ‘tooltips’)
{
add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Show excerpt in tooltip pop up?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null);
}
}

Se toimii nyt hyvin

3: Salient Typografia-paneeli: hallintaliittymä Salient → Typografia -kohdassa rikkoutuu ja on väärin kohdistettu, kun WordPress Tooltips Pro on aktiivinen.

Tehty, tarkistimme ydin-teeman koodin ja huomasimme, että se sisältää .tooltip-luokan, joka on ristiriidassa .tooltips-luokan kanssa admin.css-tiedostossamme. Olemme kirjoittaneet WordPress tooltips -laajennuksemme uudelleen tällä tavalla:

Lataa admin.css-tiedosto WordPress Tooltips -laajennukselle wp-admin-alueella vain, kun nykyinen näyttö kuuluu laajennukselle.

Koodit:

jos (isset($_GET['post_type']))
{
$tooltips_admin_post_type_check = sanitize_text_field($_GET['post_type']);
jos ($tooltips_admin_post_type_check === 'tooltips')
{
wp_enqueue_style('tooltips_pro_admin_css', plugin_dir_url(__FILE__) . 'asset/css/admin/admin.css');
}
}

Se toimii nyt hyvin

4: Sosiaaliset ikonit: Font Awesome -ikonit valikossa ja alatunnisteessa (sosiaaliset linkit) näyttävät edelleen väärin tai tyhjiltä laatikoilta.

Tehty, Salient-teemassa huomasimme, että ne lataavat skriptinsä myöhään näin:

add_action('wp_enqueue_scripts', 'nectar_enqueue_dynamic_css', 20);

Olemme kirjoittaneet laajennuksemme uudelleen lataamaan Font Awesome -ikonit myöhään välttääksemme ristiriitoja muiden teemojen tai laajennusten kanssa:

add_action('wp_enqueue_scripts', 'ttfa_load_font_awesome', 10000);

Joten kaikki koodit Salient-teemassa suoritetaan ensin, meidän koodimme kutsuu Font Awesome -latausta viimeisenä.

Tämän vuoksi kaikki koodi Salient-teemassa suoritetaan etusijalla, ja laajennuksemme kutsuu lopulta Font Awesomea lataamaan.

Se toimii nyt hyvin

Käyttäjän teema käytti Font Awesome 6.5:ttä, ja Font Awesome Tooltips -laajennuksemme käytti myös Font Awesome 6.4:ää WordPress Tooltips Pro Plus 35.8.8:ssä. Päivitimme Font Awesome -työkaluvihjeet käyttämään uusinta versiota: Font Awesome 7.1. Mikä on Font Awesome?

Font Awesome on suosittu ikonityökalu ja verkkofontti, joka tarjoaa laajan kokoelman skaalautuvia vektori-ikoneita ja sosiaalisia logoja. Se mahdollistaa kehittäjien helposti sisällyttää korkealaatuisia ikoneita verkkosivustoihinsa ja sovelluksiinsa ilman kuvafailien tarvetta. Font Awesome -työkalun keskeiset ominaisuudet:

Skaalautuvat ikonit: Koska ne ovat vektoripohjaisia, Font Awesome -ikonit voidaan skaalata mihin tahansa kokoon laadun heikkenemättä, mikä tekee niistä täydellisiä responsiivisiin suunnitelmiin.
Ristiin-selaimen yhteensopivuus: Font Awesome toimii saumattomasti kaikissa moderneissa verkkoselaimissa.
Helppo integrointi: Kehittäjät voivat helposti integroida Font Awesome -työkalun projekteihinsa yksinkertaisella <link> -tunnisteella tai asentamalla sen pakettien hallintatyökalujen, kuten npm:n tai Yarnin, kautta.
Mukautettavuus: Ikoneita voidaan tyylitellä CSS:llä, mikä mahdollistaa värin, koon, kierron ja paljon muuta muuttamisen verkkosivuston suunnittelutarpeiden mukaan.
Saavutettavuus: Font Awesome -ikonit voidaan tehdä saavutettaviksi oikeiden HTML-attribuuttien avulla, varmistaen, että ne ovat käytettävissä ruudunlukijoilla.
Säännölliset päivitykset: Työkalua päivitetään usein uusilla ikoneilla, mikä parantaa sen kirjastoa ajan myötä.

Miksi käyttäjät pitävät Font Awesome -työkalusta:

Laaja valikoima: Font Awesome tarjoaa tuhansia ikoneita, jotka kattavat lukuisia kategorioita, tarjoten käyttäjille runsaasti vaihtoehtoja löytää täydellinen ikoni mihin tahansa sovellukseen.
Yksinkertaisuus: Font Awesome -työkalun syntaksi on suoraviivainen, mikä tekee sen käyttämisestä helppoa kaikentasoisille kehittäjille.
Suorituskyky: Font Awesome, joka on fonttipohjainen ikonisarja, latautuu tyypillisesti nopeammin kuin perinteiset kuvakuvat, mikä parantaa verkkosivuston suorituskykyä.
Yhteisön tuki: Suuren käyttäjäyhteisön ja kattavan dokumentaation ansiosta kehittäjät voivat helposti löytää tukea, oppaita ja esimerkkejä.
Johdonmukainen tyyli: Kaikilla ikoneilla on yhtenäinen tyyli, mikä auttaa ylläpitämään visuaalista johdonmukaisuutta verkkosovelluksissa.
Ilmaiset ja maksulliset vaihtoehdot: Font Awesome tarjoaa sekä ilmaisia että premium-versioita, jolloin käyttäjät voivat valita tarpeidensa ja budjettinsa mukaan.

Yhteenveto

Font Awesome on tullut monien kehittäjien suosikkiratkaisuksi sen monipuolisuuden, helppokäyttöisyyden ja laajan ikonikirjaston ansiosta. Olitpa rakentamassa yksinkertaista verkkosivustoa tai monimutkaista verkkosovellusta, Font Awesome tarjoaa työkalut käyttöliittymän suunnittelun parantamiseen ja käyttäjäkokemuksen parantamiseen. Mikä on Font Awesome Tooltips?

Font Awesome Tooltips on ominaisuus, joka mahdollistaa kehittäjien luoda hiiren yli viettäviä tietolaatikoita tai vihjeitä Font Awesome -ikoneilla, jotka sisältyvät WordPress Tooltips Pro Plus -versioon 19.9.8. Nämä työkaluvihjeet tarjoavat lisäyhteyttä tai tietoa verkkosivuston elementistä, kun käyttäjä vie hiiren sen päälle. Font Awesome Tooltips -työkalun keskeiset ominaisuudet:

Ikonit: Voit helposti sisällyttää ikoneita Font Awesome -kirjastosta työkaluvihjeisiisi, mikä parantaa visuaalista vetovoimaa ja käyttäjäkokemusta.
Mukauttaminen: Työkaluvihjeitä voidaan tyylitellä ja mukauttaa vastaamaan verkkosivustosi suunnittelua, jolloin voit säätää väriä, kokoa ja sijaintia.
Responsiivisuus: Ne mukautuvat usein hyvin eri näyttökokoihin, mikä tekee niistä sopivia sekä työpöytä- että mobiiliympäristöihin.
Saavutettavuus: Oikein toteutetut työkaluvihjeet voivat parantaa saavutettavuutta tarjoamalla lisätietoa ilman käyttöliittymän sotkemista.
JavaScript-tuki: Monet työkaluvihjeiden toteutukset hyödyntävät JavaScriptiä tai CSS-kehyksiä (kuten Bootstrap) parantaakseen toiminnallisuutta, kuten näyttö- ja piilovaikutuksia.

Kuinka lisätä Font Awesome Tooltips WordPress-viestiisi

Viehättävän sisällön luominen WordPress-viesteissäsi on nyt helpompaa Font Awesome -työkaluvihjeiden avulla! Seuraa näitä yksinkertaisia vaiheita parantaaksesi viestejäsi kauniilla ikoneilla, jotka tarjoavat lisätietoa lukijoillesi. Vaihe 1: Luo uusi WordPress-viesti

Aloita luomalla uusi viesti WordPressissä. Muokkaimessa lisää yksinkertaisesti Font Awesome -työkaluvihjeen lyhytkoodi näin:

[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]

Tämä Font Awesome -työkaluvihjeen lyhytkoodi mahdollistaa työkaluvihjeen näyttämisen viestissäsi.

Lisää WordPress-työkaluvihjeen lyhytkoodia löytyy yksityiskohtaisesta työkaluvihjeen lyhytkoodidokumentistamme; tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/ Vaihe 2: Esikatsele työkaluvihjettäsi

Kun olet lisännyt lyhytkoodin, siirry WordPress-viestisi etupäähän. Näet kauniin kysymysympyräikonin, joka näyttää tältä:

Font Awesome Tooltip Icon

Kun käyttäjät vievät hiiren kysymysympyrän päälle, työkaluvihjeen ponnahdusikkuna ilmestyy, tarjoten lisätietoja:

Font Awesome Tooltip Popup Vaihe 3: Mukauta työkaluvihjettäsi

Sinulla on joustavuutta mukauttaa Font Awesome -ikoniisi kokoa ja väriä. Esimerkiksi, jos haluat tehdä kysymysympyräikonista suuremman, muuta vain size-parametria 2x:stä 3x:ään, 4x:ään tai jopa suurempaan! Tässä esimerkki: font awesome tooltip popup -ikkuna etupäähän

Väriä muuttaaksesi, muokkaa color-parametria mihin tahansa haluamaasi heksaarvoon, kuten #cccccc tai #eeeeee. Vaihe 4: Valitse ikonityylisi

Voit myös säätää Font Awesome -työkaluvihjeesi tyyliä muuttamalla set-parametria:

fas — Kiinteät ikonit
far — Tavalliset ikonit
fab — Brändi-ikonit

Nopea yhteenveto siitä, mitä sinun tarvitsee tietää:

tooltip_id: Tämä on työkaluvihjeen ID, jonka loit WordPress-työkaluvihjeeditorissa.
set: Valitse kiinteiden (fas), tavallisten (far) tai brändi (fab) ikonien välillä.
icon: Käytimme kysymysympyräikonia, mutta muista, että valittavanasi on yli 1 588 upeaa ikonia!
size: Voit vapaasti suurentaa kokoa 3x:ään, 4x:ään jne. suunnittelumieltymystesi mukaan.
color: Mukauta väri vastaamaan sivustoasi, kuten #eeeeee.

Nyt olet valmis parantamaan WordPress-viestejäsi viehättävillä Font Awesome -työkaluvihjeillä! Hyvää bloggausta! Yhteenveto:

Font Awesome sisältää yli 1 500 korkealaatuista ikonia, joita voidaan mukauttaa koon, värin ja tyylin osalta CSS:n avulla. Nämä ikonit on suunniteltu olevan ristiin-selaimen yhteensopivia. Font Awesome Tooltips ovat hyödyllinen komponentti käyttäjävuorovaikutuksen parantamiseksi ja hyödyllisten tietojen tarjoamiseksi visuaalisesti houkuttelevalla tavalla verkkosivuilla.

Jos tarvitset meiltä muutoksia, älä epäröi kertoa meille, yritämme parhaamme mukaan saada sen valmiiksi mahdollisimman pian (kello on 01:52).

Jos kaikki toimii hyvin, vaihda testisivustosi pääsy, emme ole koskaan kirjautuneet tiliisi suojellaksemme yksityisiä tietojasi ja henkilökohtaisia tietojasi

Kiitos, ja toivottavasti sinulla on siunattu päivä rakkaidesi kanssa

Parhain terveisin,

WordPress Tooltips -tuki

Tagged with: , ,

Teemade konfliktide lahendamine Awesome’i ja Bootstrap’i vahel WordPressi tööriistariba pistikprogrammis, kuidas kasutada font-awesome tööriistaribasid – Versioon 35.8.8 on nüüd saadaval

Posted on by wordpress tooltips Posted in WordPressi tooltip-plugina dokument (estonian) — No Comments ↓

Tere, kallid WordPress Tooltip Plugin’i kasutajad! Loodan, et see sõnum leiab teid hästi ja et naudite imelisi päevi oma perega. Saime piletit fantastiliselt WordPress Tooltip kasutajalt, kes teatas CSS-i konfliktist oma teema ja WordPress Tooltips Plugin’i vahel. Meie WordPressi arendaja kontrollis teemat ja leidis, et see on konfliktis Bootstrap’i ja Font Awesome’iga, mida kasutatakse tooltip’ides, teiste asjade seas. Probleemi lahendamiseks meie hinnatud tooltip kasutajale on meie WordPress Tooltips arendaja välja andnud uue versiooni: WordPress Tooltips Pro Plus 35.8.8.

1: Lahendatud konflikt teema ja WordPress tooltip’i hulka kuuluva Bootstrap’i raamistikuga:

Tere, tugimeeskond,
Esiteks: suur tänu veel kord uskumatult kiire reageerimise ja öötöö eest.
Versiooniga 35.8.8 on peaaegu kõik minu poolel korras:

WooCommerce'i tellimuste leht → PHP hoiatused on kadunud ✅

Salient → Tüübi haldamise paneel → enam ei ole katki ✅

Sotsiaalikoonid päises/jalas → näevad head välja ✅

Ainult üks regressioon ilmus kohe pärast versioonile 35.8.8 uuendamist:

Esilehel on mobiilne päis/hero paigutus katki (menüü/päise plokk nihkub ja vahemaa läheb valesti).

See oli juba eelnevas versioonis parandatud, kuid versiooniga 35.8.8 on see tagasi.

Taaskord, suur tänu teie väsimatu töö ja superkiirete vastuste eest — ma tõeliselt hindan, kui paindlikud ja abivalmid te olete!

Soojalt,

Lahendame probleemi tooltip kasutajaga ja vastasime:

Tere

Loodan, et see sõnum leiab teid hästi ja et teil on õnnelikud päevad oma perega 

Vabandame probleemi pärast, kontrollisime teema ja meie plugina koode, testisime seda probleemi erinevates resolutsioonides ja avastasime, et see oli põhjustatud konfliktist Bootstrap'i ja teema vahel. Lahendus on lihtne, palun avage tooltipide globaalsete seadete paneel ja keelake valik: "Luba / Keela Bootstrap CSS teema konfliktide vältimiseks?" Meie poolelt leidsime, et kõik töötab hästi 

Kas saaksite palun teha testi ja anda meile tagasisidet? Kui on mingeid probleeme, ärge kõhelge meile öelda, lahendame selle teie jaoks nii kiiresti kui võimalik 

Aitäh, olge õnnistatud päeva oma lähedastega 

Parimate soovidega,

WordPress Tooltips Tugi

2: WooCommerce’i tellimuste leht: mitmed PHP hoiatused ilmuvad endiselt tellimuse detailide sektsiooni alla (seotud post_type’i nulliga):

Tehtud, oleme oma koode ümber kirjutanud, et probleem lahendada:

if (isset($post->post_type)) {

if ($post->post_type == ‘tooltips’) { add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Kas näidata kokkuvõtet tooltip’i hüpikaknas?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }

Nüüd töötab hästi

3: Salient Tüübi paneel: halduspaneel Salient → Tüüp muutub katki ja valejooneliseks, kui WordPress Tooltips Pro on aktiivne.

Tehtud, vaatasime põhiteema koodi ja leidsime, et see sisaldab .tooltip klassi, mis on konfliktis .tooltips klassiga meie admin.css failis. Oleme oma WordPress Tooltips plugina ümber kirjutanud järgmiselt:

Laadige admin.css fail WordPress Tooltips plugina jaoks wp-admin alal ainult siis, kui praegune ekraan kuulub pluginasse.

Koodid:

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

Nüüd töötab hästi

4: Sotsiaalikoonid: Font Awesome ikoonid menüüs ja jalas (sotsiaalsete linkide) kuvatakse endiselt valesti või tühjade kastidena.

Tehtud, Salient teemas leidsime, et nad laadivad oma skripte hilja järgmiselt:

add_action('wp_enqueue_scripts', 'nectar_enqueue_dynamic_css', 20);

Oleme oma plugina ümber kirjutanud, et laadida Font Awesome hilja, et vältida konflikte teiste teemade või pluginatega:

add_action('wp_enqueue_scripts', 'ttfa_load_font_awesome', 10000);

Nii et kõik koodid Salient teemas käivitatakse esimesena, meie koodid kutsuvad Font Awesome'i laadimist viimase asjana.

Seega käivitatakse kõik koodid Salient teemas prioriteediga ja meie plugin kutsub lõpuks Font Awesome'i laadima.

Nüüd töötab hästi

Kasutaja teema kasutas Font Awesome 6.5, ja meie Font Awesome Tooltips kasutasid samuti Font Awesome 6.4 versioonis WordPress Tooltips Pro Plus 35.8.8. Uuendasime Font Awesome tooltip’e, et kasutada uusimat versiooni: Font Awesome 7.1. Mis on Font Awesome?

Font Awesome on populaarne ikoonide tööriistakomplekt ja veebifont, mis pakub suurt kogumit skaleeritavatest vektoriikoonidest ja sotsiaalsetest logodest. See võimaldab arendajatel hõlpsasti integreerida kvaliteetseid ikoone oma veebisaitidele ja rakendustele ilma pildifailide vajaduseta. Font Awesome’i peamised omadused:

Skaleeritavad ikoonid: Kuna Font Awesome'i ikoonid on vektorpõhised, saab neid skaleerida mis tahes suurusele ilma kvaliteedi kadumiseta, muutes need ideaalseks reageerivate disainide jaoks.
Ühilduvus erinevate brauseritega: Font Awesome töötab sujuvalt kõigis kaasaegsetes veebibrauserites.
Lihtne integreerimine: Arendajad saavad Font Awesome'i hõlpsasti oma projektidesse integreerida, kasutades lihtsat <link> sildi või installides selle pakihaldurite, nagu npm või Yarn, kaudu.
Kohandatav: Ikoone saab CSS-iga stiilida, võimaldades muuta värvi, suurust, pöörlemist ja palju muud, et need sobiksid veebisaidi disaininõuetega.
Juurdepääsetav: Font Awesome'i ikoone saab muuta juurdepääsetavaks, kasutades õigeid HTML atribuute, tagades, et neid saavad kasutada ekraanilugejad.
Regulaarne uuendamine: Tööriistakomplekti uuendatakse sageli uute ikoonidega, rikastades selle raamatukogu aja jooksul.

Miks kasutajad armastavad Font Awesome’i:

Lai valik: Font Awesome pakub tuhandeid ikoone, mis katab mitmesuguseid kategooriaid, pakkudes kasutajatele piisavalt valikuvõimalusi, et leida igasuguste rakenduste jaoks ideaalne ikoon.
Lihtsus: Font Awesome'i süntaks on lihtne, muutes selle rakendamise lihtsaks kõigi oskustasemete arendajatele.
Tõhusus: Kuna see on fondipõhine ikoonide komplekt, laadib Font Awesome tavaliselt kiiremini kui traditsioonilised pildiikoonid, aidates parandada veebisaidi jõudlust.
Ühenduse tugi: Suure kasutajaskonna ja põhjaliku dokumentatsiooniga saavad arendajad hõlpsasti leida tuge, õpetusi ja näiteid.
Ühtlane stiil: Kõik ikoonid on ühtse stiiliga, mis aitab säilitada visuaalset järjepidevust veebirakendustes.
Tasuta ja tasulised valikud: Font Awesome pakub nii tasuta kui ka premium versioone, võimaldades kasutajatel valida vastavalt oma vajadustele ja eelarvele.

Kokkuvõte

Font Awesome on saanud paljude arendajate lemmiklahenduseks oma mitmekesisuse, kasutusmugavuse ja ulatusliku ikooniraamatukogu tõttu. Olgu tegemist lihtsa veebisaidi või keeruka veebirakenduse loomisega, Font Awesome pakub tööriistu, mis on vajalikud kasutajaliidese disaini täiustamiseks ja kasutajakogemuse parandamiseks. Mis on Font Awesome Tooltips?

Font Awesome Tooltips on funktsioon, mis võimaldab arendajatel luua hõljutavaid teabeaknaid või vihjeid, kasutades Font Awesome ikoone, mis on kaasatud WordPress Tooltips Pro Plus versioonis 19.9.8. Need tooltip’id pakuvad täiendavat konteksti või teavet veebilehe elemendi kohta, kui kasutaja hõljutab selle kohal oma kursori. Font Awesome Tooltips peamised omadused:

Ikoonid: Saate hõlpsasti integreerida ikoone Font Awesome'i raamatukogust oma tooltip'idesse, suurendades visuaalset atraktiivsust ja kasutajakogemust.
Kohandamine: Tooltip'e saab stiilida ja kohandada, et need sobiksid teie veebisaidi disainiga, võimaldades värvi, suuruse ja paigutuse kohandamist.
Reageerivus: Need kohanduvad sageli hästi erinevatele ekraanisuurustele, muutes need sobivaks nii lauaarvutite kui ka mobiilsete liideste jaoks.
Juurdepääsetavus: Korralikult rakendatud tooltip'id võivad parandada juurdepääsetavust, pakkudes täiendavat teavet ilma kasutajaliidese segamiseta.
JavaScripti tugi: Paljud tooltip'i rakendused kasutavad JavaScripti või CSS-i raamistikke (nt Bootstrap), et täiustada funktsionaalsust, näiteks kuvamis- ja peitmisefekte.

Kuidas lisada Font Awesome Tooltips oma WordPressi postitusse

Huvitava sisu loomine oma WordPressi postitustes on nüüd lihtsam kui kunagi varem Font Awesome tooltip’ide abil! Järgige neid lihtsaid samme, et täiustada oma postitusi kaunite ikonidega, mis pakuvad teie lugejatele täiendavat teavet.

  1. samm: Looge uus WordPressi postitus

Alustage uue postituse loomisega WordPressis. Redaktoris sisestage lihtsalt Font Awesome tooltip’i lühikood järgmiselt:

[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]

See Font Awesome tooltip’i lühikood võimaldab teil kuvada tooltip’i oma postituses.

Rohkem WordPressi tooltip’i lühikoode leiate meie üksikasjalikust tooltip’i lühikoodi dokumendist; tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/ 2. samm: Eelvaade oma tooltip’ile

Kui olete lühikoodi lisanud, minge oma WordPressi postituse esipaneelile. Näete kaunist küsimusringi ikooni, mis näeb välja selline:

Font Awesome Tooltip Ikoon

Kui kasutajad hõljutavad küsimusringi kohal, ilmub tooltip’i hüpikaken, pakkudes rohkem üksikasju:

Font Awesome Tooltip Hüpikaken 3. samm: Kohandage oma tooltip’i

Teil on paindlikkus kohandada oma Font Awesome’i ikoone suuruse ja värvi osas. Näiteks, kui soovite, et küsimusringi ikoon oleks suurem, muutke lihtsalt suuruse parameetrit 2x-lt 3x-ks, 4x-ks või isegi suuremaks! Siin on näide: font awesome tooltip hüpikakna aken esipaneelil

Värvi muutmiseks muutke värvi parameetrit mis tahes soovitud heksaväärtuseks, näiteks #cccccc või #eeeeee. 4. samm: Valige oma ikooni stiil

Saate ka kohandada oma Font Awesome tooltip’i stiili, muutes set parameetrit:

fas — Tugevad ikoonid
far — Tavalised ikoonid
fab — Brändi ikoonid

Kiire kokkuvõte, mida peate teadma:

tooltip_id: See on tooltip'i ID, mille lõite WordPressi tooltip'i redaktoris.
set: Valige kas tugev (fas), tavaline (far) või bränd (fab) ikoonid.
icon: Kasutasime küsimusringi ikooni, kuid pidage meeles, et valimiseks on üle 1,588 hämmastava ikooni!
size: Võite suurust suurendada 3x, 4x jne, vastavalt oma disainieelistustele.
color: Kohandage värvi, et see sobiks teie saidiga, näiteks #eeeeee.

Nüüd olete valmis oma WordPressi postitusi täiustama kaunite Font Awesome tooltip’idega! Head blogimist! Kokkuvõte:

Font Awesome sisaldab üle 1,500 kvaliteetse ikooni, mida saab kohandada suuruse, värvi ja stiili osas CSS-i abil. Need ikoonid on loodud olema ühilduvad erinevate brauseritega. Font Awesome Tooltips on kasulik komponent, mis parandab kasutajate interaktsiooni ja pakub kasulikku teavet visuaalselt atraktiivsel viisil veebilehtedel.

Kui on midagi, mida soovite, et me muudaksime, ärge kõhelge meile öelda, me püüame oma parima, et seda võimalikult kiiresti täita (kell on 01:52).

Kui kõik töötab hästi, palun muutke oma testsaidile juurdepääsu, me ei ole kunagi teie kontole sisse loginud, et kaitsta teie isiklikke andmeid ja teavet

Aitäh, olge õnnistatud päeva oma lähedastega

Parimate soovidega,

WordPress Tooltips Tugi

Tagged with: , ,
Top