МОБИЛЬНАЯ ВЕРСИЯ САИТА WORD PRESS

Знаете ли вы, что более половины интернет-трафика в США идет с мобильных телефонов? Согласно этой статистике, более половины людей, которые посещают ваш блог, делают это со своего смартфона.

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

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

Хорошо, получилось глупо. Давай продолжим. Итак, вы выбрали WordPress в качестве платформы для ведения блогов. Отлично. У вас есть потрясающая бесплатная тема WordPress, которая адаптивна, готова к работе с мобильными устройствами и даже имеет поддержку дисплея Retina.

Вот в чем загвоздка. Многие из этих так называемых «потрясающих» адаптивных тем не всегда так хороши, как рекламируются. Могут возникнуть проблемы с выравниванием и несоответствия в мобильной версии вашего сайта (которые, кстати, невозможно решить без помощи разработчика). А некоторые темы не ориентированы на мобильные устройства и просто загружаются очень медленно. Помните, что посетитель с большей вероятностью покинет ваш сайт, если он не загрузится в течение 3 секунд. В мобильной версии этот таймфрейм в 3 секунды неуклонно сокращается. На самом деле, я думаю, вы согласитесь, когда я скажу, что два ресурса, которые истощаются с каждым днем, – это время и внимание.

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

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

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

Мобильный пакет WordPress

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

Веб-приложения гораздо более гибкие с точки зрения пользовательского интерфейса и пользовательского интерфейса, они имеют автономную синхронизацию, возможности сохранения и работают на всех платформах, включая iOS, Windows Phone, BlackBerry OS и Android.

Мобильный плагин WPtouch

WPtouch, получивший название «оригинальный» мобильный плагин WordPress, преобразует вашу существующую тему WordPress в красивый, гибкий мобильный шаблон, соответствующий рекомендациям Google по дизайну мобильных сайтов. Премиум-версия плагина – WPtouch Pro предлагает множество расширенных тем для блогов, предприятий и специальные темы WooCommerce.

Вы также можете купить дополнительные расширения, которые добавляют богатые возможности рекламы, режим веб-приложения (аналогично WordPress Mobile Pack), контент «только для мобильных устройств», расширенную типографику для мобильных устройств, кэширование мобильных сайтов и многое другое. Эти расширения варьируются от 10 до 20 долларов и позволяют гибко покупать их индивидуально в зависимости от ваших потребностей, что дает вам лучший контроль над своим бюджетом.

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

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

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

AMP для WP

Хотя AMP для WP не является «официальным» плагином, он предлагает массу отличных функций в дополнение к основной интеграции AMP. Например, добавлены настройки для областей мобильной рекламы, пользовательские языковые переводы AMP, push-уведомления, 3 готовых макета страниц AMP, параметры структурированных данных, разрывы страниц, призывы к действию, начальные рейтинги и т.д. Плюс AMP для WP совместим с популярными такие плагины, как Yoast SEO, AddThis Social sharing, Elementor page Builder, Gutenberg, Contact Form 7, Gravity Forms и многие другие.

Адаптивные меню – это быстрый способ добавить на ваш сайт flash-меню для мобильных устройств. Имея более 150+ опций для настройки, есть практически безграничные возможности для создания собственного меню. Используйте параметры цвета, шрифтов, фоновых изображений, анимации меню, встроенного поиска, RTL и многого другого. Как следует из названия, все меню адаптивны и отлично смотрятся на большинстве устройств.

Мобильное меню WP

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

Оптимизатор изображения EWWW

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

Он поддерживает пакетное сжатие изображений с потерями или без потерь в форматах JPG или PNG

Smush – еще один плагин для оптимизации изображений, разработанный командой WPMU, который обещает в 2 раза лучшее сжатие в своей премиальной версии. Однако бесплатная версия ограничивает максимальный размер входного изображения до 5 МБ. Кроме того, плагин предлагает дополнительные функции для отложенной загрузки, изменения размера изображений, автоматической оптимизации, массового удаления (до 50 изображений за раз) и многого другого.

A3 Lazy Load

