Jak dodać Shortcode w WordPress? (Poradnik dla początkujących)

Shortcodes to łatwy sposób dodawania dynamicznej treści do postów, stron i pasków bocznych WordPress.

Wiele wtyczek i motywów WordPress używa skrótów do dodawania wyspecjalizowanych treści, takich jak formularze kontaktowe, galerie zdjęć, suwaki i inne.

W tym artykule pokażemy, jak łatwo dodać shortcode w WordPress. Pokażemy Ci również, jak tworzyć własne niestandardowe shortcodes w WordPress.

Czym są Shortcodes?

Skróty w WordPress to skróty kodu, które pomagają dodawać dynamiczną zawartość w postach, stronach i widżetach paska bocznego WordPress. Są one wyświetlane w nawiasach kwadratowych w ten sposób:

Aby lepiej zrozumieć shortcodes, rzućmy okiem na tło dlaczego zostały one dodane w pierwszej kolejności.

WordPress filtruje całą zawartość, aby upewnić się, że nikt nie używa postów i zawartości strony do wstawiania złośliwego kodu do bazy danych. Oznacza to, że możesz pisać podstawowy HTML w swoich postach, ale nie możesz pisać kodu PHP.

Ale co, jeśli chcesz uruchomić niestandardowy kod w swoich postach, aby wyświetlić powiązane posty, banery reklamowe, formularze kontaktowe, galerie itp.?

Tutaj pojawia się shortcode API.

Zasadniczo pozwala programistom dodać swój kod wewnątrz funkcji, a następnie zarejestrować tę funkcję w WordPress jako shortcode, dzięki czemu użytkownicy mogą z łatwością korzystać z niej bez wiedzy o kodowaniu.

Gdy WordPress znajdzie shortcode, automatycznie uruchomi kod powiązany z nim.

Zobaczmy, jak łatwo dodać skróty w postach i stronach WordPress.

Dodawanie skrótu w postach i stronach WordPress

Najpierw musisz edytować post i stronę, na której chcesz dodać shortcode. Następnie musisz kliknąć przycisk Dodaj blok, aby wstawić blok skrótu.

Po dodaniu bloku shortcode możesz po prostu wprowadzić swój shortcode w Ustawieniach bloku. Shortcode będzie dostarczany przez różne wtyczki WordPress, których możesz używać, takie jak WPForms dla formularzy kontaktowych, OptinMonster dla formularzy e-mail marketingowych, przycisk Połączenia WP do wstawienia przycisku Kliknij, aby zadzwonić itp.

Aby dowiedzieć się więcej o użyciu bloków, zobacz nasz tutorial Gutenberga po więcej szczegółów.

Możesz teraz zapisać swój post lub stronę i wyświetlić podgląd zmian, aby zobaczyć skrócony kod w akcji.

Dodawanie Shortcode w widżetach paska bocznego WordPress

Możesz również użyć skrótów w widżetach paska bocznego WordPress. Po prostu odwiedź Wygląd ” Widgety strona i dodaj widżet „tekst” do paska bocznego.

Teraz możesz wkleić swój shortcode wewnątrz obszaru tekstowego widżetu.

Nie zapomnij kliknąć przycisku „Zapisz”, aby zapisać ustawienia widgetu.

Następnie możesz odwiedzić swoją witrynę WordPress, aby zobaczyć podgląd na żywo krótkiego kodu w widżecie paska bocznego.

Dodawanie skrótu w Starym edytorze WordPress Classic

Jeśli nadal używasz starego klasycznego edytora w WordPress, oto jak możesz dodać skróty do swoich postów i stron WordPress.

Po prostu Edytuj post i stronę, na której chcesz dodać shortcode. Możesz wkleić skrócony kod w dowolnym miejscu w edytorze treści, w którym chcesz go wyświetlić. Po prostu upewnij się, że shortcode jest we własnej linii.

Nie zapomnij zapisać zmian. Następnie możesz wyświetlić podgląd swojego postu i strony, aby zobaczyć skrót w akcji.

Jak dodać Shortcode w plikach motywów WordPress

Skróty mają być używane w postach, stronach i widżetach WordPress. Czasami jednak możesz użyć krótkiego kodu wewnątrz pliku motywu WordPress.

