Wpis jest częścią cyklu wpisów dedykowanych zdobywającemu popularność motywowi Monstroid spod skrzydeł Template Monster.
Motywowi Monstroid towarzyszy pokaźny zestaw wtyczek, z którymi zyskuje na funkcjonalności pod względem możliwości wzbogacenia treści o różne dodatki jak i pod względem wszechstronności co do typu strony jaki można wdrożyć.
Poznajmy kolejną z nich…
– Cherry Shortcodes –
To z pewnością będzie najczęściej wykorzystywana wtyczka. Umożliwia dodanie do treści kilkadziesiąt elementów, od przycisków, ikon, list, zakładek, „akordeonów” po linie czasu, opóźnienia ładowania wybranych elementów, animowane odliczanie czasu czy efekt paralaksy.
Każdy z elementów dodajemy z poziomu udostępnionego generatora, dostępnego zarówno z poziomu edytora wizualnego jak i tekstowego.
Generator odpala się w okienku popup i nie tylko umożliwia sprawniejsze dodanie danego shortcode z ustawieniami wedle potrzeb, ale i umożliwia podgląd na żywo. Dzięki czemu nie musimy zamykać generatora i następnie klikać podgląd wpisu aby sprawdzić działanie ustawień danego shortcode. Kolejna fajna funkcja generatora to auto zapamiętywanie ostatnio naniesionych danych, przydatne, gdy niechcący zamknęliśmy okno generatora lub chcemy ponownie to samo dodać. Opcjonalnie można utworzyć na stałe jeden lub kilka wzorców z danymi, co przyspieszy dodawanie takich samych shortcodes.
Poniżej lista dostępnych shortcodes. Część wnosi wtyczka, której tyczy się ten wpis, a część shortcodes wnoszą dodatkowe wtyczki z pakietu frameworka Cherry. W przypadku tych drugich shortcodes, główne lub wszystkie ustawienia personalizacji i samo dodanie treści/danych odbywa się poza generatorem, poprzez generator wstawiamy gotowca.
Wykresy
Do wyboru mamy wykres typu ciasto, pączek, pasek postępu, kilka pasków postępu oraz pionowe słupki. Dane do wykresów wprowadzamy poprzez specjalną tabelkę automatycznie dodającą kolejne kolumny i wiersze na wprowadzenie danych. Od strony ustawień możemy ustawić dowolną szerokość i wysokość wykresu, włączyć/wyłączyć tytuł wykresu, etykiety i legendę, ustawić kolorystykę (elementy wykresu i tło) oraz opcjonalnie ustawić przeźroczystość elementów wykresu.
Lista wpisów
Własna strona archiwum z wpisami? Z tym shortcode mamy z górki. Ustalamy ilość wpisów (mogą być wszystkie), wybieramy styl listy (linia czasu, siatka lub masonry), ustawiamy kierunek sortowania, typ sortowania (id, autor, tytuł, adres url, data publikacji, data aktualizacji, liczba komentarzy lub losowo), opcjonalnie włączamy paginację i ograniczamy wpisy do wybranej kategorii lub kilku kategorii i gotowe.
Społecznościowe odnośniki
Raz dwa i mamy w dowolnym miejscu odesłania do profili społecznościowych naszej strony w formie podlinkowanych przycisków (logo + nazwa lub samo logo) do najpopularniejszych serwisów społecznościowych.
Przyciski udostępnienia
Raz dwa i mamy przyciski udostępnienia aktualnie wyświetlonej strony do najpopularniejszych serwisów społecznościowych.
Slideshow
Zwykły, pełnoekranowy, z nawigacją lub bez, orientacją poziomą lub pionową oraz dowolną zawartością.
Referencje
Poprzez dodatkową wtyczką z pakietu Cherry, nasi klienci mogą wystawić referencje, a my z pomocą tego shortcode możemy je zamieścić w dowolnym miejscu oraz podobnie jak przy liście wpisów ustawić kierunek oraz typo sortowania. Dodatkowo włączyć/wyłączyć wyświetlanie kto wystawił i jego avatara oraz czy ma być pełna treść czy tylko fragment odsyłający do pełnej wersji.
Ferajna
W formie siatki o ustawionej przez nas szerokości kolumn można wyświetlić listę współpracowników w formie Imię i Nazwisko i/lub avatar + odesłania do profili w social media. Opcjonalnie może podzielić taką listę na pełnione stanowiska.
Oferowane usługi
W formie poziomych boxów lub tabeli cenowej możemy wyświetlić to co oferujemy. Opcje sortowania i personalizacji wyglądu są obecne.
Portfolio
Jedna z wtyczek wnosi opcje utworzenia na naszej witrynie portfolio tworzonego przy pomocy osobnego typu wpisów i przy wykorzystaniu formatów wpisów (zdjęcia, wideo, audio,…). Przy pomocy tego shortcode z kolei możemy utworzyć zbiorczą listę naszych prac w formie siatki, zwykłej listy czy nierównej siatki (masonry), do tego paginacja bez przeładowywania całej strony lub paginacja w formie nieskończonego ładowania kolejnych elementów.
Lista x wpisów
Potrzebna lista wpisów z dowolnego a nie tylko głównego typu wpisów? Z tym shortcode to możliwe. Ale w przeciwieństwie do wcześniejszego shortcode do list wpisów, tutaj musimy określić liczbę wpisów i nie ma opcji paginacji. Jeżeli chodzi o styl wyświetlania to kolumny, siatka i masonry.
Lista x wpisów z filtrem
Jak poprzedni shortcode wyżej ale styl wyświetlania tylko kolumny i mamy opcje filtrowania per tagi, kategorie (również te niestandardowe), formaty wpisów. Opcjonalnie możemy z palca podać id wpisów, które mają być widoczne. Dodatkowo mamy argument zaprzeczenia – przykładowo wyświetl wszystkie wpisy, które nie są z kategorii lub nie zawierają x tagu.
Lista x wpisów w formie slideshow
Raz jeszcze shortcode do listy wpisów, od strony personalizacji to samo co przy shortcode „Lista x wpisów z filtrem” ale ze stylem wyświetlenia w formie pokazu slajdów.
Player wideo
Zamiast domyślnego odtwarzacza wideo w WordPress lub odtwarzacza wideo YouTube lub Vimeo (tylko te dwa obsługiwane) możemy użyć odtwarzacza wideo, który zawiera jedynie dwa przyciski play/pauza oraz głośność. A jako zdjęcie wyświetla albo klaps z filmu albo wybrane zdjęcie z biblioteki mediów naszej witryny.
Efekt lazy loadingu
Jeżeli któryś z elementów wpisu może spowolnić ładowanie całości to można skorzystać z tego shortcode. W efekcie jego użycia dany element będzie ładowany dopiero, gdy będzie widoczny w oknie przeglądarki.
Odliczanie
Czasami może przydać się możliwość wstawienia odliczania czasu, np: do startu jakiegoś eventu czy zakończenia promocji. I oto mamy taką opcję. Odliczanie jest opcjonalnie wzbogacone o animację odliczania.
Animowane cyferki
Do danych liczbowych możemy dodać efekt stopniowego pojawiania się. Prócz finalnej wartości możemy dostosować szybkość animacji oraz wartość przeskoku.
Box z efektem paralaksy (zdjęcie jako tło)
Dodajemy blok z dowolną zawartością, dodajemy obrazek jako tło i otrzymujemy taki bajer, że tło tego bloku będzie przesuwać się w przeciwnym kierunku niż kierunek przewijania strony.
Box z efektem paralaksy (wideo jako tło)
To samo co poprzedni shortcode ale jako tło ustawiamy materiał wideo – tylko wideo z biblioteki mediów obsługiwane.
Mapka z Google Maps
Wystukujemy adres lub współrzędne geograficzne i mapka gotowa. Dodatkowo możemy ustalić jej wysokość, wyłączyć zoom, ustawić poziomu zbliżenia, dodać pinezkę oraz (pewnie ucieszy) zastąpić domyślny wygląd innym stylem np: czarno-białym (do wyboru 5 styli).
Akordeon
Wiecie, te zwinięte bloki treści, które rozwijają się po kliknięciu ala miech w akordeonie 😉
Spojler
Jakiś fragment treści np: zepsuje oglądanie filmu? To z pomocą tego shortcode można dany fragment ukryć, wyświetli go ten kto będzie chciał.
Zakładki
Zamiast długich akapitów lub podstron możesz podzielić treść na zakładki, na dzień dobry wyświetli się zawartość pierwszej zakładki, a reszta schowana będzie czekać na akcję kliknięcia w tytuł zakładki.
Lista
Nieuporządkowana lista z opcją ikony przy elementach listy.
Przyciski
Jako na tylko przycisk to sporo opcji personalizacji. Po pierwsze to możemy ustawić przyciski z tekstem i ikoną lub tylko tekstem lub tylko ikoną. Po drugie umiejscowienie ikony (nad/pod pod tekstem lub obok tekstu po lewej/po prawej stronie). Po trzecie atrybuty title, target i rel. Po czwarte wygląd (kolor tła, kolor tekstu, styl, rozmiar, szerokość, wielkość zaokrąglenia narożników). Po piąte efekt animacji dla akcji najechania kursorem oraz wyśrodkowanie.
Ikony
Do użytku mamy zbiór Font Awesome, więc ikon do wybrania sporo. A jeżeli żadna nam nie przypasuje to możemy wgrać własną do biblioteki mediów i poprzez ten shortcode dodać do treści. Od strony ustawień: kolor tła, kolor ikony, kolor i wielkość obramowania, wielkość ikony oraz wyrównanie.
Inicjał
Czyli wyróżniona pierwsza litera. Taka litera może mieć tylko większy rozmiar ale i może mieć inny kolor, tło (rozmiar tła niezależny od rozmiaru czcionki – może być większy jak i mniejszy) oraz obramowanie (można zaokrąglić narożniki).
Info bloki
Takie małe bloki z ikoną, tytułem i podtytułem (wszystkie te trzy elementy mogą mieć inną kolorystyką), bez opcji dodatkowej treści.
Linia
Pozioma linia z opcją ustawienia grubości, koloru oraz wcięcia z lewej lub prawej strony.
Banner
Potrzebujesz dodać do treści banner a nic przygotowanego pod ręką? Wgrywasz obrazek lub wybierasz któryś z biblioteki mediów, dodajesz reklamową treść, do tego adres odesłania i banner gotowy. Oczywiście jak w przypadku bannera graficznego, całość jest klikalna.
Pole i Box Inner
Oba te shortcodes umożliwiają wyróżnienie dowolnej zawartości przez jednolitego koloru tło lub tło graficzne. Jaka jest między nimi różnica, nie wiem, wypluwany kod jest taki sam. Więc błąd albo coś przegapiłem.
Rozpórka
Umożliwia dodanie między bloki treści odstępu o ustalonej przez nas wielkości.
Czyściciel wyrównania
Czasami wyrównanie czegoś do lewej lub prawej nie działa tylko na element, który byśmy chcieli wyrównać ale i na kolejny w hierarchii element. W takiej sytuacji wystarczy skorzystać z tego shortcode i problem z głowy.
Kolumny i rzędy
W sumie 4 shortcodes do użytku, gdybyśmy chcieli podzielić treść na kolumny lub utworzyć układ siatki z jakąś zawartością.
Theme URI
Ostatni shortcode, którego raczej nie będzie nigdy używać. Wyświetla bezwzględny adres url do katalogu aktywnego motywu.
=== === ===
Jeżeli nie pominąłem żadnego shortcode to tyle mamy shortcodes na obecną chwilę do użytku. Przypuszczam, że dojdą z czasem kolejne.
