Test motywu opartego o Cherry Framework v5 – TemplateMonster

Dzięki uprzejmości Pana Janusza Kamińskiego(częściowo odpowiedzialnego za polski oddział TemplateMonster) oraz nowemu projektowi modernizacji strony, przy którym klient upodobał sobie motyw właśnie z TemplateMonster mam przyjemność(albo i nie, to się jeszcze okaże) testować motyw oparty o najnowszą wersję frameworka Cherry – czyli v5.

Mowa konkretnie o motywie nr #58914 – Trener Personalny(w zasadzie na podstronie widać w tytule „psycholog”, co jest mylące ale jak mniemam jest to błąd przy tłumaczeniu – tych jest trochę ale o tym kiedy indziej).

Po zakupie i pobraniu przywitała mnie paczka o rozmiarze ok. 29MB – jest to kwestia o tyle istotna, że motywy oparte o starsze wersje Frameworka często posiadały również projekt w PSD.

Po drugie – inaczej jest rozdysponowana zawartość demo; w tym momencie mamy wersję importu pod xml oraz wersję manualną(czyli materiały i baza sql „na żywca”).

Po trzecie – nie otrzymujemy zdjęć demo takich, jak mogliśmy zobaczyć na wersji demo podglądu motywu. Sprawa wyglądała inaczej w przypadku motywów opartych o Cherry v4 i v3 ale jak mniemam jest to związane w jakiś sposób z polityką firmy i nie w sposób narzekać na to, że nie dostaliśmy dziesiątek stockowych zdjęć w cenie motywu(na motywach z ThemeForest bardzo rzadko kiedy dostajemy zdjęcia zamieszczone w wersjach demo – najczęściej w ich miejscu znajdują się tzw. „placeholdery”, czyli wypełniacze – zdjęcia z gigantycznymi znakami wodnymi albo po prostu jednokolorowe obrazki z napisem „placeholder”).

Jednak kiedy zejdziemy dostatecznie nisko na podstronie z ofertą motywu, to ujrzymy informację:

Czyli od razu dowiadujemy się, że obrazy w wersji demo nie są częścią zakupionego motywu. Trochę szkoda, że informacja znajduje się stosunkowo nisko w dziale „funkcje” ale niech będzie. Info można znaleźć i jest widoczne, a to już coś.

Na następny rzut idzie dokumentacja – i tutaj właściwie pojawia się problem… ponieważ link do dokumentacji z pliku prowadzi do strony z błędem 404(nie znaleziono). Niefajnie. Kiedyś cała dokumentacja była załączana do paczki z motywem i problemów tego typu raczej nie było.

Dokumentacja była naprawdę potrzebna w przypadku motywów opartych o starsze wersje frameworka – ponieważ tam import dema dla początkującego mógł być trochę zawiły. Tutaj nie ma większego problemu, ponieważ mamy folder skórki, plik xml do importu i „gołe pliki” dla manualnego importu, dla osoby średnio-zaawansowanej taki układ w paczce jest oczywisty i nie stanowi problemu, więc i dokumentacja na etapie instalacji nie będzie specjalnie potrzebna.

Do importu danych używamy prostego i intuicyjnego narzędzia wbudowanego w skórkę:

Umożliwia on również eksport danych – nie korzystałem jeszcze z niego ale zakładam, że działa podobnie do wbudowanego WordPressowego eksportera, z tą różnicą, że media, wpisy i zawartość możemy wysłać do jednego pliku, a nie kilku oddzielnych. Wygodna opcja, a sam moduł możemy po prostu wyłączyć po użyciu.

Moduł zwie się „Cherry Data Importer” i możecie pobrać go TUTAJ, jeśli mielibyście kiedykolwiek ochotę go wypróbować – jest darmowy.

Po imporcie danych, który trwał dosłownie kilka minut(najdłużej trwało przebudowanie miniatur) otrzymujemy gotowe demo:

