Jak dodać jQuery Tooltips do formularza komentarzy WordPress

Komentarze pozwalają użytkownikom na interakcję z treścią Twojej witryny. Dlatego uważamy, że ważne jest, aby stylizować układ komentarzy i formularz komentarzy, aby były przyjazne dla użytkownika i dobrze wyglądały. Ostatnio jeden z użytkowników zapytał nas, jak dodać podpowiedzi jQuery do formularza komentarzy WordPress. Pomyśleliśmy, że może to być przydatne również dla innych. W tym poradniku pokażemy Ci, jak dodać podpowiedzi jQuery do formularza komentarzy WordPress.

Dlaczego warto dodać narzędzia podpowiedzi jQuery?

Etykietki pojawiają się, gdy użytkownik najeżdża kursorem myszy na element, zazwyczaj dostarczając opis tego konkretnego elementu. W tym samouczku dodamy etykietki jQuery, aby wyświetlać wskazówki, takie jak: Proszę używać swojego prawdziwego imienia w polach formularza komentarza.

Dodając narzędzia podpowiedzi jQuery, możesz poprawić doświadczenie użytkownika, a będzie to wyglądać ładniej.

Jak dodać podpowiedzi jQuery

Pierwszą rzeczą, którą musisz zrobić, jest utworzenie folderu na pulpicie i nazwanie go wpb-comment-tooltips. Wewnątrz tego folderu musisz utworzyć te trzy pliki:

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

Użyj zwykłego edytora tekstu, takiego jak Notatnik, do utworzenia tych plików. Po utworzeniu plików musisz 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 załadowaliśmy nasz plik JavaScript i CSS (zobacz nasz przewodnik na temat jak prawidłowo dodawać JavaScript i style w WordPress).

Upewniamy się również, że te pliki są ładowane 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="Proszę używać swojego prawdziwego imienia, bez słów kluczowych."

Teraz, gdy utworzyłeś plik wtyczki, czas 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, feedback ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        } } });
})(jQuery);

W tym kodzie #commentform to selektor, w którym jQuery będzie wyświetlać podpowiedzi, a .tooltip to część treści, w której zdefiniowaliśmy pozycję dla podpowiedzi.

Teraz ostatnim krokiem jest dodanie trochę CSS do pliku wpb-tooltip.css. Po prostu skopiuj i wklej 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;
  }

Zachęcamy do modyfikacji tego pliku CSS, aby spełnić Twoje potrzeby.

To wszystko. Teraz pomyślnie utworzyłeś wtyczkę, która dodaje narzędzia podpowiedzi jQuery do Twojego formularza komentarzy WordPress. Wszystko, co musisz zrobić, to przesłać folder wpb-comment-tooltips z pulpitu do katalogu /wp-content/plugins/ na swoim serwerze internetowym za pomocą klienta FTP, takiego jak Filezilla. Po przesłaniu wtyczki przejdź do strony Wtyczki w obszarze administracyjnym WordPress i aktywuj wtyczkę.

Mamy nadzieję, że ten poradnik pomógł Ci nauczyć się, jak dodać podpowiedzi jQuery do formularza komentarzy WordPress. Zachęcamy do modyfikacji tego kodu i próby dodania podpowiedzi w innych miejscach. Na przykład, sprawdź, jak dodaliśmy referencje z podpowiedziami na naszej stronie. W przypadku opinii i pytań prosimy o pozostawienie komentarza poniżej.