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
