Signum
Dokumentacja szablonu

Shortcody i sposoby użycia

  • Start
  • Instrukcja shortcode

Ta podstrona pokazuje publiczne shortcody dostępne w warstwie wizualnej. Wklejaj je w plikach webroot/content, szablonach webroot/templates albo w treściach HTML z panelu, zależnie od modułu.

Przykłady są zapisane jako instrukcja, dlatego widzisz kod shortcode, a nie wynik jego działania.

Strony z bazy

Shortcody page działają dla stron tworzonych w module Strony. Najczęściej używa się ich w szablonach z katalogu webroot/templates.

Na listingu modułu Strony można zapisać domyślne pola nowej wersji językowej: rodzaj strony, szablon, nazwę, okruszek, description i H1. Przycisk Wstaw domyślne w formularzu wersji uzupełnia je zapisanym schematem. W schemacie można używać {name}, {city} lub {miasto}, które zostaną zastąpione aktualną nazwą strony.

ShortcodeOpis
__LEFT__page:id__RIGHT__ID tłumaczenia strony.
__LEFT__page:item_id__RIGHT__ID wpisu bazowego strony.
__LEFT__page:panel_title__RIGHT__Tytuł roboczy widoczny w panelu.
__LEFT__page:name__RIGHT__Nazwa strony używana m.in. w title, jeżeli nie ustawisz osobnego meta title.
__LEFT__page:breadcrumb_name__RIGHT__Nazwa strony używana w okruszkach.
__LEFT__page:page_type__RIGHT__Typ schema wybrany w panelu.
__LEFT__page:h1__RIGHT__H1 strony. Jeżeli pole jest puste, system używa nazwy strony. Obsługuje <br>.
__LEFT__page:slug__RIGHT__Slug aktualnej wersji językowej.
__LEFT__page:url__RIGHT__Publiczny URL strony.
__LEFT__page:image__RIGHT__Obraz SEO/OG strony albo domyślny obraz z ustawień SEO.
__LEFT__page:description__RIGHT__Meta description strony.
__LEFT__page:body__RIGHT__Treść strony w wersji escapowanej.
__LEFT__page:body:raw__RIGHT__Surowa treść HTML strony. To podstawowy shortcode do wstrzykiwania zawartości.
__LEFT__page:contact_form:raw__RIGHT__Formularz kontaktowy przypisany do strony, jeżeli jest używany.

Warunki pozwalają pokazać fragment tylko wtedy, gdy dane pole jest uzupełnione.

Przykład szablonu strony

<section class="page-content">
  <h1>__LEFT__page:h1__RIGHT__</h1>

  __LEFT__page:if:image__RIGHT__
  <img src="__LEFT__page:image__RIGHT__" alt="__LEFT__page:h1__RIGHT__">
  __LEFT__/page:if:image__RIGHT__

  <div class="content">
    __LEFT__page:body:raw__RIGHT__
  </div>
</section>

Breadcrumbs

__LEFT__breadcrumbs__RIGHT__ generuje okruszki na podstawie aktualnej strony, jej rodziców i danych zapisanych w bazie. Shortcode zwraca elementy <li>, więc wklejaj go wewnątrz listy.

Przykład użycia

<ul class="breadcrumbs-link">
  __LEFT__breadcrumbs__RIGHT__
</ul>

Przykładowy wynik logiczny

<li><a href="/">Strona główna</a></li>
<li><a href="/specjalizacja">Specjalizacja</a></li>
<li aria-current="page">Prawo cywilne</li>

Dla ręcznych plików HTML możesz sterować nazwą w breadcrumbs przez front matter: breadcrumb_name, potem pomocniczo breadcrumb albo menu.

Menu

Menu może być renderowane jako całość z matrycy przypisanej w panelu albo składane ręcznie z shortcode pojedynczych pozycji.

Shortcode / placeholderOpis
__LEFT__menu:main__RIGHT__Renderuje menu o shortcode main według matrycy z panelu.
__LEFT__menu-name:token__RIGHT__Zwraca nazwę pojedynczej pozycji menu.
__LEFT__menu-link-token__RIGHT__Zwraca link pojedynczej pozycji menu.
__LEFT__items__RIGHT__Placeholder matrycy całego menu. W tym miejscu system wstawia pozycje.
__LEFT__children__RIGHT__Placeholder matrycy pozycji z dziećmi.
__LEFT__url__RIGHT__URL pozycji menu w matrycy pozycji.
__LEFT__label__RIGHT__Nazwa pozycji menu w matrycy pozycji.
__LEFT__target__RIGHT__Atrybut target, jeżeli pozycja otwiera się w nowym oknie.
__LEFT__rel__RIGHT__Atrybut rel dla linku.
__LEFT__active_class__RIGHT__Klasa aktywnej pozycji, jeżeli system rozpozna aktualny URL.

