Урок 102. Как сделать мобильную версию сайта WordPress – плагин Wptouch. Как сделать мобильную версию сайта wordpress


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

<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, чтобы не пропустить ничего интересного!

oriolo.ru

8 плагинов для адаптации сайта под мобильные устройства

Если вы вдруг не в курсе, мобильные гаджеты сегодня составляют основу потребления интернет-трафика в целом ряде стран и регионов, а такие инструменты как iMessage и WhatsApp перерабатывают тонны писем и сообщений не на бумаге, а на экране. Все чаще люди обращаются к мобильным сайтам, а не к их настольным версиям. Как же сделать так, чтобы ваш сайт корректно выглядел и работал не только на экране ноутбука или ПК, но и на смартфоне и планшете? Плагины, о которых мы сегодня расскажем, точно вам помогут справиться с этой задачей.

Смотрите также:

Итак, вам надо превратить свой обычный сайт на движке WordPress в сайт с адаптивной мобильной версткой. Вот плагины, которые, будучи совершенно бесплатными, помогут вам и сделают сайт доступным для мобильных пользователей и при этом сохранят его дизайн и структуру.

Начнем с самого простого и, пожалуй, самого эффективного способа сделать сайт на WordPress дружественным для мобильных устройств. Набор инструментов JetPack позволяет решить эту задачу нажатием всего 1 кнопки. Более того: он наверняка уже у вас установлен в числе других базовых плагинов. Если да – то просто кликните по ссылке "JetPack" в меню администратора сайта и перейдите на страницу модулей. Там надо активировать "Mobile Theme" — и всё готово.

2. WPtouch

Следующий по своей эффективности в списке бесплатных инструментов — плагин WPtouch. Его скачали уже более 4,3 млн раз. Он позволяет сделать красивый и быстрый мобильный сайт буквально за пару минут, при этом не написав ни строчки кода. Платная версия под названием WPtouch Pro предлагает еще отдельную админ-панель и поддержку в системе тикетов.

3. WP Mobile Detector[link]

[link]

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

Основные возможности:

  • Автоматическое определение устройства на основе базы из более чем 5 тыс различных мобильников и смартфонов.
  • Умение отличать стандартные "звонилки" и продвинутые мобильные гаджеты.
  • Сбор статистики по мобильным пользователям, включая число уникальных посещений, поисковый трафик и т.д.

4. WordPress Mobile Pack

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

Также плагин включает:

  • переключатель между мобильной и классической настольной темой;
  • набор поддерживаемых и распознаваемых устройств, включая темы для Nokia и браузеров на WebKit;
  • настройку цветовой палитры по темам с поддержкой твиков в CSS;
  • автоматическую адаптацию картинок и разбиение постов и страниц;
  • мобильную панель администратора;
  • виджет мобильной рекламы, поддерживающий такие платформы как AdMob или Google’s Mobile Adsense;
  • мобильную аналитику;
  • виджет для добавления бар-кодов на сайт, чтобы быстро добавлять сайт в закладки на мобильном устройстве при просмотре сайта на большом экране настольного ПК.

5. WP Mobile Edition

По сути перед вами — брат-близнец предыдущего плагина. У него есть все те же фишки и опции, но есть еще поддержка системы комментирования Disqus и мобильная карта XML с собственным генератором для сайтов, что хорошо скажется на поисковой оптимизации. Также этот плагин создает мобильную версию на поддомене вида m.facebook.com, что хорошо для ускоренного кэширования и реализации поддержки мобильных cookie.

6. Wapple Architect Mobile Plugin

Написан этот плагин на языке разметки WAPL, который был специально разработан для настройки, рендеринга и доставки веб-контента на различных устройствах и платформах. Использует этот плагин собственный API для каждого конкретного пользовательского устройства, что лучше, чем метод сниффинга. Не затрагивает структуру адресов настольного сайта. Довольно простое решение, которое так же просто работает.

7. MobilePress

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

8. Duda Mobile Website Builder

