Come aggiungere tooltip jQuery nel modulo di commento di WordPress

I commenti permettono agli utenti di interagire con i contenuti del vostro sito web. Per questo motivo, crediamo che sia importante creare un layout per i commenti e un modulo per i commenti che sia di facile utilizzo per l’utente e di bell’aspetto. Recentemente, un utente ci ha chiesto come aggiungere tooltip jQuery al modulo dei commenti di WordPress. Abbiamo pensato che anche altri avrebbero potuto trovarlo utile. In questo tutorial vi mostreremo come aggiungere i tooltip di jQuery al modulo dei commenti di WordPress.

Perché aggiungere tooltip jQuery?

I tooltip appaiono quando l’utente passa con il mouse su un elemento, di solito fornendo una descrizione di chi siamo. In questa esercitazione, aggiungeremo i tooltip di jQuery per mostrare suggerimenti come NON SI TRADUCE nei campi dei moduli di commento.

Aggiungendo i tooltip di jQuery, si può migliorare l’esperienza dell’utente e l’aspetto sarà più gradevole.

Come aggiungere i tooltip di jQuery

La prima cosa da fare è creare una cartella sul desktop e chiamarla wpb-comment-tooltips. All’interno di questa cartella, è necessario creare questi tre file:

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

Per creare questi file, utilizzare un editor di testo come Notepad. Una volta creati i file, è necessario aprire wpb-comment-tooltip.php nell’editor di testo. Copiare e incollare questo codice nel file:

<?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');
?>

Nel codice sopra riportato, abbiamo prima creato un header per il plugin, dando a questo plugin un nome e una descrizione. Poi abbiamo caricato il nostro file JavaScript e CSS (si veda la nostra guida su come add-on JavaScript e stili in WordPress).

Ci assicuriamo anche che questi file vengano caricati solo quando viene visualizzato un modulo per i commenti. Successivamente, abbiamo modificato il modulo di commento predefinito e aggiunto l’attributo title nei campi di input. Questo attributo contiene il messaggio che vogliamo visualizzare nel tooltip. Per esempio, nel campo autore abbiamo usato:

title="NON SI TRADUCE il tuo vero nome, senza parole chiave".

Ora che è stato creato il file del plugin, è il momento di aggiungere un po’ di jQuery. Aprite il file wpb-tooltip.js e aggiungete questo codice al suo interno:

(function($) {
$("#commentform" ).tooltip({ position: {
	my: "center bottom-10",
        at: "centro in alto",
        using: function( position, feedback ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        } } });
})(jQuery);

In questo codice, #commentform è il selettore in cui jQuery visualizza i tooltip e .tooltip è la parte di contenuto in cui abbiamo definito la posizione dei tooltip.

Ora il passo finale consiste nell’aggiungere un po’ di CSS nel file wpb-tooltip.css. Basta copiare e incollare questo codice:

.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;
  }

Sentitevi liberi di modificare questo file CSS per soddisfare le vostre esigenze.

Tutto-in-uno. Ora avete creato con successo un plugin che aggiunge tooltip jQuery nel modulo dei commenti di WordPress. Tutto quello che dovete fare è caricare la cartella wpb-comment-tooltips dal vostro desktop alla directory /wp-content/plugins/ sul vostro server web, utilizzando un client FTP come Filezilla. Una volta caricato il plugin, andate alla pagina Plugins nell’area di amministrazione di WordPress e attivate il plugin.

Speriamo che questo tutorial vi abbia aiutato a capire come aggiungere tooltip jQuery nel modulo dei commenti di WordPress. Vi invitiamo a modificare questo codice e a provare ad aggiungere i tooltip in altri punti. Ad esempio, selezionate il modo in cui abbiamo aggiunto i tooltip alle testimonianze sul nostro sito. Per feedback e domande, lasciate un commento qui sotto.