Come aggiungere tooltip jQuery nel modulo commenti di WordPress

I commenti consentono agli utenti di interagire con i contenuti del tuo sito web. Ecco perché riteniamo importante stilizzare il tuo layout dei commenti e il modulo di commenti, in modo che sia facile da usare e dall'aspetto gradevole. Recentemente, un utente ci ha chiesto come aggiungere tooltip jQuery al modulo di commenti di WordPress. Abbiamo pensato che anche altri potessero trovarlo utile. In questo tutorial, ti mostreremo come aggiungere tooltip jQuery nel modulo di commenti di WordPress.

Perché aggiungere tooltip jQuery?

I tooltip appaiono quando un utente sposta il mouse su un elemento, fornendo solitamente una descrizione di quell'elemento specifico. In questo tutorial, aggiungeremo tooltip jQuery per mostrare suggerimenti come: "Si prega di utilizzare il proprio nome reale nei campi del modulo di commenti".

Aggiungendo tooltip jQuery, puoi migliorare l'esperienza utente e renderla più gradevole.

Come aggiungere tooltip jQuery

Per prima cosa, devi creare una cartella sul tuo desktop e chiamarla wpb-comment-tooltips. All'interno di questa cartella, devi creare questi tre file:

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

Utilizza un editor di testo semplice come Blocco note per creare questi file. Una volta creati i file, devi aprire wpb-comment-tooltip.php nell'editor di testo. Copia e incolla 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, abbiamo prima creato un'intestazione del plugin, dato a questo plugin un nome e una descrizione. Dopodiché carichiamo il nostro file JavaScript e CSS (vedi la nostra guida su come aggiungere JavaScript e stili in WordPress).

Ci assicuriamo anche che questi file vengano caricati solo quando viene visualizzato un modulo di commento. Dopodiché abbiamo modificato il modulo di commento predefinito e aggiunto l'attributo title nei campi di input. Questo attributo title contiene il messaggio che vogliamo venga visualizzato nel tooltip. Ad esempio, nel campo autore abbiamo utilizzato:

title="Si prega di usare il proprio vero nome, nessuna parola chiave."

Ora che hai creato il file del plugin, è ora di aggiungere un po' di jQuery. Apri il file wpb-tooltip.js e aggiungi questo codice al suo interno:

(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);

In questo codice, #commentform è il selettore dove jQuery visualizzerà i tooltip e .tooltip è la parte del contenuto dove abbiamo definito la posizione per i tooltip.

Ora il passo finale è aggiungere un po' di CSS nel file wpb-tooltip.css. Copia e incolla semplicemente 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;
  }

Sentiti libero di modificare questo file CSS per soddisfare le tue esigenze.

Tutto qui. Ora hai creato con successo un plugin che aggiunge tooltip jQuery nel tuo modulo di commento di WordPress. Tutto ciò che devi fare è caricare la cartella wpb-comment-tooltips dal tuo desktop nella directory /wp-content/plugins/ sul tuo server web utilizzando un client FTP come Filezilla. Una volta caricato il plugin, vai alla pagina Plugin nell'area di amministrazione di WordPress e attiva il plugin.

Speriamo che questo tutorial ti abbia aiutato a imparare come aggiungere tooltip jQuery nel modulo commenti di WordPress. Ti incoraggiamo a modificare questo codice e provare ad aggiungere tooltip in altri posti. Ad esempio, dai un'occhiata a come abbiamo aggiunto testimonial con tooltip al nostro sito. Per feedback e domande, lascia un commento qui sotto.