23.12.2009

Zaawansowana zabawa z szablonami podstron w Wordpressie

Ten wpis jest kolejnym moim chwaleniem się jaką stronę wykonałem na bazie Wordpressa, a zarazem chcę tutaj pokazać jak bardzo można zmodyfikować Wordpressa (na pierwszy rzut oka nie widać, że to właśnie Wordpress) i pokazać praktyczne zastosowanie dziedziczenia szablonów. Powiem szczerze, że jestem dumny z tego, co mi tutaj wyszło :)

Tutaj czyli na stronie Młodzi Twórcy wykonanej dla Urzędu Miejskiego w Białymstoku. Białystok ma program stypendialny dla ludzi uzdolnionych w różnych dziedzinach (ma zapewne jak i inne miasta, ale tylko Białystok jak widać chce się tym chwalić). Program działa już od jakiegoś czasu, ale teraz przyszła pora na stworzenie dla niego strony internetowej. I tutaj pojawiam się ja (jako podwykonawca dla  Man With The Plan).

Powyżej obrazek przedstawiający stronę główną. Wszystkie zrzuty ekranu w tym wpisie są klikalne więc jeśli chcecie, śmiało przechodźcie aby zobaczyć jak to wygląda u Was :)

Jak widać nie ma tutaj typowo blogowego układu. Mnie to nie dziwi, bo Wordpress coraz bardziej staje się zwykłym CMSem zdolnym do tworzenia każdego rodzaju stron (choć blogi się w nim robi najłatwiej). Mechanizm bloga wykorzystałem tutaj w dziale Aktualności. Reszta to coś, co w panelu administracyjnym Wordpressa nazywa się po prostu Strony.

Ale jakie strony! Poklikajcie na odnośniki w górnym panelu, a przekonacie się, że praktycznie każda z nich wygląda inaczej. Było to nie lada wyzwaniem ale się udało. Inny układ  kolumn na poszczególnych podstronach, co innego w sidebarach w zależności  od tego na jakiej stronie się właśnie znajdujemy, “podświetlenie” dla pozycji w górnym menu nie tylko gdy jesteśmy na tej właśnie stronie, ale także na stronie potomnej danej podstrony.

Nie było to łatwe, bo musiałem zrobić to jak najbardziej user friendly. Założyliśmy, że osoby w urzędzie nie znają Wordpressa, więc sztuczki z Custom Fields, zastosowanie widget logic, custom themes trzeba unikać jak najbardziej. Osoba dodająca treści ma po prostu dodać kolejną stronę, określić, że jest ona “dzieckiem” takiej czy innej strony, a Wordpress i jego funkcje same mają rozpoznać jaką właśnie stronę internauta chce wyświetlić i pokazać ją jak na obrazku powyżej (tak, to jest zwykła strona w Wordpressie, stworzona we wbudwanym w nim edytorze stron; to ja, a nie osoba wprowadzająca tekst zadbałem by nagłówki miały inny wygląd, by każdy akapit był właściwie oddzielnym divem, a zawarty w nim odnośnik do pliku stał się przyciskiem wyrównanym do prawej) lub na przykład jak ta strona:

Jak widać wyżej mamy trzy sekcje: opis stypendysty, jego (czy w tym wypadku – jej) program stypendium i jego/jej zdjęcia. Tu także całość została zrobiona tak, aby pracownik urzędu nie musiał niczym się martwić: musi jedynie dodać treść, dodać zdjęcia (działa także dodawanie filmów), a to ja musiałem rozpoznać gdzie zaczyna się program stypendium czy właśnie zdjęcia lub filmy (i sprawić by miały inne tło). Co więcej powstały strony grupujące: gdy pracownik urzędu doda stronę konkretnego stypendysty, automatycznie pojawi się ona na stronie ich grupującej rocznikami:

Udało się? Przy “odrobinie” znajomości Wordpressa i  umiejętności pisania dla niego funkcji, zabawy w dziedziczenie tematów graficznych, efekt jest chyba całkiem niezły, nie prawda? ;)

* * *

A może Ty też chcesz mieć taką stronę, szukasz kogoś kto zajmie się Twoim blogiem, albo znasz kogoś z takimi potrzebami? Zajrzyj na stronę O mnie i odezwij się do mnie w jeden z podanych tam sposobów, a na pewno uda nam sie razem wyczarować coś fajnego :)

27.11.2009

WWF używa Wordpressa, musicie mi wierzyć na słowo

Dziś rano w telewizorni widziałem reklamę społecznej akcji ratowania fok szarych organizowaną przez WWF Polska. Może więc się kolejny raz pochwalę zrobioną już jakiś czas temu stroną. Choć “pochwalę” to za duże słowo, bo nic Wam raczej pokazać nie mogę :) Musicie mi wierzyć na słowo, że to co tu piszę, to prawda.

Blog wolontariuszy WWF, tak wyglądał projekt graficzny

Blog wolontariuszy WWF, tak wyglądał projekt graficzny

Jakoś we wrześniu ktoś szukał kogoś, kto by znał się co nieco na Wordpressie, więc się zgłosiłem. Okazało się, że trzeba uruchomić blog towarzyszący społecznej akcji ratowania fok w Polsce. Coś w rodzaju małego serwisu społecznościowego, w której osoby biorące udział w ratowaniu fok będą mogli się zarejestrować, blogować (stąd więc od razu przyszedł pomysł Wordpressa), dodać swoje zdjęcia z pracy i wrzucić filmy. Napisać kilka słów o sobie, zaznaczyć swoją pozycję na mapie Google Maps tak aby, gdy ktoś szuka pomocy przy fokach w okolicy Helu mógł szybko odnaleźć patrolowiczów w pobliżu.

Strona jest już wykonana, działa od dawna (i z tego co widzę działa bez zarzutu, bo nikt nie zgłasza mi żadnych problemów). Niestety linka do strony podawać nie będę, bo tylko zalogowani ludzie w WWF mogą ją zobaczyć. Ale i tak się chwalę ;)

Powyżej znajduje się design na bazie jakiego miałem wykonać stronę. Praca na początku była prosta: pociąć wszystko do HTML zgodnego z jak największą ilością przeglądarek, zrobić z tego szablon do Wordpressa. Potem zaczęły się schody.

Zleceniodawca wymagał bardzo precyzyjnego dopasowania się do zaleceń. Wskutek tego najpierw sporo czasu spędziłem na poszukiwaniu odpowiednich pluginów, by ostatecznie przegonać się, że każdemu coś brakuje lub robi to w nie taki sposób, jak było to opisane w zleceniu. I wtedy rozpisałem się podczas pisania kodu nowych pluginów, ściśle dopasowanych do wymagań. (Pamiętacie moje wpisy dotyczące publikacji nowych wtyczek i tutoriale jak wtyczki się pisze? To wtedy mniej więcej robiłem tą stronę).

Pluginów napisanych było kilka. Wspomnę o dwóch.

Jeden z nich to Youtube Add Video, który zamieściłem publicznie w internecie, tak by i inni mogli z niego skorzystać i przy okazji opisałem jak powstawał. W dostępnych pluginach brakowało możliwości określenia kto dodał film (nic dziwnego, przeważnie blog prowadzi jedna osoba, a tutaj Wordpress działał niemal jako platforma blogowa) i możliwości wyciągnięcia informacji o ostatnio dodanym filmie i umieszczenia jej w sidebarze. Napisanie takiego pluginu okazało się wykonalne :)

Drugi plugin aż szkoda, że nie udostępniłem go nigdzie bo jestem z niego dumny (teraz nie mam już niestety dostępu do jego kodu). Plugin bazował na Google Maps API  i pozwałał:

  • wyświetlić mapę w sidebarze
  • pokazać zaznaczonych na niej wszystkich wolontariuszy lub konkretnego (jeśli akurat przeglądaliśmy stronę użytkownika)
  • w panelu administracyjnym pozwalał użytkownikowi dodać swoją pozycję na mapie.

Plugin działa wyśmienicie, a przynajmniej działał w momencie oddawania strony zleceniodawcy ;) Ale jak wspomniałem, żadnych reklamacji nie dostałem.

* * *

Było jeszcze kilka innych wtyczek, ale zdecydowanie mniejszych i mniej ciekawych. Z projektu jestem dość zadowolony bo rozruszał mnie po długien przerwie, od czasu gdy wykonałem stronę WildPoland. Obecnie  zleceń mam całkiem sporo, w poprzednim tygodniu kilku osobom musiałem odmówić podjęcia się zadania, bo zwyczajnie nie wyrabiałem się w 24 godzinach na dobę :) I teraz gdy to piszę, jestem właśnie w czasie krótkiej przerwy w programowaniu kolejnego wordpressowego wdrożenia.

Nie zmienia to faktu, że jeśli ktoś z Was właśnie potrzebuje uruchomić jakąś stronę i wierzy, że Wordpress jako CMS sprawdzi się tutaj bardzo dobrze (w tym tygodniu to właśnie Wordpress zwyciężył w konkursie na najlepszy system CMS open source), może śmiało do mnie pisać. Obecnie wykonywane przeze mnie zadania prędzej czy później będą musiały się skończyć i chętnie podejmę się kolejnych wyzwań. :)

21.11.2009

Wróciłem do Afryki!

Takim czymś to aż grzech się nie pochwalić :) Co prawda osobiście, własnym ciałem w Afryce się (jeszcze) nie znalazłem ale z dumą mogę powiedzieć, że stworzyłem świetną (świetną, bo moją) stronę (ba! portal) dla okołoafrykańskiej organizacji.

afrix