Оптимизированным изображениям по-прежнему требуется время для загрузки. Чтобы свести к минимуму передачу данных и сократить время загрузки сайта, вы можете использовать плагин a3 Lazy Load. Суть плагина заключается в JavaScript-коде Lazy-Load-xt, который откладывает загрузку изображений, видео, фреймов и вставок сообщений. Определите ленивую загрузку с помощью сообщения, страницы, типа сообщения, виджета и т.д. Плюс a3 Lazy Load включает дополнительные эффекты предварительной загрузки, совместимость с AMP, поддержку изображений WebP и совместимость с большинством популярных плагинов (JetPack, Elementor, WooCommerce и т.д. ).

Изображения, аудиофайлы, видео и окна iframe не загружаются до тех пор, пока не станет активным окно просмотра при использовании Lazy Loader. Если в браузере отключен JavaScript, он постепенно деградирует, т.е. перестает работать, не нарушая работу сайта. Изображения будут загружены обычным способом. Другими словами, изображения загружаются только тогда, когда вы прокручиваете вниз, чтобы увидеть их, то есть вы находитесь в области просмотра изображения.

Протестируйте свой мобильный сайт

Google Mobile Friendly Test

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

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

Создать мобильный сайт очень просто. Создание конверсионного мобильного сайта – нет.

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

Мы просмотрели список плагинов. А теперь давайте убедимся, что мы на стороне победителей!

Я слышал, вы спросите, зачем вообще создавать приложение? Приложения могут быть больше не очень полезны для маркетинга, но они довольно удобны для ваших клиентов, предоставляя им больший выбор в отношении того, как они взаимодействуют с вашим сайтом. С продолжающимся ростом мобильного Интернета (теперь больше людей получают доступ к Интернету через мобильные приложения, чем через настольные компьютеры), приложения процветают, поскольку большинство из них далеко не так неудобно или проблемно, как мобильные веб-браузеры.

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

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

Примечание о бесплатных конструкторах приложений

За последние несколько лет появилось множество «бесплатных» вариантов создания приложения, но одним из самых надежных является Adobe PhoneGap Build. Поскольку их сайт рекламирует, вы просто загружаете свои файлы HTML5, CSS и JavaScript, и сайт выполняет работу по их сборке в приложение, которое можно сразу загрузить. Лучше всего то, что он может создавать три одновременно для Android, Windows Phone 8 и iOS, что экономит ваше время.

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

1 Убедитесь, что у вашего сайта WordPress есть мобильная версия

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

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

Любой переключатель мобильных тем

Any Mobile Theme Switcher – это базовый плагин, который обнаруживает устройство, которое использует ваш зритель, и отображает определенную тему для этого устройства. Поэтому, если вы хотите сбалансировать несколько тем – по одной для каждой мобильной ОС – вы можете сделать это таким образом.

Наконец, есть WordPress Mobile Pack, который предлагает множество кроссплатформенных мобильных веб-приложений, пользовательский интерфейс и варианты тем, а также простую интеграцию с Google Analytics.

2 Используйте PhoneGap Build для создания приложения.

Если вы технически подкованы и хотите разобраться, вы можете использовать Adobe PhoneGap, чтобы создать приложение для своего веб-сайта WordPress. У Adobe есть полное пошаговое руководство в своей документации, но вот краткий обзор шагов, которые вам необходимо выполнить.

Подготовка

Перед тем как начать, убедитесь, что у вас есть возможность протестировать свое приложение под рукой. Вы можете использовать инструменты разработчика браузера, чтобы имитировать просмотры мобильных устройств, или попробовать такую ​​услугу, как CrossBrowser Testing. Но если вы действительно можете справиться с этим, лучше всего иметь под рукой устройства iOS и Android.

Затем вам необходимо установить Adobe PhoneGap Build на свой компьютер. Щелкните, чтобы загрузить версию для Mac или ПК, и следуйте инструкциям на экране. Adobe также предлагает установить бесплатное приложение для разработчиков PhoneGap, чтобы вы могли мгновенно тестировать свое приложение в процессе сборки.

Шаг 2. Создайте приложение

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

