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

información sobre herramientas jQuery en acción 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.

¡Más Contenido!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Go up