blog

Jak edytować HTML w WordPress?

Jak edytować HTML w WordPress

CMS WordPress to system zarządzania treścią, który jest bardzo łatwy w obsłudze dla osób, które nie posiadają wiedzy programistycznej. Dzięki wtyczkom, bibliotece szablonów i rozbudowanemu edytorowi blokowemu, możesz utworzyć dowolny typ witryny, korzystając z gotowych komponentów. Wciąż jednak możesz edytować pliki źródłowe, zmieniać style CSS i edytować HTML wg. własnych potrzeb. W tej instrukcji pokażemy Ci, w jaki sposób szybko przejść do edycji HTML oraz w jaki sposób możesz edytować cały szablon i kod witryny. Dostęp do HTML w WordPress jest bardzo prosty. 

Co to jest WordPress?

CMS WordPress to najpopularniejszy system CMS, system zarządzania treścią, umożliwiający tworzenie witryn internetowych dowolnego typu. Dzięki WordPress szybko utworzysz bloga internetowego, stronę firmową, galerię zdjęć, serwis z ogłoszeniami, a także portal informacyjny i sklep internetowy. Popularność WordPress wynika również z jego prostej obsługi i nieograniczonych możliwości poszczerzenia funkcjonalności. Do obsługi CMS zalecamy wydajną usługę Hosting WordPress, dedykowaną dla WordPress.

Edytor kodu bloków w WordPress

Podczas redagowania nowych treści, wpisów lub stron WordPress, korzystasz z edytora WordPress, opartego na mechanizmie przeciągnij i upuść. Utwórz nowy wpis lub stronę, a następnie umieść na nich gotowe elementy, takie jak nagłówki, akapity, tabele, media, formularze kontaktowe, itp. 

Nie potrzebujesz przy tym pisać kodu takiego elementu od podstaw, gdyż każdy element został wcześniej zaprogramowany, a Ty jedynie wprowadzasz jego zawartość. Poza gotowymi elementami WordPress umożliwia na tym etapie nie tylko edycję każdego z elementów lub całej strony i wpisu za pomocą edytora tekstowego (edytor HTML), ale również możesz dodawać gotowe bloki shortcode i HTML, aby umieścić w nich przygotowany wcześniej kod HTML czy skrypt. 

  1. Zaloguj się do panelu WordPress.
  2. Przejdź do sekcji Strony lub Wpisy.
  3. Utwórz nowy lub edytuj istniejący element.
  4. Skorzystaj z przycisku + aby dodać nowy blok.
    W edytorze WordPress budowanie strony jest proste dzięki funkcji bloków, gotowych elementów do umieszczenia w treści strony
  5. Skorzystaj z przycisku + na górze ekranu (Przełącz wybierak bloków), aby przeglądać całą listę bloków, w tym bloków wielokrotnego użycia.
  6. Odszukaj interesujący Cię blok i umieść go, a następnie dodaj zawartość. 
  7. Na pasku opcji bloku wybierz Ustawienia > Edytuj w HTML.
    Włącz edytor kodu dla wybranego bloku, aby wprowadzić dodatkowe parametry, np. atrybuty obrazka czy edytować zawartość tabeli
  8. Po zakończeniu edycji ponownie wybierz Ustawienia > Edytuj wizualanie.
    Po zakończeniu edycji HTML wpisu, możesz powrócić do edytora wizualnego i dodawać kolejne bloki
W ten sposób możesz edytować dowolny blok i wprowadzać zmiany. 

Edytor kodu strony lub wpisu WordPress

W powyższej instrukcji znalazłeś rozwiązanie jak edytować HTML dowolnego bloku, ale możesz też włączyć edytor kodu dla całej strony lub wpisu. 

  1. Podczas edycji strony lub wpisu po prawej stronie ekranu skorzystaj z Ustawień.
  2.  Wybierz Edytor kodu
    W ustawieniach strony lub wpisu WordPress znajdziesz edytor kodu, który pozwoli Ci edytować cały dokument w jednym czasie
  3. Teraz możesz edytować kod całej strony.
  4. W ustawieniach znajdziesz również powrót do poprzedniego edytora. Wybierz Edytor wizualny

