Cum să adăugați tooltip-uri jQuery în formularul de comentarii WordPress

Comentariile permit utilizatorilor să interacționeze cu conținutul de pe site-ul dvs. De aceea credem că este important să stilizați aspectul comentariilor și formularul de comentarii, astfel încât să fie ușor de utilizat și să arate bine. Recent, un utilizator ne-a întrebat cum pot adăuga tooltips jQuery la formularul de comentarii WordPress. Ne-am gândit că și alții ar putea găsi acest lucru util. În acest tutorial, vă vom arăta cum să adăugați tooltips jQuery în formularul de comentarii WordPress.

De ce să adaugi tooltip-uri jQuery?

Tooltip-urile apar atunci când un utilizator își duce mouse-ul peste un element, oferindu-i de obicei o descriere despre acel element particular. În acest tutorial, vom adăuga tooltip-uri jQuery pentru a afișa sfaturi precum: Vă rugăm să folosiți numele real în câmpurile formularului de comentarii.

Prin adăugarea de tooltips jQuery, puteți îmbunătăți experiența utilizatorului și va arăta mai frumos.

Cum să adaugi tooltip-uri jQuery

Primul lucru pe care trebuie să-l faceți este să creați un folder pe desktop și să-l numiți wpb-comment-tooltips. În interiorul acestui folder, trebuie să creați aceste trei fișiere:

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

Utilizați un editor de text simplu, cum ar fi Notepad, pentru a crea aceste fișiere. După ce ați creat fișierele, trebuie să deschideți wpb-comment-tooltip.php într-un editor de text. Copiați și lipiți acest cod în fișier:

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

În codul de mai sus, am creat mai întâi un antet de plugin, oferindu-i acestui plugin un nume și o descriere. După aceea, încărcăm fișierul nostru JavaScript și CSS (consultați ghidul nostru despre cum să adăugați JavaScript și stiluri în WordPress).

Ne asigurăm, de asemenea, că aceste fișiere sunt încărcate doar atunci când este afișat un formular de comentarii. După aceea, am modificat formularul de comentarii implicit și am adăugat atributul title în câmpurile de intrare. Acest atribut title conține mesajul pe care dorim să fie afișat în tooltip. De exemplu, în câmpul autorului am folosit:

title="Vă rugăm să folosiți numele real, fără cuvinte cheie."

Acum că ați creat fișierul plugin-ului, este timpul să adăugați puțin jQuery. Deschideți fișierul wpb-tooltip.js și adăugați acest cod în el:

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

În acest cod, #commentform este selectorul unde jQuery va afișa tooltips, iar .tooltip este partea de conținut unde am definit poziția pentru tooltips.

Acum, ultimul pas este să adăugați puțin CSS în fișierul wpb-tooltip.css. Pur și simplu copiați și lipiți acest cod:

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

Simțiți-vă liber să modificați acest fișier CSS pentru a corespunde nevoilor dumneavoastră.

Atât. Acum ați creat cu succes un plugin care adaugă tooltip-uri jQuery în formularul de comentarii WordPress. Tot ce trebuie să faceți este să încărcați folderul wpb-comment-tooltips de pe desktop în directorul /wp-content/plugins/ de pe serverul dvs. web folosind un client FTP precum Filezilla. După ce ați încărcat pluginul, accesați pagina Plugins din zona de administrare WordPress și activați pluginul.

Sperăm că acest tutorial v-a ajutat să învățați cum să adăugați tooltip-uri jQuery în formularul de comentarii WordPress. Vă încurajăm să modificați acest cod și să încercați să adăugați tooltip-uri în alte locuri. De exemplu, vedeți cum am adăugat mărturii cu tooltip pe site-ul nostru. Pentru feedback și întrebări, vă rugăm să lăsați un comentariu mai jos.