Cómo Agregar Información Sobre Herramientas De Jquery En El Formulario De Comentarios De Wordpress

Cómo agregar información sobre herramientas de 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, para que sean fáciles de usar y estéticos. Recientemente, un usuario nos preguntó cómo agregar información sobre herramientas de 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 de jQuery en el formulario de comentarios de WordPress.

¿Por qué agregar información sobre herramientas de jQuery?

La información sobre herramientas aparece cuando un usuario pasa el mouse sobre un elemento, generalmente proporcionándole una descripción de ese elemento en particular. En este tutorial, agregaremos información sobre herramientas de jQuery para mostrar sugerencias como, use su nombre real en los campos del 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 de jQuery

Lo primero que debe hacer es crear una carpeta en su escritorio y llamarla wpb-comment-tooltips. En esta carpeta, debe crear estos tres archivos:

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

Utilice un editor de texto sin formato como el Bloc de notas para crear estos archivos. Una vez que haya creado los archivos, debe abrir wpb-comment-tooltip.php en el editor de texto. Copie y pegue este código en el archivo:[‘email’] = ‘

‘; $ campos[‘url’] = ‘

«. ‘

‘; $ campos[‘author’] = ‘

«. ‘ «. ($ req? ‘*‘:’ ‘). ‘

‘; return $ campos; } add_filter (‘comment_form_default_fields’, ‘alter_comment_form_fields’); ?> En el código anterior, primero creamos un encabezado de complemento, dándole un nombre y una descripción. Después de eso, cargamos nuestro archivo JavaScript y CSS (consulte 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, cambiamos el formulario de comentarios predeterminado y agregamos el atributo de título en los campos de entrada. Este atributo de título contiene el mensaje que queremos mostrar en la información sobre herramientas. Por ejemplo, en el campo de autor usamos: title = «Por favor, use su nombre real, sin palabras clave». Ahora que ha creado el archivo del complemento, es hora de agregar algo de jQuery. Abra el archivo wpb-tooltip.js y agregue este código dentro: (function ($) {$ («#commentform») .tooltip ({position: {my: «center bottom-10», at: «center top», usando: función (posición, retroalimentación) {$ (esto) .css (posición); $ («

«) .addClass (» flecha «) .addClass (feedback.vertical) .addClass (feedback.horizontal) .appendTo (this);}}});}) (jQuery); En este código, #commentform es el selector donde jQuery mostrará la información sobre herramientas y .tooltip es la parte del contenido donde establecemos la posición de la información sobre herramientas. El último paso ahora es agregar algo de CSS al archivo wpb-tooltip.css. Simplemente copie y pegue este código: .ui -tooltip, .arrow: after {background: # 356aa0; border: 2px solid white;} .ui-tooltip {padding: 10px 20px; color: white; border-radius: 20px; font: bold 14px «Helvetica Neue», Sans -Serif; text-transform: uppercase; box-shadow: 0 0 7px # 356aa0; max-width: 350px;} .arrow {width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px;} .arrow.top {top: -16px; bottom: auto;} .arrow.left {left: 20%;} .arrow: after {content: «»; position : absoluta; izquierda: 20px; arriba: -20px; ancho: 25px; alto: 25px; cuadro de sombra: 6px 5px 9px -9p x # 356aa0; -webkit-transform: turn (45 grados); -moz-transform: rotación (45 grados); -ms-transform: rotación (45 grados); -o-transform: rotación (45 grados); tranform: rotación (45 grados); } .arrow.top: after {bottom: -20px; alto: automático; } No dude en modificar este archivo CSS para satisfacer sus necesidades. Es todo. Ahora ha creado con éxito un complemento que agrega información sobre herramientas de jQuery en su formulario de comentarios de WordPress. Todo lo que necesita hacer es cargar la carpeta wpb-comment-tooltips en su escritorio al directorio / wp-content / plugins / en su servidor web usando un cliente FTP como Filezilla. Una vez que haya descargado el complemento, navegue hasta Complementos en el área de administración de WordPress y active el complemento. Esperamos que este tutorial le haya ayudado a aprender a agregar información sobre herramientas de jQuery en el formulario de comentarios de WordPress. Le recomendamos que edite este código e intente agregar información sobre herramientas en otros lugares. Por ejemplo, descubra cómo agregamos información sobre herramientas de testimonios a nuestro sitio. Para sus comentarios y preguntas, deje un comentario a continuación.

Leave a Reply