Чтобы начать работу, выберите из стандартного примера «Hello World», Framework7, Push-уведомления, React Hot Loader или пустой шаблон. Затем вам нужно будет выбрать, где на локальном жестком диске вы будете работать над своим проектом, и указать имя и идентификатор. Когда вы закончите, PhoneGap предоставит адрес сервера, который вы можете использовать для просмотра своего приложения.

Чтобы вы могли видеть, вашему корневому каталогу потребуются ключевые файлы для PhoneGap, чтобы фактически создать ваше приложение. В частности, ваши index.html (как минимум), config.xml и подкаталоги (последняя зависит от операционной системы).

Вот пример прямо со страницы структуры проекта приложения PhoneGap :

Вам также нужно будет создать свои собственные значки. Вы, конечно, можете справиться с этим самостоятельно или воспользоваться бесплатным онлайн-инструментом. IconsFlow – отличный инструмент, который поможет вам быстро создавать профессиональные значки приложений, используя предустановленные изображения, параметры цвета, градиенты и т.д. Просто создайте свой значок, создайте бесплатную учетную запись и загрузите файлы. Если у вас уже есть значок, но вам нужно изменить его размер для всех устройств и операционных систем, бесплатный App Icon Maker может это сделать. Но если вы выполните быстрый поиск в Google, вы обнаружите, что есть множество других веб-сайтов, сервисов и приложений, из которых вы можете выбрать свой значок.

Шаг 3. Тестирование вашего приложения

Когда ваше приложение готово к работе, вы можете протестировать его с помощью установленного ранее приложения PhoneGap Developer. Обязательно используйте указанный адрес сервера. Оттуда вы можете просматривать свое приложение на своем мобильном устройстве, устранять любые проблемы, добавлять исправления, повторно загружать и перестраивать до идеального состояния.

Важное примечание: PhoneGap Builder может работать с iOS только в том случае, если вы присоединились к программе iOS Developer (которая стоила 99 долларов в год на момент написания этой статьи) и предоставили свои сертификаты. С помощью программного обеспечения программы вы можете самостоятельно создать приложение. Но причина, по которой мы предлагаем PhoneGap, заключается в том, чтобы вы могли сэкономить время, выполнив все три сразу, исключая необходимость делать что-то отдельно. Так что да, вы платите за кучу услуг, которыми вы, возможно, в конечном итоге не воспользуетесь, но если вы хотите, чтобы ваше приложение было на каких-либо продуктах iProducts, они вроде бы вам здесь дороже.

3 Используйте альтернативные конструкторы приложений для WordPress.

Помимо инструментов iOS, вы можете использовать множество других сервисов и плагинов для создания приложений. Это значительно проще, чем создавать приложение самостоятельно. Некоторые из них также создадут (по крайней мере) приложение для Android бесплатно. Хотя вам обязательно стоит заглянуть на основной сайт разработчика, чтобы убедиться.

Создайте приложение для своего веб-сайта с помощью AppMySite. Этот простой в использовании плагин и сервис позволяет легко превратить ваш сайт WordPress (или даже магазин WooCommerce) в приложение всего за несколько шагов. Сначала получите плагин и зарегистрируйте свою учетную запись. Затем приступайте к работе над настройкой своего приложения – на выбор есть множество встроенных макетов и функций.

Когда вы закончите, просто отправьте приложение для публикации (поддерживается Android и iOS). Кроме того, AppMySite синхронизируется с вашим веб-сайтом в режиме реального времени, чтобы поддерживать ваше приложение в актуальном состоянии с учетом любых новых публикаций или продуктов, которые вы публикуете.

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

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

Приложение WPMobile позволяет создавать приложения для Android и iOS для вашего сайта. Хотя базовый плагин является бесплатным, вам нужно заплатить за пожизненную лицензию, чтобы фактически создать свое приложение (от 79 евро за один формат приложения или 149 евро за оба). С приложением WPMobile у вас будут варианты настройки, бесплатное тестирование в реальном времени, автоматические обновления приложений, поддержка push-уведомлений, социальная интеграция и поддержка премиум-класса (приветствуемая функция, если вы застряли).

