Kurs "WordPress: Pierwsze kroki" (bezpłatna lekcja)

Prawdopodobnie każdy użytkownik WordPressa prędzej czy później zetknie się z tzw. „shorcodes”, choć często nawet nie mając takiej świadomości – klika w odpowiednią ikonę, wybiera 2-3 opcje i we wpisie pojawia się np. galeria :-)

W tym wpisie postaram się Wam pokazać, jak w prosty sposób samemu utworzyć własne „krótkie kody”.

WordPress i krótkie kody (shorcodes)

Sam WordPress ma wbudowanych kilka takich kodów, jak choćby wspomniana galeria. Do tego dochodzą wtyczki czy motywy, które często mają swoje kody, często z graficzną konfiguracją – dzięki czemu korzystanie z bardziej rozbudowanych opcji jest relatywnie proste i przyjemne.

Własne krótkie kody w WordPressie

Ale może się zdarzyć, że mimo to sami postanowimy stworzyć nasz własny krótki kod – np. by z jednego miejsca zarządzać kwotą, od której oferujemy darmową dostawę w naszym sklepie internetowym. Albo do wyświetlania numeru telefonu, nr konta w banku czy naszej notki biograficznej.

Zmiana w jednym miejscu automatycznie zmieni te informacje we wszystkim miejscach, gdzie użyliśmy naszych shortcodes na naszej stronie.

Wykorzystamy w tym informacje które przedstawiłem w poradniku dotyczącym umieszczania własnego kodu w WordPressie – i jeśli jeszcze nie czytałeś tego poradnika, to zalecam jego lekturę, gdyż będziemy dodawać własny kod do WordPressa.

Własna wtyczka czy functions.php – wybór należy do Was, i tak naprawdę nie ma większego znaczenia.

Pierwszy własny krótki kod (shortcode)

Przykład najprostszego własnego kodu to:

function webinsider_wp_custom_shorcode() {
    return "Cześć. Mam na imię Patryk i witam Cie na mojej stronie...";
}
add_shortcode( 'webinsider_sample_shortcode', 'webinsider_wp_custom_shortcode' );

Dzięki temu mamy nasz pierwszy, prosty shortcode, który wstawiamy np. do wpisu za pomocą znacznika:

[webinsider_sample_shortcode]

W efekcie w tym miejscu wyświetli się zdefiniowana wcześniej treść:

Cześć. Mam na imię Patryk i witam Cie na mojej stronie…

To też można to zrobić na różne sposoby, choćby korzystając z opisywanej już kiedyś wtyczki PRyC WP: Add custom content to post and page.

Krótkie kody z krótkimi kodami

Jeśli w ramach krótkiego kodu (shortcode) chcemy zwrócić inny krótki kod, to należy lekko zmodyfikować linijke „return”:

return do_shortcode( '[webinsider_other_shortcode]Link[/webinsider_other_shortcode]’ );

Doda to obsługę krótkich kodów w ramach treści wstawianej przez nasz krótki kod.

A teraz z atrybutami

Trzymając się przykładu ze sklepem internetowym i kwotą darmowej dostawy – załóżmy, że oprócz darmowej dostawy od określonej kwoty mamy jeszcze koszt dostawy w przypadku gdy darmowa dostawa się nie należy, a do tego np. oferujemy jeszcze dostawę lokalną w jakiejś kwocie.

Fajnie byłoby wszystkie te kwoty zastąpić odpowiednim „krótkim kodem”, tak by przy każdorazowej zmianie, nie trzeba było przeszukiwać wszystkich stron, w poszukiwaniu miejsc, gdzie podaliśmy takie informacje.

Oczywiście można w tym celu przygotować oddzielne kody dla każdej z informacji, ale można też skorzystać z jednego wspólnego kodu i tylko za pomocą atrybutów wywoływać odpowiednie informacje:

function webinsider_wp_custom_shortcode( $atts ) {
    extract( shortcode_atts(
        array(
            # Atrybuty i przypisane im wartości
            'dostawa_lokalna_koszt' => '5',
            'dostawa_kurier_koszt' => '15',
            'dostawa_bezplatna_od' => '199',
        ), $atts )
    );
    
    # Kod wykonywany w przypadku wykrycia danego atrubutu
    if ( $atts[0]=='dostawa_lokalna_koszt'  ) {
        return $dostawa_lokalna_koszt;
    }
    if ( $atts[0]=='dostawa_kurier_koszt'  ) {
        return $dostawa_kurier_koszt;
    }
    if ( $atts[0]=='dostawa_bezplatna_od'  ) {
        return $dostawa_bezplatna_od;
    }
    else {
        return '';
    }
}
add_shortcode( 'webinsider_sample_shorcode', 'webinsider_wp_custom_shortcode' );

Może nie jest to najbardziej elegancka forma, ale specjalnie taką wybrałem – dzięki temu powinniście łatwiej zrozumieć zasadę działania.

Wywołanie naszego kodu z odpowiednim atrybutem spowoduje wyświetlenie przypisanej do niego wartości/treści:

  • Koszt dostawy za pośrednictwem kuriera to [webinsider_sample_shorcode dostawa_kurier_koszt] zł.
  • Oferujemy również dostawę lokalną za jedyne [webinsider_sample_shorcode dostawa_lokalna_koszt] zł.
  • Zrób zakupy za minimum [webinsider_sample_shorcode dostawa_bezplatna_od] zł, a nie zapłacisz nic za dostawę.

W tym poradniku oczywiście nie wyczerpałem tematu – nawet nie miałem takiego zamiaru, gdyż jest to na tyle rozległy temat, że jego pełne opisanie zajęło by kilka(naście) godzin, a w dużej mierze sprowadzałoby się do dublowania oficjalnej dokumentacji, w której temat jest dość dobrze opisany…

(!) Zgłoś błąd na stronie
Pomogłem? To może postawisz mi wirtualną kawę?
LUTy dla D-Cinelike (DJI Mini 3 Pro, DJI Avata, OSMO Pocket) od MiniFly
Wdrożenie Omnibusa w sklepie na WooCommerce
Jak (legalnie) latać dronem w Kategorii Otwartej
Kurs "WordPress: Pierwsze kroki" (bezpłatna lekcja)
Patryk
Kurs "WordPress: Pierwsze kroki" (na dobry początek)