Co rzuca się w oczy, to brak zaimportowanych wpisów i wydarzeń(motyw posiada kilka własnych typów wpisów ale o tym za chwilę). To jest oczywiście błąd – zarówno wpisy jak i wydarzenia z przykładowej zawartości „istnieją” w bazie WordPressa, jednak importer nie był w stanie ich przypisać. Dlaczego? Cóż… dobre pytanie.

Kilka kliknięć później udało mi się również ustawić przykładową zawartość dla sekcji bloga i wydarzeń:

Dla mnie ustawienie tej zawartości było oczywistością ale dla osoby początkującej nie musi tak wcale być. Importery poprzednich wersji Cherry importowały prawidłowo wszystko.

Sekcję i tak zmodyfikuję ale jeśli ma być demo, to niech będzie całe.

Teraz trochę o zapleczu. Na samym początku trzeba koniecznie wspomnieć o tym, że ani motyw, ani jego moduły dla zaplecza nie są przetłumaczone na język polski. W szczegółach technicznych na stronie skórki jest oznaczone wsparcie tylko języka angielskiego ale mimo wszystko warto o tym wspomnieć.

Teraz z czego tak naprawdę składa się motyw od strony zaplecza:
• Ustawienia motywu w personalizacji(główne, stylizacja i niektóre od zawartości)
• Moduł TM Photo Gallery(czyli po prostu galeria zdjęć)
• CPT* Appointments
• CPT* Timetable
• Zakładki Power*
• Power Builder

* CPT odnosi się do skrótu Custom Post Type – czyli własnego typu wpisów; są to typy wpisów często zaopatrywane we własne taksonomie, czy dodatkowe ustawienia.
* Power odnosi się w tym przypadku do ustawień Power Buildera.

Opcje personalizacji

TM Photo Gallery

Nie będę się specjalnie długo rozpisywał na temat modułu, ponieważ i tak będę korzystał ze wtyczki FooGallery, która daje mi o wiele większą kontrolę nad zdjęciami, ich kompresją i całą resztą.

Wracając jednak do tematu – jak widać na załączonym zdjęciu mamy podział na sety, albumy i pojedyncze zdjęcia.

Same albumy posiadają własną taksonomię i możemy im nadawać nazwy oraz opisy, dodawać do kategorii, przypisać tagi oraz dodać do konkretnego setu zdjęć.

Zapewne jest to bardzo wygodne dla osób, które nie potrzebują specjalnie skomplikowanych rozwiązań i mogą albumy dodać bezpośrednio z poziomu Power Buildera w czasie edycji podstrony.

Zarządzanie zdjęciami zawsze niedomagało we frameworku Cherry, także jest to na pewno poważny krok na przód i na plus dla twórców. Jeśli spolszczyć całość to można by się nawet pokusić o stwierdzenie, że rozwiązanie jest całkiem wygodne dla klienta końcowego.

Wtyczka TM Photo Gallery jest również darmowa – jeśli chcecie ją sobie wypróbować, to dostępna jest na oficjalnym repozytorium WordPressa.

Cherry Testimonials

Następny w kolejności jest moduł Opinii, czyli „Testimonials”. Nie będę go używał do projektu, więc nie będę się zbytnio o nim rozpisywał; demo karuzeli z opiniami możecie zobaczyć TUTAJ.

Wygląda całkiem nieźle, jest oczywiście responsywne i można nawet ustawić autoplay.

Z panelu wygląda to tak:

Jest to całkiem rozbudowany i przyjemny moduł – mamy nawet możliwość wstawiania pojedynczych opinii za pomocą shortcode’ów(jak widać na pierwszym zrzucie).

Dodatkowo posiadamy zakładkę „ustawienia”, która tak naprawdę posiada jedno ustawienie(ilość wyświetlanych opinii dla archiwum opinii) oraz listę dostępnych wartości dla shortcode’a w przypadku wstawiania ręcznego modułu na podstronę/wpis(czyli coś na wzór skróconej dokumentacji). Dostępne opcje dla wybranych wartości są dopiero widoczne przy ręcznym wstawianiu shortcode’a.

