Создание мобильной версии сайта на WordPress с помощью плагина WPtouch. Плагин для адаптации сайта под мобильные устройства вордпресс


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

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

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

Смотрите также:

  • Удобно ли использовать ваш WordPress-сайт с мобильных устройств?
  • Как адаптировать WordPress сайт к мобильным устройствам
  • 8 бесплатных WordPress-плагинов для адаптации сайта под мобильные устройства
  • Как тестировать WordPress на планшетах и смартфонах, которых у вас нет?

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

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

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

1. Hammy

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

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

2. Responsive Widgets

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

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

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

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

3. WP Lightbox 2

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

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

4. Responsible

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

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

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

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

5. WPTouch Mobile Plugin

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

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

6. WordPress Mobile Pack

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

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

7. Jetpack

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

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

Заключение

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

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

Источник: code.tutsplus.com

40

softsettings.com

Мобильная версия сайта на WordPress и плагин WPtouch

Мобильная версия сайта на WordPress

  Делаем Вордпресс-сайт мобильным

Многие вебмастера в марте этого года получили уведомления от Google Webmaster о том, что сайт некорректно отображается на экране мобильного устройства и это может ухудшить его ранжирование в мобильном поиске Google с 21 апреля. Кажется, так и стало происходить.

Я также получил много подобных уведомлений и для ряда сайтов на WordPress стал использовать простейшее решение — плагин WPtouch. Так что сейчас о нём и расскажу, но сначала кое-что о способах создания мобильных версий.

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

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

  1. Адаптивный дизайн — код страницы не меняется, но меняется отображение элементов в зависимости от размера экрана устройства.
  2. Динамический показ — код страницы меняется в зависимости от типа устройства (сервер определяет тип устройства и выдаёт разный код для разных устройств).
  3. Разные URL — для мобильной версии открывается страница с другим URL (например, http://m.vk.com для ВКонтакте).

Мне, как и Гуглу, больше всего нравится 1-й вариант. Так что большую часть своих сайтов буду переводить на адаптивный дизайн, как и web-ru.net. Это более универсальный и, если можно так сказать, основательный способ создания мобильной версии. Но каждому сайту тут будет нужен индивидуальный подход.

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

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

Мобильная версия сайта на WordPress с помощью плагина WPtouch

Прежде, чем ставить плагин, проверьте — может у вас уже всё хорошо: https://www.google.com/webmasters/tools/mobile-friendly/ . На картинке ниже пример, когда не всё хорошо:

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

  Проверка веб-страницы в Google на мобильность

Скачать плагин можно здесь: https://wordpress.org/plugins/wptouch/. Установка обычная и сразу после неё можно проверить сайт на мобильность в Гугле:

Страница оптимизирована для мобильных устройств

  Страница оптимизирована для мобильных устройств

В общем, всё очень просто.

Конечно, можно покопаться ещё в настройках плагина или приобрести его Pro-версию, но если вам просто нужно, чтобы Гугл был доволен — WPtouch прекрасно подойдёт.

Кстати, чтобы через десктопный браузер посмотреть, как будет выглядеть сайт с мобильного устройства, надо (для браузеров на основе Chrome) нажать F12 и в появившемся окошке перейти в режим просмотра с мобильных (красная стрелочка), а далее выбрать само устройство (белая) и обновить страницу:

Просмотр с мобильных устройств в Chrome

  Эмуляция мобильных устройств в Google Chrome

Единственное, что мне не очень нравится в этом плагине — это то, что на одних сайтах у меня отображается реклама от Google AdSense (она появляется внутри поста), а на других — нет :). Но вообще, для вставки AdSense у них предусмотрена Pro-версия.

Плагин WPtouch и кэширование на WordPress

Важный момент: в настройках кэширующего плагина следует создать два кеша — один для десктопных страниц, другой — для мобильных. В Hyper cache это делается путём установки галочки рядом с «Определять мобильные устройства». Иначе может получиться весьма забавно — на экране компьютера отобразится мобильная версия.

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

Loading...

web-ru.net

Обзор плагинов на WordPress для Адаптивного сайт

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

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

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

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

Адаптивность сайта – это просто: дополнения для WordPress

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

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

WP Lightbox 2

Функциональное, мощное дополнение, позволяющее выполнить масштабирование сайта. Среди разнообразия функций следует выделить возможность:

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

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

Responsive Widgets

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

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

WordPress Mobile Pack

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

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

Responsible

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

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

Hammy

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

WPTouch Mobile Plugin

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

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

 

Хотите узнать много интересной и полезной информации о WordPress? Зарегистрируйтесь на наш бесплатный курс!

ifish2.ru

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

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

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

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

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

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

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

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

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

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

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

Mobify.com. Конструктор для адаптации ресурсов под 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 предусмотрено ведение статистики, имеется большое количество настроек. Так, вы можете изменять шрифты, их размер и цвет, добавлять собственное лого и графические элементы. Плагин легко адаптирует сайт под различные размеры, ориентацию экранов, браузеры.

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

 

Нравятся статьи? Подписывайтесь на рассылку!

