Dawno już nie chwaliłem się jaką to nową stronę wykonałem, część z Was pewnie już zapomniała, że to właśnie robieniem wordpressowych stron zarabiam na życie. Jako, że jedno z moich ostatnich dzieł zapiera dech w piersiach, to jest chyba dobra okazja by Wam o mojej działalności przypomnieć ;)

Uwaga (vel reklama): jeśli ktoś też chce mieć taką stronę, a może nawet jeszcze lepszą, zapraszam do kontaktu!

Rozsiądźcie się wygodnie i podziwiajcie widoki, zarówno te programistyczne, te CSS-owe jak i te jak najbardziej naturalne, przyrodnicze. Bowiem zapraszam Was na stronę internetową o Biebrzy i Biebrzańskim Parku Narodowym.

Biebrzański Park Narodowy - wygląd strony głównej

Powyżej widzicie fragment strony głównej new.biebrza.com, ale do podziwiania jest tam o wiele więcej.

Strona pełni funkcję biznesową: ma sprzedawać wycieczki po Biebrzy i jej okolicach, oferować noclegi i reklamować wiele innych rzeczy, ludzi i instytucji, które z Biebrzą mają coś wspólnego. Jeśli ktoś szuka na przykład gdzie można nad Biebrzą dobrze zjeść, gdzie wypożyczyć kajak, samochód lub nawet przelecieć się balonem – wszystko to na pewno tam znajdzie. Jest nawet sklep internetowy z pamiątkami z nad Biebrzy (oparty na mojej wtyczce TradeMatik).

Pieniądze to oczywiście nie wszystko. Strona na pewno przyda się także innym, którzy Biebrzę wolą zwiedzać sprzed ekranów komputerowych. W szczególności polecam podstronę z informacjami o tej rzece i naprawdę imponującą galerię fotografii (poważnie, zajrzyjcie, bo niektóre zdjęcia zapierają dech w piersiach, aż się nie chce wierzyć, że to nasza rodzima rzeka, a nie Amazonka).

OK, dość marketingu, przejdźmy do tego, co najczęściej opisuję w takich przypadkach, czyli jak przebiegało tworzenie strony i co strona ma w bebechach :) A mam się czym chwalić bo chyba nigdy dotąd nie wyciskałem aż tyle z WordPressa. Ba, nie zdziwię się, jeśli ktoś z Was nie będzie mógł uwierzyć, że to jest nadal WordPress i że nie musiałem tutaj w ogóle modyfikować jego źródeł (dzięki czemu klient może śmiało korzystać z nowszych wydań WordPressa nie bojąc się, że coś się przy aktualizacji popsuje).

Strona nie była tworzona z niczego. Firma Biebrza Eco-Travel posiadała witrynę od dawna (uchowała się jej stara wersja angielska więc każdy może porównać stan przed i po) i patrząc na ów stary design, zakładam, że był projektowany z 13 lat temu. Przynajmniej tak wtedy wyglądały moje strony internetowe ;) Strona zarabiała na siebie. Właściwie to mało powiedziane: była chyba głównym źródłem dochodów, bo to w internecie klienci znajdowali ofertę firmy i przez formularz na stronie składali zamówienia na wycieczki.

Dlaczego więc zmieniono silnik strony na WordPressa? Z dwóch powodów: stara strona trąciła już myszką, a co ważniejsze: nie  było tam żadnego silnika strony. Gdy w ofercie firmy pojawiała się nowa wycieczka, informatyk (w ostatnim okresie działania starej strony to byłem ja) otrzymywał na maila plik Worda z opisem imprezy, zdjęcia z aparatu ( w rozdzielczości 2500×1200 pikseli i wadze po 3 MB) z prośbą o umieszczenie wycieczki na stronie. Wtedy łączyłem się przez FTP ze stroną, tworzyłem nowy dokument html, przekopiowywałem treść, przeskalowywałem w Gimpie zdjęcia, dodawałem „znak wodny”, dodawałem do opisu, otwierałem kilkadziesiąt już istniejących podstron zbiorczych (także w notatniku) i edytując ich kod html dodawałem odnośnik do nowej imprezy.To samo z wszelkimi innymi typami treści.

