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:
<?php
/**
Nazwa wtyczki: WPBeginner ' s comment Form Tool Tips
Opis: a jQuery powered comment form tool tips plugin oparty na tutorialu przez WPBeginner
Wersja: 1.0
Autor: WPBeginner
Autor URI: https://www.wpbeginner.com
Licencja: GPL2
*/
// Ładujemy nasze skrypty i style tylko wtedy, gdy wyświetlany jest formularz komentarza
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);
}
// Zmodyfikuj pola formularza komentarza i Dodaj atrybut title do pól wejściowych formularza
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="Twój e-mail jest u nas bezpieczny, zobacz naszą Politykę prywatności."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 =" Twoja strona internetowa lub dowolny adres URL profilu społecznościowego"type=" text" value="". esc_attr ($commenter['comment_author_url'] ) .
'"size =" 30 " /></p>';
$fields['author'] = '<p class="comment-form-author">' .
'<label for = "autor">'. __( 'Nazwa', 'twentythirteen'). "</label>".
($req ? '<span class="required" >*</span>':").
'<input id = "author" title = " Proszę użyć swojego prawdziwego imienia i nazwiska, bez słów kluczowych."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 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 );
$( "<div>" )
.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.
