Jak stylizować formularz komentarzy WordPress (ostateczny przewodnik)

Chcesz zmienić styl formularza komentarzy WordPress na swojej stronie internetowej? W WPBeginner spędziliśmy lata na eksperymentowaniu z różnymi sposobami zwiększania zaangażowania użytkowników i odkryliśmy, że atrakcyjny, przyjazny dla użytkownika formularz komentarzy może mieć ogromne znaczenie.

Komentarze odgrywają ważną rolę w budowaniu zaangażowania użytkowników na stronie internetowej. Kiedy ułatwiasz użytkownikom pozostawianie komentarzy i czynisz je atrakcyjnymi wizualnie, zachęcasz do większej liczby dyskusji i interakcji na swojej stronie.

W tym artykule pokażemy Ci, jak łatwo stylizować formularz komentarzy WordPress, aby zwiększyć zaangażowanie na Twojej stronie internetowej.

Zanim zaczniesz

Motywy WordPressa kontrolują wygląd Twojej strony internetowej. Każdy motyw WordPressa zawiera kilka plików, w tym pliki szablonów, plik functions, 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 nadpisać reguły stylu Twojego motywu.

Jeśli jeszcze tego nie zrobiłeś, zapoznaj się z naszym artykułem na temat jak dodać niestandardowy CSS w WordPress dla początkujących.

Oprócz CSS, możesz również potrzebować dodać kilka funkcji, aby zmodyfikować domyślny wygląd formularza komentarzy WordPress. Jeśli nigdy tego wcześniej nie robiłeś, zapoznaj się z naszym artykułem jak kopiować i wklejać kod w WordPress.

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

Ponieważ jest to dość obszerny przewodnik, stworzyliśmy spis treści ułatwiający nawigację:

• Stylizacja formularza komentarzy WordPress za pomocą SeedProd Theme Builder
• Change WordPress Comments with Default CSS Classes
• Dodawanie logowania społecznościowego do komentarzy WordPress
• Dodawanie tekstu polityki komentarzy w formularzu komentarzy WordPress
• Przenieś pole tekstowe komentarza na dół
• Usuń pole strony internetowej (URL) z formularza komentarzy WordPress
• Dodaj pole wyboru „Subskrybuj komentarze” w WordPress
• Dodaj niestandardowe pola do formularza komentarzy WordPress

Stylizacja formularza komentarzy WordPress za pomocą SeedProd Theme Builder

Ta metoda wymaga SeedProd, który jest najlepszą wtyczką do tworzenia stron i motywów WordPress na rynku.

Jest to zalecane dla początkujących bez doświadczenia w kodowaniu. Wadą tej metody jest jednak to, że zastąpi ona Twój istniejący motyw WordPress niestandardowym motywem.

Najpierw musisz zainstalować i aktywować wtyczkę SeedProd. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

Uwaga: Będziesz potrzebować co najmniej planu PRO, aby uzyskać dostęp do funkcji kreatora motywów.

Po aktywacji będziesz musiał utworzyć szablony dla swojego niestandardowego motywu WordPress. SeedProd pozwala łatwo generować te szablony, korzystając z jednego z wbudowanych motywów.

Aby uzyskać szczegółowe instrukcje, zapoznaj się z naszym samouczkiem na temat tworzenia niestandardowego motywu WordPress bez kodowania.

Po wygenerowaniu szablonów motywu musisz kliknąć link „Edytuj projekt” pod szablonem pojedynczego wpisu.

Spowoduje to załadowanie podglądu pojedynczego wpisu w interfejsie konstruktora motywów SeedProd. Zauważysz blok formularza komentarzy na dole podglądu.

Po prostu kliknij formularz komentarza, a zobaczysz jego właściwości w lewym panelu.

Stąd możesz dodać notatkę do komentarza lub politykę prywatności, możesz również przełączyć się na zakładkę „Zaawansowane”, aby edytować styl formularza komentarzy bez pisania kodu CSS.

Po zakończeniu nie zapomnij kliknąć przycisku „Zapisz”, aby opublikować zmiany.

SeedProd sprawia, że zmiana stylu dowolnego elementu na Twojej stronie internetowej jest niezwykle łatwa, bez pisania kodu.

Jednak jest to kreator motywów i być może już korzystasz z motywu WordPress, który Ci się podoba. W takim przypadku poniższe wskazówki pomogą Ci ręcznie zmienić style formularza komentarzy w WordPress.

Zmiana stylu formularza komentarzy w WordPress

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

Domyślnie ta funkcja generuje formularz komentarzy z trzema polami tekstowymi (Nazwa, E-mail i Witryna), polem tekstowym na treść komentarza, polem wyboru zgodności z RODO oraz przyciskiem wysyłania.

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

#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.comment-form-cookies-consent { }
.form-allowed-tags { }
.form-submit

