Autor: Neil Lock

From the word itself, the word shortcode means exactly that: A short code; a shortcut code.

Shortcode’y pozwalają dodawać elementy do witryny (na przykład widżety) bez konieczności wprowadzania wielkich fragmentów kodu, jak zazwyczaj robią to programiści.

Na przykład zwykły fragment kodu pod względem długości wyglądałby prawdopodobnie mniej więcej tak:

<html>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam id aliquam turpis. Vivamus quis arcu tincidunt, finibus urna eget, placerat risus.

Aliquam arcu massa, finibus et lacinia sed, scelerisque nec augue. Quisque eu viverra sapien, vel consequat lorem. Integer vel erat tortor.

Phasellus condimentum magna eget congue venenatis. Suspendisse blandit vehicula consectetur.

Nullam sodales eleifend massa, in bibendum purus fermentum id.

Morbi et turpis feugiat, malesuada ipsum sit amet, interdum nulla. In non ante nec nisl mattis gravida sit amet id lectus.

</html>​

Na potrzeby tego przykładu załóżmy, że powyższy fragment kodu pozwala dodać cały akapit tekstu zastępczego Lorem Ipsum.

Now, a shortcode with the same exact function as the code above will look something like this, in contrast:

[lorem ipsum dolor estat]Lorem Ipsum[/lorem]​

You can see how they’re miles different from each other in terms of length.

Teraz wyobraź sobie, że oba fragmenty kodu – ten oryginalny, długi, w porównaniu z shortcode’em zawierającym tylko słowo „lorem” – robią dokładnie to samo: dodają tekst Lorem Ipsum.

This is what shortcodes do. They make adding widgets, functions, and a bunch of other cool stuff easier for both ordinary WordPress users and developers alike.

Where can I find shortcodes?

Jeśli masz ulubioną wtyczkę lub widżet, istnieje duża szansa, że udostępniają one shortcode do wykorzystania.

Shortcodes Ultimate, for example, will let you choose from hundreds of shortcodes that you can use on Page Builder Sandwich (or anywhere, actually) by simply grabbing the shortcode of your choice from Shortcode Ultimate’s repository or documentation page.

Adding Custom Shortcodes on PBS

W Page Builder Sandwich możesz dodawać shortcode’y bezpośrednio na swojej stronie, po prostu wpisując je lub wklejając w obszarze treści.

Zrobiliśmy to poniżej za pomocą shortcode’u z Shortcodes Ultimate, dodając pole z treścią na stronie demonstracyjnej Page Builder Sandwich:

Another thing you’ll find handy when using Page Builder Sandwich is our Shortcode Mapping feature.

Z jednego z naszych poprzednich artykułów na temat mapowania shortcode’ów (Shortcode Mapping), definicja brzmi następująco:

Shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

Oznacza to między innymi, że nie musisz już ręcznie szukać swoich shortcode’ów w ich odpowiednich dokumentacjach czy repozytoriach.

Dopóki masz zainstalowaną wtyczkę zawierającą dany shortcode w swojej witrynie WordPress, będzie on łatwo dostępny do użycia w Page Builder Sandwich.

So for example, if I wanted to add a WooCommerce shortcode on my page, all I have to do is make sure that it’s installed on my WordPress site, like so:

And then, to actually add the shortcode, I’ll just go to my page, and drag and drop the Shortcode Element:

Because we already have WooCommerce installed on our WordPress site, you can see that all of the shortcodes that are available on the WooCommerce plugin are already available on Page Builder Sandwich. This is what Shortcode Mapping is.

You can also see on the upper left corner that the ACF (Advanced Custom Fields) and MailChimp shortcodes are available– because we have those instlled on our WordPress site, too.

Jeśli więc chcesz dodać niestandardowe shortcode’y lub shortcode’y stworzone samodzielnie, możesz to zrobić, o ile masz je zainstalowane w swojej witrynie WordPress.

Here are some other helpful plugins that you can use to create your own custom shortcodes:

Istnieją dziesiątki najróżniejszych page builderów, więc zapewne zadajesz sobie pytanie: co takiego wyjątkowego jest w Page Builder Sandwich? Dlaczego w ogóle warto zawracać sobie nim głowę, jeśli masz już jakiś pod ręką?

