WordPress shortcode – jak tworzyć własne?

Szukasz prostego sposobu na wygodne dodawanie galerii, formularzy czy przycisków do swoich wpisów WordPress? Własny shortcode rozwiązuje ten problem szybciej, niż myślisz. Z tego tekstu dowiesz się, jak działają shortcody i jak samodzielnie tworzyć je w swoim motywie lub wtyczce.

Co to jest shortcode w WordPress?

Shortcode w WordPress to krótki fragment kodu w nawiasach kwadratowych, który wywołuje określoną funkcję PHP. Został wprowadzony w wersji WordPress 2.5, aby użytkownicy mogli dodawać dynamiczne elementy do treści bez znajomości programowania. W praktyce zamiast wklejać złożony kod HTML lub PHP, wpisujesz coś w stylu albo [contact-form-7 id=”123″], a WordPress podmienia to na gotowy moduł.

Taki skrót może pochodzić z motywu, wtyczki albo z Twojego własnego kodu dopisanego w pliku functions.php. Shortcode odwołuje się zawsze do zarejestrowanej funkcji PHP. Ta funkcja generuje finalną treść widoczną w poście, na stronie lub w widżecie. Dzięki temu możesz w jednym miejscu zdefiniować logikę (np. wyświetlanie formularza czy tabeli) i w wielu miejscach wstawiać ją zwykłym napisem w nawiasach kwadratowych.

Shortcode pozwala wykonać kod PHP wewnątrz wpisu lub widżetu WordPress, bez ręcznego edytowania szablonów czy plików motywu.

Jak używać shortcode w treści wpisu i na stronie?

Podstawowy sposób korzystania z shortcode jest bardzo prosty. W treści wpisu lub strony wprowadzasz fragment w postaci [nazwa_shortcode], a WordPress podczas generowania strony wyszukuje powiązany kod i w tym miejscu umieszcza wygenerowany wynik. Może to być formularz kontaktowy, slider, tabela cennika lub dowolny inny element HTML.

W nowym edytorze blokowym Gutenberg dodawanie shortcodu jest jeszcze wygodniejsze. Wystarczy, że w miejscu, w którym chcesz wyświetlić dynamiczny element, dodasz blok o nazwie „Shortcode”. W treści bloku wpisujesz skrót, np. [contact-form-7 id=”456″ title=”Formularz kontaktowy”], zapisujesz i publikujesz treść. Po stronie użytkownika w tym miejscu pojawi się już gotowy formularz, bez widocznej postaci samego shortcode.

Jak dodać shortcode w edytorze blokowym?

Jeśli korzystasz z Gutenberga, proces wygląda powtarzalnie i nie wymaga żadnych zmian w plikach szablonu. Wszystko odbywa się z poziomu panelu administratora. Dobrze sprawdza się to szczególnie wtedy, gdy często edytujesz treści i nie chcesz wracać do plików motywu.

Krok po kroku można to ująć w następujący sposób:

• zaloguj się do panelu wp-admin,
• przejdź do sekcji „Wpisy” lub „Strony” i utwórz nową treść albo edytuj istniejącą,
• w miejscu, w którym ma pojawić się dynamiczny element, dodaj blok „Shortcode”,
• wpisz w tym bloku np. lub kod z wtyczki, np. [contact-form-7 id=”123″],
• zapisz szkic lub kliknij „Opublikuj”, aby treść była widoczna na stronie.

Shortcody możesz wklejać zarówno w trybie wizualnym, jak i tekstowym edytora. W obu przypadkach rezultat na froncie strony będzie taki sam. Kod zostanie rozpoznany i przetworzony dokładnie w tym miejscu, w którym go umieścisz.

Jak umieścić shortcode w widżecie?

Shortcody działają nie tylko wewnątrz wpisów i stron. Możesz je także wykorzystywać w obszarach widgetów, np. w sidebarze, stopce czy pasku nad nagłówkiem. Dzięki temu formularz, galerię lub inny moduł dodasz także poza główną częścią treści.

Aby wstawić shortcode w widżecie, wystarczy skorzystać z widżetu tekstowego lub dedykowanego widżetu „HTML”. Proces wygląda podobnie jak w przypadku wpisu, tyle że pracujesz w zakładce „Wygląd” zamiast w edytorze treści.

• zaloguj się do panelu i przejdź do sekcji „Wygląd” → „Widgety”,
• wybierz obszar widgetów, w którym ma pojawić się dany element,
• dodaj nowy widżet „Tekst” lub „HTML”,
• w treści widżetu wpisz po prostu shortcode, np. [nazwa_shortcode],
• kliknij „Zapisz” i sprawdź widoczną stronę.

