Skip to content

Wszystko o WordPressie, tworzeniu stron — i nie tylko

📝 Jak dodać własny kod na stronę WordPress

📝 Jak dodać własny kod na stronę WordPress

Strona na WordPress działa, ale chciałoby się czegoś więcej: usunąć datę z konkretnego bloku, zmienić czcionkę w nagłówkach, dodać mikrodane, których nie ma w szablonie. Brzmi znajomo? Każdy właściciel strony na WP prędzej czy później napotyka ograniczenia szablonu i wtyczek. Oto pięć bezpiecznych sposobów na dodanie własnego kodu: od instalacji wtyczki w minutę po napisanie własnej miniwtyczki.

W sieci jest mnóstwo gotowych fragmentów kodu PHP i CSS do każdego zadania. Problemem nie jest znalezienie kodu, problemem jest to, gdzie go wstawić, aby nie uszkodzić strony podczas najbliższej aktualizacji szablonu. Zebraliśmy wszystkie działające metody w jednym miejscu: z konkretnymi miejscami wykonania, ostrzeżeniami i przykładami.

💡 Szybki przegląd:

  • Zainstaluj WPCode lub Code Snippets, to najbezpieczniejszy sposób dla początkujących: kod nie ginie przy zmianie szablonu, każdy fragment można włączyć lub wyłączyć osobno.
  • Jeśli edytujesz CSS, zacznij od Customizera (Wygląd → Dostosuj → Dodatkowy CSS), jest to wbudowane w WordPress i nie wymaga wtyczek.
  • Do edycji functions.php i szablonów utwórz szablon potomny: zachowa to Twoje zmiany podczas aktualizacji szablonu nadrzędnego.
  • Gdy fragmentów kodu jest dużo lub zmieniają one logikę strony globalnie, przekształć je we własną wtyczkę.

Sposób 1: Wtyczki do wstawiania fragmentów kodu

Interfejs wtyczki Code Snippets dla WordPressa

Najbezpieczniejszy sposób dla nowicjusza, specjalna wtyczka do zarządzania fragmentami kodu. Wstawiasz PHP, CSS lub JavaScript w panelu administracyjnym przez zwykłe pole tekstowe, a wtyczka wykonuje kod tam, gdzie trzeba. W przypadku błędu w kodzie taka wtyczka przechwytuje błąd krytyczny i automatycznie wyłącza fragment, strona nie pada, nie tracisz dostępu do panelu administracyjnego.

Dwóch głównych kandydatów w 2026 roku:

WPCode (dawniej Insert Headers and Footers), najpopularniejszy, ponad 2 miliony aktywnych instalacji i ocena 4,9 na WordPress.org. Darmowa wersja potrafi wstawiać kod w header, footer, przed treścią i po treści. Wersja Pro dodaje logikę warunkową (wyświetlanie fragmentu tylko na określonych stronach), generator fragmentów na podstawie opisu i bibliotekę gotowych przepisów.

Code Snippets, ponad 700 000 instalacji, ocena 4,8. Całkowicie darmowy, z edytorem graficznym i podświetlaniem składni. Fragmenty są przechowywane w bazie danych i nie zależą od szablonu. Można wyeksportować zestaw fragmentów do JSON i przenieść na inną stronę.

Obie wtyczki działają na tej samej zasadzie: tworzysz nowy fragment, wybierasz typ kodu (PHP / CSS / JS), wklejasz kod i klikasz „Aktywuj". Jeśli fragment wywoła błąd krytyczny, WordPress automatycznie dezaktywuje go przy następnym żądaniu, biały ekran śmierci Ci nie grozi.

Przed wstawieniem jakiegokolwiek kodu wykonaj pełną kopię zapasową. W praktyce darmowa wersja WPCode pokrywa większość typowych zadań: dodatkowe piksele analityczne, mikrodane, ukrywanie elementów przez CSS.

Sposób 2: Wbudowany edytor CSS WordPressa

Edytowanie kodu CSS w WordPress Customizer

Sprawdź, czy szablon nie nadpisuje Twoich stylów: otwórz stronę w trybie incognito po dodaniu CSS.

Jeśli zadanie jest czysto kosmetyczne (kolor przycisku, odstęp w widżecie, rozmiar czcionki w stopce), wtyczka nie jest potrzebna. WordPress od wersji 4.7 zawiera wbudowany edytor Additional CSS bezpośrednio w Customizerze:

  • Wygląd → Dostosuj → Dodatkowy CSS.
  • Wklej regułę CSS w lewym panelu.
  • Po prawej stronie podgląd na żywo: widzisz zmiany przed publikacją.

