MP CMS - System Zarządzania Treścią

Prostota obsługi, wielkie możliwości

AUTORYZACJA!
Dostęp do instrukcji oraz poradników tylko po zalogowaniu. Jeśli jesteś naszym Klientem i nie masz jeszcze dostępu, skontaktuj się z Administratorem.

Zakładki w stylu Akordeon (ang. Accordion Tabs) to sposób prezentacji gdzie poprzez kliknięcie tytułu danej zakładki, pokazywana jest jej treść, natomiast treść dotychczas aktywnej jest chowana. Zasada działania  Accordion pokazana jest w przykładzie poniżej. Accordion tworzony jest  poprzez umieszczenie w treści Strony odpowiedniego kodu (ang. shortcode). Jeśli Administrator jest obeznany z budową akordeonu, może go napisać ręcznie. Jeśli zaś nie używał go do tej pory, może wykorzystać gotowy szablon dostępny w edytorze wizualnym TinyMCE poprzez ikonkę Szablonu lub w menu górnym Wstaw >> Wstaw Szablon >> Accordion. Po wczytaniu  szablonu w danym miejscu strony należy w razie potrzeby powielić każdą zakładkę na która składa się [head] [/head][content] [/content]. Po każdej zakładce z wyjątkiem ostatniej wstawić (napisać) należy rozdzielenie zakładek w postaci [break]

Accordion w tej postaci umieszczać można w treści Strony od wersji MP CMS 4.50.

Accordion można utworzyć na 3 sposoby w zależności od stopnia zaawansowania  obsługi CMS przez Administratora.

1. Generator

Po pierwsze za pomocą generatora przyjaznych kodów (ang. shortcodes) dostępnego w pasku narzędzi Edytora Wizualnego pod przyciskiem [Elementy] >> [Wstaw Element] >> [Krótkie Kody] >> Zakładki Accordion. po wybraniu tej opcji zostanie załadowany moduł do generowania struktury Akordeonu w oparciu o wypełnione przez Administratora pola formularza. Przed przystąpieniem do tworzenia zakładek należy przemyśleć ich ilość oraz kolejność gdyż późniejsza edycja będzie wymagała już ręcznej ingerencji w strukturę lub źródło HTML.

Aby utworzyć zakładki należy wybrać przycisk [Dodaj Zakładkę] a następnie uzupełnić zarówno klikalny tytuł jak i zawartość. Po uzupełnieniu pierwszej karty, należy powtarzać czynność aż cały Akordeon zostanie zbudowany. Po ukończeniu należy skorzystaj z przycisku [Wstaw Kod], który umieści całą utworzoną strukturę w miejscu kursora w treści Strony. Jeśli kursor nie został ustawiony ręcznie zakładki zostaną umieszczone na samym początku strony.

Po umieszczeniu Akordeonu w treści okna Edytora można dostosować wygląd treści pomiędzy tagami [content] i [/content] przy użyciu dostępnych funkcji Edytora Wizualnego.

Jeśli podczas tworzenia Akordeonu pola tytułu i / lub treści nie zostaną uzupełnione, akordeon doda się z pustymi tymi elementami, które będzie trzeba uzupełnić już w polu edytora wizualnego.
Utworzonego już Akordeoinu nie można edytować przy użyciu tego narzędzia. Edycja utworzonego akordeonu odbywa się tylko i wyłącznie poprzez okno  główne TinyMCE lub poprzez okno Źródło Strony.

2. Szablony

Drugim sposobem na umieszczenie Accordionu w treści Strony lub Modułu jest wybranie go spośród szablonów dostępnym w edytorze wizualnym - od MP CMS w wersji 4.50.

  1. Wybrać poprzez kliknięcie miejsce w treści gdzie ma być umieszczony Akordeon,
  2. Upewnić się że akordeon nie będzie umieszczony w akapicie (blok "p"),
  3. Kliknąć ikonkę Wstaw Szablon lub wybrać ją z górnego menu Wstaw >>  Wstaw Szablon,
  4. Wybrać Accordion a następnie zaakceptować wybór przyciskiem OK,
  5. W wybranym miejscu strony zostanie umieszczony przykładowy szablon w stylu:
    [accordion*]
    [head] Tu wpisz klikalny tytuł [/head]
    [content] Tu wpisz treść zakładki [/content]
    [break]
    [head] Tu wpisz klikalny tytuł [/head]
    [content] Tu wpisz treść zakładki [/content]
    [break]
    [head]Tu wpisz klikalny tytuł [/head]
    [content] Tu wpisz treść zakładki [/content]
    [/accordion]
    * bez gwiazdki
  6. Jeśli Accordion ma mieć więcej niż 3 zakładki proszę ręcznie powielić zawartość od [head] do [break] włącznie
  7. Za ostatnim kodem zamykającym [/content] nie należy wstawiać [break],
  8. Uzupełnić zawartość pomiędzy tagami [head] i [/head] oraz [content] i [/content]
Utworzonego już Akordeoinu nie można edytować przy użyciu tego narzędzia. Edycja utworzonego akordeonu odbywa się tylko i wyłącznie poprzez okno  główne TinyMCE lub poprzez okno Źródło Strony.

3. Tworzenie ręcznie

