W artykule:
- Zanim Zaczniesz
- Zmiana stylu formularza komentarza w WordPress
- Przenoszenie formularzy komentarzy WordPress na wyższy poziom
- Add Social login to WordPress Comments
- Dodawanie tekstu zasad komentarza przed lub po formularzu komentarza
- Przenieś pole tekstowe komentarza na dół
- Usuń pole strony internetowej (URL) z formularza komentarza WordPress
- Dodaj pole wyboru Subskrybuj komentarze w WordPress
- Dodaj Quicktags w formularzu komentarza
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: .
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.
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'] = "cieszymy się, że zdecydowałeś się zostawić komentarz. Pamiętaj, że komentarze są moderowane zgodnie z naszym
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'] = "
