Jak edytować HTML w edytorze kodu WordPress (Beginner ’ s Guide)

szukasz łatwego sposobu edycji HTML na swojej stronie WordPress?

HyperText Markup Language lub HTML to kod, który mówi przeglądarce internetowej, jak wyświetlić zawartość na stronach internetowych. Edycja HTML jest przydatna do zaawansowanego dostosowywania i rozwiązywania problemów.

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

jak edytować HTML w edytorze kodu WordPress

jak edytować HTML w WordPress edytor kodu

dlaczego warto edytować HTML w WordPress?

WordPress oferuje tysiące motywów i wtyczek do zmiany wyglądu witryny i dostosowywania różnych elementów bez dotykania jednej linii kodu.

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

tutaj bardzo przydatna jest edycja HTML. Możesz łatwo wykonać zaawansowane dostosowywanie za pomocą kodu HTML. Zapewnia dużą elastyczność i kontrolę nad tym, jak twoja strona będzie wyglądać i funkcjonować.

ponadto nauka edycji HTML może również pomóc zidentyfikować i naprawić błędy w witrynie WordPress, gdy nie masz dostępu do Pulpitu nawigacyjnego.

Uwaga: Jeśli nie chcesz edytować HTML, ale nadal chcesz pełnych opcji dostosowywania, zalecamy użycie narzędzia do przeciągania i upuszczania WordPress page builder, takiego jak SeedProd.

mając to na uwadze, przyjrzyjmy się różnym sposobom edycji HTML w witrynie WordPress.

omówimy, jak edytować HTML za pomocą edytora bloków i edytora klasycznego, 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ć HTML w edytorze bloków WordPress
  • jak edytować HTML w WordPress Klasyczny edytor
  • jak edytować HTML w widżetach WordPress
  • jak edytować HTML w edytorze motywów WordPress
  • jak edytować HTML w WordPress za pomocą FTP
  • łatwy sposób dodawania kodu w WordPress

jak edytować HTML w edytorze bloków WordPress

w edytorze bloków WordPress istnieje wiele sposobów edycji kodu HTML Twojego postu lub strony.

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

aby rozpocząć, przejdź do pulpitu 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”.

Dodawanie niestandardowego bloku HTML w WordPress

Dodawanie niestandardowego bloku HTML w WordPress

następnie wprowadź niestandardowy kod HTML w bloku. Możesz także kliknąć opcję „Podgląd”, aby sprawdzić, czy kod HTML działa poprawnie i jak twoja zawartość będzie wyglądać na twojej stronie internetowej.

niestandardowy kod HTML w edytorze WordPress

niestandardowy kod HTML w edytorze WordPress

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 treści, a następnie kliknij menu z trzema kropkami. Następnie kliknij opcję „Edytuj jako HTML”.

kliknij trzy kropki i wybierz Edytuj jako HTML

kliknij trzy kropki i wybierz Edytuj jako HTML

zobaczysz kod HTML pojedynczego bloku. Śmiało edytuj kod HTML swojej treści. Na przykład możesz dodać link nofollow, zmienić styl tekstu lub dodać inny kod.

edytuj kod HTML pojedynczego bloku

edytuj kod HTML pojedynczego bloku

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

możesz uzyskać dostęp do edytora kodu, klikając opcję z trzema kropkami w prawym górnym rogu. Następnie wybierz „Edytor kodu”z opcji rozwijanych.

Uzyskaj dostęp do edytora kodu

dostęp do edytora kodu

jak edytować HTML w WordPress Classic Editor

jeśli używasz WordPress classic editor, możesz łatwo edytować HTML w widoku tekstowym.

aby uzyskać dostęp do widoku tekstowego, po prostu Edytuj post na blogu lub Dodaj nowy. Gdy znajdziesz się w klasycznym edytorze, kliknij kartę „Tekst”, aby zobaczyć kod HTML swojego artykułu.

kliknij tekst w klasycznym edytorze, aby edytować HTML

kliknij tekst w klasycznym edytorze, aby edytować HTML

następnie możesz edytować HTML swojej treści. Możesz na przykład pogrubić różne słowa, aby je wyróżnić, użyć stylu kursywy w tekście, utworzyć listy, dodać spis treści i nie tylko.

jak edytować HTML w widżetach WordPress

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

w WordPress Korzystanie z niestandardowego widżetu HTML może pomóc w dostosowaniu paska bocznego, stopki i innych obszarów widżetów. Możesz na przykład osadzić formularze kontaktowe, mapy Google, przyciski wezwania do działania (CTA) i inne treści.

możesz zacząć od przejścia do panelu administracyjnego WordPress, a następnie przejść do wyglądu ” widżety. Następnie dodaj Niestandardowy widżet HTML, klikając przycisk „Dodaj”.

Dodaj niestandardowy widżet HTML

Dodaj niestandardowy widżet HTML

następnie musisz wybrać miejsce, w którym chcesz dodać niestandardowy widżet HTML i wybrać pozycję. Obszar widżetu zależy od używanego motywu WordPress. Na przykład możesz dodać go do stopki, nagłówka lub innych obszarów.

