Меню
ГлавнаяОшибки

Тема вордпресс для мобильных устройств. Плагин WPtouch — настраиваем мобильную версию WordPress блога. Параметры темы: "Фирменная символика"

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

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

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

Использование мобильных тем

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

Jetpack

Довольно популярный плагин для веб сайтов на CMS WordPress, который позволяет установить мобильную тему. Для настройки необходимо установить плагин на свой сайт и зайти в раздел настроек (Jetpack – Setting). После этого активируйте функцию «Mobile Theme» и сайт будет адаптирован. Плагин распространяется бесплатно и позволяет адаптировать сайт с минимальным количеством действий.

Среди недостатков стоит выделить плохую совместимость с Discus, поэтому не рекомендуем использовать оба этих плагина одновременно.

WP Mobile Pack

Еще одно простое решение для создания адаптивного дизайна на своем сайте. Плагин набирает большую популярность, и количество скачиваний на сегодняшний день превышает 600 000. Для создания мобильного дизайна потребуется только установить и активировать плагин. Существует несколько дополнительных настроек, которые не являются обязательными.

WPTouch Mobile Plugin

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

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

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

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

Responsible

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

Теперь на страницах сайта будет отображаться специальная панель, которая позволит изменять размер в зависимости от устройства (планшет, смартфон, ПК).

WP Lightbox 2

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

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

С помощью данного плагина Вы можете использовать специальные HTML виджеты, которые доступны только на планшетах и смартфонах. Для работы с Responsive Widgets необходимо представлять, что такое виджеты в WordPress и иметь навыки работы с ними.

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

Hammy

Один из самых удобных плагинов для WordPress, который позволяет создать адаптивный дизайн и правильно отображать сайт на мобильных устройствах. Установите и активируйте данный шаблон, после чего необходимо будет создать точки «останова» и указать для них HTML элементы. При этом для всех изображений будет изменен отображающий их тег. Вместо «img» всем картинкам будет присвоено значение «figure». Точка «останова» представляет собой ограничение размера изображения, при разном разрешении экрана.

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

Какой плагин выбрать

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

Альтернативой использованию плагинов является создание адаптивного дизайна или использование адаптивной темы.

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

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

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

Перейдя по предложенной в сообщении ссылке по адресу 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 автором: Роман Ваховский

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

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

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

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

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

  1. Создание отдельной мобильной версии сайта на поддомене или другом домене.
  2. Использование адаптивной темы WordPress, которая автоматически меняет размеры и расположение элементов при открытии на маленьких экранах.
  3. Применение разных тем оформления в зависимости от устройства – на компьютере будет один шаблон, для телефона другой (более простой и компактный).

Про первый случай говорить не хочется, так как это неэффективно, по сути, вы делаете отдельный сайт, а вот оставшихся 2 доступны для блоггеров.

Адаптивные темы для WordPress

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

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

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

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

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

Устанавливать плагины легко и с этим справится даже начинающий вебмастер. Как устанавливать плагины смотрите .

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

1. WPtouch Mobile Plugin

Самый первый плагин для мобильной версии сайта, с которым я познакомился, он же и самый известный. Пример работы на моем сайте DmitriyZhilin.ru

В бесплатной вариации он содержит только один шаблон, но его можно настраивать – менять цвета шрифтов, фона, кнопок и т.д. Есть возможность добавить свой код в подвал и дополнительные CSS стили прямо из панели настроек.

Работает плагин на русском языке, правда, перевод слегка корявый на данный момент, но все понятно.

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

2. WordPress Mobile Pack

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

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

Управление и настройки плагина WordPress Mobile Pack на английском языке, но все интуитивно понятно, тем более, что все начинает работать сразу после активации и можно дополнительно ничего не делать.

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

Чуть не забыл – необходима версия PHP вашего хостинга не ниже 5.3.0

3. Плагин Mobile Smart

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

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

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

4. WP Mobile Edition

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

  • Минималистичный дизайн (показал максимальную скорость и адаптивность в PageSpeed Insights от Google)
  • удобное меню, специально адаптированное к маленьким экранам,
  • удобная главная страница с последними статьями,
  • кнопка переключения на обычную тему из мобильной и шорткод для размещения кнопки перехода в мобильную версию из обычной (этого не было в рассмотренных выше).

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

Сам дизайн пока один, но он содержит несколько цветовых схем.

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

Какой плагин выбрать?

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

Сначала испытайте плагины с мобильными темами – 1, 2, 4. Если ни один из них вам не приглянется, то ищите хорошую тему с адаптивным дизайном и подключайте ее для мобильных пользователей плагином Mobile Smart (3), тут уж никаких ограничений нет – использовать можно любой шаблон.

Не забудьте про кэширование

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

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

