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
