Hur man lägger till jQuery-verktygstips i WordPress-kommentarformuläret

Kommentarer tillåter användare att interagera med innehållet på din webbplats. Därför anser vi att det är viktigt att styla din kommentarlayout och kommentarsformulär, så att det är användarvänligt och snyggt. Nyligen frågade en användare oss hur de kan lägga till jQuery-verktygstips i WordPress-kommentarsformuläret. Vi tänkte att andra också kunde ha nytta av detta. I den här handledningen visar vi hur du lägger till jQuery-verktygstips i WordPress-kommentarsformuläret.

Varför lägga till jQuery-verktygstips?

Värdetips visas när en användare för musen över ett objekt, vilket vanligtvis ger dem en beskrivning av det specifika objektet. I den här handledningen kommer vi att lägga till jQuery-värdetips för att visa tips som, Använd ditt riktiga namn i kommentarsfälten.

Genom att lägga till jQuery-verktygstips kan du förbättra användarupplevelsen, och det kommer att se snyggare ut.

Hur man lägger till jQuery-verktygstips

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

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

Använd en enkel textredigerare som Anteckningar för att skapa dessa filer. När du har skapat filerna måste du öppna wpb-comment-tooltip.php i en textredigerare. Kopiera och klistra in denna kod 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 denna plugin ett namn och en beskrivning. Därefter laddade vi vår JavaScript- och CSS-fil (se vår guide om hur man korrekt lägger till JavaScript och stilar i WordPress).

Vi ser också till att dessa filer endast laddas när ett kommentarsformulär visas. Därefter modifierade vi standardkommentarsformuläret och lade till title-attributet i inmatningsfälten. Detta title-attribut innehåller meddelandet vi vill ska visas i värdetipset. Till exempel, i författarfältet har vi använt:

title="Använd ditt riktiga namn, inga nyckelord."

Nu när du har skapat plugin-filen är det dags att lägga till lite jQuery. Öppna filen wpb-tooltip.js och lägg till den här koden i den:

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

I den här koden är #commentform selektorn där jQuery kommer att visa verktygstips och .tooltip är innehållsdelen där vi har definierat positionen för verktygstips.

Nu är det sista steget att lägga till lite CSS i filen wpb-tooltip.css. Kopiera och klistra bara in denna kod:

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

Ändra gärna denna CSS-fil för att uppfylla dina behov.

Det var allt. Nu har du framgångsrikt skapat ett plugin som lägger till jQuery-verktygstips i ditt WordPress-kommentarsformulär. Allt du behöver göra är att ladda upp mappen wpb-comment-tooltips från din dator till katalogen /wp-content/plugins/ på din webbserver med en FTP-klient som Filezilla. När du har laddat upp pluginet, gå till sidan Plugins i WordPress adminområde och aktivera pluginet.

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du lägger till jQuery-verktygstips i WordPress-kommentarsformuläret. Vi uppmuntrar dig att modifiera den här koden och försöka lägga till verktygstips på andra platser. Kontrollera till exempel hur vi lade till verktygstips för vittnesmål på vår webbplats. För feedback och frågor, vänligen lämna en kommentar nedan.