Envato Elements - pobieraj co chcesz, ile chcesz

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 klika 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( $atts ) {
    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…

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
Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!
Spodobał Ci się artykuł? Zapisz się do naszego Newslettera - ZERO SPAMu, same konkrety, oraz dostęp do dodatkowych materiałów przeznaczonych dla subskrybentów!
Na podany adres e-mail otrzymasz od nas wiadomość e-mail, w której znajdziesz link do potwierdzenia subskrypcji naszego Newslettera. Dzięki temu mamy pewność, że nikt nie dodał Twojego adresu przez przypadek. Jeśli wiadomość nie przyjdzie w ciągu najbliższej godziny (zazwyczaj jest to maksymalnie kilka minut) sprawdź folder SPAM.
Monika ćwiczy przed kongresem ko..., ale jej też należy się zniżka 80% na skięgowość wFirma dla oglądających WebInsider.pl
WebInsider poleca księgowość wFirma
WebInsider korzysta z VPSa w HitMe.pl
WebInsider poleca VPSy DigitalOcean
WebInsider poleca serwis Vindicat
Napisz komentarz
wipl_napisz-komentarz_01Jeśli informacje zawarte na tej stronie okazały się pomocne, możesz nam podziękować zostawiając poniżej swój komentarz.

W tej formie możesz również zadać dodatkowe pytania dotyczące wpisu, na które – w miarę możliwości – spróbujemy Ci odpowiedzieć.
Linki partnerskie
Niektóre z linków na tej stronie to tzw. „linki partnerskie”, co oznacza, że jeśli klikniesz na link i dokonasz wymaganej akcji (np. zakup/rejestracja) możemy otrzymać za to prowizję. Pamiętaj, że polecamy tylko te produkty i usługi, z których sami korzystamy, i uważamy, że są tego na prawdę warte… :-)
Znaki towarowe i nazwy marek
W niektórych wpisach (oraz innych miejscach na stronie) mogą być przedstawione/użyte znaki towarowe i/lub nazwy marek, które stanowią własność intelektualną tych podmiotów, a zostały użyte wyłącznie w celach informacyjnych.
Młody Szymon pomógł tacie zapisać się do Newslettera WebInsider.pl i... teraz idzie popływać