Cómo agregar información sobre herramientas de jQuery al 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 y el formulario de comentarios para que sea fácil de usar y se vea bien. 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.

Información sobre herramientas de jQuery en acción 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 se desplaza sobre un elemento y, por lo general, proporciona una descripción de ese elemento en particular. En este tutorial vamos a agregar información sobre herramientas de jQuery a consejos como: Por favor, use su nombre correcto en los campos 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 y nombrar una carpeta en su escritorio wpb-comment-tooltips. En esta carpeta necesita crear los siguientes 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, deberá abrirlos wpb-comment-tooltip.php en el editor de texto. Copie y pegue 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 un encabezado de complemento que le dio a este complemento un nombre y una descripción. Después de eso, cargaremos 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. Luego cambiamos el formulario de comentarios estándar y agregamos el atributo de título a los campos de entrada. Este atributo de título contiene el mensaje que se mostrará en la información sobre herramientas. Por ejemplo, en el campo de autor, usamos:

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

Ahora que ha creado el archivo del complemento, es hora de agregar un poco de jQuery. abrir wpb-tooltip.js Archiva y agrega este código:

(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 en el que jQuery muestra información sobre herramientas y .tooltip es la parte de contenido en la que definimos la posición de la información sobre herramientas.

Ahora, el último paso es agregar un poco de CSS wpb-tooltip.css Archivo. 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: 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;
  }

Puede adaptar este archivo CSS a sus necesidades en cualquier momento.

Eso es todo. Ahora ha creado con éxito un complemento que agrega información sobre herramientas de jQuery a su formulario de comentarios de WordPress. Todo lo que tienes que hacer es subirlo wpb-comment-tooltips Carpeta de tu escritorio /wp-content/plugins/ Directorio en su servidor web con un cliente FTP como Filezilla. Una vez que haya cargado el complemento, vaya a Complementos Página en el área de administración de WordPress y active el complemento.

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