Całkiem przemyślany i uniwersalny moduł dla opinii – jak najbardziej na plus. Karuzele opinii zazwyczaj są oparte o skrypt Owl Carousel, w rzadkich przypadkach o Slick. W tym przypadku natomiast jest to Swiper. Na temat skryptu niestety nie jestem w stanie powiedzieć zbyt wiele, bo praktycznie uzależniłem się od Slicka i ciężko mi się od niego odczepić 🙂

Co ciekawe – moduł Opinii Cherry Testimonials jest dostępny zupełnie za darmo, możecie pobrać go TUTAJ. Możecie sobie przypomnieć o nim jeśli będziecie przy okazji szukali „fajnej” wtyczki pod opinie dla swojego projektu.

Booked

Następny moduł to „Booked” – czyli płatna wtyczka umożliwiająca zapisy na spotkania(lub cokolwiek innego, co tylko ustawimy).

Pełne demo możecie zobaczyć pod tym adresem, natomiast wykorzystanie z opisywanym motywie zobaczyć można tutaj(prawy widget). Trochę bardziej ostylowany bez żadnych dodatków.

Szczerze mówiąc nie wiem, czy jest sens rozpisywać się na temat wtyczki – dlaczego? Ponieważ do motywu załączona jest wersja 1.6.11, podczas gdy najnowsza(w momencie, w którym piszę artykuł) to 2.0.5 – na liście zmian nie ma podpisane dat pod wersjami ale w readme(czytajto) we folderze wtyczki widnieje informacja, że została ona przetestowana do wersji WordPressa 4.3.1, który był wydany 15 WRZEŚNIA 2015 ROKU. Mamy przestarzałą wtyczkę o prawie DWA LATA.

Wyobraźcie sobie, gdyby twórcy na themeforest do swoich motywów dorzucali przestarzałe wersje Visual Composera albo Slider Revolution… podejrzewam, że zrobiłby się niemały problem. TemplateMonster widać nie robi sobie z tego problemu – usłyszałem również, że nie zaopatrują klientów(informacja niepotwierdzona) w najnowsze wersje komercyjnych wtyczek, więc tak naprawdę mamy tutaj sytuację w której mamy miszmasz modułów aktualnych, z nieaktualnymi i pewnego dnia przy większej aktualizacji może pojawić się jakiś poważny błąd na stronie(i już nawet nie chodzi o to w jaki sposób jest napisana, co oczywiście jest również istotne ale WordPress przez 2 ostatnie lata naprawdę się zmienił; nie ma gwarancji, że wtyczka będzie z nim wiecznie działać).

W dziale informacji technicznych nie ma również ani słowa o zastosowaniu komercyjnych, możliwie nieaktualnych wtyczek. Przy okazji mamy również w tagach takie kwiatki jak „walidny kod”, czy „Refernecje” ale to już się czepiam 😀

Prawda jest taka, że modułu i tak używać nie będę, więc dla mojego projektu nie jest to żaden większy przestój, czy problem pod jakąkolwiek postacią ale jest to nadal wtyczka, która aktualizowana być powinna.

Poważny minus dla TemplateMonster.

Timetable and Event Schedule by MotoPress

Następnie mamy moduł Timetables – krótko mówiąc jest to grafik z rozpiską na poszczególne dni w formie własnego typu wpisów(custom post type).

Demo modułu możecie zobaczyć TUTAJ. Natomiast w TYM miejscu możecie zobaczyć jak wygląda pojedynczy wpis z kalendarza.

Posiada niezależną taksonomię oraz całkiem intuicyjny panel edycji. Warto również wspomnieć o możliwości eksportu/importu danych z grafika.

Co ciekawe – w odróżnieniu np. od Events Calendar ze startu umożliwia dodawanie powtarzalnych eventów. Tak poza tym jest to chyba raczej uproszczona forma modułu do zarządzania wydarzeniami.

Wtyczka ta jest również darmowa i możecie ją przetestować, jeśli zajdzie taka potrzeba – Timetable and Event Schedule by MotoPress.