WordPress ułatwia to, ale musisz edytować pliki motywów WordPress. Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem, jak skopiować i wkleić kod w WordPress.

Zasadniczo możesz dodać shortcode do dowolnego szablonu motywu WordPress, po prostu dodając następujący kod.

<?PHP echo do_shortcode ("[your_shortcode]");?>

WordPress będzie teraz szukać skrótu i wyświetli jego wyjście w szablonie motywu.

Jak stworzyć własny niestandardowy Shortcode w WordPress

Skróty mogą być bardzo przydatne, gdy chcesz dodać dynamiczną zawartość lub niestandardowy kod wewnątrz postu i stron WordPress. Jeśli jednak chcesz utworzyć niestandardowy shortcode, wymaga to trochę doświadczenia w kodowaniu.

Jeśli nie masz nic przeciwko pisaniu kodu PHP, oto przykładowy kod, który możesz wykorzystać jako szablon.

// funkcja uruchamiana po wywołaniu shortcode
function wpb_demo_shortcode () { 

// Rzeczy, które chcesz robić. 
$message = ' Hello world!'; 

// Wyjście musi być zwrócone
return $ message;
} 
// zarejestruj shortcode
add_shortcode ('greeting', 'wpb_demo_shortcode'); 

W tym kodzie najpierw stworzyliśmy funkcję, która uruchamia jakiś kod i zwraca wynik. Następnie stworzyliśmy nowy shortcode o nazwie „powitanie” i kazaliśmy WordPressowi uruchomić utworzoną przez nas funkcję.

Możesz teraz użyć Dodaj ten krótki kod do swoich postów, stron i widżetów, używając następującego kodu:

Uruchomi utworzoną funkcję i wyświetli żądane dane wyjściowe.

Teraz rzućmy okiem na bardziej praktyczne użycie shortcode. W tym przykładzie, będziemy wyświetlać baner Google AdSense wewnątrz shortcode.

// Funkcja shortcode
function wpb_demo_shortcode_2 () { 

// Kod reklamowy wklejony do zmiennej
$ string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> < / script>
< ins class = "adsbygoogle"
     style="display:block; text-align:center;"/
     data-ad-format= "fluid"
     data-ad-layout= "w-artykule"
     data-ad-client="ca-pub-0123456789101112"
     data-ad-slot = "9876543210" > < / ins>
< script>
     (adsbygoogle = window.adsbygoogle || []).push ({});
< / script>";

// Kod reklamowy zwrócony
return $ string; 

}
// Zarejestruj shortcode
add_shortcode ('my_ad_code', 'wpb_demo_shortcode_2'); 

Nie zapomnij zastąpić kodu reklamowego własnym kodem reklamowym.

Możesz teraz użyć krótkiego kodu [my_ad_code] wewnątrz postów, stron i widżetów paska bocznego WordPress. WordPress automatycznie uruchomi funkcję związaną z shortcode i wyświetli kod reklamy.

Shortcodes vs bloki Gutenberga

Użytkownicy często pytają nas o różnice między shortcode a nowymi blokami Gutenberga.

Zasadniczo, jeśli znajdziesz skróty przydatne, pokochasz bloki edytora WordPress. Bloki pozwalają zrobić to samo, ale w bardziej przyjazny dla użytkownika sposób.

Zamiast wymagać od użytkowników dodawania skrótu do wyświetlania dynamicznej zawartości, bloki umożliwiają użytkownikom dodawanie dynamicznej zawartości wewnątrz postów / stron z bardziej intuicyjnym interfejsem użytkownika. Wiele popularnych wtyczek WordPress przełącza się na używanie bloków Gutenberga zamiast skrótów, ponieważ są bardziej przyjazne dla początkujących.

Zebraliśmy listę najbardziej przydatnych wtyczek blokowych Gutenberga do WordPressa, które możesz wypróbować.

Jeśli chcesz tworzyć własne niestandardowe bloki Gutenberga, możesz śledzić nasz samouczek krok po kroku, jak tworzyć niestandardowe bloki Gutenberga w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać shortcode w WordPress. Możesz również zobaczyć nasz przewodnik na temat najlepszych wtyczek do Kreatora Stron typu przeciągnij i upuść WordPress oraz jak stworzyć niestandardowy motyw WordPress bez pisania kodu.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.