Jak używać skróconych kodów w motywach WordPress

Używamy skróconych kodów w motywach WordPress od lat i stały się one standardową częścią sposobu, w jaki budujemy strony.

Rozwiązują one prosty problem: jak dodać tę samą funkcjonalność w wielu miejscach bez powielania kodu lub utrudniania zarządzania plikami motywu.

Skrócone kody pozwalają tworzyć proste, wielokrotnego użytku fragmenty kodu, które działają w dowolnym miejscu na Twojej stronie.

Niezależnie od tego, czy potrzebujesz wyświetlić niestandardową treść, dodać formularze, czy stworzyć interaktywne elementy, skrócone kody zapewniają czysty sposób na dodanie tej funkcjonalności i użycie jej tam, gdzie jest potrzebna.

W tym przewodniku pokażemy, jak używać skrótów w motywach przy użyciu różnych metod.

Dlaczego używać shortcodów w motywach WordPress?

Skrócone kody mogą dodawać do Twojej witryny wszelkiego rodzaju funkcje, w tym galerie obrazów, formularze, kanały mediów społecznościowych i wiele więcej.

WordPress zawiera kilka wbudowanych shortcodów, ale istnieje również wiele popularnych wtyczek WordPress, które dodają shortcody do Twojej witryny.

Na przykład, WPForms oferuje łatwe w użyciu bloki, ale zapewnia również skrócone kody, dzięki czemu możesz dodawać formularze do innych obszarów swojej witryny.

Przez większość czasu będziesz dodawać shortcody do obszarów treści, takich jak posty i strony.

Aby dowiedzieć się więcej, zapoznaj się z naszym kompletnym przewodnikiem jak dodać shortcode w WordPress.

Czasami jednak możesz chcieć użyć shortcodu w plikach motywu WordPress.

Pozwala to na dodawanie dynamicznych elementów do obszarów, których nie można edytować za pomocą standardowego edytora postów WordPress, takich jak Twoja strona archiwum. Jest to również łatwy sposób na użycie tego samego skrótu na wielu stronach.

Na przykład, możesz dodać skrócony kod do szablonu strony lub wpisu w swoim motywie.

Mając to na uwadze, zobaczmy, jak możesz używać shortcodów w swoim motywie WordPress. Po prostu skorzystaj z poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:

• Metoda 1: Używanie edytora całego witryny (tylko motywy blokowe)
• Metoda 2: Edycja plików motywu WordPress (działa z każdym motywem WordPress)
• Metoda 3: Dodawanie skróconego kodu za pomocą kreatora stron (niestandardowe motywy)

Metoda 1: Używanie edytora całego witryny (tylko motywy blokowe)

Najprostszym sposobem na dodanie skrótu WordPress do motywu jest użycie edytora całego witryny. Pozwala to na dodanie bloku Skrótu w dowolnej części Twojej witryny.

Jednak ta metoda działa tylko z motywami opartymi na blokach, takimi jak Hestia Pro. Jeśli nie używasz motywu z obsługą bloków, będziesz musiał użyć innej metody.

Aby rozpocząć, przejdź do Wygląd » Edytor w panelu WordPress.

Domyślnie edytor całego witryny wyświetla szablon strony głównej motywu, ale możesz dodawać skróty do dowolnego szablonu.

Aby zobaczyć wszystkie dostępne opcje, wybierz „Szablony”.

Teraz możesz kliknąć na niestandardowy szablon strony, który chcesz edytować.

Na przykład dodamy skrót do szablonu strony 404, ale kroki będą dokładnie takie same, niezależnie od wybranego szablonu.

WordPress wyświetli teraz podgląd szablonu.

Aby dodać shortcode, kliknij małą ikonę ołówka.

Po zakończeniu kliknij niebieską ikonę „+” w lewym górnym rogu edytora bloków.

W pasku wyszukiwania musisz wpisać „Shortcode”.

Gdy pojawi się właściwy blok, przeciągnij go i upuść na szablon motywu.

Teraz możesz wkleić lub wpisać skrót, którego chcesz użyć.

Po tym kliknij przycisk „Zapisz”.

Teraz po prostu odwiedź swojego bloga WordPress, aby zobaczyć skrócony kod w akcji.

Metoda 2: Edycja plików motywu WordPress (działa z każdym motywem WordPress)

Możesz również dodawać skrócone kody do swojego motywu WordPress, edytując pliki motywu. Ta metoda jest bardziej zaawansowana, ale działa zarówno z klasycznymi, jak i blokowymi motywami.

Jeśli nigdy wcześniej nie dodawałeś kodu do swojej witryny, zapoznaj się z naszym przewodnikiem krok po kroku jak kopiować i wklejać kod w WordPress.

Możesz modyfikować poszczególne pliki motywu bezpośrednio, ale utrudnia to aktualizację motywu WordPress bez utraty personalizacji. Z tego powodu zalecamy nadpisywanie plików motywu przez utworzenie motywu potomnego.

Jeśli tworzysz niestandardowy motyw, możesz dodać lub zmodyfikować kod w istniejących plikach motywu.

Podczas edycji plików motywu nie można dodać krótkiego kodu w tym samym formacie, którego używasz w standardowych obszarach treści. Zamiast widzieć wynik krótkiego kodu, na ekranie zobaczysz sam krótki kod.

