Як зробити мобільну версію шаблону для 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 , Щоб не пропустити нічого цікавого!