Jak dodać krótki kod w WordPress (przewodnik dla początkujących)

Wyobraź sobie, że możesz utworzyć nowe elementy na swojej witrynie internetowej WordPress, takie jak pokazy slajdów, formularze kontaktowe, a nawet specjalne listy, po prostu wpisując prosty kod. To jest właśnie moc krótkich kodów.

Przekonasz się, że wiele wtyczek i motywów WordPress może używać krótkich kodów, aby dodać dodatkowe funkcje do twojej witryny. Wielu naszych czytelników pyta nas o najlepszy sposób dodawania ich do wpisów, stron i paneli bocznych.

W tym artykule pokażemy ci, jak krok po kroku używać krótkich kodów na twojej witrynie internetowej WordPress. Pokażemy nawet, jak tworzyć własne krótkie kody, jeśli chcesz być naprawdę kreatywny.

Czym są krótkie kody?

Krótkie kody w WordPress to skróty kodu, które pomagają dodawać dynamiczne treści do wpisów, stron i widżetów panelu bocznego WordPress. Są one wyświetlane wewnątrz nawiasów kwadratowych, jak poniżej:

[myshortcode]

Aby lepiej zrozumieć krótkie kody, przyjrzyjmy się, dlaczego zostały one dodane w pierwszej kolejności.

WordPress filtruje całą treść, aby upewnić się, że nikt nie używa wpisów i treści stron do wstawienia złośliwego kodu do bazy danych. Oznacza to, że możesz pisać podstawowy HTML w twoich wpisach, ale nie możesz pisać kodu PHP.

Ale co, jeśli chciałbyś uruchomić jakiś własny kod wewnątrz twoich wpisów, aby wyświetlać powiązane wpisy, banery reklamowe, formularze kontaktowe, galerie lub coś innego?

W tym miejscu pojawia się Shortcode API.

Zasadniczo pozwala programistom dodawać swój kod wewnątrz funkcji, a następnie rejestrować tę funkcję w WordPress jako krótki kod, dzięki czemu użytkownicy mogą z niej łatwo korzystać bez konieczności posiadania wiedzy na temat kodowania.

Gdy WordPress znajdzie krótki kod, automatycznie uruchomi powiązany z nim kod.

Zobaczmy, jak łatwo dodać krótki kod do twoich wpisów i stron WordPress. Możesz użyć poniższych odnośników, aby przejść do twojej preferowanej metody.

Dodawanie krótkiego kodu we wpisach i na stronach WordPressa

Najpierw musisz edytować wpis i stronę, na której chcesz dodać krótki kod.

Następnie należy kliknąć przycisk dodawania bloku „+”, aby wstawić blok z krótkim kodem.

Po dodaniu bloku Shortcode, możesz po prostu wpisz twój krótki kod w ustawieniach bloku.

Krótki kod będzie dostarczany przez różne wtyczki WordPress, z których możesz korzystać, takie jak WPForms do formularzy kontaktowych lub OptinMonster do e-mail marketingu.

Aby dowiedzieć się więcej na temat korzystania z bloków, zapoznaj się z naszym samouczkiem Gutenberg.

Możesz teraz zapisać swój wpis lub stronę i wyświetlić podgląd zmian, aby zobaczyć krótki kod w działaniu.

Dodawanie krótkiego kodu w panelu bocznym widżetów WordPress

Można również użyć krótkich kodów w widżetach panelu bocznego WordPress.

Wystarczy przejść na stronę Wygląd ” Widżety i dodać blok widżetu „Krótki kod” do panelu bocznego.

Teraz możesz wkleić twój krótki kod wewnątrz obszaru tekstowego widżetu.

Nie zapomnij kliknąć przycisku „Aktualizuj”, aby zapisać twoje ustawienia widżetu.

Następnie możesz przejść na swoją witrynę internetową WordPress, aby zobaczyć podgląd na żywo krótkiego kodu w panelu bocznym.

Dodawanie krótkiego kodu w klasycznym edytorze WordPress

Jeśli nadal korzystasz ze starego klasycznego edytora w WordPressie, oto jak możesz dodać krótki kod do twoich wpisów i stron.

Wystarczy edytować wpis i stronę, na której chcesz dodać krótki kod. Możesz wkleić krótki kod w dowolnym miejscu w edytorze treści, gdzie chcesz, aby był wyświetlany. Upewnij się tylko, że krótki kod znajduje się we własnej linii.

Nie zapomnij zapisać twoich zmian. Następnie możesz wyświetlić podgląd twojego wpisu i strony, aby zobaczyć krótki kod w działaniu.

Dodawanie krótkiego kodu w plikach motywu WordPress

Krótkie kody są przeznaczone do użycia wewnątrz wpisów, stron i widżetów WordPress. Czasami jednak możesz chcieć użyć krótkiego kodu wewnątrz pliku motywu WordPress.

WordPress ułatwia to, ale będziesz musiał edytować pliki twojego motywu WordPress. Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem na temat kopiowania i wklejania kodu w WordPress.

