Jak wyróżnić komentarze autora w WordPress

Chcesz wyróżnić komentarze autora w postach WordPress na swojej stronie?

Podkreślanie komentarzy autora na blogu WordPress może pomóc w budowaniu zaangażowania. Użytkownicy częściej zostawiają komentarz, gdy widzą, że autor aktywnie uczestniczy w dyskusji.

W tym artykule pokażemy, jak łatwo wyróżnić komentarze autora w WordPress, aby zwiększyć zaangażowanie.

Dlaczego warto wyróżniać komentarze autora w WordPress?

Komentarze to świetny sposób na budowanie zaangażowania użytkowników w Twojej witrynie. Jeśli chcesz uzyskać więcej komentarzy do swoich artykułów, możesz to zachęcić, aktywnie uczestnicząc w dyskusjach.

W przypadku nowego bloga WordPress możesz łatwo odpowiadać na komentarze podczas moderacji komentarzy. Jeśli prowadzisz bloga z wieloma autorami, możesz również zachęcić autorów do wzięcia udziału w dyskusji.

Jednak większość motywów WordPress nie rozróżnia komentarzy i wymienia je w tym samym stylu.

Przypadkowy czytelnik może przewijać komentarze, nie zdając sobie sprawy z dodatkowej treści wniesionej przez autora w dyskusji.

Podkreślanie komentarzy autora pomaga temu zaradzić i sprawia, że komentarze autora wyróżniają się i są bardziej zauważalne.

Ostatecznym celem jest zachęcenie nowych użytkowników do dołączenia do komentarzy i ostatecznie subskrybowania biuletynu lub zostania klientem.

Mając to na uwadze, przyjrzyjmy się, jak łatwo wyróżnić komentarze autorów w WordPress.

Wyróżnianie autora komentarza w WordPress

Najprostszym sposobem na podkreślenie komentarzy przez autora postu jest dodanie niestandardowego CSS do motywu WordPress. Dzięki temu możesz łatwo dodać potrzebny kod i zobaczyć podgląd na żywo, jak będzie wyglądał na twojej stronie bez zapisywania go.

Po pierwsze, musisz odwiedzić Wygląd ” Dostosuj w obszarze administracyjnym WordPress. Spowoduje to uruchomienie interfejsu dostosowywania motywów WordPress. Zauważysz kilka opcji w kolumnie po lewej stronie i podgląd na żywo swojej witryny.

Stąd musisz kliknąć dodatkową kartę CSS. Spowoduje to otwarcie obszaru tekstowego, w którym będziesz dodawać Niestandardowy CSS.

Chcesz jednak zobaczyć, jak będzie wyglądał Niestandardowy CSS po zastosowaniu. Aby to zrobić, musisz przejść do postu na blogu, który zawiera komentarze autora postu.

Przewiń w dół do sekcji komentarze, a następnie dodaj następujący Niestandardowy CSS w polu Niestandardowy CSS po lewej stronie.

.bypostauthor { 
background-color: # e7f8fb;
}

Natychmiast zauważysz zmianę komentarza autora pasującą do niestandardowego CSS, który wprowadziłeś.

Jak to wszystko działa?

Widzisz, że WordPress dodaje domyślne klasy CSS do różnych obszarów Twojej witryny. Te klasy CSS są tam niezależnie od tego, którego motywu WordPress używasz.

W tym przykładowym kodzie użyliśmy .bypostauthor Klasa CSS, która jest dodawana do wszystkich komentarzy dodanych przez autora postu.

Dodajmy więcej stylów CSS, aby uczynić go jeszcze bardziej widocznym. Oto przykładowy kod, który dodaje małą etykietę „autora” do komentarzy autora postu i obramowanie wokół obrazu awatara autora.

.bypostauthor: before { 
content:"Autor";
float: right;
background-color: # FF1100;
padding: 5px;
font-size: small;
font-weight: bold;
color: # FFFFFF;
}
.bypostauthor .avatar {
border: 1px dotted #ff1100;
}

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

Podkreślanie komentarzy według roli użytkownika w WordPress

Teraz wiele blogów WordPress ma członków zespołu odpowiedzialnych za odpowiadanie na komentarze. Popularne witryny mogą mieć autora postów, administratora i moderatorów, którzy odpowiadają na komentarze, aby zwiększyć zaangażowanie użytkowników.

Jak wyróżnić komentarz dodany przez pracownika, który nie jest faktycznym autorem wpisu?

Jest łatwy hack, aby to osiągnąć. Wymaga to jednak dodania niestandardowego kodu do witryny WordPress. Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym artykułem na temat łatwego dodawania niestandardowego kodu w WordPress.

Najpierw musisz dodać następujący kod do wtyczki urywki kodu lub funkcji motywu.plik php.

jeśli ( ! class_exists ('WPB_Comment_Author_Role_Label' ) ) :
class WPB_Comment_Author_Role_Label {
public function _ _ construct () {
add_filter ('get_comment_author', array ($this, 'wpb_get_comment_author_role'), 10 ,3) ;
add_filter ('get_comment_author_link', array ($this, 'wpb_comment_author_role' ) );
}
 
// Pobierz rolę autora komentarza 
function wpb_get_comment_author_role ($author, $comment_id, $comment) { 
$authoremail = get_comment_author_email ($comment); 
// Sprawdź czy użytkownik jest zarejestrowany
if (email_exists ($authoremail)) {
$commet_user_role = get_user_by ('email', $authoremail );
$comment_user_role = $commet_user_role - >role[0];
// HTML wyjście do dodania obok nazwy autora komentarza
$this->comment_user_role = ' <span class="comment-author-label comment-author-label-'.$comment_user_role.'">' . ucfirst ($comment_user_role) . '</span>';
} else { 
$this - > comment_user_role = ";
} 
return $ author;
} 
 
// Wyświetl autora komentarza                   
function wpb_comment_author_role ($author) { 
return $author .= $this - > comment_user_role; 
} 
}
nowy WPB_Comment_Author_Role_Label;
endif;

Ten kod po prostu dodaje Etykietę roli użytkownika obok nazwiska autora komentarza. Tak by to wyglądało bez żadnych niestandardowych stylizacji.

Zróbmy to trochę ładniejsze, dodając trochę niestandardowego CSS. Przejdź do Wygląd ” Dostosuj strony i przełącz na dodatkową kartę CSS.

Następnie możesz użyć następującego CSS, aby stylizować Etykietę roli użytkownika w komentarzach.

.comment-author-label {
    padding: 5px;
    font-size: 14px;
    border-radius: 3px;
}
 
.comment-author-label-editor {  
background-color: # efefef;
}
.comment-author-label-author {
background-color: # faeeee;
}
 
.comment-author-label-contributor {
background-color: # f0faee;   
}
.comment-author-label-subscriber {
background-color: # eef5fa;   
}
 
.comment-author-label-administrator { 
background-color: # fde9ff;
}

Tak to wyglądało na naszej stronie testowej. Możesz zmodyfikować kod, aby pasował do kolorów i stylu motywu.

Aby uzyskać więcej informacji, możesz przeczytać nasz artykuł na temat dodawania etykiet ról użytkowników do komentarzy WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się wyróżniać komentarze autorów w WordPress. Chcesz zobaczyć, jak użytkownicy wchodzą w interakcję z Twoją witryną? Zobacz nasz samouczek na temat śledzenia zaangażowania użytkowników w WordPress i dodawania powiadomień push w witrynie WordPress, aby zwiększyć ruch.

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