Wordpress на мобильных устройствах не отображаются изображения. Несколько плагинов, создающие мобильный шаблон блога
Привет, друзья. Недавно Яндекс выложил информацию на страницах блога, о том что вышел новый метод ранжирования сайтов мобильного поиска. Все делалось для того, дабы во время поиска запросов из смартфонов информация выдавалась с учетом адаптации ресурса под мобильную версию показа.
До этого времени это никак не учитывалось при запросе нужной информации из телефона, сегодня же, наоборот, и тот, кто справился с задачей адаптации, тот молодец. Сайты таких владельцев будут выше в поисковой выдаче, что повлияет на улучшение трафика для них и снижение посетителей для тех, кто не имеет моб. версию сайта.
Информацию от Яндекса можно посмотреть .
Кстати, совсем недавно вышел новый Яндекс Вебмастер, смотри . Так вот, если ваш сайт зарегистрирован в Яндексе, то вы сможете в новом Вебмастере проверить адаптацию своего детища и если все в порядке, то статью можете дальше не читать.
А вот проверка моего сайта в новом Вебмастере:
Информация моя нацелена на тех, ребят, у которых проблемы с адаптацией, и они используют CMS WordPress. Данная статью будет им в помощь, так как создаваться будет мобильная версия wordpress при помощи плагинов.
Адаптация шаблона WordPress
Во время поиска темы для своего детища нужно ее подбирать так, чтобы в комплектацию входила адаптивная функция. И тогда при просмотре вашего сайта читателем с мобильного устройства тема сможет сама уменьшать или увеличивать ширину экрана, размер картинки, включать выпадающее меню и так далее.
А также адаптацию для читателя можно проверить с компьютера при помощи колесика мыши и увеличения (уменьшения) масштаба экрана. Но это еще не значит, что тема адаптивна под требования поисковых систем.
Кстати, если вы покупаете шаблон заказываете его отредактировать, то также следует указывать в здании не обходить стороной этот пункт.
Мобильная версия Вордпресс установкой плагинов
Хорошо, так уж получилось, что ваша тема, которая установлена вас устраивает и менять, конечно, вы ее не собираетесь. А вот мобильной адаптации у нее нет, как это проверить я писал выше. Посетите новый Яндекс Вебмастер и в левом меню внизу, сможете отыскать функцию проверки сайта на мобильный трафик.
Вот еще вам ссылка Гугл сервиса для проверки своего сайта на адаптацию, это на случай когда вы еще не зарегистрировали сайта в Яндекс.
В общем, у вас все плохо и вам нужна мобильная версия wordpress сайта. Может, для кого-то это и нормально что ее нет, но многие в ней нуждаются. Идем дальше и решаем проблему с помощью установки плагинов, которые отлично справляются с этой задачей и совершенно бесплатно.
Отыскать ниже перечисленные плагины, вы сможете в репозитории движка, а также с помощью админ панели через добавление новых плагинов.
WPtouch Mobile Plugin
Этот плагин очень известен многим вебмастерам и его для реализации адаптивной версии рекомендует Гугл сервис проверки сайта на мобильность. Также и я тесно познакомился с этим плагином, он работает на этом блоге.
В бесплатной версии плагина есть ограничения в отображении тем, но имеется масса открытых настроек для вас, которые помогут максимально приблизить дизайн к сайту. Интерфейс русскоязычный, так что разобраться будет не проблема.
Да, если у вас не установлены миниатюры, то и в отображении к статьям вы ничего не увидите при просмотре всего списка публикаций на соответствующих страницах.
WordPress Mobile Pack
В наличии есть бесплатная тема, остальные нуждаются в их приобретении за небольшую плату. Интерфейс не на русском языке, но не составит труда разобраться и выбрать желаемые чекбоксы.
Но можно ничего и не настраивать, так как после активации плагина стандартные настройки начинают действовать.
С этим плагином лично незнаком, но читал несколько статей авторы, которых очень хвалят его работу. В нем нет множества настроек, полный минимализм и это не мешает ему справляться со своей задачей.
При надобности что-то настроить сможете справиться за считаные секунды из-за наличия русского языка.
Здесь по поводу миниатюр аналогично первому плагину, только вместо картинок, которых нет вы увидите квадратики.
Выбор плагина
Нужно действовать по ситуации, а точнее, протестировать все перечисленные плагины и попробовать с помощью настроек максимально приблизится к теме шаблона. И тот, который сможет справиться с этой задачей, выбрать.
Также при отборе смотрите на его загрузку, которую он забирает во время ответа сервера. Если ни один не подошел вам, тогда придется обращаться к профессионалам или менять тему сайта. А также попробуете поискать еще плагины, которые смогли бы справиться с этой задачей.
Помни про кэширование
Если вы используете плагин кэширования одновременно с плагином моб. версии, то учитывайте, тот факт, что при проверке адаптации вы увидите информацию о том, что сайта неадаптивный.
Для решения этой проблемы есть два способа:
- Отключить плагин кэширования;
- В настройках плагина кэширования во вкладке «Мобильный» указать, чтобы кэш компьютера хранился отдельно от мобильного.
Статья подошла к концу, надеюсь, создание мобильной версии на wordpress не озадачит вас и вы получите ожидаемого результат. Удачи вам.
Беспроводной интернет и соответствующие мобильные устройства, позволяющие выходить в сеть с любого места развиты достаточно хорошо и используются довольно обширно. Такое положение вещей все чаще приводит к тому, что владельцы сайтов дорабатывают свои детища до мобильных версий. Обращаясь к статистике мобильного интернета - 11% в России, 16% в США. Разумеется это общие числа, но так или иначе на ваш блог или сайт наверняка, заходят с мобильных устройств и терять таких пользователей не есть хорошо.
Для WordPress уже существуют плагины, которые показывают мобильную версию блога, если пользователь зашел с какого-нибудь iPhone.
Несколько плагинов, создающие мобильный шаблон блога
- - очень не плохой плагин. Простой, функциональный ничего лишнего, только то что нужно. Работает как под PDA (КПК), так и под Смартфоны, хорошо их определяет (Opera Mobile определил как мобильное устройство). Настроек минимум: можно изменить заголовки блога и указать отдельный шаблон для iPhone.
- - самосвал, к которому стоит присмотреться. Позволяет настроить внешний вид отображения блога. Изменить количество выводимых постов, цветовую схему, можно включить или отключить некоторые доступные виджеты. И еще ряд настроек. Есть статистика. Плохо, что нет локализации на русский. Хороший детектор мобильных устройств (увидел Opera Mobile). Особенность: Копирует темы под мобильные устройства в каталог тем WordPress - мне такое поведение показалось немного странным.
- - очень простой плагин и в то же время выполняющий свою функцию. Рассчитан под PDA (КПК) и Смартфоны (iPhone): отдельный шаблон для каждого типа устройства. Плагин довольно простой, без лишних наворотов. Из настроек
, можно только расширить типы устройств (USER_AGENT), для которых будет показываться мобильный шаблон.
Проверка мобильных устройств не полная: Opera Mobile не определил как мобильное устройство. - - ничем не приглянулся. Opera Mobile определить как мобильное устройство не смог, но это настраивается в админке: можно добавить типы устройств, которые будут определяться как PDA (КПК) и отдельно как Смартфоны. По коду - плагин простенький, что вроде бы хорошо, но структура темы немного запутанная, что усложняет её редактирование в случае необходимости. Оставляет следы (записи в таблице опций) после удаления.
- - самосвал, рассчитаный на смартфоны с тачскрином (видимо от сюда и название): iPhone / iPod touch, Google Android, Blackberry Storm and Torch, Palm Pre. Использует ajax. Начальная версия урезанна, т.е. есть возможность купить более полную версию этого плагина. Нуждается в русской локализации. Всякие PDA не определяет как мобильные устройства, что не есть гуд.
У всех плагинов можно вручную изменить тему под свои нужды. Мобильные темы находятся в папках плагинов. Структура шаблона такая же как в обычной теме WordPress.
Наверняка есть еще подобные плагины, но искать и описывать их я уже не стал - этого вполне достаточно. Если вы пользуетесь каким-либо другим плагином и он вас во всем устраивает, поделитесь в комментариях пожалуйста! Если в описании встречаются какие-то не точности также прошу указать на них. Возможно я не заметил некоторые характерные черты плагинов.
Определяем посетителя с мобильного устройства
Можно вообще отказаться от плагинов и небольшим кодом определить, что пользователь зашел с мобильного устройства и если это так, показать ему специальную, мобильную тему. Мобильную тему конечно нужно будет сделать самому, заранее.
Сейчас мы просто рассмотрим как выявить, что посетитель зашел с мобильного устройства. Для этого я нашел целый сайт, который занимается этой проблемой в серьез - (на англ).
Чтобы определить, что пользователь зашел с мобильного устройства нужно:
1. скачать этот архив ;
2. залить файл mobile_device_detect.php
из архива на сервер в папку темы;
3. в functions.php использовать такую проверку:
Require_once("mobile_device_detect.php"); $mobile = mobile_device_detect(); if($mobile){ // здесь делаем что-нибудь для пользователей с мобильных устройств, // например отдаем им мобильную тему }
Дополнительная информация
Функция mobile_device_detect() может принимать ряд параметров:
Mobile_device_detect($iphone, $ipad, $android, $opera, $blackberry, $palm, $windows, $mobileredirect, $desktopredirect);
$iphone, $ipad, $android, $opera, $blackberry, $palm, $windows - все эти параметры указывают считать ли соответствующее устройство мобильным. По умолчанию: true. Можно указать УРЛ (с http://), тогда если зашли с соответствующего устройства, пользователя перекинет на указанный УРЛ.
$mobileredirect, $desktopredirect - в этих параметрах указываем УРЛ (с http://), на который перекинуть, если зашли с мобильного устройства типа отличного от вышеприведенных. По умолчанию false - просто вернет true (зашли с мобильного устройства), никуда не будет редиректить (перекидывать).
Функция всегда возвращает массив из 2-х элементов:
$mobile = mobile_device_detect();
$mobile = true или false (мобильное устройство или десктопное).
$mobile = Строка. Тип устройства, по которому можно определить Смартфон это, iPhone или КПК
$mobile может быть:
"Apple iPad"
"Apple"
"Android"
"Opera"
"Blackberry"
"Palm"
"Windows Smartphone"
"Mobile matched on piped preg_match"
"Mobile matched on content accept header"
"Mobile matched on profile headers being set"
"Mobile matched on in_array"
"Desktop / full capability browser" (не мобильное устройство)
---
Все знают про гоночный чемпионат Формула 1, а про Формулу 2 слышали? Такой тоже есть и уже существует третий год.
Сделайте это наконец! Создайте мобильную версию своего сайта на WordPress и избавьте каждого посетителя с мобильного устройства от неудобства все время увеличивать масштаб страниц для читабельности текста и выполнять N-ное количество лишних движений.
Мы предлагаем вам 7 крутейших, а главное бесплатных плагинов WordPress, которые помогут вам это сделать всего за несколько минут.
Плагины для создания мобильной версии вашего сайта на WordPress
Скорее всего, термин «адаптивный дизайн» не является для вас новым, так как уже в течение лет так 2-х он находится у всех на слуху. Но если вы еще не знаете, то его смысл заключается в «преображении» или «адаптации» сайта для мобильных устройств. То есть посетителю с любого гаджета, будь то планшет или смартфон, будет так же удобно просматривать страницы вашего сайта, как и со стационарного ПК или ноутбука.
Ниже приведены четыре плагина, которые 100% помогут решить эту задачу - сделать мобильную версию вашего сайта на WordPress.
1. Hammy
Начнем с очень удобного плагина Hammy для изменения размеров изображений в соответствии с разрешением экрана мобильного устройства, на котором будет выводиться сайт. Он заменяет тег на
Для использования плагина необходимо установить некоторые точки останова и выбрать элемент 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, так как они не очень совместимы.
Заключение
В сфере веб-дизайна важно и нужно всегда следить за новинками, особенно, если они действительно могут быть вам полезны. В нашем случае, «адаптивность под мобильные устройства» уже становится стандартной функцией, которую необходимо использовать всем владельцам сайтов и соответствовать, так сказать, требованиям эре мобильных гаджетов.
Если вы уже использовали какой-либо плагин из этой серии или у вас есть свой вариант, которого нет в нашем списке – не жадничайте, делитесь с другими пользователями.
C 21 апреля Гугл начал понижать в мобильной выдаче сайты, не оптимизированные под портативные устройства. Это заставило многих начать действовать и приводить свои сайты в соответствие с понятием mobile-friendly. И это неудивительно:
- 23% продаж в Интернете сегодня совершается именно через телефоны.
- Всемирной паутиной всё больше пользуются обладатели смартфонов и мобильных ПК.
- 52% обладателей планшетов совершают покупки именно со своих портативных гаджетов.
Поскольку число мобильных пользователей растёт семимильными шагами, и Интернет-пользователи перебираются из десктопных ПК в телефоны и планшеты, стоит подумать о перспективности своего Интернет-проекта и о том, сможет ли он существовать в будущем в постоянно усиливающейся конкурентной борьбе. Именно по этой причине об адаптивном дизайне важно позаботиться уже сегодня.
Как выглядит ваш Интернет-ресурс в глазах поисковиков? Приходится ли увеличивать масштаб, скроллить текст по горизонтали, чтобы его хоть как-нибудь прочесть? В таком случае, вы можете потерять большую долю пользователей, ухудшить поведенческие факторы. Из-за этого сайт понижается в выдаче и страдает посещаемость. Пользователи посещают порой десятки Интернет-ресурсов в день, поэтому неудобный контент они, скорее всего, пропустят и не станут изучать для экономии времени.
Как сделать дизайн сайта адаптивные
- Конечно, если вы специалист в веб-программировании, вы можете написать код на HTML 5 с использованием особого дизайна и адаптивных конструкций. Если нет, для этой цели можно нанять профессионала. Однако есть способы проще.
- Так, если ваш сайт построен на базе CMS (к примеру, Джумла или Вордпресс), вы можете изначально приобрести или скачать адаптированный под разные устройства шаблон, и затем уникализировать его самостоятельно.
- Есть ещё такой способ, как создание медиазапросов в CSS3. Они представляют собой условия, которые вы можете прописать, для того чтобы страницы отображались тем или иным образом в зависимости от размеров окна браузера и используемого устройства. Например, можно задать условие (правило @media) выводить конкретные стили, если ширина экрана менее 600 пикселей. Впрочем, это только один пример. Условий гораздо больше. Если вы что-либо понимаете в CSS верстке, разобраться с медиазапросами не очень сложно.
- Применение фреймворков – ещё один способ, который любят применять дизайнеры за простоту их реализации. При умении работы с адаптивными фреймворками можно сэкономить массу времени. Их список можно отыскать на сайте 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 предусмотрено ведение статистики, имеется большое количество настроек. Так, вы можете изменять шрифты, их размер и цвет, добавлять собственное лого и графические элементы. Плагин легко адаптирует сайт под различные размеры, ориентацию экранов, браузеры.
Таким образом, даже не имея представления о вёрстке, сегодня можно поставить адаптивный шаблон для сайта/блога или сконструировать что-то с помощью онлайн сервисов. Уделите ему немного времени – и ваши посетители отблагодарят вас повышением конверсии и улучшением поведенческих факторов.