Czy chcesz zmienić styl formularza komentarzy WordPress na twojej witrynie internetowej? W WPBeginner spędziliśmy lata eksperymentując z różnymi sposobami na zwiększenie zaangażowania użytkowników i odkryliśmy, że dobrze wyglądający, przyjazny dla użytkownika formularz komentarza może mieć ogromne znaczenie.
Komentarze odgrywają ważną rolę w budowaniu zaangażowania użytkowników na witrynie internetowej. Jeśli sprawisz, że pozostawianie komentarzy przez użytkowników będzie łatwe i atrakcyjne wizualnie, zachęcisz ich do dyskusji i interakcji na twojej witrynie internetowej.
W tym artykule pokażemy ci, jak łatwo stylizować formularz komentarza WordPress, aby zwiększyć zaangażowanie na twojej witrynie internetowej.
Przed rozpoczęciem
Motywy WordPress kontrolują wygląd twojej witryny internetowej. Każdy motyw WordPress zawiera kilka plików, w tym pliki szablonów, funkcje, 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 CSS, aby zastąpić reguły stylu motywu.
Jeśli nie robiłeś tego wcześniej, zobacz nasz artykuł o tym, jak dodać własny CSS w WordPress dla początkujących.
Oprócz CSS, możesz również potrzebować dodać kilka funkcji, aby zmodyfikować domyślny wygląd twojego 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.
Biorąc to pod uwagę, przyjrzyjmy się, jak stylizować formularz komentarza WordPress.
Ponieważ jest to dość obszerny przewodnik, stworzyliśmy spis treści ułatwiający nawigację:
- Styling WordPress Comment Form Using SeedProd Theme Builder
- Change WordPress Comments with Default CSS Classes
- Adding Social Login to WordPress Comments
- Adding Comment Policy Text in WordPress Comment Form
- Move Comment Text Field to Bottom
- Remove Website (URL) Field from WordPress Comment Form
- Add a Subscribe to Comments Checkbox in WordPress
- Add Custom Fields to WordPress Comment Form
Stylizacja formularza komentarza 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 własnym konfiguratorem.
Najpierw należy zainstalować i włączyć wtyczkę SeedProd. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Uwaga: Aby uzyskać dostęp do funkcji tworzenia motywów, wymagany jest co najmniej plan PRO.
Po włączaniu musisz utworzyć szablony dla własnego motywu WordPress. SeedProd umożliwia łatwe generowanie tych szablonów przy użyciu jednego z wbudowanych motywów.
Aby uzyskać szczegółowe instrukcje, zapoznaj się z naszym poradnikiem na temat tworzenia własnego motywu WordPress bez kodowania.
Po wygenerowaniu twoich szablonów motywów, musisz kliknąć odnośnik „Edytuj projekt” pod szablonem pojedynczego wpisu.
Spowoduje to wczytywanie podglądu pojedynczego wpisu w interfejsie kreatora motywów SeedProd. W dolnej części podglądu zostanie powiadomiony blok formularza komentarza.
Wystarczy kliknąć na formularz komentarza, a w lewym panelu pojawią się jego właściwości.
Z tego miejsca możesz dodać notatkę do komentarza lub politykę prywatności, możesz także przełączyć się na kartę „Zaawansowane”, aby edytować styl formularza komentarza bez pisania kodu CSS.
Po zakończeniu nie zapomnij kliknąć przycisku „Zapisz”, aby opublikować twoje zmiany.
SeedProd sprawia, że bardzo łatwo jest zmienić styl dowolnego elementu na twojej witrynie internetowej bez pisania kodu.
Jest to jednak narzędzie do tworzenia motywów i być może korzystasz już z motywu WordPress, który Ci się podoba. W takim przypadku poniższe wskazówki pomogą ci ręcznie zmienić style formularzy komentarzy w WordPress.
Zmiana stylu formularza komentarza w WordPress
Wewnątrz większości motywów WordPress znajduje się szablon o nazwie comments.php. Plik ten służy do wyświetlania komentarzy i formularzy komentarzy na twoich wpisach na blogu. Formularz komentarza WordPress jest generowany za pomocą funkcji: <?php comment_form(); ?>.
Domyślnie funkcja ta generuje twój formularz komentarza z trzema polami tekstowymi (imię i nazwisko, e-mail i witryna internetowa), polem tekstowym na tekst komentarza, polem wyboru zgodności z RODO i przyciskiem przesyłania.
Możesz łatwo zmodyfikować każde z tych pól, po prostu modyfikują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
Poprzez prostą modyfikację tych klas CSS, możesz całkowicie zmienić wygląd twojego formularza komentarzy WordPress.
Spróbujmy zmienić kilka rzeczy, aby zorientować się, jak to działa.
Po pierwsze, zaczniemy od podświetlenia włączonego pola formularza. Podświetlanie obecnego, aktualnego pola sprawia, że twój 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.
#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:
Korzystając z tych klas, można zmienić sposób wyświetlania tekstu w polach wejściowych. Pójdziemy dalej i zmienimy styl tekstu w polach nazwy autora i 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, krój pola nazwy i e-mail jest inny niż adres URL witryny internetowej.
Możesz także zmienić styl przycisku przesyłania formularza komentarza WordPress. Zamiast używać domyślnego przycisku przesyłania, nadajmy mu gradient CSS3 i box-shadow.
#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;
}
Przenoszenie formularzy komentarzy WordPress na wyższy poziom
Być może myślisz, że to zbyt proste. Cóż, musimy zacząć od tego, aby każdy mógł nadążyć.
Możesz jednak przenieść swój formularz komentarza WordPress na wyższy poziom, zmieniając układ pól formularza, dodając logowanie społecznościowe, subskrypcje komentarzy, tagi komentarzy, szybkie tagi i wiele innych.
Dodaj logowanie społecznościowe do komentarzy WordPress
Zacznijmy od dodania loginów społecznościowych do komentarzy WordPress.
Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki Super Socializer. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu należy przejść na stronę Super Socializer ” Social Login, a następnie zaznaczyć pole „Enable Social Login”.
Spowoduje to wyświetlenie panelu opcji logowania społecznościowego. Najpierw kliknij kartę „Konfiguracja zaawansowana”.
Następnie upewnij się, że pole „Włącz przy formularzu komentarza” jest zaznaczone.
Następnie kliknij kartę „Konfiguracja podstawowa”. Tutaj możesz wybrać sieci społecznościowe, które chcesz dodać, zaznaczając pola w sekcji „Wybierz media społecznościowe”.
Poniżej wtyczka będzie wymagać kluczy API w celu połączenia się z platformami społecznościowymi. Wystarczy kliknąć ikonkę „znaku zapytania”, aby wyświetlić instrukcje, jak je uzyskać dla każdej platformy.
Po zakończeniu kliknij przycisk „Zapisz zmiany”, aby zapisać twoje ustawienia logowania społecznościowego.
Możesz teraz przejść na swoją witrynę internetową, aby zobaczyć przyciski logowania społecznościowego nad formularzem komentarza.
Dodawanie tekstu polityki komentarzy przed lub po formularzu komentarza
Kochamy wszystkich naszych użytkowników i naprawdę doceniamy, że poświęcają kilka minut na pozostawienie komentarza na naszej witrynie. Aby jednak stworzyć zdrowe środowisko dyskusyjne, ważne jest, aby moderować komentarze.
Aby zapewnić pełną przejrzystość, stworzyliśmy stronę polityki komentarzy, ale nie można po prostu umieścić tego odnośnika w stopce.
Chcieliśmy, aby nasza polityka komentarzy była widoczna dla wszystkich użytkowników, którzy zostawiają komentarz. Dlatego zdecydowaliśmy się dodać politykę komentarzy w naszym formularzu komentarza WordPress.
Jeśli chcesz dodać stronę z polityką komentarzy, to pierwszą rzeczą, którą musisz zrobić, jest utworzenie strony WordPress i zdefiniowanie swojej polityki komentarzy (możesz ukraść naszą i zmodyfikować ją do swoich potrzeb).
Następnie możesz dodać następujący kod w pliku functions.php twojego motywu lub we wtyczce 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 komentarza przed notatkami tym tekstem. Dodaliśmy również klasę CSS w kodzie, dzięki czemu możemy wyróżnić powiadomienie za pomocą CSS. Oto przykładowy 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 witrynie testowej:
Jeśli chcesz wyświetlić odnośnik po obszarze tekstowym komentarza, użyj następującego 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, tak aby trafiał na twoją stronę polityki komentarzy, a nie na example.com.
Przenieś pole tekstowe komentarza na dół
Domyślnie formularz komentarza WordPress wyświetla najpierw obszar tekstowy komentarza, a następnie pola nazwy, e-maila i witryny internetowej. Zmiana ta została wprowadzona w WordPress 4.4.
Wcześniej witryny WordPress wyświetlały najpierw pola nazwy, e-maila i witryny internetowej, a następnie pole tekstowe komentarza. Uznaliś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, że dodasz poniższy kod do pliku functions. php twojego motywu lub 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 WordPressie za pomocą wtyczki fragmentów kodu, takiej jak WPCode. Ułatwia to dodawanie własnego konfiguratora bez edytowania pliku functions.php, więc nie musisz się martwić, że zepsujesz swoją witrynę.
Aby rozpocząć, należy zainstalować i włączyć bezpłatną wtyczkę WPCode. Aby uzyskać instrukcje, zobacz ten przewodnik na temat instalacji wtyczki WordPress.
Po włączaniu, przejdź do Code Snippets ” + Add Snippet z kokpitu WordPress.
Następnie znajdź opcję „Add Your Custom Code (New Snippet)” i kliknij znajdujący się pod nią przycisk „Use Snippet”.
Następnie dodaj tytuł twojego fragmentu kodu 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 w polu „Podgląd kodu” i wybierz „Fragment kodu PHP” jako rodzaj kodu z rozwijanej listy po prawej stronie.
Następnie wystarczy przełączyć przełącznik z „Nieaktywny” na „Aktywny” i kliknąć przycisk „Zapisz fragment kodu”.
Ten kod po prostu przenosi pole tekstowe komentarza na dół.
Usuwanie pola witryny internetowej (adresu URL) z formularza komentarza WordPressa
Pole witryny internetowej w formularzu komentarza przyciąga wielu spamerów. Jego usuwanie nie powstrzyma spamerów ani nawet nie zmniejszy liczby spamerskich komentarzy, ale z pewnością uchroni przed przypadkowym zatwierdzeniem komentarza ze złym odnośnikiem do witryny internetowej autora.
Zmniejszy to również pole z formularza komentarza, czyniąc go łatwiejszym i bardziej przyjaznym dla użytkownika. Więcej informacji na ten temat można znaleźć w naszym artykule na temat usuwania pola adresu URL witryny internetowej z formularza komentarza WordPress.
Aby usuwać pole adresu URL z formularza komentarza, wystarczy dodać poniższy kod do twojego pliku functions.php lub wtyczki 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 z poprzedniej sekcji, aby bezpiecznie dodać ten kod w WordPressie za pomocą wtyczki WPCode.
Dodaj pole wyboru subskrypcji komentarzy w WordPress
Kiedy użytkownicy zostawiają komentarz na twojej witrynie internetowej, mogą chcieć śledzić ten wątek, aby sprawdzić, czy ktoś odpowiedział na ich komentarz. Dodając pole wyboru subskrypcji komentarzy, włączasz użytkownikom możliwość otrzymywania natychmiastowych powiadomień za każdym razem, gdy we wpisie pojawi się nowy komentarz.
Aby dodać to pole wyboru, należy najpierw zainstalować i włączyć wtyczkę Subscribe to Comments Reloaded. Po włączaniu należy przejść na stronę StCR ” Comment Form, aby skonfigurować ustawienia wtyczki.
Aby uzyskać szczegółowe instrukcje krok po kroku, zapoznaj się z naszym artykułem na temat tego, jak umożliwić użytkownikom subskrybowanie komentarzy w WordPress.
Dodaj dodatkowe pola do formularza komentarza WordPress
Chcesz dodać dodatkowe pola do twojego formularza komentarzy WordPress? Na przykład opcjonalne pole, w którym użytkownicy mogą dodać swoją nazwę użytkownika Twittera?
Wystarczy zainstalować i włączać wtyczkę WordPress Comments Fields. Po włączaniu przejdź do strony „Pola komentarzy” i przełącz się na kartę „Pola komentarzy”.
Wystarczy przeciągnąć i upuścić pole własne i nadać mu tytuł, opis i nazwę danych.
Po zakończeniu dodawania pól nie zapomnij kliknąć przycisku „Zapisz wszystkie zmiany”.
Możesz teraz zobaczyć swój formularz komentarza, aby zobaczyć pola własne w działaniach.
Pola konfiguratora są następnie wyświetlane w moderacji komentarzy i pod ich treścią.
Więcej szczegółów można znaleźć w naszym poradniku na temat dodawania pól własnych do formularza komentarza w WordPress.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak stylizować formularz komentarza WordPress, aby był przyjemniejszy dla twoich użytkowników. Możesz również zapoznać się z naszymi wskazówkami, aby uzyskać więcej komentarzy na temat twoich wpisów na blogu WordPress oraz z naszą ekspercką listą najlepszych wtyczek do mediów społecznościowych dla WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dayo Olobayo
Thanks for taking out the time to put this article together. I used the code snippet for removing the website url but I noticed it doesn’t working well here. Reason why I said that is because it only worked on 2 post but other posts on my website still has the URL box in the comment section.
Am I the one not getting it right please? Also, do I need to replace the „wpbeginner” in the code to my domain name?
WPBeginner Support
You may want to check with your theme to see if they have something in their styling that could be overriding the standard styling. You do not need to remove wpbeginner from the code for it to work.
Administrator
Jiří Vaněk
Thanks for the tutorial using Seed Prod. I am currently using WP Discuz and I am quite happy with it. However, for smaller sites this form is much more elegant with Seed Prod. The instructions are quite long but I will try it on my test site where I have Seed Prod installed. Thanks for a great and really detailed tutorial.
Moinuddin Waheed
I have seen many different comments section on websites and wondered why do they differed on appearance although all are using the same wordpress comments.
having a good looking comments section is necessary for making good user experience while commenting.
I have a query regarding disqus platform for wordpress comments which I have used for two years.
is it good idea to continue to use it or is there a better alternative?
also just curious to know what does wpbeginner uses for comments?
WPBeginner Support
You can find our opinion on disqus in our article below. For our comments we are currently using the built-in WordPress comment system.
https://www.wpbeginner.com/wp-tutorials/how-to-disable-disqus-on-custom-post-types-in-wordpress/
Administrator
Jiří Vaněk
In my opinion, WP Discuz is a great plugin. I’ve been using it on my blog for almost two years now, and I must say, without any issues so far. So if you’re using it too, I wouldn’t necessarily change this plugin. The developers and support team work great. However, it probably also depends on the type and size of the website, as this plugin is quite large and complex.
Vera Kofyan
Thank you for a great tutorial.
One thing did not work for me: moving the text area to bottom. I added the script in Code snippets, but nothing changed. Has anything changed since you wrote that?
Thank you,
Vera
WPBeginner Support
The snippet should still work correctly, the theme you are using may have added styling to the comment form that could be changing some things, if you check with the support for your specific theme they can help check and confirm this.
Administrator
Arischvaran Puvanesvaran
Thank you for sharing
WPBeginner Support
You’re welcome, we hope you found our guide helpful!
Administrator
Ali Kaleem
This Blog Is very imformative.
WPBeginner Support
Glad you found our site helpful!
Administrator
Asutosh sahoo
really full of knowledge. please keep updating. thanks..
WPBeginner Support
Glad you found our guide helpful!
Administrator
saikul
good tutorial . i like this
WPBeginner Support
Thank you, glad you liked it!
Administrator
Samyak sharma
Thanks, This is very good article.
WPBeginner Support
Glad you found it helpful
Administrator
Vincent Nyagaka
Thank you for guiding us on how to style WordPress form. However I have tried to use almost all the codes, on how to remove the URL field from the comment form but unfortunately, none is working code. Kindly can you give me another code to use
WPBeginner Support
If none of our recommendations were able to assist, we would recommend reaching out to the support for your specific theme and they should be able to assist with targeting their specific target for your comments.
Administrator
amr
Hi
How can I delete the url from the author name and date?
Thanks
WPBeginner Support
IF you mean from your comments then you would want to take a look at our article below:
https://www.wpbeginner.com/plugins/how-to-remove-website-url-field-from-wordpress-comment-form/
Administrator
lal
good tutorial, loved it
WPBeginner Support
Glad you liked our tutorial
Administrator
Adam Rees
Thanks, it helped me a lot in customizing the comment section.
WPBeginner Support
You’re welcome
Administrator
fred
Hi, nice tutorial ! but i have a problem to find the location of the right .php to modify the post comments, i’m using oceanwp theme with elementor pro, when i go to the functions.php or comments.php i can’t find any of the command lines, i’v tryed to add your code and nothing happens. so i guess it’s somewhere else but where ?
WPBeginner Support
If you are using a page builder you would need to reach out to that page builder’s support for how to edit the comment form and what tools are available.
Administrator
Muhammad Shahzad
how to show to comment box to the top of all comments and after post.
WPBeginner Support
If your theme is not set up that way you would sadly need to modify the theme’s code to do that. As each theme’s code can be very different we do not have a specific guide on how to do that yet.
Administrator
HieuBui
Thank you very much
WPBeginner Support
You’re welcome
Administrator