www.profithunter.ru

Плагины WordPress AMP — Accelerated Mobile Pages

С Accelerated Mobile Pages, Google обещает практически мгновенную загрузку контентных страниц благодаря их оптимизации, особенной разметке и практически полному отказу от JavaScript скриптов.

На данный момент существует много дискуссий и споров на тему WordPress AMP, особенно в группе Advanced WordPress Facebook.

Смотрите также:

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

  • “Мы заканчиваем работать над WordPress шаблоном и находимся в процессе его адаптации для мобильных устройств. Теперь, когда Google выпустила AMP для WordPress, мы можем просто установить плагин AMP, а не продолжать возиться с кодом? "
  • "Accelerated Mobile Pages является явным победителем, потому что создает AMP версию домашней и других стандартных страниц, а также постов. В то время как AMP от Automattic создает AMP-версию только для постов."

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

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

Если у вас есть CPT (Custom Post Type), который выполняет те же задачи, что новостная статья или статья блога, то также можно прибегнуть к помощи AMP.

В каких случаях AMP не оправдывает ожиданий

Естественно, при работе с этим форматом возникают и некоторые проблемы.

Более детально ознакомиться с возможными трудностями и недостатками AMP можно в этой статье от Yoast, но если вкратце:

  • AMP устанавливает ограничения на то, что вы можете предлагать своим читателям через Интернет
  • AMP приносит пользу нескольким крупным компаниям
  • Поддерживается только 5 рекламных платформ, 2 из них принадлежат Google
  • Не вся аналитика будет работать с AMP

Но несмотря на это все, Google упорно продвигает Accelerated Mobile Pages и делает ударение на том, что отсутствие или присутствие AMP версий ваших статей влияет на результаты поиска для мобильных устройств.

Плагины WordPress AMP

Когда дело доходит до выбора WordPress плагинов AMP, есть четыре основных аспекта, которые мы должны учитывать:

  • Фактическая/amp версия вашего поста
  • Интеграция с плагином SEO, чтобы к AMP страницами прикреплялись соответствующие метаданные
  • Интеграция с Google Analytics или другим инструментом для сбора аналитики, чтобы можно было отслеживать трафик AMP версий
  • Плагин для показа AMP рекламы, если вы издатель

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

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

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

2. WP AMP от TeamDev

Пожалуй, лучшее решение для создания AMP на WordPress. Позволяет настроить из админки практически всё: внешний вид, положение блоков на странице, добавить рекламные блоки, код Google аналитики и т.д. Плагин также поддерживает магазины на WooCommerce.

Общие настройки:

На главной странице настроек вы можете установить коды отслеживания Google Analytics и Facebook Pixel, настроить доступность AMP для разных типов контента и архивов, а также включить или выключить редирект мобильных пользователей на AMP-версию сайта.

Настройки отображения хедера:

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

Реклама:

Эта страница настроек плагина позволяет добавить рекламные блоки от AdSense и Doubleclick.

Полный обзор плагина вы можете прочитать здесь. А купить WP AMP можно на CodeCanyon.

3. AMP от PageFrog

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

  • возможность оформить статью AMP с вашим брендингом
  • аналитика
  • возможность использовать Facebook и Google Adsense рекламу

Брендинг

Стилизация продумана, есть поддержка логотипа, выбор шрифтов между serif и sans-serif, а также несколько цветов, так что вы сможете использовать цвета вашего бренда.

Аналитика

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

В настоящее время есть поддержка: Google Analytics, Chartbeat, Parsly, а также возможность добавления других платформ, которые предоставляют аналитику для AMP.

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

Реклама

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

Другие особенности:

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

4. Glue for Yoast SEO & AMP

Этот плагин отвечает за то, чтобы дефолтный плагин WordPress AMP использовал правильные YoastSEO метаданные. Без этого такие вещи как канонические ссылки, например, могут работать некорректно.

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

Другие WordPress плагины AMP

AMP Analytics — расширяет возможности AMP для поддержки аналитики на вашем WordPress сайте (Google Analytics)

Accelerated Mobile Pages (AMP) для WordPress — Создает AMP темы для вашего WordPress сайта

Заключение

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

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

Источник: cozmoslabs.com

hostenko.com

Адаптация WordPress шаблона под мобильные устройства при помощи симуляторов

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

Тестирование WP сайтов на мобильных платформах

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

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

Симуляторы iOS

Самый простой и эффективный способ проверки сайта на устройствах от Apple – воспользоваться приложением iOS, которое является частью ХСоdе. Это интегрированная среда для разработки различного программного обеспечения и приложений для iOS и OS X от компании Apple.

iOS симулятор

Не стоит бояться сложных названий. Данный симулятор — это специально разработанное приложение, которое может работать и без запуска Хсоde. Для начала работы, вам понадобится пройти бесплатную регистрацию и получить индивидуальный Apple Developer ID. А дальше, переходим по ссылке в Загрузки для Applе разработчиков, и устанавливаем скачанный файл.