Zasadniczo można dodać krótki kod do dowolnego motywu WordPress, po prostu dodając następujący kod:

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

WordPress będzie teraz szukał krótkiego kodu i wyświetlał jego dane wyjściowe w twoim motywie.

Dodawanie krótkiego kodu w plikach motywu blokowego za pomocą edytora całej witryny

Jeśli korzystasz z motywu blokowego, łatwiej będzie Ci dodać krótki kod w plikach motywu WordPress za pomocą pełnego edytora witryny.

Dostęp do tego narzędzia można uzyskać, wybierając Wygląd ” Edytor z kokpitu WordPress.

Domyślnie zostanie wyświetlony szablon główny twojego motywu, ale możesz przełączyć się na inne szablony, wybierając opcję „Szablony”.

Po wybraniu szablonu można rozpocząć jego edycję, klikając w prawym panelu edytora. Edytor wypełni teraz cały ekran.

Teraz możesz kliknąć ikonkę „+” wybieraka bloków i wyszukać blok krótkiego kodu. Następnie wystarczy przeciągnąć go na szablon i wpisać krótki kod, którego chcesz użyć.

Nie zapomnij kliknąć przycisku „Zapisz” u góry ekranu, aby zapisać twoje zmiany.

Tworzenie własnego krótkiego kodu w WordPressie

Krótkie kody mogą być naprawdę przydatne, gdy chcesz dodać dynamiczną treść lub własny kod wewnątrz wpisów i stron WordPress. Jeśli jednak chcesz utworzyć własny krótki kod, wymaga to pewnego doświadczenia w kodowaniu.

Jeśli nie masz problemów z pisaniem kodu PHP, poniżej znajdziesz przykładowy kod, który możesz wykorzystać jako szablon:

// function that runs when shortcode is called
function wpb_demo_shortcode() { 
 
// Things that you want to do.
$message = 'Hello world!'; 
 
// Output needs to be return
return $message;
}
// register shortcode
add_shortcode('greeting', 'wpb_demo_shortcode');

W tym kodzie najpierw utworzyliśmy funkcję, która uruchamia pewien kod i zwraca dane wyjściowe. Następnie utworzyliśmy nowy krótki kod o nazwie „powitanie” i powiedzieliśmy WordPressowi, aby uruchomił utworzoną przez nas funkcję.

Możesz dodać ten kod do pliku functions. php twojego motywu ręcznie lub użyć wtyczki fragmentu kodu, takiej jak WPCode.

Więcej szczegółów można znaleźć w naszym przewodniku po dodawaniu własnego kodu w WordPress bez naruszania czegokolwiek.

Gdy już to zrobisz, możesz dodać ten krótki kod do twoich wpisów, stron i widżetów za pomocą następującego kodu:

[Pozdrowienia]

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

Przyjrzyjmy się teraz bardziej praktycznemu zastosowaniu krótkiego kodu.

W tym przykładzie wyświetlimy baner Google AdSense wewnątrz krótkiego kodu:

// The shortcode function
function wpb_demo_shortcode_2() { 
 
// Advertisement code pasted inside a variable
$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="in-article"
     data-ad-client="ca-pub-0123456789101112"
     data-ad-slot="9876543210"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>';
 
// Ad code returned
return $string; 
 
}
// Register shortcode
add_shortcode('my_ad_code', 'wpb_demo_shortcode_2'); 

Nie zapomnij zastąpić kodu reklamy twoim własnym kodem reklamy.

Możesz teraz używać krótkiego kodu [my_ad_code] wewnątrz twoich wpisów WordPress, stron i widżetów na panelu bocznym. WordPress automatycznie uruchomi funkcję powiązaną z krótkim kodem i wyświetli kod reklamy.

Krótkie kody a bloki Gutenberg

Użytkownicy często pytają nas o różnice między krótkimi kodami a blokami Gutenberga.

Zasadniczo bloki pozwalają robić to samo, co krótkie kody, ale w bardziej przyjazny dla użytkownika sposób.

Zamiast wymagać od użytkowników dodania krótkiego kodu do wyświetlania dynamicznych treści, bloki pozwalają użytkownikom dodawać dynamiczne treści wewnątrz wpisów / stron za pomocą bardziej intuicyjnego interfejsu użytkownika. Wiele popularnych wtyczek WordPress przeszło na używanie bloków zamiast krótkich kodów, ponieważ są one bardziej przyjazne dla początkujących.

Zebraliśmy listę najbardziej przydatnych wtyczek blokowych Gutenberg dla WordPress, które warto wypróbować.

Jeśli chcesz stworzyć własne konfiguratory Gutenberg, możesz skorzystać z naszego poradnika krok po kroku, jak tworzyć własne konfiguratory Gutenberg w WordPress.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać krótki kod w WordPress. Zachęcamy również do zapoznania się z naszym przewodnikiem na temat tworzenia własnego motywu WordPress bez pisania jakiegokolwiek kodu oraz z naszą ekspercką listą najlepszych wtyczek do tworzenia stron WordPress typu „przeciągnij i upuść„.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.