Całość zajmowała godziny, była żmudna i kosztowała firmę sporo pieniędzy. Analizując kod strony widać było wyraźnie, że przede mną było wielu innych informatyków, którzy nie wytrzymywali takiego trybu pracy (moje wprawne oko wyłapało tam naleciałości z różnych programów od windowsowego notatnika przez DreamWeaver po Front Page i mnóstwo kodu wskazującego na wybieranie w MS Word opcji „zapisz jako stronę web”).  To była tragedia do rozczytania, a żeby choćby poprawić jakąś literówkę musiałem spędzić sporo czasu na rozgrzebywaniu tych html-owych śmieci. To zniechęca do pracy, a co ważniejsze dla klienta: kosztuje dużo ze względu na czas potrzebny na to. Nie mówiąc już o zapewne kolejnych problemach z kolejnymi informatykami, którzy rezygnowali z tej żmudnej pracy i konieczności szukania następnego.

Po przejściu na WordPressa założenie było takie, że strona dostanie nowy wygląd (nawiązujący jednak do starego), nowe możliwości i typy treści, a co najważniejsze to już sam właściciel strony bez wymogu znajomości HTML sam będzie te treści dodawał, aktualizował i układał w sposób jaki będzie tego chciał. To niewątpliwe zalety, ale pojawiła się spora obawa:

Stara strona była bardzo dobrze zaindeksowana w wyszukiwarkach, a to z Google przychodziła większość klientów. Czy kompletna przebudowa strony, zmiana treści i zmiana odnośników do poszczególnych podstron nie sprawi, że nagle w jeden dzień firma przestanie zarabiać? Nie będę Was trzymał w niepewności: dzięki sztuczkom z .htaccess i naturalnej miłości pomiędzy WordPressem a zagadnieniami SEO (na stronie nie ma nawet zainstalowanej żadnej wtyczki do pozycjonowania witryny!) wszystko poszło wyśmienicie. Sprawdźcie sami wpisując w google słowo „biebrza”. Stara wersja strony znajdowała się na 3. pozycji w wynikach wyszukiwania (po oficjalnej stronie parku i artykule w wikipedii). Nowa znajduje się na tej samej. Podobnie jest z innymi frazami związanymi z tą branżą i okolicą.

Przy budowie strony silnie wykorzystałem rewelacyjną nowość wordpressa jaką są własne typy treści. Jeszcze dwa lata temu wszystko publikowane na stronie musiało by być zapewne albo „stroną” albo „wpisem blogowym” przyporządkowanymi do kategorii „wycieczki”, „noclegi”, „baza żywieniowa”… Biorąc pod uwagę, że każdy z tych typów danych powinien mieć różne pola je opisujące (na przykład wycieczki mają określony termin startu i zakończenia, czego na przykład nie ma restauracja, która z kolei może zostać przyporządkowana do kategorii „restauracje”, „bary” lub kolejnej, która ni jak nie odnosi się do wycieczek czy noclegów), byłby to koszmar.

Dzięki wykorzystaniu własnych typów treści, każda opcja na stronie ma swój własny formularz dodawania. Przy imprezie (wycieczce) można określić tak podstawowe rzeczy jak „termin”, „program”, „miejsce startu” czy „przewodnik”, po te bardziej wyszukane jak na przykład „noclegi w okolicy” (i tu klient może od razu metodą przeciągnij i upuść stworzyć dowiązania do elementów o typie treści „baza noclegowa”), „współrzędne geograficzne” (jak zapewne zobaczycie każda wycieczka ukazana jest też na automatycznie generowanej mapie). Podobnie przy „bazie noclegowej” można określić cenę za noc, ilość miejsc noclegowych, wybrać do jakiej kategorii należy dany obiekt lub na przykład ile metrów/kilometrów jest do plaży.

Możliwości jest tak wiele (sama strona to obecnie aż 18 custom post types i każdy ma od kilkunastu do nawet kilkudziesięciu różnych pól formularza do uzupełnienia podczas edycji), że czasami ich edycja staje się szczerze mówiąc  trudna. Z tego powodu wiele edycji wizualnych przenieśliśmy do front-endu – zalogowany właściciel strony może sam układać sobie pewne elementy na stronie od razu widząc jak to będzie wyglądało po edycji (nie musi nawet klikać przycisku zapisz).

