Zdobycie umiejętności skutecznego prezentowania kodu w WordPressie ma ogromne znaczenie dla blogerów i twórców treści, którzy konsekwentnie publikują kod online, z którego mogą korzystać ich odbiorcy. Zgodnie z zamierzeniami kod komputerowy generuje nowe wizualne wyjście na interfejsie strony internetowej, różniące się od znaczników, ukośników i nawiasów obecnych we fragmentach kodu.
Powoduje to jednak problemy dla osób piszących o programowaniu i projektowaniu, ponieważ wymagają one środków do odpowiedniego przedstawienia kodu bez wykonywania przez niego zamierzonej funkcjonalności, takiej jak generowanie przycisku lub stosowanie stylów do bloku akapitu.
Mówiąc prościej, podczas tworzenia posta na blogu, który zawiera fragment kodu jako przykład, konieczne jest uniemożliwienie wykonania kodu. Takie podejście pozwala czytelnikom postrzegać kod w jego oryginalnej formie, przeglądać go w dobrze sformatowanym bloku, a nawet kopiować jego zawartość do własnych wysiłków programistycznych.
Ten przewodnik ma na celu zademonstrowanie różnych metod wyświetlania kodu w WordPress, niezależnie od wybranego motywu WordPress. Dodatkowo pomoże Ci w określeniu najbardziej odpowiedniej metody dla Twojego przepływu pracy.
Twórz niesamowite strony internetowe
Z najlepszym darmowym kreatorem stron Elementor
Zacząć terazCo się stanie, gdy dodasz zwykły kod w WordPress?
Gdy dodasz zwykły kod bezpośrednio do posta lub strony WordPress, bez podejmowania żadnych konkretnych działań, kod może spowodować niezamierzone konsekwencje. WordPress ma wbudowane mechanizmy, które automatycznie przetwarzają i oczyszczają zawartość, aby zapewnić bezpieczeństwo i odpowiednią funkcjonalność. W rezultacie po dodaniu zwykłego kodu WordPress może go zmodyfikować lub całkowicie usunąć.
Oto kilka rzeczy, które mogą się zdarzyć, gdy dodasz zwykły kod w WordPress:
- Zmiana kodu: WordPress może zmienić kod, usuwając lub modyfikując niektóre elementy, aby zapobiec potencjalnym zagrożeniom bezpieczeństwa lub konfliktom z funkcjonalnością platformy. Może to spowodować, że kod nie będzie działał zgodnie z przeznaczeniem lub będzie generował błędy.
- Usuwanie kodu: WordPress ma filtry i środki bezpieczeństwa, które mogą usuwać niektóre typy kodu uważane za niebezpieczne lub niepotrzebne. Może to prowadzić do usunięcia ważnych fragmentów kodu lub samego bloku kodu.
- Zniekształcenie wizualne: Kod zazwyczaj zawiera znaki specjalne, symbole i formatowanie, które mogą zakłócać wizualną prezentację treści WordPress. Może to powodować problemy z formatowaniem, nieprawidłowe wyrównanie lub wyświetlanie kodu jako zwykłego tekstu zamiast renderowania jako kod.
- Wykonanie kodu: W niektórych przypadkach, jeśli kod nie jest odpowiednio oczyszczony lub obsługiwany, może wykonać i wykonać zamierzoną funkcjonalność. Może to mieć niezamierzone konsekwencje, takie jak tworzenie przycisków, zmiana wyglądu treści, a nawet wpływ na ogólne funkcjonowanie Twojej witryny.
Aby przezwyciężyć te problemy i bezpiecznie wyświetlić kod w WordPress, zaleca się użycie odpowiednich metod lub wtyczek zaprojektowanych specjalnie do prezentowania fragmentów kodu. Te metody zapewniają, że kod jest odpowiednio sformatowany, zachowany i wyświetlany bez niepożądanych modyfikacji lub wykonania.
Tutaj dodamy następujący kod HTML we fragmencie:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>
Ten konkretny fragment kodu wykorzystuje elementy stylizacyjne HTML do wygenerowania trzech bloków treści ozdobionych na zielono, wraz z nagłówkami i akapitami.
Niemniej jednak naszym zamiarem jest przedstawienie nieprzetworzonego kodu w poście na blogu, a nie umożliwienie renderowania go w podanych blokach.
Następujące wyniki można zaobserwować, gdy kod zostanie bezpośrednio wklejony do edytora bloków WordPress Gutenberg:
W związku z powyższym oczywiste jest, że WordPress stara się wykorzystywać kod do swojej podstawowej funkcji generowania treści. Usuwa jednak stylizację z kodu, tym samym nie przedstawiając czytelnikom pożądanego wyniku.
Aby uniknąć takich okoliczności, zdecydowanie zalecamy wykorzystanie jednej z metod wymienionych poniżej w celu wyświetlenia kodu.
4 sposoby wyświetlania kodu w WordPress
Poniższe techniki są ułożone w rosnącej kolejności trudności, a my oferujemy konkretne podejścia dostosowane do osób, które czerpią satysfakcję z komponowania kodu i treści w edytorach markdown, w przeciwieństwie do korzystania z WordPress.
Metoda 1: Korzystanie z edytora bloków Gutenberga
Edytor Gutenberg zawiera wcześniej istniejący blok kodu, który ułatwia prezentację fragmentów kodu, zachowując ich formatowanie i bez wykonywania kodu.
Aby rozpocząć, przejdź do wpisu lub strony w WordPress i wybierz jeden z przycisków Dodaj blok.
Wybierz jeden z przycisków „Dodaj blok”, aby kontynuować.
W ten sposób zostanie ujawniony asortyment dostępnych bloków. Masz możliwość wyszukania bloku „Kod” lub wprowadzenia słowa kluczowego, takiego jak „kod”, w pasku wyszukiwania.
Po zlokalizowaniu bloku kodu, który można rozpoznać po ikonach nawiasów, kliknij go, aby wstawić sekcję kodu do posta.
W tej chwili obszar ze wskazówką „Utwórz kod…” powinien być dla ciebie widoczny.
Edytor WordPress Gutenberg zapewnia obsługę przecen, umożliwiając wykrywanie i wstawianie bloków kodu za pomocą ukośnika (/), po którym następuje wprowadzenie „C” lub „Kod” w edytorze. WordPress następnie wyświetli wszystkie odpowiednie bloki, ułatwiając bardziej celowy proces wstawiania.
Należy zwrócić uwagę na różnicę między blokiem kodu a blokiem niestandardowego kodu HTML. Podczas gdy niestandardowy blok HTML jest przeznaczony do włączenia niestandardowego kodu HTML do renderowania w interfejsie, blok kodu jest specjalnie zaprojektowany do dodawania nieprzetworzonego kodu do celów wyświetlania.
Obecnie jest odpowiedni moment, aby zreplikować żądany kod i wstawić go w wyznaczonym obszarze oznaczonym jako „Write Code…”
Podany kod jest teraz zawarty w wyznaczonym bloku kodu.
Korzystnym aspektem bloku kodu jest przestrzeganie formatowania spacji i tabulacji w oryginalnym fragmencie kodu. W związku z tym wyświetlany kod powinien zachować spójność wizualną ze źródłem, z którego został skopiowany.
Aby wyświetlić swój kod w poście lub stronie WordPress, zakończ procedurę, klikając przycisk „Opublikuj”. Ponadto masz możliwość uzyskania wizualnej reprezentacji jego wyglądu przed publikacją, wybierając opcję „Podgląd”.
Po kliknięciu przycisku „Opublikuj” przejdź do aktywnej wersji posta, aby sprawdzić, czy fragment kodu jest wyświetlany jako nieprzetworzony kod.
Jak zaobserwowano, blok Code charakteryzuje się prostotą, ale jego zasadniczym celem jest zachowanie formatowania podczas prezentacji kodu w postach na blogu.
Zapoznaj się z poniższym zrzutem ekranu. W tym konkretnym przykładzie oryginalny fragment kodu pozostaje niezmieniony; jest po prostu przedstawiony z przodu w szarym pudełku.
Aby zwiększyć widoczność bloku kodu, warto rozważyć modyfikację jego domyślnego wyglądu.
Aby uzyskać dostęp do dostępnych opcji stylizacji dla bloku, wybierz blok kodu i kliknij przycisk Ustawienia (ikona koła zębatego). Ta czynność otworzy zakładkę Blokuj, wyświetlając wyłącznie ustawienia Bloku dotyczące wybranego bloku, czyli w tym przypadku Bloku kodu.
Istnieje możliwość dostosowania bloku kodu do osobistych preferencji, w tym możliwość modyfikacji aspektów, takich jak kolor tekstu i tła.
Metoda 2: Korzystanie z wtyczki
Skorzystaj z preferowanej metody instalacji wtyczki, aby włączyć wtyczkę Enlighter – Customizable Syntax Highlighter do swojej witryny WordPress.
Po aktywacji wtyczka będzie w pełni funkcjonalna i umożliwi wstawianie kodu do dowolnego posta/strony za pomocą bloku Gutenberga lub przycisku Wstaw w edytorze klasycznym.
Jeśli korzystasz z edytora bloków WordPress Gutenberg, uzyskaj dostęp do posta, w którym chcesz wyświetlić kod. Wybierz jeden z przycisków Dodaj blok (oznaczony symbolem „+”), aby odsłonić asortyment dostępnych bloków.
Przejrzyj lub wprowadź słowo kluczowe odnoszące się do bloku Enlighten Sourcecode. Kontynuuj, aby kliknąć odpowiedni blok, aby włączyć go do postu.
Następnie w interfejsie Block Editor pojawia się blok Enlighter Highlighter, zawierający wyznaczony nagłówek zatytułowany „Podświetlanie ogólne” i pole wprowadzania tekstu oznaczone „Wstaw kod źródłowy…”
Wprowadź lub skopiuj i wklej żądany kod przeznaczony do wyświetlania w WordPress w wyznaczonym polu tekstowym „Wstaw kod źródłowy…”.
W swojej funkcji wyróżniania składni wtyczka zachowuje wszystkie preferencje formatowania i tabele. Po osiągnięciu satysfakcji z wyniku przejdź do wyboru przycisku „Opublikuj”.
Korzystając z tej funkcji, możesz uzyskać dostęp do interfejsu użytkownika swojego postu, aby obserwować te same treści, co osoby odwiedzające witrynę.
Wtyczka Enlighter zapewnia uproszczony domyślny motyw do wyświetlania kodu, któremu towarzyszą numery linii, które pomagają w tworzeniu struktury i procesie odwoływania się.
Jak wcześniej wspomniano, wykorzystanie wtyczki do wyświetlania kodu na platformie WordPress oferuje wyraźne korzyści w porównaniu z metodami alternatywnymi. Ilustracyjnym przykładem takiej przewagi jest funkcjonalność frontendu zapewniana przez wtyczkę składni Enlighter, w której linie kodu są dynamicznie podświetlane, gdy użytkownik przewija zawartość.
Ponadto w polu kodu znajdującym się w prawym górnym rogu znajduje się kilka przycisków, które poprawiają wrażenia użytkownika. Warto zauważyć, że jeden z tych przycisków umożliwia prezentację kodu w postaci zwykłego tekstu, pozbawionego numerów linii.
Drugi przycisk, oznaczony jako „Kopiuj do schowka”, ułatwia natychmiastowe powielanie całej zawartości w polu kodu, umożliwiając użytkownikom wygodne przesyłanie i wklejanie kodu do dowolnego programu.
Wreszcie trzeci przycisk otwiera kod w nowym oknie, prezentując go w oknie przeglądarki sformatowanym jako zwykły tekst.
Wtyczka Enlighter oferuje szereg motywów i solidnych narzędzi do dostosowywania, aby dostosować wygląd pola kodu do własnych preferencji. Jeśli wolisz nie używać domyślnego motywu, możesz wrócić do swojego postu w WordPress i wybrać aktualnie aktywny blok kodu źródłowego Enlighter.
Ta czynność spowoduje odsłonięcie paska bocznego Block w WordPress. Jeśli nie pojawi się od razu, upewnij się, że kliknąłeś przycisk Ustawienia (ikona koła zębatego) znajdujący się w prawym górnym rogu okna WordPress.
Początkową opcją dostosowywania do rozważenia jest pole Język, ponieważ instruuje wtyczkę, w jakim języku kodu ma być wyświetlany, umożliwiając odpowiednie formatowanie i funkcje podświetlania.
Istnieje duży wybór języków kodowania, które należy wziąć pod uwagę, dlatego przejrzyj listę i wybierz ten, który jest najbardziej odpowiedni.
Funkcja Speciallines podkreśla wyznaczone linie, umożliwiając użytkownikom wprowadzanie numerów linii oddzielonych przecinkami.
W związku z tym wyznaczone linie, które określiłeś, są wizualnie uwypuklone dla wszystkich osób uzyskujących dostęp do witryny.
Parametr Lineoffset umożliwia rozpoczęcie fragmentu kodu od określonego numeru wiersza, co jest korzystne w przypadku prezentacji podzbioru kodu z większego zestawu wierszy.
Najwyraźniej wprowadzając wartość „10” w polu Lineoffset, całe pole kodu rozpoczyna się od linii numer 10.
Metoda 3: Korzystanie z narzędzia Encoder
Odwiedź witrynę kodera HTML W3Docs. Na stronie znajdziesz dwa sąsiadujące ze sobą pola box. Lewy służy do wklejania kodu, a prawy wyświetla zakodowaną wersję, którą możesz skopiować i wkleić do WordPressa.
Przed przejściem dalej należy określić żądany typ zachowania kodu:
- Wybierz JavaScript Unicode, jeśli planujesz wkleić kod zawierający elementy JavaScript.
- Wybierz symbole HTML, jeśli pracujesz z HTML.
Wpisz żądany kod, który ma być wyświetlany w WordPress w wyznaczonym polu po lewej stronie. Następnie zlokalizuj i wybierz przycisk Koduj znajdujący się powyżej po prawej stronie.
Ostateczny wynik może wydawać się kłopotliwy; jest to jednak zasadniczo połączenie elementów HTML mających na celu zachowanie całości wstawionego kodu, przy jednoczesnym uniknięciu niezamierzonej aktywacji lub wyświetlenia alternatywnej treści na interfejsie użytkownika.
Kliknij przycisk „Kopiuj”.
Wróć do WordPress i uzyskaj dostęp do zamierzonego postu lub strony. Kontynuuj, aby wybrać menu Opcje (reprezentowane przez trzy pionowe kropki) znajdujące się w prawym górnym rogu. Następnie wybierz funkcję Code Editor.
Bieżący interfejs będzie przedstawiał Edytor kodu zamiast wizualnego Edytora bloków. Znajdź żądaną sekcję do wyświetlenia kodu i kontynuuj wstawianie zakodowanego kodu HTML do edytora.
W przypadku korzystania z klasycznego edytora WordPress konieczne jest przejście do zakładki Tekst, która odpowiada Edytorowi kodu w Gutenberg Block Editor.
Wybierz opcję „Aktualizuj” lub „Opublikuj”, aby sfinalizować post, a następnie przejdź do frontonu posta, aby obejrzeć jego prezentację wizualną.
Będziesz mógł obserwować niezmieniony kod, który został pierwotnie wstawiony do kodera, przed włączeniem elementów kodujących HTML. Należy zauważyć, że enkodery nie zapewniają żadnych możliwości stylizacji, co czyni to podejście idealnym do uzyskania schludnej i minimalistycznej estetyki.
Metoda 4: Korzystanie z niestandardowego krótkiego kodu
Utworzenie niestandardowego krótkiego kodu spełnia zadanie wstawiania bloków kodu wielokrotnego użytku bez konieczności ręcznego kopiowania i wklejania. Właśnie dlatego niestandardowe skróty zapewniają solidną możliwość wyświetlania kodu na platformie WordPress.
Zalety wykorzystania niestandardowych skrótów do prezentacji kodu są następujące:
- Niestandardowe skróty umożliwiają zapisywanie skomplikowanych sekcji kodu do ponownego wykorzystania w przyszłości, eliminując konieczność wielokrotnego wpisywania długich fragmentów kodu.
- Możliwe jest zdefiniowanie spersonalizowanych stylów CSS dla wyróżnień kodu i kontenerów.
- Skróty mogą być używane przez każdego użytkownika, umożliwiając innym współtwórcom bezproblemowe wykorzystanie wyróżnień i bloków kodu za pomocą jednego kliknięcia.
Tworzenie niestandardowego krótkiego kodu wymaga biegłości w modyfikowaniu plików motywu WordPress, pracy z kodem PHP i potencjalnie rozwijaniu wtyczek WordPress. W rezultacie tworzenie niestandardowego kodu skrótu dla WordPress może sprawiać trudności osobom, które nie znają PHP.
Niemniej jednak efekt końcowy oferuje znacznie prostsze podejście do wyświetlania kodu na platformie WordPress.
Można wybrać dowolną nazwę dla niestandardowego krótkiego kodu i ustanowić różne alternatywy, takie jak [html] [/html] i [css] [/css], aby dostosować się do różnych języków programowania.
Należy pamiętać, że w celu optymalnego podświetlania składni zaleca się stosowanie niestandardowych skrótów w połączeniu z edytorem tekstu (w WordPress Classic) lub niestandardowym polem HTML podczas pracy z edytorem bloków WordPress Gutenberg.
Celem jest skonstruowanie niestandardowego krótkiego kodu, który umożliwia użytkownikom wprowadzanie lub wstawianie kodu w wyznaczonych granicach znaczników otwierających i zamykających krótkiego kodu.
Celem jest opracowanie dostosowanego krótkiego kodu, który umożliwia użytkownikom wprowadzanie lub wstawianie kodu w wyznaczonych znacznikach otwierających i zamykających krótkiego kodu.
Podsumowanie
Wyświetlanie kodu w WordPressie ma kluczowe znaczenie dla dzielenia się koncepcjami programistycznymi, zapewniania dokładności, poprawy estetyki i wspierania współpracy. Pozwala programistom edukować swoich odbiorców, dostarczać konkretne dowody, poprawiać wrażenia użytkowników i zachęcać społeczność do zaangażowania. Prezentacja fragmentów kodu promuje przejrzystość, zaufanie i wiarygodne informacje. Niestandardowe skróty lub wtyczki mogą zapewnić atrakcyjne wizualnie i dobrze ustrukturyzowane wyświetlanie kodu. Udostępnianie kodu ułatwia dyskusje, opinie i innowacje. Ogólnie rzecz biorąc, skuteczne wyświetlanie kodu w WordPress jest niezbędne do rozpowszechniania wiedzy, zapewniania jakości i rozwoju społeczności programistów WordPress.