W tym artykule wymienię kilka kluczowych funkcji Page Builder Sandwich, które czynią go wyjątkowym i absolutnie niezbędnym narzędziem zarówno dla twórców treści, jak i projektantów. Jeśli nie wiesz, czym jest page builder i dlaczego go potrzebujesz, nie martw się, mamy materiały, które mogą Ci pomóc.

1. Nie zobaczysz tylko wizualnej reprezentacji swoich treści – widzisz i edytujesz rzeczywistą zawartość

W innych narzędziach typu page builder widzisz obszary, które jedynie reprezentują Twoje treści. Rozmieszczasz zawartość głównie za pomocą bloków i prostokątnych kształtów, a wynik przypomina raczej szkielet pokazujący, jak Twoje treści będą docelowo wyglądać na stronie. Prowadzi to do ciągłego klikania przycisku podglądu, tylko po to, aby sprawdzić efekt końcowy.

Dzięki Page Builder Sandwich cała edycja odbywa się bezpośrednio na Twojej stronie (frontendzie) i edytujesz zawartość wprost na niej, uzyskując prawdziwe doświadczenie typu „to, co widzisz, jest tym, co otrzymujesz”.

2. Szybka i łatwa bezpośrednia edycja bez tych wszystkich irytujących wyskakujących okienek

Wyskakujące okna (pop-upy) stały się stałym elementem page builderów. W większości z nich, jeśli chcesz cokolwiek edytować w układzie strony – czy to nagłówek, etykietę przycisku, czy krótki tekst podtytułu – musisz najpierw poczekać, aż otworzy się okno dialogowe, i dokonać w nim zmian.

Naszym celem było zminimalizowanie użycia wyskakujących okien w całym Page Builder Sandwich. Dzięki ich usunięciu edycja dowolnych treści stała się łatwiejsza i bardziej płynna niż kiedykolwiek.

Edycja odbywa się w prosty sposób – kliknij tekst, aby umieścić w nim kursor, i po prostu zacznij pisać. Nie musisz już czekać na okno dialogowe z edytorem TinyMCE, aby rozpocząć edycję. Co najlepsze, nadal możesz swobodnie przeciągać i upuszczać swoje elementy.

Kolejną innowacją, która ułatwia bezproblemową edycję, jest zawsze dostępny inspektor. Inspektor służy jako Twój przybornik i edytor właściwości. Narzędzia do formatowania treści: kolory tekstu, nagłówki, dostosowywanie rozmiaru czcionki, marginesy zewnętrzne i wewnętrzne (paddings), obramowania, cytaty blokowe i wiele innych są dostępne na wyciągnięcie ręki za pomocą prostego kliknięcia.

3. Ponowne wykorzystanie funkcjonalności WordPressa

Kolejną rzeczą, którą zauważyliśmy w innych page builderach, jest to, że często wymyślają koło na nowo. Niektóre wdrażają własne próbniki kolorów, narzędzia do przesyłania obrazów, kreatory galerii i różne inne narzędzia. Samo w sobie nie ma w tym nic złego, ale WordPress jest prawdziwą skarbnicą fragmentów kodu, więc dlaczego z nich nie skorzystać?

WordPress to potężna i wspaniała platforma, zawierająca mnóstwo świetnych narzędzi stworzonych przez rzesze znakomitych współtwórców. Page Builder Sandwich w jak największym stopniu wykorzystuje funkcjonalności, które są już wbudowane w WordPressa.

Zamiast tworzyć własny próbnik kolorów, korzystamy z próbnika Iris. Zamiast własnego narzędzia do przesyłania obrazów, używamy menedżera multimediów. Do tego dochodzą backbonejs, underscorejs, wp.hooks i wp.shortcode, by wymienić tylko kilka przydatnych skryptów. Korzystamy z nich wszystkich, co ułatwiło nam pracę i przełożyło się na bardziej stabilną bazę kodu.

Ponowne wykorzystanie funkcji WordPressa przyniosło także kilka wspaniałych niespodzianek. Na przykład, skoro do wstawiania obrazów użyliśmy menedżera multimediów, miłym zaskoczeniem było to, że od razu mogliśmy obsługiwać galerie WordPressa, listy odtwarzania wideo i audio oraz zdalne adresy URL bez dodatkowego wysiłku. Mogliśmy również po prostu użyć menedżera multimediów do edycji obrazów, co wyeliminowało godziny niepotrzebnych problemów programistycznych.