Хотя MobiLoud дороже (от 120 долларов в месяц), он сделает практически все за вас (включая отправку вашего приложения в App Store и Google Play), что делает цену довольно разумной. С MobiLoud ваше последнее приложение предлагает совместимость с несколькими устройствами, простой обмен в социальных сетях, монетизацию (с помощью рекламы или подписок), push-уведомления и многое другое. И когда служба связана с их плагином (ссылка выше), вы можете управлять своим приложением и push-уведомлениями из WordPress.

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

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

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

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

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

Долгое время Google «пугал» своих вебмастеров примерно следующими сообщениями:

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

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

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

По аналогии проверяйте мобильную версию сайта в панели вебмастера Яндекс: https://webmaster.yandex.ru/site/

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

У меня кстати один сайт клиента по SEO в инструменте Google проверку проходил, а в Яндексе — нет! Так что обязательно проверяйте и там, и там.

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

Важно! У вас может быть уже создана мобильная версия, да только Google и Яндекс может это не понять, так как вы ему запретили индексацию служебных папок в файле Robots.txt.

Поэтому если в результатах тестирования вы увидите что-то вроде такого: «Некоторые ресурсы страницы заблокированы в файле robots.txt», то читайте статью «Googlebot не может получить доступ к файлам CSS и JS на сайте»

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

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

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

Вот примерный список преимуществ, которые получает сайт с мобильной версией:

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

Мобильная версия сайта за 5-10 минут!

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

Что вам нужно теперь сделать:

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

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

Название и автор сайта
Что будет написано вверху вашего сайта в мобильной версии. Рекомендую использовать что-то короткое, буквально на 20 знаков, так как примерно это количество умещается целиком. Галочку «Отображать «На платформе WPtouch» в примечании» можно снять.

Определение региона.
Русский в большинстве случаев подойдет.

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

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

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

Параметры темы

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

Вкладка «Общие» позволяет задавать такие параметры как:

Блог.
Количество записей в списке блога. Тут же можно исключать рубрики и теги (то есть выводить не все записи в мобильной версии). Я вывожу всё, это по-моему логично.

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

Вот смотрите, в первом случае — с эскизами, во втором — без.

«Фирменная символика»

Вот где нужно тщательно покопаться. Здесь оформляется внешний вид мобильной версии сайта.

Цвета сайта
Именно здесь настраиваются цвета мобильной версии сайта, поэтому рекомендую

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

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

Оформление
Выберите шрифты, которые вам больше нравятся. Я поставил «Шрифты браузера». По идее должно быстрее грузиться.

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

«Закладка пиктограмм».

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

Я взял за основу PSD-макет иконки iPhone и быстро создал себе нужную кнопку в Photoshop.

Если вы пока не дружите с этим редактором, то можете бесплатно создать иконку для Apple вот в этом сервисе.

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

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

Тут все просто: вы можете выбрать или уже предустановленные иконки (проще всего) или загрузить свои иконки на прозрачном фоне и добавить уже их.

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

Вот посмотрите, как у меня получилось настроить:

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

А знаете ли вы, что можете проверить получившуюся версию сайта для мобильных устройств на iPhone5 без самого телефона? Для этого можно просто воспользоваться сервисом «Эмулятором iPhone», например iphone5simulator.com

Выводы и итоги

Таким образом, можно буквально за несколько минут и главное, бесплатно создать на сайте или блоге под WordPress мобильную версию сайта.

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

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

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

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

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

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

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

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

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

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

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

Почему важно наличие удобного для мобильных устройств веб-сайта?

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

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

Как сделать WordPress мобильным?

Есть много способов сделать WordPress мобильным. Прежде всего, вам необходимо пройти тест на удобство для мобильных устройств, чтобы проверить, адаптирован ли ваш сайт для мобильных устройств. Google разработал удобный для мобильных устройств тест, который вы можете использовать, чтобы проверить, реагирует ли ваш веб-сайт или нет. Этот тест занимает 60-90 секунд.

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

Используйте адаптивную тему.

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

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

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

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

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

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

