WordPress shortcodes – jak używać skrótów w wordpress

W świecie tworzenia stron internetowych na platformie WordPress, shortcodes (skróty) są niczym magiczne zaklęcia – kilka prostych znaków zamkniętych w nawiasach kwadratowych może wywoływać złożone funkcje i elementy, które w innym przypadku wymagałyby znajomości kodu. Ta potężna funkcjonalność pozwala nawet początkującym użytkownikom na wzbogacenie swoich stron o zaawansowane elementy bez zagłębiania się w HTML, CSS czy PHP.

Shortcodes stanowią pomost między prostotą a funkcjonalnością, umożliwiając dodawanie dynamicznych elementów do treści przy minimalnym wysiłku. Niezależnie od tego, czy chcesz wstawić galerię zdjęć, formularz kontaktowy, przycisk, czy niestandardowy układ kolumn – shortcodes są odpowiedzią na Twoje potrzeby.

Czym dokładnie są shortcodes w WordPress?

Shortcodes to specjalne znaczniki, które można umieścić w treści strony lub wpisu, aby wywołać określone funkcje lub elementy. Wyglądają one jak tekst w nawiasach kwadratowych, na przykład lub [contact-form]. Kiedy WordPress przetwarza treść, zamienia te krótkie polecenia na bardziej złożone struktury HTML, skrypty lub inne elementy.

WordPress domyślnie zawiera kilka wbudowanych shortcodes, ale prawdziwa magia zaczyna się, gdy poznamy możliwość tworzenia własnych shortcodes lub korzystania z tych oferowanych przez wtyczki.

„Shortcodes to najpotężniejsza broń w arsenale nieposiadającego wiedzy technicznej twórcy stron WordPress.” – Matt Mullenweg, współzałożyciel WordPress

Wbudowane shortcodes w WordPress

WordPress oferuje kilka gotowych shortcodes, które możemy wykorzystać od razu po instalacji. Oto najważniejsze z nich:

Ten shortcode umożliwia wyświetlenie galerii obrazów dołączonych do wpisu. Możesz go użyć w najprostszej formie:

Lub dostosować jego zachowanie za pomocą parametrów:

Powyższy przykład wyświetli galerię z trzema kolumnami, obrazami w średnim rozmiarze, które po kliknięciu otworzą pełne wersje plików. Galeria będzie zawierać tylko obrazy o identyfikatorach 123, 124 i 125.

Służy do dodawania podpisów do obrazów:

[caption id="attachment_123" align="aligncenter" width="300"]<img src="sciezka/do/obrazka.jpg" width="300" height="200" /> To jest podpis obrazka

i

Pozwalają na osadzanie plików multimedialnych:

</h3>
<p>Umożliwia osadzanie treści z zewnętrznych serwisów, takich jak YouTube, Vimeo czy Twitter:</p>
<pre><code>https://www.youtube.com/watch?v=dQw4w9WgXcQ

Co ciekawe, WordPress automatycznie konwertuje wklejone adresy URL (każdy w nowej linii) na osadzone treści, więc często nie trzeba nawet używać tego shortcode.

Shortcodes z popularnych wtyczek

Większość wtyczek WordPress wprowadza własne shortcodes, które rozszerzają funkcjonalność strony. Oto kilka przykładów:

Contact Form 7

[contact-form-7 id="123" title="Formularz kontaktowy"]

WooCommerce

[products limit="4" columns="4" orderby="popularity"]

Elementor

[elementor-template id="123"]

Shortcodes Ultimate

Ta popularna wtyczka oferuje ponad 50 gotowych shortcodes do wykorzystania:

[su_button color="#4285F4" size="5" style="soft"]Kliknij mnie![/su_button]

Jak używać shortcodes w różnych miejscach WordPress?

Shortcodes można umieszczać w różnych częściach WordPress:

W treści wpisów i stron

To najprostszy sposób – po prostu wpisz shortcode w edytorze treści:

Oto nasza galeria zdjęć:

W widgetach

Aby używać shortcodes w widgetach, możesz użyć widgetu „Tekst” czy „HTML niestandardowy” i wstawić tam swój shortcode.

W szablonach

Aby użyć shortcode bezpośrednio w plikach szablonu, musisz użyć funkcji PHP do_shortcode():

<?php echo do_shortcode(''); ?>

W blokach Gutenberg

W edytorze blokowym można użyć bloku „Shortcode” lub w przypadku zaawansowanych bloków użyć shortcode’u w bloku HTML.

Tworzenie własnych shortcodes

Jedną z najbardziej fascynujących funkcji WordPress jest możliwość tworzenia własnych shortcodes. Oto prosty przykład, jak stworzyć shortcode wyświetlający aktualny rok:

function rok_shortcode() {
    return date('Y');
}
add_shortcode('rok', 'rok_shortcode');

Powyższy kod należy dodać do pliku functions.php motywu lub do własnej wtyczki. Po jego implementacji, możesz użyć shortcode’u [rok] w treści, a WordPress zamieni go na aktualny rok.

A oto bardziej zaawansowany przykład shortcode’u z parametrami:

function przycisk_shortcode($atts) {
    $params = shortcode_atts(array(
        'url' => '#',
        'tekst' => 'Kliknij tutaj',
        'kolor' => 'blue',
        'rozmiar' => 'medium'
    ), $atts);

    return '<a href="' . esc_url($params['url']) . '" class="button ' . esc_attr($params['kolor']) . ' ' . esc_attr($params['rozmiar']) . '">' . esc_html($params['tekst']) . '</a>';
}
add_shortcode('przycisk', 'przycisk_shortcode');

Teraz możesz używać shortcode’u [przycisk] z różnymi parametrami:

[przycisk url="https://example.com" tekst="Odwiedź stronę" kolor="red" rozmiar="large"]

Zagnieżdżone shortcodes

WordPress obsługuje również zagnieżdżone shortcodes, co oznacza, że jeden shortcode może zawierać inne shortcodes. Jest to szczególnie przydatne przy tworzeniu złożonych układów:

[kolumny]
    [kolumna szerokość="1/2"]
        Treść pierwszej kolumny
        [przycisk url="https://example.com"]
    [/kolumna]
    [kolumna szerokość="1/2"]
        Treść drugiej kolumny
        
    [/kolumna]
[/kolumny]

Aby obsłużyć takie zagnieżdżone shortcodes, trzeba odpowiednio zaprojektować ich implementację:

function kolumny_shortcode($atts, $content = null) {
    return '<div class="kolumny-kontener">' . do_shortcode($content) . '</div>';
}
add_shortcode('kolumny', 'kolumny_shortcode');

function kolumna_shortcode($atts, $content = null) {
    $params = shortcode_atts(array(
        'szerokość' => '1/1'
    ), $atts);

    return '<div class="kolumna kolumna-' . esc_attr(str_replace('/', '-', $params['szerokość'])) . '">' . do_shortcode($content) . '</div>';
}
add_shortcode('kolumna', 'kolumna_shortcode');

Najlepsze praktyki używania shortcodes

Aby efektywnie korzystać z shortcodes w WordPress, warto przestrzegać kilku zasad:

1. Dokumentacja – Prowadź dokumentację swoich shortcodes, szczególnie jeśli tworzysz je dla klientów lub jako część wtyczki.

2. Bezpieczeństwo – Zawsze sanityzuj i waliduj dane wejściowe i wyjściowe, używając funkcji takich jak esc_html(), esc_url() czy wp_kses().

3. Wydajność – Unikaj tworzenia shortcodes, które wykonują ciężkie operacje bazodanowe bez cachowania.

4. Kompatybilność – Upewnij się, że Twoje shortcodes działają z edytorem blokowym Gutenberg.

