Cómo agregar información sobre herramientas jQuery en el formulario de comentarios de WordPress

Los comentarios permiten a los usuarios interactuar con el contenido de su sitio web. Es por eso que creemos que es importante diseñar el diseño de sus comentarios y el formulario de comentarios, por lo que es fácil de usar y atractivo. Recientemente, un usuario nos preguntó cómo pueden agregar información sobre herramientas jQuery al formulario de comentarios de WordPress. Pensamos que otros también podrían encontrar esto útil. En este tutorial, le mostraremos cómo agregar información sobre herramientas jQuery en el formulario de comentarios de WordPress.

¿Por qué añadir JQuery Tooltips?

La información sobre herramientas aparece cuando un usuario lleva el mouse a un elemento, generalmente brindándole una descripción sobre ese elemento en particular. En este tutorial, agregaremos información sobre herramientas de jQuery para mostrar consejos como, Por favor, use su nombre real en los campos de formulario de comentarios.

Al agregar información sobre herramientas de jQuery, puede mejorar la experiencia del usuario y se verá mejor.

Cómo agregar información sobre herramientas jQuery

Lo primero que debes hacer es crear una carpeta en tu escritorio y nombrarla wpb-comment-tooltips. Dentro de esta carpeta, necesitas crear estos tres archivos:

• wpb-comment-tooltips.php
• wpb-tooltip.css
• wpb-tooltip.js

Use un editor de texto plano como el Bloc de notas para crear estos archivos. Una vez que haya creado los archivos, necesita abrir wpb-comment-tooltip.php en editor de texto. Copia y pega este código en el archivo:

 '. __ ('Correo electrónico', 'veinte y trece'). ''. ($ req? '*': "). '
'; $ fields ['url'] = '
'. __ ('Sitio web', 'veinte y trece'). ''. '
'; $ fields ['author'] = '
'. ''. __ ('Nombre', 'veinte y trece'). ''. ($ req? '*': "). '
'; devuelve $ campos;  add_filter ('comment_form_default_fields', 'alter_comment_form_fields'); ?> 

En el código anterior, primero creamos un encabezado de complemento, dado a este complemento un nombre y una descripción. Después de eso cargamos nuestro archivo JavaScript y CSS (vea nuestra guía sobre cómo agregar JavaScript y estilos en WordPress).

También nos aseguramos de que estos archivos solo se carguen cuando se muestra un formulario de comentarios. Después de eso, modificamos el formulario de comentario predeterminado y agregamos el atributo de título en los campos de entrada. Este atributo de título contiene el mensaje que queremos que se muestre en la información sobre herramientas. Por ejemplo, en el campo de autor hemos utilizado:

title = "Por favor, use su nombre real, sin palabras clave".

Ahora que ha creado el archivo de complemento, es hora de agregar un poco de jQuery. Abierto wpb-tooltip.js archiva y añade este código dentro de él:

 (function ($) $ ("#commentform") .tooltip (position: my: "center bottom-10", en: "center top", usando: function (position, feedback) $ (this). css (position); $ ("") .addClass ("arrow") .addClass (feedback.vertical) .addClass (feedback.horizontal) .appendTo (this););) (jQuery); 

En este codigo, #commentar es el selector donde jQuery mostrará información sobre herramientas y .información sobre herramientas Es la parte de contenido donde hemos definido la posición de información sobre herramientas..

Ahora el último paso es agregar un poco de CSS en wpb-tooltip.css expediente. Simplemente copia y pega este código:

 .ui-tooltip, .arrow: after background: # 356aa0; borde: 2px blanco sólido;  .ui-tooltip relleno: 10px 20px; color blanco; radio del borde: 20px; fuente: negrita 14px "Helvetica Neue", Sans-Serif; transformación de texto: mayúsculas; caja de sombra: 0 0 7px # 356aa0; ancho máximo: 350 px  .arrow ancho: 70px; altura: 16px; desbordamiento: oculto; posición: absoluta; izquierda: 50%; margen izquierdo: -35px; inferior: -16px;  .arrow.top top: -16px; abajo: auto  .arrow.left izquierda: 20%;  .arrow: after content: ""; posición: absoluta; izquierda: 20px; arriba: -20px; ancho: 25px; altura: 25px; box-shadow: 6px 5px 9px -9px # 356aa0; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotar (45deg); -o-transformar: rotar (45deg); Transformación: rotar (45 grados);  .arrow.top: after bottom: -20px; arriba: auto;  

Siéntase libre de modificar este archivo CSS para satisfacer sus necesidades.

Eso es todo. Ahora ha creado con éxito un complemento que agrega información sobre herramientas jQuery en su formulario de comentarios de WordPress. Todo lo que necesitas hacer es subir wpb-comment-tooltips carpeta desde tu escritorio a / wp-content / plugins / directorio en su servidor web utilizando un cliente FTP como Filezilla. Una vez que haya subido el plugin, vaya a Complementos página en el área de administración de WordPress y activar el complemento.

Esperamos que este tutorial le haya ayudado a aprender cómo agregar información sobre herramientas jQuery en el formulario de comentarios de WordPress. Le recomendamos que modifique este código e intente agregar información sobre herramientas a otros lugares. Por ejemplo, vea cómo agregamos testimonios de información sobre herramientas a nuestro sitio. Para comentarios y preguntas, por favor deje un comentario a continuación.