Jak wyróżnić komentarze autora w WordPress

Twoja sekcja komentarzy to miejsce, w którym Twoja społeczność ożywa. To ważna przestrzeń do nawiązywania kontaktów, rozmów i angażowania czytelników.

Jako autor, Twoje odpowiedzi są kluczową częścią tej interakcji. Chcesz mieć pewność, że Twój głos jest łatwy do znalezienia przez czytelników, aby zachęcić do jeszcze większej dyskusji.

Podświetlanie Twoich komentarzy nadaje im zasłużoną uwagę. Ten prosty dodatek sprawia, że cały obszar dyskusji wygląda bardziej profesjonalnie, uporządkowanie i angażująco.

Wierzymy, że drobne wybory projektowe mogą mieć duży wpływ na doświadczenie użytkownika. A to jedna z najłatwiejszych i najskuteczniejszych zmian, jakie możesz wprowadzić.

W tym artykule pokażemy Ci, jak łatwo wyróżnić komentarze autora w WordPress.

Dlaczego wyróżniać komentarze autora w WordPress?

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

W przypadku nowego bloga WordPress możesz łatwo odpowiadać na komentarze i brać udział w dyskusjach z czytelnikami. Jeśli prowadzisz bloga dla wielu autorów, możesz zachęcić autorów do pomocy w moderowaniu komentarzy.

Jednak większość motywów WordPress nie rozróżnia komentarzy i są one wyświetlane w tym samym stylu.

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

Wyróżnianie komentarzy autora pomaga to naprawić i sprawia, że komentarze autora wyróżniają się i są bardziej zauważalne.

Ostatecznym celem jest zachęcenie nowych użytkowników do dołączania do komentarzy i ostatecznie subskrypcji Twojego newslettera lub zostania klientem.

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

• Podświetlanie autora komentarza w WordPress
• Wyróżnianie komentarzy według roli użytkownika w WordPress

Podświetlanie autora komentarza w WordPress

Najprostszym sposobem na wyróżnienie komentarzy autora posta jest dodanie niestandardowego CSS do swojego motywu WordPress. Pozwala to łatwo dodać potrzebny kod i zobaczyć podgląd na żywo, jak będzie wyglądał na Twojej stronie, bez zapisywania go.

Najpierw musisz przejść do Wygląd » Dostosuj w obszarze administracyjnym WordPress. Spowoduje to uruchomienie interfejsu narzędzia do dostosowywania motywów WordPress. Zauważysz szereg opcji w kolumnie po lewej stronie i podgląd swojej witryny na żywo.

Stąd musisz kliknąć zakładkę „Dodatkowy CSS”.

Spowoduje to otwarcie obszaru tekstowego, w którym będziesz dodawać niestandardowy CSS.

Chciałbyś jednak zobaczyć, jak będzie wyglądać niestandardowy CSS po zastosowaniu.

Aby to zrobić, musisz przejść do wpisu na blogu, który zawiera komentarze autora wpisu.

Przewiń w dół do sekcji komentarzy, a następnie dodaj poniższy niestandardowy kod CSS w polu Niestandardowy CSS po lewej stronie.

.bypostauthor { 
background-color: #e7f8fb;
}

Od razu zauważysz zmianę komentarza autora pasującą do wprowadzonego niestandardowego CSS.

Więc jak to wszystko działa?

Widzisz, WordPress dodaje niektóre domyślne klasy CSS do różnych obszarów Twojej strony internetowej. Te klasy CSS są obecne niezależnie od tego, którego motywu WordPress używasz.

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

Dodajmy więcej stylów CSS, aby były jeszcze bardziej widoczne. Oto przykładowy kod, który dodaje małą etykietę „Autor” do komentarzy autora posta i obramowanie wokół obrazka awatara autora.

.bypostauthor:before { 
content:"Author";
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.

Wyróżnianie komentarzy według roli użytkownika w WordPress

Obecnie wiele blogów WordPress ma członków zespołu odpowiedzialnych za odpowiadanie na komentarze. Popularne strony internetowe mogą mieć autora posta, administratora i moderatorów odpowiadających na komentarze, aby zwiększyć zaangażowanie użytkowników.

Jak podświetlić komentarz dodany przez członka zespołu, który nie jest faktycznym autorem posta?

Istnieje prosty sposób, aby to osiągnąć. Wymaga to jednak dodania niestandardowego kodu do Twojej witryny WordPress. Jeśli nigdy tego nie robiłeś, zapoznaj się z naszym artykułem na temat jak wklejać fragmenty kodu z sieci do WordPressa.

Najpierw musisz dodać następujący kod do pliku functions.php swojego motywu lub do wtyczki fragmentów kodu:

if ( ! 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' ) );
}
  
// Get comment author role 
function wpb_get_comment_author_role($author, $comment_id, $comment) { 
$authoremail = get_comment_author_email( $comment); 
// Check if user is registered
if (email_exists($authoremail)) {
$commet_user_role = get_user_by( 'email', $authoremail );
$comment_user_role = $commet_user_role->roles[0];
// HTML output to add next to comment author name
$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;
} 
  
// Display comment author                   
function wpb_comment_author_role($author) { 
return $author .= $this->comment_user_role; 
} 
}
new WPB_Comment_Author_Role_Label;
endif;

Zamiast edytować plik functions.php swojego motywu, zalecamy dodanie tego kodu za pomocą WPCode.

Ten wtyczka do fragmentów kodu sprawia, że dodawanie niestandardowego kodu w WordPress jest bezpieczne i łatwe.

Aby rozpocząć, musisz zainstalować i aktywować bezpłatną wtyczkę WPCode. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.

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

Następnie najedź kursorem myszy na opcję „Dodaj swój niestandardowy kod (nowy fragment)” i kliknij przycisk „Dodaj niestandardowy fragment”.

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

Teraz możesz dodać tytuł dla swojego fragmentu kodu i wkleić powyższy kod do pola „Podgląd kodu”.

Następnie po prostu przełącz przełącznik z pozycji „Nieaktywny” na „Aktywny” i kliknij przycisk „Zapisz fragment” u góry strony.

Ten kod po prostu dodaje etykietę roli użytkownika obok nazwy autora komentarza. Tak to wygląda bez żadnego niestandardowego stylizowania.

Uczyńmy to trochę ładniejszym, dodając niestandardowy CSS. Przejdź do strony Wygląd » Dostosuj i przejdź do zakładki Dodatkowy CSS.

Możesz użyć poniższego 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. Zachęcamy do modyfikacji kodu, aby dopasować kolory i styl Twojego motywu.

Aby uzyskać więcej szczegółów, możesz przeczytać nasz artykuł o tym, jak dodać etykiety ról użytkowników do komentarzy w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak wyróżniać komentarze autorów w WordPress. Możesz również zapoznać się z naszym poradnikiem na temat jak wyróżniać nowe posty dla powracających odwiedzających w WordPress oraz naszymi ekskluzywnymi wyborami najlepszych wtyczek do pól biografii autora 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.