WordPress Shortcode [krótki kod] krok po kroku

Dowiedz się czym są tzw. WordPress Shortcode (z ang. krótkie kody) oraz jak je stosować, aby zwiększyć funkcjonalność swojej strony internetowej lub sklepu WordPress.

Shortcode w WordPress, czyli czym jest krótki kod

Shortcody to funkcjonalność systemu WordPress, która w bardzo prosty sposób pozwala znacząco rozbudować stronę internetową poprzez dodanie dodatkowej treści np. na stronie, we wpisu lub na sidebarze (widgety). W WordPress Shortcody używane są przez wtyczki oraz szablony i jednym z takich przykładów jest Contact Form 7.

Wtyczka ta jest jedną z najczęściej używanych w WordPress, dlatego przykład ten będzie bardzo łatwy dla Ciebie do zrozumienia. Gdy dodasz w CF7 nowy formularz kontaktowy zobaczysz obok tzw. krótki kod:

[contact-form-7 id="112" title="Formularz"]

To właśnie jest shortcode generowany w WordPress przez Contact Form 7. Znasz już podstawy shortcodów w WordPress – teraz pora na konkrety.

Jak stosować shortcode w WordPress

W podstawowym założeniu, aby korzystać z WordPress potrzebujesz nic więcej niż dostęp do administratora WP. Shortcody generowane w taki sposób jak powyższy wystarczy wkleić w miejscu, w którym chcesz go wywołać. W przypadku CF7, gdy wkleisz krótki kod w jego miejsce pojawi się formularz kontaktowy.

Dlaczego jest to tak świetne rozwiązanie?

Dodawanie shortcodów nie wymaga edytowania każdej strony w przypadku zmiany np. wyglądu formularza kontaktowego, a jedynie jego ustawień.

Oczywiście shortcody możesz w WordPress używać w każdym i dowolnym miejscu jakie tylko sobie wybierzesz. Zatem krótki kod możesz dodać zarówno w postach jak i na stronach, w kategoriach, tagach, stopce, headerze, a nawet w sidebarze. Oczywiście, aby było to możliwe, szablon musi wspierać dodawanie w tym miejscu kodu HTML. Jednak i na to jest sposób.

Aby dodać shortcode w WordPress w sidebarze należy dodać widget o nazwie Własny HTML:

WordPress Shortcode [krótki kod] - Własny HTML

Własny HTML w sidebarze WordPress.

A nastepnie dodać w polu shortcode, który chcesz wywołać. Co jednak zrobić jeżeli chcesz dodać shortcode w innym miejcu np. w headerze w sytuacji, gdy szablon na to nie pozwala?

Spodobała Ci się zabawa z shortcodami WordPress? Być może z jakiegoś względu chcesz dodać go do swojego menu WP w stopce lub nagłówki. Niestety WordPress nie daje takiej możliwości, ale także i na to jest proste rozwiązanie.

1. Pobierz wtyczkę

Pierwszą rzeczą, którą musisz zrobić to pobrać i zainstalować wtyczkę Shortcode in Menus.

Teraz przejdź do edycji menu WordPress, aktywuj blok Shortcode na górze i dodaj swój kod do menu WP:

WordPress Shortccode [krótki kod] - menu

Shortcode w menu WordPress.

Gotowe 🤓

Dodawanie shortcode w WordPress w PHP

Odpowiednie wykorzystanie shortcodów (krótkie kody) pozwala znacząco zwiększyć funkcjonalność strony WordPress, dlaczego więc nie wykorzystać ich możliwości w innych miejscach niż sidebar?

Z pomocą przychodzi funkcja w PHP, która umożliwia wstawienie w każdym miejscu w szablonie shortcode. O to co musisz zrobić.

1. Skopiuj krótki kod

Skopiuj swój kod shortcode np. wspomniany z wtyczki CF7.

2. Otwórz edytor tekstowy

Otwórz notatnik lub inny program, który nie sformatuje Twojego tekstu i wklej ten kod:

<?php echo do_shortcode( '[nazwa_shortcode]' ); ?>

3. Wklej kod shortcode

Teraz wklej swój shortcode w przeznaczone do tego miejsce, powinien wyglądać on tak:

<?php echo do_shortcode( '[contact-form-7 id="112" title="Formularz"]' ); ?>

4. Dodaj shortcode w pliku .php

Teraz najważniejsza część Twojego zadania. Aby shortcode WordPress zadziałał, musisz dodać go w odpowiednim miejscu szablonu. Dla przykładu weźmy plik footer.php odpowiadający m.in. za prezentowanie tego co znajduje się na końcu strony WP. W tym celu skorzystaj z klienta FTP (skontaktuj się ze swoim hostingiem WordPress) lub przejdź to Wygląd i Edycja motywu wybierz z prawej strony plik Stopka motywu (footer.php).

Gdy to zrobisz, wklej kod shortcode w miejscu, w którym chcesz go wywołac np.:

<?php endif; ?>
<?php wp_footer(); ?>
<?php echo do_shortcode( '[contact-form-7 id="112" title="Formularz"]' ); ?>

Następnie zapisz plik na serwerze lub w ustawieniach WordPress i gotowe 🤓

Pamiętaj jednak, żeby:

Stosować shortcode rozważnie, ponieważ umiejscowienie krótkiego kodu w złym miejscu może skutkować błędem wczytywania szablonu. Gdy już Ci się uda zrobić to poprawnie pamiętaj, aby ostylować swój shortcode w CSS.

Skorzystaj z naszej pomocy z shortcode WordPress

Masz problem ze swoim shortcodem i potrzebujesz naszej pomocy? Skontaktuj się z nami, a pomożemy Ci wdrożyć oraz ostylować shortcode w WordPress tak, aby poprawnie działał oraz dobrze się prezentował na stronie.