Shortcode’y to specjalne znaczniki, które pozwalają tworzyć ciekawe wizualnie strony w CMS bez znajomości kodu HTML i CSS. Dzięki nim łatwo dodasz na stronę elementy interaktywne, takie jak treści wideo czy audio. Jak dokładnie działają shortcodes i jak z nich korzystać?
Spis treści
Shortcode – definicja
Shortcode to niewielki fragment kodu, którego używa się, aby wywołać określone funkcje. Na przykład, jeśli chcesz dodać galerię zdjęć na swoją stronę, zamiast ręcznie tworzyć kod, możesz po prostu użyć shorcode’u, który zrobi to automatycznie.
Shorcode’y są oznaczane nawiasami kwadratowymi, np. [“gallery”] czy [“video”]. Wystarczy wstawić do wpisu taki znacznik, a on wykona dla nas konkretne zadanie. Znacznik trzeba zwykle dostosować za pomocą atrybutów, o czym szerzej powiemy w dalszej części tekstu.
Shortcode’y WordPress
ShortCode’y wprowadzono do w wersji WrodPress 2.5 – w 2008 roku. Od tego czasu przeszły sporą ewolucję, pozwalając dziś pracować z treściami szybciej i wygodniej.
WordPress oferuje kilka rodzajów wbudowanych shorcode’ów, między innymi do wstawiania galerii, list odtwarzania audio lub wideo, czy tworzenia tabel. Możesz również tworzyć własne shorcode’y lub korzystać z tych dostarczanych przez wtyczki. Masz więc możliwość łatwego dodawania różnych funkcji szybko i bez znajomości kodu na zaawansowanym poziomie.
Shortcode w WordPressie – podstawowe znaczniki
Podstawowe kody dostępne w systemie WordPress, to:
- [“audio”] – umożliwia wstawienie pliku audio do posta lub strony. Należy określić źródło pliku, a WordPress wygeneruje odtwarzacz.
- [“playlist”] – umożliwia tworzenie playlisty z plików audio lub wideo.
- [“gallery”] – umożliwia tworzenie galerii obrazów. Można tu dostosować takie opcje, jak liczba kolumn, rozmiar obrazka, a także to, które obrazy mają być wyświetlane.
- [“video”] – podobnie jak w przypadku audio, ten shortcode pozwala na wstawienie pliku wideo z określonego źródła.
- [“embed”] – WordPress posiada wbudowaną funkcję oEmbed, która umożliwia osadzanie treści z innych serwisów (jak YouTube, Twitter, itp.) poprzez wklejenie URL. Shortcode [“embed”] daje dodatkowe opcje kontroli nad osadzanymi treściami, m.in. w zakresie ich rozmiarów na stronie.
- [“caption”] – umożliwia dodanie podpisu do obrazka. Użytkownik umieszcza obrazek wewnątrz tego shortcode’a, a następnie dodaje tekst, który chce wyświetlić jako podpis.
Powyższa lista obejmuje podstawowe, często używane znaczniki. Jak już powiedzieliśmy, możesz też tworzyć shortcode’y samodzielnie lub za pomocą wtyczek/rozszerzeń. Wykorzystując krótkie kody możesz na przykład dodawać do swoich wpisów graficzne banery call to action, podpis autora i inne powtarzalne elementy zwiększające czytelność.
Shortcodes WordPress – tabela
Przykłady krótkich kodów, które możesz wykorzystać w codziennej pracy z treściami, znajdziesz w poniższej tabeli:
| Shortcode | Opis |
|---|---|
| [„caption”] | Dodaje podpis do obrazu |
| [„gallery”] | Tworzy galerię zdjęć |
| [„audio”] | Wstawia odtwarzacz audio |
| [„video”] | Wstawia odtwarzacz wideo |
| [„playlist”] | Tworzy playlistę audio lub wideo |
| [„embed”] | Osadza treści z innych serwisów (np. YouTube, Twitter) |
| [post] | Wyświetla pojedynczy post |
| [posts] | Wyświetla listę postów |
| [category] | Wyświetla posty z danej kategorii |
| [tag] | Wyświetla posty z danym tagiem |
| [search] | Dodaje formularz wyszukiwania |
| [sitemap] | Wyświetla mapę strony |
| [loginform] | Wyświetla formularz logowania |
| [registerform] | Wyświetla formularz rejestracji |
| [passwordform] | Wyświetla formularz zmiany hasła |
| [profile] | Wyświetla profil użytkownika |
Jak wstawić ShortCode do tekstu?
W edytorze WordPress możesz to zrobić w kilku prostych krokach:
- Zaloguj się i utwórz nową stronę, lub edytuj istniejącą – po zalogowaniu wybierz z menu po lewej stronie opcję Strony lub Wpisy, w zależności od tego, gdzie chcesz wstawić shortcode. Następnie kliknij „Dodaj nowy” lub wybierz istniejący post/stronę do edycji.
- Przejdź do edytora tekstu. W edytorze WordPress znajdziesz pole, gdzie możesz wpisać i sformatować swój tekst. Jest to miejsce, w którym będziesz wstawiać shortcode.
- Wstaw shortcode – wpisz znacznik bezpośrednio w miejscu, w którym chcesz, aby treść lub funkcjonalność była wyświetlana. Na przykład, jeśli chcesz wstawić galerię zdjęć, wpisz [“gallery”] w miejscu, gdzie mają się pojawić grafiki. Pamiętaj, że shortcode’y są zawsze umieszczane w nawiasach kwadratowych.
- Dostosuj shortcode (opcjonalnie): Niektóre shortcode’y pozwalają na dostosowanie za pomocą atrybutów. Na przykład w krótkim kodzie dla galerii możesz określić, które zdjęcia mają być wyświetlane, i jakie będą mieć wymiary.
Pozostaje już tylko sprawdzenie efektów działań w trybie podglądu, a jeśli wszystko wygląda dobrze, zapisanie zmian i ich publikacja (po kliknięciu „opublikuj” lub „aktualizuj”).
Dostosowanie shortcode’ów – czym są atrybuty do ShortCodes?
Atrybuty to dodatkowe parametry, które można dołączyć do shortcode’u, aby zmodyfikować jego działanie lub wygląd. Jeśli na przykład tworzysz galerię, za pomocą atrybutów możesz ustalić, jakie wymiary mogą mieć zdjęcia i w jakim odstępie od siebie się znajdować. Atrybuty mogą kontrolować różne aspekty shortcode’u, takie jak rozmiar, kolor, liczbę wyświetlanych elementów, rodzaj zawartości itp.
Jak stosować atrybuty?
Atrybuty są dodawane wewnątrz nawiasów kwadratowych shortcode’u, po jego nazwie, zwykle w formacie: funkcja=”wartość”. Do kodu możesz dodać wiele atrybutów, oddzielając je spacjami.
I kilka przykładów:
- Shortcode [“gallery”], który umożliwia tworzenie galerii zdjęć. Przykładowe atrybuty to ids (określa, które obrazy mają być wyświetlane), columns (liczba kolumn), size (rozmiar obrazów).
Przykład: (nawias kwadratowy)gallery ids=”123,456,789″ columns=”3″ size=”medium”(nawias kwadratowy)
- Shortcode [“audio”] z pomocą którego wstawisz odtwarzacz audio. Możesz użyć atrybutu loop (powtarzanie), autoplay (automatyczne odtwarzanie) czy preload (sposób wczytywania pliku).
Przykład: (nawias kwadratowy)audio src=”audio.mp3″ loop=”on” autoplay=”off”(nawias kwadratowy)
- Shortcode [“video”]: Podobnie jak w przypadku audio, można sterować zachowaniem odtwarzacza wideo. Atrybuty takie jak width i height pozwalają kontrolować wymiary odtwarzacza.
Przykład: (nawias kwadratowy)video src=”video.mp4″ width=”640″ height=”360″(nawias kwadratowy)
- Shortcode [“posts”]: Może mieć atrybuty takie jak numberposts (liczba wyświetlanych postów) czy category (wyświetlanie postów z określonej kategorii).
Przykład: (nawias kwadratowy)posts numberposts=”5″ category=”News”(nawias kwadratowy)
Shortcode do treści możesz wprowadzić w wariancie zarówno w edytorze kodu HTML, jak i w edytorze wizualnym (pozwalającym tworzyć wpisy na podobnych zasadach jak w tradycyjnych edytorach tekstu, takich jak Word lub Google Docs).
Używając nieznanych wcześniej shortcode’ów, warto sprawdzić ich dokumentację, aby dowiedzieć się, jakie atrybuty są dostępne i jak je poprawnie stosować.
Shortcode a wtyczki
Krótkie kody spotkamy w wielu wtyczkach i rozszerzeniach do WordPress. Niektóre wtyczki pozwalają na korzystanie z biblioteki kodów przydatnych w codziennej pracy z treściami na stronie www. Przykładam takiej wtyczki jest Shortcodes Ultimate, która zawiera ponad 50 krótkich kodów i potrzebną dokumentację.
Wśród wartych uwagi narzędzi znajdziemy także plugin Shortcoder (Shortcoder – Create Shortcodes for Anything), który pozwala szybko tworzyć własne shortcode’y i używać ich w różnych miejscach na stronie Tego rodzaju rozszerzeń do WordPress jest oczywiście więcej, dlatego każda osoba zainteresowana takimi funkcjonalnościami łatwo znajdzie rozwiązania usprawniające działania z contentem na stronie.
Przeczytaj także: Wtyczki w pracy SEOwca
W Netim odpowiada za treści – dba o ich jakość, unikalność i wartość merytoryczną. Z contentem formalnie związany od 6 lat, w praktyce niemal od zawsze. Lubi słowa w każdej postaci, w wolnym czasie podróżnik-amator i czytelnik dobrej literatury.