Jak Zbudować Mobilny Motyw WordPress I Dlaczego Powinieneś

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.

Four screenshots of the mobile theme running on an iPhone
Po co budować motyw dla urządzeń mobilnych? Ponieważ większość responsywnych motywów jest okropna na telefonie komórkowym

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

Screenshot of the Ratchet home page
Część rodziny Bootstrap

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:

iPhone screenshots of the home page and a single post
Nasz przykładowy motyw mobilny to prosta wersja 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:

  1. 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.
  2. tagi linków są dodawane do obrazów do przycinania stron internetowych
  3. Ikona “Strona główna” jest dodawana do nagłówka, jeśli przeglądana strona nie jest stroną główną
  4. 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.

Screengrabs showing the two popovers in action
Popovers są komponentem zapadkowym tak prostym do wdrożenia

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:

  1. Dodaje obsługę motywu dla miniatur postów (polecane obrazy)
  2. Enqueue ‘ s The Ratchet javascript file and The Ratchet stylesheet
  3. 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.
  4. 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.

Screengrab showing the pointer
Wskaźnik jest schludnym ulepszeniem wizualnym tylko w CSS

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ń.

Screenshot of the plugin's settings page
Wybierz motyw według urządzenia – tutaj używamy tylko Ratcheta dla telefonów komórkowych, a nie tabletów

Ikony Do Przycinania Stron Www

iPhone screen showing custom icon on home screen
Udostępnienie ikon sprawia, że 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: