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

Często słyszymy od użytkowników, którzy czują się przytłoczeni przez krótkie kody WordPress.

Te małe fragmenty kodu mogą na początku wyglądać myląco, ale w rzeczywistości są jedną z najpotężniejszych funkcji WordPressa, gdy są używane poprawnie.

Niezależnie od tego, czy chcesz dodać formularze kontaktowe, galerie, czy niestandardowe układy, shortcody stanowią łatwy sposób na wstawianie złożonych funkcji bez dotykania kodu.

W tym przewodniku dla początkujących pokażemy Ci dokładnie, jak dodawać shortcody w WordPressie, gdzie je umieszczać i jakie są najlepsze sposoby ich wykorzystania.

Podzieliliśmy wszystko na proste, łatwe do naśladowania kroki, które każdy może zrozumieć, nawet jeśli jesteś zupełnie nowy w WordPressie.

Czym są skrócone kody?

Skrócone kody w WordPressie to skróty kodu, które pomagają dodawać dynamiczne treści do wpisów, stron i widżetów paska bocznego WordPress. Są wyświetlane w nawiasach kwadratowych w ten sposób:

[myshortcode]

Aby lepiej zrozumieć skrócone kody, przyjrzyjmy się kontekstowi, dlaczego zostały dodane w pierwszej kolejności.

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

Ale co, jeśli chciałbyś uruchomić niestandardowy kod w swoich postach, aby wyświetlać powiązane posty, reklamy banerowe, formularze kontaktowe, galerie lub coś innego?

Tutaj pojawia się Shortcode API.

W zasadzie pozwala to programistom na umieszczenie swojego kodu w funkcji, a następnie zarejestrowanie tej funkcji w WordPress jako shortcode, dzięki czemu użytkownicy mogą z niej łatwo korzystać bez posiadania wiedzy programistycznej.

Kiedy WordPress znajdzie skrócony kod, automatycznie uruchomi powiązany z nim kod.

Zobaczmy, jak łatwo dodawać krótkie kody do swoich postów i stron WordPress.

Możesz użyć poniższych linków, aby przejść do preferowanej metody:

• Dodawanie krótkiego kodu do wpisów i stron w WordPress
• Dodawanie skróconego kodu w widżetach paska bocznego WordPress
• Dodawanie krótkiego kodu w starym edytorze klasycznym WordPress
• Dodawanie shortcodu w plikach motywu WordPress
• Dodawanie skróconego kodu w plikach motywu blokowego za pomocą edytora całych witryn
• Creating Your Own Custom Shortcode in WordPress
• Skrócone kody a bloki Gutenberga
• Często zadawane pytania dotyczące krótkich kodów

Dodawanie krótkiego kodu do wpisów i stron w WordPress

Najpierw musisz edytować post i stronę, na której chcesz dodać skrócony kod.

Następnie musisz kliknąć przycisk dodawania bloku '+' , aby wstawić blok Shortcode.

Po dodaniu bloku skróconego kodu możesz po prostu wprowadzić swój skrócony kod w ustawieniach bloku.

Krótki kod zostanie dostarczony przez różne wtyczki WordPress, których możesz używać, takie jak WPForms do formularzy kontaktowych.

Aby dowiedzieć się więcej o używaniu bloków, zapoznaj się z naszym poradnikiem dotyczącym edytora bloków Gutenberg, aby uzyskać 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 skróconego kodu w widżetach paska bocznego WordPress

Możesz również używać krótkich kodów w widżetach paska bocznego WordPress widżetach.

Po prostu odwiedź stronę Wygląd » Widżety i dodaj blok widżetu „Skrócony kod” do paska bocznego.

Teraz możesz wkleić swój skrócony kod w obszarze tekstowym widżetu.

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

Następnie możesz odwiedzić swoją stronę WordPress, aby zobaczyć podgląd shortcode na żywo w widżecie paska bocznego.

Dodawanie krótkiego kodu w starym edytorze klasycznym WordPress

Jeśli nadal korzystasz ze starego edytora klasycznego, możesz dodawać krótkie kody bezpośrednio do obszaru treści.

Po prostu edytuj post lub stronę i wklej krótki kod tam, gdzie chcesz, aby funkcja się pojawiła.

Dla najlepszych rezultatów zalecamy umieszczenie go w osobnym wierszu, szczególnie w przypadku krótkich kodów, które dodają duże elementy, takie jak formularze lub galerie. Pomaga to zapobiec problemom z formatowaniem.

Nie zapomnij zapisać zmian. Następnie możesz podglądnąć swój post, aby zobaczyć krótki kod w akcji.

Dodawanie shortcodu w plikach motywu WordPress

Skrócone kody są przeznaczone do użycia w postach, stronach i widżetach WordPress. Czasami jednak możesz chcieć użyć skróconego kodu w pliku motywu WordPress.

WordPress ułatwia to, ale będziesz musiał edytować pliki motywu WordPress. Jeśli nigdy tego nie robiłeś, zapoznaj się z naszym przewodnikiem jak kopiować i wklejać kod w WordPressie.

Zasadniczo możesz dodać skrócony kod do dowolnego szablonu motywu WordPress, po prostu dodając następujący kod:

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

WordPress będzie teraz szukał shortcode i wyświetli jego wynik w szablonie motywu.

Dodawanie skróconego kodu w plikach motywu blokowego za pomocą edytora całych witryn

Jeśli używasz motywu blokowego, łatwiej będzie Ci dodawać skrócone kody do plików motywu WordPress, korzystając z edytora pełnej witryny.

Dostęp do tego narzędzia uzyskasz, wybierając Wygląd » Edytor z panelu administracyjnego WordPress.

