Мобильная версия wordpress ф 2. Плагины для создания мобильной версии блога или определение входа с мобильного устройства. Параметры темы: "Фирменная символика"

Новости 16.03.2019
Новости

Сегодня объясню, для чего нужна на 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) Переходим к визуальной настройке, нажимаем: «Переключиться на мобильную тему» и любуемся 🙂

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

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

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

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

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

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

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

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

Информацию от Яндекса можно посмотреть .

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

А вот проверка моего сайта в новом Вебмастере:

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

Адаптация шаблона WordPress

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

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

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

Мобильная версия Вордпресс установкой плагинов

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

Вот еще вам ссылка Гугл сервиса для проверки своего сайта на адаптацию, это на случай когда вы еще не зарегистрировали сайта в Яндекс.

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

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

WPtouch Mobile Plugin

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

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

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

WordPress Mobile Pack

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

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

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

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

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

Выбор плагина

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

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

Помни про кэширование

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

Для решения этой проблемы есть два способа:

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

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

C 21 апреля Гугл начал понижать в мобильной выдаче сайты, не оптимизированные под портативные устройства. Это заставило многих начать действовать и приводить свои сайты в соответствие с понятием mobile-friendly. И это неудивительно:

  • 23% продаж в Интернете сегодня совершается именно через телефоны.
  • Всемирной паутиной всё больше пользуются обладатели смартфонов и мобильных ПК.
  • 52% обладателей планшетов совершают покупки именно со своих портативных гаджетов.

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

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

Как сделать дизайн сайта адаптивные

  1. Конечно, если вы специалист в веб-программировании, вы можете написать код на HTML 5 с использованием особого дизайна и адаптивных конструкций. Если нет, для этой цели можно нанять профессионала. Однако есть способы проще.
  2. Так, если ваш сайт построен на базе CMS (к примеру, Джумла или Вордпресс), вы можете изначально приобрести или скачать адаптированный под разные устройства шаблон, и затем уникализировать его самостоятельно.
  3. Есть ещё такой способ, как создание медиазапросов в CSS3. Они представляют собой условия, которые вы можете прописать, для того чтобы страницы отображались тем или иным образом в зависимости от размеров окна браузера и используемого устройства. Например, можно задать условие (правило @media) выводить конкретные стили, если ширина экрана менее 600 пикселей. Впрочем, это только один пример. Условий гораздо больше. Если вы что-либо понимаете в CSS верстке, разобраться с медиазапросами не очень сложно.
  4. Применение фреймворков – ещё один способ, который любят применять дизайнеры за простоту их реализации. При умении работы с адаптивными фреймворками можно сэкономить массу времени. Их список можно отыскать на сайте Beloweb.ru.

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

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

C помощью сервиса можно довольно быстро создать достойный вариант ресурса для портативных ПК и телефонов. Здесь масса гибких настроек. Единственный минус – это платная услуга, стоит 9$ в месяц, но можно выбрать и бесплатное пользование с размещением мобильной версии на поддомене dudamobile и рекламы сервиса.

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

. Конструктор для адаптации ресурсов под iPad и смартфоны. Его удобно использовать для коммерческих целей. Можно применять бесплатно, но есть и расширенные платные возможности. Есть поддержка Javascript и HTML5. Чтобы начать создание портативной версии веб-сайта, нужно зарегистрироваться там. Регистрация очень лёгкая, подтверждение по e-mail не требуется. Если у вас блог на Вордпресс, нужно будет поставить плагин WordPress Mobile by Mobify для перенаправления с основной десктопной версии на мобильную.

WordPress плагины для адаптации под мобильный трафик

WPtouch. Плагин поддерживает множество портативных устройств, подгружает посты на ajax. С помощью админ-панели можно задать гибкие настройки элементов дизайна в визуальном режиме. Миллионы скачиваний говорят о том, что плагин действительно полезен и удобен в использовании.

WP Mobile Detector. Содержит расширенную мобильную статистику, умеет уменьшать картинки, форматировать контент и определять большое количество устройств (около 5000 телефонов). Mobile Detector – один из первых плагинов, которые «научились» различать смартфоны и обычные телефоны.

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

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

Таким образом, даже не имея представления о вёрстке, сегодня можно поставить адаптивный шаблон для сайта/блога или сконструировать что-то с помощью онлайн сервисов. Уделите ему немного времени – и ваши посетители отблагодарят вас повышением конверсии и улучшением поведенческих факторов.



Рекомендуем почитать

Наверх