W wielu motywach wszystkie shortcode są obsługiwane w widżetach domyślnie. Jeśli z jakiegoś powodu tak się nie dzieje, możesz włączyć obsługę, dodając w pliku functions.php filtr allow_shortcode w treści widgetów. Dla większości popularnych motywów nie jest to jednak konieczne.

Jak działają shortcody od strony kodu?

Za każdym shortcode stoi funkcja PHP zarejestrowana w WordPress. Podstawę stanowi funkcja add_shortcode(), która przypisuje tekstową nazwę shortcode do konkretnej funkcji wykonującej logikę. Gdy WordPress podczas generowania treści napotka fragment w nawiasach kwadratowych, wywołuje tę funkcję, przekazując jej atrybuty i zawartość.

Najprostszy shortcode może przyjmować atrybuty, np. [galeria id=”12″ columns=”3″]. Funkcja PHP odbiera te wartości jako tablicę i na ich podstawie buduje wynikowy HTML. Dzięki temu możesz jednym skrótem tworzyć różne warianty tego samego modułu, zmieniając jedynie parametry wpisywane w treści.

Jak zarejestrować własny shortcode?

Aby stworzyć własny shortcode, trzeba dodać fragment kodu w pliku functions.php aktywnego motywu albo w dedykowanej wtyczce. Najczęściej stosuje się ten drugi wariant, żeby nie stracić funkcji po zmianie motywu. Sama rejestracja sprowadza się do wywołania funkcji add_shortcode z dwoma parametrami: nazwą skrótu i nazwą funkcji.

