4 Sposoby ulepszania wersji mobilnej motywu WordPress

Artykuł napisany przez:
  • WordPress
  • Zaktualizowano: Jul 29, 2013

Wersja mobilna WordPress

Spójrzmy prawdzie w oczy, urządzenia mobilne stają się coraz bardziej popularne. Przeglądanie pulpitu nie rośnie, faktycznie maleje, a mobilność szybko rośnie wraz z tymi niesamowitymi smartfonami i stołami.

Według Net MarketShare urządzenia mobilne stanowią 10% całkowitego ruchu internetowego. Jest to duża liczba, a nawet większa w niektórych niszach i krajach. Ale ważną rzeczą jest tutaj szczególna uwaga, jakiej wymagają urządzenia mobilne, ze względu na ograniczoną przestrzeń ekranu i fakt, że połączenia mobilne są zwykle wolniejsze niż połączenie z komputerem stacjonarnym.

Wiele motywów WordPressa jest responsywnych, ale wiesz, zawsze będziemy mieli miejsce na ulepszenia. Zobaczmy więc technologie 4 i sposoby ich wykorzystania, aby poprawić komfort korzystania z urządzeń mobilnych dla użytkowników.

#1 Ol 'Media Types

Kilka lat temu, kiedy IE5.5 i IE6 były uważane za żywe, przeglądarki mobilne dopiero zaczynały pojawiać się (a Opera była zdecydowanie najlepsza), a ludzie zaczęli zdawać sobie sprawę, że rzeczy właśnie się zrywały, ponieważ telefony wtedy po prostu nie mogły przetwarzaj proste rzeczy, takie jak CSS (nie wspominając o JS, flashu itd.).

Tak więc zrobienie całkowicie oddzielonej strony mobilnej było jedyną opcją, gdy pojawiły się media, by nas uratować. Pomysł był prosty, można powiedzieć przeglądarce, czy dostarczany plik to "zaawansowane" reguły CSS (dla komputerów stacjonarnych) lub proste reguły CSS (dla urządzeń przenośnych lub drukarek). Składnia jest tak prosta, jak to:

<link rel = "stylesheet" href = "handheld.css" type = "text / css" media = "handheld" />

Może to być dobra opcja, aby stworzyć zupełnie inny projekt witryny mobilnej. Ale po prostu nie powinieneś go używać.

Media mogą początkowo brzmieć dobrze, ale przy nowoczesnych smartfonach pojawił się prosty problem: brak obsługi przeglądarki. Większość głównych graczy ignorowało tego rodzaju funkcjonalność (np. Jabłko)
Potem pojawiają się zapytania o media, by nas uratować.

#2 Media Queries i jak naprawdę poprawić mobilność

Jest to zdecydowanie najpopularniejszy sposób na stworzenie mobilnej wersji witryny.

Możesz kierować określone punkty na podstawie rozmiaru przeglądarki, rozmiaru ekranu urządzenia, gęstości pikseli (tak, siatkówki!), A nawet typów multimediów.

Oto proste zapytanie o media:

@media (max-width: 700px) {body {background: red; }}

Jest to prawie to samo co programowanie. IF "Szerokość przeglądarki wynosi 700 lub mniej", THEN "Zastosuj następujący kod CSS".

dziecko Theme

Stwórzmy nowy folder w twoim / tematach i nazwijmy go twentyMobile. Wiem, dwadzieścia dwanaście już korzysta z zapytań o media, ale jesteśmy tutaj, aby się uczyć, prawda?

Utwórz plik style.css i dodaj tę zawartość:

/ * Nazwa motywu: szablon kompozycji mobilnej: twentytwelve * / @import url ("../ twentytwelve / style.css"); @media handheld, tylko ekran i (maksymalna szerokość: 767px) {nav ul {display: none;} nav select {display: block}}

Powyżej stworzyliśmy CSS motywu potomnego, a także dodaliśmy regułę, która będzie kierowana tylko na urządzenia mobilne, które ukryją menu główne i pokażą opcję wyboru. Więc jeśli masz menu w zaznaczeniu, możesz zaoszczędzić dużo miejsca zamiast wyświetlać je jako elementy ul / li

#3 Extreme makeover z jQuery Mobile

jQuery mobile to niesamowita platforma, która wykorzystuje funkcjonalność jQuery w celu poprawy mobilności dzięki zoptymalizowanym widgetom i elementom interfejsu użytkownika.

Wymagany HTML o sprawił, że działał jest bardzo prosty, po prostu używa atrybutów danych HTML i JS do wykrywania i tworzenia widżetów interfejsu użytkownika.

