Så här addar du jQuery Tooltips i formuläret för kommentarer i WordPress

Comments allow användare att engagera sig i innehållet på din website. Därför anser vi att det är viktigt att utforma din layout för kommentarer och ditt kommentarsformulär så att det är både användarvänligt och snyggt. Senast frågade en användare oss hur de kan add to jQuery tooltips till WordPress comment form. Vi tänkte att andra kanske också skulle tycka att detta var användbart. I denna tutorial visar vi you hur man add to jQuery tooltips i WordPress comment form.

Varför add to jQuery Tooltips?

Tooltips appear when a user takes their mouse to an item, usually providing them description about that certain item. I denna tutorial kommer vi att lägga till jQuery Tooltips för att visa tips som, Vänligen använd ditt riktiga namn i fält för kommentarformulär.

Genom att lägga till jQuery Tooltips kan du förbättra användarnas upplevelse och det kommer att se snyggare ut.

Hur man addar jQuery Tooltips

Det första du behöver göra är att skapa en folder på ditt skrivbord och döpa den till wpb-comment-tooltips. Inuti denna folder måste du skapa dessa tre filer:

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

Använd en plain text editor som Notepad för att skapa dessa filer. När du har skapat filerna måste du öppna wpb-comment-tooltip.php i textredigeraren. Copy and paste in den här koden i filen:

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

I koden ovan skapade vi först en plugin header, gav detta plugin ett namn och en description. Därefter hämtar vi vår JavaScript- och CSS-fil (se vår guide om hur du lägger till JavaScript och Styles i WordPress).

Vi ser också till att dessa filer endast hämtas när ett formulär för kommentarer visas. Efter det ändrade vi standardformuläret för kommentarer och add to title-attributet i input fields. Detta title-attribut innehåller det message vi vill ska visas i tooltip. I fältet author har vi till exempel använt:

title="Vänligen använd ditt riktiga namn, inga keywords."

Nu när du har skapat filen för pluginet är det dags att add to lite jQuery. Öppna wpb-tooltip.js-filen och add to denna kod inuti den:

(function($) {
$( "#commentform" ).tooltip({ position: {
	my: "centrerat längst ner-10"
        kl: "centrerat högst upp",
        using: function( position, återkoppling ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass( "pil" )
            .addClass( återkoppling.vertikal )
            .addClass( återkoppling.horisontell )
            .appendTo( this );
        } } });
})(jQuery);

I den här koden är #commentform väljaren där jQuery kommer att visa tooltips och .tool tip är content-delen där vi har definierat positionen för tooltips.

Nu är det sista steget att add to lite CSS i wpb-tooltip.css-filen. Helt enkelt copy and paste den här koden:

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

Känn dig gratis att ändra denna CSS-fil för att möta dina behov.

Det var allt. Nu har du utan problem skapat ett plugin som add to jQuery tooltips i din WordPress comment form. Allt du behöver göra är att uploada wpb-comment-tooltips folder från ditt skrivbord till /wp-content/plugins/ directory på din web server med hjälp av en FTP-klient som gillar Filezilla. När du har uploadat pluginet går du till Plugins page i WordPress admin area och aktiverar pluginet.

Vi hoppas att denna tutorial hjälpte dig att lära dig hur du addar jQuery tooltips i formuläret för WordPress comments. Vi uppmuntrar dig att ändra den här koden och försöka lägga till Tooltips på andra platser. Kontrollera till exempel hur vi adderade Tooltip testimonials till vår site. För återkoppling och frågor, vänligen lämna en comment under.