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

Cómo funciona jQuery Tooltips en los formularios de comentarios de WordPress

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

La información sobre herramientas aparece cuando los usuarios mueven el mouse sobre un elemento, generalmente brindándoles una descripción de ese elemento en particular. En este tutorial, agregaremos información sobre herramientas de jQuery para mostrar una sugerencia, por ejemplo, use su nombre real en el campo 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

Primero, debe crear una carpeta en su escritorio y nombrarla wpb-comment-tooltipsEn esta carpeta, debe crear los siguientes tres archivos:

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

Utilice un editor de texto sin formato como el Bloc de notas para crear estos archivos.Después de crear el archivo, debe abrir wpb-comment-tooltip.php en un 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 ><label for="email">' . __( 'Email', 'twentythirteen' ) . '</label> ' .
      ( $req ? '<span >*</span>' : '' ) .
      '<input  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 ><label for="url">' .
      __( 'Website', 'twentythirteen' ) . '</label>' .
      '<input  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 >' .
      '<label for="author">' . __( 'Name', 'twentythirteen' ) . '</label> ' .
      ( $req ? '<span >*</span>' : '' ) .
      '<input  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 un encabezado de complemento, dándole un nombre y una descripción. Después de eso, cargamos nuestros archivos 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 el formulario de comentarios. Después de eso, modificamos el formulario de comentarios predeterminado y agregamos un atributo de título al campo de entrada. Esta propiedad de título contiene el mensaje que queremos mostrar en la información sobre herramientas. Por ejemplo, en el campo del autor usamos:

title="Please use your real name, no keywords."

Ahora que ha creado su archivo de complemento, es hora de agregar un poco de jQuery.Abierto wpb-tooltip.js archivo y agregue el siguiente código en é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 para el cual jQuery mostrará la información sobre herramientas, y .tooltip es la sección de contenido donde definimos la posición de la información sobre herramientas.

Ahora el último paso es wpb-tooltip.css documento. Solo 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;
  }

No dude en modificar este archivo CSS para adaptarlo a sus necesidades.

eso es todo. Ahora ha creado con éxito un complemento para agregar información sobre herramientas de jQuery a su formulario de comentarios de WordPress.Todo lo que necesitas hacer es cargar wpb-comment-tooltips carpeta desde su escritorio a /wp-content/plugins/ Directorio en su servidor web utilizando un cliente FTP como Filezilla.Después de cargar el complemento, vaya a enchufar página en el área de administración de WordPress y active el complemento.

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

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.