Теперь, для запуска приложения, необходимо выполнить ряд команд. Так, открываем Finder>Applications, щелкаем правой клавишей мыши по Хсоde и в открывшемся окне контекстного меню выбираем Show Package Contents.

После запуска приложения, оно автоматически определит тестируемое устройство как iPhone. Заменить его на дугой гаджет, можно выбрав в меню пункт Hardware. После чего, для тестирования WordPress cайта, вам останется просто открыть браузер Safari и ввести адрес сайта.

Симуляторы Android для Windows и OS X

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

Давайте рассмотрим симулятор Android SDK, который сегодня является наиболее доступным и подходят для популярных платформ MS Windows и OS X.

Для начала работы с симулятором, его необходимо установить, предварительно скачав программу с Android SDK. После завершения загрузки, переходим в папку с прогой, выбираем Tools>Android, после чего откроется командная строка и приложение Android SDK Manager. Далее переходим в папку Android 4.3, в которой находится Install (x) Packages и запускаем процесс установки.

По завершению установки, вам останется создать или настроить виртуальные устройства. Для этого переходим в Tools>Manage AVDs в меню SDK Manager. Для создания собственного устройства кликаем на Device Definitions и выбираем раздел Create AVD, затем жмем ОК. Новое устройство будет находится в списке List of existing Android Virtual Devices. Вот и все, можно приступать к тестированию вашего сайта. Выбираем устройство из списка и нажимаем Start. Находим браузер, вводим адрес сайта, а дальше все также как и при работе с iOS Simulator. Однако есть одно отличие, о котором стоит сказать. В Android Simulator нет опции для смены устройств, что достаточно неудобно. Приходится переключаться вручную, используя для этого командные комбинации клавиш. Так, для Мас ОS Х используется комбинация FN + Control + F11 или F12, а для Windows - CTRL + F11 или F12.

Онлайн симуляторы для тестирования сайтов

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

Однако ничто не идеально, и все не могло быть так просто. Подвох заключается в том, что сервис платный, начальный тариф обойдется в 19 долларов в месяц. Предоставляется возможность бесплатного тестирования работы сервиса на протяжении 30 минут. Кроме того, для проведения локальной проверки сайта необходимо дополнительно устанавливать Java, что может стать проблемой для пользователей Мас.

Сервис выполняет проверку кроссбраузерности сайта, посредством виртуальных машин основных операционных систем, а для проверки мобильных версий запускается симулятор. Так, например, при тестировании сайта на iPad запускается iOS Simulator на образе операционки OS X. Из-за такой подгрузки работа сервиса может быть замедлена, но это не критично.

Какой симулятор выбрать?

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

Если вы хотите полностью протестировать работу сайта с помощью одного интерфейса, логичнее использовать онлайн сервисы как BrowserStack. Здесь даже есть некоторые инструменты для разработчиков. Так, например, в 10 Internet Explore для Windows 8 есть набор инструментов Firebug. В целом сервис за месяц полностью отрабатывает потраченные 19 долларов.

Что касается пользователей OS Х, для проверки они могут использовать и Android SDK, и Хсоde. У пользователей Windows выбор не так велик, для работы с ней подходит только Android SDK.

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

Готовые адаптивные дизайны WordPress

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

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

http://www.templatemonster.com/ru/wordpress-themes-type/48165.html

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

http://www.templatemonster.com/ru/wordpress-themes-type/48164.html

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

http://www.templatemonster.com/ru/wordpress-themes-type/47539.html

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

http://www.templatemonster.com/ru/wordpress-themes-type/48156.html

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

http://www.templatemonster.com/ru/wordpress-themes-type/47992.html

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

http://www.templatemonster.com/ru/wordpress-themes-type/47538.html

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

http://www.templatemonster.com/ru/wordpress-themes-type/47925.html

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

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

www.onwordpress.ru

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

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

Сегодняшнюю статью я решил посвятить интереснейшей теме.

Как вы знаете в последнее время, поисковики стали мало обращать внимание на не адаптированные темы под мобильные телефоны.И этим плохо сказывается на ваши блоги.

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

Что мы можем сделать?

Есть несколько вариантов решения этого вопроса.

Это купить платную тему, уже адаптированную под мобильники.Также можно заказать специалистам, что бы они сделали вам тему.Это все платные варианты.

А если вы не имеете финансов или сложновато с ними.Вы можете адаптировать свою тему под мобильники, с помощью плагина.Есть несколько плагинов, специальные под адаптацию для мобильных телефонов.Я перечислю самые ходовые плагины, это: WP Mobile Edition, WordPress Mobile Pack, Jetpack, WPTouch Mobile Plugin, Hammy, Responsive Widgets, WP Lightbox 2.

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

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

Теперь проверяем адаптацию к мобильникам, с помощью сервиса Google:

https://www.google.com/webmasters/tools/mobile-friendly/

И на примере моего блога, видим что блог адаптирован.

 

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

 

Я остался доволен результатом.На этом Все.

С Уважением, Игорь Александрович

А теперь немного развлечемся.

priz za konkurs na bloge

vipinternetrabota.ru