W artykule:
Wielu użytkowników tabletów i urządzeń mobilnych jest przeszkolonych w zakresie aplikacji, aby oczekiwać, że przesunięcia i dotknięcia spowodują nawigację.
Wiele motywów WordPress nie obejmuje obsługi gestów po wyjęciu z pudełka, ale w rzeczywistości jest to zaskakująco łatwe do dodania do istniejącej witryny.
Pokażę Ci, jak umożliwić użytkownikom mobilnym poruszanie się po witrynie za pomocą dotknięć i przesunięć.
Wszyscy to robimy. Wyskakujesz z aplikacji i przechodzisz do przeglądarki tabletu i zaczynasz przesuwać-bez skutku-na próżno próbując poruszać się po stronie internetowej i oczywiście nie działa. Jest to szczególnie rozpowszechnione w przypadku tabletów, ponieważ zwykle serwują one standardową witrynę znacznie częściej niż smartfony, które często otrzymują mobilną wersję witryny.
Ale Twoja witryna WordPress może być dostosowana do obsługi gestów przy bardzo niewielkim wysiłku dzięki wielu rozwiązaniom bazowym javascript, które mogą przynieść obsługę gestów dotykowych do każdej witryny WordPress.
Pokażę Ci, jak zaimplementować następujące gesty za pomocą biblioteki Tocca:
- Przesuń w lewo-przejdź do następnego postu
- Przesuń w prawo-przejdź do poprzedniego postu
- Podwójne dotknięcie-przejdź do wybranej strony (domyślnie jest to strona główna)
Przesunięcie zależy od poprzedni oraz następny tagi, które WordPress zazwyczaj dodaje do nagłówka. Jeśli twój motyw nie wyświetla tych tagów, są szanse, że Twój motyw nie wywołuje funkcji wp_head lub że wyłączył wyjście tych linków.
Rozwiązanie jest opakowane w wtyczkę, więc najpierw przejdźmy przez sposób korzystania z wtyczki, a następnie przejrzymy, jak to działa.
Konfigurowanie Gestów
Krok 1-Zainstaluj Wtyczkę
Pobierz wtyczkę z GitHub i prześlij do swojej witryny WordPress w Wtyczki > Dodaj Nowy. Aktywuj wtyczkę.
Krok 2-Aktualizacja Ustawień
Jeśli przejdziesz do Ustawienia > Gesty znajdziesz 2 ustawienia:
Pierwszą opcją jest kontener, w którym zostaną wykryte gesty. Jeśli chcesz, aby gest w dowolnym miejscu na widocznej stronie był akcjowany, będziesz chciał użyć identyfikatora lub klasy pierwszego głównego elementu zawierającego po znaczniku body (zazwyczaj # page).
Jeśli chcesz tylko gesty w rzeczywistej treści (z wyjątkiem nagłówka na przykład), prawdopodobnie będziesz chciał użyć czegoś takiego jak #content.
Oczywiście wszystko zależy od tego, jak napisany jest Twój motyw, więc możesz zagłębić się w HTML lub nagłówek.plik motywu php, aby dowiedzieć się więcej.
Drugą opcją jest strona do wyświetlenia, gdy użytkownik dwukrotnie dotknie. Domyślnie jest to adres URL witryny, ale może to być dowolny adres url i zależy od twoich potrzeb.
Jeśli zmienisz opcje, Kliknij Zapisz.
Krok 3-Test!
W rzeczywistości to wszystko, więc wskocz do swojej witryny i przetestuj ją. Możesz przetestować na jeden z 3 Sposobów:
- Pulpit: symuluj machnięcie, przytrzymując przycisk myszy i przeciągając w lewo lub w prawo; szybkie kliknięcie, aby uzyskać podwójne kliknięcie.
- Symulator (tj. symulator iOS): przeglądaj swoją witrynę w symulatorze mobilnym i symuluj przesuwanie i stukanie zgodnie z Opisem dla komputerów stacjonarnych
- Handheld: oczywiście najlepszym sposobem na przetestowanie jest rzeczywiste urządzenie przenośne. Jeśli możesz dostać się do witryny za pomocą palmtopa, zrób to i dotknij i przesuń palcem jak zwykle
Powinieneś zauważyć, że przesuwanie w lewo i w prawo nawiguje między postami, podczas gdy Dwukrotne stuknięcie przenosi cię do strony określonej w Kroku 2 (lub strony głównej, jeśli pozostawiłeś opcje bez zmian).
Jak To Działa
Jak już wspomniałem, rozwiązanie to wykorzystuje wtyczkę Tocca jQuery do przechwytywania gestów i jest prawie całkowicie rozwiązaniem po stronie klienta.
Skrypt Tocca jest enqueued, wraz z niestandardowym javascript, aby zainicjować zdarzenia Tocca na elemencie kontenera, który określamy w Ustawienia > gesty strona. Prosta lokalizacja ma miejsce w celu zapewnienia, że identyfikator kontenera i miejsce docelowe dwukrotnego stuknięcia są przekazywane do skryptu inicjalizacyjnego.
Wtyczka jest zatem dość mała i nieciekawa (obsługuje również stronę nowe ustawienia > gesty), więc po prostu skupimy się na skrypcie inicjalizacyjnym.
Jak już wspomniałem, funkcja localize_script służy do przekazania ustawień do skryptu inicjalizacyjnego, A wyjście wygląda mniej więcej tak:
Skrypt inicjalizacji następnie po prostu dodaje obsługę zdarzeń gestu Tocca dla podwójnego stuknięcia (dbltap), przesuń w lewo (swipeleft) i przesuń w prawo (Przesuń w prawo) do kontenera:
Jak widzisz, wcale nie jest to zbyt skomplikowane. Dwukrotne stuknięcie polega po prostu na zmianie adresu URL do przekazanego miejsca docelowego, podczas gdy działania machnięcia po prostu szukają odpowiedniego tagu łącza i zmieniają adres URL na href.
Jeśli nie ma poprzedni lub następny link (taki jak na stronie głównej) wtedy nie są podejmowane żadne działania.
Nie zmuszaj użytkowników mobilnych do myślenia!
Wzrost liczby telefonów komórkowych, a zwłaszcza tabletów, kosztem komputerów stacjonarnych oznacza, że linie między zachowaniem aplikacji a zachowaniem witryny nadal się zacierają.
Użytkownicy kochają spójność i nie powinni tak naprawdę zmieniać swojego zachowania tylko dlatego, że są w przeglądarce, a nie w aplikacji.
Jak pokazuje To rozwiązanie, jest całkowicie możliwe, aby użytkownicy mobilni mieli swoje ciasto i je jedli. Nawet o tym nie myśląc.
Tagi:
