Cómo añadir jQuery Tooltips en el formulario de comentarios de WordPress
Los comentarios permiten a los usuarios interactuar con el contenido de tu sitio web. Por eso creemos que es importante dar estilo a tu diseño de comentarios y al formulario de comentarios, para que sea fácil de usar y tenga un buen aspecto. Recientemente, un usuario nos ha preguntado cómo puede añadir tooltips jQuery al formulario de comentarios de WordPress. Pensamos que otros podrían encontrar esto útil también. En este tutorial, te mostraremos cómo añadir información sobre herramientas jQuery en el formulario de comentarios de WordPress
¿Por qué añadir jQuery Tooltips?
Los tooltips aparecen cuando un usuario lleva el ratón a un elemento, normalmente proporcionándole una descripción sobre ese elemento en particular. En este tutorial, añadiremos tooltips jQuery para mostrar consejos como, Por favor, utiliza tu nombre real en los campos del formulario de comentarios
Añadiendo tooltips jQuery, puedes mejorar la experiencia del usuario, y tendrá un aspecto más agradable
Cómo añadir información sobre herramientas jQuery
Lo primero que tienes que hacer es crear una carpeta en tu escritorio y llamarla wpb-comment-tooltips
. Dentro de esta carpeta, tienes que crear estos tres archivos
- wpb-comment-tooltips.php
- wpb-tooltip.css
- wpb-tooltip.js
Utiliza un editor de texto plano como el Bloc de notas para crear estos archivos. Una vez creados los archivos, tienes que abrir wpb-comment-tooltip.php
en el editor de texto. Copia y pega este código en el archivo
<?php /** Plugin Name: WPMundobytes's Comment Form Tool Tips Description: A jQuery powered comment form tool tips plugin based on a tutorial by WPMundobytes Version: 1.0 Author: WPMundobytes Author URI: https://www.wpbeginner.com License: GPL2 */ // Only load our scripts and style when a comment form is displayed add_action( 'comment_form_before', 'wpb_comment_tooltips' ); function wpb_comment_tooltips() { wp_enqueue_script('wpb-tooltip-jquery', plugins_url('https://cdn2.wpbeginner.com/wpb-tooltip.js', __FILE__ ), array('jquery-ui-tooltip'), '', true); wp_enqueue_style('wpb-tooltip-css', plugins_url('https://cdn2.wpbeginner.com/wpb-tooltip.css', __FILE__), false, null); } // Modify comment form fields and add title attribute to form input fields function alter_comment_form_fields($fields){ $fields['email'] = '<p class="comment-form-email"><label for="email">' . __( 'Email', 'twentythirteen' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="email" title="Your email is safe with us, see our privacy policy." name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>'; $fields['url'] = '<p class="comment-form-url"><label for="url">' . __( 'Website', 'twentythirteen' ) . '</label>' . '<input id="url" name="url" title="Your website or any social media profile URL" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>'; $fields['author'] = '<p class="comment-form-author">' . '<label for="author">' . __( 'Name', 'twentythirteen' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="author" title="Please use your real name, no keywords." name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>'; return $fields; } add_filter('comment_form_default_fields','alter_comment_form_fields'); ?>
En el código anterior, primero creamos una cabecera de plugin, le damos un nombre y una descripción a este plugin. Después cargamos nuestro archivo JavaScript y CSS (consulta nuestra guía sobre cómo añadir JavaScript y estilos en WordPress)
También nos aseguramos de que estos archivos sólo se carguen cuando se muestre un formulario de comentarios. Después modificamos el formulario de comentarios por defecto y añadimos el atributo title en los campos de entrada. Este atributo title contiene el mensaje que queremos que se muestre en el tooltip. Por ejemplo, en el campo autor hemos utilizado
title="Please use your real name, no keywords."
Ahora que has creado el archivo del plugin, es el momento de añadir un poco de jQuery. Abre wpb-tooltip.js
y añade este código dentro de él:
(function($) { $( "#commentform" ).tooltip({ position: { my: "center bottom-10", at: "center top", using: function( position, feedback ) { $( this ).css( position ); $( "<div>" ) .addClass( "arrow" ) .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 de contenido en la que hemos definido la posición de los tooltips
Ahora el último paso es añadir un poco de CSS en wpb-tooltip.css
archivo. Simplemente copia y pega 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: absolute; left: 20px; top: -20px; width: 25px; height: 25px; box-shadow: 6px 5px 9px -9px #356aa0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); tranform: rotate(45deg); } .arrow.top:after { bottom: -20px; top: auto; }
Siéntete libre de modificar este archivo CSS para satisfacer tus necesidades
Eso es todo. Ahora has creado con éxito un plugin que añade tooltips jQuery en tu formulario de comentarios de WordPress. Todo lo que tienes que hacer es subir wpb-comment-tooltips
de tu escritorio a /wp-content/plugins/
de tu servidor web utilizando un cliente FTP como Filezilla. Una vez que hayas subido el plugin, ve a Plugins en el área de administración de WordPress y activa el plugin
Esperamos que este tutorial te haya ayudado a aprender cómo añadir tooltips jQuery en el formulario de comentarios de WordPress. Te animamos a que modifiques este código e intentes añadir tooltips en otros lugares. Por ejemplo, echa un vistazo a cómo hemos añadido tooltip a los testimonios en nuestro sitio. Si tienes preguntas o comentarios, deja un comentario a continuación
Si quieres conocer otros artículos parecidos a Cómo añadir jQuery Tooltips en el formulario de comentarios de WordPress puedes visitar la categoría Themes.
Deja un comentario
¡Más Contenido!