Musiałeś widzieć fragmenty kodu w różnych postach na blogu WPBeginner, które tworzymy, aby pomóc naszym czytelnikom rozwiązywać problemy. Jednak wyświetlanie tego kodu nie jest proste.
Dzieje się tak, ponieważ jeśli spróbujesz dodać kod jak zwykły tekst, WordPress nie wyświetli go poprawnie. WordPress przetwarza Twoją zawartość przez kilka filtrów czyszczących za każdym razem, gdy zapisujesz post. Te filtry mają na celu zapewnienie, że nikt nie wstrzyknie kodu za pomocą edytora postów, aby zhakować Twoją stronę.
W tym artykule pokażemy Ci właściwe sposoby na łatwe wyświetlanie kodu na Twojej stronie WordPress. Pokażemy różne metody, a Ty możesz wybrać tę, która najlepiej odpowiada Twoim potrzebom.
Dlaczego wyświetlać kod na stronie WordPress?
Jeśli piszesz posty na blogu na tematy techniczne lub tworzysz dokumentację dla swoich produktów, wyświetlanie fragmentów kodu jest naprawdę przydatne. Twoi użytkownicy mogą po prostu skopiować fragment kodu i dodać go do swojej strony internetowej.
Jednak wyświetlanie kodu na stronie WordPress nie jest takie proste.
WordPress zinterpretuje fragmenty jako funkcjonalny kod i spróbuje zaimplementować go na Twojej stronie zamiast wyświetlać go jako tekst. Nie wyświetliłby również kodu poprawnie, co prowadziłoby do błędów, gdyby użytkownicy wprowadzili go na swojej stronie.
Poza tym WordPress używa wielu filtrów jako środków bezpieczeństwa. Filtruje treści, aby zapobiec wstrzykiwaniu złośliwego kodu przez hakerów do edytora treści i przejmowaniu Twojej witryny.
Niemniej jednak istnieją różne sposoby wyświetlania kodu w WordPressie. Możesz kliknąć poniższe linki, aby przejść do preferowanej sekcji:
Metoda 1. Wyświetlanie kodu za pomocą domyślnego edytora w WordPress
Ta metoda jest zalecana dla początkujących i użytkowników, którzy nie potrzebują często wyświetlać kodu.
Po prostu edytuj post na blogu lub stronę, na której chcesz wyświetlić kod. Na ekranie edytora treści WordPress dodaj nowy blok Kodu do swojego posta.
Teraz możesz wprowadzić fragment kodu w obszarze tekstowym bloku.
Blok kodu pokaże podgląd Twojego kodu.
Następnie możesz zapisać swój wpis na blogu i wyświetlić go, aby zobaczyć blok kodu w akcji.
Gdy będziesz zadowolony z wyglądu swojego kodu, opublikuj swój wpis na blogu.
W zależności od Twojego motywu WordPress, blok kodu może wyglądać inaczej na Twojej stronie.
Metoda 2. Wyświetlanie kodu w WordPress za pomocą wtyczki
W tej metodzie użyjemy wtyczki WordPress do wyświetlania kodu w Twoich postach na blogu. Ta metoda jest zalecana dla użytkowników, którzy często wyświetlają kod w swoich artykułach.
Daje Ci następujące zalety w porównaniu do domyślnego bloku kodu:
- Pozwala łatwo wyświetlać kod w dowolnym języku programowania.
- Wyświetla kod z podświetlaniem składni i numerami linii.
- Twoi użytkownicy mogą łatwo studiować kod i go kopiować.
Najpierw musisz zainstalować i aktywować wtyczkę SyntaxHighlighter Evolved. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji możesz przejść do edycji wpisu na blogu, w którym chcesz wyświetlić kod. Na ekranie edycji wpisu dodaj blok „SyntaxHighlighter Code” do swojego wpisu.
Zobaczysz teraz nowy blok kodu w edytorze posta, w którym możesz wprowadzić swój kod.
Po dodaniu kodu musisz wybrać ustawienia bloku z prawej kolumny.
Najpierw musisz wybrać język dla swojego kodu, np. PHP, CSS, Java itp. Następnie możesz wyłączyć numery linii, podać pierwszy numer linii, podświetlić dowolną linię i wyłączyć funkcję tworzenia klikalnych linków.
Po zakończeniu zapisz swój post i kliknij przycisk podglądu, aby zobaczyć go w akcji.
Wtyczka jest dostarczana z wieloma schematami kolorów i motywami.
Aby zmienić motyw kolorystyczny, musisz odwiedzić stronę Ustawienia » SyntaxHighlighter.
Ze strony ustawień możesz wybrać motyw kolorystyczny i zmienić ustawienia SyntaxHighlighter.
Możesz zapisać swoje ustawienia, aby zobaczyć podgląd bloku kodu na dole strony.
Używanie SyntaxHighlighter z klasycznym edytorem
Jeśli nadal korzystasz z starego klasycznego edytora WordPress, oto jak użyć wtyczki SyntaxHighlighter do dodawania kodu do Twoich postów na blogu WordPress.
Po prostu otocz swój kod nawiasami kwadratowymi z nazwą języka. Na przykład, jeśli zamierzasz dodać kod PHP, dodasz go w ten sposób:
<?php private function get_time_tags() { $time = get_the_time('d M, Y'); return $time; } ?> Podobnie, jeśli chcesz dodać kod HTML, opakuj go w krótki kod HTML w ten sposób:
<a href="example.com">A sample link</a> Metoda 3. Wyświetlanie kodu 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 korzystają ze starego klasycznego edytora i chcą wyświetlać kod bez używania wtyczki.
Najpierw musisz przepuścić swój kod przez narzędzie online koder encji HTML. Zmieni to znacznik kodu na encje HTML, co pozwoli Ci dodać kod i ominąć filtry czyszczące WordPress.
Teraz skopiuj i wklej swój kod do edytora tekstu i umieść go w tagach <pre> i <code>.
Twój kod będzie wyglądał tak:
<pre><code>
<p><a href="/home.html">To jest przykładowy link</a></p>
</pre></code>
Teraz możesz zapisać swój wpis 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 na swojej stronie WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat jak zezwolić na PHP w postach i stronach WordPress oraz naszym wyborem najlepszych narzędzi do tworzenia stron 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.
Olaf
Jako programista PHP mam małego bloga, na którym okazjonalnie publikuję różne techniki i przepływy pracy związane z programowaniem w PHP, a także udostępniam własne fragmenty kodu. Wspaniale, że WordPress natywnie pozwala na wyświetlanie kodu. Osobiście jednak używam wtyczki, ponieważ czasami potrzebuję, aby kod pokazywał, że jest w CSS, innym razem w PHP, a bardzo rzadko w JavaScript. Korzystne jest, gdy kod jest dobrze sformatowany, a idealnie, gdy jest pokolorowany według funkcji itp. Pomocne jest również rozważenie funkcji kopiowania, aby użytkownicy mogli łatwo skopiować cały fragment kodu do schowka. Dlatego wolę wtyczkę niż edytor blokowy.
Dennis Muthomi
Myślę, że wtyczka jest świetna do swojego zadania, ale...
jedną funkcją, którą chciałbym zobaczyć dodaną, jest przycisk kopiowania.
Obecnie użytkownicy muszą ręcznie zaznaczać i kopiować cały blok kodu, co może być żmudne, zwłaszcza w przypadku dłuższych fragmentów.
Opcja kopiowania jednym kliknięciem znacznie poprawiłaby komfort użytkowania.
W ten sposób czytelnicy mogliby łatwo pobrać kod, nie przegapiając przypadkowo żadnej jego części podczas zaznaczania kodu.
Wsparcie WPBeginner
Thank you for sharing that recommendation
Admin
Jiří Vaněk
Czy istnieje możliwość dodania przycisku kopiowania kodu w wtyczce, aby użytkownik nie musiał ręcznie kopiować kodu do schowka?
Wsparcie WPBeginner
Not at the moment but we will keep an eye out for a method we would recommend
Admin
Jiří Vaněk
Dziękuję za odpowiedź. To wielka szkoda, ponieważ ułatwia to wiele pracy. Czasami zdarza się, że nawet numery linii są kopiowane do kodu metodą ręczną. Elementor ma widżet do kodu, który ma przycisk kopiowania i jest świetny. Będę śledzić aktualizację artykułu w razie potrzeby.
Pani Gray
Witam,
Czy kod można umieścić na stronach dodanych przez wtyczkę innej firmy, taką jak Woocommerce?
Wsparcie WPBeginner
Tak, można by umieścić kod na tych stronach.
Admin
Ravish
Cześć, przede wszystkim dziękuję za tego bloga.
Chcę dodać kody dla różnych problemów w różnych językach (np. Python i C++). Jak możemy to zrobić?
Wsparcie WPBeginner
Ta wtyczka powinna nadal działać również dla tych języków
Admin
Nimesh
To jest świetne.
Gdyby nie to, użyłbym osobnego wtyczki do fragmentów kodu wejściowego.
Nadal używam klasycznego edytora WordPress i dodam fragmenty kodu do moich postów, zgodnie z tym, co zostało wspomniane.
Dziękuję za ten niesamowity udostępnienie!
Wsparcie WPBeginner
Glad our guide was able to help
Admin
Induwara
Dzięki,
Ten artykuł jest bardzo pomocny. Zainstalowałem wtyczkę i działa dobrze. Mam problem z moim motywem, który polega na tym, że kiedy umieszczam kod z edytora bloków, motyw wyświetla go z kolorem tła, więc nie można zobaczyć kodu. Jestem wielkim fanem WpBegginer!
Wsparcie WPBeginner
Cieszymy się, że nasz przewodnik był pomocny, powinieneś skontaktować się ze swoim motywem w celu uzyskania pomocy w tej sprawie.
Admin
Manju
Czy możesz zasugerować sposób wyświetlania kodu z repozytorium Github w postach WordPress?
Wsparcie WPBeginner
Możesz umieścić kod tak, jak zrobiliśmy to w tym artykule i zaznaczyć poniżej, skąd pochodzi z Github. Mogą istnieć również opcje wtyczek do bezpośredniego osadzania kodu.
Admin
Kunal Mandalia
Dzięki za wskazówkę o tagach „code” – zadziałało jak marzenie.
Wsparcie WPBeginner
You’re welcome
Admin
Mahesh
Dobra robota.. Dzięki za wskazówkę.
Wsparcie WPBeginner
Thank you and you’re welcome
Admin
perveen
potrzebujemy kodowania w wordpress myślałem, że nie potrzebujemy żadnego kodowania w wordpress.
Wsparcie WPBeginner
Nie jest to wymagane, ale dla stron, które chcą pokazywać kod swoim użytkownikom, oto kilka metod, z których mogą skorzystać.
Admin
Adamu Malte
Dziękuję @Syed za Twój świetny tutorial.
manasa
Miły blog z doskonałymi informacjami. Dziękuję, dziel się dalej.
Anh
Świetnie, zastanawiam się tylko, jak można umieścić kod w środku
1-click Use in WordPress
i nadal sprawiaj, że kod wygląda jak tekst.
Podoba mi się, jak można opublikować ten kod
.entry-title { font-family:”Open Sans”, arial, sans-serif; font-size:16px; color:#272727; }1-click Use in WordPress
do swojego wpisu bez zmiany sposobu jego wyświetlania w poście.
Rushikesh Thawale
Thank You for this post.
Christian
There’s a typo on the word ‘Syntax’…no wonder I was getting no results when I copied paste the text on Wordpress plugin search!
Wtyczka Synatx Highlighter Evolved
Ahmed
Dzięki Syed…. Świetny samouczek. Chcę Cię zapytać, jak możemy zmienić rozmiar czcionki kodu?
Dave Mackey
Myślę, że jest problem z Syntax Highlighter Evolved w najnowszych wersjach WordPress. Ja i inni mamy problemy z nieprawidłowym wyświetlaniem encji HTML. Zobacz fora pomocy, aby uzyskać więcej informacji.
Md Abul Bashar
Jak wyświetlać kod bez wtyczki, tylko za pomocą kodu?
John D
Osobiście używam WP-GeSHi-Highlight, który wykorzystuje standardowe kody GeSHi. Myślę, że używałem poprzednika wtyczki przedstawionej tutaj, ale miałem trudności ze znalezieniem kodów językowych.
Ajay
Ostatnio łatwiej mi jest używać GISTów do wyświetlania kodu, a następnie po prostu osadzić Gist w poście
Michaił S.
@AJAY, proszę opowiedz mi więcej o używaniu GIST do wyświetlania próbek kodu.
Dziękuję!
Thomas A. Reinert
Absolutnie się zgadzam. Są całkiem dobrze sformatowane i mają podświetloną składnię, można je forknąć i można nimi zarządzać wersjami. Więc WP GIST jest dla mnie najlepszym rozwiązaniem.