система онлайн-бронирования
г. Донецк, Украина, ул. Артёма, 87
+38 (062) 332 33 32, 332-27-71
ЗАБРОНИРОВАТЬ
НОМЕР

Статьи

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:

Oto mobilna wersja mojej strony 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!

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?
Php bloginfo ('template_url');?
Php bloginfo ('stylesheet_url');?
Php bloginfo ('template_url');?
Php bloginfo ('stylesheet_url');?
Php bloginfo ('stylesheet_url');?
Php bloginfo ('stylesheet_url');?
Php bloginfo ('stylesheet_url');?
Php bloginfo ('template_url');?

Новости

Отель «Централь» Официальный сайт 83001, Украина, г. Донецк, ул. Артема, 87
Тел.: +38 062 332-33-32, 332-27-71
[email protected]
TravelLine: Аналитика


Студия web-дизайна Stoff.in © 2008