Wtyczka o której chcę Ci napisać w tym minikursie jest jedną z najczęściej używanych przeze mnie w ostatnim czasie. Instaluję ją w prawie każdym projekcie, gdyż daje naprawdę duże możliwości. Przydaje się szczególnie jeśli zależy Ci na przygotowaniu efektywnego FAQ albo posiadasz dużą ilość treści i zależy Ci na wykonaniu rozwijanych zakładek.

Czy któreś z trzech poniższych rozwiązań przypadło Ci do gustu?

Podział tekstu na sekcje

Zakładki

Blok rozwijanego/zwijanego tekstu

Jeśli tak to zapraszam Cię do zakupienia tego kursu. W ciągu kilku minut od poznania tej techniki będziesz mógł używać tego typu elementów na swoim blogu.

[FMP]

Krok 1

Zainstaluj wtyczkę, która nazywa się Shortcodes by Angie Makes. Znajdziesz ją w darmowym repozytorium wtyczek WordPressa. Kliknij na Wtyczki -> Dodaj nową i wpisz Shortcodes by Angie Makes (dawne WP Canvas – Shortcode). Następnie wybierz Instaluj.

Po udanej instalacji uruchom wtyczkę.

Krok 2

Przejdź do dodawania/edycji wpisu albo strony. W trybie wizualnym pojawił się nowy przycisk

Po jego rozwinięciu zobaczysz szereg różnych opcji. Zachęcam Cię do przetestowania wszystkich opcji, szczególnie kolumn i zakładki jQuery. Tą drugą chciałbym omówić szczegółowo w tym mikrokursie.

Krok 3

Podział tekstu na sekcje

Pierwsza opcja z listy rozwijanej jQuery to Accordion czyli podział tekstu na sekcje. Po jej wybraniu pojawią się w treści dodatkowe znaczniki.

Wygląda to mniej więcej w następujący sposób i w nomenklaturze WordPressa nazywa się Shortcode:

[wc_accordion collapse="0" leaveopen="0" layout="box"]

[wc_accordion_section title="Pierwsza sekcja – rozwinięta na starcie"]
Tu możesz wpisać to wszystko co Ci palce na klawiaturę przyniosą
[/wc_accordion_section]

[wc_accordion_section title="Druga sekcja"]
Tu też 🙂
[/wc_accordion_section]

[/wc_accordion]

Pierwsza i ostatnia linijka odpowiada za wyświetlanie elementu. To stały element, którego zazwyczaj się nie zmienia. Co najwyżej możesz skorzystać z dokumentacji i wprowadzić w pierwszej linii dodatkowe opcje: zadecydować czy pierwszy element ma być zwinięty czy rozwinięty oraz czy pozostawić szarą obramówkę czy też ją usunąć.

Druga i piąta linia zawiera znacznik title gdzie w cudzysłowie możesz wpisać tytuł sekcji. Dobra wiadomość jest taka, że możesz w trybie wizualnym wpisując treść tytułu korzystać z dostępnych stylów: działa pogrubienie, kursywa i twardy enter (Shift+Enter). Działa niestety niewiele więcej więc obserwuj czy wpisany przez Ciebie tytuł nie zamieni się na słowo „Title”. Jeśli tak się stanie, znaczy że musisz zrezygnować z niektórych stylów.

W linii trzeciej i szóstej możesz wpisać dowolną treść. Tu limitów nie ma, może to być zdjęcie, paragraf tekstu, formularz kontaktowy czy inny shortcode (np. podział na kolumny przy użyciu tej samej wtyczki). Proste prawda?

Jeszcze jedno. Jeśli chcesz dodać więcej niż dwa rozwijane elementy wtedy skopiujesz 2, 3 i 4 linię (z kodu powyżej) i wkleisz ją we właściwym miejscu między linią pierwszą i ostatnią. Oto przykład elementu z pięcioma sekcjami. Dla przejrzystości sekcje które wkleiłem oddzielam enterami:

[wc_accordion collapse="0" leaveopen="0" layout="box"]

[wc_accordion_section title="Się powtarza"]
Tekst sekcji 1
[/wc_accordion_section]

[wc_accordion_section title="Się powtarza"]
Tekst sekcji 2
[/wc_accordion_section]

[wc_accordion_section title="Się powtarza"]
Tekst sekcji 3
[/wc_accordion_section]

[wc_accordion_section title="Się powtarza"]
Tekst sekcji 4
[/wc_accordion_section]

[wc_accordion_section title="Się powtarza"]
Tekst sekcji 5
[/wc_accordion_section]

[/wc_accordion]

Mam nadzieję, że udało Ci się zrozumieć jak działa ten mechanizm. W razie wątpliwości pytaj w komentarzu.

Zakładki

Wybierz drugą opcję czyli Tabs z listy rozwijanej jQuery. Po jej wybraniu pojawią się w treści dodatkowe znaczniki.

Jak widzisz w prosty sposób możesz dodać kilka zakładek. Ta metoda sprawdza się wtedy, gdy zakładek nie jest dużo. Prezentują się dobrze tylko wtedy, gdy mieszczą się w jednej linii.

Aby dodać więcej niż dwie zakładki postępuj identycznie jak w przypadku Accordion opisanego szczegółowo na początku 3 kroku.

Blok rozwijanego/zwijanego tekstu

Ostatni element listy rozwijanej Query to Toggle czyli samodzielny blok tekstu, który można zwijać lub rozwijać.

Tu konstrukcja jest jeszcze prostsza niż w poprzednich elementach. W edytorze pojawiają się 3 linie, w których pierwsza odpowiada za tytuł elementu, a druga za treść. Wystarczy uzupełnić dane i można cieszyć się rozwijanym elementem, który idealnie się sprawdza w sytuacji, kiedy mamy dużo treści i chcemy ją schować.

Powielanie elementu jest banalnie proste. Wystarczy skopiować 3 linijki i wkleić poniżej. Z jednego elementu mamy dwa. Kopiujemy tyle razy ile trzeba, zapisujemy i gotowe.

[/FMP]