4. Nawigacja klawiaturą i skróty klawiszowe

W innych page builderach Twoim przyjacielem jest mysz. Przeciągasz i upuszczasz nią elementy oraz klikasz dwukrotnie, aby je edytować. Jednak klawiatura jest często pomijana.

Na przykład w niektórych edytorach nie można łatwo edytować tekstu o jeden akapit/sekcję wyżej niż miejsce bieżącej edycji, ponieważ trzeba zamknąć jedno okno dialogowe i kliknąć w kolejne. W Page Builder Sandwich możesz poruszać się za pomocą klawiatury. Użyj klawiszy strzałek, aby przemieszczać się między treściami – działa to nawet wtedy, gdy pozostała treść jest schowana w innym wierszu lub kolumnie.

Kolejną ważną funkcją są skróty klawiszowe cofania i ponawiania. Na początku mogą nie wydawać się niczym wielkim, ale pomyśl o tym: co jeśli przypadkowo przeciągniesz i upuścisz treść w złym miejscu? W niektórych page builderach musisz przeciągnąć ją z powrotem na pierwotną pozycję. W Page Builder Sandwich działają zarówno opcja „cofnij”, jak i „ponów”. Niezależnie od tego, czy chcesz poprawić wpisany tekst, czy przywrócić przeciągniętą zawartość (lub wiele przeciągniętych elementów), po prostu naciśnij cofnij lub ponów. Cofanie i ponawianie działa dla przeciąganych treści, a nawet zmian właściwości, takich jak rozmiary czcionek i marginesy wewnętrzne wierszy. Czyni je to potężnymi narzędziami w Twoim arsenale edycyjnym.

5. Prawdziwy frontendowy page builder – bardziej relaksująca i bezproblemowa edycja

Naszym założeniem podczas prac rozwojowych było to, że edycja na frontendzie nie powinna sprawiać wrażenia, jakby nadal korzystało się z narzędzi backendowych. Użytkownik nie powinien czuć, że kreator powstał początkowo dla panelu administracyjnego, a dopiero później został przeniesiony na frontend.

Podsumowując, dla mnie głównym wyróżnikiem Page Builder Sandwich jest fakt, że stworzyliśmy go z myślą o byciu „prawdziwym” frontendowym kreatorem stron – świeżym spojrzeniem na to, jak powinna wyglądać edycja bezpośrednio na stronie.

Ten artykuł stanowi krótkie podsumowanie działania Page Builder Sandwich i ma być wprowadzeniem dla tych, którzy chcą dowiedzieć się, jak nasz kreator stron integruje się z różnymi elementami WordPressa. Nie będę się zagłębiać w poszczególne funkcje Page Builder Sandwich – jeśli Cię interesują, przejdź na naszą stronę z filmami, gdzie prezentujemy każdą funkcję z osobna w krótkich screencastach.

Jeśli chcesz dowiedzieć się, czym Page Builder Sandwich różni się od innych kreatorów stron dostępnych na rynku, sprawdź nasz artykuł How Page Builder Sandwich Is Different from the Rest.

Gdzie się znajduje? I co można za jego pomocą edytować?

W przeciwieństwie do wielu innych kreatorów stron, Page Builder Sandwich działa bezpośrednio w warstwie wizualnej (front-end) Twojej witryny. Jeśli jesteś w panelu administracyjnym (back-end), udostępniliśmy przycisk „Frontend” obok przycisków edytora treści, który przeniesie Cię na stronę główną lub do podglądu witryny.

Page Builder Sandwich pozwala na edycję wpisów, stron oraz własnych typów wpisów (custom post types). Nie umożliwia jednak bezpośredniej edycji zbiorczych wpisów blogowych na stronie głównej ani innych obszarów witryny innych niż pojedyncze wpisy czy strony. Pomyśl o tym w ten sposób: jeśli to, co chcesz edytować, ma edytor treści w panelu administracyjnym (jak „Dodaj nowy wpis” i „Dodaj nową stronę”), możesz użyć Page Builder Sandwich. Możesz edytować poszczególne strony i wpisy na blogu, a jeśli na przykład masz wtyczkę wprowadzającą menu restauracji lub elementy portfolio, je również możesz edytować.

Będąc na front-endzie, na Twoim pasku administratora umieściliśmy niebieski przycisk „Edit with Page Builder Sandwich”. Wystarczy go kliknąć, aby rozpocząć edycję strony.

Bezpośrednia edycja treści

Dzięki Page Builder Sandwich sprawiliśmy, że edycja treści jest tak prosta i bezproblemowa, jak to tylko możliwe. Edycja treści jest intuicyjna i nieskomplikowana – po prostu kliknij i pisz. To takie proste.

Przedstawiamy inspektora

Zauważyliśmy, że wiele kreatorów stron korzysta z mnóstwa wyskakujących okienek (pop-upów). Osobiście nie lubię wyskakujących okienek, ponieważ rozpraszają uwagę i w zasadzie mówią: „hej, przerwij to, co robisz, dopóki nie wypełnisz tych pól”. Zaburzają płynność procesu edycji, który w przeciwnym razie byłby bardzo sprawny. Z tego powodu całkowicie zminimalizowaliśmy użycie wyskakujących okienek i zamiast tego stworzyliśmy inspektora.

Inspektor to panel boczny zawierający wszystkie narzędzia do formatowania i układania treści, jakich kiedykolwiek będziesz potrzebować. Inspektor może być zadokowany po lewej lub prawej stronie ekranu, dzięki czemu z łatwością widzisz to, co edytujesz.

Z poziomu inspektora możesz dostosowywać różne właściwości tekstu, takie jak nagłówki, rozmiary czcionek, pogrubienie, kursywa, kolory tekstu i wiele więcej. Poza tym pozwala on na dodawanie obrazów oraz tworzenie wierszy lub układów kolumnowych. Umożliwia również bardziej zaawansowaną edycję, taką jak dopasowywanie wierszy do pełnej szerokości strony, zmiana kolorów tła wierszy i kolumn, pionowe wyrównanie treści, a także marginesy i tła. To potężne narzędzie i przekonasz się, że korzystasz z niego przez większość czasu.

Integracja z motywami WordPressa

Page Builder Sandwich ze swej natury nie zawiera niemal żadnych własnych stylów. Kiedy edytujesz treść, style, które widzisz, opierają się głównie na Twoim motywie.

Integracja ze shortcode’ami

Shortcode’y to ważny element WordPressa i najprawdopodobniej będziesz korzystać z wielu z nich w swojej witrynie. Page Builder Sandwich świetnie sobie z nimi radzi – Twoje shortcode’y są renderowane bezpośrednio na front-endzie. Pozostają one również w pełni edytowalne, a najlepsze jest to, że po ich edycji zostaną ponownie wyrenderowane wraz z wprowadzonymi zmianami.

Dla wygody możesz edytować swoje shortcode’y za pomocą inspektora. Jeśli potrzebujesz większej kontroli, możesz także kliknąć dwukrotnie na shortcode, aby edytować go w postaci surowego kodu. Ponadto wszystkie shortcode’y dostępne w Twojej witrynie są wyświetlane na liście w inspektorze, co ułatwia ich wstawianie do treści.

A co ze zbędnym obciążeniem strony?

Kto lubi wolne strony internetowe? Na pewno nie my i z pewnością nie Ty. Zadbaliśmy o to, aby Page Builder Sandwich miał praktycznie zerowy wpływ na wydajność Twojej witryny. Dla niezalogowanych użytkowników wczytywane są jedynie podstawowe style CSS wierszy i kolumn oraz niezbędne skrypty JS i CSS dla użytych przez Ciebie shortcode’ów.

Dla programistów

Jeśli jesteś programistą i masz shortcode’y w swoich wtyczkach do WordPressa, Page Builder Sandwich udostępnia Shortcode API, dzięki czemu możesz z łatwością zaoferować swoim klientom pola umożliwiające łatwe tworzenie i modyfikowanie shortcode’ów.

Jeśli chcesz jeszcze bardziej rozszerzyć możliwości lub zintegrować się z wybranymi elementami Page Builder Sandwich, oferujemy również zestaw przydatnych akcji i filtrów (hooks), z których możesz skorzystać.