Jak stylizować formularz komentarza WordPress (Ultimate Guide)

Czy chcesz zmienić styl formularza komentarza WordPress na swojej stronie? Komentarze odgrywają ważną rolę w budowaniu zaangażowania użytkowników na stronie internetowej. Dobrze wyglądający, przyjazny dla użytkownika formularz komentarza zachęca użytkowników do udziału w dyskusji. Dlatego stworzyliśmy najlepszy przewodnik, jak łatwo stylizować formularz komentarza WordPress.

Zanim Zaczniesz

Motywy WordPress kontroluj wygląd swojej witryny. Każdy motyw WordPress zawiera kilka plików, w tym pliki szablonów, pliki funkcji, skrypty JavaScript i arkusze stylów.

Arkusze stylów zawierają reguły CSS dla wszystkich elementów używanych przez Twój motyw WordPress. Możesz dodać własny niestandardowy CSS, aby zastąpić reguły stylu szablonu.

Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym artykułem na temat dodawania niestandardowego CSS w WordPress dla początkujących.

Oprócz CSS, może być również konieczne dodanie niektórych funkcji, aby zmodyfikować domyślny wygląd formularza komentarza WordPress. Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym artykułem na temat kopiowania i wklejania kodu w WordPress.

Mając to na uwadze, przyjrzyjmy się, jak stylizować formularz komentarza WordPress.

Ponieważ jest to dość obszerny przewodnik, stworzyliśmy tabelę treści dla łatwej nawigacji:

• Zmień Komentarze WordPress z domyślnymi klasami CSS
• Dodawanie loginu społecznościowego do formularza komentarza WordPress
• Dodawanie tekstu Polityki komentarzy w formularzu komentarzy WordPress
• Przenoszenie pola tekstowego komentarza na dół
• Usuwanie pola strony internetowej (URL) z formularza komentarza WordPress
• Dodawanie pole wyboru Subskrybuj komentarze w WordPress
• Dodaj Quicktags w komentarzach WordPress

Zmiana stylu formularza komentarza w WordPress

W większości motywów WordPress znajduje się szablon o nazwie komentarze.php. Ten plik służy do wyświetlania komentarzy i formularzy komentarzy na blogu. Formularz komentarza WordPress jest generowany za pomocą funkcji: <?PHP comment_form(); ?>.

Domyślnie ta funkcja generuje formularz komentarza z trzema polami tekstowymi (imię, adres e-mail i Strona internetowa), polem textarea dla tekstu komentarza, polem wyboru zgodności z RODO i przyciskiem wyślij.

Możesz łatwo modyfikować każde z tych pól, po prostu poprawiając domyślne klasy CSS. Poniżej znajduje się lista domyślnych klas CSS, które WordPress dodaje do każdego formularza komentarza.

# odpowiedz { } 
# reply-title { } 
# cancel-comment-reply-link { }
# commentform { } 
~ autor { } 
# email { } 
# url { } 
# komentarz 
# submit
.komentarz-uwagi { } 
.wymagane { }
.comment-form-author { }
.comment-form-email { } 
.comment-form-url { }
.comment-form-comment { } 
.comment-form-cookies-consent { }
.form-allowed-tags { } 
.formularz-prześlij

Po prostu poprawiając te klasy CSS, możesz całkowicie zmienić wygląd formularza komentarza WordPress.

Spróbujmy zmienić kilka rzeczy, abyście mogli się zorientować, jak to działa.

Najpierw zaczniemy od podświetlenia aktywnego pola formularza. Podświetlenie aktualnie aktywnego pola sprawia, że formularz jest bardziej dostępny dla osób o specjalnych potrzebach, a także sprawia, że formularz komentarza wygląda ładniej na mniejszych urządzeniach.

	
# odpowiedz { 
background: # fbfbfb;
padding:0 10px 0 10px;
}
 
/ * Podświetl aktywne pole formularza */
 
# odpowiedz wpis [type = text], textarea {
  - webkit-Przejście: wszystko 0,30 s;
  - moz-Przejście: wszystko 0,30 s;
  - ms-transition: all 0,30 s;
  - o-przejście: wszystko 0,30 s;
  zarys: brak;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #dddddd;
}
  
  
# odpowiedz wpis [type = text]: focus,
input[type = e-mail]: focus, 
input[type = url]: focus,
textarea: focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}

Tak wyglądał nasz formularz w temacie WordPress Twenty Sixteen po zmianach:

Korzystając z tych klas, można zmienić sposób wyświetlania tekstu w polach wprowadzania. Przejdziemy do przodu i zmienimy styl tekstu nazwy autora i pól URL.

# autor, # email { 
rodzina czcionek: "Open Sans", "Droid Sans", Arial;
font-style: italic;
kolor:#1d1d1d; 
odstępy między literami:.1em;
} 
 
# url { 
kolor: #1d1d1d;
rodzina czcionek: "Luicida Console", "Courier New", "Courier", monospace; 
} 