Domyślnie zostanie wyświetlony szablon strony głównej Twojego motywu, a Ty możesz przełączyć się na inne szablony, wybierając opcję 'Szablony'.

Po wybraniu szablonu możesz zacząć go edytować, klikając w prawym panelu edytora. Edytor wypełni teraz ekran.

Teraz możesz kliknąć ikonę wstawiania bloku „+” i wyszukać blok skróconego kodu. Następnie po prostu przeciągnij go na szablon i wpisz skrócony kod, którego chcesz użyć.

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

Tworzenie własnego niestandardowego shortcodu w WordPressie

Skrócone kody mogą być bardzo przydatne, gdy chcesz dodać dynamiczną treść lub niestandardowy kod do postów i stron WordPress. Jednak tworzenie niestandardowego skróconego kodu wymaga pewnego doświadczenia w kodowaniu.

Jeśli czujesz się komfortowo z pisaniem kodu PHP, oto przykładowy kod, którego możesz użyć jako szablonu:

// 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 wykonuje pewien kod i zwraca wynik. Następnie utworzyliśmy nowy skrócony kod o nazwie „greeting” i poleciliśmy WordPressowi uruchomienie utworzonej przez nas funkcji.

Możesz ręcznie dodać ten kod do pliku functions.php swojego motywu lub użyć wtyczki do fragmentów kodu, takiej jak WPCode (zalecane).

Polecamy to drugie rozwiązanie, ponieważ WPCode jest najbezpieczniejszym i najłatwiejszym sposobem dodawania kodu do Twojej witryny. Aby dowiedzieć się więcej, zapoznaj się z naszą recenzją WPCode.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dodawanie niestandardowego kodu w WordPressie bez psucia czegokolwiek.

Po wykonaniu tej czynności możesz dodać ten skrócony kod do swoich postów, stron i widżetów, używając następującego kodu:

[powitanie]

Uruchomi to stworzoną przez Ciebie funkcję i wyświetli pożądany wynik.

Chociaż ten przykład jest prosty, prawdziwa moc krótkich kodów polega na ponownym wykorzystaniu złożonego kodu.

Opakowując długi skrypt w krótki kod, utrzymujesz czystość edytora treści i znacznie ułatwiasz aktualizacje w całej witrynie. Kod musisz edytować tylko w jednym miejscu.

Praktyczny przykład: Krótki kod Google AdSense

Teraz przyjrzyjmy się bardziej praktycznemu przykładowi.

Możesz użyć krótkiego kodu, aby łatwo wyświetlić baner Google AdSense w dowolnym miejscu swojej witryny.

// 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'); 

Pamiętaj, aby zastąpić kod zastępczy własnym. Możesz teraz użyć krótkiego kodu [my_ad_code], aby wyświetlić reklamę w dowolnym poście, stronie lub obszarze widżetu.

Skrócone kody a bloki Gutenberga

Bloki Gutenberga i krótkie kody pozwalają dodawać dynamiczne treści do Twojej witryny WordPress. Główna różnica polega na tym, że bloki oferują interfejs wizualny, podczas gdy krótkie kody to fragmenty tekstowe, które wklejasz do określonego bloku.

Wiele popularnych wtyczek WordPress zaczęło używać bloków zamiast krótkich kodów. Dzieje się tak, ponieważ bloki są często bardziej przyjazne dla początkujących i pozwalają zobaczyć podgląd końcowego rezultatu bezpośrednio w edytorze.

Zebraliśmy listę najbardziej przydatnych wtyczek bloków Gutenberg dla WordPressa, które możesz wypróbować.

Jeśli chcesz stworzyć własne niestandardowe bloki Gutenberga, możesz postępować zgodnie z naszym samouczkiem krok po kroku na temat tworzenia niestandardowych bloków Gutenberga w WordPress.

Często zadawane pytania dotyczące krótkich kodów

Tutaj na WPBeginner często otrzymujemy pytania o to, jak działają krótkie kody. Poniżej znajdują się odpowiedzi na najczęściej zadawane pytania.

Czy krótkie kody są nadal istotne w edytorze bloków?

Tak, absolutnie. Chociaż wiele nowszych wtyczek używa dedykowanych bloków, tysiące innych wtyczek nadal używa krótkich kodów, aby umożliwić dodawanie funkcji do Twoich treści. Nadal będą one przydatne przez długi czas, dlatego WordPress zawiera dedykowany blok krótkich kodów.

Czy krótkie kody mogą spowolnić moją witrynę?

Krótki kod jest tak szybki, jak kod, który wykonuje. Dobrze napisany krótki kod z renomowanej wtyczki będzie miał minimalny wpływ na wydajność Twojej witryny.

Jednak używanie zbyt wielu krótkich kodów, które ładują wiele skryptów na jednej stronie, może czasami spowodować spowolnienie.

Jak znaleźć krótki kod dla wtyczki?

Większość wtyczek wyświetla swój krótki kod na stronie ustawień, w dokumentacji lub bezpośrednio w interfejsie edytora. Na przykład WPForms ułatwia skopiowanie krótkiego kodu formularza natychmiast po jego zapisaniu.

Czy mogę używać krótkich kodów w kreatorach stron, takich jak SeedProd?

Tak, wszystkie główne kreatory stron, takie jak SeedProd, mają dedykowany blok lub widżet „Krótki kod”. Możesz po prostu przeciągnąć blok na swój układ i wkleić krótki kod, który chcesz wyświetlić.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać krótki kod w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat jak pokazywać i ukrywać tekst we wpisach WordPress z efektem przełączania oraz naszym poradnikiem na temat jak kopiować i wklejać w WordPress bez problemów z formatowaniem.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.