5. Stylizacja – Pamiętaj o dodaniu odpowiednich styli CSS dla elementów generowanych przez shortcodes.

Rozwiązywanie problemów z shortcodes

Czasami shortcodes mogą nie działać zgodnie z oczekiwaniami. Oto najczęstsze problemy i ich rozwiązania:

Shortcode wyświetla się jako tekst zamiast być przetworzony

Upewnij się, że:

• Shortcode jest prawidłowo napisany (bez literówek)
• Wtyczka oferująca shortcode jest aktywowana
• Nie ma konfliktów z innymi wtyczkami

Shortcode działa w treści, ale nie w widgetach

Domyślnie WordPress nie przetwarza shortcodes w widgetach. Aby to włączyć, dodaj następujący kod do pliku functions.php:

add_filter('widget_text', 'do_shortcode');

Shortcode powoduje błędy na stronie

Sprawdź konsolę przeglądarki i logi PHP, aby zidentyfikować błędy. Często przyczyną są konflikty z innymi wtyczkami lub błędy w samej implementacji shortcode’u.

Ciekawostki o WordPress Shortcodes

• Historia shortcodes – Funkcjonalność shortcodes została wprowadzona w WordPress 2.5 w 2008 roku i od tego czasu stała się jednym z filarów elastyczności tej platformy.

• Nazwani po shortcode w SMS – Koncepcja shortcodes w WordPress została zainspirowana krótkimi kodami używanymi w wiadomościach SMS do wywoływania specjalnych usług.

• Ilość shortcodes – Niektóre popularne wtyczki jak Shortcodes Ultimate czy Ultimate Shortcodes Library oferują ponad 100 różnych shortcodes.

• Wydajność – Nadmierne używanie shortcodes może wpłynąć na wydajność strony, gdyż każdy shortcode wymaga dodatkowego przetwarzania przez PHP.

„Shortcodes to jak małe kawałki magii, które możesz wpleść w swoją treść. Dla początkujących użytkowników są one często pierwszym krokiem do rozszerzania możliwości swoich stron bez nauki programowania.” – Automattic Team

Alternatywy dla shortcodes

Wraz z ewolucją WordPress, pojawiły się alternatywy dla tradycyjnych shortcodes:

Bloki Gutenberg

Edytor blokowy Gutenberg, wprowadzony w WordPress 5.0, oferuje bardziej wizualną alternatywę dla shortcodes. Wiele funkcji, które wcześniej wymagały shortcodes, teraz można zrealizować za pomocą bloków.

Page Buildery

Narzędzia takie jak Elementor, Divi Builder czy Beaver Builder oferują wizualne interfejsy drag-and-drop do tworzenia złożonych układów bez konieczności używania shortcodes.

HTML i CSS

W niektórych przypadkach, zwłaszcza przy prostszych elementach, bezpośrednie użycie HTML i CSS może być bardziej efektywne niż tworzenie shortcode.

Podsumowanie

Shortcodes w WordPress stanowią potężne narzędzie, które umożliwia użytkownikom bez wiedzy technicznej dodawanie zaawansowanych funkcji i elementów do swoich stron. Niezależnie od tego, czy korzystasz z wbudowanych shortcodes, tych oferowanych przez wtyczki, czy tworzysz własne, ta funkcjonalność może znacząco poszerzyć możliwości Twojej strony WordPress.

Chociaż nowsze technologie jak Gutenberg oferują alternatywy, shortcodes pozostają integralną częścią ekosystemu WordPress, szczególnie w przypadku wtyczek, które oferują zaawansowane funkcjonalności. Umiejętność efektywnego korzystania z shortcodes z pewnością przyda się każdemu użytkownikowi WordPress, od początkującego blogera po doświadczonego dewelopera.

Eksperymentuj, twórz i odkrywaj możliwości, jakie dają Ci shortcodes – to jedna z tych funkcji WordPress, które naprawdę pozwalają przekształcić prostą stronę w dynamiczną i interaktywną platformę.