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?

Krótkie kody w WordPressie to skróty kodowe, które pomagają dodawać dynamiczne treści do wpisów, stron i widżetów bocznych WordPressa. 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 posiada system bezpieczeństwa, który przetwarza całą zawartość, aby zapobiec wstawianiu złośliwego kodu. Chociaż możesz pisać podstawowy kod HTML w swoich postach, nie możesz pisać kodu PHP bezpośrednio w edytorze treści, ponieważ WordPress nie wykonuje kodu PHP w tym obszarze.

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.

Typowe zastosowania krótkich kodów (proste przykłady)

Oto kilka typowych funkcji, które możesz dodać do swojej witryny za pomocą krótkich kodów:

• Galerie obrazów i suwaki: Wyświetlaj wiele obrazów w przejrzystym układzie (np. [envira-gallery id="456"])
• Przyciski: Dodaj klikalne przyciski, które linkują do stron lub produktów (np. [button url="https://example.com" text="Kup teraz"])
• Mapy Google: Pokaż lokalizację bezpośrednio na swojej stronie (np. [google_map address="123 Main St"])
• Kanały mediów społecznościowych: Pokaż na żywo posty z platform takich jak Instagram lub Facebook
• Treści wielokrotnego użytku: Dodaj treści, takie jak zastrzeżenia lub biografie autorów, na całej swojej stronie

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

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 Shortcode możesz po prostu wkleić swój krótki kod bezpośrednio w pole wprowadzania bloku.

Krótki kod zostanie dostarczony przez różne wtyczki WordPressa, 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 samouczkiem edytora bloków Gutenberga, 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 bocznego paska WordPressa.

Po prostu przejdź do strony Wygląd » Widżety i dodaj blok „Shortcode” 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ę internetową WordPress, aby zobaczyć podgląd na żywo krótkiego kodu w widżecie bocznym.

Dodawanie krótkiego kodu w starym edytorze klasycznym WordPress

Jeśli nadal używasz starego klasycznego edytora, 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 WordPressa. Jeśli nigdy tego wcześniej 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ć krótkie kody do plików motywu WordPressa za pomocą edytora całych witryn.

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 dodać ten kod ręcznie 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 szczegółów, zapoznaj się z naszym przewodnikiem dodawania 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.

Przygotowaliśmy listę najprzydatniejszych wtyczek bloków Gutenberga dla WordPressa, które możesz wypróbować.

Jeśli chcesz tworzyć własne niestandardowe bloki Gutenberga, możesz postępować zgodnie z naszym przewodnikiem krok po kroku, jak tworzyć niestandardowe bloki Gutenberga w WordPressie.

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świetli 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 zaraz po jego zapisaniu.

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

Tak, wszyscy główni konstruktorzy stron, tacy 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 pokazywania i ukrywania tekstu we wpisach WordPress z efektem przełączania oraz naszym poradnikiem na temat kopiowania i wklejania 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.