Z naszego doświadczenia wynika, że jedną z podstawowych rzeczy, których powinieneś nauczyć się w WordPress, jest sposób używania shortcode w widżetach paska bocznego.
Dzieje się tak, ponieważ wiele wtyczek używa skrótów do wyświetlania swoich treści zamiast własnych widżetów. Wiedza, jak używać skrótów na paskach bocznych, pozwala na więcej z Twoją witryną i maksymalne wykorzystanie różnych wtyczek.
Ten artykuł pokaże Ci, jak używać shortcode'ów w widżetach paska bocznego WordPress. Omówimy metody zarówno dla klasycznych motywów, jak i motywów blokowych.
Dlaczego używać skróconych kodów w widżetach paska bocznego WordPress?
Kody krótkie pozwalają na dodawanie zaawansowanych treści i funkcji do Twojej witryny, w tym formularzy kontaktowych, tabel, najpopularniejszych komentujących i wielu innych. WordPress zawiera kilka wbudowanych kodów krótkich, ale niektóre wtyczki dodają również własne kody krótkie.
Na przykład, możesz wyświetlać zdjęcia z Instagrama w pasku bocznym WordPress za pomocą kodu krótkiego dostarczonego przez Smash Balloon Instagram Feed.
Ta treść będzie następnie wyświetlana na całej Twojej stronie WordPress, więc nie musisz dodawać jej ręcznie do każdej strony i wpisu. Może to zaoszczędzić mnóstwo czasu i wysiłku oraz pomóc w utrzymaniu spójnego projektu Twojej witryny.
Mając to na uwadze, przyjrzyjmy się kilku różnym sposobom dodawania i używania krótkich kodów w widżetach paska bocznego WordPress. Po prostu użyj szybkich linków poniżej, aby przejść bezpośrednio do metody, której chcesz użyć.
Metoda 1: Dodawanie skróconego kodu do edytora widżetów blokowych WordPress (klasyczne motywy)
Większość darmowych i płatnych klasycznych motywów WordPress zawiera paski boczne gotowe na widżety. Mając to na uwadze, często można po prostu dodać widżet kodu krótkiego do paska bocznego Twojej witryny.
Najpierw przejdź do Wygląd » Widżety w swoim panelu. Tutaj zobaczysz wszystkie różne obszary, w których możesz dodawać widżety w WordPress, w tym pasek boczny.
Po prostu kliknij przycisk „+ Dodaj blok” i zacznij wpisywać „Shortcode”.
Gdy pojawi się odpowiedni blok, przeciągnij go na pasek boczny WordPress.
Możesz teraz dodać swój kod krótki do bloku.
Po zakończeniu nie zapomnij kliknąć „Aktualizuj”, aby zmiany zostały wprowadzone na żywo.
Możesz teraz odwiedzić swój blog WordPress lub witrynę, aby zobaczyć kod krótki w akcji.
Metoda 2. Dodawanie krótkiego kodu do edytora pełnej witryny (motywy blokowe)
Jeśli używasz motywu blokowego, możesz dodać kod krótki do paska bocznego za pomocą Edytora Pełnej Witryny. W panelu WordPress przejdź do Motywy » Edytor.
Zobaczysz teraz ustawienia edycji swojego motywu blokowego.
Aby edytować pasek boczny swojego motywu, zazwyczaj musisz kliknąć menu „Wzorce”.
Teraz przewiń w dół do „Części szablonu”.
Tutaj znajdziesz domyślne części szablonu Twojego motywu blokowego, takie jak nagłówki, stopki i paski boczne. Klasyczne motywy zazwyczaj kategoryzują te elementy jako obszary widżetów.
Podobnie jak w przypadku klasycznych motywów, Twój motyw blokowy może, ale nie musi, zawierać część szablonu paska bocznego. W takim przypadku może być konieczne samodzielne utworzenie go. Możesz przeczytać nasz przewodnik dla początkujących po Edytorze Pełnej Witryny WordPress, aby dowiedzieć się, jak to zrobić.
Gdy już zlokalizujesz swój pasek boczny, po prostu go kliknij.
Następnie po prostu kliknij przycisk „Edytuj” z ikoną ołówka.
Spowoduje to przejście do edytora blokowego w celu edycji paska bocznego.
Teraz, podobnie jak w przypadku używania edytora bloków, możesz kliknąć przycisk „+ Dodaj blok” w dowolnym miejscu.
Następnie wybierz blok „Shortcode”.
Po zakończeniu po prostu dodaj skrócony kod, tak jak zwykle.
Następnie kliknij „Zapisz”, aby zatwierdzić zmiany.
Wskazówka Pro: Jeśli niedawno przeszedłeś z motywu klasycznego na motyw blokowy i chcesz użyć swojego starego widżetu paska bocznego jako bloku, przeczytaj nasz przewodnik o konwertowaniu widżetu WordPress na blok.
Metoda 3: Używanie widżetu Niestandardowy HTML (bardziej konfigurowalny)
Czasami możesz chcieć wyświetlić inną treść wraz z kodem krótkim. Na przykład, RafflePress może dodać konkurs lub rozdanie do Twojego paska bocznego za pomocą kodu krótkiego. Aby przyciągnąć jeszcze więcej uwagi do konkursu, możesz chcieć wyświetlić nagłówek nad konkurencją.
Zamiast tworzyć oddzielne bloki kodu krótkiego i nagłówka, możesz po prostu dodać kod krótki i tekst do bloku Niestandardowy HTML.
Pomaga to w ładnym ułożeniu różnych treści. Możesz również stylizować blok za pomocą HTML, dzięki czemu możesz dokładnie kontrolować jego wygląd w pasku bocznym.
Więcej szczegółów znajdziesz w naszej kompletnej recenzji RafflePress.
Domyślnie blok Niestandardowy HTML nie obsługuje kodów krótkich, ale możesz to łatwo zmienić, dodając niestandardowy kod do WordPress. Po dodaniu tego kodu możesz używać kodów krótkich w dowolnym bloku Niestandardowy HTML na całej Twojej witrynie WordPress.
Często znajdziesz przewodniki z instrukcjami dotyczącymi dodawania niestandardowego kodu do pliku functions.php Twojej witryny. Jednak nie jest to zalecane, ponieważ wszelkie błędy w kodzie mogą spowodować typowe błędy WordPress, a nawet całkowicie zepsuć Twoją witrynę.
Właśnie dlatego WPCode jest do tego.
Ta darmowa wtyczka ułatwia dodawanie niestandardowego CSS, PHP, HTML i innych do WordPress, bez ryzyka dla Twojej witryny. Co więcej, zawiera bibliotekę gotowych fragmentów, w tym kod umożliwiający używanie skróconych kodów w widżetach tekstowych.
Na początek musisz zainstalować i aktywować WPCode. Więcej informacji znajdziesz w naszym przewodniku krok po kroku o instalacji wtyczki WordPress.
Następnie przejdź do Fragmenty kodu » Dodaj fragment w panelu administracyjnym WordPress. Teraz możesz zacząć wpisywać „shortcode”.
Gdy się pojawi, najedź kursorem myszy na następający fragment: „Włącz wykonywanie skróconego kodu w widżetach tekstowych”.
Następnie możesz kliknąć „Użyj fragmentu”.
Otworzy to fragment w edytorze WPCode. WPCode skonfiguruje ustawienia fragmentu za Ciebie, więc możesz po prostu kliknąć przełącznik „Nieaktywny”, aby zmienił kolor na niebieski.
Po wykonaniu tej czynności kliknij „Zaktualizuj”, aby fragment stał się aktywny.
Teraz możesz dodać krótki kod do dowolnego widżetu tekstowego.
Po prostu przejdź do Wygląd » Widżety i wpisz „Niestandardowy HTML” w pasku wyszukiwania.
Gdy pojawi się właściwy blok, przeciągnij go na boczny pasek swojej strony internetowej.
Po wykonaniu tej czynności możesz dodać swój kod HTML i skrócony kod do bloku.
Gdy będziesz zadowolony z konfiguracji widżetu, kliknij „Zaktualizuj”.
Teraz, jeśli odwiedzisz swoją stronę internetową, zobaczysz shortcode i niestandardowy HTML na żywo.
FAQ: Używanie krótkich kodów w widżetach paska bocznego WordPress
Niezależnie od używanego motywu, powinieneś być w stanie dodawać shortcody do paska bocznego, korzystając z jednej z powyższych metod.
Jeśli jednak potrzebujesz dodatkowej pomocy, oto niektóre z najczęściej zadawanych pytań dotyczących dodawania krótkich kodów do paska bocznego.
Jak zmienić miejsce wyświetlania widżetu paska bocznego?
Lokalizacja paska bocznego jest kontrolowana przez Twój motyw WordPress. Jeśli nie jesteś zadowolony z pozycji paska bocznego, być może będziesz mógł ją zmienić za pomocą ustawień motywu.
Wiele motywów WordPress pozwala wybierać między różnymi układami. Często obejmuje to wyświetlanie paska bocznego po różnych stronach ekranu.
Możesz przejść do Niestandardowych ustawień motywu WordPress lub Edytora Pełnej Witryny, aby zobaczyć dostępne obszary paska bocznego.
Jak dodać pasek boczny do mojego motywu WordPress?
Jeśli Twój motyw nie ma paska bocznego, możesz utworzyć motyw potomny, a następnie dodać pasek boczny za pomocą kodu.
Przeczytaj nasz przewodnik o dodawaniu niestandardowych nagłówków, stopek i pasków bocznych w WordPress, aby uzyskać więcej informacji.
Jeśli nie czujesz się komfortowo z pisaniem kodu, możesz również stworzyć niestandardowy motyw WordPress za pomocą wtyczki takiej jak SeedProd. Możesz użyć tej popularnej wtyczki do tworzenia stron, aby zaprojektować własny motyw i pasek boczny za pomocą prostego edytora typu „przeciągnij i upuść”.
Aby uzyskać instrukcje krok po kroku, zapoznaj się z naszym przewodnikiem na temat tworzenia niestandardowego motywu WordPress bez kodu.
Jak użyć innego krótkiego kodu na każdym poście lub stronie?
Czasami możesz chcieć używać różnych krótkich kodów w niektórych swoich wpisach i stronach. Na przykład, możesz chcieć wyświetlić najpopularniejsze wpisy na swojej stronie archiwum i wyświetlać reklamy na swojej stronie głównej.
Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat wyświetlania różnych pasków bocznych dla każdego wpisu i strony w WordPress.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodawać krótkie kody do widżetów paska bocznego WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat pokazywania lub ukrywania widżetów na określonych stronach WordPress oraz naszymi ekskluzywnymi wyborami najlepszych motywów przyjaznych Gutenbergowi.
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.
Dennis Muthomi
Odkryłem, że stworzenie standardowego szablonu łączącego skróty z niestandardowym kodem HTML i klasami CSS znacznie ułatwia utrzymanie spójnej identyfikacji wizualnej, jednocześnie pozwalając na dostosowanie stylów do potrzeb klienta.
Używanie WPCode zamiast bezpośredniej edycji pliku functions.php uchroniło mnie przed wieloma potencjalnymi problemami na różnych stronach. Świetna wskazówka, aby uwzględnić to bezpieczniejsze podejście w przewodniku!
Mrteesurez
Czy masz na myśli, że w ostatniej metodzie mogę dodać krótkie kody do oryginalnego pola widżetu HTML i sprawić, że będzie działać dobrze, tak jak pole widżetu krótkich kodów?
Wsparcie WPBeginner
For now you should be able to
Admin
Ralph
Krótkie kody są jedną z najlepszych rzeczy w WordPressie. Oszczędzają mnóstwo czasu, gdy musimy zmienić kod tylko w jednym miejscu, a wszędzie indziej aktualizuje się sam. Kocham je!
Używałem Ad Insertera przez lata, ale w darmowej wersji jest on ograniczony do 20 krótkich kodów. Zdecydowanie teraz przejdę na metodę WordPressa, gdy tylko się o niej dowiedziałem.
Wsparcie WPBeginner
Glad you found it helpful
Admin
Arkanum
Thanks! For me it’s work
Wsparcie WPBeginner
Glad our guide helped
Admin
Zdenko Zec
Witam. Próbowałem na mojej stronie internetowej opracowanej lokalnie, ale to nie działa. Próbowałem zarówno z widżetem tekstowym, jak i dodając filtr do functions.php i używając niestandardowego HTML. Czy możesz podzielić się swoimi przemyśleniami na ten temat? Pozdrawiam
Wsparcie WPBeginner
Możesz chcieć upewnić się, że używany skrót jest działającym skrótem.
Admin
Wielkie dzięki!!
Świetny post! Dziękuję bardzo
Wsparcie WPBeginner
You’re welcome
Admin
Muhammad Zeeshan
Cześć
Dzień dobry
Właściwie chcę wyświetlić tylko tekst posta na konkretnej stronie, jak mogę to zrobić?
Wsparcie WPBeginner
W związku z tym, czego szukasz, być może warto przyjrzeć się:
https://www.wpbeginner.com/plugins/how-to-insert-wordpress-page-content-to-another-page-or-post/
Admin
Rahul
Wczoraj zainstalowałem wtyczkę do krótkich kodów. Ale nie mogłem jej użyć. Ale teraz mi się udało
Wsparcie WPBeginner
Glad our article could help
Admin
Ahmer
Bardzo dobry i pouczający post o tym, jak używać shortcode'ów.
Szukałem takiego artykułu.
Skrócone kody naprawdę robią różnicę na blogach, a wiele osób nie wie, jak ich poprawnie używać.
MikeL
Opcja niestandardowego kodu działa tylko w obszarze TREŚCI widżetu, ale nie w obszarze TYTUŁU.
nicole
gdzie faktycznie tworzy się skrócone kody?? Szukam miejsca, gdzie można znaleźć ustawienia pokazane na tym zrzucie ekranu:
Neville
Cześć,
Mam doświadczenie w tworzeniu stron internetowych, ale jestem nowy w WooCommerce. Tworzę stronę internetową dla klienta, opartą na motywie Avada WP (5.6.1). Jest to w trakcie rozwoju:
Zobaczysz, że na stronie głównej znajduje się karuzela, ale bezskutecznie szukałem wtyczki, która ją zastąpi i pozwoli mi wyświetlać zmienne produkty w stylu galerii/siatki. Musi działać z wariantami produktów Woocommerce, np. cena, kategoria, krótki opis. Dodanie do koszyka również byłoby idealne.
Zastanawiam się, czy można do tego użyć krótkich kodów?
Jeśli tak, jak można je dodać, aby zastąpić karuzelę?
Dzięki.
Neville
Brendan
Cześć,
Próbowałem użyć widżetu shortcode, tak jak sugerowałeś, ale nadal nie mogę wyrównać widżetów w stopce obok siebie, zamiast jeden nad drugim.
Czy możesz pomóc, proszę?
Dziękuję!
Brendan
lukman
To.nie.działa
Mathiew Burkett
Cześć
Utworzyłem wtyczkę Site Specific Plugin i aktywowałem ją.
Próbuję sprawić, aby skrócony kod działał w innym obszarze, gdzie skrócony kod nie działa obecnie z moim motywem.
Używam motywu w wersji Socrates 3.08.
Oto link do zrzutu ekranu, który stworzyłem, pokazujący dwa miejsca, które zaznaczyłem czerwonym kółkiem, gdzie potrzebuję, aby shortcode działał, i kliknąłem prawym przyciskiem myszy na obszarze, gdzie muszę dodać wtyczkę i sprawdziłem ją, aby znaleźć kod w obszarze mojego motywu, gdzie próbuję sprawić, aby shortcode działał, i dodałem również zrzut ekranu kodu.
Czy ktoś mógłby mi powiedzieć, czy istnieje funkcja, którą mógłbym dodać do wtyczki specyficznej dla strony, która sprawi, że krótki kod zadziała w dwóch obszarach, które zaznaczyłem.
Gurpreet Singh Saini
Dzięki, działa.
Bilal
tak, działa.
WP Life
Cześć,
Użytkownik zgłosił po nowej aktualizacji WordPress 4.5.3.
Krótki kod nie działa w widżecie tekstowym..
Nasza wtyczka to
Potrzebuję pomocy, z góry dziękuję.
WP Life
Wsparcie WPBeginner
Zgłoś konflikt do autora wtyczki.
Admin
Vinicius
Dzięki!
Monuruzzaman Milon
Naprawdę niesamowite, uwielbiam wszystkie Twoje posty na blogu. Ponieważ uczę się o tworzeniu motywów WordPress. Naprawdę pomaga mi to w haku add_filter.
Dzięki,
Alfredo
Dziękuję bardzo.
Sędziowie Arra
Dziękuję za to. Ratunek. Używałem wtyczki (GCAL) ze specjalnym widżetem bocznym, ale nie pozwalała mi dodać linku do kalendarza pod nim bez zagłębiania się w kod. Po prostu dodanie tego i użycie skróconego kodu naprawdę załatwiło sprawę. Wielkie dzięki. Działa w 4.1.1
Manuel Meurer
Świetna wskazówka, nadal działa świetnie w Wordpress 4.0!
pajęczyna
This saved my day – thanks!
slim shady
czy zinterpretuje [ ] wszystko jako skrócony kod?
Wsparcie WPBeginner
Nie, tylko jeśli krótki kod jest zarejestrowany. Na przykład, jeśli nie masz krótkiego kodu [apples], zostanie on wyświetlony tak, jak jest.
Admin
firoz
Chcę dodać skrócony kod do paska bocznego
queenofthehivemomof5
Próbowałem umieścić go na dole szablonu functions PHP wewnątrz tagów php i nadal otrzymuję surowy kod otaczający mój shortcode. Shortcode jest wyświetlany, ale pokazuje [raw] [/raw] po obu jego stronach.
Jakieś inne sugestie? Z góry dziękuję!
wpbeginner
@queenofthehivemomof5 Musisz wkleić go między tagi php i upewnić się, że nie jest częścią żadnej innej funkcji… więc najlepiej umieścić go na dole.
queenofthehivemomof5
Czy jest jakaś konkretna część pliku functions.php, do której powinienem to wkleić? U mnie to nie działa. Otrzymuję wynik mojego krótkiego kodu, ale jest on otoczony przez „Raw”
[raw][/raw]KARTA 1KARTA 2KARTA 3[raw][/raw]Zawartość karty 1[raw] [raw] [raw][/raw] (coś w tym stylu)
edward.caissie
Tę linię kodu można dodać do wtyczki zawierającej shortcode, a efekt będzie taki sam… chociaż dodanie tej linii kodu do pliku functions.php motywu potomnego byłoby bardziej przyszłościowym rozwiązaniem.