Jednak aby jQuery Mobile działał poprawnie na Twoim blogu WordPress, musisz najpierw zadzwonić do skryptu mobilnego jQuery. Wracając do naszego motywu potomnego, zduplikuj plik header.php głównego tematu i dodaj te linie do tagu head:

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src = "http://code.jquery.com /mobile/1.3.1/jquery.mobile-1.3.1.min.js "> </ script>

Powinienem wspomnieć, że w przypadku propozycji komercyjnych powinieneś użyć wp_enqueue _script, aby uniknąć duplikowania bibliotek w swojej witrynie.
Teraz możemy grać z praktycznie dowolnym elementem UI, który chcesz. jQuery mobile ma wiele widżetów interfejsu użytkownika, których można używać w motywie, ale zastosujmy stronę i panele zwijane.
Jest to podstawowa składnia HTML:

<div data-role = "page"> <div data-role = "header"> </ div> <div data-role = "content"> </ div> <div data-role = "footer"> </ div> </ div>

Za pomocą tego kodu utworzysz nową "stronę" oraz obszary nagłówka, treści i stopki. Nagłówek i stopka są poprawione, a zawartość zmieni się w zależności od bieżącej strony, więc możesz załadować wiele stron tylko raz i po prostu ukryć je, przypisując różne identyfikatory.
Jest to podstawowy kod HTML dla zwijanych paneli:

<div data-role = "zwijany zestaw"> <div data-role = "zwijany zestaw" data-collapsed = "true"> <p> Zawartość zwijana obszaru </ p> </ div> </ div>

To całkiem proste, aby zaimplementować tam pętlę, prawda? Twój kod będzie wyglądał następująco:

<div data-role = "collapsible-set"> <? while (have_posts ()) {...?> <div data-role = "collapsible" data-collapsed = "true"> </ div> <? ...}?> </ div>

Poprawiono menu wyboru

Za pomocą kodu, który widzieliśmy powyżej (w sekcji zapytań o media) możesz ukryć swoje zwykłe menu i pokazać specjalne menu wyboru. jQuery pozwala na dodanie go bez dużej ilości kodu PHP (szczerze mówiąc nie będziemy potrzebować PHP). Stwórzmy nowy plik i dodajmy tam ten kod:

jQuery (function ($) {// gdy DOM jest gotowy $ (document) .ready (function () {// utwórzmy element select $ ("<select />").appendTo("nav"); / / Za pomocą nowej opcji przejdź do ... $ ("<opcja />", {"wartość": "", "tekst": "Przejdź do ..."}). AppendTo ("nav select");}); / / Teraz mamy wybrane utworzone wypełnijmy je: $ ("nav .menu a"). Each (function () {// dla każdego LINK-a znalezionego w menu var aux = $ (this); $ ("<opcja /> ", {" wartość ": aux.attr (" href ")," html ": aux.text ();}). appendTo (" nav select "); // dołączanie nowego elementu do zaznaczenia)} ; // następnie ustawiamy rozwijaną funkcjonalność do przekierowania po wybraniu nowej pozycji $ ("nav select"). change (function () {window.location = $ (this) .find ("option: selected"). val ();});});

Spowoduje to utworzenie nowego mobilnego menu, ale problem polega na tym, że ładujemy jquery mobile nawet w "normalnej" wersji strony. Dlatego możemy użyć również kilku wtyczek, aby pomóc nam ulepszyć naszą stronę.

#4 - Owijanie wszystkiego za pomocą Mobile Detector

Ta niesamowita wtyczka tworzy nową funkcjonalność, która pozwala nam warunkowo ładować motywy w zależności od urządzenia użytkownika. Działa z prostymi regułami warunkowymi, takimi jak to:

<? php if (MobileDTS :: is ('android')) {....} elseif (MobileDTS :: is ('mobile')) {....} else {}?>

Metoda MobileDTS sprawdza bieżące urządzenie, a następnie zwraca prostą wartość true / false. Następnie możemy użyć magicznej funkcji o nazwie switch_theme (), aby ustawić nową kompozycję, i możesz użyć warunków wtyczki, takich jak MobileDTS :: is_switcher_enabled (), aby utworzyć łącze do wersji na komputer, na przykład przy korzystaniu z telefonu komórkowego.

Wnioski

Czy kiedykolwiek używałeś mobilnych wtyczek lub funkcji w swoim motywie WordPress? Którą metodę preferujesz? Nie wstydź się i podziel się swoimi przemyśleniami!

Artykuł Rochester Oliveira

Jestem web designer i przedsiębiorca z Itajubá (MG), Brasil. Uwielbiam pisać o niejasnych tematach i robić fajne rzeczy.