Aby wkleić kod HTML na stronę WordPress, należy skorzystać z odpowiednich narzędzi dostępnych w edytorze treści. WordPress umożliwia wstawianie własnego kodu HTML zarówno w edytorze blokowym (Gutenberg), jak i w edytorze klasycznym. Poniżej znajdziesz szczegółowy poradnik wraz z praktycznymi przykładami zastosowań.
Jak dodać kod HTML w WordPressie?
Wstawianie kodu HTML w edytorze blokowym (Gutenberg)
WordPress od wersji 5.0 domyślnie korzysta z edytora blokowego o nazwie Gutenberg. Dodanie własnego kodu HTML jest bardzo proste:
- Zaloguj się do panelu administracyjnego WordPress,
- przejdź do zakładki Strony lub Wpisy i utwórz nową treść albo edytuj istniejącą,
- kliknij przycisk + znajdujący się w lewym górnym rogu lub między blokami,
- wyszukaj i wybierz blok Własny HTML,
- w wyświetlonym polu wklej lub wpisz swój kod HTML,
- możesz sprawdzić, jak kod zostanie wyświetlony na stronie, klikając opcję Podgląd.
Przykład zastosowania:
<!-- Wstawianie przycisku -->
<button onclick="alert('Dziękujemy za kliknięcie!')">Kliknij mnie</button>
Taki kod pozwala na wyświetlenie własnego przycisku z prostą akcją JavaScript.
Wklejanie kodu HTML w edytorze klasycznym
Jeżeli korzystasz z klasycznego edytora WordPress lub używasz wtyczki „Klasyczny edytor”, dostosowanie kodu HTML wygląda nieco inaczej:
- Otwórz wpis lub stronę w edytorze klasycznym,
- przełącz się na zakładkę Tekst (alternatywnie: „HTML”), która umożliwia edycję surowego kodu HTML,
- wklej swój kod HTML dokładnie w tym miejscu, w którym chcesz, aby się pojawił w treści.
Przykład:
<!-- Osadzenie filmu z YouTube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/ID_FILMU" frameborder="0" allowfullscreen></iframe>
Wstawianie HTML za pomocą widgetów i edytora motywu
Kod HTML można wprowadzić także w innych miejscach WordPressa:
- Widgety HTML – przejdź do „Wygląd” → „Widgety” i dodaj widget „Własny HTML” w wybranej sekcji (np. w stopce lub pasku bocznym);
- Edytor motywu – zaawansowani użytkownicy mogą edytować pliki motywu (np. header.php, footer.php) i bezpośrednio modyfikować strukturę strony. Należy jednak zachować ostrożność i wcześniej wykonać kopię zapasową.
Przykłady praktycznych zastosowań
- Dodanie formularza zapisu na newsletter – wklejając kod formularza od dostawcy (np. Mailchimp) możesz zdobyć subskrybentów:
html ¨K9K; - Wstawienie niestandardowego przycisku wezwania do akcji (CTA) –
html <a href="https://twojastrona.pl/kontakt" class="cta-btn">Skontaktuj się z nami!</a> ¨K10K; - Dodanie znacznika Google Analytics – kod śledzenia wklej w sekcji
<head>motywu (np. przez ustawienia motywu lub za pomocą wtyczki).
Dobre praktyki
- Korzystaj z podglądu po wprowadzeniu kodu – upewnij się, że efekt na stronie jest zgodny z zamierzeniem;
- Nie wklejaj złośliwego lub nieznanego kodu – możesz narazić witrynę na zagrożenia bezpieczeństwa;
- W przypadku rozbudowanych zmian rozważ użycie dziecka-motywu (child theme), aby nie stracić modyfikacji po aktualizacji motywu.
Dzięki powyższym metodom możesz szybko i bezpiecznie umieścić dowolny kod HTML na swojej stronie WordPress, rozbudowując jej funkcjonalność według indywidualnych potrzeb.
