Tutorial de información sobre herramientas de WordPress: cómo agregar uno fácilmente

Proporcionar información es la función principal de un sitio web. Sin embargo, el espacio para mostrarlo no es ilimitado. Por supuesto, es posible enviar y conectarse a otro sitio para obtener más información. Pero eso podría significar la pérdida de espectadores. Una mejor manera es proporcionar información adicional de manera nueva e innovadora. El consejo de la herramienta de WordPress es una de estas alternativas. Un globo explicativo, también conocido como el indicativo para pasar con el mouse CSS, muestra la información de los visitantes cuando mueven el mouse sobre un elemento en particular.
¿Le gustaría agregar consejos para WordPress? Esta guía muestra cómo agregar un consejo explicativo en WordPress. ¿Qué es un WordPress o CSS Hover Toltip?

Un consejo explicativo es un cuadro de texto pequeño que aparece cuando mueve el mouse sobre un área en un sitio de WordPress. Estas cajas son excelentes para agregar información adicional. Mover información a la caja evita el hacinamiento del sitio. Algunos los usan, por ejemplo, en las tablas de precios. El texto proporciona una breve descripción y precios. Pasando con el mouse sobre ellos, los espectadores revelan una descripción detallada del artículo. De esta manera, la mesa no está llena de demasiado texto.
Otros ejemplos son las definiciones de palabras, fuentes de préstamos, comentarios y mapas. Básicamente, cualquier elemento se puede mover a un cuadro de indicación. Otros usan una información sobre herramientas para dar más información sobre una foto cuando pasan el mouse sobre ella. Esto podría incluir tiempo, lugar, fotógrafo y más. El propósito es aclarar un punto o proporcionar más información. El consejo de la herramienta también se llama términos, sugerencias o mensajes de Glosario. Estos son útiles en computadoras de ratones y sitios y formularios móviles de WordPress. Esto es importante para considerar. Gran parte de la navegación de Internet hoy es de un dispositivo móvil, en lugar de en una computadora de escritorio. Los consejos de herramientas son la respuesta a este problema. Sin embargo, tenga cuidado de no poner demasiada información en la herramienta. Hay dos formas de agregar una información sobre herramientas a un sitio web de WordPress. Este artículo discutirá ambos métodos. En primer lugar, se revisa el uso de complementos y luego el método manual. El método manual implica una pequeña codificación. Agregue una información sobre herramientas de WordPress con un complemento La ventaja de un complemento de WordPress para agregar consejos de herramientas de WordPress es que ahorran tiempo. Entonces, aquí hay una lista de cinco complementos de WordPress que son fáciles de usar.
Códigos cortos Ultimate
El primer complemento de tipo de información sobre herramientas son los códigos cortos Ultimate. Es simple de usar y es compatible con los temas de WordPress más populares. Haga más que agregar consejos para WordPress. De hecho, ofrece más de 50 códigos cortos para una variedad de funcionalidades, todo gratuito. Los consejos para las herramientas de WordPressWordPress son fáciles de usar. Es pequeño, fácil y rápido. Es una solución jQuery que agrega contenido HTML al editor de WordPress, Wyswyg. Entre otras cosas, agregue audio, descargue enlaces, imágenes, PDF, redes sociales y videos.

Glosario

Glosar genera automáticamente listas de palabras basadas en el contenido de un sitio web. Agrupe las palabras y definiciones en un diccionario. Las palabras y definiciones se relacionan con las palabras en la copia. Luego cree el glosario con ToolTiP para él. Montada de herramientas de Wordtip
Esto permite a los usuarios agregar consejos de herramientas al texto simple y los enlaces apropiados en la publicación o el sitio. Use la interfaz gráfica con códigos cortos de tinyMCE. Guía al usuario a través de todo el proceso. Por lo tanto, no se requiere un conocimiento de codificación extenso. Tras de herramientas simples de complemento

Esto simplemente agrega un botón adicional al editor de publicaciones. Al hacer clic en este botón, se inserta un código corto con explicaciones en el contenido.

