Jak dodać podpowiedzi jQuery w formularzu komentarzy WordPress

Komentarze umożliwiają użytkownikom angażowanie się w treści na twojej stronie. Dlatego uważamy, że ważne jest stylizowanie układu komentarzy i formularza komentarza, aby był przyjazny dla użytkownika i dobrze wyglądał. Niedawno użytkownik zapytał nas, jak mogą dodać podpowiedzi jQuery do formularza komentarza WordPress. Pomyśleliśmy, że inni mogą to również uznać za przydatne. W tym samouczku pokażemy, jak dodać podpowiedzi jQuery w formularzu komentarzy WordPress.

Po co dodawać podpowiedzi jQuery?

Podpowiedzi pojawiają się, gdy użytkownik przesunie kursor myszy do elementu, zwykle podając mu opis tego konkretnego elementu. W tym samouczku będziemy dodawać podpowiedzi jQuery, aby pokazać wskazówki, takie jak, Proszę użyć swojego prawdziwego imienia i nazwiska w polach formularza komentarza.

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

Jak dodać podpowiedzi jQuery

Pierwszą rzeczą, którą musisz zrobić, to utworzyć folder na pulpicie i nadać mu nazwę wpb-komentarz-podpowiedzi. W tym folderze musisz 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:

'. __( 'Email', 'twentythirteen'). "".
      ($req ? '*':").
      '
";  
    $fields ['url'] = ' 
'.
      __( 'Website', 'twentythirteen'). "".
      "
';  
	  $fields['author'] = '
' .
      ''. __( 'Nazwa', 'twentythirteen'). "".
      ($req ? '*':").
      '
";
    return $ fields;
}
add_filter ('comment_form_default_fields', 'alter_comment_form_fields');
?>

W powyższym kodzie najpierw stworzyliśmy nagłówek wtyczki, nadając tej wtyczce nazwę i opis. Następnie ładujemy nasz plik JavaScript i CSS (zobacz nasz przewodnik Jak dodać JavaScript i style w WordPress).

Upewniamy się również, że pliki te 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 komunikat, który chcemy wyświetlić w podpowiedzi. Na przykład w polu autor użyliśmy:

title= " Proszę użyć swojego prawdziwego imienia i nazwiska, bez słów kluczowych."

Teraz, gdy utworzyłeś plik wtyczki, nadszedł czas, aby dodać trochę jQuery. Otwórz wpb-tooltip.js plik i dodaj ten kod wewnątrz niego:

(function ($) {
$( "#commentform" ).tooltip ({pozycja: {
	my: "center bottom-10",
        at: "center top",
        using: function (position, feedback ) {
          $( this ).css (pozycja );
          $( "
" )
            .addClass ("arrow")
            .addClass( feedback.pionowe )
            .addClass( feedback.pozioma )
            .appendTo (to );
        } } });
}) (jQuery);

W tym kodzie, # commentform jest selektorem, w którym jQuery wyświetli podpowiedzi i .tooltip jest częścią zawartości, w której zdefiniowaliśmy pozycję podpowiedzi.

Teraz ostatnim krokiem jest dodanie trochę CSS w wpb-tooltip.css plik. Po prostu skopiuj i wklej ten kod:

.ui-tooltip,arrow: after {
    tło: # 356aa0;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    Kolor: Biały;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: wielkie litery;
    box-shadow: 0 0 7PX #356aa0;
	max-width: 350px;
  }
  .arrow {
    width: 70px;
    wysokość: 16px;
    przepełnienie: Ukryte;
    pozycja: absolutna;
    pozostało: 50%;
    margin-left: - 35px;
    / bottom: - 16px;
  }
  .arrow.top {
    Góra: - 16px;
    DÓŁ: auto;
  }
  .arrow.left {
    pozostało: 20%;
  }
  .arrow: after {
    treść: "";
    pozycja: absolutna;
    / align = "left" / 20px;
    top: -20px;
    / width = 25px / ;
    wysokość: 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: obróć (45deg);
  }
  .arrow.top: after {
    / bottom: -20px;
    top: auto;
  }

Możesz zmodyfikować ten plik CSS, aby spełnić swoje potrzeby.

To wszystko. Teraz udało Ci się utworzyć wtyczkę, która dodaje podpowiedzi jQuery w formularzu komentarzy WordPress. Wszystko, co musisz zrobić, to przesłać wpb-komentarz-podpowiedzi folder z pulpitu do / wp-content / wtyczki/ katalog na serwerze WWW przy użyciu klienta FTP, takiego jak Filezilla. Po przesłaniu wtyczki przejdź do Wtyczki strona w obszarze administracyjnym WordPress i aktywuj wtyczkę.

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak dodać podpowiedzi jQuery w formularzu komentarzy WordPress. Zachęcamy do modyfikowania tego kodu i dodawania podpowiedzi w innych miejscach. Na przykład, sprawdź, jak dodaliśmy referencje tooltip do naszej witryny. W przypadku opinii i pytań, proszę zostawić komentarz poniżej.