Как сделать мобильную версию шаблона для WordPress

Сегодня я расскажу о том, как без плагинов и скриптов создать мобильную версию шаблона для вашего блога на 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. Найдите, где подключается файл стилей (обычно это первые несколько строк кода):

и замените ее на следующее:

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

Если вы решили использовать этот способ, то перед строками, которые вы только что вставили, необходимо добавить специальные строки для IE 6-8.

Да-да, телефоны поддерживают media=”screen and (max-width: 641px)”, а ослик до 9 версии – нет 😀

Определяем мобильное устройство. Способ 2

Есть второй способ. Можно задать значение media="handheld" для пути к “мобильному” стилю, и там прописать путь к файлу стиля для телефона:

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

Шаг 2. Редактируем style-mob.css

Если вы использовали способ 1 для вставки файла стилей, то просто уменьшите окно браузера, чтобы увидеть, как ваш сайт выглядит с телефона! Если вы использовали способ 2, то временно замените его на способ 1, и сделайте то же самое :D. Ну, или просмотрите сайт непосредственно с телефона. На самом деле, первый способ хорош в процессе разработки мобильной темы, а второй – уже когда она готова к использованию.

Теперь откройте style-mob.css вашим любимым файловым редактором.

Я сделала такие правки:

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

На самом деле, невозможно сказать, что именно необходимо поменять, чтобы сделать шаблон мобильным, все зависит от конкретного используемого шаблона.

Если возникли какие-то вопросы, пишите, обязательно отвечу. И подписывайтесь на RSS, чтобы не пропустить ничего интересного!




