Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak edytować HTML w edytorze kodu WordPress (przewodnik dla początkujących)

Szukasz łatwego sposobu na edycję HTML na twojej witrynie internetowej WordPress?

HyperText Markup Language lub HTML to kod, który mówi przeglądarce internetowej, jak wyświetlać treść na twoich stronach internetowych. Edycja HTML przydaje się do zaawansowanego konfiguratora i rozwiązywania problemów.

W tym artykule pokażemy, jak edytować HTML w edytorze kodu WordPress przy użyciu różnych metod.

How to Edit HTML in WordPress code editor

Dlaczego warto edytować HTML w WordPress?

WordPress oferuje tysiące motywów i wtyczek, które pozwalają zmienić wygląd twojej witryny internetowej i dostosować różne elementy bez dotykania ani jednej linijki kodu.

Wtyczki i motywy mają jednak swoje ograniczenia i mogą nie oferować dokładnie tych funkcji, których szukasz. W rezultacie możesz nie być w stanie wystylizować swojej witryny internetowej tak, jak chcesz.

W tym miejscu edycja HTML jest naprawdę przydatna. Możesz łatwo wykonywać zaawansowane konfiguratory za pomocą kodu HTML. Zapewnia to dużą elastyczność i kontrolę nad wyglądem i działaniem twojej witryny.

Ponadto, nauka edycji HTML może również pomóc w identyfikacji i poprawie błędów na twojej witrynie internetowej WordPress, gdy nie masz dostępu do kokpitu.

Uwaga: Jeśli nie chcesz edytować kodu HTML, ale nadal chcesz mieć pełne opcje konfiguratora, zalecamy skorzystanie z kreatora stron WordPress typu „przeciągnij i upuść”, takiego jak SeedProd.

Biorąc to pod uwagę, przyjrzyjmy się różnym sposobom edycji HTML w witrynie internetowej WordPress.

Omówimy, jak edytować HTML za pomocą edytora bloków i klasycznego edytora, a także pokażemy łatwy sposób dodawania kodu do twojej witryny. Możesz kliknąć poniższe odnośniki, aby przejść do twojej preferowanej sekcji.

Jak edytować kod HTML w edytorze bloków WordPress

W edytorze bloków WordPress istnieje wiele sposobów edycji kodu HTML twojego wpisu lub strony.

Po pierwsze, możesz użyć niestandardowego bloku HTML w twojej treści, aby dodać kod HTML.

Aby rozpocząć, przejdź do kokpitu WordPress, a następnie utwórz nowy wpis/stronę lub edytuj istniejący artykuł. Następnie kliknij znak plus (+) w lewym górnym rogu i dodaj blok „Własny HTML”.

Adding custom HTML block in WordPress

Następnie wpisz swój własny kod HTML w bloku. Możesz również kliknąć opcję „Podgląd”, aby sprawdzić, czy kod HTML działa poprawnie i jak twoja treść będzie wyglądać na żywo w witrynie internetowej.

Custom HTML code in WordPress Editor

Innym sposobem na dodanie lub zmianę kodu HTML w edytorze bloków WordPress jest edycja kodu HTML określonego bloku.

Aby to zrobić, po prostu wybierz istniejący blok w twojej treści, a następnie kliknij menu z trzema kropkami. Następnie kliknij opcję „Edytuj jako HTML”.

Click the three dots and select edit as HTML

Zobaczysz teraz kod HTML pojedynczego bloku. Śmiało edytuj kod HTML twojej treści. Możesz na przykład dodać odnośnik nofollow, zmienić styl twojego tekstu lub dodać inny kod.

Edit the HTML of an individual block

Jeśli chcesz edytować HTML całego twojego wpisu, możesz użyć „Edytora kodu” w edytorze bloków WordPress.

Dostęp do edytora kodu można uzyskać, klikając opcję z trzema kropkami w prawym górnym rogu. Następnie wybierz „Edytor kodu” z rozwijanej listy.

Access the Code Editor

Jak edytować HTML w klasycznym edytorze WordPress

Jeśli korzystasz z klasycznego edytora WordPress, możesz łatwo edytować HTML w widoku Tekst.

Aby uzyskać dostęp do widoku tekstowego, wystarczy edytować wpis na blogu lub utworzyć nowy. Gdy jesteś w klasycznym edytorze, kliknij kartę „Tekst”, aby zobaczyć HTML twojego artykułu.

Click on Text in the Classic Editor to edit HTML

Następnie możesz edytować HTML twojej treści. Możesz na przykład pogrubić różne słowa, aby je wyróżnić, użyć stylu kursywy w treści, utworzyć listy, dodać spis treści i wiele więcej.

Jak edytować HTML w widżetach WordPress

Czy wiesz, że możesz dodawać i edytować kod HTML w obszarze widżetów twojej witryny?

W WordPressie użycie niestandardowego widżetu HTML może pomóc dostosować twój panel boczny, stopkę i inne obszary widżetów. Można na przykład osadzać formularze kontaktowe, przyciski wezwania do działania (CTA), Mapy Google i inne treści.

Możesz zacząć od przejścia do twojego panelu administracyjnego WordPress, a następnie przejść do Wygląd ” Widżety. Następnie kliknij ikonkę „Plus” w dowolnym obszarze widżetu, do którego chcesz dodać kod HTML.

Dostępne obszary widżetów zależą od używanego motywu WordPress. Na przykład, możesz dodać go do twojej stopki, nagłówka lub innych obszarów.

Click the Plus icon to add a widget

Następnie wyszukaj widżet Custom HMTL w menu bloku widżetów i kliknij go, aby automatycznie dodać go do obszaru widżetów.

Add custom HTML widget in WordPress

Następnie możesz kliknąć swój własny widżet HTML i wpisz kod HTML. Po zakończeniu nie zapomnij kliknąć przycisku „Aktualizuj” w prawym górnym rogu ekranu.

Add custom HTML code in widget block

Możesz teraz przejść na swoją witrynę internetową, aby zobaczyć własny widżet HTML w działaniu.

Custom HTML Preview

Jak edytować HTML w edytorze motywów WordPress

Innym sposobem edycji kodu HTML twojej witryny internetowej jest Edytor motywów WordPress (Edytor kodu).

Nie zalecamy jednak bezpośredniej edycji kodu w edytorze motywu. Najmniejszy błąd podczas wpisz kod może zepsuć twoją witrynę internetową i zablokować ci dostęp do kokpitu WordPress.

Ponadto, jeśli zaktualizujesz swój motyw, wszystkie zmiany zostaną utracone.

Jeśli jednak rozważasz edycję kodu HTML za pomocą edytora motywów, dobrym pomysłem jest wykonanie kopii zapasowej twojej witryny internetowej przed wprowadzeniem jakichkolwiek zmian.

Następnie przejdź do Wygląd ” Edytor motywów z twojego kokpitu WordPress. Zobaczysz teraz komunikat ostrzegawczy dotyczący bezpośredniej edycji plików motywu.

Theme editor warning in WordPress

Po kliknięciu przycisku „Rozumiem” zobaczysz pliki i kod twojego motywu. Z tego miejsca możesz wybrać plik, który chcesz edytować i wprowadzić twoje zmiany.

WordPress Theme Editor

Jak edytować HTML w WordPress przy użyciu FTP

Inną alternatywną metodą edycji HTML w plikach motywu WordPress jest użycie FTP, znanego również jako usługa protokołu przesyłania plików.

Jest to standardowa funkcja dostępna na wszystkich kontach hostingowych WordPress.

Zaletą korzystania z FTP zamiast edytora kodu jest to, że można łatwo poprawić problemy za pomocą klienta FTP. W ten sposób nie zostaniesz zablokowany w kokpicie twojego WordPressa, jeśli coś się zepsuje podczas edycji HTML.

Aby rozpocząć, należy najpierw wybrać oprogramowanie FTP. W tym poradniku będziemy używać FileZilla, ponieważ jest to darmowy i przyjazny dla użytkownika klient FTP dla systemów Windows, Mac i Linux.

