Los comentarios permiten a los usuarios interactuar con el contenido de su sitio web. Por eso creemos que es importante diseñar el diseño y el formulario de comentarios para que sea fácil de usar y atractivo. Recientemente, un usuario nos preguntó cómo agregar sugerencias de jQuery al formulario de comentarios de WordPress. Pensamos que otros también podrían encontrarlo útil. En este tutorial, le mostraremos cómo agregar sugerencias de jQuery en el formulario de comentarios de WordPress.
¿Por qué agregar jQuery Tooltips?
Las sugerencias aparecen cuando un usuario pasa el mouse sobre un elemento, por lo general, le da una descripción de ese elemento en particular. En este tutorial, agregaremos sugerencias de jQuery para mostrar sugerencias como, use su nombre real en los campos del formulario de comentarios.
Al agregar información sobre herramientas de jQuery, puede mejorar la experiencia del usuario y será más agradable.
Cómo agregar información sobre herramientas de jQuery
Lo primero que debe hacer es crear una carpeta en su escritorio y nombrarla wpb-comment-tooltips. Dentro de esta carpeta, debe crear estos tres archivos:
- wpb-comment-tooltips.php
- wpb-tooltip.css
- wpb-tooltip.js
Utilice un editor de texto simple como el Bloc de notas para crear estos archivos. Después de crear los archivos, debe abrir wpb-comment-tooltip.php en el editor de texto. Copie y pegue este código en el archivo:
<?php
/**
Plugin Name: TrucosWP's Comment Form Tool Tips
Description: A jQuery powered comment form tool tips plugin based on a tutorial by TrucosWP
Version: 1.0
Author: TrucosWP
Author URI: https://www.trucoswp.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 plugin, le dimos a este plugin un nombre y una descripción. Después de eso, cargamos 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 predeterminado y agregamos el atributo de título en los campos de entrada. Este atributo de título contiene el mensaje que queremos que aparezca 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 plugin, es hora de agregar algo de jQuery. Abierto wpb-tooltip.js archivo y agregue 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á sugerencias y .tooltip es la parte del contenido donde hemos definido la posición de las sugerencias.
Ahora el paso final es agregar algo de CSS en 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;
}
No dude en modificar este archivo CSS para adaptarlo a sus necesidades.
Eso es todo. Ahora ha creado con éxito un plugin que agrega información sobre herramientas de jQuery en el formulario de comentarios de WordPress. Todo lo que tienes que hacer es subir wpb-comment-tooltips carpeta del escritorio a /wp-content/plugins/ directorio en su servidor web usando un cliente FTP como Filezilla. Después de cargar el plugin, vaya a Plugins en el área de administración de WordPress y active el plugin.
Esperamos que este tutorial le haya ayudado a aprender a agregar sugerencias de jQuery en el formulario de comentarios de WordPress. Le recomendamos que modifique este código e intente agregar sugerencias en otros lugares. Por ejemplo, vea cómo agregamos testimonios de sugerencias a nuestro sitio. Para comentarios y preguntas, deje un comentario a continuación.
¿Te ha resultado útil??
0 / 0