Czy chcesz dodać podświetlanie składni w komentarzach WordPress? Domyślnie WordPress nie zawiera żadnego podświetlania składni komentarzy, postów lub stron.

Jeśli masz w swojej witrynie artykuły o kodowaniu lub programowaniu, czasami Twoi użytkownicy mogą chcieć zostawić przykłady kodu w komentarzach.

W tym artykule pokażemy, jak łatwo dodać podświetlanie składni w komentarzach WordPress.

Dlaczego i kiedy potrzebujesz podświetlania składni w komentarzach WordPress

WordPress nie pozwala po prostu wklejać fragmentów kodu do artykułów ze względów bezpieczeństwa.

Możesz wyświetlić niektóre próbki kodu, dodając blok kodu w swoim poście lub na stronach za pomocą edytora bloków .

Następnie możesz dodać swój fragment kodu w obszarze tekstowym bloku kodu.

Możesz teraz zapisać zmiany w swoim poście lub na stronie i wyświetlić ich podgląd, aby zobaczyć swój kod w akcji.

W zależności od motywu WordPress, będzie on zwykle wyświetlany w bardzo prostym bloku tekstu i bez podświetlania składni.

To nie wygląda dobrze i nie jest zbyt pomocne dla użytkowników.

Podświetlanie składni to format stylów powszechnie używany do wyświetlania kodu. Dodaje numery linii i kolory, aby podkreślić wzory kodu, co ułatwia zrozumienie.

Oto przykład fragmentu kodu z podświetleniem składni. Zwróć uwagę na numery linii i kolory używane do wyróżnienia różnych elementów w kodzie:

Witamy na mojej stronie głównej


 

Teraz, jeśli prowadzisz blog WordPress dotyczący kodowania lub programowania, potrzebujesz podświetlania składni, aby poprawnie wyświetlać kod w swoich artykułach.

Możesz również chcieć, aby Twoi użytkownicy mogli używać tego samego podświetlania składni w komentarzach, co sprawi, że komentarze będą ciekawsze i bardziej angażujące dla użytkowników.

Mając to na uwadze, przyjrzyjmy się, jak dodać podświetlanie składni w komentarzach, postach i stronach WordPress.

Dodawanie podświetlacza składni w WordPress

Najłatwiejszym sposobem dodania podświetlania składni w WordPressie jest użycie Syntax Highlighter Evolved . Jest bardzo łatwy w użyciu i umożliwia włączenie podświetlania składni w postach, stronach i komentarzach WordPress.

Najpierw musisz zainstalować i aktywować wtyczkę Syntax Highlighter Evolved . Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym , jak zainstalować wtyczkę WordPress .

Po aktywacji musisz edytować post lub stronę, do której chcesz dodać kod. Na ekranie edycji posta kliknij ikonę (+), aby dodać nowy blok, a następnie wstaw blok „SyntaxHighlighter Code” do obszaru zawartości.

Zobaczysz teraz nowy blok kodu w edytorze postów, w którym możesz wpisać swój kod. Po dodaniu kodu należy wybrać ustawienia bloku z prawej kolumny.

Tutaj możesz wybrać język programowania dla swojego kodu, pokazać lub ukryć numery linii, sprawić, że linki będą klikalne i nie tylko.

Gdy skończysz, zapisz swój post lub stronę. Możesz teraz odwiedzić swoją witrynę, aby zobaczyć swój kod z podświetlaniem składni.

To było łatwe, prawda?

Jednak komentarze WordPress nie obsługują edytora bloków. Zobaczmy, jak Twoi użytkownicy mogą używać Syntax Highlighter Evolved do swoich komentarzy.

Dodawanie podświetlania składni w komentarzach WordPress

Syntax Highlighter Evolved jest domyślnie włączony dla komentarzy WordPress. Aby jednak użyć go w komentarzach, kod musi być owinięty wokół shortcodes .

Wtyczka zawiera kilka skrótów nazwanych od wszystkich popularnych języków programowania i skryptów.

Po prostu zawiń swój kod w nawiasy kwadratowe z nazwą języka. Na przykład, jeśli zamierzasz dodać kod PHP, dodasz go w ten sposób:

[php]
prywatna funkcja get_time_tags() {
$time = get_the_time('d M, Y');
zwraca $czas;
}
?>
[/php]

Podobnie, jeśli chcesz dodać kod HTML, owijasz go wokół krótkiego kodu HTML w następujący sposób:

[html]
Witryna demonstracyjna

[/html]

Dodawanie powiadomienia o podświetlaniu składni w formularzu komentarza

Chociaż łatwo jest używać podświetlania składni za pomocą skrótów, problem polega na tym, że Twoi użytkownicy nie wiedzieliby, że mogą to zrobić.

Na szczęście istnieje szybki sposób na poinformowanie ich, że mogą używać podświetlania składni za pomocą skrótów.

W tym celu musisz dodać niestandardowy fragment kodu do swojej witryny WordPress. Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem jak dodać niestandardowy kod w WordPress .

Będziesz musiał dodać następujący kod we wtyczce fragmentów kodu, plik functions.php lub wtyczkę specyficzną dla witryny .

funkcja wpbeginner_comment_text_before($arg) {

$arg['comment_notes_before'] .= "
Możesz użyć skrótów do podświetlania składni podczas dodawania kodu. Na przykład [php][/php] lub [html][/html]< /p>";

return $arg;

}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
 

Ten kod po prostu wyświetla informację tuż przed polem komentarza w formularzu komentarza WordPress. Nie wyświetla jednak powiadomienia dla zalogowanych użytkowników.

Możesz teraz otworzyć nowe okno przeglądarki w trybie incognito lub po prostu wylogować się z obszaru administracyjnego WordPress. Następnie możesz odwiedzić dowolny post na swoim blogu, aby zobaczyć, jak działa podświetlanie składni.

Możesz również dodać niestandardowy CSS , aby nadać styl temu tekstowi. Użyliśmy następującego niestandardowego kodu CSS na naszej stronie demonstracyjnej, możesz użyć tego jako punktu wyjścia.

p.powiadomienie-komentarz {
    rozmiar czcionki: 14px;
    kolor: #555;
    wysokość linii: 1,5;
}
 

Mamy nadzieję, że ten artykuł pomógł Ci dodać podświetlanie składni w komentarzach WordPress. Możesz również zapoznać się z naszym przewodnikiem, jak zezwolić użytkownikom na przesyłanie obrazów w komentarzach WordPress i kilka przydatnych wskazówek dotyczących stylizacji formularza komentarza WordPress .

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