WordPress jest jednym z najpopularniejszych systemów zarządzania treścią (CMS), a jego elastyczność sprawia, że można łatwo dostosować stronę do własnych potrzeb. Jednym z najczęstszych wymagań jest dodanie własnego kodu HTML. W tym artykule omówimy różne sposoby, jak to zrobić w WordPressie.

Spis treści

Używanie edytora blokowego (Gutenberg)

Od wersji 5.0 WordPress domyślnie korzysta z edytora blokowego zwanego Gutenberg, który umożliwia dodawanie kodu HTML bezpośrednio na stronach i wpisach.

Jak dodać blok HTML w edytorze Gutenberg?

Przejdź do strony lub wpisu, który chcesz edytować.
Kliknij ikonę “+” (dodaj blok) i wyszukaj blok o nazwie “HTML”.
Wybierz blok “Niestandardowy HTML”.
Wpisz lub wklej swój kod HTML w polu edycji.

To rozwiązanie jest idealne, jeśli chcesz dodać prosty kod HTML, taki jak przyciski, iframe, formularze lub inne elementy.

Podgląd kodu HTML

Po dodaniu kodu HTML możesz sprawdzić, jak wygląda na stronie, klikając przycisk “Podgląd”. Dzięki temu możesz upewnić się, że wszystko działa zgodnie z oczekiwaniami.

Dodawanie kodu HTML za pomocą widżetów

Widżety to kolejny sposób na dodanie własnego kodu HTML do WordPressa. Widżety pozwalają na umieszczanie treści w różnych miejscach na stronie, takich jak sidebar czy stopka.

Jak dodać widżet HTML?

Przejdź do Wygląd > Widżety w panelu administracyjnym WordPress.
Kliknij przycisk Dodaj widżet i wybierz “Niestandardowy HTML”.
Wpisz lub wklej swój kod HTML w polu widżetu.
Kliknij Zapisz, aby zastosować zmiany.

Widżety HTML są świetnym rozwiązaniem, jeśli chcesz dodać np. formularze kontaktowe, przyciski CTA lub inne niestandardowe elementy na pasku bocznym lub w stopce.

Dodawanie kodu HTML w edytorze klasycznym

Jeśli używasz starszej wersji WordPressa lub preferujesz edytor klasyczny, również możesz dodać kod HTML bezpośrednio w treści strony lub wpisu.

Jak to zrobić?

Otwórz stronę lub wpis w edytorze klasycznym.
Przełącz się na zakładkę “Tekst” (obok zakładki “Wizualny”).
Wklej swój kod HTML w edytorze tekstowym.
Zapisz lub opublikuj zmiany.

Edytor klasyczny to proste narzędzie, które pozwala na pełną kontrolę nad kodem HTML, ale wymaga podstawowej znajomości HTML.

Dodawanie kodu HTML bezpośrednio do plików motywu

Jeśli potrzebujesz bardziej zaawansowanej kontroli nad dodawaniem kodu HTML, możesz edytować bezpośrednio pliki motywu WordPress. UWAGA: Edytowanie plików motywu może być ryzykowne, zwłaszcza jeśli nie masz doświadczenia w programowaniu. Zaleca się tworzenie kopii zapasowej przed wprowadzeniem jakichkolwiek zmian.

Jak edytować pliki motywu?

Przejdź do Wygląd > Edytor plików motywu w panelu administracyjnym WordPress.
Wybierz plik, który chcesz edytować, np. header.php, footer.php lub single.php.
Wstaw swój kod HTML w odpowiednim miejscu.
Zapisz zmiany.

Alternatywa: motyw potomny

Aby uniknąć nadpisania zmian przy aktualizacji motywu, warto korzystać z motywu potomnego. Tworzenie motywu potomnego pozwala na modyfikację wyglądu strony bez ryzyka utraty zmian przy aktualizacjach.

Używanie wtyczek do dodawania kodu HTML

Jeśli chcesz regularnie dodawać niestandardowy kod HTML, warto skorzystać z dedykowanych wtyczek. Oto kilka popularnych opcji:

Najlepsze wtyczki do dodawania kodu HTML

Insert Headers and Footers – pozwala na dodawanie kodu HTML do sekcji <head> lub przed zamknięciem <body>.
Custom HTML Block – umożliwia dodanie bloku HTML w edytorze Gutenberg.
WPCode – Insert Headers and Footers + Custom Code Snippets – wszechstronna wtyczka pozwalająca na dodanie kodów HTML, JavaScript, CSS, itp.

Jak używać wtyczki Insert Headers and Footers?

Zainstaluj i aktywuj wtyczkę.
Przejdź do Ustawienia > Insert Headers and Footers.
Wklej kod HTML w odpowiednie pole (np. “Scripts in Header” lub “Scripts in Footer”).
Zapisz zmiany.

Wtyczki są świetnym rozwiązaniem dla osób, które chcą dodawać niestandardowy kod na całej stronie bez konieczności modyfikowania plików motywu.

Dodawanie kodu HTML za pomocą shortcode

WordPress umożliwia także tworzenie shortcode, które można wykorzystać do dodania kodu HTML w różnych miejscach strony.

Jak utworzyć shortcode z własnym kodem HTML?

Otwórz plik functions.php swojego motywu lub motywu potomnego.
Dodaj poniższy kod:
```
function custom_html_shortcode() {
    return '
```
Twój kod HTML tutaj
‘; } add_shortcode(‘custom_html’, ‘custom_html_shortcode’);
Zapisz zmiany

Teraz możesz dodać shortcode [custom_html] w dowolnym miejscu wpisu lub strony, aby wyświetlić kod HTML.

Podsumowanie

Dodanie własnego kodu HTML do strony opartej na WordPress może być realizowane na wiele sposobów. Wybór metody zależy od Twoich potrzeb i poziomu zaawansowania:

Edytor blokowy i widżety są idealne dla początkujących użytkowników.
Edytor klasyczny i shortcode dają więcej kontroli nad kodem.
Edycja plików motywu i wtyczki to rozwiązania dla bardziej zaawansowanych użytkowników, którzy chcą dodawać kod na całej stronie.

Dzięki tym metodom możesz łatwo dostosować swoją stronę WordPress i dodać unikalne elementy, które przyciągną odwiedzających.

Jak dodać własny kod HTML do strony opartej na WordPress?