W artykule:
Czy chcesz wyświetlić kod w swoich postach na blogu WordPress? Jeśli próbowałeś dodać kod jak zwykły tekst, to WordPress nie wyświetli go poprawnie.
WordPress uruchamia Twoje treści za pomocą kilku filtrów oczyszczania za każdym razem, gdy zapisujesz post. Te filtry są po to, aby upewnić się, że ktoś nie wstrzykuje kodu za pośrednictwem edytora postów, aby zhakować Twoją stronę.
W tym artykule pokażemy właściwe sposoby łatwego wyświetlania kodu w witrynie WordPress. Pokażemy Ci różne metody i możesz wybrać ten, który najlepiej pasuje do Twoich potrzeb.
Metoda 1. Wyświetl kod za pomocą domyślnego edytora w WordPress
Ta metoda jest zalecana dla początkujących i użytkowników, którzy nie muszą często wyświetlać kodu.
Po prostu edytuj wpis na blogu lub stronę, na której chcesz wyświetlić kod. Na ekranie edycji postu Dodaj nowy blok kodu do swojego postu.
Możesz teraz wprowadzić fragment kodu w obszarze tekstowym bloku.
Następnie możesz zapisać swój post na blogu i wyświetlić podgląd, aby zobaczyć blok kodu w akcji.
W zależności od motywu WordPress blok kodu może wyglądać inaczej w Twojej witrynie.
Metoda 2. Wyświetl kod w WordPress za pomocą wtyczki
W tej metodzie będziemy używać wtyczki WordPress do wyświetlania kodu w postach na blogu. Ta metoda jest zalecana dla użytkowników, którzy często wyświetlają kod w swoich artykułach.
Daje to następujące korzyści w stosunku do domyślnego bloku kodu:
- Pozwala na łatwe wyświetlanie dowolnego kodu w dowolnym języku programowania
- Wyświetla kod z podświetleniem składni i numerami linii
- Użytkownicy mogą łatwo przestudiować kod i skopiować go
Najpierw musisz zainstalować i aktywować wtyczkę SyntaxHighlighter Evolved. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji możesz edytować post na blogu, w którym chcesz wyświetlić kod. Na ekranie edycji postu Dodaj blok „SyntaxHighlighter Code” do swojego postu.
Zobaczysz teraz nowy blok kodu w edytorze postów, w którym możesz wprowadzić swój kod. Po dodaniu kodu musisz wybrać Ustawienia bloku z prawej kolumny.
Najpierw musisz wybrać język kodu. Następnie możesz wyłączyć numery linii, podać pierwszy numer linii, podświetlić dowolną linię I wyłączyć funkcję, aby linki były klikalne.
Po zakończeniu zapisz swój post i kliknij przycisk Podgląd, aby zobaczyć go w akcji.
Wtyczka zawiera wiele schematów kolorów i motywów. Aby zmienić motyw kolorów, musisz odwiedzić Ustawienia ” SyntaxHighlighter strona.
Na stronie Ustawienia możesz wybrać motyw kolorów i zmienić ustawienia SyntaxHighlighter. Możesz zapisać ustawienia, aby wyświetlić podgląd bloku kodu u dołu strony.
Używanie SyntaxHighlighter z klasycznym edytorem
Jeśli nadal używasz starego klasycznego edytora WordPress, oto jak użyłbyś wtyczki SyntaxHighlighter, aby dodać kod do swoich postów na blogu WordPress.
Po prostu zawiń kod w nawiasy kwadratowe z nazwą języka. Na przykład, jeśli zamierzasz dodać kod PHP, dodasz go w ten sposób:
[php]
<?php
private function get_time_tags () {
$time = get_the_time ('d M, Y');
return $time;
}
?>
[/php]
Podobnie, jeśli chcesz dodać kod HTML, zawiń go wokół skrótu HTML w ten sposób:
[html]
<a href="example.com" > przykładowy link< / a>
[/html]
Metoda 3. Wyświetl kod w WordPress ręcznie (bez wtyczki lub bloku)
Ta metoda jest przeznaczona dla zaawansowanych użytkowników, ponieważ wymaga więcej pracy i nie zawsze działa zgodnie z przeznaczeniem.
Jest odpowiedni dla użytkowników, którzy nadal używają starego klasycznego edytora i chcą wyświetlić kod bez użycia wtyczki.
Najpierw musisz przekazać swój kod za pomocą narzędzia kodującego encje HTML online. Zmieni to znaczniki kodu na encje HTML, które pozwolą Ci dodać kod i ominąć filtry oczyszczania WordPress.
Teraz skopiuj i wklej kod w edytorze tekstu i zawiń go wokół < pre> oraz < code> tagi.
Twój kod wyglądałby tak:
< pre> < code>
<p > <a href= " / Strona główna.html " > to jest przykładowy link< / a > < / p>
</pre> < / code>
Możesz teraz zapisać swój post i wyświetlić podgląd kodu w akcji. Twoja przeglądarka przekonwertuje encje HTML, a użytkownicy będą mogli zobaczyć i skopiować poprawny kod.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo wyświetlać kod w witrynie WordPress. Możesz również zobaczyć naszą ostateczną listę najbardziej poszukiwanych wskazówek, sztuczek i hacków WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
