SÄ hÀr lÀgger du till jQuery-verktygstips i WordPress-kommentarformulÀret

SÄ hÀr lÀgger du till jQuery-verktygstips i WordPress-kommentarformulÀret

Kommentarer tillÄter anvÀndare att engagera sig med innehÄllet pÄ din webbplats. Det Àr dÀrför vi tror att det Àr viktigt att utforma din kommentarers layout och kommentarform, sÄ det Àr bÄde anvÀndarvÀnligt och snyggt. Nyligen frÄgade en anvÀndare oss hur de kan lÀgga till jQuery-verktygstips i WordPress-kommentarformulÀret. Vi trodde att andra ocksÄ skulle kunna hitta det hÀr anvÀndbart. I den hÀr guiden visar vi dig hur du lÀgger till jQuery-verktygstips i WordPress-kommentarformulÀr.

Varför lÀgga till jQuery-verktygstips?

Verktygstips visas nÀr en anvÀndare tar musen till ett objekt, vanligtvis ger dem en beskrivning av just det objektet. I den hÀr handledningen kommer vi att lÀgga till jQuery-verktygstips för att visa tips som, anvÀnd ditt riktiga namn i kommentarfÀltfÀlt.

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

Hur man lÀgger till jQuery-verktygstips

Först mÄste du skapa en mapp pÄ skrivbordet och ge den namnet wpb-comment-tooltips. Inne i den hÀr mappen mÄste du skapa dessa tre filer:

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

AnvÀnd en textredigerare som anteckningsblock för att skapa dessa filer. NÀr du har skapat filerna mÄste du öppna wpb-comment-tooltip.php i textredigeraren. Kopiera och klistra 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-rubrik, med tanke pÄ detta plugin ett namn och en beskrivning. DÀrefter laddar vi vÄr JavaScript- och CSS-fil (se vÄr guide om hur du lÀgger till JavaScript och stilar i WordPress).

Vi ser ocksÄ till att dessa filer bara laddas nÀr ett kommentarformulÀr visas. Efter det Àndrade vi standardkommentarformulÀret och lade till titelattributet i inmatningsfÀlt. Detta titelattribut innehÄller det meddelande som vi vill ska visas i verktygstipset. 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 vÀljaren dÀr jQuery visar 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 wpb-tooltip.css-filen. Kopiera och klistra in 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;
  }

Du Àr vÀlkommen att Àndra den hÀr CSS-filen för att tillgodose dina behov.

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

Vi hoppas att den hÀr guiden hjÀlpte dig att lÀra dig hur du lÀgger till jQuery-verktygstips i WordPress-kommentarformulÀret. Vi uppmuntrar dig att Àndra den hÀr koden och försöka lÀgga till verktygstips till andra platser. Kolla till exempel hur vi har lagt till tips om verktygstips pÄ vÄr webbplats. För kommentarer och frÄgor, vÀnligen lÀmna en kommentar nedan.