Czy warto kupować motywy do WordPressa – studium przypadku
- Piotr Bartczak
- 4 maj 2013
- 8 minut(y) czytania
Płatne, gotowe motywy do WordPressa kosztują ok. 200-300zł. Czy warte są tych pieniędzy? Istnieje obiegowa opinia, która mówi, że płatne motywy do WordPressa są o niebo lepszej jakości niż darmowe. Czy rzeczywiście tak jest? Czy kupując gotowy motyw do WordPressa nabywamy również gwarancję, że wszystko będzie działać? Z jakimi niespodziankami można się spotkać? Na te i podobne pytania będę się starać odpowiedzieć w nowym cyklu na blogu pt.
Akademickie teorie zostawiamy teoretykom, a złote rady i poradniki z serii „5 zasad którymi kierować się podczas kupowania motywu” – pozycjonerom ściągającym sztucznie ruch na swoje strony. Tutaj będzie sam life. Czyli opis przypadków z życia wziętych. Bo szablon szablonowi nierówny i w tej materii prawdziwe staje się powiedzenie, że teoria sobie, a życie sobie.
Przychodzi klient do speca od WordPressa…
Klienci, którzy szukają gotowego motywu do WordPressa kierują się najczęściej wyglądem estetycznym i na przykładzie wersji demo sprawdzają, czy tak właśnie miałaby wyglądać ich nowa strona. Czy jest to słuszne podejście? Jako pierwszy krok w tym procesie – tak. Ale zwykle na ocenie wyglądu ich wiedza się kończy. Bo co jeszcze można sprawdzić zanim kupimy motyw? Zobaczmy na przykładzie.
Czy ten motyw to dobry wybór?
Zgłosił się do mnie klient z wybranym już na theme stocku motywem i pytaniem, czy ten szablon nada się do jego potrzeb. A „potrzebą” klienta była strona, która posłuży do prezentacji jego prac w formie zdjęć. Wybranym szablonem był motyw o nazwie Roya, którego link do wersji demo znajdziemy pod pierwszym z obrazków niżej.
Motyw Roya w oryginale
Motyw Roya po adaptacji do potrzeb klienta
Moja ocena motywu przed zakupem na podstawie dostępnych informacji
Na co zwracać uwagę przed zakupem motywu
Plusy:
wizualnie ładny: nowoczesny, przejrzysty, efektownie pokazujący portfolio
wykorzystanie technologii AJAX do zaczytywania zdjęć – dobrze sprawdza się przy dużych ilościach zdjęć, nie odczujemy spowolnienia przy ładowaniu strony
motyw responsywny – strona będzie wyglądać dobrze na tabletach i smartfonach
mała liczba osób, które zakupiły ten motyw – szanse, że się przypadkowo natkniemy na podobną witrynę w sieci znikome
3 rodzaje galerii do wykorzystania
Plusy techniczne:
ostatnio niedawno modyfikowany – autor rozwija motyw, nanosi poprawki
motyw zgodny z najnowszą wersją WordPressa
przystosowany do działania w najpopularniejszych przeglądarkach
autor odpowiada na pytania w ramach komenatarzy
Ocena motywu przed kupieniem
Minusy:
pierwszy motyw tego autora
ocena innych osób, które kupiły ten motyw: 4 gwiazdki – z doświadczenia wiem, że może to oznaczać kłopoty
brak dokumentacji online, która pozwoliłaby na zapoznanie się z możliwościami motywu jeszcze przed zakupem
sporo pytań postawionych autorowi w komentarzach nie doczekało się satysfakcjonujących odpowiedzi
Czy w to wchodzimy?
Takie mniej więcej (jak wyżej) podsumowanie przedstawiłam klientowi.
Porada: Podczas przekazywania oceny motywu klientowi nie wchodź w szczegóły techniczne. Klient może nie rozumieć, co to znaczy np. motyw responsywny. Zamiast tego używaj języka korzyści i strat – np. Pana stronę będzie się wygodnie przeglądać na komórkach.
Decyzja i uzasadnienie
Stwierdziłam, że motyw mimo dostrzeżonych wad będzie dobrym wyborem. Strona miała na celu dobre zaprezentowanie portfolio w formie zdjęć, a więc liczyła się efektowność.
Uznałam też, że czas, który zejdzie mi na szukanie alternatywnych szablonów wykorzystam na poprawę błędów, które na pewno się znajdą…
… bo nie ma się co oszukiwać. Motyw który ma 4 gwiazdki (nie pięć, ani nawet cztery i pół) i jest pierwszą pracą autora na pewno będzie miał sporo niedoróbek.
Jakie błędy i niedociągnięcia motywu wyszły w czasie prac
Problem 1: Nie dało się zrobić motywu potomnego
Pierwszy raz się z czymś takim spotkałam. Do motywu nie dało się wykonać motywu potomnego! Dla przypomnienia, wszystkie zmiany w zakupionym motywie powinno się robić w tzw. motywie potomnym, żeby nie stracić zmian podczas aktualizacji motywu do nowszej wersji.
Po kilku godzinach bezowocnej analizy kodów źródłowych i szukania przyczyny, zadałam pytanie o to autorowi motywu w komentarzach. Nie doczekałam się na nie odpowiedzi, po czym okazało się, że moje pytanie zniknęło (czyżby było niewygodne?). Żeby nie tracić czasu, zdecydowałam się więc robić zmiany na gotowym motywie.
Problem 2: Nie dało się wstawić podpisów pod obrazki w głównej galerii
Zaczęłam od uzupełniania najważniejszej części witryny – prezentacji portfolio w formie galerii na stronie głównej. I tu od razu pojawił się problem: brak możliwości dodania tytułów pod obrazki.
Funkcjonalność wyświetlania podpisów do zdjęć pod obrazkiem trzeba było zaimplementować samemu
Dlaczego podpisy pod obrazkami są takie ważne
Użytkownicy oglądający stronę typu portfolio to potencjalni klienci. Chcą wiedzieć, co przedstawiają poszczególne prace.
Podpisy pod obrazkami nadają prestiżu realizacjom, tym bardziej, gdy jest się czym pochwalić. Wykonanie makiety bazyliki w Lourdes, jednego z najsłynniejszych obiektów sakralnych świata, to co innego niż wykonanie „jakiejś tam” makiety. Podpis musi być.
Podpisy pod zdjęcia zwiększą atrakcyjność strony dla indeksowania w Google. W stronach typu portfolio zwykle jest mało tekstu, dlatego tym bardziej powinno się je uzupełniać.
Jak rozwiązałam ten problem
Zaczęłam od zadania autorowi motywu pytania o możliwość dodawania podpisów do obrazków. Jak widać w podlinkowanej stronie, autor szybko odpowiedział, jednak okazało się, że motyw nie daje takiej możliwości.
Co robić, gdy autor mówi „Niestety, nie da się…” Trzeba poszukać alternatywnych rozwiązań lub zaimplementować rozwiązanie samemu. Ja zrobiłam tak:
Sprawdziłam, że wykorzystany do prezentacji zdjęć w lighboksie używany jest plugin jquery PrettyPhoto.
Z dokumentacji tejże galerii i podpowiedzi znalezionych w Google dowiedziałam się, że wystarczy uzupełnić atrybut title dla linków do zdjęć prezentowanych w lighboksie.
Wprowadziłam zmiany w kodzie, które pobiorą tytuł zdjęcia ustawiony dla Ikony wpisu i według niego ustawią atrybut title.
Problem 3: Brak miniaturek zdjęć w przeglądaniu portfolio
Na zdjęcia dodawane do portfolio (prezentowanego na stronie głównej) autor motywu przydzielił osobny „pojemnik”, czyli wykorzystał własny typ wpisu w WordPressie. Nazwał go Portfolio – zobacz obrazek niżej.
Wykorzystanie własnego typ wpisów w WordPressie dla portfolio powinno umożliwiać pokazanie miniaturek zdjęć.
Jednak zabrakło drobnego, ale istotnego szczegółu. Wyświetlania obok każdego wpisu miniaturki dodanego zdjęcia. Dzięki czemu użytkownik szybko, wzrokowo odnajdzie szukany wpis. Mi samej tak bardzo doskwierał brak tej miniatury podczas dodawanie treści, że rozbudowałam motyw o tę zmianę (dodane linijki podświetlone):
Jak dodać wyświetlanie miniaturek zdjęć do własnego typu wpisów
add_action("manage_posts_custom_column", "portfolio_custom_columns");
function portfolio_custom_columns($column) {
global $post;
switch ($column)
{
case "description":
the_excerpt();
break;
case "type":
echo get_the_term_list($post->ID, 'portfolio-category', '', ', ','');
break;
case "portfolio_thumbnail":
echo get_the_post_thumbnail($post->ID, array(100,80));
break;
}
}
Problem 4: Dodawanie zdjęć do galerii bardzo nieintuicyjne
Motyw umożliwia wstawienie we wpisie dwóch innych wersji galerii: w formie rotatora i samoczynnie zmieniających się, przenikających zdjęć. Obie bardzo efektowne! Problem tylko w tym, że nie bardzo wiadomo, jak to zrobić.
Czy wiesz, że… w WordPressie zdjęcie może być dołączone do wpisu nawet jeśli go we wpisie nie widać? Stanie się tak wtedy, gdy zdjęcie dodajemy do WordPressa z poziomu wpisu (przycisk Dodaj medium), a potem je z wpisu usuniemy. Dopóki zdjęcie istnieje w WordPressie, WordPress nadal trzyma informację o powiązaniu zdjęcia z wpisem, do którego początkowo je załadowano.
I w oparciu o tę wiedzę (zdjęcia powiązane z wpisem) autorzy motywów często tworzą własne galerie, wyświetlane za pomocą własnych shortcode’ów. Ale jak biedny użytkownik ma się domyślić, że galeria pokazuje zdjęcia, których on nie widzi w edycji wpisu? A jeśli chce je widzieć i pozostawi je we wpisie, to zdjęcia pokażą się podwójnie: i w galerii, i w miejscu, gdzie były wstawione.
Jeśli się w tym miejscu czytelniku zgubiłeś, to znaczy, że wszystko w porządku. Czyli zarzut, że budowanie mechanizmu galerii na tych zasadach jest pomyłką, jest jak najbardziej słuszny.
Zdjęcia załadowane do wpisu w WordPressie
Jeśli jednak przyjdzie Ci kiedyś potrzeba sprawdzenia, które zdjęcia są już załadowane do wpisu (czyli na wieki wieków połączone nierozerwalnym węzłem, dopóki śmierć – czyli ich trwałe usunięcie z WordPressa – nie rozłączy), to polecam ten oto sposób:
Jak szybko sprawdzić, które zdjęcia są załadowane do wpisu 1. Będąc w edycji wpisu, kliknij przycisk „Dodaj medium”. 2. Z listy rozwijanej wybierz „Załadowano do wpisu” (zobacz rysunek obok).
Problem 5: Galeria nie dostosowana do zdjęć o orientacji pionowej
Problem zdjęć pionowych
Okazało się, że galeria w formie rotatora sprawdza tylko do zdjęć o orientacji poziomej. Trzeba było zatem zrezygnować z kilku ciekawych, aczkolwiek „pionowych” fotek. W pierwszym odruchu postanowiłam, że dodam je normalnie w treści wpisu poniżej galerii.
I tu ponownie odbiłam się o problem galerii, która automatem „zasysa” wszystkie zdjęcia dołączane do wpisu (problem opisany punkt wyżej). Obeszłam go, wstawiając zdjęcie do sztucznego wpisu, a potem kopiując do edytora tekstowego sam kod HTML. Niezbyt elegancko, ale trzeb przyznać, że efekt jest. Zobacz podstronę podlinkowaną pod obrazek obok.
Problem 6: Brak responsywności obrazków po dodaniu podpisów
Motyw Roya jest motywem responsywnym, co jest jego ogromną zaletą. Nagle jednak dostrzegłam, ze niektóre obrazki dodawane do wpisów responsywne nie są. Zachowanie to wydawało się być o tyle dziwne, gdyż dotyczyło tylko niektórych zdjęć.
Kiedy już doszłam do tego, że problem dotyczy tylko zdjęć, pod którymi są wyświetlane podpisy, rozwiązanie znalazłam chwilę później w google:
Problem nie działających obrazków z podpisami w motywach responsywnych
Rozwiązanie problemu przedstawione na forum WordPressa polega na wprowadzeniu kilku linijek do pliku style.css.
Problem 7: Niespodzianki przy formularzu kontaktowym
Niedociągnięcia w formularzu kontaktowym
W motywach płatnych zwykle mamy gotową templatkę do obsługi formularza kontaktowego. W przypadku motywu Roya okazało się, że trzeba wspomóc się wtyczką Contact Form 7. Autor przygotował motyw na współpracę z tym pluginem, ale i tutaj nie obeszło się bez niedociągnięć:
1. Pole do wpisania adresu było nie sformatowane (patrz obok). 2. Przycisk wysyłania formularza był gotową grafiką, łącznie z tekstem. Przetłumaczenie tego na język polski wymagało zatem przygotowania grafiki przycisku od nowa.
Problem 8: Błędy w dostosowaniu motywu do tłumaczenia
Motyw był przygotowany na tłumaczenie (lokalizację), ale nie do końca. Większość tekstów zależnych od języka, jak jak np. Posted in category (Opublikowano w kategorii) była na szczęście zapisana w kodzie za pomocą specjalnych funkcji _e oraz __, ale i tak z lokalizacją tego motywu było sporo kłopotów:
Brak w kodach źródłowych funkcji load_theme_textdomain, pozwalającej na zaczytanie przetłumaczonych fraz z tzw. plików „mo”.
Nie wszystkie frazy w kodzie źródłowym były przygotowane na lokalizację. Np. fraza „show all” widoczna na stronie głównej była wyświetlana bez użycia funkcji _e.
Daty nie były przygotowane na zaczytanie formatu z ustawień ogólnych WordPressa. Co powodowało, że np. data 23 kwietnia 2013 była wyświetlana jako Kwiecień 23, 2013. A godzina 19:05, jako 7:05 pm.
Poniżej zmiany, które wprowadziłam do kodów motywu, żeby rozwiązać te problemy.
/* ad 1) */
load_theme_textdomain( 'spnoy', get_template_directory() . '/languages' );
/* ad 2) */
/* przed zmianą: */ data-filter=".item">show all</a>
/* po zmianie: */ data-filter=".item"><?php _e('Show all', 'spnoy'); ?></a>
/* ad 3) */
/* przed zmianą: */ the_time('F j, Y g:i a');
/* po zmianie: */ date_i18n(get_option('date_format') ,strtotime("11/15-1976"));
Wnioski końcowe
Na tym nie koniec listy błędów i niedoróbek szablonu Roya. Na potrzeby tego wpisu wybrałam tylko najistotniejsze i takie, które powtarzają się w innych motywach. Wychwycenie niektórych błędów zajęło mi tylko chwilę, bo już się z nimi wcześniej spotkałam lub kiedyś sama je popełniałam. Niektóre zaś wymagały głębszej analizy i ślęczenia nad kodem źródłowym.
Jednak wybór motywu uważam za trafiony. Postawiony cel został osiągnięty. Oferta firmowa klienta prezentuje się efektownie. Klient z rezultatu końcowego jest bardzo zadowolony. Czas, który poświęciłam na naprawę błędów i tak jest o wiele krótszy niż w przypadku gdyby przyszło mi pisać motyw z taką funkcjonalnością od zera.
Problem dwóch linków
Na koniec ciekawostka Po kilku dniach od oddania strony, okazało się jednak, że odwiedzający przy przeglądaniu portfolio klikają tylko w ikonkę „z okiem”. I nie dostrzegają, że pod spinaczem kryje się przejście do szczegółowego opisu realizacji.
Zastosowanie w tym miejscu dwóch linków na raz ma swoje zalety – kliknięcie w „oczko” pozwala w wygodny sposób przejrzeć galerię bez zagłębiania się w szczegóły. Odnośnik do pełnego opisu również jest potrzebny.
Długo nie wiedziałam jak z tego wybrnąć, bo w duchu przyznawałam klientowi rację – to nie jest oczywiste, że to są dwa niezależne linki. Ostatecznie zaproponowałam i wdrożyłam takie oto rozwiązanie: Do tytułu zdjęcia pokazującego się w lightboksie dodałam link z informacją „Więcej o tej realizacji »”. Żeby osiągnąć ten efekt trochę się namęczyłam. Ale to już zupełnie inna historia…
Comments