Dziś zamiast wstępu teatrzyk.
Występują:
- Użytkownik – klient zlecający projekt z WordPressa. Nie jest informatykiem, szuka prostych rozwiązań.
- Programista Typ A (Abnegat) – jest dobrym programistą, ale ma dosyć utarczek z użytkownikami, którzy przecież i tak nie rozumieją jego świata.
- Programista Typ B (Biznesmen) – dobrze rokujący programista, zorientowany na szybki zarobek.
- Programista Typ C (Chcę się rozwijać) – programista, który wsłuchuje się w użytkownika, bo wie, że w ten sposób sam się może wiele nauczyć, a zadowolony klient wraca.
Miejsce:
- Akcja dzieje się w programie pocztowym Mozilla Thunderbird tudzież innym medium komunikacyjnym typu Skype lub Facebook.
Scena I
Na scenie pojawia się Użytkownik. Chwilę później Programista Typ A.
Użytkownik: Nie da się tego zrobić jakoś prościej? To jest dla mnie za trudne i nieintuicyjne.
Programista Typ A: Nie, nie da się.
Programista Typ A schodzi ze sceny. Jakiś czas później pojawia się Programista Typ B.
Użytkownik: Nie da się zrobić tego prościej? To jest dla mnie za trudne i nieintuicyjne.
Programista Typ B: Może i się da, ale będzie to więcej kosztowało.
Programista Typ B znika ze sceny. Jakiś czas później pojawia się Programista Typ C.
Użytkownik: Naprawdę nie da się zrobić tego prościej? To jest dla mnie zbyt skomplikowane. Tyle rzeczy trzeba zapamiętać, tyle kroków wykonać… Boję się, że coś przy tym popusję.
Programista Typ C: To co mówisz, ma sens. Spróbuję rozpoznać temat.
Scena II
Programista Typ C: Zajęło mi to ładny kawałek czasu, ale czego się nie robi dla wygody użytkownika. Proponuję takie rozwiązanie.
Użytkownik: Dokładnie o to mi chodziło. Ale jesteś dobry! Czy możemy umówić się na kolejne zlecenie?
Kurtyna
Czasami bywam zmęczonym-pracą-i-użytkownikami Programistą Typu A. Wciąż uczę się być Programistą Typu B, żeby nie wyjść na robocie w tej branży jak Zabłocki na mydle. W dalszej czeęści opisuję, czego się nauczyłam, przyjmując postawę Programisty Typu C.
Kto na tym skorzystał?
- użytkownik, bo dostał proste i intuicyjne rozwiązanie
- ja, jako WordPressowy programista, bo poszerzyłam swoją wiedzę
- i być może Ty, Czytelniku tego bloga też przy okazji z tego korzystasz
1. Jak w WordPressie przyciąć (skadrować) obrazek do dowolnych wymiarów
- Problem
- Do każdego wpisu dołączany jest obrazek w formie ikony wpisu, który powinien być wyświetlony w nietypowych proporcjach np. 400×150 pikseli (długi i wąski). Użytkownik dysponuje obrazkiem o wymiarach 800 na 600 pikseli (standardowy z cyfrówki).
- Niedoskonała propozycja wyjścia z sytuacji
- Programista radzi użytkownikowi, żeby przed załadowaniem zdjęcia do WordPressa odpowiednio je sobie przyciął w jakimś programie graficznym. Wykonał tzw. crop z zachowaniem proporcji 400 na 150.
- Dlaczego nie jest to dobre podejście
- Nie każdy użytkownik zna narzędzia graficzne na tyle dobrze, żeby wcześniej móc wyciąć tylko fragment obrazka lub nawet przeskalować je do odpowiednich wymiarów.
- Rozwiązanie właściwe
- Pokazać użytkownikowi, jak można za pomocą WordPressa przycinać obrazek podczas ładowania zdjęcia do witryny bądź podczas wstawiania go do wpisu.
W WordPressie kadrowanie obrazków umożliwia funkcja edycji obrazka, ukryta pod przyciskiem „Edytuj obrazek” na ekranie uploadu zdjęć (zobacz ilustrację 1.1 obok).
Z funkcji tej możemy skorzystać zarówno podczas dołączania obrazka za pomocą Media->Dodaj nowe jak i później, np. podczas wstawiania zdjęcia do wpisu lub jako ikony wpisu.
Edycja obrazka pozwala zarówno na skalowanie obrazka jak i jego wykadrowanie.
W celu wykadrowania obrazka w WordPressie należy (test przeprowadzony w wersji WordPressa 3.4.1):
- zacząć rysować myszą po obrazku (zobacz rysunek 1.2 – krok nr 1), wybierając odpowiedni kadr, jednocześnie obserwując zmieniające się proporcje w okienku Wybór po prawej
- w polu proporcje wpisać interesujące nas proporcje (krok nr 2 na rysunku 1.2)
- nacisnąć przycisk crop (krok nr 3 na rysunku 1.2)
- zapisać zmiany (krok nr 4 na rysunku 1.2)
2. Jak w WordPressie szybko przypisać dany tag do wielu wpisów
- Problem
- Użytkownik robi porządki na blogu. Doszedł do wniosku, że 20 spośród 100 wpisów powinny zostać opieczętowane nowym tagiem np. „zaawansowane”.
- Niedoskonała propozycja wyjścia z sytuacji
- Polecić wejść w edycję każdego z wpisów z osobna i dodać odpowiedni tag.
- Dlaczego nie jest to dobre podejście
- Po prostu zajmuje to zbyt dużo czasu.
- Rozwiązanie właściwe
- Pokazać użytkownikowi jak można edytować wpisy w sposób hurtowy (wykonać tzw. masową edycję)
W wykazie wpisów zaznaczamy interesujące nas wpisy (możemy skorzystać z filtra, żeby jeszcze przyspieszyć ten proces), a następnie z listy na górze wybieramy opcję Edytuj (zobacz rysunek 2.1). Na kolejnym ekranie (2.2) wprowadzamy interesujący nas tag w polu Tagi i zapisujemy zmiany.
W analogiczny sposób możemy hurtowo zmienić kategorię wielu wpisów, ich autora i kilka innych rzeczy, które pokazane są na obrazku 2.2. Proste jak budowa cepa, chciałoby się powiedzieć. Tylko ciekawe, kto dzisiaj kojarzy, co to w ogóle jest cep…
3. Jak w WordPressie każdy odnośnik do dokumentu pdf przyozdobić odpowiednią ikonką
- Problem
- Użytkownik często wyświetla odnośniki do dokumentów pdf. Chciałaby, żeby wyróżniały się one od pozostałych poprzez maleńką miniaturę obok (zobacz o jaki efekt chodzi na rysunku 3.3 niżej).
- Niedoskonała propozycja wyjścia z sytuacji
- Przygotować odpowiednią klasę odnośnika w CSS, zawierającą jako obrazek tła miniaturkę symbolizującą plik pdf, a następnie poinstruować użytkownika, żeby po dodaniu odnośnika do dokumentu pdf przełączył się w WordPressie w edycję w trybie HTML i dodał w odpowiednie miejsce atrybut class=”pdf”.
- Dlaczego nie jest to dobre podejście
- Po to jest edytor wizualny w WordPressie, żeby użytkownicy, którzy nie znają HTML-a wszystkie swoje potrzeby dotyczące wstawiania treści załatwiali za jego pomocą.
- Rozwiązanie właściwe
- Tak napisać kod, żeby odnośniki do dokumentów typu pdf były rozpoznawane automatycznie i również automatycznie oznaczane odpowiednią ikonką.
Osiągniemy to poprzez wykorzystanie tzw. selektora atrybutu. Dzięki temu zadanie użytkownika sprowadza się jedynie do załadowania dokumentu pdf do WordPressa i wstawienia odnośnika do niego w edytorze:
- Załaduj plik pdf do WordPressa przez panel Media (identycznie jak dla obrazków). Plik trafia do biblioteki mediów.
- Wstaw dokument pdf do wpisu (w postaci odnośnika), wybierając go z z biblioteki mediów. Ważne, żeby podczas wstawiania wybrać opcję „Adres URL pliku” (obrazek nr 3.1).
I na tym koniec działań użytkownika. Skąd się bierze ikona? Pojawi się automatycznie, jeśli do pliku CSS dopiszemy odpowiednie reguły:
a[href$=".PDF"], a[href$=".pdf"] {
display: block;
padding: 10px 0 10px 40px;
background: url(img/pdficon_large.png) left center no-repeat;
}
Obrazek ikonki pdf możemy pobrać ze strony Adobe, zapoznawszy się uprzednio z przedstawioną tam licencją.
4. Jak w WordPressie dodać kreskę oddzielającą bloki treści
- Problem
- Dana część wpisu ma być oddzielana od reszty poziomą kreską (przykład na obrazku 4.1 niżej).
- Niedoskonała propozycja wyjścia z sytuacji
- Kazać użytkownikowi wejść w tryb HTML i wstawić znacznik hr (znacznik HTML wyświetlający poziomą linię).
- Dlaczego nie jest to dobre podejście
- Powód ten sam co punkcie 3: jeśli użytkownik chce korzystać tylko z trybu wizualnego, nie powinniśmy go zmuszać w zabawę w webmastera znającego HTML.
- Rozwiązanie właściwe
- Dodać przycisk do edytora wizualnego, po kliknięciu którego zostanie dodana do wpisu pozioma linia oddzielająca. Znacznik hr możemy dowolnie wystylizować za pomocą CSS.
Dodanie kolejnego przycisku do edytora wizualnego będzie proste, o ile znajduje się on na liście przycisków wspieranych przez TinyMCE. (Dla jasności: TinyMCE to oparty na JavaScript/HTML, niezależnie rozwijany edytor WYSIWYG, wykorzystywany przez WordPress. To dzięki niemu praca w trybie wizualnym jest taka wygodna).
Do pliku functions.php naszego motywu dodajemy następujące linie. Efekt pokazany na rysunku 4.2 wyżej.
function add_hr_button($buttons) {
$buttons[] = 'hr';
return $buttons;
}
add_filter("mce_buttons", "add_hr_button");
W jaki sposób ma wyglądać pozioma kreska decydujemy sami, wpisując odpowiednie reguły do pliku CSS. Więcej o stylizowaniu poziomej kreski ». Efekt zastosowania poniższego kodu widać na obrazku 4.2 wyżej.
hr {
background: url(img/kreska-cien.jpg) center center no-repeat;
border: none;
height: 25px;
}
5. Dwa edytory WYSIWYG do pojedynczego wpisu (układ dwukolumnowy)
- Problem
- Czasami chcemy przedstawić zawartość wpisu lub strony w dwóch kolumnach. Np. jak na obrazku 5.2.
- Niedoskonała propozycja wyjścia z sytuacji
- Sposobów rozwiązania jest mnóstwo. Niektórzy wymuszają na użytkowniku przełączanie się do trybu HTML i opakowywanie treści w odpowiednie div’y. Inni instalują pluginy. Jeszcze inni dodają własne pola.
- Dlaczego nie jest to dobre podejście
- Najwygodniej dla użytkownika byłoby mieć dwa edytory WYSYWIG we wpisie. Pierwszy odpowiedzialny za content lewej kolumny, drugi – prawej. W ten sposób użytkownik korzysta z wszystkich wygód edytora wizualnego, łącznie z ładowaniem zdjęć.
- Rozwiązanie właściwe
- Dodać drugi edytor pod standardowym edytorem (zobacz obrazek 5.1). Jest to możliwe w WordPressie od wersji 3.3. za pomocą funkcji wp_editor.
Temat przygotowania dwóch edytorów do przedstawienia układu dwukolumnowego wymaga osobnego potraktowania (jest trochę surowizny, czyli kodu i informacji bardziej technicznych). Jeśli ciekawi Cię, jak osiągnąć pokazany na obrazkach efekt w motywie, daj mi proszę znać w komentarzach. Jeśli będzie zainteresowanie tematem, przygotuję osobny artykuł.
Podsumowanie
Wszystkie wyżej opisane przypadki są autentycznymi problemami, z jakimi się spotkałam podczas realizacji projektów z WordPressa, co do których początkowo byłam przekonana, że tego nie da się zrobić w sposób wygodny dla użytkownika.
Wskazówki znalazłam:
- wertując fora tematyczne
- blogi specjalistyczne
- a nawet kanał youtube,
niejednokrotnie budując rozwiązanie z kawałków rozsianej wiedzy. Nie uważam tego jednak za czas stracony. Dlatego i Ciebie, Drogi Czytelniku, zachęcam do podejmowania wyzwań i znajdowaniu dobrych stron nawet w marudzeniu użytkownika-zleceniodawcy.
A co Tobie udało się zrobić prościej w WordPressie, mimo wcześniejszego przekonania, że jest to niemożliwe?
Witaj Aga! 🙂
Wspaniały artykuł, w całości (prawie -dwa edytory już nie dla mnie) dostępny moim szarym komórkom 😀 W dodatku teatrzyk, rozluźniający umysł zmęczony surfowaniem. Jaki zwięzły scenariusz ale to Twój styl.
W rozdział o przypisywaniu tagów muszę się wczytać bo to mnie interesuje.
Nie spiesz się z odpisywaniem, bo i tak wiem że jesteś niezawodna
Serdecznie pozdrawiam stregahan
Ja i zwięzłość? Właśnie mam wrażenie, że nie potrafię napisać krótkiego artykuliku :-).
Super artykuł. Oczywiście chciałabym się dowiedzieć jak zrobić wpis w 2 kolumnach.
A jeszcze drobnostka – jak przenieść dużo wpisów z jednej kategorii do drugiej. Dodać kategorie się da ale odjąć już nie – minus u mnie nie działa.
Jeśli czegoś nie wiem zawsze szukam w google i prawie zawsze znajduje odpowiedź. Chociaż nie zawsze.
Mam jednak inny problem, bo technicznie przeważnie wujek Google doradzi. Jak się zachować jeśli klient chce czegoś a ja nie wiem jak to zrobić? Przyznać się czy lawirować? W scence powyżej jeden mówi, że się „nie da”, drugi że „zbada temat”. Skoro zbada to znaczy, że nie wie. Czy to nie sprawia złego wrażenia? Może lepiej udawać super hiper eksperta i powiedzieć, że się „nie da”. 😉
Sposobów na rozwiązanie jakiegoś problemu jest najczęściej kilka – od pracochłonnej ręcznej roboty, przez wtyczki, lub wyszukanie skryptu. Najważniejsze jest jednak, jak pisze Aga powyżej, żeby użytkownik końcowy nie musial uczyć się znaczników.
Małgorzata, masz rację, z odejmowaniem kategorii już nie jest tak lekko. Można co najwyżej kombinować z usuwaniem samej kategorii, a potem hurtowym przypisaniem wpisów do nowej i tego typu manewry, ale może wówczas lepiej posłużyć się pluginem.
Jeśli chodzi o drugie pytanie. Ja, gdy czegoś nie wiem, to mówię po prostu, że na ten moment nie znam szybkiego sposobu, ale przeanalizuję temat i wówczas się wypowiem. Klient jak usłyszy, że się nie da, zawsze może zapytać o to samo innego programistę czy webmastera i jak tamten powie, że się da, to tym bardziej będzie o nas źle świadczyć.
Masz rację, że sposób rozwiązań problemu jest wiele. Ja stosuję też taką zasadę: najpierw myślę nad najprostszym dla mnie rozwiązaniem, żeby w ogóle był efekt, a potem, jak już jestem spokojna, że jakieś wyjście z sytuacji jest, myślę czy nie można jakoś lepiej, prościej, bardziej elegancko.
Dzięki serdecznie za konstruktywny komentarz.
Aga, a ilu twoich kolegów po fachu jest z grupy C? Taka postawa jest raczej wymuszona przez zleceniodawcę, chociaż w takim przypadku nie wpisałbym webmastera do grupy C 🙂
A na poważnie to muszę potestować Twoje przykłady.
Damian, dobre pytanie 🙂 W pierwszej chwili na myśl przychodzą mi osoby głównie z postawą A i B 🙂 Ale wsłuchiwanie się w potrzeby usera naprawdę ma sens. Podobno tak robi Google: wypuszcza produkt niedoskonały, „na pożarcie” użytkownikom, a potem go ulepsza zgodnie z ich oczekiwaniami, potrzebami itd. i dzięki efekt końcowy trafia w potrzeby ludzi.
To wcale nie jest taka zła postawa. Najgorzej jeśli firma – twórca strony (portalu) upiera się przy swoim pomimo wielu sygnałów zwrotnych o potrzebie poprawy niektórych rozwiązań. Często (zbyt często) kończy się to wycieczkami osobistymi.
Odnośnie robienia czegoś 'prościej’ dla użytkownika, tak jak mówię każdemu klientowi, im prościej dla niego, tym trudniej dla mnie, kwestia dogadania się z ceną. Dlatego raczej nie mówię że coś jest niemożliwe do zrobienia, a jedynie że wykonanie czegoś, w wyznaczonym budżecie, jest niemożliwe.
Natomiast co do przycinania i skalowania obrazków, to przycinanie każdego przez klienta nadal jest średnim rozwiązaniem, dlatego może:
– jeśli jest tylko jeden rozmiar miniatury:
http://codex.wordpress.org/Function_Reference/set_post_thumbnail_size
– jeżeli jest więcej rozmiarów:
http://codex.wordpress.org/Function_Reference/add_image_size
– a już najlepiej użyć tego:
http://www.binarymoon.co.uk/projects/timthumb/
Jeżeli klient będzie chciał sobie dociąć zdjęcie inaczej, zawsze ma taką możliwość.
Amistad, super, że się dopisałeś. Właśnie brakuje mi wymiany wiedzy między ludźmi z branży, zwłaszcza z takimi jak Ty – z dużym doświadczeniem. Dzięki za ciekawe uwagi. To co mówisz o wykonaniu w budżecie, to jak najbardziej słuszne podejście.
Jeśli chodzi o przycinanie i skalowanie obrazków. Znam te dwie pierwsze metody, ale… No właśnie w moim konkretnym przypadku z życia wziętym nie mogłam użyć tej do cropowania, bo ona obcina z automatu część zdjęcia po brzegach. A chodzi o to, żeby user sam mógł kontrolować jaką część obrazka obciąć, żeby nie stracić czegoś ważnego.
Trzeciej metody nie znałam. Przeanalizuję sobie ten skrypt, dzięki.
TimThumba nie znasz? Niemożliwe. Wprawdzie on też automatycznie obcina obrazek do zadanych wymiarów, ale robi to moim zdaniem zdecydowanie najlepiej. Ja niemal zawsze w podobnych zleceniach, używam właśnie TimThumba. Wyciągam pierwszy obrazek ze wpisu, i TimThumb dostosowuje go do zadanych rozmiarów, chyba że jest ustawiona miniatura wpisu, wtedy ona jest także TimThumben dostosowywana do konkretnych wymiarów. Jeżeli efekt nie jest zadowalający, można obrazek ręcznie przyciąć i taką wersję ustawić jako miniaturę wpisu, jeżeli będzie miało odpowiednie proporcje, wtedy nic więcej już z niej wycięte nie zostanie. Czy jest to najlepsze rozwiązanie? – nie wiem, ale na pewno wygodniejsze, gdyż dzięki temu użytkownik nie musi przycinać każdego obrazka, a jedynie te, które chciał by wyświetlać jednak inaczej …
Odnośnie wymiany wiedzy – nie ma gdzie tego robić. Sam mam prawie 3 tygodnie zaległości na polskim supporcie, a Ciebie to już tam w ogóle dawno nie widziałem 🙂
Czekaj, teraz kojarzę. TimThumba wyrzuciłam z użycia po przeczytaniu tego artykułu:
http://webtuts.pl/timthumb-krytyczna-luka-w-zabezpieczeniach/
A odkąd w WP pojawiła się możliwość dodawania ikon wpisów, to już w ogóle przestał mi być potrzebny. To co oferuje WP w temacie obrazków i skalowania (jest możliwość zmiana domyślnych ustawień obrazków dla skalowania podczas uploadu) mi wystarcza.
To Ty znów się udzielasz na forum WP? Zaskoczyłeś mnie, faktycznie już dawno tam nie zaglądałam. Tylko wiesz, na tym forum jest raczej wymiana wiedzy technicznej, a mi właśnie brakuje wymiany doświadczeń z pogranicza „biznesowego”. Np. to co napisałeś:
jest świetnym przykładem.
Luka w tym skrypcie jest już dawno naprawiona, więc śmiało można korzystać 🙂 Jest przydatny zwłaszcza gdy na blogu jest po kilka rozmiarów dla każdego zdjęcia, szkoda miejsca na sererze.
A co do samego artykułu, to wydaje mi się, że najzdrowiej jest połączyć podejścia A, B i C, a przynajmniej B i C.
Pozdrawiam!
Ola, dzięki za info. Dzięki również za cenną wskazówkę odnośnie niepotrzebnego zapychania serwera. Tak, trzeba uczyć się postawy B, wiem coś o tym…
Postawa klienta: na początek małe wymagania i mały budżet. A potem: może jeszcze to, może tamto, a to może wywalimy i tak wkoło Macieju. Obserwowałem męki współpracownika z biurka obok, aż wreszcie kazałem mu opracować lepszą umowę. Z tego co widzę (i słyszę) jest lepiej, zresztą chłopak zrobił się bardziej asertywny, więc go już nie rolują jak kiedyś.
Damian, święte słowa: umowa, umowa, jeszcze raz umowa. Ale powiem Ci szczerze, że ciągle wpadam w taką pułapkę: zlecenie wydaje się proste i klarowne, więc umowa wydaje się niepotrzebna. A potem dzieje się dokładnie jak piszesz: jeszcze może to, a tamto…
Chyba wszyscy „uwielbiamy” takich klientów prawda?:P
Programista typu C często jest połączony z programistą typu B,. ponieważ zrobić coś łatwiej, sam się nauczy, ale również będzie chciał na tym zarobić.
Rozwiązania jakie proponujesz w treści są faktycznie bardzo proste do wykonania jednak nie każdy (np. ja) wiedział, że tak można 😀
Adrian, ja też nie rzadko trafiam na jakiś proste rozwiązania, o których nie miałam dotąd pojęcia. Wiedza jest rozsiana po ludziach i pewnie nie ma osób, które nawet mimo dużego doświadczenia wiedzą w danej dziedzinie wszystko. Dzięki za komentarz.