Jakoś pod koniec września zapytano mnie, czy podjąłbym się karkołomnego wyzwania stworzenia strony integrującej mniejszości narodowe (głównie Afrykańczyków) zamieszkujące Europę z Europejczykami. Nic wielkiego: strona w kilku wersjach językowych, z opcją logowania, każdy może sobie założyć konto, każdy może na stronie prowadzić swojego bloga, opisać siebie w swoim profilu, może dodać zdjęcia, dodać filmy, ogłoszenia, pisać na forum, ustawić jakby status (gdy byłem o to poproszony śledzik jeszcze nie istniał więc tak tego nie nazwano)… Do tego mechanizm wysyłania wewnętrznych wiadomości, komunikator między użytkownikami (tym bardziej nikt nie słyszał jeszcze o NKtalk, więc i tego tak nie nazwano), możliwość ustawiania poziomu dostępu do danych w profilu (na poziomie całego profilu, jak i na poziomie poszczególnych danych). Możliwość pokazania się na mapie, możliwość dodawania się do znajomych, możliwość wyszukiwania się po kraju zamieszkania, pochodzenia, płci… Możliwość, możliwość, …

Zapytałem: “Czyli chcecie abym zrobił taką jakby kolejną Naszą Klasę, tylko że dla Afrykańczyków i to zrobił to w pojedynke?”

Dostałem odpowiedź: “Tak. I masz na to 30 dni czasu”

Już miałem odmówić, ale pomyślałem o racie za samochód, racie za pralkę i kredycie hipotecznym. Jako, że nie spłacam żadnych rat i tym bardziej hipoteki nie mam, argumenty te do mnie trafiły i nadl nie byłem zdecydowany. Tak naprawdę nie wiem o czym bardziej pomyślałem: o możliwości aby kolejny raz zrobić coś dla Afryki, o niemożliwym wyzwaniu stojącym przede mną (prawdę mówiąc im zadanie które staje przede mną brzmi bardziej niewykonalnie, tym większa jest szansa, że za nie się wezmę), czy o tej kupie szmalu jaką mi za to obiecano ;)

W każdym bądź razie, Proszę Państwa – oto Afrix!

Nie wszystko tam jeszcze działa z rzeczy założonych (ale zdecydowana większość już tak), serwis ma błędy (jeśli ktoś zauważy jakieś niedziałające linki czy inne bugi, napiszcie o tym do mnie w prywatnej wiadomości na Afriksie) ale jeśli uznać przyklejony do logo serwisu napis “beta” stwierdzam, że dzieło jest już zdatne do użytku. Zapraszam do oglądania, testowania i przede wszystkim zakładania tam sobie kont. Celem jest integracja nas – Europejczyków – z Afrykańczykami. Już niedługo serwis będzie poszukiwał wolontariuszy do pracy przy tematach integracyjnych, mam nadzieję, że pozwoli także nawiązać mnóstwo znajomości międzynarodowych :)

* * *

A jak się tworzy taki serwis w tak krótkim czasie? Co prawda termin został przekroczony, bo całość miało ruszyć 4 października, a ruszyło w ostatni czwartek, ale udało się dzięki wykorzystaniu już dostepnego oprogramowania.  Pierwsze założenie było, że wszystko ruszy na BuddyPressie czyli społecznościowej wersji Wordpressa, jednak niestety ta ma zbyt mało funkcji i po przeczytaniu dziesiątków listów na tamtejszym forum, niektóre rzeczy jak na razie są nie do ruszenia. Zdecydowaliśmy się na płatny SocialEngine. Mateusz Kasprzak zajął się projektowaniem designu, ja natomiast w między czasie wnikał w zawiłości nowego dla mnie silnika i sposobu działania szablonów smarty (które do tej pory znałem tylko w teorii). Czasu tego miałem całkiem sporo, bo projektowanie zeszło do 20. któregoś października :) Po zaprojektowaniu całość przerobiłem na szablon smarty i… przerobiłem jeszcze raz. Pierwszy design nie spodobał się konsultowanym Afrykańczykom. Podobno był “za mało w stylu nigeryjskiego reggae” (jeśli ktoś nie wie co to jest – my też wtedy nie wiedzieliśmy – to niech zajrzy na stronę: to jest podobno nigeryjskie raggae :) ).

Potem była chwila luzu, gdy wydawało mi się, że wszystko jest już dopięte na ostatni guzik, a przynajmniej nikt nie ma żadnych większych zastrzeżeń. Okazało się jednak, że ciężkie testy serwis zaczął przechodzić w przeddzień oficjalnego otwarcia (oficjalnego, bo brali w nim udział ważne osobistości media) i wtedy zostałem zasypany toną listów na skrzynkę :) W ostatnią środę i czwartek pracowałem od 8 rano do północy. Ale udało się.

Teraz pozostało dodać kilka rzeczy których jeszcze nie ma, a fajnie by były i naprawiać na bieżąco wykrywane błędy. Ostatecznie po całej przeprawie z SocialEngine mogę stwierdzić, że fakt iż obecna jego wersja to 3.x jest jedynie zabiegiem marketingowym. :( Mnóstwo błędów, braku konsekwencji w tworzeniu i kompletny brak dokumentacji (społeczność programistów wokoło SE jest nastawiona na pomoc, ale jedynie za opłatą, zatem próżno szukać rozwiązań problemów czy porad po internecie; można je kupić jedynie w postaci pluginów czy usług) . Mimo wszystko, a może właśnie dlatego, jestem dumny, że to ma jakieś ręce i nogi :)