Плагин-конструктор Duda Mobile помог создать мобильные версии сайтов в том числе для таких проектов и изданий как Forbes, Huffington Post, NY Times. Он очень простой и быстро превращает ваш обычный сайт в мобильный. Работает со всеми темами оформления для движка WordPress и автоматически синхронизируется с вашим основным сайтом.

Источник: WPLift.com

hostenko.com

Как сделать мобильную версию сайта Wordpress

Плагин Wptouch - мобильный блог за 10 минутБодрого времени суток, друзья! В сегодняшнем уроке, Вы узнаете, как сделать мобильную версию сайта на WordPress под  телефоны и планшеты, т. е. сделать мобильный блог. Для этого не нужно создавать отдельный блог, а достаточно установить плагин Wptouch, который все и сделаетНа данный момент Ваш блог удобно просматривать и читать только через компьютер. Если же на Ваш блог зайти через мобильный телефон, то читать его будет неудобно. Из-за этого люди часто покидают блог.

Через мобильные телефоны заходит немалый процент людей, и вот почему: мобильный телефон Вы носите с собой всегда, но не ноутбук; в дороге Вы, или в очереди к врачу, Вы всегда можете воспользоваться мобильным телефоном для выхода в Интернет. Это относится и к разного рода планшетам.

Проверьте, оптимизирован ли Ваш блог под мобильные устройства по этой ссылке. В строку впишите адрес Вашего сайта и нажмите "Enter". Вы увидите отчет о Вашем сайте, а если страницу чуть проскролить вниз, можно увидеть, как сайт выглядит на мобильном телефоне.

Если разбираетесь в Google Analytics, то можете посмотреть, сколько людей заходит на блог через мобильные устройства. Если у Вас еще молодой блог и у него маленькая посещаемость, то можете не смотреть статистику, но у кого уже нормальная посещаемость, то, скорее всего он знает, что через мобильники заходит на блог много людей.

Мой блог посещает около 600 человек за сутки, поэтому не так и много его посетило и через мобильные устройства. А если бы у блога была посещаемость 1000 уникальных посетителей? А если 2000? Я не мало бы терял трафика! Можете сделать вывод.

Мобильную версию блога сделать достаточно быстро и просто, поэтому не стоит откладывать на потом, а тем более вообще отказаться от мобильной версии. Посмотрите видео, как сделать мобильную версию сайта WordPress. При просмотре видео, установите качество 480 или 720.

 

  • Чтобы купить PRO версию плагина, надо щелкнуть по ссылке "Get WPtouch Pro" вверху страницы.
  • Google Adsense ID, Вы можете получить в своем аккаунте. Там же Вы можете узнать свой Google Adsense Channel________________________________К уроку 103. Что такое Твитер (Twitter)?

dvpress.ru

Как сделать мобильную версию сайта? Пара WP плагинов для Вас!

как сделать мобильную версию сайтакак сделать мобильную версию сайта

Здравствуйте, уважаемые друзья и гости блога Pribylwm.ru! Сегодня я Вам расскажу и покажу как сделать мобильную версию сайта на WordPress движке всего за пять минут. Если не верите, то это Ваше дело. Но я Вам со всей ответственностью заявляю и обещаю, что Вы точно узнаете как создать мобильную версию сайта и сделаете это сейчас и самостоятельно при помощи данного материала! Ну, что? Поехали ...

Для чего нужна мобильная версия сайта?

Зачем нужна мобильная версия сайта? Это наверное и объяснять уже не нужно! Все практически уже понимают и знают, что мобильная версия сайта нужна для того, чтобы ваш ресурс адекватно отображался на всех устройствах и его смогли увидеть все, кто зашел на него с планшета, смартфона, мобильного телефона, ноутбука и т.д.

Все это позволит вашему сайту или блогу быть на высоте и пользоваться популярностью в отличии от тех ресурсов, где нет мобильных страниц. Следовательно и поисковые системы будут любить Ваш сайт и чаще его посещать для индексации. Ну, а если он будет чаще индексироваться поисковыми системами, то и в поисковой выдаче он будет намного выше, чем остальные сайты, не имеющие мобильной версии.

