Aby zmienić lub dodać kod HTML w WordPressie, istnieje kilka metod – od prostych modyfikacji treści, przez zaawansowane zmiany w motywach, aż po własne widgety i krótkie kody. Poniżej znajdziesz szczegółowy poradnik z przykładami zastosowań do każdej z tych metod.
1. Edytowanie HTML w edytorze bloków WordPress (Gutenberg)
Najprostszą metodą zmiany kodu HTML pojedynczych wpisów lub stron jest wykorzystanie edytora blokowego.
Jak to zrobić –
- Zaloguj się do panelu WordPress,
- przejdź do sekcji „Strony” lub „Wpisy”,
- utwórz nową lub edytuj istniejącą stronę/wpis,
- kliknij ikonę „+”, aby dodać blok,
- wyszukaj i wybierz blok Własny HTML,
- wprowadź swój kod HTML w polu edytora,
- skorzystaj z opcji Podgląd, by sprawdzić rezultat.
Przykład zastosowania –
Dodanie własnego kodu embed (np. YouTube):
<iframe width="560" height="315" src="https://www.youtube.com/embed/ID_FILMU" frameborder="0" allowfullscreen></iframe>
2. Edytowanie kodu HTML istniejących bloków
Możesz modyfikować kod źródłowy poszczególnych bloków tekstu, akapitów lub nagłówków.
Jak to zrobić –
- Kliknij wybrany blok,
- następnie kliknij trzy kropki (opcje) w prawym górnym rogu bloku,
- wybierz opcję Edytuj w HTML,
- zmień kod według potrzeb.
Przykład zastosowania –
Dodanie niestandardowego atrybutu do linku:
<a href="https://twojastrona.pl" title="Odwiedź naszą stronę">Kliknij tutaj</a>
3. Edytor kodu całej strony lub wpisu
Możliwe jest także przełączenie się w tryb pełnego edytora kodu dla całej treści wpisu lub strony.
Jak to zrobić –
- W edycji strony lub wpisu kliknij trzy kropki w prawym górnym rogu edytora,
- wybierz Edytor kodu,
- edytuj kod HTML dla całej zawartości.
Przykład zastosowania –
Wstawienie niestandardowej struktury tabeli:
<table>
<tr> <th>Nagłówek 1</th> <th>Nagłówek 2</th> </tr>
<tr> <td>Komórka 1</td> <td>Komórka 2</td> </tr>
</table>
4. Dodawanie kodu HTML przez widgety i shortcodes
Jeśli chcesz umieścić fragmenty HTML np. w stopce, pasku bocznym lub innych niestandardowych miejscach, skorzystaj z widgetów.
Jak to zrobić –
- Przejdź do sekcji „Wygląd” → „Widgety”,
- dodaj widget HTML własny do wybranego obszaru (np. sidebar, footer),
- wstaw dowolny kod HTML.
Przykład zastosowania –
Dodanie banera promocyjnego do paska bocznego:
<div class="banner">
<a href="/promocja">
<img src="/wp-content/uploads/2024/08/banner.jpg" alt="Zobacz promocję">
</a>
</div>
5. Zmiany w kodzie motywu (zaawansowane)
Zaawansowani użytkownicy mogą wprowadzać zmiany bezpośrednio w plikach motywu (np. header.php, footer.php). Należy to robić ostrożnie i zawsze wykonać kopię zapasową przed edycją.
Jak to zrobić –
- Przejdź do sekcji „Wygląd” → „Edytor plików motywu”,
- wybierz plik, który chcesz zmodyfikować (np. header.php),
- wprowadź zmiany w kodzie,
- zapisz plik i sprawdź efekty.
Ważne –
- Po aktualizacji motywu wprowadzone zmiany zostaną utracone; zaleca się korzystanie z motywu potomnego;
- możliwa jest awaria strony przy błędach w kodzie.
Przykład zastosowania –
Dodanie własnego kodu śledzenia (np. Google Analytics) do sekcji <head>:
<!-- Wklej poniżej zamknięcia <head> -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXX');
</script>
6. Wtyczki do zarządzania kodem HTML
Istnieją dedykowane wtyczki umożliwiające bezpieczne i wygodne zarządzanie fragmentami HTML, JS i CSS, np. do dodawania kodów śledzących lub elementów globalnych.
Zastosowania –
- wstawianie kodów reklamowych,
- dodanie meta tagów do sekcji
<head>, - zarządzanie niestandardowym kodem JavaScript i CSS.
Rekomendacje i bezpieczeństwo
- Najbezpieczniej wykonywać edycje za pomocą gotowych bloków lub widgetów,
- zawsze wykonuj kopię zapasową strony przed bezpośrednią edycją plików motywu,
- skorzystaj z motywu potomnego (child theme) w przypadku prac w kodzie motywu,
- testuj wszelkie wprowadzone zmiany na środowisku testowym.
Za pomocą tych metod można efektywnie zarządzać i modyfikować kodem HTML w WordPressie, dostosowując stronę do indywidualnych potrzeb, od prostych dodatków po zaawansowane personalizacje.