Power Builder

No i do opisania tak właściwie pozostał Power Builder – czyli natywny composer dla motywów opartych o Cherry Framework 5(a przynajmniej tych komercyjnych). Temat jest trochę szerszy ale nie będzie to szczegółowa ocena na tle wszystkich dostępnych na rynku, tylko bardziej opis pracy na nim i co mi w nim przeszkadzało lub co mi się w nim podobało.

Konstrukcyjnie nie różni się specjalnie od innych wtyczek tego typu:

Czyli Sekcja > Wiersz > Kolumna(lub kolumny) > Moduł(y)

Grid działa na zasadzie najnowszego bootstrapa(opartego już o flexbox) i daje nam możliwość stworzenia maksymalnie 4 kolumn w rzędzie. Jest to trochę mało, jako iż suma wielkości kolumn(wedle przypisanych liczb) musi wynosić 12 – czyli spokojnie moglibyśmy wcisnąć choćby 6 kolumn w rzędzie – nigdy nie było z tym problemu(tj. we wcześniejszych wersjach frameworka) i mogliśmy tworzyć różne układy kolumn we wierszu, tutaj jesteśmy trochę ograniczeni.

Dostępne moduły:

Akceptowalna liczba dostępnych modułów buildera, aczkolwiek nie jest to jakaś „porażająca” liczba możliwości. Są jednak problemy innej natury.

1. Brak modułu typu „raw html” – czyli czysty html. Wbrew pozorom jest to coś, co powinno pojawić się w każdej wtyczce tego typu i większość faktycznie to ma, jednak Power Builder został pozbawiony takowej opcji. Dlaczego? Można tylko zgadywać. Być może chcieli stworzyć jak najbardziej „łopatologiczny” i kliento-odporny composer, kto wie. Dla mnie jest to poważny minus – owszem, mogę wklepać kod w module tekstowym ale ten doklei paragrafy i inny, niepotrzebny dla mnie kod.

2. Brak modułu typu „spacer„, czyli tworzenia gołej przestrzeni. Alternatywnie można ustawiać marginesy w innych modułach lub użyć tzw. „dividera„, który jest odpowiednikiem <hr>, czyli linii poziomej z tym, że możemy ustalić jej wielkość i widoczność. Co ciekawe divider z automatu przestaje być widoczny na mniejszych rozdzielczościach i działa to niezależnie od nas(mimo, że widnieje opcja wyłączenia modułu dla poszczególnych typów urządzeń). Takie kwiatki to nic nowego w produktach TemplateMonster, aczkolwiek trzeba na to zwrócić uwagę.

3. Moduł karuzeli umożliwia zaciąganie postów, a nie własnych obrazów. Niby karuzele najczęściej są wykorzystywane do wyświetlania treści wpisów ale nie zawsze. Wolałbym mieć więcej możliwości, takowych niestety nie ma.

4. W modułach blogowych brak możliwości zmiany opcji filtrowania, czy sortowania wpisów. To jest podstawa, tutaj tego nie ma…

5. Pomimo, że wiersze i sekcje posiadają opcję ich podpisu(podobnie jak moduły), to niestety owe podpisy się w ogóle nie wyświetlają. W tej konkretnej sprawie nawet kontaktowałem się z supportem i okazuje się, że to nie jest błąd… ponoć zostanie wysłana stosowna wiadomość do dev teamu, jednak nie chce mi się wierzyć, że zostanie to poprawione w bliskiej przyszłości(o ile w ogóle).

#Aktualizacja 13.03.2019: Nigdy nie było poprawione, a moduł jest zwyczajnie martwy, choć motywy na nim są nadal sprzedawane 🙂

