Wysokie komentarze autora w postach na blogu 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.

Highting comments by an author in WordPress blog posts

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.

Regular comments layout with no author highlighting

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.

Theme customizer in WordPress

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

Additional CSS tab

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.

Viewing comments in Theme Customizer

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ś.

Author's comment highlighted with a different background color

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.

Comment author highlighted with the Author label

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.

User role labels added to comments

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.

User role highlighted

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.

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd „nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zainstalować WordPress lokalnie na komputerze Mac za pomocą MAMP

W artykule: Jak zainstalować MAMP na komputerze MacInstalacja WordPress na komputerze MacWypróbowanie…