Comment ajouter des info-bulles jQuery dans un formulaire de commentaire 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 la mise en page et le formulaire de commentaire, de sorte 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 trouver cela utile aussi. Dans ce tutoriel, nous allons vous montrer comment ajouter des info-bulles jQuery dans le formulaire de commentaire WordPress.

Pourquoi ajouter des info-bulles jQuery??

Des info-bulles apparaissent lorsqu'un utilisateur déplace sa souris sur un élément, en lui fournissant généralement une description de cet élément. Dans ce didacticiel, nous allons ajouter 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 de l'utilisateur et le rendre plus agréable..

Comment ajouter des info-bulles jQuery

La première chose à 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 tel que Notepad 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:

 '. __ ('Email', 'vingt-treize'). '' ($ req? '*': "). '
'; $ fields ['url'] = '
'. __ ("site Web", "vingt-treize"). '' '
'; $ fields ['author'] = '
'. '' __ ('Nom', 'vingt-treize'). '' ($ req? '*': "). '
'; retourne $ champs;  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 attribuant un nom et une description. Après cela, nous chargeons nos fichiers JavaScript et CSS (voir notre guide sur la façon d’ajouter JavaScript et les styles dans WordPress)..

Nous nous assurons également que ces fichiers ne sont 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 voulons afficher dans l'info-bulle. 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 plugin, il est temps d'ajouter un peu de jQuery. Ouvrir wpb-tooltip.js Fichier et ajouter ce code à l'intérieur:

 (function ($) $ ("#commentform") .tooltip (position: my: "center bottom-10", en: "center top", en utilisant: function (position, feedback) $ (this). css (position); $ ("") .addClass ("flèche") .addClass (feedback.vertical) .addClass (feedback.horizontal) .appendTo (this););) (jQuery); 

Dans ce code, #commentform est le sélecteur où jQuery affichera des info-bulles et .infobulle est la partie contenu où nous avons défini la position des info-bulles.

La dernière étape consiste à ajouter un peu de CSS dans wpb-tooltip.css fichier. Il suffit de copier et coller ce code:

 .ui-tooltip, .arrow: après background: # 356aa0; bordure: blanc 2px;  .ui-tooltip padding: 10px 20px; Couleur blanche; border-radius: 20px; police: gras 14px "Helvetica Neue", Sans-Serif; text-transform: majuscule; box-shadow: 0 0 7px # 356aa0; largeur maximale: 350px;  .arrow width: 70px; hauteur: 16px; débordement caché; position: absolue; à gauche: 50%; marge gauche: -35px; en bas: -16px;  .arrow.top top: -16px; en bas: auto;  .arrow.left gauche: 20%;  .arrow: après contenu: ""; position: absolue; à gauche: 20px; en haut: -20px; largeur: 25px; hauteur: 25px; box-shadow: 6px 5px 9px -9px # 356aa0; -webkit-transform: rotation (45deg); -moz-transform: rotation (45deg); -ms-transform: rotation (45deg); -o-transformer: faire pivoter (45deg); tranform: rotation (45deg);  .arrow.top: après en bas: -20px; en haut: 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 plug-in 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 pour / wp-content / plugins / répertoire sur votre serveur Web en utilisant un client FTP comme Filezilla. Une fois que vous avez téléchargé le plugin, allez à Plugins page dans la zone d'administration de WordPress et activer le plugin.

Nous espérons que ce tutoriel vous a aidé à apprendre à ajouter des info-bulles jQuery dans le formulaire de commentaire WordPress. Nous vous encourageons à modifier ce code et à ajouter des info-bulles à d’autres endroits. Par exemple, voyez comment nous avons ajouté des témoignages d’infos à notre site. Pour les commentaires et les questions, s'il vous plaît laissez un commentaire ci-dessous.