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 la mise en page de vos commentaires et le formulaire de commentaires, afin qu’ils soient conviviaux et esthétiques. Récemment, un utilisateur nous a demandé comment ajouter des info-bulles jQuery au formulaire de commentaire WordPress. Nous avons pensé que d’autres pourraient également trouver cela utile. Dans ce tutoriel, nous allons vous montrer comment ajouter des info-bulles jQuery dans un formulaire de commentaire WordPress.
Pourquoi ajouter des info-bulles jQuery ?
Des info-bulles apparaissent lorsqu’un utilisateur place sa souris sur un élément, lui fournissant généralement une description de cet élément particulier. Dans ce didacticiel, nous ajouterons des info-bulles jQuery pour afficher des astuces telles que : Veuillez utiliser votre vrai nom dans les champs du formulaire de commentaire.
En ajoutant des info-bulles jQuery, vous pouvez améliorer l’expérience utilisateur et cela sera plus joli.
Comment ajouter des info-bulles jQuery
La première chose que vous devez faire est de créer un dossier sur votre bureau et de le nommer wpb-comment-tooltips. Dans 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 que vous avez créé les fichiers, vous devez ouvrir wpb-comment-tooltip.php dans l’éditeur de texte. Copiez et collez ce code dans le fichier :
<?php
/**
Plugin Name: Themelocal's Comment Form Tool Tips
Description: A jQuery powered comment form tool tips plugin based on a tutorial by Themelocal
Version: 1.0
Author: Themelocal
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, en lui donnant un nom et une description. Après cela, nous chargeons notre fichier JavaScript et CSS (voir notre guide sur la façon d’ajouter du JavaScript et des styles dans WordPress).
Nous veillons également à ce que ces fichiers ne soient chargés que lorsqu’un formulaire de commentaire est affiché. Après cela, nous avons modifié le formulaire de commentaire par défaut et ajouté l’attribut title dans les champs de saisie. Cet attribut de titre contient le message que nous souhaitons afficher dans l’info-bulle. Par exemple, dans le champ auteur nous avons utilisé :
title="Please use your real name, no keywords."
Maintenant que vous avez créé le fichier du plugin, il est temps d’ajouter un peu de jQuery. Ouvert wpb-tooltip.js fichier 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 info-bulles et .tooltip est la partie contenu où nous avons défini la position des info-bulles.
Maintenant, la dernière étape consiste à ajouter un peu de CSS dans wpb-tooltip.css déposer. 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 info-bulles jQuery dans votre formulaire de commentaire WordPress. Tout ce que vous avez à faire est de télécharger wpb-comment-tooltips dossier de votre bureau vers /wp-content/plugins/ répertoire sur votre serveur Web à l’aide d’un client FTP comme Filezilla. Une fois que vous avez téléchargé le plugin, allez à 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 info-bulles jQuery dans le formulaire de commentaire WordPress. Nous vous encourageons à modifier ce code et à essayer d’ajouter des info-bulles à d’autres endroits. Par exemple, découvrez comment nous avons ajouté des témoignages d’info-bulles sur notre site. Pour des commentaires et des questions, veuillez laisser un commentaire ci-dessous.