Oto przykład jak układane są zdjęcia w galerii:

Wystarczy złapać myszką za zdjęcie i przemieścić je w nową pozycję. Po opuszczeniu zmiana zostanie zapamiętana.

Nie tylko zdjęcia można w ten sposób nosić. Przykładowo, pod każdą stroną jest sekcja „Sprawdź także”. Ją też można porządkować metodą przeciągnij i upuść i co najważniejsze – każda podstrona może mieć tu różne elementy i w różnej kolejności!

Taka wizualna wersja znanego zapewne części z Was pluginu widget logic :) Tyle, że całość napisałem sam zgodnie z wytycznymi klienta.

Inne ciekawe rozwiązanie to wspomniane już wyżej terminy imprez. Każda wycieczka może być zorganizowana wiele razy w roku w różnych datach. Pierwotnie chciałem by klient musiał dla każdego terminu dodać kolejną wycieczkę, którą od poprzedniej różniła by się tylko datą, ale okazało się, że w takim wypadku pracy byłoby więcej niż przy starej wersji strony. Przykładowo „Fotosafari” organizowane jest kilkadziesiąt razy w roku. Dodanie kilkudziesięciu wpisów różniących się jednym polem nie wygląda zbyt wydajnie. Kolejnym utrudnieniem tutaj był fakt, że firma chciała móc przy każdym terminie danej imprezy zaznaczyć, że wszystkie miejsca już zostały wykupione, a nawet nie określać terminu w ogóle – w takim wypadku przy zamawianiu klient sam określał kiedy chce przyjechać na wycieczkę. Cały ten miks miał być trzymany w jakiś sposób w WordPressie i dawać się łatwo zarządzać i porządkować. Udało się, co na przykład możecie zobaczyć na stronie wszystkich wycieczek – imprezy uporządkowane są datami (a gdyby ktoś chciał zmienić sposób porządkowania po długości trwania, nie ma problemu). Jeśli jakiś termin jest już niedostępny informuje o tym odpowiednia ikona. Tabela uwzględnia też imprezy bez określonego terminu i właściciel strony sam decyduje w której części tabeli umieścić taką wycieczkę. Sortować można także po grupie docelowej wycieczki i sposobie jej organizacji. Wypas ;) (btw. po części jak to zrobiłem opisałem w artykule na dev.wpzlecenia).

Powyższy opis jest długi, ale uwierzcie mi, że tylko poruszył malutki skrawek zadań programistycznych jakie przede mną stały. Dość powiedzieć, że całość prac trwała niemal 12 miesięcy! Przeniesienie 1800 subskrybentów newslettera do nowego – a jakże napisanego od podstaw przeze mnie  – systemu opartego na wordpressie, sposoby wybierania elementów do zamieszczenia na stronie głównej, sposoby do wybierania i układania elementów na każdej podstronie (w tym i podstronach generowanych automatycznie jak na przykład na stronach kategorii), umieszczanie elementów na mapach google z podziałem na kategorie tych elementów i możliwością wyświetlania na mapie tylko części z nich, możliwość wyskalowania zdjęć do 12 predefiniowanych kadrów, różnych dla różnych fotografii, także różne atrybuty title dla każdego zdjęcia w zależności gdzie ono jest wyświetlane (inny podpis pojawia się na zdjęciu w galerii i jeszcze inny na tym samym zdjęciu ale przy wycieczce), ukłądanie zdjęć w różnej kolejności, automatyczne menu zakładkowe na górze strony generowane na podstawie kategorii do jakich mogą być przypisane wycieczki… uff. Nadal nie wymieniłem nawet połowy rzeczy :)

Ale chyba się udało, prawda? :)

 

Komentarzy: 11

Muzungu.pl stanie się z powrotem blogiem prywatnym, o tym co u mnie słychać i co ja sobie myślę na różne tematy. Do tej pory mieszałem tu właśnie takie wpisy z moimi poradami odnośnie WordPressa. Z rozmów z Wami wiem, że nie wszystkich ten drugi temat interesuje.