Matryca całego menu

<nav class="main-menu">
  <ul class="menu-list">__LEFT__items__RIGHT__</ul>
</nav>

Matryca pozycji bez dzieci

<li class="__LEFT__active_class__RIGHT__">
  <a href="__LEFT__url__RIGHT__"__LEFT__target__RIGHT____LEFT__rel__RIGHT__>__LEFT__label__RIGHT__</a>
</li>

Matryca pozycji z dziećmi

<li class="has-children __LEFT__active_class__RIGHT__">
  <a href="__LEFT__url__RIGHT__"__LEFT__target__RIGHT____LEFT__rel__RIGHT__>__LEFT__label__RIGHT__</a>
  <ul class="sub-menu">__LEFT__children__RIGHT__</ul>
</li>

W panelu menu jest też Kreator matrycy, który pomaga zamienić wklejony kod HTML menu na strukturę matrycy.

Matryce list

Matryce list służą do renderowania powtarzalnych rekordów danych bez JavaScriptu. W panelu zapisujesz jedną matrycę wiersza i nazwy kolumn, a konkretne dane trzymasz bezpośrednio na podstronie.

Shortcode / placeholderOpis
__LEFT__matrix-list:shortcode__RIGHT__...__LEFT__/matrix-list__RIGHT__Renderuje dane wpisane między tagami według matrycy z panelu.
__LEFT__matrix-json:shortcode:/js/plik.json__RIGHT__Renderuje rekordy z lokalnego pliku JSON według tej samej matrycy z panelu. W źródle strony powstaje normalny HTML, bez budowania listy przez JavaScript.
__LEFT__matrix-json:shortcode:/js/plik.json:shuffle__RIGHT__Renderuje JSON z losowaniem. Rekordy z priority większym od zera są wyświetlane przed pozostałymi, a losowanie odbywa się osobno w obu grupach.
__LEFT__large__RIGHT__, __LEFT__thumb__RIGHT__, __LEFT__alt__RIGHT__Przykładowe placeholdery wynikające z nazw kolumn matrycy.
__LEFT__thumb-width__RIGHT__, __LEFT__thumb-height__RIGHT__Automatycznie odczytane wymiary lokalnego obrazu z kolumny thumb.
__LEFT__image-width__RIGHT__, __LEFT__image-height__RIGHT__Automatycznie odczytane wymiary lokalnego obrazu z pola JSON image.

Kolumny w panelu

large;thumb;alt;title;description

Matryca pojedynczego wiersza

<div class="gallery-photo col-xs-12 col-sm-6 col-md-4">
  <a href="__LEFT__large__RIGHT__" class="gallery-single-item lightbox-item lg-trigger" data-exthumbnail="__LEFT__thumb__RIGHT__">
    <img loading="lazy" src="__LEFT__thumb__RIGHT__" width="__LEFT__thumb-width__RIGHT__" height="__LEFT__thumb-height__RIGHT__" alt="__LEFT__alt__RIGHT__ / __LEFT__title__RIGHT__">
  </a>
</div>

Dane na podstronie

__LEFT__matrix-list:galeria-zdjec__RIGHT__
/photos/large/1.webp;/photos/thumbs/1.webp;Baku;Azerbaijan;9274
/photos/large/2.webp;/photos/thumbs/2.webp;Baku;Azerbaijan;6166
__LEFT__/matrix-list__RIGHT__

Dane z lokalnego JSON

__LEFT__matrix-json:home-gallery:/js/home-street-en.json__RIGHT__

Dane z lokalnego JSON z losowaniem i priorytetami

__LEFT__matrix-json:home-gallery:/js/home-street-en.json:shuffle__RIGHT__

Plik JSON może zawierać pola takie jak image, image_full, alt, link, title, number i priority. Nazwy pól stają się placeholderami w matrycy, np. __LEFT__image__RIGHT__, __LEFT__alt__RIGHT__, __LEFT__link__RIGHT__.

Aktualności

Shortcody aktualności działają na listingu i stronie pojedynczego wpisu. Dział aktualności ma własną nazwę, slug i dopisek title per język.

ShortcodeOpis
__LEFT__news:name__RIGHT__Nazwa działu aktualności z panelu.
__LEFT__news:listing_url__RIGHT__URL listingu aktualności.
__LEFT__news:read_more__RIGHT__Etykieta „czytaj więcej” z tłumaczeń.
__LEFT__news:empty__RIGHT__Komunikat pustej listy.
__LEFT__news:loop__RIGHT__...__LEFT__/news:loop__RIGHT__Pętla po wpisach aktualności.
__LEFT__news:loop:3__RIGHT__...__LEFT__/news:loop__RIGHT__Pętla ograniczona do 3 wpisów.
__LEFT__news:pagination__RIGHT__Paginacja listingu aktualności.
__LEFT__news:title__RIGHT__Tytuł wpisu.
__LEFT__news:h1__RIGHT__H1 wpisu albo tytuł.
__LEFT__news:lead__RIGHT__Lead wpisu.
__LEFT__news:body:raw__RIGHT__Treść HTML wpisu.
__LEFT__news:image__RIGHT__Zdjęcie główne.
__LEFT__news:url__RIGHT__URL wpisu.
__LEFT__news:date__RIGHT__Data publikacji w formacie d.m.Y.
__LEFT__news:datetime__RIGHT__Surowa data publikacji.

Listing aktualności

<h1>__LEFT__news:name__RIGHT__</h1>

__LEFT__news:loop__RIGHT__
<article class="post-card">
  __LEFT__news:if:image__RIGHT__
  <a href="__LEFT__news:url__RIGHT__"><img src="__LEFT__news:image__RIGHT__" alt="__LEFT__news:title__RIGHT__"></a>
  __LEFT__/news:if:image__RIGHT__
  <time datetime="__LEFT__news:datetime__RIGHT__">__LEFT__news:date__RIGHT__</time>
  <h2><a href="__LEFT__news:url__RIGHT__">__LEFT__news:title__RIGHT__</a></h2>
  __LEFT__news:if:lead__RIGHT__<p>__LEFT__news:lead__RIGHT__</p>__LEFT__/news:if:lead__RIGHT__
</article>
__LEFT__/news:loop__RIGHT__
__LEFT__news:empty__RIGHT__
__LEFT__news:pagination__RIGHT__

Blog

Blog obsługuje listing wpisów, szczegóły wpisu, kategorie, tagi oraz widoki taksonomii. Kategorie i tagi warto wyświetlać osobnymi shortcodami.

ShortcodeOpis
__LEFT__blog:name__RIGHT__Nazwa działu bloga z panelu.
__LEFT__blog:heading__RIGHT__Nagłówek aktualnego widoku bloga. Na kategorii/tagu pokazuje nazwę taksonomii.
__LEFT__blog:loop__RIGHT__...__LEFT__/blog:loop__RIGHT__Pętla po wpisach blogowych.
__LEFT__blog:items__RIGHT__Gotowy HTML elementów listingu.
__LEFT__blog:empty__RIGHT__Komunikat pustej listy.
__LEFT__blog:categories_heading__RIGHT__Nagłówek kategorii z tłumaczeń.
__LEFT__blog:categories__RIGHT__Lista kategorii do sidebara albo strony kategorii.
__LEFT__blog:tags_heading__RIGHT__Nagłówek tagów z tłumaczeń.
__LEFT__blog:tags__RIGHT__Lista tagów do sidebara albo strony tagów.
__LEFT__blog:taxonomy_heading__RIGHT__Nagłówek widoku kategorii/tagu.
__LEFT__blog:taxonomy_items__RIGHT__Lista kategorii albo tagów na stronie indeksu taksonomii.
__LEFT__blog:taxonomy_empty__RIGHT__Komunikat pustej taksonomii.
__LEFT__blog:category__RIGHT__Kategoria konkretnego wpisu.
__LEFT__blog:tag__RIGHT__Tagi konkretnego wpisu.
__LEFT__blog:taxonomy__RIGHT__Legacy/zbiorczo: kategoria i tagi wpisu razem.
__LEFT__blog:pagination__RIGHT__Paginacja listingu bloga, kategorii i tagów.
__LEFT__blog:title__RIGHT__Tytuł wpisu.
__LEFT__blog:h1__RIGHT__H1 wpisu.
__LEFT__blog:lead__RIGHT__Lead wpisu.
__LEFT__blog:body:raw__RIGHT__Treść HTML wpisu.
__LEFT__blog:image__RIGHT__Zdjęcie główne wpisu.
__LEFT__blog:url__RIGHT__URL wpisu.
__LEFT__blog:date__RIGHT__Data publikacji.
__LEFT__blog:read_more__RIGHT__Etykieta „czytaj więcej”.

Listing bloga z sidebarem

