Los comentarios permiten que los usuarios se involucren con el contenido de su sitio web. Es por eso que creemos que es importante estilizar el diseño de sus comentarios y el formulario de comentarios, para que sea fácil de usar y a la vez atractivo. Recientemente, un usuario nos ha preguntado cómo pueden añadir consejos de herramientas jQuery al formulario de comentarios de WordPress. Pensamos que otros también podrían encontrar esto útil. En este tutorial, le mostraremos cómo añadir consejos de herramientas jQuery en el formulario de comentarios de WordPress.
¿Por qué agregar consejos sobre herramientas de jQuery?
Los tooltips aparecen cuando un usuario lleva su ratón a un elemento, normalmente proporcionándole una descripción sobre ese elemento en particular. En este tutorial, añadiremos consejos de herramientas de jQuery para mostrar consejos como: «Por favor, utilice su nombre real en los campos del formulario de comentarios».
Añadiendo las herramientas de jQuery, puede mejorar la experiencia del usuario, y se verá mejor.
Cómo agregar consejos sobre herramientas de jQuery
Lo primero que tienes que hacer es crear una carpeta en tu escritorio y nombrarla wpb-comment-tooltips. Dentro de esta carpeta, necesita crear estos tres archivos:
- wpb-comment-tooltips.php
- wpb-tooltip.css
- wpb-tooltip.js
Utilice un editor de texto plano como el Bloc de notas para crear estos archivos. Una vez que haya creado los archivos, necesita abrir wpb-comment-tooltip.php en el editor de texto. Copie y pegue este código en el archivo:
12345678910111213141415161718192021222324252627282930313233343536373839<?php/** Nombre del plugin: AprenderWP's Comment Form Tool TipsDescripción: Un plugin de la herramienta de comentarios de jQuery basado en un tutorial de AprenderWPVersion: 1.0Author: AprenderWPAuthor URI: https://www.wpbeginner.comLicense: GPL2*/ // Sólo cargar nuestros scripts y estilo cuando se muestra un formulario de comentario add_action('comment_form_before', 'wpb_comment_tooltips'); functionwpb_comment_tooltips() { wp_enqueue_script('wpb-tooltip-jquery', plugins_url('/wppb-tooltip.js', __FILE__), array('jquery-ui-tooltip'), '', true);wp_enqueue_style('wpb-tooltip-css', plugins_url('/wpb-tooltip.css', __FILE__), false, null);}. // Modificar los campos del formulario de comentarios y añadir el atributo title a los campos de entrada del formulario functionalter_comment_form_fields($fields){ $fields['email'] = '.
‘. (‘Email’, ‘twentythirteen’) . ‘ ‘. ( $req? ‘*’: ») . esc_attr( $commenter[‘comment_author_email’] ) . «size=»30». $aria_req. ‘ />
«Campos $» =»url» =»campos
‘. (‘Sitio web’, ‘veintitrés’) . ». esc_attr( $commenter[‘comment_author_url’] ) . «size=»30» />
«campos de $[‘autor’] = ».
‘. ». (‘Nombre’, ‘veintitrés’) . ‘ ‘. ( $req? ‘*’: ») . esc_attr( $commenter[‘comment_author’] ) . «size=»30». $aria_req. ‘ />
return$fields;}add_filter(‘comment_form_default_fields’,’alter_comment_form_fields’);?>
En el código anterior, primero creamos una cabecera de plugin, a la que le dimos un nombre y una descripción. Después de eso cargamos nuestro archivo JavaScript y CSS (vea nuestra guía sobre cómo agregar JavaScript y Estilos en WordPress).
También nos aseguramos de que estos archivos sólo se carguen cuando se muestra 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 de título contiene el mensaje que queremos que se muestre en el tooltip. Por ejemplo, en el campo de autor que hemos utilizado:
title=»Por favor, use su nombre real, sin palabras clave.»
Ahora que has creado el archivo del plugin, es el momento de añadir un poco de jQuery. Abra el archivo wpb-tooltip.js y añada este código dentro de él:
12345678910111213(function($) {$( «#commentform»).tooltip({ position: {mi: «center bottom-10», en: «center top», usando: function( position, feedback ) { $( this).css( position ); $( «») .addClass( «arrow») .addClass( feedback.vertical ) .addClass( feedback.horizontal) .appendTo( this); } } (jQuery);
En este código, #commentform es el selector donde jQuery mostrará los tooltips y .tooltip es la parte del contenido donde hemos definido la posición de los tooltips.
Ahora el paso final es añadir un poco de CSS en el archivo wpb-tooltip.css. Simplemente copie y pegue este código:
12345678910111213141415161717181920212223242526272829303132333435363738394041424344454647.ui-tooltip, .arrow:after { background: #356aaa0; frontera: 2px blanco sólido; } .ui-tooltip { relleno: 10px20px; color: blanco; border-radius: 20px; fuente: negrita14px «Helvetica Neue», Sans-Serif; texto-transformación: mayúscula; caja-sombra: 007px#356aa0; max-ancho:350px; } .flecha {anchura: 70px; altura: 16px; desbordamiento: oculto; posición: absoluto; izquierda: 50%; margen-izquierda: -35px; parte inferior: -16px; } flecha-arriba: .arriba{: -16px; abajo: auto; } .arrow.left{ left: 20%; } .arrow:after { content: «Posición: absoluta; izquierda: 20px; arriba: -20px; anchura: 25px; altura: 25px; sombra de caja: 6px5px9px-9px#356aaa0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); tranformar: rotate(45deg); }.arrow.top:after { abajo: -20px; -20px].
Siéntase libre de modificar este archivo CSS para satisfacer sus necesidades.
Eso es todo. Ahora usted ha creado con éxito un plugin que agrega consejos de herramientas de jQuery en su formulario de comentarios de WordPress. Todo lo que necesita hacer es subir la carpeta wpb-comment-tooltips desde su escritorio al directorio /wp-content/plugins/ en su servidor web usando un cliente FTP como Filezilla. Una vez que haya cargado el plugin, vaya a la página Plugins en el área de administración de WordPress y active el plugin.
Esperamos que este tutorial le haya ayudado a aprender a añadir consejos de herramientas jQuery en el formulario de comentarios de WordPress. Te animamos a que modifiques este código e intentes añadir consejos de herramientas a otros lugares. Por ejemplo, compruebe cómo hemos añadido testimonios de consejos de herramientas a nuestro sitio. Para comentarios y preguntas, por favor deje un comentario a continuación.