51 комментарий к “Как сделать мобильную версию шаблона для WordPress”

  1. УтБ

    никогда не задумывался насчет мобильной версии, но теперь подумаю 😉

    Ответить
    • oriolo

      Я тоже не задумывалась, а потом понадобилось зайти с телефона – оказалось неудобно. Потом посмотрела, что еще около тысячи человек заходит с телефона, решила позаботиться о пользователях, и сделала мобильные версии для всех своих блогов 🙂

      Ответить
    • Dzmitry Roshchyn

      Хорошая статья и способ как альтернатива плагину! У меня три сайта, буду пробовать внедрять мобильную версию.

      Ответить
  2. Илья

    А еще можно поставить плагин wptouch и у мобильных пользователей будет специально заточенная под них версия сайта, которую при желании уже можно допилить под себя.
    Может я не прав, но имхо большинство мобильных пользователей идут на сайт за информацией, а не за красивым дизайном который будет долго грузиться и поедать дорогой мобильный трафик, поэтому в мобильной версии должно быть минимум картинок, скриптов и других подобных наворотов.

    Ответить
    • oriolo

      Наверное, можно использовать и плагин. Но когда я искала способ сделать мобильную версию сайта, что-то, уже не помню что, мне в плагине не понравилось.
      Я подумала, что у многих владельцев телефонов, которые выходят с них в интернет, подключен безлимит (типа “Безлимит с Opera Mini” или “Мобильный интернет” за 90 р. в месяц, от Мегафона, например).
      Хотя, никто не мешает изменить через CSS оформление мобильной версии под свои нужды, убрав тяжелые элементы дизайна ;).

      Ответить
  3. Дмитрий

    Если невозможно сказать, что именно необходимо поменять, чтобы сделать шаблон мобильным, зачем писать об этом статью?:)) А как же разные паки и плагины, и оптимизация под разные устройства, и оптимизация картинок, и т.п.?

    Ответить
    • oriolo

      Дмитрий, способ, о котором я пишу, позволяет использовать одинаковые папки и плагины. В чем-то это его недостаток, но во многом и преимущество. Точно так же делаются мобильные версии многих премиум-тем (тех, которые подстраиваются под разрешение монитора).

      Я просто показала, как можно сделать мобильную версию темы; что именно надо поменять в своей теме, читатель, обладающий небольшими знаниями CSS, сможет разобраться самостоятельно.

      Ответить
  4. Богдан

    Классная статья !

    У вас в первом абзаце слово “если” стоит два раза подряд, исправьте.

    Ответить
  5. Nikita

    Я особо не задумывался, над своим блогом, когда делал dotamovie.ru но сколько не проверял с ios и андроид вроде кроссбраузерно…

    Ответить
    • oriolo

      dotamovie ну о-о-очень долго грузится 🙁 и это при том что у меня выделенный канал 8 мегабит. С телефона бы я не стала ждать.

      Ответить
  6. Евгений

    Спасибо Ира. Как раз делаю редизайн и под мобильные устройства тоже стоит сделать дизайн, мало ли 😉

    Ответить
    • oriolo

      Не за что 🙂 Сделать, я думаю, стоит: времени занимает не много, зато польза для посетителей неоценимая 🙂

      Ответить
  7. Борщягин

    Как оказалось, самым верным решением является одна строчка кода:
    <link rel="stylesheet" media="only screen and (max-width: 640px), only screen and (max-device-width: 640px)" href="/mobile.css” />

    Работает на всех устройствах!

    Ответить
  8. Виталий

    Это что то новое ) не задумывался насчет мобильной версии , есть уже люди которые экспериментировали , какой эфект ?

    Ответить
  9. Как сделать мобильную версию шаблона для WordPress | My univer

    […] https://oriolo.ru/wordpress/kak-sdelat-mobilnuyu-versiyu-shablona-dlya-wordpress/ […]

    Ответить
  10. Obrat

    Как раз решил серьёзно заняться этой темой, создал сайт на ворде с шаблоном weaver ii , автоматически переключающем мобильную – компьютерную версии.

    К сожалению, не всё так просто – нужно еще поменять доктайп на мобильный

    иначе фоновые изображения не будут отображаться в телефоне, просто написать небольшой php скриптик смены доктайпа при различных девайсах

    Ответить
    • Ирина

      О каком мобильном доктайпе Вы говорите? Если только страница не написана на XHTML 1.0, то никакого мобильного доктайпа не существует: http://htmlweb.ru/html/doctype.php

      Ответить
      • Obrat

        Страницы, грамотно написанные (размеры, выравнивания и т.д. только через классы css) на xhtml1-transitional.dtd” соответствуют xhtml-mobile10.dtd”, проверено неоднократно, для смартфонов, айпадов, айфонов пройдёт и компьютерный доктайп, только разные css для каждых, но, дело в том, что основная масса пользователей в рунете на простых телефонах на J2ME с размерами дисплея 240х320, для них и нужен мобильный доктайп, иначе могут не отображаться некоторые фоновые изображения. А вот html5 им нравится, я серьёзно им для мобил не занимался, но впечатление, что менять доктайп на мобильный для страниц на html5 не нужно!

        Ответить
        • Ирина

          Касательно того, что масса пользователей сидит с J2ME телефонов могу сказать, что, если судить по статистике посещений двух моих сайтов (этот блог и сайт женской тематики, суммарная посещаемость около 1000 уников в сутки), процент таких пользователей очень невелик и постоянно уменьшается: на этом сайте их 1,2% (от всех посетителей за последний месяц), на втором сайте – 2,9%, что в сумме равно около 300 посетителей в месяц на обоих сайтах. Процент (в месяц) посетителей с размером дисплея 240х320 и меньше равен 1,4%.
          Поэтому, я думаю, для такого небольшого числа посетителей не стоит создавать отдельный стиль страницы.

          Ответить
          • Obrat

            Цифры правильные, а вот вывод должен быть прямо противоположный – их мало, потому что не создан отдельный стиль страницы! Тяжело им юзать неприспособленные вебсайты! А убрать всё лишнее, количество может подняться до 10% (вместе со смартфонами ). По крайней мере, такие цифры называют вебмастера сайтов, оптимизированных под мобильный трафик .

            Ответить
            • Ирина

              Их мало, процент продолжает снижаться каждый месяц. Большинство людей использует для серфинга в интернете смартфоны и планшеты, но никак не java-телефоны.

              Ответить
            • Ирина

              И еще, все зависит от ниши сайта. Если сайт посвящен играм или программам для телефонов, то это имеет смысл. А если на сайте много изображений (как на моем втором сайте), или примеры кода приводятся, с телефона никто это смотреть не будет.
              Весь мобильный трафик у меня составляет 10-15%, цифры в комментарии выше касались именно j2me, т.е. не-смартфонов.

              Ответить
  11. Дмитрий

    Здравствуйте Ирина!
    Хотел поблагодарить за полезную статью. Сделал 2 новых CSS файла по Вашим рекомендациям (способ 1) для экранов до 360px и до 1030 px, кроме основного CSS для широкоформатных экранов. Все работает прекрасно. Проверил даже не только изменяя размер окна браузера, но и на специальных мобильных эмуляторах. При изменении ширины экрана в указанных границах, сайт сам меняет стиль и все становиться как необходимо. Очень классно!!! Самое главное без плагинов. Легко и без нагрузок трафиком.Потратил почти целый день на редактирование CSS, но результат отменный. Блоки, которые не нужно показывать в мобильных версиях и наоборот, которые неуместны в основной версии сайта скрыл при помощи {display:none;}. плагины может быть и хорошо, но они предлагают свои стили оформления, что мне не подходило. Долго любовался на результат со своего смартфона. Всем рекомендую, теперь мой сайт не будет терять посетителей с мобильными устройствами. Еще раз спасибо и поклон. Дмитрий.

    Ответить
  12. Даниил

    2Obrat Забудьте уже про J2ME-телефоны, как про страшный сон. Эра смартфонов уже давно наступила и ради 3 человек оптимизировать сайт смысла нет!
    Предлагаю такой вариант определителя:

    Ответить
  13. Даниил

    Что-то не получилось вставить код:-(

    Ещё есть вариант жёсткого перенаправления через htaccess:
    RewriteCond %{HTTP_USER_AGENT} (?i:midp|samsung|iphone|android)
    RewriteRule ^(/)?$ http://m.domain.com/ [R=301]
    Для высоконагруженных проектов мобильную версию сайта лучше на отдельном движке запустить, как мне кажется.

    Ответить
  14. Максим

    Ирина, здравствуйте!
    Опробовал ваш метод сделать более привлекательный сайт для мобильных устройств, кажется, он работает. По крайней мере, сужу по признакам, что мне удалось сделать со своей темой сайта, но возникли некоторые сложности связанные с файлом стилей. Проверял ваш сайт на своем телефоне – все работает, вот мой сайт не хочет. Вы не могли бы привести как пример фрагмент вашего файла style-mob.css, а именно то место, где указывается стили для body, container для ваших публикаций. Заранее спасибо за помощь!

    Ответить
  15. Макстм

    Спасибо большое! Теперь есть от чего отталкиваться. Буду пытаться сделать мобильную версию сайта
    🙂

    Ответить
  16. taras

    Буду сейчас пробовать так сделать, но на макси сайт cms. Хочу спросить, а если смартфоны с разрешениям HD ил FULHD -1080 на 1920 будут как мобильные определяться ?

    Ответить
    • Ирина

      Тарас, если указать media=”handheld”, то должны определяться как мобильные устройства. Если просто через разрешение экрана – то нет. И еще это может зависеть от настроек самого смартфона.

      Ответить
  17. Оля

    Здравствуйте! Подскажите пожалуйста, есть ли вариант чтобы и комментарии от ВКонтакте вместе с темой изменяли размер под телефон. У меня тема адаптированная под мобильные телефоны, поставила такие комменты, а они далеко выходят за пределы ширины.

    Ответить
    • Ирина

      Здравствуйте. Попробуйте для этих комментариев выставить width: 100%, это нужно сделать где-то в том коде, который дает контакт для вставки комментариев. Я с этими комментариями не работала, поэтому большего подсказать не смогу.

      Ответить
  18. Ульяна

    Простите, Вы не подскажете, как сделать, чтобы для мобильных посетителей загружалась другая тема оформления, а не только файл стилей? Спасибо.

    Ответить
    • Ирина

      Попробуйте воспользоваться плагином, например, WP Touch, есть и другие, но сейчас вспомнить не могу. Он создает отдельную тему для мобильных браузеров.

      Ответить
  19. Михаил

    А как сделать, чтоб для мобильных устройств отображалась иная страница?
    на ноутах – одна страница со всеми картинками, эффектами и прочим
    на смартфоне другая – без излишеств, без паралакс эффектов, без огромных фоновых изображений

    Ответить
  20. Алексей

    А есть возможность избавиться от мобильной версии сайта на wordpress, чтобы отображение было идентичное пк, как отображаются сайты на joomla. А то адаптивные шаблоны да и обычные превращают сайт на мобильном в непонятную кашу с ужасной навигацией. И нет шаблонов, которые сохраняют версию пк((

    Ответить
    • Ирина

      Алексей, это зависит не от CMS, а от темы оформления сайта. Обычно, это все можно отключить через CSS, нужно либо отключить отдельные стили для мобильных устройств, либо закмментировать их.

      Ответить
  21. Юрий

    Добрый день! Подскажите пожалуйста, как убрать картинки с шапки (header.php) для мобильной версии сайта. Спасибо!

    Ответить
  22. Александр

    Возметесь сделать сайт для телефона первым способом. Плагины не подходят. Отпишите на почту

    Ответить
  23. Вера

    Здравствуйте,Ирина!Мой сайт не оптимизирован под мобильные устройства,пытаюсь это исправить с помощью Вашей статьи (хотя в кодах ничего не понимаю). В файле header php у меня вот такой код <link href="” rel=”stylesheet” type=”text/css” />
    Помогите,пожалуйста, изменить на Способ 1

    Ответить
  24. Владимир

    А как сделать так что-бы менялся не только css но и файлы шаблона

    Ответить
  25. Артур

    Шаг 2. Можно по подробнее.

    Ответить
  26. Максим

    Ирина, сейчас всерьез решил подойти к мобильной версии сайта. Первый раз начал дорабатывать ваш сайт стилей, но нехватка времени и другие дела не позволили закончить начатое. Гугл прижал с мобильным видом сайта, так теперь попытка №2 🙂

    Хотел бы спросить, вот со стилями понятно, можно под себя все перенастроить, а что делать, например, с сайдбаром, как его сместить вниз в один столбик под комментарии? Как картинкам в статье при помощи стилей задать например уменьшение на 50%? Как скрыть блоки, которые в мобильной версии не хотелось бы отображать? Наверняка одной лишь правкой файла стилей не обойтись…

    Я так понимаю, что мобильная версия должна быть максимально упрощенная.
    Мне нравится ваша реализация мобильной версии, хотелось бы сделать и у себя нечто подобное. Как считаете ваш метод реализации актуален на сегодняшний день или лучше присмотреться к другим “бесплагинным ” методам?

    Буду очень признателен, если уделите моему комментарию к статье внимание и ответите на вопросы, которые задал в нем. Из всех мной пересмотренных методах реализации ваш способ самый доступный для понимания и реализации. Заранее благодарю за помощь!

    Ответить
  27. Леонид

    Ирина, добрый день.
    При просмотре сайта http://rotaryartclub.com на смартфонах флаги языков и названия языков налезают друг на друга, посоветуйте что можно сделать?

    Ответить
  28. Саня

    Добрый день. Спасибо. Будем пробовать.

    Ответить
  29. Виктор

    Применил,иии???? Никаких изменений.

    Ответить
  30. Ivan

    Буду сейчас пробовать так сделать, но на макси сайт cms. Хочу спросить, а если смартфоны с разрешениям HD ил FULHD -1080 на 1920 будут как мобильные определяться ?

    Ответить
  31. Виктория

    Здравствуйте! Подскажите, пожалуйста, где именно можно отредактировать мобильную версию в адаптивном шаблоне. У меня тема Unite. Мобильная версия в целом выглядит хорошо, только беспокоят 2 момента:
    1) не работает часть ссылок (ссылки из виджетов и меню работают, а открыть какую либо статью с телефона нельзя или просмотреть товар),
    2) страница Контакты после загрузки Яндекс-карты переезжает вправо и даже ползунка нет, чтобы сдвинуть обратно.
    Буду очень благодарна, если хотя бы подскажите, в каких направлениях действовать. Перечитала много форумов, задавала вопросы, везде молчание((

    Ответить

Оставить комментарий