Dostosowując te klasy CSS, możesz całkowicie zmienić wygląd i styl formularza komentarzy WordPress.

Przejdźmy do przodu i spróbujmy zmienić kilka rzeczy, abyś mógł dobrze zrozumieć, 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 ze specjalnymi potrzebami, a także sprawia, że formularz komentarzy wygląda ładniej na mniejszych urządzeniach.

#respond {
background: #fbfbfb;
padding:0 10px 0 10px;
}

/* Highlight active form field */

#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

#respond input[type=text]:focus,
input[type=email]: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 motywie WordPress Twenty Sixteen po zmianach:

Używając tych klas, możesz zmienić sposób wyświetlania tekstu w polach wprowadzania. Zmienimy styl tekstu nazwiska autora i pól adresu URL.

#author, #email {
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d;
letter-spacing:.1em;
} 

#url  {
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace;
} 

Jeśli przyjrzysz się uważnie poniższemu zrzutowi ekranu, czcionka w polach nazwy i adresu e-mail różni się od czcionki adresu URL witryny.

Możesz również zmienić styl przycisku wysyłania formularza komentarzy w WordPressie. Zamiast używać domyślnego przycisku wysyłania, nadajmy mu gradient CSS3 i cień pudełka.

#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
} 

#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
}
#submit:active {
position:relative;
top:1px;
}

Wznoszenie formularzy komentarzy WordPress na wyższy poziom

Możesz pomyśleć, że to było zbyt proste. Cóż, musimy zacząć od tego, aby każdy mógł podążać za nami.

Możesz jednak przenieść swój formularz komentarzy WordPress na wyższy poziom, zmieniając kolejność pól formularza, dodając logowanie społecznościowe, subskrypcje komentarzy, wytyczne dotyczące komentarzy, szybkie tagi i wiele więcej.

Dodaj logowanie społecznościowe do komentarzy WordPress

Zacznijmy od dodania logowania społecznościowego do komentarzy w WordPressie.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Super Socializer. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz przejść do Super Socializer » Social Login, a następnie zaznaczyć pole wyboru „Włącz logowanie społecznościowe”.

Spowoduje to wyświetlenie panelu opcji logowania społecznościowego. Najpierw kliknij zakładkę ‘Zaawansowana konfiguracja’.

Następnie upewnij się, że zaznaczone jest pole „Włącz przy formularzu komentarzy”.

Następnie kliknij zakładkę „Podstawowa konfiguracja”. Tutaj możesz wybrać sieci społecznościowe, które chcesz dodać, zaznaczając pola w sekcji „Wybierz sieci społecznościowe”.

Poniżej wtyczka będzie wymagać kluczy API, aby połączyć się z platformami społecznościowymi. Wystarczy kliknąć ikonę „Znak zapytania”, aby wyświetlić instrukcje, jak je uzyskać dla każdej platformy.

Po zakończeniu kliknij przycisk „Zapisz zmiany”, aby zapisać ustawienia logowania społecznościowego.

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

Dodawanie tekstu polityki komentarzy przed lub po formularzu komentarza

Kochamy wszystkich naszych użytkowników i bardzo doceniamy, że poświęcają kilka minut na pozostawienie komentarza na naszej stronie. Jednak aby stworzyć zdrowe środowisko dyskusji, ważne jest, aby moderować komentarze.

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

Chcieliśmy, aby nasza polityka komentarzy była widoczna i dostępna dla wszystkich użytkowników dodających komentarze. Dlatego zdecydowaliśmy się dodać politykę komentarzy do naszego formularza komentarzy w WordPressie.

Jeśli chcesz dodać stronę z zasadami komentowania, pierwszą rzeczą, którą musisz zrobić, jest utworzenie strony WordPress i zdefiniowanie swoich zasad komentowania (możesz ukraść nasze i zmodyfikować je, aby spełniały Twoje potrzeby).

Następnie możesz dodać poniższy kod do pliku `functions.php` swojego motywu lub do wtyczki fragmentów kodu.

function wpbeginner_comment_text_before($arg) {
    $arg['comment_notes_before'] .= '<p class="comment-policy"">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>';
    return $arg;
}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

Powyższy kod zastąpi domyślny formularz komentarzy przed notatkami tym tekstem. Dodaliśmy również klasę CSS w kodzie, abyśmy mogli wyróżnić powiadomienie za pomocą CSS. Oto przykładowy kod CSS, którego użyliśmy:

p.comment-policy {
    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 obszarze tekstowym komentarza, użyj poniższego kodu.

function wpbeginner_comment_text_after($arg) {
    $arg['comment_notes_after'] .= '<p class="comment-policy"">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>';
    return $arg;
}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');

Nie zapomnij odpowiednio zmienić adresu URL, aby prowadził do strony z zasadami dotyczącymi komentarzy, a nie do example.com.

Przenieś pole tekstowe komentarza na dół

Domyślnie formularz komentarzy WordPress wyświetla najpierw pole tekstowe komentarza, a następnie pola nazwy, adresu e-mail i strony internetowej. Ta zmiana została wprowadzona w WordPress 4.4.

Wcześniej strony WordPress wyświetlały najpierw pola nazwy, adresu e-mail i strony internetowej, a następnie pole tekstowe komentarza. Uważaliśmy, że nasi użytkownicy są przyzwyczajeni do widzenia 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 pliku functions.php swojego motywu lub do wtyczki fragmentów kodu.

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

Zawsze zalecamy dodawanie kodu w WordPress za pomocą wtyczki do fragmentów kodu, takiej jak WPCode. Ułatwia to dodawanie niestandardowego kodu bez edycji pliku functions.php, dzięki czemu nie musisz martwić się o uszkodzenie witryny.

Aby rozpocząć, musisz zainstalować i aktywować darmowy plugin WPCode. Instrukcje znajdziesz w tym przewodniku na temat jak zainstalować plugin WordPress.

Po aktywacji przejdź do Fragmenty kodu » + Dodaj fragment z panelu administracyjnego WordPress.

Stamtąd znajdź opcję „Dodaj swój niestandardowy kod (nowy fragment)” i kliknij przycisk „+ Dodaj niestandardowy fragment” pod nim.

Następnie musisz wybrać „Fragment PHP” jako typ kodu z listy opcji, które pojawią się na ekranie.

Następnie dodaj tytuł dla swojego fragmentu na górze strony, może to być cokolwiek, co pomoże Ci zapamiętać, do czego służy kod.

Następnie wklej powyższy kod do pola „Podgląd kodu”.

Na koniec po prostu przełącz przełącznik z „Nieaktywny” na „Aktywny” i kliknij przycisk „Zapisz fragment”.

Ten kod po prostu przenosi pole tekstowe komentarza na dół.

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

Pole strony internetowej w formularzu komentarza przyciąga wielu spamerów. Chociaż jego usunięcie nie powstrzyma spamerów ani nawet nie zmniejszy liczby spamu, z pewnością uchroni Cię przed przypadkowym zatwierdzeniem komentarza z linkiem do złej strony autora.

Zmniejszy to również pole z formularza komentarza, czyniąc go łatwiejszym i bardziej przyjaznym dla użytkownika. Więcej na ten temat znajdziesz w naszym artykule o usuwaniu pola adresu URL strony z formularza komentarzy WordPress.

Aby usunąć pole adresu URL z formularza komentarza, po prostu dodaj następujący kod do swojego pliku functions.php lub do wtyczki do fragmentów kodu.

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

Możesz wykonać te same kroki, co w poprzedniej sekcji, aby bezpiecznie dodać ten kod w WordPressie, korzystając z wtyczki WPCode.

Dodaj pole wyboru „Subskrybuj komentarze” w WordPress

Kiedy użytkownicy zostawiają komentarz na Twojej stronie, mogą chcieć śledzić wątek, aby zobaczyć, 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 do posta.

Aby dodać to pole wyboru, najpierw musisz zainstalować i aktywować wtyczkę Subscribe to Comments Reloaded. Po aktywacji musisz odwiedzić stronę StCR » Comment Form, aby skonfigurować ustawienia wtyczki.

Aby uzyskać szczegółowe instrukcje krok po kroku, zapoznaj się z naszym artykułem na temat umożliwienia użytkownikom subskrybowania komentarzy w WordPress.

Dodaj dodatkowe pola do formularza komentarzy w WordPress

Chcesz dodać dodatkowe pola do swojego formularza komentarzy WordPress? Na przykład opcjonalne pole, w którym użytkownicy mogą dodać swój uchwyt na Twitterze?

Po prostu zainstaluj i aktywuj wtyczkę Dodatkowe pola komentarzy WordPress plugin. Po aktywacji przejdź do strony ‘Pola komentarzy’ i przełącz się na zakładkę ‘Pola komentarzy’.

Po prostu przeciągnij i upuść niestandardowe pole i nadaj mu tytuł, opis i nazwę danych.

Po dodaniu pól nie zapomnij kliknąć przycisku „Zapisz wszystkie zmiany”.

Możesz teraz wyświetlić swój formularz komentarzy, aby zobaczyć niestandardowe pola w akcji.

Niestandardowe pola są następnie wyświetlane w moderacji komentarzy i poniżej treści komentarza.

Aby uzyskać więcej szczegółów, zapoznaj się z naszym samouczkiem na temat dodawania niestandardowych pól do formularza komentarzy w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak stylizować formularz komentarzy WordPress, aby był bardziej atrakcyjny dla Twoich użytkowników. Możesz również zapoznać się z naszymi wskazówkami, jak uzyskać więcej komentarzy na Twoim blogu WordPress i naszymi ekspertyzami dotyczącymi najlepszych wtyczek mediów społecznościowych dla WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.