Як зрабіць мабільную версію шаблону для WordPress

1. Крок 1. Шлях да мабільнай тэме ў header.php
2. Вызначаем мабільнае прылада. спосаб 1
3. Вызначаем мабільнае прылада. спосаб 2
4. Крок 2. рэдагуючы style-mob.css

Сёння я распавяду пра тое, як без убудоў і скрыптоў стварыць мабільную версію шаблону для вашага блога на WordPress. Ні для каго не сакрэт, што зараз павялічваецца колькасць людзей, якія наведваюць сайты з дапамогай смартфонаў. Напрыклад, на адным з маіх блогаў каля 2000 праглядаў у месяц, а гэта 10-12% ад агульнага ліку, адбываецца з мабільных прылад. Дарэчы, гэта на 3% больш, чым наведвальнікаў з браўзэрам Internet Explorer. Дык чаму, калі на практычна кожным сайце прапісваюцца спецыяльныя тэгі для IE не паклапаціцца і пра карыстальнікаў мабільных тэлефонаў?

Большасць сучасных для тэлефонаў, з якіх здзяйсняецца прагляд сайтаў, кіруюцца OS Android або iOS, на Symbian ў 90% выпадкаў выкарыстоўваецца браўзэр Opera Mini (Mobile). А значыць, браўзэры для тэлефонаў падтрымліваюць CSS3, што мы і будзем выкарыстоўваць пры стварэнні мабільнай версіі тэмы.

Да асаблівасцяў браўзэраў мабільных прылад адносяцца:

• адсутнасць кіравання з дапамогай мышы, а таксама, часта, і клавіятуры,
• кіраванне з дапамогай сэнсарнага экрана,
• невялікі працоўнай прасторы ў акне браўзэра, з-за маленькага дазволу экрана.

Таму шаблон блога проста неабходна адаптаваць пад экран тэлефона! Гэта дасць прыкметнае паляпшэнне яго адлюстравання ў мабільным браўзэры. Вось так, напрыклад, выглядае мой сайт з тэлефона:

Давайце зараз вызначымся, якім павінен быць дызайн сайта для тэлефона:

• адаптаваным пад невялікае дазвол экрана
• прадугледжваць кіраванне націскам на сэнсарны экран
• дастаткова кантрасным, каб добра адлюстроўваўся на яркім экране тэлефона
• одноколоночным, каб адсутнічала гарызантальная пракрутка
• "Гумовым" - так як мы не можам прадугледзець усе дазволы экранаў

Крок 1. Шлях да мабільнай тэме ў header.php

Па-першае, зрабіце копію файла стыляў вашай тэмы, і назавіце яе style-mob.css.

Вызначаем мабільнае прылада. спосаб 1

Цяпер давайце трохі зменім файл hearder.php. Знайдзіце, дзе падключаецца файл стыляў (звычайна гэта першыя некалькі радкоў кода):

<Link rel = "stylesheet" media = "screen" href = "<? Php bloginfo ( 'template_url');?> /Style.css" />

і заменіце яе на наступнае:

<Link rel = "stylesheet" type = "text / css" media = "screen and (min-width: 641px)" href = "<? Php bloginfo ( 'stylesheet_url');?>" />

<Link rel = "stylesheet" media = "screen and (max-width: 641px)" href = "<? Php bloginfo ( 'template_url');?> /Style-mob.css" />

Мы падзялілі ўсе экраны карыстальнікаў на дзве групы: тыя, якія больш 640 px, і тыя, якія менш. Калі экран больш 640 px, то будзе загружацца звычайны файл стыляў style.css, а калі менш, то style-mob.css.

Калі вы вырашылі выкарыстаць гэты спосаб, то перад радкамі, якія вы толькі што ўставілі, неабходна дадаць спецыяльныя радкі для IE 6-8.

<! - [if IE 6]>

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

<! [Endif] ->

<! - [if IE 7]>

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

<! [Endif] ->

<! - [if IE 8]>

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

<! [Endif] ->

Так-так, тэлефоны падтрымліваюць media = "screen and (max-width: 641px)", а вослік да 9 версіі - няма 😀

Вызначаем мабільнае прылада. спосаб 2

Ёсць другі спосаб. Можна задаць значэнне media = "handheld" для шляху да "мабільным" стылю, і там прапісаць шлях да файла стылю для тэлефона:

<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" />

У гэтым выпадку, калі прагляд здзяйсняецца з кампутара, грузіцца звычайны стыль, а калі з тэлефона, то style-mob.css. Я не правярала, як гэта будзе працаваць.

Крок 2. рэдагуючы style-mob.css

Калі вы выкарыстоўвалі спосаб 1 для ўстаўкі файла стыляў, то проста паменшыце акно браўзэра, каб убачыць, як ваш сайт выглядае з тэлефона! Калі вы выкарыстоўвалі спосаб 2, то часова заменіце яго на спосаб 1, і зрабіце тое ж самае: D. Ну, або праглядзіце сайт непасрэдна з тэлефона. На самай справе, першы спосаб добры ў працэсе распрацоўкі мабільнай тэмы, а другі - ужо калі яна гатовая да выкарыстання.

Цяпер адкрыйце style-mob.css вашым любімым файлавым рэдактарам.

Я зрабіла такія праўкі:

• ўстанавіла шырыню старонкі (body) у 100%, а блока з кантэнтам (page) у 95%, каб зрабіць невялікія поля
• ўключыла "бачнасць" для кнопкі "пошук"
• павялічыла памер шрыфта, пераклала ўсё значэння шрыфтоў у em
• прыбрала float: left для цэнтральнай калонкі, каб шаблон стаў одноколоночным
• і яшчэ некаторыя "касметычныя" праўкі

На самай справе, немагчыма сказаць, што менавіта неабходна памяняць, каб зрабіць шаблон мабільным, усё залежыць ад канкрэтнага выкарыстоўванага шаблону.

Калі паўсталі нейкія пытанні, пішыце, абавязкова адкажу. І падпісвайцеся на RSS , Каб не прапусціць нічога цікавага!