<main class="blog-layout">
  <section>
    __LEFT__blog:loop__RIGHT__
    <article class="post-card">
      <h2><a href="__LEFT__blog:url__RIGHT__">__LEFT__blog:title__RIGHT__</a></h2>
      __LEFT__blog:if:lead__RIGHT__<p>__LEFT__blog:lead__RIGHT__</p>__LEFT__/blog:if:lead__RIGHT__
      <div class="post-category">__LEFT__blog:category__RIGHT__</div>
      <div class="post-tags">__LEFT__blog:tag__RIGHT__</div>
    </article>
    __LEFT__/blog:loop__RIGHT__
    __LEFT__blog:empty__RIGHT__
    __LEFT__blog:pagination__RIGHT__
  </section>
  <aside>
    <h3>__LEFT__blog:categories_heading__RIGHT__</h3>
    __LEFT__blog:categories__RIGHT__
    <h3>__LEFT__blog:tags_heading__RIGHT__</h3>
    __LEFT__blog:tags__RIGHT__
  </aside>
</main>

Wyszukiwarka

Wyszukiwarka publiczna przeszukuje treści dostępne w serwisie, m.in. strony, aktualności i blog. Formularz może prowadzić do adresu /szukaj. Segment URL wyszukiwarki ustawiasz per język w Ustawienia - Podstawowe - Strona.

ShortcodeOpis
__LEFT__search:query__RIGHT__Aktualnie szukana fraza.
__LEFT__search:results__RIGHT__Wyniki wyszukiwania. Każdy wynik to linkowany tytuł oraz dopasowane słowo w nawiasie.
__LEFT__search:pagination__RIGHT__Paginacja wyników wyszukiwania.

Formularz wyszukiwarki

<form class="site-search" action="/szukaj" method="get">
  <input type="search" name="q" placeholder="Szukaj">
  <button type="submit">Szukaj</button>
</form>

Strona wyników

<h1>Wyniki dla: __LEFT__search:query__RIGHT__</h1>
__LEFT__search:results__RIGHT__
__LEFT__search:pagination__RIGHT__

FAQ

__LEFT__faq:shortcode__RIGHT__ wstawia wyłącznie właściwą listę pytań i odpowiedzi w formie akordeonu. Shortcode nie tworzy nagłówka sekcji, więc tytuły i opakowanie przygotowujesz ręcznie w szablonie.

Wynik zaczyna się od kontenera <div class="faq-signum-list faq-accordian-one" id="faqAccordion">. System zachowuje dane FAQ zgodne ze Schema.org w JSON-LD.

Przykład użycia

<section class="faq-section">
  <div class="container">
    <h1>Najczęściej zadawane pytania</h1>
    __LEFT__faq:strona-glowna__RIGHT__
  </div>
</section>

Zdjęcia

Shortcody zdjęć pochodzą z biblioteki zdjęć. Token jest stały, więc zmiana nazwy, katalogu albo fizycznej lokalizacji nie wymaga zmiany shortcode w treści.

ShortcodeOpis
__LEFT__photo-large-token__RIGHT__Ścieżka do dużego zdjęcia.
__LEFT__photo-thumb-token__RIGHT__Ścieżka do miniatury.
__LEFT__photo-alt-token__RIGHT__Tekst alternatywny.
__LEFT__photo-title-token__RIGHT__Tytuł zdjęcia.
__LEFT__photo-description-token__RIGHT__Opis zdjęcia.

Matryca HTML zdjęć jest ustawiana w Ustawienia -> Podstawowe -> Zdjęcia. Działa przy przycisku Generuj HTML i przy Pobierz kod HTML dla pojedynczego zdjęcia.

Placeholder matrycyCo wstawia
__LEFT__photo-large__RIGHT__Shortcode dużego zdjęcia dla aktualnego zdjęcia.
__LEFT__photo-thumb__RIGHT__Shortcode miniatury dla aktualnego zdjęcia.
__LEFT__photo-alt__RIGHT__Shortcode tekstu alternatywnego.
__LEFT__photo-title__RIGHT__Shortcode tytułu zdjęcia.
__LEFT__photo-description__RIGHT__Shortcode opisu zdjęcia.

Przykład użycia

<a href="__LEFT__photo-large-a5b155c311__RIGHT__">
  <img src="__LEFT__photo-thumb-a5b155c311__RIGHT__" alt="__LEFT__photo-alt-a5b155c311__RIGHT__" title="__LEFT__photo-title-a5b155c311__RIGHT__">
</a>

Przykład matrycy

<a href="__LEFT__photo-large__RIGHT__">
  <img src="__LEFT__photo-thumb__RIGHT__" alt="__LEFT__photo-alt__RIGHT__">
</a>
<p>__LEFT__photo-description__RIGHT__</p>

Pliki

Moduł Pliki zwraca publiczny link do pliku. Token pozostaje stały po zmianie nazwy pliku.

ShortcodeOpis
__LEFT__file:token__RIGHT__Publiczna ścieżka do pliku.

Przykład użycia

<a href="__LEFT__file:812e6a14a9__RIGHT__" target="_blank" rel="noopener">
  Pobierz plik PDF
</a>

Formularze

Formularze możesz wstawić jako gotowy formularz albo złożyć ręcznie z pojedynczych pól. Zalecany jest układ ręczny, bo daje pełną kontrolę nad kolumnami i sekcjami.

ShortcodeOpis
__LEFT__form:kontakt__RIGHT__Gotowy formularz. Przydatny do szybkiego testu, ale mniej elastyczny.
__LEFT__form:kontakt:open__RIGHT__Otwiera formularz i dodaje pola techniczne.
__LEFT__form:kontakt:messages__RIGHT__Komunikaty sukcesu i błędów.
__LEFT__form:kontakt:label:email__RIGHT__Etykieta pola.
__LEFT__form:kontakt:field:email__RIGHT__Właściwe pole formularza.
__LEFT__form:kontakt:error:email__RIGHT__Błąd walidacji pola.
__LEFT__form:kontakt:recaptcha__RIGHT__reCAPTCHA v3.
__LEFT__form:kontakt:submit__RIGHT__Przycisk wysyłki.
__LEFT__form:kontakt:close__RIGHT__Zamyka formularz.

Przykład ręcznego formularza

__LEFT__form:kontakt:open__RIGHT__
__LEFT__form:kontakt:messages__RIGHT__

<div class="form-row">
  <label>__LEFT__form:kontakt:label:email__RIGHT__</label>
  __LEFT__form:kontakt:field:email__RIGHT__
  __LEFT__form:kontakt:error:email__RIGHT__
</div>

__LEFT__form:kontakt:recaptcha__RIGHT__
__LEFT__form:kontakt:submit__RIGHT__
__LEFT__form:kontakt:close__RIGHT__

Elementy i fragmenty kodu

Elementy renderują treść z panelu, a fragmenty kodu są biblioteką gotowych bloków do wklejania w edytorze HTML.

ShortcodeOpis
__LEFT__box:shortcode__RIGHT__Wstawia aktywny element HTML z panelu.

Fragmenty kodu nie mają publicznego shortcode. Służą do szybkiego wklejania przygotowanych bloków HTML w panelu.

Tłumaczenia publiczne

__LEFT__ui:key__RIGHT__ wstawia tekst z Ustawienia -> Tłumaczenia dla aktualnego języka. Używaj tego przy komunikatach publicznych, żeby nie wpisywać na sztywno polskich tekstów w szablonie.

Przykład

<p>__LEFT__ui:blog_empty__RIGHT__</p>

Front matter ręcznych plików HTML

Front matter to blok danych między liniami --- na początku pliku w webroot/content. Używaj go dla stron tworzonych ręcznie przez FTP.

PoleOpis
titleMeta title. Możesz użyć __LEFT__title_suffix__RIGHT__.
descriptionMeta description i domyślny opis OG/Twitter.
imageObraz strony.
image_altAlt obrazu strony.
breadcrumb_nameNazwa w breadcrumbs. Najlepsza opcja, gdy title ma suffix SEO.
breadcrumbPomocnicza nazwa breadcrumbs.
menuPomocnicza nazwa menu/breadcrumbs.
alternateMapa odpowiedników językowych.
route: moduleOznaczenie strony modułowej, np. blog, aktualności, wyszukiwarka.
route: customRęczna trasa oparta o pole url.
urlRęczny URL dla tras specjalnych.
og_title, og_description, og_imageOpcjonalne nadpisania Open Graph.
twitter_card, twitter_title, twitter_description, twitter_imageOpcjonalne nadpisania Twitter Cards.

Minimalny przykład

---
title: O projekcie __LEFT__title_suffix__RIGHT__
breadcrumb_name: O projekcie
description: Krótki opis podstrony.
image: /images/default.jpg
image_alt: Domyślny obraz podstrony
---

Przykład wersji językowej

---
title: O projekcie __LEFT__title_suffix__RIGHT__
breadcrumb_name: O projekcie
description: Krótki opis podstrony.
image: /images/default.jpg
alternate:
  en: about
---

Przykład strony modułowej

---
title: Blog __LEFT__blog_title_suffix__RIGHT__
breadcrumb_name: Blog
description: Lista wpisów blogowych.
image: /images/default.jpg
route: module
---