Беспроводной интернет и соответствующие мобильные устройства, позволяющие выходить в сеть с любого места развиты достаточно хорошо и используются довольно обширно. Такое положение вещей все чаще приводит к тому, что владельцы сайтов дорабатывают свои детища до мобильных версий. Обращаясь к статистике мобильного интернета - 11% в России, 16% в США. Разумеется это общие числа, но так или иначе на ваш блог или сайт наверняка, заходят с мобильных устройств и терять таких пользователей не есть хорошо.

Для WordPress уже существуют плагины, которые показывают мобильную версию блога, если пользователь зашел с какого-нибудь iPhone.

Несколько плагинов, создающие мобильный шаблон блога

• - очень не плохой плагин. Простой, функциональный ничего лишнего, только то что нужно. Работает как под PDA (КПК), так и под Смартфоны, хорошо их определяет (Opera Mobile определил как мобильное устройство). Настроек минимум: можно изменить заголовки блога и указать отдельный шаблон для iPhone.
• - самосвал, к которому стоит присмотреться. Позволяет настроить внешний вид отображения блога. Изменить количество выводимых постов, цветовую схему, можно включить или отключить некоторые доступные виджеты. И еще ряд настроек. Есть статистика. Плохо, что нет локализации на русский. Хороший детектор мобильных устройств (увидел Opera Mobile). Особенность: Копирует темы под мобильные устройства в каталог тем WordPress - мне такое поведение показалось немного странным.
• - очень простой плагин и в то же время выполняющий свою функцию. Рассчитан под PDA (КПК) и Смартфоны (iPhone): отдельный шаблон для каждого типа устройства. Плагин довольно простой, без лишних наворотов. Из настроек , можно только расширить типы устройств (USER_AGENT), для которых будет показываться мобильный шаблон.
  Проверка мобильных устройств не полная: Opera Mobile не определил как мобильное устройство.
• - ничем не приглянулся. Opera Mobile определить как мобильное устройство не смог, но это настраивается в админке: можно добавить типы устройств, которые будут определяться как PDA (КПК) и отдельно как Смартфоны. По коду - плагин простенький, что вроде бы хорошо, но структура темы немного запутанная, что усложняет её редактирование в случае необходимости. Оставляет следы (записи в таблице опций) после удаления.
• - самосвал, рассчитаный на смартфоны с тачскрином (видимо от сюда и название): iPhone / iPod touch, Google Android, Blackberry Storm and Torch, Palm Pre. Использует ajax. Начальная версия урезанна, т.е. есть возможность купить более полную версию этого плагина. Нуждается в русской локализации. Всякие PDA не определяет как мобильные устройства, что не есть гуд.

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

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

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

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

Сейчас мы просто рассмотрим как выявить, что посетитель зашел с мобильного устройства. Для этого я нашел целый сайт, который занимается этой проблемой в серьез - (на англ).

Чтобы определить, что пользователь зашел с мобильного устройства нужно:
1. скачать этот архив ;
2. залить файл mobile_device_detect.php из архива на сервер в папку темы;
3. в functions.php использовать такую проверку:

Require_once("mobile_device_detect.php"); $mobile = mobile_device_detect(); if($mobile){ // здесь делаем что-нибудь для пользователей с мобильных устройств, // например отдаем им мобильную тему }

Дополнительная информация

Функция mobile_device_detect() может принимать ряд параметров:

Mobile_device_detect($iphone, $ipad, $android, $opera, $blackberry, $palm, $windows, $mobileredirect, $desktopredirect);

$iphone, $ipad, $android, $opera, $blackberry, $palm, $windows - все эти параметры указывают считать ли соответствующее устройство мобильным. По умолчанию: true. Можно указать УРЛ (с http://), тогда если зашли с соответствующего устройства, пользователя перекинет на указанный УРЛ.

$mobileredirect, $desktopredirect - в этих параметрах указываем УРЛ (с http://), на который перекинуть, если зашли с мобильного устройства типа отличного от вышеприведенных. По умолчанию false - просто вернет true (зашли с мобильного устройства), никуда не будет редиректить (перекидывать).

Функция всегда возвращает массив из 2-х элементов:

$mobile = mobile_device_detect();

$mobile = true или false (мобильное устройство или десктопное).
$mobile = Строка. Тип устройства, по которому можно определить Смартфон это, iPhone или КПК

$mobile может быть:
"Apple iPad"
"Apple"
"Android"
"Opera"
"Blackberry"
"Palm"
"Windows Smartphone"
"Mobile matched on piped preg_match"
"Mobile matched on content accept header"
"Mobile matched on profile headers being set"
"Mobile matched on in_array"
"Desktop / full capability browser" (не мобильное устройство)

---
Все знают про гоночный чемпионат Формула 1, а про Формулу 2 слышали? Такой тоже есть и уже существует третий год.

Здравствуйте уважаемые коллеги, гости сайт.

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

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

Перейдя по предложенной в сообщении ссылке по адресу https://www.google.com/webmasters/tools/mobile-friendly/ и, проанализировав там главную страницу своего блога, я получил вот такой грустный результат:

Согласитесь, глупо терять солидную долю трафика (до 40%) из-за такой ерунды, как отсутствие мобильной версии сайта.

Можно адаптировать свою тему соответствующим образом вручную. А можно и обойтись специальным расширением для своей CMS. Второй вариант подойдет тем, кто несилен в верстке или, если очень хочется создать мобильную версию прямо сейчас, на время проведения работ по адаптации или вообще на постоянную основу. Как говорится: "Нет ничего более постоянного, чем временное".

Тестируя самые популярные плагины WordPress для решения поставленной задачи, я остановился на WP Mobile Detector.

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

После установки и активации стандартным способом, в левой колонке панели администратора появится новое подменю - WP Mobile Detector , при открытии которого появятся пункты с настройками, статистикой и списком доступных тем. Тут все просто, сами разберетесь.

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

Без этого не будет работать кэширование мобильной версии вашего WordPress сайта.

Зайдите на свой сервер , найдите там папку cache и присвойте ей полные права, как на картинке.

Предупреждающее сообщение исчезнет.

Перевод WP Mobile Detector, удаление ссылок

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

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

Отредактируем файлы темы "bluesteel-mobile ", уже установленной по умолчанию. Использовать будем текстовый редактор Notepad++ .

Итак, откройте файлы , , , и удалите из них коды, выделенные на скриншотах. Пути к файлам подчеркнуты красной чертой.

Для русификации, потребуется отредактировать файлы - в корне плагина и файлы шаблона - , search.php , index.php , comments.php , category.php , 404.php , archive.php , . Просто замените все слова, нуждающиеся в переводе (напечатаны ядерно-черным шрифтом), на русские.

Перед редактированием, обязательно измените кодировку текстового документа с ANSI на UTF-8 (без BOM) в инструментах "Кодировки " текстового редактора Notepad++.

Для наглядности или для использования, скачайте уже отредактированный мной WP Mobile Detector по ссылке ниже.

Версии 1.8 без внешних ссылок.

Теперь ваш WordPress сайт имеет полноценную мобильную версию, поисковики и посетители обязательно это оценят.

Мобильная версия WordPress сайта - плагин WP Mobile Detector обновлено: Июнь 18, 2017 автором: Роман Ваховский

>Какого раздела?
Раздела с новостями

>Причем плагин к «мобильной версии»? У Вас и так тема адаптивная (Правда, древнючая, взятая на помойке, с шелами и пр.)
Извиняюсь, я слабо разбираюсь в вордпрессе в принципе, мне сайт делал один фрилансер. Если плагины тут не помогут, то как мне можно мобильную версию настроить? Обновить тему или другую поставить? Нужно, чтобы этот раздел с новостями (окошко справа) было видно с телефона.

Раздела с новостями

Стало ещё менее понятно. Весть сайт состоит из «разделов с новостями». В ВП это называется «рубрики с записями». Или же Вы имеет ввиду что-то другое.

Извиняюсь, я слабо разбираюсь в вордпрессе в принципе, мне сайт делал один фрилансер.

Как моно скорее выкинуть эту помоечную тему если не хотите иметь проблем. Брать темы нужно только из оф каталога . Как и плагины.

Если плагины тут не помогут, то как мне можно мобильную версию настроить?

Что Вы имеете ввиду под » мобильную версию настроить»? Адаптивная тема — это есть «для мобильных».

Нужно, чтобы этот раздел с новостями (окошко справа) было видно с телефона.

Какое «окошко справа»? Я ничего такого не вижу.

>Стало ещё менее понятно.
Сделал скриншот, чтобы было понятнее:
https://ibb.co/cwnSnH

>Что Вы имеете ввиду под » мобильную версию настроить»?
Я имею в виду настроить то, что в мобильной версии отображается. Потому что сейчас в ней не видно этого окна (на скриншоте)

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

Я имею в виду настроить то, что в мобильной версии отображается. Потому что сейчас в ней не видно этого окна (на скриншоте)

У Вас скрываются сайдбар/виджеты. Это в принципе нормально. Если хотите чтобы показывалось — нужно переделывать или менять тему.

А какие проблемы могут быть?

От невозможности получить помощь до левых ссылок и взлома сайта с очень плохими последствиями .

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

Как переделать тему, чтобы сайдбары и виджеты отображались?

Была бы тема из оф каталога — можно было бы сказать что-то определённое, а как что сделано в этой теме…

Насколько сложно поменять тему (на надежную и официальную) с сохранением всего загруженного контента?

>Была бы тема из оф каталога - можно было бы сказать что-то определённое, а как что сделано в этой теме…
Вообще я смотрел некоторые скриншоты из руководств и у меня консоль выглядит примерно так же, как и у всех.

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

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

Консоль не причем. Проблема в доступности кода темы (и не предлагайте скачать этот хлам.)

В общем, буду копить денег и искать более толкового программиста. Сам я, конечно, не смогу все это сделать.

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

Просмотр 10 ответов - с 1 по 10 (всего 10)

• Тема «Посоветуйте плагин для настройки мобильной версии» закрыта для новых ответов.

Всем привет!

До 21 апреля осталось чуть больше недели, чтобы оптимизировать свой сайт под мобильные устройства. За это время вряд ли получится у программиста заказать и получить готовую мобильную версию для сайта, да и не у всех могут быть деньги на это. В этой статье я расскажу, как сделать мобильную версию сайта с помощью плагина WPtouch Mobile Plugin.

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

С помощью плагина WPtouch Mobile Plugin даже новичок сможет сделать мобильную версию для своего WordPress сайта, если установленный шаблон не адаптивный. Не смотря на то, что плагин имеет две версии бесплатную и платную, базовой версии вполне достаточно для среднего сайта. В том случае, когда у вас крутой сайт, который приносит нормальный доход, для него лучшим решением будет заказать программистам мобильную версию, а не покупать Про версию WPtouch за 59 долларов.

Установка плагина стандартная. В строку поиска вводим название WPtouch Mobile Plugin и устанавливаем его. На этом скрине смотрите пошаговые действия по установке:

Как только вы активировали плагин, у сайта появилась мобильная версия. Проверка удобства просмотра на мобильных устройствах от Гугла показывает «Отлично! Страница оптимизирована для мобильных устройств». Больше можно ничего не делать. Все работает. Зайдите на свой сайт со своего телефона и посмотрите.

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

Как настроить плагин WPtouch

В админке в левой колонке появился пункт WPtouch.

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

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

Третий пункт – «Темы и расширения». Здесь нам делать нечего. В бесплатной версии есть только одна тема – Bauhaus, а из расширений вообще ничего не доступно.

На первой вкладке «Общие» обратите внимание на следующие настройки: вывод количества записей, поэкспериментируйте с эскизами, выберите какие элементы показывать (комментарии, слайдер). К сожалению, для бесплатной версии не доступен вывод блока похожих записей. На вкладках «Фирменная символика» и «Закладка пиктограмм» можно изменить цвета и эмблемы темы.

В четвертом пункте «Меню» выберите, какие страницы меню показывать, а какие нет. К каждой странице можно добавить значки:

Хочу обратить ваше внимание на то, что для телефона нужно создавать рекламные блоки своего формата. В Адсенс есть стандартный блок 320*100. Можно создать свой с шириной 320, а высотой 300. Поэкспериментируйте и посмотрите результат.

Как вывести рекламу на мобильном в начале и конце статьи

Теперь объясню куда же добавлять коды. В бесплатной версии плагина WPtouch есть всего одна тема Bauhaus. Зайдем в папку с ней по следующему пути сайт.ru/public_html/wp-content/plugins/wptouch/themes/Bauhaus/default

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

Нас интересует файл single.php. В него мы и будет добавлять коды.

Второй блок Адсенс 320*300 в конец поста, перед кодом:

А код тизерки перед выводом комментариев:

Чтобы посетители из мобильных устройств засчитывались в статистике, добавьте коды счетчиков в этот файл. Я не нашла лучшего места и добавила код перед строкой:

Жду ваших комментариев.

Сделайте это наконец! Создайте мобильную версию своего сайта на WordPress и избавьте каждого посетителя с мобильного устройства от неудобства все время увеличивать масштаб страниц для читабельности текста и выполнять N-ное количество лишних движений.

Мы предлагаем вам 7 крутейших, а главное бесплатных плагинов WordPress, которые помогут вам это сделать всего за несколько минут.

Плагины для создания мобильной версии вашего сайта на WordPress

Скорее всего, термин «адаптивный дизайн» не является для вас новым, так как уже в течение лет так 2-х он находится у всех на слуху. Но если вы еще не знаете, то его смысл заключается в «преображении» или «адаптации» сайта для мобильных устройств. То есть посетителю с любого гаджета, будь то планшет или смартфон, будет так же удобно просматривать страницы вашего сайта, как и со стационарного ПК или ноутбука.

Ниже приведены четыре плагина, которые 100% помогут решить эту задачу - сделать мобильную версию вашего сайта на WordPress.

1. Hammy

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

, а также использует код изображения версии WordPress 3.5 для изменения размера изображения.

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

2. Responsive Widgets

Этот плагин предлагает новые текстовые/HTML виджеты WordPress, доступные только на гаджетах типа iPad, Nook, PlayStation Vita и других общих устройствах – планшетах и смартфонах.

Чтобы использовать плагин, вам нужно базовое представление о виджетах WordPress. Откройте страницу виджетов и вы увидите много новых виджетов для следующих девайсов и типов экранов:

• Mobile
• Mobile (landscape)
• iPhones and iPods
• Phablets
• Tablet (portrait)
• Tablet (landscape)
• iPad Portrait
• iPad Landscape
• Nexus Tablets
• Kindle Tablets
• Surface Tablet
• Nook Tablets
• PS Vitas
• Desktops
• Large Monitors (1240px+ screens)
• Print only

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

3. WP Lightbox 2

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

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

4. Responsible

Чрезвычайно полезный WordPress плагин. С его помощью вы протестируете адаптивный дизайн в своем браузере, не отходя от кассы. В нем используется Viewport Resizer Bookmarklet для размещения фиксированной панели вверху страницы, где вы сможете изменить размер страницы для нужных адаптивных устройств (как например, смартфоны, планшеты, экраны стационарных ПК), а также устанавливать необходимые разрешения экрана.

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

Плагины для создания мобильных тем

Эти плагины работают по очень интересному принципу: они показывает различные темы WordPress, если пользователь заходит на ваш сайт с мобильного устройства. Такая функция особенно полезна, если у вас на сайте используется тема, неадаптированная под мобильные устройства. И если у вас нет ни времени, ни желания менять тему сайта под мобильный гаджет, то следующие три плагина созданы специально для таких ленивых, как вы! :-)

5. WPTouch Mobile Plugin

Это, пожалуй, один из самых популярных бесплатных плагинов для создания привлекательного сайта в мобильной версии. На сегодняшний день его рейтинг составляет 3,9 из возможных 5 звезд. После установки и активации плагина вам будет доступна куча всяких классных функций, хотя многие пользователи могут ограничиться стандартным набором для создания мобильной версии сайта.

Но будьте осторожны! Еще в июле 2014 года стало известно об уязвимости версии плагина WPTouch 3. Она была тут же замечена и исправлена, но успела навредить многим сайтам, которые использовали данный плагин. Поэтому всегда следите за обновлениями плагина и заботьтесь о безопасности вашего сайта во всех его версиях.

6. WordPress Mobile Pack

Еще один лидер тем для мобильной версии сайтов на WordPress. Количество скачиваний плагина перевалило за 600 тысяч, а рейтинг составляет 3.8 звезд из 5 возможных. Его крутость состоит в замене классического дизайна на интерфейс мобильного приложения.

Как и предыдущий плагин WPTouch, этот нуждается только в установке и активации. При желании можете покопаться в настройках, но это необязательно. Плагин можно использовать сразу же после его активации.

7. Jetpack

Этот плагин занимает лидирующие позиции по популярности среди подобных ему инструментов, это подтверждается поддержкой WordPress.com и Automattic. В нем есть очень полезная функция «Mobile Theme». Чтобы использовать ее, нужно зайти на страницу настроек (Jetpack → Settings) после установки и активации плагина. Действий минимум, а возможностей максимум. Вы убедитесь в этом сами, если выберите этот бесплатный плагин.

Единственный совет, который мы можем вам дать – это не использовать данный плагин с плагином Disqus, так как они не очень совместимы.

Заключение

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

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