Ta metoda jest dobra, ponieważ CSS jest przechowywany w bazie danych razem z ustawieniami szablonu, aktualizacja szablonu go nie usuwa. Minusem jest to, że edytor jest podstawowy, bez podświetlania składni i sprawdzania błędów. Na kilkanaście linijek CSS jest idealny, na setkę weź wtyczkę taką jak Simple Custom CSS and JS (ponad 200 000 instalacji), która daje edytor z podświetlaniem i pozwala podłączyć CSS jako plik zewnętrzny dla lepszego cache'owania.

Ważny niuans: CSS kaskaduje z góry na dół, reguła napisana później nadpisuje wcześniejszą. Dlatego CSS z Additional CSS lub wtyczki zawsze przebija style szablonu. Jeśli Twoja reguła nie zadziałała, dodaj !important lub doprecyzuj selektor do bardziej szczegółowego.

Sposób 3: Szablon potomny do edycji PHP i szablonów

Przykład struktury plików motywu potomnego WordPress

Motyw potomny dziedziczy wszystko po motywie nadrzędnym, ale pozwala nadpisać dowolny plik szablonu lub funkcję. To klasyczny sposób wprowadzania zmian w logice witryny bez obawy o ich utratę podczas aktualizacji.

Kiedy motyw potomny jest potrzebny:

  • Zmienia Pan/Pani znaczniki stron (header.php, single.php, footer.php).
  • Dodaje Pan/Pani kod do functions.php motywu nadrzędnego, bezpośrednio nie wolno tego robić, bo aktualizacja nadpisuje plik.
  • Nadpisuje Pan/Pani szablony WooCommerce pod swój sklep.

Tworzenie, 5 minut:

Proszę utworzyć folder w /wp-content/themes/, na przykład twentytwentyfive-child. W środku dwa pliki:

1/*
2 Theme Name: Twenty Twenty-Five Child
3 Template: twentytwentyfive
4*/
5@import url("../twentytwentyfive/style.css");

Plik functions.php:

1<?php
2add_action('wp_enqueue_scripts', function () {
3 wp_enqueue_style(
4 'child-style',
5 get_stylesheet_directory_uri() . '/style.css',
6 ['parent-style'],
7 wp_get_theme()->get('Version')
8 );
9});

Proszę zarchiwizować folder do ZIP, wgrać przez Appearance → Themes → Add New i aktywować. Więcej szczegółów w naszym przewodniku po motywach potomnych WordPress.

Jedyna wada motywu potomnego: trzeba poznać strukturę motywu nadrzędnego, żeby nie zepsuć zależności. Jeśli edytuje Pan/Pani tylko CSS i dodaje kilka hooków PHP, wtyczka ze snippetami ze sposobu 1 wystarczy, motyw potomny nie jest potrzebny.

Sposób 4: Własna wtyczka na stały kod

Jeśli snippetów uzbierało się ponad dziesięć i część z nich jest krytyczna dla działania witryny (niestandardowe typy wpisów, nadpisywanie endpointów REST API, własna taksonomia), proszę zebrać je we własną wtyczkę. Nie wyłączy się przy zmianie motywu i nie zginie podczas aktualizacji.

Minimalna wtyczka, jeden plik PHP:

Proszę utworzyć folder my-site-core w /wp-content/plugins/. W środku my-site-core.php:

1<?php
2/**
3 * Plugin Name: My Site Core
4 * Description: Пользовательский код сайта: CPT, хуки, шорткоды
5 * Version: 1.0.0
6 * Requires at least: 6.0
7 * Requires PHP: 8.0
8 */

Cały niestandardowy kod PHP proszę pisać poniżej tego nagłówka. Wtyczka pojawi się na liście Plugins, można ją aktywować i dezaktywować jak zwykłą.

Dla kodu, który musi działać zawsze (na przykład rejestracja niestandardowego typu wpisów, krytycznego dla treści), proszę używać wtyczek must-use. Proszę utworzyć folder /wp-content/mu-plugins/ i umieścić tam plik PHP. Wtyczki MU są uruchamiane automatycznie i nie mają przełącznika w panelu administracyjnym, nie można ich przypadkowo wyłączyć.

Proszę zwrócić uwagę: jeśli po prostu wrzuci Pan/Pani pliki PHP do mu-plugins bez loadera, WordPress nie wykryje ich z podfolderów. Proszę albo umieścić plik w katalogu głównym mu-plugins, albo dodać loader, jednowierszowy plik PHP, który dołącza pliki z podfolderów przez require_once.

Sposób 5: Wyświetlanie kodu we wpisie, bez wykonywania

Przykład wyświetlania kodu HTML w edytorze WordPress

Osobne zadanie: nie dodać kodu do witryny, a pokazać go czytelnikom w artykule. WordPress domyślnie wykonuje HTML i PHP wstawione w edytorze wizualnym, co może zepsuć układ wpisu. Rozwiązanie zależy od tego, jakiego edytora Pan/Pani używa:

