Comment ajouter des tooltips jQuery au formulaire de commentaires WordPress

Les commentaires permettent aux utilisateurs d'interagir avec le contenu de votre site Web. C'est pourquoi nous pensons qu'il est important de styliser votre mise en page des commentaires et votre formulaire de commentaire, afin qu'ils soient conviviaux et esthétiques. Récemment, un utilisateur nous a demandé comment ajouter des infobulles jQuery au formulaire de commentaire WordPress. Nous avons pensé que cela pourrait être utile à d'autres également. Dans ce tutoriel, nous vous montrerons comment ajouter des infobulles jQuery dans le formulaire de commentaire WordPress.

Pourquoi ajouter des infobulles jQuery ?

Les infobulles apparaissent lorsqu'un utilisateur passe sa souris sur un élément, fournissant généralement une description de cet élément particulier. Dans ce tutoriel, nous ajouterons des infobulles jQuery pour afficher des conseils tels que : Veuillez utiliser votre vrai nom dans les champs du formulaire de commentaire.

En ajoutant des infobulles jQuery, vous pouvez améliorer l'expérience utilisateur, et cela aura une meilleure apparence.

Comment ajouter des infobulles jQuery

La première chose à faire est de créer un dossier sur votre bureau et de le nommer wpb-comment-tooltips. À l'intérieur de ce dossier, vous devez créer ces trois fichiers :

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

Utilisez un éditeur de texte brut comme le Bloc-notes pour créer ces fichiers. Une fois les fichiers créés, vous devez ouvrir wpb-comment-tooltip.php dans un éditeur de texte. Copiez et collez ce code dans le fichier :

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

Dans le code ci-dessus, nous avons d'abord créé un en-tête de plugin, donné un nom et une description à ce plugin. Ensuite, nous avons chargé notre fichier JavaScript et CSS (voir notre guide sur comment ajouter JavaScript et styles dans WordPress).

Nous nous assurons également que ces fichiers ne sont chargés que lorsqu'un formulaire de commentaire est affiché. Ensuite, nous avons modifié le formulaire de commentaire par défaut et ajouté l'attribut title dans les champs de saisie. Cet attribut title contient le message que nous voulons afficher dans l'infobulle. Par exemple, dans le champ auteur, nous avons utilisé :

title="Veuillez utiliser votre vrai nom, pas de mots-clés."

Maintenant que vous avez créé le fichier du plugin, il est temps d'ajouter un peu de jQuery. Ouvrez le fichier wpb-tooltip.js et ajoutez ce code à l'intérieur :

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

Dans ce code, #commentform est le sélecteur où jQuery affichera les infobulles et .tooltip est la partie contenu où nous avons défini la position des infobulles.

La dernière étape consiste maintenant à ajouter un peu de CSS dans le fichier wpb-tooltip.css. Copiez et collez simplement ce code :

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

N'hésitez pas à modifier ce fichier CSS pour répondre à vos besoins.

C'est tout. Vous avez maintenant créé avec succès un plugin qui ajoute des infobulles jQuery dans votre formulaire de commentaire WordPress. Tout ce que vous avez à faire est de télécharger le dossier wpb-comment-tooltips depuis votre bureau vers le répertoire /wp-content/plugins/ sur votre serveur web en utilisant un client FTP comme Filezilla. Une fois que vous avez téléchargé le plugin, allez à la page Plugins dans la zone d'administration de WordPress et activez le plugin.

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter des tooltips jQuery dans le formulaire de commentaires WordPress. Nous vous encourageons à modifier ce code et à essayer d'ajouter des tooltips à d'autres endroits. Par exemple, découvrez comment nous avons ajouté des témoignages avec tooltips sur notre site. Pour vos commentaires et questions, veuillez laisser un commentaire ci-dessous.