Jak tworzyć własne shortcodes w WordPress?

Shortcodes w WordPress to potężne narzędzie, które pozwala na dynamiczne dodawanie funkcji do treści wpisów, stron i widgetów. Dzięki nim można łatwo wstawić skomplikowane elementy HTML, dynamiczne dane lub interaktywne komponenty bez potrzeby pisania kodu za każdym razem.

W tym poradniku pokażemy, jak krok po kroku tworzyć własne shortcodes w WordPress, jak je optymalizować i unikać najczęstszych błędów.

Czym są shortcodes w WordPress?

Shortcodes to specjalne znaczniki w nawiasach kwadratowych ([shortcode]), które są zamieniane na określoną funkcjonalność w momencie wyświetlania strony.

Przykłady zastosowania shortcodes:

✅ Wyświetlanie dynamicznych danych (np. aktualna data, liczba użytkowników).
✅ Osadzanie formularzy kontaktowych.
✅ Dodawanie elementów interaktywnych (np. galerie, przyciski, listy produktów).
✅ Wstawianie kodu PHP do wpisów bez edycji plików motywu.

Jak działają shortcodes w WordPress?

Shortcodes są rejestrowane w plikach motywu (functions.php) lub we własnej wtyczce. WordPress obsługuje je za pomocą funkcji add_shortcode(), która przypisuje nazwę shortcode do funkcji PHP.

Tworzenie własnych shortcodes krok po kroku

Tworzenie prostego shortcode

Najprostszy shortcode wyświetlający statyczny tekst:

function simple_shortcode() {
    return '<p>To jest mój własny shortcode!</p>';
}
add_shortcode('moj_shortcode', 'simple_shortcode');

💡 Jak używać? W edytorze wpisz:

[moj_shortcode]

Tworzenie shortcode z parametrami

Możesz dodać parametry do shortcode, aby dynamicznie zmieniać jego zawartość:

function dynamic_shortcode($atts) {
    $args = shortcode_atts(array('color' => 'blue'), $atts);
    return '<p style="color:' . esc_attr($args['color']) . '">Kolorowy tekst!</p>';
}
add_shortcode('kolorowy_tekst', 'dynamic_shortcode');

💡 Jak używać?

[kolorowy_tekst color="red"]

Tworzenie shortcode zawierającego treść

Shortcode może także opakować treść wpisaną między tagami:

function wrap_shortcode($atts, $content = null) {
    return '<div class="custom-box">' . do_shortcode($content) . '</div>';
}
add_shortcode('wrap', 'wrap_shortcode');

💡 Jak używać?

[wrap]To jest zawartość wewnątrz shortcode![/wrap]

Shortcodes dla dynamicznych danych

Wyświetlanie aktualnej daty

function current_date_shortcode() {
    return date('Y-m-d');
}
add_shortcode('current_date', 'current_date_shortcode');

💡 Jak używać?

[current_date]

Pobieranie tytułu wpisu

function post_title_shortcode() {
    return get_the_title();
}
add_shortcode('post_title', 'post_title_shortcode');

💡 Jak używać?

[post_title]

Rejestracja shortcodes w wtyczce

Aby dodać shortcodes do własnej wtyczki:

1. Utwórz folder my-shortcodes-plugin w wp-content/plugins/.
2. Wewnątrz stwórz plik my-shortcodes.php.
3. Wklej kod:

<?php
/*
Plugin Name: Moje Shortcodes
Description: Własne shortcodes do WordPressa.
*/

function custom_shortcode_example() {
    return '<p>Shortcode z wtyczki!</p>';
}
add_shortcode('custom_shortcode', 'custom_shortcode_example');

4. Aktywuj wtyczkę w WordPressie.

Debugowanie i testowanie shortcodes

Najczęstsze błędy i ich rozwiązania:

❌ Shortcode nie działa – sprawdź, czy został poprawnie dodany w functions.php lub we wtyczce.
❌ Brak dynamicznych danych – używaj shortcode_atts() do bezpiecznego pobierania parametrów.
❌ Problem z HTML – upewnij się, że zwracasz return zamiast echo.

Testowanie shortcodes:

• Użyj edytora blokowego WordPress i dodaj shortcode w bloku „Kod krótkowy”.
• Wstaw shortcode do widgetu w sekcji „Wygląd → Widgety”.
• Sprawdź działanie w podglądzie strony.

SEO i shortcodes – najlepsze praktyki

🔹 Unikaj generowania treści ukrytej dla wyszukiwarek – Google indeksuje tylko widoczne dane.
🔹 Używaj cache do optymalizacji wydajności – unikanie zbędnych zapytań do bazy danych.
🔹 Testuj responsywność – sprawdź, jak shortcode wygląda na urządzeniach mobilnych.

Podsumowanie

Tworzenie własnych shortcodes w WordPress to świetny sposób na dodanie interaktywnych elementów i dynamicznych treści do strony. W artykule pokazaliśmy, jak stworzyć shortcode prosty, z parametrami oraz dynamiczny.

✅ Chcesz dodać zaawansowane shortcodes? Możesz spróbować tworzenia interaktywnych przycisków, galerii lub integracji z API! 🚀