Po wybraniu klienta FTP należy teraz logować się do serwera FTP twojej witryny. Dane logowania można znaleźć w kokpicie panelu sterowania dostawcy hostingu.

Po zalogowaniu się zobaczysz różne katalogi i pliki twojej witryny internetowej w kolumnie „Zdalna witryna”. Przejdź do plików twojego motywu, przechodząc do wp-content ” theme.

Zobaczysz teraz różne motywy na twojej witrynie internetowej. Wybierz motyw, który chcesz edytować.

Navigate to your theme files in FTP client

Następnie możesz kliknąć prawym przyciskiem myszy plik motywu, aby edytować kod HTML. Na przykład, jeśli chcesz wprowadzić zmiany w stopce, kliknij prawym przyciskiem myszy plik footer.php.

Wiele klientów FTP umożliwia zobaczenie i edycję pliku oraz automatyczne przesłanie go po wprowadzeniu zmian. W FileZilla można to zrobić, klikając opcję „Zobacz/Edytuj”.

Download and edit your theme file

Sugerujemy jednak pobranie pliku, który chcesz edytować, na twój pulpit przed wprowadzeniem jakichkolwiek zmian.

Po edycji kodu HTML można zastąpić oryginalny plik. Aby uzyskać więcej informacji, zalecamy skorzystanie z naszego przewodnika na temat korzystania z FTP do przesyłania plików w WordPress.

Łatwy sposób na dodanie kodu w WordPress

Najprostszym sposobem na dodanie kodu w WordPressie jest użycie WPCode, najlepszej wtyczki do fragmentów kodu na rynku.

WPCode Pro version

Zespół WPBeginner zaprojektował tę wtyczkę tak, aby nawet zupełnie początkujący mogli dodać własny kod do swojej witryny w ciągu kilku minut. Ponadto dostępna jest wersja lite wtyczki, która jest w 100% darmowa.

Pomaga uporządkować twój kod, ponieważ jest przechowywany w jednym miejscu. Ponadto zapobiega błędom, które mogą powstać podczas ręcznej edycji kodu.

Kolejną korzyścią jest to, że nie musisz się martwić o to, że twój kod zostanie usunięty, jeśli zdecydujesz się na aktualizację lub zmianę motywu.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie darmowej wtyczki WPCode na twojej witrynie internetowej. Aby uzyskać więcej informacji, możesz skorzystać z naszego szczegółowego poradnika na temat instalacji wtyczki WordPress.

Po włączeniu wtyczki możesz przejść do sekcji Fragmenty kodu ” Nagłówek i stopka w twoim panelu administracyjnym.

Następnie możesz dodać kod HTML do twojej witryny internetowej w polach nagłówka, treści i stopki.

Na przykład, powiedzmy, że chcesz wyświetlić pasek powiadomień na twojej witrynie internetowej. Możesz po prostu wpisz kod HTML w polu „Body” i kliknij przycisk „Save Changes”.

Adding the HTML code using the WPCode plugin

Oprócz tego można dodać kod śledzenia Google Analytics, piksel Facebooka i piksel reklamowy TikTok w nagłówku. Możesz też dodać przycisk Pinterest w stopce twojej witryny internetowej za pomocą wtyczki.

Dzięki WPCode łatwo jest również zdecydować, gdzie kod jest wyświetlany. Na przykład, można automatycznie wyświetlać kod HTML na początku lub na końcu każdego wpisu.

Więcej szczegółów można znaleźć w naszym przewodniku na temat dodawania kodu nagłówka i stopki w WordPress.

Mamy nadzieję, że ten artykuł pomógł ci nauczyć się edytować HTML w edytorze kodu WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tego, ile naprawdę kosztuje zbudowanie witryny WordPress lub zobaczyć najważniejsze powody, dla których powinieneś używać WordPressa dla twojej witryny internetowej.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

3 komentarzeZostaw odpowiedź

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mrteesurez

    Is there any way to run an HTML/CSS/JS in a WordPress page, like running an entire HTML file that contains CSS and JS. Is there any plugin you can suggest me ?

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.