AMP – один из самых популярных плагинов, которые могут сделать ваш сайт мобильным. A MP – это сокращение от Accelerated Mobile Pages. Как вы, вероятно, можете сказать по его названию, этот плагин благодаря своей легкой структуре заставляет ваши мобильные страницы загружаться невероятно быстро.

AMP удаляет все лишнее и ненужное на вашем веб-сайте и отображает чистую версию для вашей мобильной аудитории.

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

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

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

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

Плагин WPtouch доступен как в бесплатной, так и в премиальной версиях. Премиум-версия стоит от 69 долларов.

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

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

AMP для WP – это универсальный плагин, который оптимизирует ваш сайт WordPress для AMP. С помощью этого плагина вы можете сделать WordPress мобильным. A MP для WP поставляется с набором расширений, которые позволяют полностью настраивать дизайн.

Пользовательский редактор AMP позволяет разработчикам создавать эксклюзивный дизайн страниц и контент для AMP-стороны веб-сайта WordPress. С помощью конструктора страниц перетаскивания вы можете изменять макеты и улучшать UX.

Адаптивный контент

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

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

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

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

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

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

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

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

Способ 1. Настройщик темы ВордПресс

Вы можете просматривать мобильную версию ресурса в Кастомайзере активной темы. Для этого

В результате откроется Настройщик темы. Количество опций и настроек зависит от темы.

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

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

Способ 2. Встроенные инструменты Google Chrome

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

Для этого в Chrome перейдите на сайт и в любом месте страницы кликните правую клавишу мыши и выберите пункт Посмотреть код.

В новой панели найдите и нажмите кнопку Toggle device toolbar.

В итоге предварительный просмотр вашего веб-ресурса сократится до размера экрана мобильного телефона.

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

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

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

— один из самых популярных плагинов в своей тематике, позволяющий сделать красивый и быстрый мобильный сайт буквально за пару минут, при этом не написав ни строчки кода. W Ptouch автоматически формирует простую и изящную тему для посетителей WordPress-сайта. Также присутствует возможность настраивать некоторые детали, а также свободно переключаться между мобильной и обычной версиями сайта.

Плагин JetPack

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

Плагин WordPress Mobile Pack

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

Плагин Mobile Smart

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

Плагин Any Mobile Theme Switcher

Довольно простой плагин Any Mobile Theme Switcher, позволяющий автоматически активизировать разные темы для разных устройств. Вы можете определить несколько тем (довольно сложную, средней сложности и максимально простую), настроив их следующим образом. Так, первая тема будет активизирована для просмотра на персональных компьютерах или ноутбуках. Тема средней сложности отобразится исключительно на планшетах и таблетах. Самая же простая — для мобильных телефонов. Помимо этого, плагин дает возможность назначить конкретные темы для конкретных устройств и веб-браузеров (iPhone, Android, Windows Mobile, Blackberry, Opera Mini и т.д.)

WP Mobile Edition — модуль, включающий все возможности предыдущего, но имеющего поддержку системы комментирования и наличие мобильной XML-карты с собственным генератором для сайтов. Кроме того, дополнение способно создать мобильную версию на поддомене, что будет полезным для ускоренного кэширования и реализации поддержки мобильных cookie.

В качестве заключения

Если требуется выбрать простое и бесплатное решение для корректного отображения веб-сайта на мобильных устройствах, то можно смело воспользоваться WPtouch. Если же необходимо лишь активизировать для мобильных пользователей более легкую тему — Any Mobile Theme Switcher вполне достойное решение при условии, что на вашем сайте старая версия WordPress, и вы не планируете ее обновлять.

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

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

Оптимальным решением будет добавление в раздел CSS вашей темы такого текста:

Помимо этого вам желательно изменить ширину страниц мобильной версии (за нее отвечает атрибут «width»). После того, как найдете его в разделе CSS, вам нужно будет заменит его значение на «100%». Это позволит браузеру автоматически подгонять ваш сайт под любой экран. Но стоит отметить, что данный способ адаптации не является эффективным, потому как сайт будет грузиться долго. Основные цели мобильной версии это быстрая загрузка и предоставление удобства. Помимо этого такой вид адаптации не является быстрым. Вам придется искать нужные атрибуты, эксперементировать с их значениями, если будут возникать какие-либо дефекты и так далее.

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