Надеюсь, что ход моих мыслей понятен для всех? И я смог Вас убедить, что мобильная версия для сайта просто необходима на данный момент времени его существования в интернете? Если убедил, тогда идем дальше и рассмотрим уже наиболее важные вещи, которые нас с Вами приблизят к тому, чтобы узнать, как сделать мобильную версию сайта на WordPress движке.

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

Да, можно воспользоваться проверкой своего ресурса в таком популярном инструменте, как Проверка скорости загрузки сайта Google - PageSpeed Insights

И сделав там анализ своего сайта или блога успокоиться увидев, что Ваш ресурс отлично отображается на мобильных устройствах и имеет замечательную скорость загрузки. Но это еще не значит, что Ваш сайт имеет мобильную версию, то есть страницы AMP для Google и Турбо-страницы для Яндекса!

Чтобы Ваш сайт был полностью адаптирован для мобильных устройств, имел еще большую скорость загрузки, адекватно отображался на всех мобильных устройствах и имел специальные AMP страницы для Google и Турбо-страницы для Яндекса — Нужно обязательно сделать установку и настройку специальных плагинов WordPress для этого!

Специальные плагины для сайта делают его мобильную версию за пять минут!

Посмотрите для начала, что я Вам предлагаю! Чтобы не быть голословным и убедить Вас в том, что я Вас не обманываю, предлагаю взглянуть на мой блог в мобильных версиях как для Google, так и для Яндекса:

Теперь давайте продолжим ...

Как сделать мобильную версию сайта для Google и Яндекса? Узнаем сейчас!

amp страницы googleamp страницы google

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

  • Для Google — это плагин AMP for WP – Accelerated Mobile Pages
  • Для Яндекс — это плагин Yandex.News Feed by Teplitsa

Теперь давайте рассмотрим каждый плагин для WP по созданию мобильной версии сайта в отдельности и узнаем как сделать мобильную версию сайта с помощью этих удивительных инструментов. Вы увидите сами, что этот процесс не займет у Вас много времени и не потребует от Вас каких либо навыков. С созданием мобильной версии сайта при помощи данных плагинов WordPress, разберется и справится даже новичок! Посмотрите сами ...

Создаем мобильную версию сайта WordPress для Google!

Для этого используем WP плагин AMP for WP – Accelerated Mobile Pages

Можете его скачать с официального сайта WordPress, по ссылке выше или просто-напросто введите его название в своем поиске для новых плагинов на движке в админпанели вордпресс.

как создать мобильную версию сайтакак создать мобильную версию сайта

Установка и настройка плагина по созданию мобильной версии сайта для Google очень проста!

  • Сначала Вам нужно нажать на кнопку «Установить» плагин, а затем «Активировать» его этой же кнопкой, которая появиться чуть позже после его установки. Все, плагин WP  установлен у Вас на сайте, активен и готов к его настройке!
  • Чтобы настроить данный плагин Вам нужно просто «Запустить мастер установки» и следовать предлагаемым пошаговым действиям. Здесь ничего сложного нет! Нажимайте на кнопки и вставляйте свои данные, которые будут у Вас спрашивать. Если трудности с переводом, тогда воспользуйтесь переводчиком в своем браузере, всего лишь!

как сделать мобильную версию сайта wordpressкак сделать мобильную версию сайта wordpress

После того, как Вы справитесь с мастером установки данного плагина, Вам нужно будет перейти в его «Генеральные настройки» и здесь уже настроить вашу мобильную версию сайта, чтобы получить красивые AMP страницы:

amp страницыamp страницы

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

Теперь давайте посмотрим, что можно сделать для мобильных страниц для Яндекса ...

Специальный плагин для создания Турбо-страниц в Яндекс!

Вот данный плагин - Yandex.News Feed by Teplitsa

Чтобы его получить, Вы можете или скачать его с официального сайта Вордпресс, ссылка находится выше по тексту или сделайте как с предыдущим плагином ... Вставьте его название в поиск для новых плагинов в админке Вордпресс и все появится!

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

Да! Вспомнил! Я же уже рассказывал про данный плагин и Вы сможете все узнать вот на этой странице моего блога — Как создать Турбо-страницы своего сайта для Яндекса?

Там все подробно описано и Вы сможете при помощи этого плагина создать на своем сайте специальный RSS канал, который будет отправлять ваши посты на Яндекс Вебмастер, а он уже будет создавать мобильные страницы, которые называются турбо-страницы. Эти турбо-страницы будут являться мобильной версией Вашего ресурса для поисковика Яндекс!

Теперь Вы знаете как сделать мобильную версию сайта на WordPress движке и это замечательно!

А я прощаюсь не надолго! Всем удачи и благополучия в новом 2018 году! До новых встреч!

Рейтинг пользователя: 5( 2 голоса)

pribylwm.ru

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

 

Начиная с 21 апреля 2015  Google в очередной раз закрутил гайки в механизме ранжирования своей поисковой выдачи.

Так, с ежедневным ростом количества обладателей мобильных телефонов, повышается и необходимость отзывчивого (адаптивного) дизайна. И сегодня мы поговорим о том, как же его можно применить для сайтов WordPress.

Что представляет собой адаптивный дизайн?

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

Благодаря такой адаптивности исчезает потребность увеличивать страницу на маленьком экране мобильного телефона и передвигать ее пальцем влево-вправо, чтоб прочесть информацию мелким шрифтом.

Примеры адаптивного дизайна

 

Тема Divi 2.0

 Не нужно далеко ходить. И на WordPress есть отличный пример качественного отзывчивого дизайна – тема Divi 2.0. Просто откройте эту тему на мобильном устройстве. Она сразу же приобретет ширину экрана и компактно отобразить все элементы дизайна в читабельном виде. А вот как поведет себя тема, если вы будете изменять размеры окна браузера на своем компьютере:

От ширины экрана зависит местоположение многих элементов, вы буквально видите, как изменяются налету CSS-стили сайта. Чтоб было более понятно, тут применяются breakpoint-ы на разных этапах уменьшения размера. Это контрольные точки, по мере достижения которых в стилях оформления страницы происходят изменения.

Эти изменения условно называются CSS media query – это заявление в таблице стилей, которое используется для вызова других заявлений и основано на размере экрана того устройства, под которое создается адаптивный дизайн.

Чем меньше его ширина, тем больше сайт оптимизирован под мобильные устройства типа iPhone или Android.

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

Сайт <noindex>Time.com </noindex>

Для Time.com использован такой же подход, благодаря чему дизайн отображается отзывчиво как на планшете, так и на экране мобильного телефона.

Как можно расширять свои знания об адаптивном дизайне?

Тестирование ранее посещаемых сайтов

Если тестировать все посещаемые сайты на разных устройствах, то через некоторое время это войдет в привычку. Некоторые сайты абсолютно по-разному выводятся на экран на разных устройствах. Например, Google использует абсолютно отличающиеся таблицы стилей в зависимости от ширины экрана устройства. Такой метод требует дополнительного кода CSS помимо стандартного CSS, и применяется еще и на таких крупных сайтах, как Google, Amazon, Yahoo.

Другие методы

Также в самообразовании в сфере отзывчивого дизайна поможет:

  • Чтение тематических блогов и руководств
  • Прохождение курсов
  • Посещение воркшопов
  • Пополнение знаний о CSS3 и использовании Media Queries
  • Самостоятельное внедрение знаний на практике
  • Создание, пусть и простого, сайта с помощью основ HTML и CSS для понимания принципа их работы.

Как сделать сайт на WordPress отзывчивым?

