Jak stworzyć mobilną wersję szablonu dla WordPressa

1. Krok 1. Ścieżka do motywu mobilnego w header.php
2. Określ urządzenie mobilne. Metoda 1
3. Określ urządzenie mobilne. Metoda 2
4. Krok 2. Edytuj styl-mob.css

Dzisiaj porozmawiam o tym, jak stworzyć mobilną wersję szablonu dla Twojego bloga WordPress bez wtyczek i skryptów. Nie jest tajemnicą, że teraz rośnie liczba osób odwiedzających strony za pomocą smartfonów. Na przykład na jednym z moich blogów około 2000 wyświetleń miesięcznie, a to 10-12% całości, pochodzi z urządzeń mobilnych. Nawiasem mówiąc, jest to o 3% więcej niż w przypadku przeglądarki Internet Explorer. Dlaczego więc, jeśli specjalne znaczniki IE są przepisywane na prawie każdej stronie, nie troszczysz się o użytkowników telefonów komórkowych?

Większość nowoczesnych telefonów do przeglądania stron jest zarządzana przez system operacyjny Android lub iOS, na Symbian, Opera Mini (Mobile) jest używany w Symbian w 90% przypadków. Przeglądarki telefonów obsługują więc CSS3, którego będziemy używać podczas tworzenia mobilnej wersji motywu.

Funkcje przeglądarek mobilnych obejmują:

• brak kontroli za pomocą myszy, a także często i klawiatury,
• sterowanie ekranem dotykowym
• Mała przestrzeń robocza w oknie przeglądarki z powodu małej rozdzielczości ekranu.

Dlatego szablon bloga musi się dostosować do ekranu telefonu! Zapewni to zauważalną poprawę jego wyświetlania w przeglądarce mobilnej. Na przykład moja strona wygląda jak z telefonu:

Ustalmy teraz, jaki powinien być projekt witryny dla telefonu :

• dostosowany do małej rozdzielczości ekranu
• zapewnić kontrolę, klikając ekran dotykowy
• Kontrast na tyle, aby dobrze wyświetlał się na jasnym ekranie telefonu
• jedna kolumna, aby nie było przewijania w poziomie
• „Guma” - ponieważ nie możemy zapewnić wszystkich rozdzielczości ekranu

Krok 1. Ścieżka do motywu mobilnego w header.php

Najpierw utwórz kopię pliku arkusza stylów motywu i nazwij go styl-mob.css.

Określ urządzenie mobilne. Metoda 1

Zmieńmy teraz nieco plik hearer.php. Znajdź miejsce podłączenia pliku stylów (zazwyczaj są to pierwsze kilka wierszy kodu):

<link rel = "styleheet" media = "screen" href = "<? php bloginfo ('template_url');?> /style.css" />

i zastąp go następującym:

<link rel = "styleheet" type = "text / css" media = "screen i (min-width: 641px)" href = "<? php bloginfo ('stylesheet_url');?>" />

<link rel = "arkusz stylów" media = "ekran i (max-width: 641px)" href = "<? php bloginfo ('template_url');?> / style-mob.css" />

Wszystkie ekrany użytkowników podzieliliśmy na dwie grupy: te, które są większe niż 640 px, i te, które są mniejsze. Jeśli ekran jest większy niż 640 px, zostanie załadowany zwykły plik stylu style.css, a jeśli jest mniejszy, to style-mob.css.

Jeśli zdecydujesz się skorzystać z tej metody, musisz dodać specjalne ciągi dla IE 6-8 przed liniami, które właśnie wstawiłeś.

<! - [jeśli IE 6]>

<link rel = "stylesheet" type = "text / css" media = "all" href = "<? php bloginfo ('stylesheet_url');?>" />

<! [endif] ->

<! - [jeśli IE 7]>

<link rel = "stylesheet" type = "text / css" media = "all" href = "<? php bloginfo ('stylesheet_url');?>" />

<! [endif] ->

<! - [jeśli IE 8]>

<link rel = "stylesheet" type = "text / css" media = "all" href = "<? php bloginfo ('stylesheet_url');?>" />

<! [endif] ->

Tak, telefony obsługują media = "screen i (max-width: 641px)", a osioł do wersji 9 - no

Określ urządzenie mobilne. Metoda 2

Jest drugi sposób. Możesz ustawić wartość media = „handheld” na ścieżkę do stylu „mobile” i ustawić ścieżkę do pliku stylu dla tego telefonu:

<link rel = "stylesheet" type = "text / css" media = "screen" href = "<? php bloginfo ('stylesheet_url');?>" />

<link rel = "stylesheet" media = "handheld" href = "<? php bloginfo ('template_url');?> /style-mob.css" />

W tym przypadku, jeśli oglądanie odbywa się z komputera, ładowany jest zwykły styl, a jeśli z telefonu, to style-mob.css. Nie sprawdziłem, jak to działa.

Krok 2. Edytuj styl-mob.css

Jeśli użyłeś metody 1, aby wstawić plik stylu, po prostu zmniejsz okno przeglądarki, aby zobaczyć, jak wygląda Twoja strona z telefonu! Jeśli użyłeś metody 2, tymczasowo zastąp ją metodą 1 i zrób to samo: D. Cóż, lub przeglądaj stronę bezpośrednio z telefonu. W rzeczywistości pierwsza metoda jest dobra w procesie tworzenia motywu mobilnego , a druga jest już gotowa do użycia.

Teraz otwórz style-mob.css za pomocą ulubionego edytora plików.

Wprowadziłem te zmiany:

• ustaw szerokość strony (treść) na 100%, a blok treści (stronę) na 95%, aby uzyskać małe marginesy
• włączony „widoczność” dla przycisku „szukaj”
• zwiększono rozmiar czcionki, przetłumaczono wszystkie wartości czcionek na em
• usunięto pływak: pozostawiono kolumnę środkową, aby szablon stał się pojedynczą kolumną
• i kilka innych „kosmetycznych” edycji

W rzeczywistości nie można powiedzieć, co należy zmienić, aby szablon był mobilny, wszystko zależy od konkretnego użytego szablonu.

Jeśli masz jakieś pytania, napisz, na pewno odpowiem. I subskrybuj Kanał RSS aby nie przegapić niczego ciekawego!