Полезные статьи:


  • Как заработать деньги в интернете новичку – 23…

  • Что такое блог, как его создать, раскрутить и как…

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

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

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

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

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

Для тех, кто Гугл Адсенс, Яндекс Директ, Банерах, установить мобильную версию на свой блог следует обязательно, так как со смартфона Galaxy S III или с планшета ASUS Google Nexus 7 кликать по рекламе с простой версии темы неудобно, проверял лично.

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

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

Плагин WPtouch. Для чего он нужен?

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

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

Как установить WPtouch?

Все также, как и с обычным плагином.

1. Производим скачивание на сайте плагинов вордпресс;

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

3. Соединяемся с FTP-сервером.

4. Переходим вот сюда: wp-content/plugins/;

5. Теперь переносим плагин в эту папку, посредством: курсор мыши наводим на плагин, кликаем и не отпуская переносим в список всех плагинов;

6. Сейчас плагин внутри вашего сайта, но он еще не работает, так как вам необходимо перейти в админку блога и Активировать WPtouch. Активацию можно сделать, зайдя в «ПЛАГИНЫ».

7. После проведенной активации переходим в настройки. Они находятся в разделе «ПАРАМЕТРЫ», на новой версии вордпресс образуется новая вкладка, в самом низу, то есть настройки плагина не в разделе параметры и туда далее, а прямо среди общих разделов.

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

Настройки WPtouch?

Установив плагин, можете проверить, как выглядит ваш сайт. Это можно сделать, открыв его на смартфоне, телефоне и каком-либо другом мобильном устройстве. Если нет смартфона, то мобильный найдется у каждого.

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

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

Что-то не устраивает? Тогда проведите настройки! Как туда попасть я уже сказал выше. Сейчас подробнее о них!

В разделе WPtouch есть несколько подразделов:

1. Что нового;
2. Основные параметры;
3. Темы и Расширения;
4. Настройки темы;
5. Меню;
6. Обновить до Pro;

Сейчас все по порядку. Просмотрим несколько разделов и подробно охарактеризуем их. Ну или хотя бы познакомимся.

Первым делом посетим основные параметры . Если все отображается на латинском, тогда выполняем перевод.

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

Вот, что мы здесь нашли:

  • Отображение названия блога;
  • Регионализация;
  • Режим отображения;

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

Темы и расширения. Это второй раздел плагина.

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

Настройки темы . Здесь думаю и остановимся ненадолго.

  • Общие;
  • Брендинг;
  • Иконки Закладок;
  • Веб-режим App;
  • Реклама;

Делайте все под себя и довольствуйтесь.

Последнее, что я хотел бы отметить из настроек - это Меню .

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

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

С уважением, Жук Юрий.

Сегодня объясню, для чего нужна на wordpress мобильная версия сайта . Порекомендую плагин wptouch и расскажу, как его правильно настроить, чтоб в мобильной версии выводилась нужная информация (конкретные страницы, рубрики, записи, разделы). К слову, не так давно сам на нескольких сайтах установил и настроил данное расширение. Функционирует дополнение - отлично, плюс ко всему Яндекс и Google теперь не пишут, что сайт не оптимизирован для мобильных устройств.

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

Ответ прост и практически очевиден: мобильный трафик растет. Следовательно, основные поисковые системы требуют от владельцев сайтов соответствовать. Лучше сделать сайту мобильную версию, чтоб он не был понижен в поисковой выдаче или не получил других санкций.

Достоинства плагина wptouch

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

Плагин для мобильной версии сайта. Настройка

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

Настройка wptouch плагин

1) Первым делом надо установить плагин wptouch.

2) После установки, в консоли WP появится надпись «Wptouch» с разделом «Настройки». Туда нам и надо будет зайти.

3) Выбираем раздел «Настройки меню», нажимаем «Перейти в настройки меню».

4) Первым делом надо прописать «Название меню» и «Сохранить меню».

5) В сохраненное меню добавляем все необходимые: страницы, записи, рубрики, произвольные ссылки (ссылка на любую статью). Делается это путем проставления галочек и нажатием кнопку «Добавить в меню».

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

7) И самый важный момент, который многие упускают: перед тем как сохранить меню, надо там, где «Показать местонахождение», выбрать: WPtouch: Header Menu. По крайней мере, в моей теме wordpress это оптимальное решение.

8) Переходим к визуальной настройке, нажимаем: «Переключиться на мобильную тему» и любуемся 🙂

ВНИМАНИЕ !!! Если проставить лишние галочки в этом блоке, то некоторые элементы (страницы, записи, рубрики, произвольные ссылки) мобильной версии начнут отображаться в обычной версии сайта. Не паникуйте! Попробуйте подстроить плагин под себя (сняв лишние галочки).