Wybierz obszar i pozycję dla niestandardowego widżetu HTML

Wybierz obszar i pozycję dla niestandardowego widżetu HTML

po wybraniu obszaru i pozycji widżetu kliknij przycisk „Zapisz widżet”.

następnie możesz kliknąć Niestandardowy widżet HTML, wprowadzić kod HTML, a następnie kliknąć przycisk „Zapisz”.

wpisz własny HTML

wprowadź Niestandardowy HTML

możesz teraz odwiedzić swoją witrynę, aby zobaczyć Niestandardowy widżet HTML w akcji.

własny podgląd HTML

Niestandardowy podgląd HTML

jak edytować HTML w edytorze motywów WordPress

innym sposobem edycji kodu HTML witryny 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 złamać Twoją witrynę i zablokować dostęp do pulpitu WordPress.

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

to powiedziawszy, jeśli rozważasz edycję HTML za pomocą edytora motywów, dobrze jest wykonać kopię zapasową witryny przed dokonaniem jakichkolwiek zmian.

następnie przejdź do edytora motywów wygląd z pulpitu WordPress. Pojawi się teraz komunikat ostrzegawczy dotyczący bezpośredniej edycji plików motywów.

Ostrzeżenie edytora motywów w WordPress

Ostrzeżenie edytora motywów w WordPress

po kliknięciu przycisku „Rozumiem” zobaczysz pliki motywów i Kod. W tym miejscu możesz wybrać plik, który chcesz edytować i wprowadzić zmiany.

 edytor motywów WordPress

edytor motywów WordPress

jak edytować HTML w WordPress za pomocą FTP

inną alternatywną metodą edycji HTML w plikach motywów WordPress jest użycie FTP znanego również jako file transfer protocol service.

jest to standardowa funkcja, która jest dostarczana ze wszystkimi kontami hostingowymi WordPress.

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

aby rozpocząć, musisz najpierw wybrać oprogramowanie FTP. W tym samouczku będziemy używać Filezilli, ponieważ jest to darmowy i przyjazny dla użytkownika klient FTP dla Systemów Windows, Mac i Linux.

po wybraniu klienta FTP musisz się zalogować na serwerze FTP swojej witryny. Dane logowania można znaleźć na pulpicie Panelu sterowania dostawcy usług hostingowych.

po zalogowaniu się w kolumnie „strona zdalna” zobaczysz różne foldery i pliki swojej witryny. Śmiało i przejdź do plików motywów, przechodząc do motywu wp-content”.

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

przejdź do plików motywów w kliencie FTP

przejdź do plików motywów w kliencie FTP

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 ją prawym przyciskiem myszy.plik php.

wiele klientów FTP umożliwia przeglądanie i edytowanie plików oraz automatyczne przesyłanie ich po wprowadzeniu zmian. W Filezilli możesz to zrobić, klikając opcję „Wyświetl / edytuj”.

Pobierz i edytuj plik motywu

Pobierz i edytuj plik motywu

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

po edycji HTML możesz 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 do WordPress jest użycie Wstaw nagłówki i stopki wtyczki WordPress.

zespół WPBeginner zaprojektował tę wtyczkę, dzięki czemu możesz łatwo dodać kod do swojej witryny w ciągu kilku minut, a my zrobiliśmy to w 100% za darmo.

pomaga również uporządkować Kod, ponieważ jest przechowywany w jednym miejscu. Ponadto zapobiega błędom, które mogą być spowodowane podczas ręcznej edycji kodu.

kolejną korzyścią jest to, że nie musisz się martwić o usunięcie kodu, jeśli zdecydujesz się zaktualizować lub zmienić swój motyw.

pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Wstaw nagłówki i stopki na swojej stronie internetowej. Aby uzyskać więcej informacji, możesz skorzystać z naszego szczegółowego samouczka na temat instalacji wtyczki WordPress.

gdy wtyczka jest aktywna, możesz przejść do Ustawienia ” Wstaw nagłówki i stopki z panelu administracyjnego.

następnie możesz dodać kod HTML do swojej witryny w polach nagłówek, treść i stopka.

na przykład, załóżmy, że chcesz wyświetlić pasek alertów na swojej stronie internetowej. Możesz po prostu wprowadzić kod HTML w polu „Skrypty w treści”i kliknąć przycisk Zapisz.

 Dodawanie kodu HTML za pomocą wtyczki Wstaw nagłówki i stopki

Dodawanie kodu HTML za pomocą Wstaw nagłówki i stopki wtyczki

poza tym możesz dodać kod śledzenia Google Analytics i piksel Facebooka w nagłówku lub dodać przycisk Pinteresta w stopce witryny za pomocą wtyczki.

aby uzyskać więcej informacji, możesz zobaczyć nasz przewodnik na temat dodawania kodu nagłówka i stopki w WordPress.

mamy nadzieję, że ten artykuł pomógł Ci nauczyć się edytować kod 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ć WordPress dla swojej witryny.

jeśli podoba Ci się ten artykuł, Subskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.

Leave a Reply

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.