Здравствуйте уважаемые коллеги, гости сайт.
Не обращали внимания, как стремительно растет число пользователей интернета со своих мобильных телефонов? Не думали создать мобильную версию для своего сайта?
Я тоже задумывался на этот счет, но, было как-то недосуг. Все откладывал на завтра. Видимо, ждал того петуха, который клюнет в известное место. Так вот, на днях, в моей панели инструментов для веб-мастеров от Гугла появилось следующее сообщение:
Перейдя по предложенной в сообщении ссылке по адресу 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 автором: Роман Ваховский
Всем привет!
До 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 в конец поста, перед кодом:
А код тизерки перед выводом комментариев:
Чтобы посетители из мобильных устройств засчитывались в статистике, добавьте коды счетчиков в этот файл. Я не нашла лучшего места и добавила код перед строкой:
Жду ваших комментариев.
Беспроводной интернет и соответствующие мобильные устройства, позволяющие выходить в сеть с любого места развиты достаточно хорошо и используются довольно обширно. Такое положение вещей все чаще приводит к тому, что владельцы сайтов дорабатывают свои детища до мобильных версий. Обращаясь к статистике мобильного интернета - 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 слышали? Такой тоже есть и уже существует третий год.
Привет, друзья. Недавно Яндекс выложил информацию на страницах блога, о том что вышел новый метод ранжирования сайтов мобильного поиска. Все делалось для того, дабы во время поиска запросов из смартфонов информация выдавалась с учетом адаптации ресурса под мобильную версию показа.
До этого времени это никак не учитывалось при запросе нужной информации из телефона, сегодня же, наоборот, и тот, кто справился с задачей адаптации, тот молодец. Сайты таких владельцев будут выше в поисковой выдаче, что повлияет на улучшение трафика для них и снижение посетителей для тех, кто не имеет моб. версию сайта.
Информацию от Яндекса можно посмотреть .
Кстати, совсем недавно вышел новый Яндекс Вебмастер, смотри . Так вот, если ваш сайт зарегистрирован в Яндексе, то вы сможете в новом Вебмастере проверить адаптацию своего детища и если все в порядке, то статью можете дальше не читать.
А вот проверка моего сайта в новом Вебмастере:
Информация моя нацелена на тех, ребят, у которых проблемы с адаптацией, и они используют CMS WordPress. Данная статью будет им в помощь, так как создаваться будет мобильная версия wordpress при помощи плагинов.
Адаптация шаблона WordPress
Во время поиска темы для своего детища нужно ее подбирать так, чтобы в комплектацию входила адаптивная функция. И тогда при просмотре вашего сайта читателем с мобильного устройства тема сможет сама уменьшать или увеличивать ширину экрана, размер картинки, включать выпадающее меню и так далее.
А также адаптацию для читателя можно проверить с компьютера при помощи колесика мыши и увеличения (уменьшения) масштаба экрана. Но это еще не значит, что тема адаптивна под требования поисковых систем.
Кстати, если вы покупаете шаблон заказываете его отредактировать, то также следует указывать в здании не обходить стороной этот пункт.
Мобильная версия Вордпресс установкой плагинов
Хорошо, так уж получилось, что ваша тема, которая установлена вас устраивает и менять, конечно, вы ее не собираетесь. А вот мобильной адаптации у нее нет, как это проверить я писал выше. Посетите новый Яндекс Вебмастер и в левом меню внизу, сможете отыскать функцию проверки сайта на мобильный трафик.
Вот еще вам ссылка Гугл сервиса для проверки своего сайта на адаптацию, это на случай когда вы еще не зарегистрировали сайта в Яндекс.
В общем, у вас все плохо и вам нужна мобильная версия wordpress сайта. Может, для кого-то это и нормально что ее нет, но многие в ней нуждаются. Идем дальше и решаем проблему с помощью установки плагинов, которые отлично справляются с этой задачей и совершенно бесплатно.
Отыскать ниже перечисленные плагины, вы сможете в репозитории движка, а также с помощью админ панели через добавление новых плагинов.
WPtouch Mobile Plugin
Этот плагин очень известен многим вебмастерам и его для реализации адаптивной версии рекомендует Гугл сервис проверки сайта на мобильность. Также и я тесно познакомился с этим плагином, он работает на этом блоге.
В бесплатной версии плагина есть ограничения в отображении тем, но имеется масса открытых настроек для вас, которые помогут максимально приблизить дизайн к сайту. Интерфейс русскоязычный, так что разобраться будет не проблема.
Да, если у вас не установлены миниатюры, то и в отображении к статьям вы ничего не увидите при просмотре всего списка публикаций на соответствующих страницах.
WordPress Mobile Pack
В наличии есть бесплатная тема, остальные нуждаются в их приобретении за небольшую плату. Интерфейс не на русском языке, но не составит труда разобраться и выбрать желаемые чекбоксы.
Но можно ничего и не настраивать, так как после активации плагина стандартные настройки начинают действовать.
С этим плагином лично незнаком, но читал несколько статей авторы, которых очень хвалят его работу. В нем нет множества настроек, полный минимализм и это не мешает ему справляться со своей задачей.
При надобности что-то настроить сможете справиться за считаные секунды из-за наличия русского языка.
Здесь по поводу миниатюр аналогично первому плагину, только вместо картинок, которых нет вы увидите квадратики.
Выбор плагина
Нужно действовать по ситуации, а точнее, протестировать все перечисленные плагины и попробовать с помощью настроек максимально приблизится к теме шаблона. И тот, который сможет справиться с этой задачей, выбрать.
Также при отборе смотрите на его загрузку, которую он забирает во время ответа сервера. Если ни один не подошел вам, тогда придется обращаться к профессионалам или менять тему сайта. А также попробуете поискать еще плагины, которые смогли бы справиться с этой задачей.
Помни про кэширование
Если вы используете плагин кэширования одновременно с плагином моб. версии, то учитывайте, тот факт, что при проверке адаптации вы увидите информацию о том, что сайта неадаптивный.
Для решения этой проблемы есть два способа:
- Отключить плагин кэширования;
- В настройках плагина кэширования во вкладке «Мобильный» указать, чтобы кэш компьютера хранился отдельно от мобильного.
Статья подошла к концу, надеюсь, создание мобильной версии на wordpress не озадачит вас и вы получите ожидаемого результат. Удачи вам.
Привет, дорогие читатели!
За эту неделю на моем блоге произошло два замечательных события! Во-первых, наконец-то посещалка перевалила за 1000 (во вторник было 1040 уников). Во-вторых, я установила в сайдбар. Жду ваших комментариев о внешнем виде рекламного блока. И буду крайне благодарна за клики 🙂
Тем временем Google недавно известил о том, что мой блог плохо отображается на мобильных устройствах. В интернете много шума наделало их сообщение о том, что с 21го апреля 2015 года все сайты, которые не адаптированы под мобильники, будут понижены в выдаче.
Возник вопрос: нужна ли мобильная версия сайта? Судя по статистике за последний месяц у меня свыше 1500 посетителей, которые пользуются при просмотре мобильниками или планшетами. Это приблизительно 50 человек в день, что не так уж и мало. А если учесть, что с каждым годом мобильные технологии внедряются все больше в нашу с вами жизнь, нужно подумать о том, чтоб идти в ногу со временем. В этой статье мы разберем, как сделать мобильную версию для WordPress-блога.
Как проверить мобильную версию сайта?
Первое, что необходимо сделать, это проверить свои ресурсы на соответствие требованиям Гугл. Каждый может проанализировать удобство просмотра сайта на мобильных устройствах вот здесь — google.com/webmasters/tools/mobile-friendly .
Вот какой результат получился у меня:
Вот еще один полезный сервис от Гугл для проверки скорости загрузки разных версий сайта: developers.google.com/speed/pagespeed/insights . Здесь очень подробно объясняется, что именно на вашем сайте не так, даются конкретные примеры со скриншотами вашего блога. Поэтому обладая знаниями html + css и пользуясь этой инструкцией, можно отлично доработать свой ресурс.
При проверке мобильной версии сайта в Google, вы можете проследовать по ссылке с рекомендациями по адаптации сайта на Вордпресс под мобильные устройства (третья колонка справа – «Далее»). Там приведена еще одна подробная инструкция для WordPress с указанием плагинов, ссылками на адаптивные шаблоны и прочее. Советую также изучить этот документ.
Напомню, что адаптивные шаблоны WordPress – это такие темы, которые изначально разработаны для распознавания разными типами устройств. Мы разбирали в статье основные критерии, на которые стоит обратить внимание. Среди них была и адаптивность.
Как говорит нам поддержка Гугла, в описаниях таких тем обычно встречаются слова responsive (адаптивная) или mobile (мобильная). Т.е. если вы выбрали для своего блога адаптивную тему, вам не нужно заморачиваться с тем, как сделать шаблон мобильной версии сайта. Ваш основной шаблон будет автоматически подстраиваться под размеры мобильного устройства. Ну а тем, кто создал свой блог давно, когда таких тем еще не было, и не хочет менять свой устоявшийся шаблон, мы продолжим данный обзор. И разберем, что нужно сделать, чтоб ваш сайт хорошо воспринимался на мобильниках и планшетах.
Мобильная версия для Вордпресс-блога: особенности
Нужно понимать, что все остальные варианты, кроме адаптивной темы, или непосредственной правки файлов, предполагают создание дополнительного WordPress-шаблона для мобильной версии сайта. Данный шаблон должен отличаться от основного, учитывая особенности мобильных устройств:
- Небольшой размер экрана;
- Более низкая скорость загрузки;
- Отсутствие клавиатуры и мыши.
Одним словом, данная версия сайта должна быть упрощенной. Отображать она должна только все самое необходимое, контент, который будет быстро и качественно загружаться.
Для реализации данных функций есть несколько способов. Самый простой из них – воспользоваться плагинами (идеален для новичков).
Плагины для адаптации сайта
Самые распространенные плагины: WPTouch Mobile Plugin, WP Mobile Detector, MobilePress, WPSmart Mobile.
WpTouch и MobilePress – это базовые бесплатные версии плагинов, которые можно улучшить до более продвинутых версий с большим набором настроек и функций. По отзывам пользователей WpTouch Pro достаточно тяжелый и у него может возникать конфликт с плагинами кэширования (). Случается, что мобильному пользователю может выдаваться страница для ПК из кэша. Такое может случаться и с другими WordPress-плагинами для мобильных версий сайтов. Базовые версии как MobilePress, так и WPTouch вполне можно использовать для блогов с простой структурой и контентом.
Но мне больше понравился плагин WPSmart Mobile. В нем сразу установлены три мобильных шаблона для WordPress на выбор.
Правда, все его настройки на английском, но ничего сложного там нет.
Здесь можно установить лого, возможность комментирования, поиска по сайту и настроить отображение постов. Кроме того можно установить код или любой другой, и счетчики статистики. Также в разделе «Appearance» можно поменять шрифт и цвет записей, цвет фона и проч. Конечно, это будет уже не ваш сайт в его привычном виде, контент примет другой вид, но зато станет удобным для мобильных пользователей.
Вы можете посмотреть, как будет выглядеть сайт на мобильном устройстве, нажав «Preview»:
После установки любого понравившегося вам WordPress-плагина для мобильных версий, он должен автоматически определять, какое устройство использует посетитель, и предлагать ему соответствующую версию сайта.
Просмотр мобильной версии сайта, или отображение его в любом браузере или устройстве можно осуществить с помощью специального расширения User-Agent Switcher. Вот так он выглядит в магазине Google Chrome:
Он позволяет переключать прямо в Хроме тип отображения страницы:
Соответственно, вы можете проверить кроссбраузерность вашего блога и его вид на разных устройствах от iPhone до Samsung Galaxy.
Другие варианты создания мобильной версии сайта на Вордпресс
Варианты без использования плагинов:
- с помощью специальных сервисов.
- создание мобильной версии на поддомене;
- создание отдельного файла стилей CSS для мобильной версии;
- прописать данные для всех вариантов отображения в одном CSS-файле;
Вот один из сервисов, который анализируя ваш сайт, генерирует его мобильную версию — dudamobile.com . После этого на блог нужно поставить код, который будет делать редирект на мобильную версию сайта. Данный инструмент имеет массу настроек, но его функционал урезан в бесплатном режиме.
По схожему принципу используются поддомены. Их имеет смысл создавать для тяжелых, многофункциональных сайтов. Можно увидеть, как это работает на примере youtube, где осуществляется перенаправление на мобильную версию сайта. Тут основной домен youtube.com, а для мобильных устройств — m.youtube.com. Так же работает Вконтакте.
Если вы решили создать дополнительный файл стилей, сделайте копию основного и назовите ее, к примеру, style-m.css. Теперь нужно внести изменения в файл header.php, в строки, где подключаются стили.
Например, так они могут выглядеть:
" /> /style-m.css" />
А далее, при наличии знаний в области CSS, можно вносить правки непосредственно в файл style-m.css. Например, поменять шрифты на более контрастные, сделать отображение одноколоночным и все, что рекомендует Гугл.
Я для себя выбрала именно этот способ, набросала на скорую руку несколько стилей и гугл принял работу. Он оказался не слишком придирчивым, достаточно разместить контент в одну узенькую колонку и сервис Гугла радостно сообщает: «Отлично! Страница оптимизирована для мобильных устройств.» . Пока у меня получилось не слишком красиво, но это временный вариант, сделанный за пару часов. Возможно, когда-нибудь руки дойдут сделать это качественно и хорошо.
Удачи вам в освоении мобильной версии сайта на Вордпресс, делитесь своими результатами. До новых встреч!