Luego, los usuarios agregan contenido a la bola de herramienta y asignan el elemento que desencadena la bola de herramienta. Luego, el énfasis se mueve al método CSS manual. Agregue manualmente un globo informativo de WordPress, la sección anterior discutió el uso de un complemento de WordPress para agregar consejos en un sitio de WordPress. Lo que hacen los complementos detrás de escena es establecer más estilos CSS. Luego, permite al usuario elegir entre un conjunto de configuraciones para personalizar el asesoramiento de la herramienta. El complemento generará el código corto. Por supuesto, todas estas tareas se pueden realizar manualmente. Requiere conocimiento avanzado de HTML y JQuey.

Cuando el código ya está generado, es solo cuestión de agregarlo. El truco adicional es la adición de CSS al tema. La forma más fácil de hacerlo es el uso de WordPress Customizer. Ir al personalizador del tema
Abra el tablero de WordPress.

Haga clic en el aspecto. Está en el menú principal a la izquierda.
Luego haga clic en temas.

Encuentra el tema actualmente activo.
Presione la personalización. Ahora WordPress abrirá el editor de tareas.
Haga clic en el CSS adicional en la parte inferior de la pantalla.
Agregue tres nuevas clases de CSS al tema:
Para la caja de ToolTip’s
Para el texto
Para ocultar todo
Agregue las clases de CSS al tema Este es lo que las tres clases de CSS tienen que hacer:
Define el contenedor de información sobre herramientas y su posición en relación con el texto principal.
Define la alineación, el color, el tamaño, etc. del texto en el cuadro Indicaciones.
Controla cuando el texto está oculto y aparece cuando pasa con el mouse en la parte superior.
Este código que hace estas cosas se verá así: .tooltip {
Posición: relativo;
Pantalla: bloque en línea;
Chenar-Jos: 1px puntiagudo
Black;}. Tooltip .Tooltiptext {
Visibilidad: oculto;
Ancho: 120px;
Color de fondo: negro;
Color: #fff;
Text-Align: Center;
Chenar-Rase: 6px;
Llenado: 5px 0;
/ * Posiciones consejos con herramientas */
Posición: Absoluto;
índice z: 1;}
.Tooltip: hover .tooltiptext {
Visibilidad: visible;} Estas cadenas de código generan un cuadro vacío y lo colocan en relación con el texto principal. Luego, invente el texto y define parámetros como la alineación, el color y el relleno.
La parte final oculta la caja hasta que tiene que aparecer cuando pasa el mouse sobre el artículo principal. Agregue consejos con la ayuda del editor de bloques
Después de agregar las clases CSS al tema, asegúrese de guardarlas. Ahora el consejo de la herramienta de WordPress está listo para agregarse a los sitios de WordPress. Para agregarlos:
Vaya al editor de bloques para la página donde deben alcanzar los consejos de herramientas.
Seleccione el texto principal donde debe aparecer el consejo de la herramienta de WordPress.
Establezca la opción HTML para editar.

Agregue el texto para el globo de herramientas y otra información que debe aparecer en el cuadro con la indicación:

Texto principal
Instrucciones
¡Texto aquí!
Agregue la clase CSS ToolTip-Text a Div. Esta es la clase CSS agregada con personalización en el paso anterior.
Cambie el nombre si recibió otro nombre cuando fue agregado.
Después de ingresar todo el código HTML en el bloque correcto, haga clic en Actualizar.
Asegúrese de que todo funcione accediendo al sitio web.
Destacará el consejo de la herramienta de WordPress de la misma manera que otros elementos CSS. Cambie el color, personalice la caja y así sucesivamente. Haga que coincida con el resto del diseño del sitio web. Terminar los pensamientos sobre la adición de las herramientas de WordPress de la herramienta es excelente para agregar información adicional sin apiñarse el aspecto visual. Si un visitante no pasa con el mouse sobre un cierto elemento del sitio, la información no es visible. Esto se agrega a la experiencia del usuario. La apariencia limpia y desordenada se vuelve cada vez más importante. Más personas usan dispositivos móviles para navegar por Internet. En una pantalla pequeña, las ventanas emergentes son muy molestas. Por otro lado, los visitantes aprecian los consejos de herramientas. Aparece cuando sea necesario e informe en lugar de tratar de vender. Los dos enfoques para agregar consejos para un sitio de WordPress sobre el cual se ha discutido este artículo son: el uso de complementos de WordPress. El complemento de ToolTip establece la información sobre herramientas para el usuario.

Configuración manual de ToolTip WordPress.