Ну вот, самая интересная часть поста. Для создания адаптивной версии сайта на WordPress необходимо использовать CSS3 Media queries, о которых сегодня уже упоминалось.

Стандартное media-query-заявление выглядит таким образом:

@media (max-width: 700px) {

    .container {

        width: 100%;

        margin: 0 auto;

    }

}

С помощью правила @media для веб-сайта можно создать разные шаблоны под различные виды экранов, версию для печати, мобильного телефона или же планшета. Можно использовать сразу же несколько видов и определить любую нужную ширину, использовав media query.

В коде есть элемент @media с ограничением (max-width: 700px) и это значит, что если разрешение экрана или окно браузера достигает 700 пикселей или меньше, то применяются параметры, указанные в скобках.

Лучше конечно использовать эти правила @media без фанатизма и по-меньше.

Пример

Для демо версии будут использованы основы HTML и CSS, чтоб показать на примере, как создаются правила адаптивного дизайна внутри кода. Этот же метод используется и для сайта на WordPress. Нужно только применить стили в файле style.css, чтобы изменить дизайн сайта.

Код HTML

<!DOCTYPE html>

    <head>

        <meta charset="utf-8">

        <title>Elegant Themes Responsive Web Design - Demo</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

                <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body>

        <div>

        <h2>Responsive Web Design</h2>

            <ul>

                <li><a href="#">Sample Link 1</a></li>

                <li><a href="#">Sample Link 2</a></li>

                <li><a href="#">Sample Link 3</a></li>

                <li><a href="#">Sample Link 4</a></li>

                <li><a href="#">Sample Link 5</a></li>

            </ul>

        </div>

    </body>

</html>

Выше приведен пример стандартного кода. Мета-тег viewport используется для того, чтобы заявить браузеру о выведении кода в соответствии с шириной экрана девайса. Часть кода div содержит ссылки.

Вот как отображается страница в Chrome:

Конечно же, мы не можем оставить ее в таком виде, и используем CSS.

Код CSS

body {

    background: PowderBlue;

    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;

    font-size: 16px;

}

.container {

    width: 1000px;

    margin: 0 auto;

    padding: 20px;

    background: white;

}

.container h2 {

    text-align: center;

}

.container ul {

    list-style-type: none;

}

.container ul li {

    display: inline-block;

    padding: 10px 20px;

}

.container ul li a {

    display:block;

    padding: 20px;

    background: Tomato;

    border-radius: 4px;

    color: black;

    text-decoration: none;

}

.container ul li a:hover {

    background: black;

    color: white;

}

После применения стиля страница выглядит уже вот так:

А теперь попытаемся представить, как этот дизайн будет выглядеть на экране мобильного устройства. Скорее всего, ссылки не будут отображаться в один ряд на маленьком разрешении экрана.

Что же тогда делать?

Необходимо использовать media query, что поможет подстроить страницу под изменения в CSS. Для этого нужно добавить нижеуказанный код CSS в низ файла style.css.

@media (max-width: 970px) {

.container {

    width: 100%;

    margin: 0 auto;

    padding:20px 0;

}

.container ul {

    padding:10px;

}

.container ul li {

    display:block;

    padding:10px 0;

}

}

Теперь, когда код добавлен, можно изменить размер окна браузера, чтобы увидеть эффект адаптивности:

Отлично! Можно настроить еще несколько элементов, как только браузер приобретет минимальную ширину. А использование media query поможет улучшить результат. Добавьте эту часть внизу файла style.css:

@media (max-width: 480px) {

    .container h2 {

        font-size: 22px;

    }

}

Понемногу дизайн приблизился к желаемому конечному виду. Правда уже лучше?

Теперь адаптивный дизайн полностью готов. Этот принцип можно использовать для любого сайта, независимо от CMS.

Обработка изображений

Пожалуй, вопрос изображений для адаптивного дизайна является одной из наиболее актуальных тем для дискуссий в среде веб-сообществ. Некоторые прибегают к использованию CSS, а другие используют изображения тех размеров, которые соответствуют ширине используемого экрана.

Но общее решение состоит в том, чтобы задавать изображениям максимальную ширину – 100%. А именно вот так:

1

2

3

img {

  max-width:100%;

}

Вот как отображается графика на сайте после применения этого решения:

Читабельность

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

Юзабилити

Немаловажно обеспечить пользователей простой навигацией по сайту. Они должны легко и быстро найти ту информацию, которую ищут, а не разбираться в сложном меню.

Темы

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

Заключение

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

itc-life.ru

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

Янв 27

размещено в: 3.Плагины.

mobile_version

Всем привет! Сегодня я подготовил для Вас небольшую статью о том, как сделать мобильную версию своего блога на WordPress. Заинтересовался я этим в то время, когда ждал результатов конкурса "7 советов", который проходил на блоге Владимира Карпеева. Вот моя конкурсная работа. Просто я часто заходил с телефона на его блог и постоянно видел мобильную версию. Вот тогда то я и подумал, а почему бы мне не сделать тоже самое? Но постоянно откладывал этот вопрос на дальнюю полку, а вот сейчас все-таки решился отыскать нужный плагин и я его нашел. Называется он WPtouch/. По сути данный плагин представляет собой шаблон, заточенный под вывод на мобильных устройствах, который активируется только при просмотре с экрана телефона (при этом, каждый посетитель может при желании отключить мобильную версию сайта). Итак, скачиваем плагин с его домашней страницы и устанавливаем, для этого:
  • 1. Распаковываем архив.
  • 2. Копируем папку wptouch в /wp-content/plugins/.
  • 3. Заходим в админку блога во вкладку "Плагины" и активируем WPtouch.
Все, мобильная версия блога уже работает и будет выводиться при просмотре с любого мобильного устройства. В настройках плагина менять ничего не нужно, так как он вполне прилично настроен по умолчанию. Теперь Ваш сайт на мобильных устройствах будет выглядеть гораздо лучше оригинала и значительно меньшее количество трафика теперь будут тратить Ваши пользователи.

screenshot-1

Это на самом деле очень удобная штука. Ну ведь правда, не всегда под рукой компьютер или ноутбук, а так зашел человек с телефона и без проблем может почитать Ваши статьи, ему не придется полчаса ждать пока прогрузится страница или после загрузки пользоваться зумом. Пользоваться этой функцией или нет, решать Вам, а я свой выбор уже сделал и ни капли не жалею :-).

Заключение

На этом сегодняшний пост подошел к концу, оставляйте свое мнение об этом плагине в комментариях. Кстати, мы долго думали и не могли решить, как нам выводить миниатюры к записям, мы перепробовали разные размеры 150х150, 200х200, просто делали их 200 по ширине, но все равно это было не то. Мы приняли решение выводить миниатюры к записям вот в таком виде, как в этой статье, думаю это самый оптимальный вариант. Сначала хотели сделать это просто в виде демотиваторов, но такой вариант используется на многих блогах, поэтому я немного поработал с фотошопом и вот что получилось в итоге. Надеюсь теперь наш блог будет выглядеть красивее :-). Ну а напоследок уже по сложившейся традиции видео:

С Уважением, Александр Сидоренко!

webexpertu.ru

Делаем мобильную версию сайта на WordPress › Блог Интернет Технологий

Актуальность создания мобильной версии сайта просто колоссальна. Это объяснимо по многим причинам, я приведу некоторые из них:

Делаем мобильную версию сайта на WordPress

  • Мобильный интернет серфинг растет в 8 раз быстрее, чем компьютерный на основе использования WEB;
  • 70% населения планеты имеет мобильный аппарат;
  • В 2010 году абонентов мобильной связи превысило 5 миллиардов;
  • У 85% детей есть собственный телефон, в то время как только у 73% есть книги в домашних условиях;
  • Android растет в размере 886% — 160 000 телефонов Android активизируются ежедневно;
  • 1000000 смартфонов активизируются каждую неделю;
  • Google сообщает, что объем мобильного поиска составляет до 130% по сравнению с аналогичным года;
  • К 2014 году он предсказал, что использование мобильного интернета обгонит настольный использования Интернета.