Tak poza tym spora część jest całkiem przemyślana – możemy nazywać bloki(tj. na chwilę obecną tylko moduły) po swojemu, są dedykowane rozwiązania pod własny CSS, każdy moduł posiada zaawansowane ustawienia, które dają całkiem sporo różnych możliwości i generalnie byłem pozytywnie zaskoczony. Widać, że ktoś faktycznie z głową siedział przy projektowaniu wtyczki – natomiast nie wiem, czy miał czas/budżet aby ją dokończyć. Dlaczego wychodzę z takiego założenia? Power Builder jest darmowy, jak i również integrator pod wtyczki Cherry – natomiast na githubie brak jakiejkolwiek dokumentacji, lista zmian nie była aktualizowana od roku i całość jest trochę na takiej zasadzie „jest bo jest”. Twórcy również niespecjalnie się udzielają w przypadku problemów – żeby faktycznie otrzymać jakąś pomoc musimy się zwrócić do supportu z kodem zakupu i wtedy jest szansa, że w przypadku błędów technicznych otrzymamy pomoc ale i niekoniecznie.

Co mnie natomiast irytowało na potęgę – moduł tekstowy głupieje okazjonalnie przy przełączaniu z trybu tekstowego na wizualny oraz przy przesuwaniu bloków pomiędzy kolumnami. Przy zapisie wszystkie bloki tekstowe potrafią zmienić formatowanie tylko dlatego, że przełączenie trybu namieszało z kodem. Przypominam sobie podobny problem z Visual Composerem – możliwe, że trochę w tym winy samego WordPressa ale tak być nie powinno.

Power Builder jest „fajny”, przyjemny dla oka, całkiem optymalny i nie tworzy aż takiego nadmiaru kodu, jak niektóre inne wtyczki tego typu ale zastanowiłbym się dwa razy, jeśli miałbym załączać Power Builder w niezależnym projekcie.

W podsumowaniu – wykorzystanie dla tego konkretnego projektu – pracowało mi się na nim przyjemnie. UI jest intuicyjne, najważniejsze opcje są na swoich miejscach, nadmiar bloków nie muli strony edycji i mogłem przygotować układ bloków w ten sposób, że będzie wygodny dla edycji pod klienta oraz jeśli kiedykolwiek wejdzie na zaplecze ktoś inny(tj. developer/seowiec, whatever), to nie będzie miał większego problemu z ogarnięciem co gdzie jest – w przypadku innych wtyczek to nie zawsze jest takie oczywiste(patrzę w stronę Visual Composera). Pracowałem już na kilku różnych wtyczkach „układankach” i dotychczas jeśli chodzi o wygodę, to Power Builder byłby zaraz po Page Builder by SiteOrigin. Podkreślam, że mówię o „wygodzie” użytkowania wtyczki tego typu – nie o dostępnych funkcjonalnościach.

Przykładowe elementy stworzone za pomocą modułów Power Buildera dla motywu opisanego w artykule, możecie znaleźć TUTAJ.

Wtyczka tak jak wspominałem jest darmowa, więc jak najbardziej możecie ją wypróbować na własną rękę:
github.com/templatemonster/power-builder
github.com/templatemonster/power-builder-integrator

Niespecjalnie do tego zachęcam ale kto wie, może wam przypadnie do gustu.

Z innych rzeczy, o których warto wspomnieć – motyw, a raczej framework posiada wbudowaną opcję ustalenia układu strony wedle bloków składni strony, tj. układu ogólnego(czyli umiejscowienie paska bocznego), nagłówka, kontenera z zawartością strony(czyli to, co wklepiemy ręcznie w edytor lub dodamy builderem) oraz stopki.

Mamy również konfigurację pasków bocznych dla danej podstrony – jest to niezwykle przydatne, jeśli chcemy ustawić różne widgety dla różnych stron/wpisów.

Ta sama wtyczka umożliwia nam tworzenie innych(własnych) pasków bocznych, które możemy przypisywać wedle woli.

Wtyczkę możecie pobrać z repozytorium WordPressa w tym miejscu – Cherry Sidebars.

Moim zdaniem jest to bardziej bajer, aniżeli wtyczka typu „must be” ale w tym przypadku była to część zawartości demo i wymaganych wtyczek do prawidłowego działania motywu.