Gutenberg (edytor blokowy): proszę używać bloku Code lub Custom HTML. Blok Code pokazuje kod czcionką o stałej szerokości w ramce, nie wykonując go. Do podświetlania składni PHP i CSS proszę zainstalować wtyczkę Syntax-highlighting Code Block, koloruje ona kod wewnątrz bloku Code według języka.

Classic Editor: w zakładce wizualnej wstawienie kodu jako zwykłego tekstu działa do wyświetlania (ale nie daje formatowania czcionką o stałej szerokości). W zakładce HTML kod jest interpretowany jako rzeczywisty, WordPress wykona znaczniki i zepsuje stronę. Aby tego uniknąć, proszę zastąpić aktywne znaki encjami HTML:

Znak

Zamiennik

<

<

>

>

"

"

&

&amp;

Dla pojedynczego taga ręczna zamiana działa. Dla bloku 20 wierszy proszę użyć enkodera online lub wtyczki. Pełna lista encji znakowych znajduje się w podręczniku WordPress.

⁉️🤔 Często zadawane pytania

Czy można wstawić kod PHP bezpośrednio do wpisu WordPress?

Nie, WordPress nie wykonuje PHP wewnątrz treści wpisu ze względów bezpieczeństwa. Jeśli potrzebują Państwo wykonać PHP na konkretnej stronie, proszę użyć shortcode’a zarejestrowanego w functions.php motywu potomnego lub we wtyczce snippetów. Alternatywą są wtyczki takie jak Insert PHP Code Snippet, które pozwalają utworzyć snippet i wstawić go za pomocą shortcode’a do dowolnego wpisu.

Co jest bezpieczniejsze dla początkującego: wtyczka snippetów czy motyw potomny?

Wtyczka WPCode lub Code Snippets. Izoluje ona każdy fragment kodu: błąd w jednym snippecie nie wpływa na pozostałe, a błąd krytyczny WordPress przechwytuje i automatycznie dezaktywuje problematyczny snippet. Motyw potomny nie daje takiego mechanizmu, literówka w functions.php kładzie całą witrynę. Ponadto wtyczka nie jest powiązana z motywem: zmienili Państwo motyw, kod pozostał.

Jak przetestować kod przed uruchomieniem na działającej witrynie?

Proszę utworzyć kopię stagingową witryny. Większość hostingów (SiteGround, Cloudways, Kinsta) oferuje przycisk „Create Staging" w panelu sterowania. Lokalnie można wdrożyć kopię przez Local lub XAMPP. Przetestowali Państwo na kopii, przenieśli na witrynę produkcyjną. Do szybkich poprawek CSS wystarczy otworzyć DevTools w Chrome (F12), znaleźć element i zastosować styl bezpośrednio w przeglądarce, jest to tymczasowe i widoczne tylko dla Państwa.

Czy koniecznie trzeba tworzyć motyw potomny, jeśli poprawiam tylko CSS?

Nie. Proszę zacząć od wbudowanego Additional CSS w Customizerze (Appearance → Customize). Wystarcza on do większości poprawek wizualnych, nie jest usuwany podczas aktualizacji motywu i nie wymaga ani wtyczki, ani motywu potomnego. Motyw potomny jest potrzebny, gdy nadpisują Państwo pliki szablonów PHP (header.php, single.php, funkcje motywu).

Który sposób wybrać dla krytycznego kodu, którego nie można stracić?

Wtyczkę must-use (/wp-content/mu-plugins/). Kod we wtyczkach MU jest wykonywany zawsze, nie można go wyłączyć z panelu administracyjnego i przetrwa on zmianę motywu oraz aktualizacje zwykłych wtyczek. Nadaje się do rejestracji niestandardowych typów wpisów (CPT), taksonomii i krytycznych nadpisań REST API. Nie nadaje się do poprawek kosmetycznych, do nich wystarczy Additional CSS lub wtyczka snippetów.

Co wybrać do swojego zadania

Jeśli potrzebują Państwo raz poprawić kolor przycisku, proszę otworzyć Appearance → Customize → Additional CSS, wstawić regułę i zapomnieć. Jeśli zbierają Państwo kolekcję przydatnych snippetów PHP dla witryny, proszę zainstalować WPCode: jest darmowy, bezpieczny i nie zależy od motywu. Jeśli poprawiają Państwo szablony stron lub podłączają swoje skrypty przez wp_enqueue_scripts, proszę utworzyć motyw potomny. A gdy snippetów robi się więcej niż kilkanaście i połowa z nich jest krytyczna dla działania witryny, proszę zebrać je we własną wtyczkę.

Proszę zacząć od małego: otworzyć Customizer i dodać pierwszą regułę CSS już teraz. Proszę napisać w komentarzach, którą metodę Państwo stosują i który snippet okazał się najbardziej przydatny na Państwa witrynie.