Dodawanie kodu HTML do wpisu WordPress

W powyższych instrukcjach edytujesz już dodane elementy. To przydatne rozwiązanie, kiedy chcesz wprowadzić modyfikacje kodu gotowych elementów, np. dodać niestandardowe ustawienia tabeli czy uzupełnić informacje o atrybutach linków (title). 

Edytor WordPress oferuje także możliwość dodawania własnego kodu:

  1. Przejdź do sekcji Strony lub Wpisy.
  2. Utwórz nowy lub edytuj istniejący element.
  3. Skorzystaj z przycisku + aby dodać nowy blok.
    Możesz dodać własny kod HTML lub skrypt do strony WordPress. W tym celu skorzystaj z wyszukiwarki bloków
  4. Skorzystaj z przycisku + na górze ekranu (Przełącz wybierak bloków), aby przeglądać całą listę bloków, w tym bloków wielokrotnego użycia.
    Skorzystaj z menu bloków, aby dodawać szybko bloki do treści strony lub wpisu. W tym samym miejscu znajdziesz także bloki wielokrotnego użycia
  5. Odszukaj blok Własny HTML, aby dodać kod HTML.
    Dodaj blok Własny HTML aby umieścić własny kod HTML w treści strony lub wpisu
  6. Wybierz blok Kod, aby dodać własny skrypt. 
    Możesz osadzić własny kod skryptu korzystając z bloku KOD w edytorze WordPress

Dodatkowe klasy CSS

Podczas dodawania i edycji bloków w edytorze treści, masz także możliwość  wprowadzania dodatkowych klas CSS:

  1. Dodaj lub edytuj wybrany blok, klikając w niego.
  2. Po prawej stronie ekranu przejdź do zakładki Blok, aby zmienić jego ustawienia dodatkowe.
  3. Rozwiń opcje Zaawansowane.
    Możesz edytować dowolny blok umieszczony we wpisie lub na stronie, dodając do niego, np. dodatkowe klasy CSS
  4. Umieść dodatkowe klasy CSS

To rozwiązanie umożliwia wprowadzenie zmian dla całej strony lub pojedynczych bloków, w zależności od tego, jakiego kodu CSS użyjesz.

Edytor kodu dla całej witryny WordPress

Kiedy edycja pojedynczych elementów, stron czy wpisów jest niewystarczająca, możesz przejść do edytora kodu dla całej witryny internetowej. W ten sposób możesz modyfikować szablon witryny czy wprowadzać globalne zmiany w jej strukturze i wyglądzie.

  1. Zaloguj się do panelu WordPress.
  2. Przejdź do sekcji Wygląd.
  3. Wybierz Edytor plików motywu.
    Przejdź do edytora plików motywu aby zmienić wygląd strony internetowej, dodać własny kod, skrypt, itp..
  4. Po prawej stronie ekranu wybierz motyw, który chcesz edytować.

Wybór motywu jest ważny, dlatego, że niektóre motywy dziedziczą szablony z innych motywów. Możesz w ten sposób edytować, np. style CSS jednego motywu, ale jeśli chcesz edytować strukturę witryny, powinieneś przełączyć się na macierzysty motyw.

W edytorze plików motywu, możesz zmienić zawartość dowolnego pliku zawierającego strukturę strony internetowej

Teraz po prawej stronie ekranu wybierz pliki do edycji. 

Pamiętaj, aby przed wprowadzeniem zmian, skopiować zawartość pliku, np. do notatnika, aby móc szybko przywrócić jego kopię zapasową. 

Jeśli wprowadzasz rozbudowane zmiany, zalecamy utworzenie kopii zapasowej WordPress lub uruchomienie kopii strony, celem przetestowania wdrażanych rozwiązań. 

Patryk Kozioł

Myślisz o własnym biznesie online?

Bez zobowiązań

Sprawdź także:

Powiadomienia
Powiadom o
guest
0 komentarzy
Inline Feedbacks
View all comments