Jeśli przyjrzysz się z bliska poniższemu zrzucie ekranu, czcionka nazwy i pola e-mail różni się od adresu URL witryny.

Możesz również zmienić styl formularza komentarza WordPress Wyślij przycisk. Zamiast używać domyślnego przycisku Wyślij, nadajmy mu trochę gradientu CSS3 i cienia pola.

# submit {
tło: - moz-linear-gradient (top, # 44c767 5%, #5cbf2a 100%);
tło: - webkit-linear-gradient (top, # 44c767 5%, #5cbf2a 100%);
tło: - o-linear-gradient (top, #44c767 5%, #5cbf2a 100%);
tło: - ms-linear-gradient (top, #44c767 5%, #5cbf2a 100%);
tło: gradient liniowy (do dołu, #44c767 5%, #5cbf2a 100%);
background-color: # 44c767;
/ - style = "border-border-radius:28px";
/ - style = "border-border-radius:28px";
border-radius:28px;
border: 1px solid #18ab29;
wyświetlacz: inline-block;
kursor: wskaźnik;
color: # ffffff;
font-family: Arial;
font-size: 17px;
padding: 16px 31px;
tekst-Dekoracja: Brak;
text-shadow: 0px 1px 0px #2f6627;
} 
 
# submit: hover {
tło: - webkit-gradient(liniowy, lewy górny, lewy dolny, Color-stop(0.05, #5cbf2a), Color-stop (1, #44c767));
tło: - moz-linear-gradient (top, #5cbf2a 5%, #44c767 100%);
tło: - webkit-linear-gradient (top, #5cbf2a 5%, #44c767 100%);
tło: - o-linear-gradient (top, #5cbf2a 5%, #44c767 100%);
tło: - ms-linear-gradient (top, #5cbf2a 5%, #44c767 100%);
tło: gradient liniowy (do dołu, #5cbf2a 5%, #44c767 100%);
background-color: # 5cbf2a; 
}
# submit: active { 
pozycja: względna;
top: 1px;
}

Przenoszenie formularzy komentarzy WordPress na wyższy poziom

Możesz myśleć, że to było zbyt proste. Musimy zacząć od tego, żeby każdy mógł iść za nim.

Możesz przenieść swój formularz komentarza WordPress na wyższy poziom, zmieniając pola formularza, dodając login społecznościowy, Subskrybuj komentarze, wskazówki dotyczące komentarzy, quicktagi i inne.

Add Social login to WordPress Comments

Zacznijmy od dodawania loginów społecznościowych do komentarzy WordPress.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę WordPress Social Login. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić Ustawienia ” WP Social Login strona do konfiguracji ustawień wtyczki.

Wtyczka będzie wymagać kluczy API w celu połączenia się z platformami społecznościowymi. Zobaczysz linki z instrukcjami, jak uzyskać te informacje dla każdej platformy.

Po wprowadzeniu kluczy API kliknij przycisk Zapisz Ustawienia, aby zapisać zmiany.

Możesz teraz odwiedzić swoją stronę, aby zobaczyć przyciski logowania społecznościowego nad formularzem komentarza.

Dodawanie tekstu zasad komentarza przed lub po formularzu komentarza

Kochamy wszystkich naszych użytkowników i naprawdę doceniamy ich poświęcenie kilku minut na pozostawienie komentarza na naszej stronie. Jednak aby stworzyć zdrowe środowisko dyskusji, ważne jest moderowanie komentarzy.

Aby uzyskać pełną przejrzystość, stworzyliśmy stronę z zasadami komentowania, ale nie możesz po prostu umieścić tego linku w stopce.

Chcieliśmy, aby nasza polityka komentarzy była widoczna i widoczna dla wszystkich użytkowników, którzy zostawiają komentarz. Dlatego zdecydowaliśmy się dodać politykę komentarzy w naszym formularzu komentarzy WordPress.

Jeśli chcesz dodać stronę polityki komentarzy, pierwszą rzeczą, którą musisz zrobić, to utworzyć stronę WordPress i zdefiniować politykę komentarzy (możesz ukraść naszą i zmodyfikować ją, aby zaspokoić swoje potrzeby).

Następnie możesz dodać następujący kod w funkcjach szablonu.plik php lub wtyczka specyficzna dla witryny.

function wpbeginner_comment_text_before ($arg) {
    $arg ['comment_notes_before'] = "<p class='comment-policy'>cieszymy się, że zdecydowałeś się zostawić komentarz. Pamiętaj, że komentarze są moderowane zgodnie z naszym <a href= "http://www.example.com/comment-policy-page/' >Polityka komentowania< / a>.</p>";
    return $arg;
}
 
add_filter ('comment_form_defaults', 'wpbeginner_comment_text_before');

Powyższy kod zastąpi domyślny formularz komentarza przed notatkami tym tekstem. Dodaliśmy również klasę CSS w kodzie, dzięki czemu możemy wyróżnić ogłoszenie za pomocą CSS. Oto przykładowy CSS, którego użyliśmy:

p. komentarz-Polityka {
    border: 1px solid # ffd499;
    background-color: # fff4e5;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0px 10px 0px;
    font-size: small;
    font-style: italic;
}

Tak to wyglądało na naszej stronie testowej:

Jeśli chcesz wyświetlić link po polu tekstowym komentarza, użyj następującego kodu.

function wpbeginner_comment_text_after ($arg) {
    $arg ['comment_notes_after'] = "<p class='comment-policy'>cieszymy się, że zdecydowałeś się zostawić komentarz. Pamiętaj, że komentarze są moderowane zgodnie z naszym <a href= "http://www.example.com/comment-policy-page/' >Polityka komentowania< / a>.</p>";
    return $arg;
}
 
add_filter ('comment_form_defaults', 'wpbeginner_comment_text_after');

Nie zapomnij odpowiednio zmienić adresu URL, aby przejść do strony polityki komentarzy, a nie example.com

Przenieś pole tekstowe komentarza na dół

Domyślnie formularz komentarza WordPress wyświetla najpierw pole tekstowe komentarza, a następnie pola nazwa, adres e-mail i strona internetowa. Ta zmiana została wprowadzona w WordPress 4.4.

Wcześniej witryny WordPress wyświetlały najpierw pola nazwa, adres e-mail i Witryna, a następnie pole tekstowe komentarza. Czuliśmy, że nasi użytkownicy są przyzwyczajeni do oglądania formularza komentarza w tej kolejności, więc nadal Używamy starej kolejności pól na WPBeginner.

Jeśli chcesz to zrobić, wystarczy dodać następujący kod do funkcji szablonu.plik php lub wtyczka specyficzna dla witryny.

function wpb_move_comment_field_to_bottom ($fields ) {
$comment_field = $fields ['comment'];
unset ($fields['comment'] );
$fields['comment'] = $comment_field;
return $ fields;
}
 
add_filter ('comment_form_fields', 'wpb_move_comment_field_to_bottom'); 

Ten kod po prostu przesuwa pole pola tekstowego komentarza na dół.

Usuń pole strony internetowej (URL) z formularza komentarza WordPress

Pole Strony w formularzu komentarza przyciąga wielu spamerów. Podczas usuwania nie zatrzyma spamerów, a nawet zmniejszy komentarze spamowe, z pewnością uchroni Cię przed przypadkowym zatwierdzeniem komentarza ze złym linkiem do strony autora.

Zmniejszy również pole z formularza komentarza, dzięki czemu będzie łatwiejsze i bardziej przyjazne dla użytkownika. Aby uzyskać więcej informacji na ten temat, zobacz nasz artykuł na temat usuwania pola URL witryny z formularza komentarza WordPress

Aby usunąć pole URL z formularza komentarza, po prostu dodaj następujący kod do swoich funkcji.plik php lub wtyczka specyficzna dla witryny.

function wpbeginner_remove_comment_url ($arg) {
    $arg['url'] = ";
    return $arg;
}
add_filter ('comment_form_default_fields', 'wpbeginner_remove_comment_url');

Dodaj pole wyboru Subskrybuj komentarze w WordPress

Gdy użytkownicy zostawiają komentarz w Twojej witrynie, mogą chcieć śledzić ten wątek, aby sprawdzić, czy ktoś odpowiedział na ich komentarz. Dodając pole wyboru Subskrybuj komentarze, umożliwiasz użytkownikom otrzymywanie natychmiastowych powiadomień za każdym razem, gdy pojawi się nowy komentarz w poście.

Aby dodać To pole wyboru, pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować Subskrybuj Comments Reloaded plugin. Po aktywacji musisz odwiedzić Ustawienia ” Subskrybuj Komentarze, Aby skonfigurować ustawienia wtyczki.

Aby uzyskać szczegółowe instrukcje krok po kroku, zobacz nasz artykuł o tym, jak umożliwić użytkownikom subskrybowanie komentarzy w WordPress.

Dodaj Quicktags w formularzu komentarza

Quicktags to przyciski formatowania, które umożliwiają użytkownikom łatwe stylowanie komentarzy. Są to między innymi przyciski do pogrubienia, kursywy, dodania łącza lub cytatu blokowego.

Aby dodać quicktags, musisz zainstalować i aktywować podstawową wtyczkę Comment Quicktags. Aby uzyskać szczegółowe informacje, zobacz nasz artykuł na temat łatwego dodawania quicktags w formularzu komentarzy WordPress.

Tak będzie wyglądał twój formularz komentarza po dodaniu quicktags.

Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się stylizować formularz komentarza WordPress, aby uczynić go bardziej zabawnym dla użytkowników. Możesz również zobaczyć nasze wskazówki, aby uzyskać więcej komentarzy do swoich postów na blogu WordPress.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.