Zanim powiesz: Tego nie da się zrobić

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):

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
2. w polu proporcje wpisać interesujące nas proporcje (krok nr 2 na rysunku 1.2)
3. nacisnąć przycisk crop (krok nr 3 na rysunku 1.2)
4. 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?