Dzieje się tak, ponieważ WordPress nie wykonuje skróconych kodów w plikach szablonów motywu. Zamiast tego musisz wyraźnie poinformować WordPress, aby uruchomił skrócony kod za pomocą funkcji do_shortcode.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem jak łatwo dodać niestandardowy kod.

Oto przykład kodu, który dodasz do plików swojego motywu WordPress:

echo do_shortcode('[gallery]');

Po prostu zastąp 'gallery' krótkim kodem, którego chcesz użyć.

Jeśli nie masz pewności, gdzie dodać krótki kod, zapoznaj się z naszym przewodnikiem dla początkujących po hierarchii szablonów WordPress.

Jeśli dodajesz skrócony kod z dodatkowymi parametrami, będziesz musiał użyć nieco innego fragmentu kodu.

Wyobraź sobie, że utworzyłeś formularz kontaktowy za pomocą WPForms. W tym przypadku będziesz musiał użyć standardowego skróconego kodu WPForms plus ID formularza:

echo do_shortcode("[wpforms id='92']");

Rozwiązywanie problemów: Co zrobić, gdy do_shortcode nie działa

Czasami możesz dodać skrócony kod do pliku motywu, ale wynik kodu nie pojawia się na Twojej stronie internetowej WordPress. Zazwyczaj oznacza to, że skrócony kod zależy od wtyczki WordPress lub innego kodu na Twojej stronie internetowej.

Jeśli funkcja do_shortcode nie działa, upewnij się, że wtyczka dostarczająca skrócony kod jest zainstalowana i aktywowana, przechodząc do Wtyczki » Zainstalowane wtyczki.

Na poniższym obrazku WPForms jest zainstalowany, ale dezaktywowany, więc kod echo do_shortcode nie zadziała.

Możesz również sprawdzić, czy skrót jest dostępny, dodając funkcję shortcode_exists() do pliku index.php.

W poniższym fragmencie sprawdzamy, czy fragment WPForms jest dostępny do użycia na naszej stronie internetowej:

if ( shortcode_exists( 'wpforms' ))  {
  echo do_shortcode("[[wpforms id='147']]");
}

Jeśli nadal nie widzisz wyniku krótkiego kodu na swojej stronie internetowej, spróbuj wyczyścić pamięć podręczną WordPress, ponieważ możesz widzieć nieaktualną wersję swojej witryny.

Metoda 3: Dodawanie skróconego kodu za pomocą kreatora stron (niestandardowe motywy)

Inną opcją jest stworzenie niestandardowego motywu WordPress. Jest to bardziej zaawansowana metoda, ale pozwala na dodanie dowolnej liczby skróconych kodów do dowolnego obszaru motywu WordPress. Możesz również wprowadzić inne zmiany, aby stworzyć dokładnie takie funkcje i projekt, jakich chcesz.

W przeszłości zazwyczaj trzeba było postępować zgodnie ze skomplikowanym samouczkiem lub pisać niestandardowy kod, aby zbudować niestandardowy motyw WordPress. Jednak teraz możesz stworzyć niestandardowy motyw bez pisania ani jednej linii kodu, korzystając z SeedProd.

SeedProd to najlepszy kreator stron WordPress, a także zawiera kreator motywów, wraz z całymi zestawami i szablonami witryn. Pozwala projektować własne motywy za pomocą edytora przeciągnij i upuść.

Kilka naszych partnerskich marek zaprojektowało całe swoje strony internetowe przy jego użyciu, a ich zespoły uwielbiały, jak jest przyjazny dla początkujących i prosty w obsłudze.

Aby uzyskać instrukcje krok po kroku, zapoznaj się z naszym przewodnikiem jak stworzyć niestandardowy motyw WordPress (bez kodu).

Po utworzeniu motywu możesz dodawać skróty do dowolnej części swojej witryny WordPress, przechodząc do SeedProd » Theme Builder.

Tutaj znajdź szablon, w którym chcesz użyć skrótu.

Następnie najedź kursorem myszy na ten szablon i kliknij „Edytuj projekt”, gdy się pojawi.

Spowoduje to otwarcie szablonu w narzędziu do tworzenia motywów SeedProd.

W menu po lewej stronie przewiń do sekcji „Zaawansowane”. Tutaj znajdź blok Shortcode i przeciągnij go na swój układ.

W podglądzie na żywo po prostu kliknij, aby wybrać blok Skrót.

Teraz możesz dodać swój shortcode do pola „Shortcode”.

Domyślnie SeedProd nie wyświetla podglądu krótkiego kodu na żywo.

Aby zobaczyć swój skrócony kod w akcji, kliknij przełącznik „Pokaż opcję skróconego kodu”.

Następnie możesz dodać trochę stylizacji do wyniku shortcode, wybierając zakładkę „Zaawansowane”.

Tutaj możesz zmienić odstępy, dodać niestandardowy CSS, a nawet dodać efekty animacji CSS.

Gdy będziesz zadowolony z wyglądu strony, kliknij przycisk „Zapisz”.

Następnie wybierz „Opublikuj”, aby skrót stał się aktywny.

Możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć niestandardowy krótki kod w akcji.

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak używać krótkich kodów WordPress w swoich motywach. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia strony docelowej w WordPress oraz naszym ostatecznym przewodnikiem po najskuteczniejszych elementach projektowych WordPress.

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.