Na motywie(lub chyba bardziej na frameworku) pracowało mi się całkiem przyjemnie – wiele rzeczy jest przemyślanych(UI) ale dla kontrastu pojawiają się również rozwiązania niekoniecznie przydatne lub braki we funkcjonalnościach.

Dla osoby niedoświadczonej, która chce po prostu „podmienić” treść w motywie na swoją nie będzie większego problemu – można klepać builderem treść i podmieniać wedle woli, wszystko zdaje się dość proste po chwilowym obeznaniu z działaniem Power Buildera i zawartością dostępnych opcji w Personalizacji; problem natomiast pojawia się w przypadku, kiedy motyw przechodzi większe zmiany i potrzebujemy większej swobody działania. Skłaniałbym się ku przekonaniu, że motywy oparte o Cherry Framework v5 takowej swobody nie dają.

Inne problemy pojawiały się w przypadku załączania nieaktualnych wtyczek(Booked), czy przy potrzebie załączania oddzielnie własnych grubości fontów od Google(cherry v4 posiadał takową opcję) ale nie było tych problemów na tyle wiele, żebym zniechęcał do wypróbowania motywu tego lub innego opartego właśnie o wisienkę w wersji 5.

Zapytacie czy warto – motyw w momencie pisania artykułu kosztuje 271 zł, nie jest to wygórowana cena, posiada zewnętrzne wtyczki(w tym jedną komercyjną), wygląda całkiem ok i jest na licencji gplv3 – czyli w odróżnieniu od motywów zakupionych na TF możemy używać jej na nieograniczonej ilości projektów, do tego jest ona całkiem optymalna jak na projekt postawiony we współpracy z builderem. Więc powiem tak – dla początkujących jak najbardziej ok, natomiast średnio-zaawansowani i wyżej raczej powinni dać sobie spokój, nie jest to układ specjalnie trudny do zakodowania zwłaszcza, że nie jest to ten z typu „pixel perfect”.

Pamiętajcie – przy zakupie skórki zobaczycie wiele dodatkowych usług, w tym „wymagane wtyczki”, czy „instalację” lub „integrację treści” – usługi te są drogie nawet jak na nasz rynek; poza tym motyw w podstawowej wersji posiada wszystko, co trzeba – resztę można doinstalować(za darmo). Są to usługi bardziej dla osób, które eh… w zasadzie nie wiem, mają pewnie zbyt grube portfele. Zastanówcie się dwa razy, zanim z nich skorzystacie.

Kilka słów podsumowania o Cherry Framework…

Postawiłem dziesiątki stron opartych na Cherry Framework i osobiście muszę przyznać, że v5 to krok w tył, nie na przód. Wersje 3 i 4 wymagały porządnych rewizji pod względem budowy, działania i całej reszty ale v5 to taki trochę miszmasz i wizja typu „nie wiemy, w którą stronę chcemy pójść, więc damy wszystkiego po trochu”. Żałuję trochę, że nie ma tutaj konkretnego konceptu przyszłości frameworka – tak naprawdę od wersji 3 w górę przechodzi on gruntowne zmiany ciężkie do ogarnięcia dla użytkowników przyzwyczajonych do pewnych rozwiązań. Jestem jak najbardziej za postępem ale niech będzie to robione z głową. No i jeśli tworzymy polską wersję językową serwisu, to niech będzie ona prawidłowo przetłumaczona i w całości 🙂

Co do samego projektu, zrzuty możecie zobaczyć poniżej:

Zrzut projektu nr 1 – strona główna
Zrzut projektu nr 2 – podstrona zajęć tanecznych
Zrzut projektu nr 3 – kadra
Zrzut projektu nr 4 – cennik

UWAGA! Zrzuty są bardzo „ciężkie”, ich załadowanie może zabrać trochę czasu.
* Zrzuty są dodane jedynie w celach podglądowych. Zabronione jest kopiowanie jakiejkolwiek treści załączonej na zrzutach.

Gotowy projekt można zobaczyć przechodząc na ten adres.