1. Hammy необходим для пропорционального отображения изображений на мобильных устройствах. Механизм работы заключается в том, что плагин меняет стандартный тег вызова изображения img на figure. При желании в настройках плагина есть опция отключения показа изображений определенного класса. Это нужно при адаптации новостных и каких-либо других больших порталов. В противном случае сайт будет грузиться намного дольше.

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

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

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

5. Если вы хотите создать готовый адаптивный сайт за считанные минуты, то вам стоит использовать плагин WP Touch. Он является достаточно популярным, потому как им пользуются более 5 миллионов вебмастеров. Этот плагин содержит базовые настройки (название, язык, регион) и одну тему. Если же вы хотите сделать более функциональную мобильную версию сайта для смартфонов, то вам стоит приобрести премиум версию WP Touch Pro. Здесь присутствует большое количество различных тем и дополнительных настроек, поэтому ваш сайт не будет однообразным.

6. W P Mobile Detector предназначен для определения устройства, с которого посетитель заходят на сайт. Он способен сделать распознавание около 5 тысяч различных устройств. Также плагин фиксирует статистику уникальных посещений, источников перехода и многое другое.

7. WordPress Mobile Pack это многофункциональный плагин. Благодаря нему вы сможете сделать настройку отображения различных кнопок бара (добавить в закладки и так далее), кнопок смены версии сайта с классической на мобильную и блоков с рекламой от Гугл или AdMob. Также он содержит мобильную версию панели управления сайтом. Это существенно повысит удобство, потому как в стандартной версии панели управления при работе на мобильных устройствах некоторые опции являются ограниченными в доступе.

8. W P Mobile Edition это полная копия предыдущего. Помимо вышеперечисленных опций данный плагин подключает возможность комментирования записей с помощью системы Disqus, а также создает дополнительную XML карту для мобильной версии.

9. Duda Mobile Website Builder поможет создать быстрый и привлекающий внимание сайт для мобильного устройства. Он отлично работает со всеми темами, которые предложены на официальном сайте движка вордпресс. Данный плагин используют создатели NY Times, Forbes и других популярных сайтов.

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

11. W P Mobile Splash Page Editor будет вам полезен при создании гостевой страницы для мобильной версии вашего интернет-портала. Он достаточно легок в настройке и содержит широкое количество различных стилизаций. При правильном подборе дизайна вы сможете увеличить посещаемость сайта. Стоит также упомянуть, что данный плагин обеспечивает быструю загрузку страниц на каком-либо портативном устройстве.

12. При использовании Wapple Architect Mobile вы получите адаптированную версию, которая будет иметь URL-адрес идентичный классической. То есть, не будет перенаправления на поддомен вида «m.сайт.com». Это никаким образом не влияет на СЕО-показатели. Особенностью данного плагина является также возможность адаптации абсолютно любой темы под мобильные устройства (будь это даже тема с большим количеством различных виджетов). Благодаря этому, вам не придется тратить лишнее время на работу с дизайном.

Как осуществляется адаптация без использования плагинов?

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

Сервис dudamobile.com является достаточно популярным, потому как имеет широкий выбор опций. Однако, данный сервис является платным. Цена будет составлять 9 долларов США. Это достойная плата, учитывая что вам не придется использовать какие-либо плагины.

Более простым является mippin.com, который содержит значительно меньше опций. Механизм работы похож с предыдущим сервисом.

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

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

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

Также вы можете воспользоваться сервисом Mobile Phone Emulator, который позволяет увидеть отображение вашей мобильной версии не только лишь на продукции Apple, но и на продукции компаний Samsung, HTC и BlackBerry.

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

Если же вам не хочется заходить лишний раз на какие-либо сайты, то установите один раз Opera Mobile Emulator. Это дополнение к известному браузеру Opera. Оно бесплатное и легкое в использовании.