Istnieje 5 powodów, dla których musisz zbudować motyw specjalnie dla odwiedzających Twoją witrynę WordPress. A już posiadanie responsywnego motywu jest jednym z nich.
Prawda jest taka, że większość responsywnych motywów zapewnia drugorzędne wrażenia mobilne, a ponieważ telefon komórkowy staje się dominującym urządzeniem do uzyskiwania dostępu do sieci, Twój ruch będzie cierpieć.
Chociaż możesz uzyskać wtyczki, które pomogą Ci stworzyć motyw mobilny, pokażę Ci, jak przejąć pełną kontrolę nad mobilnym doświadczeniem odwiedzającego, budując własny niestandardowy motyw mobilny.
5 Powodów, Dla Których Potrzebujesz Konkretnego Motywu Dla Urządzeń Mobilnych?
Twój aktualny motyw nie jest responsywny
Wydaje się to ślepo oczywiste, ale jeśli obecny motyw nie jest responsywny, prawdopodobnie jest to koszmar do użycia na urządzeniu mobilnym. Tworzenie konkretnego motywu będzie tańsze, szybsze i łatwiejsze niż budowanie zupełnie nowego responsywnego motywu.
Twój aktualny motyw jest responsywny, ale wrażenia mobilne są do bani
Nawet jeśli obecny motyw jest responsywny, korzystanie z niego może być nadal uciążliwe, ponieważ zbyt wiele responsywnych motywów zapewnia straszne wrażenia na telefonie komórkowym. Nawet obecny domyślny WordPress, Twenty Fourteen, ma wiele problemów.
Chcesz zoptymalizować wrażenia dla każdej platformy
Prawda jest taka, że jeśli twój motyw nie zawiera efektywnie wirtualnych motywów 3 (jeden na pulpit, jeden na tablet i jeden na telefon komórkowy), to gdzieś musiał pójść na kompromis: używasz jack-of-all-trades i master-of-none.
Aby naprawdę zoptymalizować wrażenia dla każdej platformy, musisz zbudować motyw dla każdej platformy.
Chcesz zbudować aplikację mobilną
Jeśli używasz odpowiednich narzędzi, motyw mobilny może być doskonałym krokiem do aplikacji mobilnej, dzięki czemu możesz wykonać wszystkie testy i testy w znacznie bardziej wyrozumiałym środowisku internetowym.
I tak się składa, że ten artykuł wprowadzi cię w narzędzie, które twórcy aplikacji Twitter dla iPhone używali do prototypowania.
Chcesz trafić na rynek mobilny
Być może zdecydowałeś się stworzyć unikalny produkt dla użytkowników mobilnych, który chcesz dostarczać lokalne wiadomości skierowane do osób dojeżdżających do pracy lub chcesz dostarczać treści fitness do ćpunów siłowni lub statystyki meczów na żywo uczestnikom wydarzeń sportowych.
Jeśli celowałeś w telefon komórkowy, potrzebujesz motywu mobilnego.
Przedstawiamy Ratcheta
Zbudujemy motyw mobilny oparty na Ratchecie, frameworku HTML, CSS i javascript, który powstał w ramach projektu, który stworzył aplikację Twitter dla iPhone ‘ a.
Początkowo wydany w listopadzie 2012 roku, okazał się popularny jako narzędzie do prototypowania aplikacji mobilnych z plikami CSS specyficznymi dla platformy, własnym zestawem ikon i kombinacją komponentów interfejsu użytkownika. Obecnie oficjalnie należy do rodziny Bootstrap.
Budowanie interfejsu użytkownika jest, jak widać, bardzo szybkie i łatwe. Łatwo jest również uzyskać głowęmodel ounda Ratcheta.
Bazując na typowym paradygmacie aplikacji jednostronicowych, wyznaczasz nagłówek i obszar zawartości. Wszystkie linki lokalne są konwertowane na ajax i Ratchet po prostu sprawdza odpowiedź serwera i aktualizuje nagłówek (jeśli się zmienił) i obszar zawartości w razie potrzeby.
Oznacza to, że masz pełną kontrolę nad wyglądem i działaniem aplikacji z samego WordPress. Nic wielkiego, być może, gdy mamy do czynienia z aplikacją internetową, ale dość znaczące, jeśli chodzi o aplikacje mobilne.
Używanie Ratcheta Do Tworzenia Motywu Mobilnego
Model Ratchet jest idealny do dostarczania treści WordPress na urządzenie mobilne i skutecznie będziemy budować aplikację Ratchet do naszego motywu mobilnego.
Nasz przykładowy motyw jest bardzo prostą wersją doskonałej strony kwarcowej:
Jest to pewna ironia w tym wyborze, biorąc pod uwagę, że Quartz jest responsywnym motywem, który doskonale nadaje się do urządzeń mobilnych, ale Kwarc wydaje się być raczej wyjątkiem niż normą.
Dostarczanie aplikacji Ratchet
Ratchet opiera się na jednej stronie, która wygląda mniej więcej tak:
Możemy przetłumaczyć to na motyw WordPress w następujący sposób:
Nagłówek.php
Nagłówek.plik php obsługuje cały kod z Oświadczenie o otwarciu
element.
Rzeczy do zauważenia:
- Nie zawieramy żadnego odniesienia do arkusza stylów Ratchet ani pliku JavaScript Ratchet. Są one dodawane do poprzez funkcje wp_enqueue_style i wp_enqueue_script w połączeniu z wp_head.
- tagi linków są dodawane do obrazów do przycinania stron internetowych
- Ikona “Strona główna” jest dodawana do nagłówka, jeśli przeglądana strona nie jest stroną główną
- Tworzone są dwa “popovers”, jeden dla kategorii i jeden dla tagów.
Popovers są listami nieuporządkowanymi, które są budowane przy użyciu wspólnej funkcji, ratchet_popover_table, położony w funkcje.php plik.
Pamiętaj, że Ratchet szuka tylko zmian w nagłówku, a nie zastępuje jak to robi z zawartością.
Stopka.php
Na stopka.php robi niewiele więcej niż generuje znaczniki zamykające dla treści div, ciało oraz html elements i wywołanie wp_footer.
To po prostu pomaga rozszerzyć motyw za pomocą wtyczek.
Funkcje.php
Na funkcje.php jest również dość prosta:
- Dodaje obsługę motywu dla miniatur postów (polecane obrazy)
- Enqueue ‘ s The Ratchet javascript file and The Ratchet stylesheet
- Dodaje funkcję pobierania podpisu dla polecanego obrazu. Jest to bardzo przydatny fragment kodu (dzięki podziękowaniom Benowi Byrne ‘ owi przez bobz.co) ponieważ uzyskanie podpisu dla obrazu WordPress jest niepotrzebnie trudne.
- Dodaje funkcję do budowania listy popover dla danego typu wyrażenia
Styl.css
Głównym plikiem w dowolnym temacie (w rzeczywistości motyw nie zadziała bez niego)jest oczywiście styl.css.
I won ‘ t go przez ten plik, wystarczy powiedzieć, że to głównie siedzi obok Ratcheta.css do stylizacji treści, ustawiania kolorów nagłówków itp.
Jest tylko jedna technika, którą chcę podkreślić, ponieważ była to dla mnie nowość i może Cię zainteresować, a mianowicie dodanie wskaźnika, który znajduje się na górze pierwszego nagłówka i wskazuje “na” obraz.
Efekt ten uzyskuje się poprzez użycie selektora :before CSS, aby dodać zawartość, wskaźnik, przed elementem:
# post-list: before {
pozycja: absolutna;
top: – 15px;
pozostało: 10%;
Szerokość: 0;
Wysokość: 0;
margin-left: – 15px;
treść:”;
border-right: 15px solid transparent;
border-bottom: 15px solid #ffffff;
border-left: 15px solid transparent;
}
Należy pamiętać, że sam element (w tym przypadku # post-lista) musi mieć swoje położenie Ustaw na względny: nie zadziała, jeśli zostawisz go z domyślnym statyczne.
Indeks.php, Single.php, Archiwum.php
Wszystkie te pliki są bardzo proste i są tam naprawdę tylko po to, aby zapewnić zawartość.
Indeks.php, który jest używany na stronie głównej oraz archiwum.php są praktycznie identyczne. Generują listę postów, wyprowadzając polecany obraz, jeśli taki istnieje, dla pierwszego postu na liście.
Lista jest oznaczona jako składnik tabeli zapadkowej, ale trochę ją poprawiłem, aby usunąć szewrony, aby zwolnić miejsce na tytuły postów i fragmenty.
Singiel.php generuje wyjście dla pojedynczego posta za pomocą formatowania z Quartz.
Po prostu bądź ostrożny z treścią, którą próbujesz dostarczyć w jednym szablonie, szczególnie mając na uwadze potencjalne ograniczenia podejścia Ratcheta ajax. Javascript, a nawet style dostarczane jako część zawartości nie będą wykonywane: musisz upewnić się, że wszystkie te zasoby są dostarczane w początkowej konfiguracji strony.
Wykończenie
Więc stworzyliśmy temat, ale jest jeszcze kilka ‘ I ‘do kropki i’ T ‘ do krzyża.
Responsywne Obrazy Z Wtyczką PCO Media
Polecam zainstalowanie wtyczki PCO Media, ponieważ znacznie ułatwi to pracę z obrazami. Usuwając wszystkie szerokość oraz wysokość atrybuty ta wtyczka zapewnia, że Twoje obrazy będą poprawnie skalowane na ekranie telefonu komórkowego i zaoszczędzi ci sporo czasu i frustracji.
Automatyczne Przełączanie Motywów Przy Użyciu Dowolnego Motywu Mobilnego
Jeśli nie korzystasz z mobilnego scenariusza (lub korzystasz z domeny mobilnej, takiej jak m.domain.com) następnie musisz upewnić się, że dostarczasz swój nowy motyw mobilny tylko użytkownikom mobilnym.
Wtyczka any Mobile theme pozwala wybrać motyw dla wielu urządzeń za pomocą prostej, łatwej do naśladowania strony ustawień.
Ikony Do Przycinania Stron Www
klips o wiele skuteczniejszy
I wreszcie, będziesz mieć nadzieję, że twoi mobilni odwiedzający dodadzą Twoją witrynę do swojej strony głównej, tak zwane przycinanie stron internetowych, więc będziesz chciał zapewnić świetnie wyglądające ikony, które łatwo rozpoznać w tym morzu ikon.
Zacznij od zaprojektowania ikony 1024×1024, a następnie przejdź do makeappicon, aby wygenerować wszystkie potrzebne rozmiary. Po prostu upuść je do folderu ikony w swoim motywie.
Rozszerzenie Tematu
To tylko szybkie i proste wprowadzenie do tworzenia mobilnego motywu z Ratchetem i zrobiliśmy niewiele więcej niż zarysowanie powierzchni możliwości frameworka.
Mimo to możemy zobaczyć, jak budowanie motywu specyficznego dla urządzeń mobilnych jest szybkie i łatwe przy użyciu frameworka i zapewnia znacznie lepsze wrażenia z aplikacji dla odwiedzających.
A ponieważ WordPress jest nadal w centrum rozwiązania, dodawanie loginu, formularzy, a nawet treści premium i usług powinno być możliwe.
Być może nadszedł czas, aby poważnie rozważyć zapewnienie lepszego doświadczenia dla użytkowników mobilnych, a nie tylko poleganie na responsywnym motywie, aby wykonać zadanie za Ciebie?
Tagi:
