Cómo agregar tooltips de jQuery al formulario de comentarios de WordPress

Los comentarios permiten a los usuarios interactuar con el contenido de tu sitio web. Es por eso que creemos que es importante estilizar tu diseño de comentarios y formulario de comentarios, para que sea fácil de usar y atractivo. Recientemente, un usuario nos preguntó cómo podían agregar tooltips de jQuery al formulario de comentarios de WordPress. Pensamos que a otros también les podría ser útil. En este tutorial, te mostraremos cómo agregar tooltips de jQuery al formulario de comentarios de WordPress.

¿Por qué agregar tooltips de jQuery?

Los tooltips aparecen cuando un usuario acerca el mouse a un elemento, generalmente proporcionándoles una descripción sobre ese elemento en particular. En este tutorial, agregaremos tooltips de jQuery para mostrar consejos como: Por favor, usa tu nombre real en los campos del formulario de comentarios.

Al agregar tooltips de jQuery, puedes mejorar la experiencia del usuario y se verá mejor.

Cómo agregar tooltips de jQuery

Lo primero que necesitas 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

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

<?php
/** 
Plugin Name: WPBeginner's Comment Form Tool Tips
Description: A jQuery powered comment form tool tips plugin based on a tutorial by WPBeginner
Version: 1.0
Author: WPBeginner
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('/wpb-tooltip.js', __FILE__ ), array('jquery-ui-tooltip'), '', true);
wp_enqueue_style('wpb-tooltip-css', plugins_url('/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, dándole a este plugin un nombre y una descripción. Después de eso, cargamos nuestro archivo JavaScript y CSS (consulta 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 comentarios predeterminado y agregamos el atributo title en los campos de entrada. Este atributo title contiene el mensaje que queremos que se muestre en la información sobre herramientas. Por ejemplo, en el campo del autor hemos utilizado:

title="Por favor, usa tu nombre real, sin palabras clave."

Ahora que has creado el archivo del plugin, es hora de agregar un poco de jQuery. Abre el archivo wpb-tooltip.js y agrega este código dentro:

(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á las informaciones sobre herramientas y .tooltip es la parte del contenido donde hemos definido la posición para las informaciones sobre herramientas.

Ahora el paso final es agregar un poco de CSS en el archivo wpb-tooltip.css. 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 agrega informaciones sobre herramientas de jQuery en tu formulario de comentarios de WordPress. Todo lo que necesitas hacer es subir la carpeta wpb-comment-tooltips desde tu escritorio al directorio /wp-content/plugins/ en tu servidor web usando un cliente FTP como Filezilla. Una vez que hayas subido el plugin, ve a la página de Plugins en el área de administración de WordPress y activa el plugin.

Esperamos que este tutorial te haya ayudado a aprender cómo agregar tooltips de jQuery al formulario de comentarios de WordPress. Te animamos a modificar este código e intentar agregar tooltips en otros lugares. Por ejemplo, mira cómo agregamos testimonios con tooltips a nuestro sitio. Para comentarios y preguntas, por favor deja un comentario abajo.