Na szczęście będzie lepiej, a wszystko za sprawą nowego serwisu, jaki uruchomiłem :) Dziś w nocy oficjalnie wystartował dev.wpzlecenia – wortal w którym będziemy pisać o WordPressie, wszelkiego rodzaju poradniki, nieco aktualności…

Zatem wszystkich tych, którzy interesują się WP (a może chcieliby zacząć się interesować) zapraszam pod nowy adres. Zapraszam też do pisania! Nie chcę by ta strona była tylko moja, ale wszystkich, którzy mają coś wordpressowego do powiedzenia.

Na Muzungu czasem jednak wrzucę informacje o skończonych stronach, nadal tu też będą moje wtyczki. Jednak nie będzie już żadnych porad, a co więcej – te które już są wkrótce przeniosę właśnie na dev.wpzlecenia.

WordPressowcy – wspomnijcie na swoich blogach, facebookach, twitterach czy gdzie tam jeszcze bywacie o starcie nowego serwisu :) Będę bardzo wdzięczny!

Komentarzy: 3
frontEndEditor

Kto nie popełnia literówek podczas pisania wpisów na blogu, niech pierwszy rzuci kamień. Jedni mniej, inni więcej, ale każdemu się zdarza. Piszesz coś na szybko, nie czytasz przed kliknięciem „Opublikuj”, ale oczywiście za chwilę i tak otwierasz swój wpis i czytasz z wypiekami, jakiż to wspaniały tekst udało ci się wysmarować ;)

A tu – literówka.

Psia mać. I teraz trzeba wrócić do edycji, zaczekać aż się załaduje, znaleźć błąd, „Aktualizuj”… Przyznam, że wiele razy w takiej sytuacji po prostu machnąłem ręką.

Na szczęście znalazłem świetną wtyczkę do tego. Nazywa się Front End Editor i jest tak prosta, że aż genialna. Po instalacji, gdy czytasz swój blog będąc zalogowanym, każdy wpis można edytować niemal na bieżąco. Myszka nad błędny tekst, klik w edit obok niego, poprawiamy błąd i klik w zielony ptaszek by zatwierdzić zmianę. Czy może to być prostsze? (Owszem może, ale i tak jest ślicznie).

Polecam wszystkim zdecydowanie. Wtyczka potrafi nieco więcej (edycja nie tylko tekstów, ale i tytułów, wstawianie zdjęć a nawet edycja istniejących, zmiana ikon wpisu…) jednak i dla samego poprawiania treści warto ją mieć.

P.S. W tym wpisie już poprawiłem trzy błędy w ten sposób. A te post scriptum także jest dopisywane już po opublikowaniu :)

Komentarzy: 3
screenshot2

Od jakiegoś czasu zachwycam się jednokolumnowymi, prostymi w wyglądzie blogami. Przez cały czas w wolnych chwilach rysuję sobie w Gimpie kolejne pomysły na design. Zawsze mi to wychodziło fatalnie, więc nigdy nie wyszło poza konceptualny plik graficzny.

Tym razem jednak pomyślałem, że to może się udać. W sobotę rano zacząłem rysować, dokończyłem już w HTMLu i CSS. W sobotę wieczór zmieniłem w wordpressowy szablon, dziś trochę go jeszcze dopieściłem i oto jest. Jak Wam się podoba?

Miało być skromnie i jest skromnie. Wiem jednak, że wielu rzeczy jeszcze brakuje. Na głównej stronie z listą wpisów przydałby się na końcu treści link do skomentowania. Coś jeszcze, biorąc pod uwagę, że ma być niezbyt kolorowo i pstrokato?

Sama skórka ma zdefiniowanych aż 7 obszarów do wyświetlania widgetów – na wszelki wypadek. Teraz wykorzystuję dwa, jeden widzicie, czy ktoś z Was zgadnie, gdzie jest drugi? ;)

Komentarzy: 18

