Jak dodać etykietki jQuery w formularzu komentarza WordPress

Komentarze pozwalają użytkownikom angażować się w treści na twojej witrynie internetowej. Dlatego uważamy, że ważne jest, aby importować twój układ komentarzy i formularz komentarza, aby był przyjazny dla użytkownika, a także dobrze wyglądał. Niedawno jeden z użytkowników zapytał nas, jak dodać etykietki jQuery do formularza komentarza WordPress. Pomyśleliśmy, że inni również mogą uznać to za przydatne. W tym poradniku pokażemy, jak dodać etykietki jQuery w formularzu komentarza WordPress.

Po co dodawać etykietki jQuery?

Etykietki pojawiają się, gdy użytkownik najedzie myszką na dany element, zwykle dostarczając mu opisu tego konkretnego elementu. W tym poradniku będziemy dodawać etykietki jQuery, aby wyświetlać wskazówki takie jak, Proszę użyj twojego prawdziwego imienia i nazwiska w polach formularza komentarza.

Dodając etykietki jQuery, możesz poprawić wrażenia użytkownika i będzie wyglądać ładniej.

Jak dodać etykietki jQuery

Pierwszą rzeczą, którą musisz zrobić, to utworzyć katalog na twoim pulpicie i nazwać go wpb-comment-tooltips. Wewnątrz tego katalogu należy utworzyć te trzy pliki:

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

Użyj zwykłego edytora tekstu, takiego jak Notatnik, aby utworzyć te pliki. Po utworzeniu plików należy otworzyć wpb-comment-tooltip.php w edytorze tekstu. Skopiuj i wklej ten kod do pliku:

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

.

W powyższym kodzie najpierw utworzyliśmy nagłówek wtyczki, nadaliśmy jej nazwę i opis. Następnie wczytujemy nasz plik JavaScript i CSS (zobacz nasz przewodnik jak dodać JavaScript i style w WordPressie).

Upewniamy się również, że pliki te są wczytywane tylko wtedy, gdy wyświetlany jest formularz komentarza. Następnie zmodyfikowaliśmy domyślny formularz komentarza i dodaliśmy atrybut title w polach wejściowych. Ten atrybut title zawiera wiadomość, którą chcemy wyświetlić w etykietce. Na przykład w polu autora użyliśmy:

title="Please use your real name, no keywords".

Teraz, po utworzeniu pliku wtyczki, nadszedł czas, aby dodać trochę jQuery. Otwórz plik wpb-tooltip.js i dodaj do niego ten kod:

(function($) {
$("#commentform" ).tooltip({ position: {
	my: "center bottom-10",
        at: "center top",
        using: function( position, uwagi ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        } } });
})(jQuery);

.

W tym kodzie #commentform jest selektorem, w którym jQuery wyświetli etykietki narzędzi, a .tooltip jest częścią treści, w której zdefiniowaliśmy pozycję dla etykietek narzędzi.

Teraz ostatnim krokiem jest dodanie małego CSS w pliku wpb-tooltip.css. Wystarczy skopiować i wkleić ten 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;
  }

.

Możesz dowolnie modyfikować ten plik CSS, aby dostosować go do twoich potrzeb.

To wszystko. Teraz z powodzeniem stworzyłeś wtyczkę, która dodaje etykietki jQuery w twoim formularzu komentarza WordPress. Wszystko, co musisz zrobić, to przesłać katalog wpb-comment-tooltips z pulpitu do katalogu /wp-content/plugins/ na twoim serwerze WWW za pomocą klienta FTP, takiego jak Filezilla. Po przesłaniu wtyczki przejdź do strony Wtyczki w obszarze administracyjnym WordPress i włącz wtyczkę.

Mamy nadzieję, że ten poradnik pomógł ci dowiedzieć się, jak dodać etykietki jQuery w formularzu komentarza WordPress. Zachęcamy do zmodyfikowania tego kodu i spróbowania dodania etykietek w innych miejscach. Na przykład, sprawdź jak dodaliśmy etykietki do naszej witryny. W przypadku uwag i pytań, prosimy o pozostawienie komentarza poniżej.