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

Szukasz większej kontroli nad wyglądem i funkcjonalnością swojej witryny WordPress? Nauka edycji kodu HTML jest odpowiedzią.

HTML (HyperText Markup Language) to kod, który strukturyzuje Twoje treści, mówiąc przeglądarkom internetowym, jak wyświetlać Twoje strony. Bezpośrednia edycja jest przydatna do zaawansowanej personalizacji, dodawania specyficznych funkcjonalności i rozwiązywania problemów.

Często słyszymy od użytkowników WPBeginner, którzy obawiają się dotykania kodu, ale edycja HTML w WordPressie jest łatwiejsza niż myślisz.

W tym artykule pokażemy Ci, jak edytować HTML w edytorze kodu WordPress, używając kilku różnych metod.

Dlaczego warto edytować kod HTML w WordPress?

WordPress oferuje tysiące motywów i wtyczek, które zmieniają wygląd Twojej strony internetowej i pozwalają dostosować różne elementy bez dotykania ani jednej linii kodu.

Jednak wtyczki i motywy mają swoje ograniczenia i mogą nie oferować dokładnie takich funkcji, jakich szukasz. W rezultacie możesz nie być w stanie stylizować swojej witryny tak, jak chcesz, aby wyglądała.

Tutaj edycja HTML jest naprawdę przydatna. Możesz łatwo wykonać zaawansowane dostosowania za pomocą kodu HTML. Zapewnia to dużą elastyczność i kontrolę nad wyglądem i działaniem Twojej witryny.

Ponadto nauka edycji kodu HTML może również pomóc w identyfikacji i naprawie błędów na Twojej stronie WordPress, gdy nie masz dostępu do panelu administracyjnego.

Mając to na uwadze, przyjrzyjmy się różnym sposobom edycji kodu HTML na stronie internetowej WordPress.

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

• Jak edytować kod HTML w edytorze bloków WordPress
• Jak edytować kod HTML w klasycznym edytorze WordPress
• Jak edytować HTML w widżetach WordPress
• Jak edytować kod HTML w edytorze motywów WordPress
• Jak edytować kod HTML w WordPressie za pomocą FTP
• Łatwy sposób na dodanie kodu w WordPressie

Jak edytować kod HTML w edytorze bloków WordPress

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

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

Na początek przejdź do swojego panelu administracyjnego WordPress, a następnie dodaj nowy post/stronę lub edytuj istniejący artykuł. Następnie kliknij znak plus (+) w lewym górnym rogu i dodaj blok „Niestandardowy HTML”.

Następnie przejdź dalej i wprowadź swój niestandardowy 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 Twojej stronie na żywo.

Innym sposobem dodawania lub zmieniania kodu HTML w edytorze bloków WordPress jest edycja kodu HTML konkretnego bloku.

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

Zobaczysz teraz kod HTML poszczególnych bloków. Edytuj kod HTML swojej treści.

Na przykład możesz dodać link nofollow, zmienić styl tekstu lub dodać inny kod.

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

Dostęp do edytora kodu można uzyskać, klikając opcję trzech kropek w prawym górnym rogu. Następnie wybierz „Edytor kodu” z rozwijanych opcji.

Jak edytować kod HTML w klasycznym edytorze WordPress

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

Aby uzyskać dostęp do widoku Tekst, po prostu edytuj wpis na blogu lub dodaj nowy. Gdy jesteś w klasycznym edytorze, kliknij zakładkę „Tekst”, aby zobaczyć kod HTML swojego artykułu.

Następnie możesz edytować kod HTML swojej treści. Na przykład, możesz pogrubić różne słowa, aby je wyróżnić, użyć kursywy w tekście, tworzyć 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 swojej strony?

W WordPressie użycie widżetu Niestandardowy HTML może pomóc w dostosowaniu paska bocznego, stopki i innych obszarów widżetów. Na przykład, możesz osadzić formularze kontaktowe, przyciski wezwania do działania (CTA), Mapy Google i inne treści.

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

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

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

Następnie możesz kliknąć na swój widżet Niestandardowy HTML i wprowadzić kod HTML.

Po zakończeniu nie zapomnij kliknąć przycisku „Zaktualizuj” w prawym górnym rogu ekranu.

Teraz możesz odwiedzić swoją stronę internetową, aby zobaczyć widżet Niestandardowy HTML w akcji.

Jak edytować kod HTML w edytorze motywów WordPress

Innym sposobem edycji kodu HTML Twojej strony internetowej jest Edytor motywów WordPress (Edytor kodu).

Jednak nie zalecamy bezpośredniej edycji kodu w Edytorze Motywów. Najmniejszy błąd podczas wprowadzania kodu może zepsuć Twoją stronę internetową i uniemożliwić Ci dostęp do panelu administracyjnego WordPress.

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

Niemniej jednak, jeśli rozważasz edycję HTML za pomocą edytora motywu, dobrym pomysłem jest wykonanie kopii zapasowej swojej witryny przed wprowadzeniem jakichkolwiek zmian.

Następnie przejdź do Wygląd » Edytor motywu z panelu WordPress. Zobaczysz teraz komunikat ostrzegawczy o bezpośredniej edycji plików motywu.

Po kliknięciu przycisku „Rozumiem”, zobaczysz pliki i kod swojego motywu.

Stąd możesz wybrać plik, który chcesz edytować i wprowadzić zmiany.

Jak edytować kod HTML w WordPressie za pomocą FTP

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

Jest to standardowa funkcja, która jest dostępna ze wszystkimi kontami hostingu WordPress.

Zaletą korzystania z FTP zamiast edytora kodu jest to, że możesz łatwo naprawić problemy za pomocą klienta FTP. W ten sposób nie zostaniesz zablokowany z panelu administracyjnego WordPress, jeśli coś się zepsuje podczas edycji HTML.

Na początek musisz wybrać oprogramowanie FTP. W tym samouczku użyjemy FileZilla, ponieważ jest to darmowy i przyjazny dla użytkownika klient FTP dla systemów Windows, Mac i Linux.

Po wybraniu klienta FTP będziesz musiał zalogować się na serwer FTP swojej witryny. Szczegóły logowania znajdziesz w panelu sterowania swojego dostawcy hostingu.

Po zalogowaniu zobaczysz różne foldery i pliki swojej witryny w kolumnie „Witryna zdalna”. Przejdź do plików swojego motywu, wybierając wp-content » theme.

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

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

Wiele klientów FTP pozwala na przeglądanie i edytowanie plików oraz automatyczne ich przesyłanie po wprowadzeniu zmian. W FileZilla możesz to zrobić, klikając opcję „Wyświetl/Edytuj”.

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

Po edycji kodu HTML możesz zastąpić oryginalny plik. Aby uzyskać więcej szczegółów, zalecamy zapoznanie się z naszym przewodnikiem na temat jak używać FTP do przesyłania plików w WordPress.

Łatwy sposób na dodanie kodu w WordPressie

Najprostszym sposobem dodawania kodu w WordPress jest użycie WPCode, najlepszej wtyczki fragmentów kodu na rynku.

Zespół WPBeginner zaprojektował ten wtyczkę tak, aby nawet początkujący mogli w kilka minut dodać niestandardowy kod do swojej witryny. Ponadto istnieje wersja lite wtyczki, która jest w 100% darmowa.

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

Inną zaletą jest to, że nie musisz się martwić, że Twój kod zostanie usunięty, jeśli zdecydujesz się zaktualizować lub zmienić swój motyw.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie darmowej wtyczki WPCode na swojej stronie internetowej. Aby uzyskać więcej szczegółów, możesz skorzystać z naszego szczegółowego poradnika na temat jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki przejdź do sekcji Code Snippets » Header & Footer z panelu administratora.

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

Na przykład, powiedzmy, że chcesz wyświetlić pasek powiadomień na swojej stronie internetowej. Możesz po prostu wprowadzić kod HTML w polu „Treść” i kliknąć przycisk „Zapisz zmiany”.

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

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

Więcej szczegółów znajdziesz w naszym przewodniku na temat dodawania kodu nagłówka i stopki w WordPressie.

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 jak dodać formularze HTML w WordPress, lub poznać najważniejsze powody, dla których warto używać WordPressa dla swojej strony internetowej.

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.