Dzieje się w sieci, to czego się spodziewałem: od czasu wydania WordPressa w wersji 3.1 na różnych forach trafiam na pytanie „gdzie się podziały „Własne Pola”?”. Czy zostały usunięte?

Odpowiedź brzmi: nie, zostały jedynie ukryte. Oto szybka instrukcja jak je ponownie pokazać.

Będąc w trakcie edycji wpisu lub strony spójrz w prawy górny róg ekranu. Zobaczysz tam odnośnik „Opcje ekranu” (Screen Options). Kliknij w nią i zobaczysz specjalne menu, w którym można wybrać co chcemy aby wyświetlało się, a co nie. Włącz w tym miejscu „Własne pola”, a znów pojawią się pod polem dodawania treści wpisu.

Obrazkowo wygląda to tak:

Jak włączyć własne pola w WordPressie?

Jak włączyć własne pola w WordPressie?

Wraz z WordPressem 3.1 ekrany edycji wpisów zostały uproszczone. Zniknęły (zostały ukryte, bowiem tak naprawdę nadal istnieją i działają) nie tylko owe własne pola, ale i Wypis (Excerpt) i kilka innych rzeczy. Choć moje wtyczki silnie wykorzystują custom fields, to jednak jestem zwolennikiem ich ukrycia.

Przeciętnemu użytkownikowi nie są do niczego potrzebne, a jedynie sprawiają wrażenie, że WP jest trudny. Dopiero dzięki wtyczkom je wykorzystujemy. Tu właśnie pojawia się zgrzyt w postaci coraz częstszych pytań jak mam sobie włączyć te pola / wtyczka nie działa bo ich nie ma. Jednak wierzę, że twórcy wtyczek z czasem dostosują się do nowych warunków.

Jak? Wykorzystując tak zwane ‘custom meta box’. Tu możecie sobie o tym poczytać, a ja się przygotowuję powoli do opisania jak to zrobić szybciej, wygodniej i ładniej.

Komentarzy: 7

Jak to było? „Naśladowanie jest najwyższą formą uznania”? Czy jakoś tak.

Wiecie wszyscy dobrze, że jestem autorem wtyczki WP-Sprzedawca, right? Wiecie o tym, że pomysł na wtyczkę narodził się na wordpressowym forum GoldenLine? Najwidoczniej przynajmniej jedna osoba o tym nie wiedziała. I teraz będzie miała problemy ;)

Wszedłem sobie dziś jak co dzień na owe forum, tam zajrzałem do jednego z wątków i oto co zobaczyłem:

Pomyślałem sobie: shit, mam konkurencję. Ktoś zrobił dokładnie taką samą wtyczkę jak ja, też można zablokować dostęp do treści. Też można kazać zapłacić za pobranie pliku. Też wykorzystuje Dotpay jako kanał płatności…

Zaraz, czy ten opis mi czegoś nie przypomina? Jakbym go gdzieś już czytał… Szybki rzut okiem na opis mojej wtyczki:

Przypadek? :) Niby przecież „gdyby tysiąc małp przez tysiąc lat… i tak dalej”. Czy jednak nasz freelancer Artur jest małpą?

Teraz się zastanawiam co zrobić z panem Arturem. W komentarzach zbieram Wasze pomysły jakby tu pogratulować naszemu młodemu przedsiębiorcy. Najfajniejszy pomysł jeśli nie zastosuję, to na pewno jakoś nagrodzę :) Wymyślcie coś z jajem.

Ja tymczasem idę sobie kupić na Allegro moją wtyczkę i postaram się wynegocjować od sprzedawcy obniżenie ceny do zera ;)

A jeśli ktoś z Was naprawdę chce mieć taką wtyczkę i to taniej (biznesman Artur sprzedaje ją za dwie dychy, podczas  gdy u mnie jest za 15 PLN) i do tego chce mieć do niej wsparcie techniczne (ciekaw jestem co zrobi Artur, syn Bębenkowskiego gdy ktoś zgłosi mu jakiś problem techniczny) to zapraszam do zakupu :)

Innych potencjalnych piratów informuję, że mam jeszcze jedną wtyczkę, którą można by opchnąć za jeszcze większą kwotę na Allegro. TradeMatik to bowiem taka wtyka, że pójdzie spokojnie za 100 złotych za sztukę, a na sam jej widok kobiety mdleją i rzucają się na szyję jej twórcy (true story)

 

P.S. Na początek pomóżcie zrobić szum i wykopcie to :)

Komentarzy: 68

Na Flakerze pojawiło się takie oto zdjęcie:

KS Ekspert

KS Ekspert

Ale fajnie :) Nie wiem skąd ono, czy z redakcji, czy już z półki w księgarni. Jeśli z półki to lecę zobaczyć :) Najpierw się jednak dopytam, bo jestem przeziębiony i wolę niepotrzebnie z domu nie wychodzić :)

Komentarzy: 3

Ile razy nie przysiadam do internacjonalizacji wtyczek zrobionych przeze mnie, zawsze musze grzebać w zakładkach jak to się robiło. Część rzeczy pamiętam, część muszę przeczytać jeszcze raz. Jak na złość nie ma strony, która gromadzi te wszystkie informacje w jednym miejscu. O poEdit gdzie indziej, o load_plugin_textdomain gdzie indziej…

Już dawno chciałem spisać to sobie wszystko w jedną całość i tak właśnie zrobiłem. Przygotowałem PDF z wszystkimi wskazówkami dotyczącymi tłumaczenia. I od razu pomyślałem, dlaczego by się tym z innymi nie podzielić? :)

Zapraszam do chyżego ściągania.

Wszystko, co chcecie wiedzieć o tłumaczeniu wtyczek w WordPressie (1227)

Plik PDF jest za darmo. Myślę, że można go potraktować jako kolejną część mojego tutorialu o tworzeniu wtyczek w WordPress

Komentarzy: 5

Tym się chyba jeszcze nie chwaliłem, a może warto. Nie, nie będzie to książka o Rwandzie, a o… (tadam, jakże by ostatnio miało być inaczej) WordPressie :)

Jakiś czas temu zwróciło się do mnie wydawnictwo AxelSpringer z pytaniem czy nie pomógł bym przy tworzeniu kolejnego poradnika z serii KS Ekspert. Tym razem właśnie chodzi o WordPressa. Miałem nadzieję, że napiszę całość (zwłaszcza, że stawka "za stronę" jaką mi zaproponowano bardzo mi odpowiada), ale ostatecznie stanęło na dwóch rozdziałach. Też dobrze. Jeden będzie (a właściwie już jest, bo skończyłem go pisać) o tworzeniu skórek w WordPressie, drugi (jeszcze przede mną) wstępnie można nazwać "praktyczne rozwiązania w wordpressie" i będę w nim tłumaczył jak na bazie WordPressa stworzyć specyficzne rodzaje stron, czy specyficzne działy na naszej stronie (dział pobierania plików, portfolio naszych zdjęć…).

W całości najtrudniejsze jest dostosowanie się do narzucanych przez wydawnictwo reguł. Dostałem cały kodeks zasad pisania i muszę się go trzymać. Nie  jest to tragiczne, ale troche spowalnia prace. Myślę jednak, że ostatecznie wyjdzie to na korzyść czytelnikom – książki KS Ekspert miałem już w swoihc rękach i faktycznie charakterystyczny styl pisania w nich ułatwia kontakt między autorem a właśnie odbiorcą. 

Kiedy książka się ukaże – nie wiem. Ale na pewno Was poinformuję :)

Pierwszy komentarz

Osoby, które nie były, osoby, które były, ale chcą zobaczyć jak wypadły jako prelegenci lub po prostu "przeżyć to jeszcze raz" informuję, że wszystkie filmy z WordCampu są już dostępne w sieci w serwisie YouTube.

Na początku miałem się nie przyznawać, ale jak na siebie patrzę z boku to jednak wypadłem przynajmniej średnio a nie fatalnie, jak o sobie myślałem. Na ekranie nie widać jaki zestresowany byłem w środku (jednak widać, że stres ów odbił się na jakości merytorycznej wystąpienia). 

W sobotę jestem od części 18. W niedzieli jeszcze siebie nie znalazłem :)

Pierwszy komentarz