Typowy przykład minimalnego kodu wygląda tak: definiujesz funkcję generującą treść (np. my_gallery_shortcode), a następnie wywołujesz add_shortcode(’my_gallery’, 'my_gallery_shortcode’). Od tego momentu wpisanie w treści [my_gallery] wyświetli wynik wygenerowany przez Twoją funkcję. Tak zbudowane rozwiązanie można później rozwijać, dodając parametry i warunki.

Jak przekazywać atrybuty do shortcode?

Większość przydatnych shortcode przyjmuje parametry. Dzięki temu jeden skrót może tworzyć różne elementy w zależności od potrzeb. Możesz sterować np. liczbą kolumn w galerii, identyfikatorem formularza lub typem danych pobieranych z bazy. Atrybuty przekazywane są jako tekst wewnątrz samego shortcode.

W definicji funkcji po stronie PHP masz dostęp do tablicy atrybutów. Często stosuje się funkcję shortcode_atts(), aby zestawić wartości domyślne z tymi, które wprowadził użytkownik. Dzięki temu jeśli autor wpisu poda tylko część parametrów, reszta zostanie uzupełniona automatycznie i shortcode nie spowoduje błędu.

Jak tworzyć shortcode na przykładzie Contact Form 7?

Dobrym przykładem praktycznego zastosowania jest wtyczka Contact Form 7. Wtyczka ta generuje krótkie kody, które odpowiadają poszczególnym formularzom kontaktowym. Zamiast kopiować długi kod HTML, otrzymujesz prosty wklejany skrót. Dzięki temu konfigurujesz formularz raz w panelu wtyczki, a potem swobodnie wstawiasz go w dowolne miejsce na stronie.

Po aktywacji Contact Form 7 w panelu pojawia się sekcja „Formularze”. W niej możesz tworzyć dowolną liczbę formularzy, dostosowując pola, przyciski i wiadomości e‑mail. Każdy zapisany formularz otrzymuje własny shortcode, zawierający identyfikator i często tytuł. Tę wartość kopiujesz do schowka, aby wkleić ją później do wpisu.

Jak w praktyce dodać formularz za pomocą shortcode?

Cały proces sprowadza się do kilku prostych czynności, a wszystkie operacje wykonujesz w panelu administracyjnym WordPress. W efekcie nie dotykasz bezpośrednio żadnego pliku PHP, a końcowy użytkownik widzi na stronie jedynie elegancki formularz kontaktowy. Skrót staje się tu Twoim łącznikiem między konfiguracją a publikowaną treścią.

Przykładowa kolejność działań wygląda następująco:

1. zaloguj się do WordPress i otwórz sekcję „Formularze” w Contact Form 7,
2. utwórz nowy formularz kontaktowy, zapisując jego ustawienia,
3. skopiuj wygenerowany kod shortcode przypisany do tego formularza,
4. przejdź do edycji strony „Kontakt” lub wybranego wpisu,
5. dodaj blok „Shortcode” i wklej kod z Contact Form 7,
6. opublikuj treść, po czym sprawdź stronę od strony użytkownika.

Po zapisaniu zmian we wskazanym miejscu pojawi się już gotowy formularz. Edycji treści komunikatów, pól czy stylów dokonujesz w opcjach wtyczki, a shortcode pozostaje ten sam. To bardzo wygodne, gdy chcesz aktualizować formularze bez dotykania każdej podstrony z osobna.

Jak bezpiecznie prezentować shortcody w artykułach?

Jeśli opisujesz w swoim blogu wtyczki WordPress albo tworzysz dokumentację, możesz chcieć pokazać czytelnikowi dokładny zapis shortcode. Problem pojawia się wtedy, gdy na Twojej stronie zainstalowana jest opisywana wtyczka. Wtedy WordPress rozpozna zapis w nawiasach kwadratowych i spróbuje go wykonać zamiast wyświetlić jako tekst.

Rozwiązaniem jest użycie kodu, który „ucieka” od przetwarzania shortcodu. Jednym z podejść jest wstawienie treści shortcode wewnątrz specjalnego shortcodu, który wyświetla tekst w nawiasach bez wykonywania go, np. [shortcode]gallery[/shortcode]. Plugin odpowiedzialny za ten skrót zamienia go na widoczny ciąg , działając jak bezpieczna ramka dla przykładowego kodu.

Wyświetlanie shortcode jako tekstu wymaga ich „zabezpieczenia”, tak aby WordPress nie odczytał ich jako działający kod.

Dlaczego nie warto używać encji HTML ani znaków zerowej szerokości?

Teoretycznie można zablokować przetwarzanie shortcode, zastępując nawiasy kwadratowe encjami HTML, np. [ i ]. Po stronie przeglądarki pokażą się one jako normalne nawiasy, ale WordPress nie rozpozna ich jako skrótu. Ten sposób ma jednak poważny minus. Gdy przełączysz się między edytorem wizualnym i tekstowym, encje często zamienią się z powrotem w zwykłe znaki i shortcode znów zadziała zamiast pozostać tekstem.

Można też wstawić tzw. zero‑width space przed nawiasem lub po nim, dzięki czemu shortcody nie zostaną przetworzone. Tyle że taki znak jest niewidoczny. Czytelnik, który skopiuje przykład z Twojego artykułu, wklei razem z niewidocznym znakiem, a shortcode po stronie jego strony nie zadziała. Będzie to bardzo trudne do zdiagnozowania, bo w edytorze niczego podejrzanego nie widać. Dlatego znacznie bezpieczniej jest użyć wtyczki lub własnego shortcodu, który literalnie wyświetla treść w nawiasach.

Jak tworzyć własne shortcody krok po kroku?

Przy tworzeniu własnego shortcodu warto zacząć od prostego celu. Może to być wyświetlenie stałego fragmentu HTML, np. ramki z informacją o wysyłce, albo pobranie i wyrenderowanie dynamicznych danych, takich jak lista ostatnich wpisów. Im dokładniej określisz, co shortcode ma robić, tym łatwiej napiszesz przejrzystą funkcję PHP i dobierzesz jej parametry.

Następnie zdecyduj, gdzie umieścisz kod. Jeśli tworzysz coś na potrzeby jednego motywu, możesz dopisać fragment w pliku functions.php. Gdy jednak planujesz używać shortcodów także po zmianie motywu albo na kilku stronach, lepsza będzie mała własna wtyczka. W obu przypadkach schemat jest podobny: definiujesz funkcję generującą treść, rejestrujesz ją przez add_shortcode i testujesz w prostym wpisie.

Jak testować i stylować własne shortcody?

Po dodaniu kodu warto sprawdzić, jak shortcode zachowuje się w różnych kontekstach. Przetestuj go w długim wpisie, na stronie statycznej oraz w widżecie. Zobacz, czy poprawnie reaguje na różne kombinacje atrybutów. Jeśli shortcode ma zwracać HTML, upewnij się, że nie generuje zagnieżdżonych tagów, które mogą rozjechać układ strony albo zaburzyć inne elementy.

Większość shortcodów opakowuje wynik wewnątrz własnych znaczników, np. div lub span z klasą CSS. Gdy shortcode jest wyświetlany na froncie, często znajduje się w <span> z klasą „shortcode” lub innym kontenerze. Możesz go wtedy łatwo namierzyć w pliku CSS motywu potomnego i dopasować wygląd. Pozwala to nadać spójny styl wszystkim blokom tworzonym przez Twój skrót, bez ingerencji w jego kod PHP.