Kolejność tworzenia ręcznie Accordionu wygląda następująco:

  1. Wybrać miejsce w treści gdzie chcemy umieścić Akordeon,
  2. Upewnić się że akordeon nie będzie umieszczony w akapicie (blok "p"),
  3. Rozpocząć tworzenie akordeonu od napisania kodu [accordion*] - bez gwiazdki wewnątrz nawiasów [ i ],
  4. Utworzyć klikalny nagłówek otwierający zakładkę wewnątrz kodu [head] tu tytuł [/head],
  5. Uzupełnić treść zakładki wewnątrz kodu [content] treść [/content] (ang content = zawartość),
  6. Wstawić rozdzielenie pomiędzy zakładkami w postaci [break],
  7. Powtórzyć całą czynność tyle razy ile ma być zakładek,
  8. Za ostatnim kodem zamykającym nie należy wstawiać [break],
  9. Zamknąć Akordeon kodem [/accordion],
  10. Wszystkie elementy konstrukcyjne (wytłuszczone powyżej) należy pisać z małych liter.
Pomiędzy tagami [head] i [/head] umieszczać należy tylko tekst w postaci zdań, fraz, słów.
Pomiędzy tagami [content] i [/content] można stosować dowolne znaczniki HTML lub też umieszczać dowolną zawartość jak akapity, zdania, linki, zdjęcia etc.
Kody w Accordion należy umieszczać wewnątrz nawiasów kwadratowych bez spacji pomiędzy funkcją a [ i ]
Należy pamiętać by za ostatnim tagiem [/content] należącym do ostatniej zakładki nie umieszczać [break]
W przypadku zakładek w stylu Accordion nie ma możliwości by jednocześnie było otwartych więcej niż 1 zakładka na raz. Wyjątkiem jest ingerencja w skrypt Accordionu jednak będzie to miało wpływ na wszystkie tego typu konstrukcje w obrębie strony www.
Tworząc Accordion w kodzie otwierającym go nie należy umieszczać gwiazdki "*" jak w punkcie 3. Jest to zabieg tylko na potrzeby tej zakładki uniemożliwiający zamianę instrukcji powyżej na działający przykład.

Schemat

[accordion*]
rozpoczęcie Akordeonu (musi być bez *)
[head] [/head]
pierwszy tytuł
[content] [/content]
treść pierwszej zakładki
[break]
odstęp
[head] [/head]
drugi tytuł
[content] [/content]
treść drugiej zakładki
[break]
odstęp
(....)
powielenie schematu dowolną ilość razy
[head] [/head]
ostatni tytuł
[content] [/content]
treść ostatniej zakładki
[/accordion]
zakończenie Akordeonu już nie poprzedzone [break]

Żeby zobrazować jak wyglądać ma schemat struktury w użyciu, zrobiliśmy zrzut edytora wizualnego, prezentujący budowę Accordionu dla poniższego działającego przykładu.

Tagi składające się na strukturę Accordionu zostały wyróżnione na zielono.

Proszę zwrócić uwagę że wszystkie elementy wchodzące w skład struktury Akordeonu są umieszczone bez otoczenia ich akapitem "p" lub kontenerem "div" - nie są otoczone blokiem z przerywanej linii. Elementy te można umieścić tylko wewnątrz kodu [content] [/content]. Aby upewnić się że fragment kodu nie znajduje się w bloku akapitu lub kontenera należy kliknąć na jego fragmencie - np [break] i sprawdzić czy w dolnym pasku edytora wizualnego z lewej strony mamy p, div czy nic. Aby Accordion działał prawidłowo żaden z fragmentów kodu nie powinien nic wskazywać.

Działający Przykład

Rozwinięcie tekstu

Praesent nec tempus metus, at scelerisque nisi. Donec dapibus blandit eleifend. Nulla in lectus ac lectus aliquet fringilla. Vestibulum rutrum nec orci a mattis. Phasellus rutrum dui at neque consequat eleifend. Etiam malesuada, nisi eu aliquet faucibus, lacus ante tempor dolor, id pretium nulla ipsum in lacus. Ut quis velit malesuada, volutpat purus a, efficitur nisl.

Czytaj więcej

Inne rozwinięcie tekstu

Mauris congue elementum tortor nec tristique. Suspendisse potenti. Vivamus ultricies efficitur enim, non vulputate sem iaculis sit amet. Vestibulum vitae consequatnisl. Aenean nibh dolor, iaculis quis interdum quis, ultricies id ipsum. Quisque elit sem, consectetur nec consequat et, pulvinar eu diam. Sed justo nisl, vulputate non risus sed, sollicitudin lobortis nisl. Curabitur ante ante, feugiat nec quam et, mollis scelerisque neque. Cras et enim nec enim malesuada ullamcorper.

Czytaj więcej

W powyższym przykładzie linki umieszczone w treści zakładek prowadzą do innych (dowolnych) Stron. Ma to na celu pokazanie takiej możliwości jednak zabieg ten nie jest automatyczny tylko umieszczony z poziomu edytora wizualnego. Dlatego też na docelowych Stronach należy umieścić ręcznie link powrotu do Strony zawierającej Accordion lub też stworzyć nawigację (np. boczną) umożliwiającą przejście do innych Stron do których kieruje Accordion.