На собственном примере я бы хотел поделиться с Вами опытом, как сделать собственную мобильную версию сайта на CMS WordPress.Отдыхая летом на море, у меня не было под рукой ноутбука и просматривать дела в интернете пришлось через мобильный телефон. После того, как я его удачно утопил, мне пришлось пользоваться не столь хорошим мобильным телефоном (SE K750i) у которого не такой большой и удобный экран, на котором отлично отображаются сайты. Я просто был в приятном удивлении, когда у того или иного сайта присутствует мобильная версия, которая загружается автоматически, когда удачно проходит идентификация мобильного устройства и сайт «понимает», что Вы зашли с помощью мобильного телефона и мобильную версию сайта Вам куда лучше просмотреть нежели традиционную.

Делаем мобильную версию сайта на WordPress

Сегодня я расскажу как на WordPress CMS сделать мобильную версию сайта: какие плагины и некоторые настройки, которые будут полезны при редактировании внешнего вида мобильной версии.

Существует около 10-15 различных плагинов, которые предоставляют возможность сделать версию сайта для мобильных устройств и ныне популярных планшетов. Попробовав каждый из плагинов я остановился на плагине — WordPress Mobile Pack.

WordPress Mobile Pack — это полный набор инструментов с помощью которых Вы легко сделаете мобильную версию сайта. Пакет включает в себя: мобильный переключатель, мобильные виджеты, и содержание адаптации для мобильных характеристик устройства. Сайт отлично работает во всех популярных мобильных ОС (iOS, Android, Palm). Так же, в WP Mobile Pack существует внутренняя статистика по мобильным устройствам (в Инструменты-Mobile Analytics), однако для более точной статистики советую зарегистрироваться и повесить (на мобильную версию) счетчик WapLog.

Итак, загружаем плагин себе на сайт.

Устанавливаем плагин для мобильной версии сайта

Вообщем то мобильная версия сайта уже будет работать! Как проверить? — спросите Вы. Качаем Opera Mobile Emulator — эмулятор браузеров различным мобильных телефонов и планшетов. Около 35 мобелей мобильных телефонов, планшетов и КПК будут в вашем распоряжении через одну программу :)

Вводим в адресную строку адрес блог и вуаля — мобильная версия сайта готова :)

Мобильная версия сайта готова!

Как мы видим через телефон блог стал смотрется куда более компактно и читабельно. Давайте теперь как следует настроем отображение мобильной версии нашего сайта.

Заходим в Дизайн — Mobile Switcher

Напротив Mobile theme выбираем тему которая вам больше по душе. Остальные настройки я оставил по умолчанию, потому что они меня целиком и полностью удовлетворяют. Хоть плагин и не имеет русифицированную версию — вы методом тыка сможете все настроить, что необходимо.

Мобильные версии шаблонов сайта лежат в wp-content/themes, если вы используете WP Super Cache то вам необходимо обновить правило для модуля mod_rewrite. Для этого просто зайдите на страницу плагина на нажмите на соответствующую кнопку.

Это необходимо для того, чтобы в обновился файл htaccess которые и будет перенаправлять мобильных посетителей на мобильную версию :)

Отредактируйте файлы шаблона по своему усмотрению, так же после активации в footer'e сайта появится «переключалка» между обычной и мобильной версией сайта, которую вы так же с помощью не сложный преобразований сможете вынести в любое удобное Вам место. Мобильную версию сайта так же можно вынести на поддомен, это делается и настраивается в графе Mobile Switcher.

Поставив WapLog счетчик и отписав в Support Яндекса с вопрос все ли сделано без проблем и ошибок, они дали положительный вариант моей мобильной версии сайта!

С Уважением, VanoID С уважением, Vasilenko Ivan!

bitby.net