WordPress версия мобильная: Создание Мобильной Версии сайта WordPress за 10 минут – Мобильная версия WordPress-блога с плагинами и без них

Мобильная версия WordPress, как её установить?

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

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

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

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

Плагин мобильной версии WordPress

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

Для этого переходим к добавлению нового плагина в админке:

Затем в форме поиска необходимо ввести название плагина:

Под формой поиска появится информация о расширении, а также кнопка для установки:

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

У WPtouch Mobile Plugin довольно много настроек, поэтому рассмотрим только самые важные:

1. Оформление.
Используя плагин бесплатно, вы не сможете применять разные темы, так как вам будет доступен только один вариант:

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

3. Меню и иконки.
Отличный способ сделать мобильную версию своего сайта уникальной. Здесь вы можете выбрать разные страницы для нового меню и установить к ним подходящие значки:

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

Согласно последней информации от Google, этот поисковик начинает учитывать, насколько качественную мобильную версию предлагают вебмастера своим посетителям (и вообще, есть ли они). Поэтому, обязательно добавляйте WPtouch Mobile Plugin в список плагинов.

Платная версия WPtouch Mobile Plugin

Чтобы получить больше возможностей этого расширения, вы можете купить полную версию плагина. Обойдется это от 69 до 349$ (выбирайте по количеству сайтов):

Деньги можно вернуть на протяжении 2х недель с момента покупки. Стоит ли платить за этот плагин? Вы как минимум не сможете воспользоваться разделом настроек «Реклама», а без этого не получится монетизировать трафик.

Хотя есть решение, зайдите на хостинг, перейдите в папку с плагином (/wp-content/plugins/wptouch/themes/Bauhaus/default) и найдите файл single.php:

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

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

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

Вам также будет интересно:
— Как бороться со спамом WordPress?
— Кнопка вверх и защита от спама WordPress
— Как выглядит WordPress админка?

Как сделать мобильную версию сайта на WordPress: Bootstrap, плагин WPtouch, прочие решения

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

Как и многие, я получил письмо такого содержания:

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

Проблема есть, вот характерный пример:

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

WPtouch

Проверить, как видит гугл ваш сайт с точки зрения адаптации к мобильным устройствам : https://developers.google.com

Google предложил замечательный плагин WPtouch — прекрасное решение, прекрасное своими возможностями, настройками, наличием просто шикарной про-версии (100 баксов за установку на 5 сайтов), где ещё больше настроек и интеграции с iOS и Android.

Окрылённые, начинаем тестировать, ставим на один из хостингов, где живут скромные 3 сайта с общей посещаемостью что-то около 20k в сутки (вначале нужно протестировать, прежде чем ставить на жизненно важные ресурсы). Несколько настроек и мобильная версия в деле.

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

Попробовали разные варианты настроек. Результата нет. Надо организовывать кэширование другими средствами, Hyper Cache работает с мобильными шаблонами (можно поставить, чтоб для соответствующих юзеров был отдельный кэш, но Wptouch не создаёт отдельных шаблонов, которые можно предложить Hyper Cache).

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

Прочие плагины

Суть работы: проверяем не с мобильного ли зашёл посетитель и если «да», то грузим ему сайт в отдельном шаблоне. Можно сделать вручную, нам понадобится код для определения устройства пользователя, код смены шаблона и сам шаблон. Мобильные light шаблоны без плагина Mobius iPhonsta jQuery Mobile Carrington Mobile

WordPress Mobile Pack, WP Mobile Detector, WPSmart Mobile, WP Tap News Press, WPmob Lite, WordPress Mobile Edition, WordPress PDA/Iphone.

Мой выбор: MobilePress — весьма компактное решение, но вместе с тем простое и эффективное. Главное: есть возможность скопировать мобильные шаблоны в папку с другими шаблонами и настроить соответствующий путь в плагине. Это решает выше описанную проблему с кэшированием через Hyper Cache, однако взаимодействие плагинов не всегда без глюков, иногда вместо обычной версии страницы выдаёт мобильную.

Bootstrap

Следующим решением стал JS фреймворк Bootstrap.

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

В этот раз стояла задача сделать новую адаптивную тему под WordPress на основе Bootstrap. С помощью примеров (http://getbootstrap.com/getting-started/#examples) сделать простенький wp шаблон можно за час или и того меньше.

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

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

Мобильная версия на поддомене

Библиотеки для определения мобильного браузера: http://detectmobilebrowsers.com

1. На поддомене делаем копию сайта с упрощённым дизайном, увеличенным шрифтом.
2. В основном сайте делаем проверку на браузер пользователя и,если это мобильный браузер, то делаем редирект на мобильную версию сайта.

Сервисы

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

• http://www.dudamobile.com
• http://www.mobilizetoday.ru

Адаптивный дизайн

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

Суть: В CSS файл сразу прописываем все данные для нескольких вариантов разрешения монитора.

@media screen and (max-width: 1280px) {
div.example {width: 1100px;}
}
@media screen and (max-width: 1024px) {
div.example {width: 980px;}
}

Указывать атрибут media

<link rel="stylesheet" href="site.css" media="screen" />

<link rel="stylesheet"href="mobile.css" media="handheld"/>

screen — обычный монитор, handheld — мобильное устройство.

Вариант, найденный на Хабре:

<link rel= «stylesheet» href=»handheld.css» media=»handheld,only screen and (max-device-width:480px)»/>

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

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

Итог: Bootstrap, прочие адаптивные решения, из плагинов — MobilePress.

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

Автор поста: AlexH

Мобильная версия WordPress сайта — плагин WP Mobile Detector

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

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

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

Перейдя по предложенной в сообщении ссылке по адресу https://www.google.com/webmasters/tools/mobile-friendly/ и, проанализировав там главную страницу своего блога, я получил вот такой грустный  результат:

Согласитесь, глупо терять солидную долю трафика (до 40%) из-за такой ерунды, как отсутствие мобильной версии сайта.

Можно адаптировать свою тему соответствующим образом вручную. А можно и обойтись специальным расширением для своей CMS. Второй вариант подойдет тем, кто несилен в верстке или, если очень хочется создать мобильную версию прямо сейчас, на время проведения работ по адаптации или вообще на постоянную основу. Как говорится: «Нет ничего более постоянного, чем временное».

Тестируя самые популярные плагины WordPress для решения поставленной задачи, я остановился на WP Mobile Detector.

В отличие от других, этот плагин оптимизировал все страницы wordpress-book.ru под мобильные устройства без замечаний. В бесплатной версии он не имеет ограничений по функционалу, а только по количеству предустановленных тем. Прост в настройке, быстр, легок и довольно симпатичен.

Настройка WP Mobile Detector

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

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

Без этого не будет работать кэширование мобильной версии вашего WordPress сайта.

Зайдите на свой сервер по ftp, найдите там папку cache и присвойте ей полные права, как на картинке.

Предупреждающее сообщение исчезнет.

Перевод WP Mobile Detector, удаление ссылок

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

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

Отредактируем файлы темы «bluesteel-mobile«, уже установленной по умолчанию. Использовать будем текстовый редактор Notepad++.

Итак, откройте файлы footer.php, sidebar.php, functions.php, и удалите из них коды, выделенные на скриншотах. Пути к файлам подчеркнуты красной чертой.

Для русификации, потребуется отредактировать файлы functions.php — в корне плагина и файлы шаблона — sidebar.php, search.php, index.php, comments.php, category.php, 404.php, archive.php, searchform.php. Просто замените все слова, нуждающиеся в переводе (напечатаны ядерно-черным шрифтом), на русские.

Перед редактированием, обязательно измените кодировку текстового документа с ANSI на UTF-8 (без BOM) в инструментах «Кодировки» текстового редактора Notepad++.

Для наглядности или для использования, скачайте уже отредактированный мной WP Mobile Detector по ссылке ниже.

Скачать русский WP Mobile Detector версии 1.8 без внешних ссылок.

Теперь ваш WordPress сайт имеет полноценную мобильную версию, поисковики и посетители обязательно это оценят.

Мобильная версия сайта на WordPress: ТОП-3 плагинов

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

Ниже представлены 3 плагина для WordPress, позволяющих адаптировать ваш сайт для мобильных платформ:

1) WP Touch

WPtouch автоматически переделывает ваш WordPress сайт для мобильных платформ, реализует подгрузку статей на ajax и плавные переходы при их просмотре с устройств типа iPhone, iPod touch, мобильных телефонах на платформе Android, мобильных устройствах BlackBerry OS6+ и многих других

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

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

2) WP Mobile Detector

WP Mobile Detector WordPress plugin автоматически определяет если пользователь использует мобильный телефон или смартфон, то в этом случае загружает совместимую мобильную тему WordPress для каждого.

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

3) MobilePress

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

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

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

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

VN:F [1.9.22_1171]

Rating: 3.1/5 (14 votes cast)

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

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

Что такое media-запросы?

Медиа-запросы позволяют менять стили оформления при изменении размера экрана. Таким способом можно адаптировать сайт под любые виды устройств. Медиа-запросы имеют несколько значений (например, print, screen или all), эти значения указывают носителя для которого будет использоваться таблица при предварительном просмотре страницы с того или иного устройства.

Поддержка браузеров.

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

Варианты применения.

Медиа-запросы можно задействовать тремя способами:

1. Подключения медиа таблицы (этот способ был применен в первой статье).
2. Импортирование в таблицу CSS.
3. Так называемые медиа-запросы.

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

Второй способ почти аналогичный первому только что подключение будет через директив @import в основную таблицу.

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

Вступление.

На роль подопытного кролика возьмем тему Clean-and-Clear, изначально она не адаптирована под мобильное устройство. В конце нашей работы эта тема будет корректно отображаться не только на мобильных устройствах, но также и на планшетах, таблетках. Если подумали, что будем делать плавающий дизайн, то вы ошибаетесь. Мы просто разобьём сайт на четыре основные таблицы.

1. Стандартный вид. Устройство-ПК.
2. Установленная ширина (min-width:769px) and (max-width:1024px). Устройство-планшет.
3. Установленная ширина (min-width:481px) and (max-width:768px). Устройство-tablet.
4. Установленная ширина (max-width:480px). Устройство-мобила.

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

Начало.

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

Данную структуру можно разбить на три основные блока.

.header-шапка сайта.
.content -главный блок в котором находятся все последующие.
.footer-подвал сайта.

Плюс вложенные блоки.
.searchform-поиск.
.title-название сайта.
.menu-навигация.
.main-посты.
.sidebar-сайдбар.

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

Приступаем к работе.

Открываем основной файл стилей CSS (style.css) в самом конце добавляем комментарий и делаем медиа запрос.
Первые прописываем стили для планшетных-устройств.

/**  Style Mobile planchette  **/
@media screen and (min-width:769px) and (max-width:1024px) {
.header{
        width:720px;
        margin:0 auto;
        }
.content{
        width:720px;
        margin:0 auto;
}

.menu{
        width:720px;
}

.main{
        width:100%;
}

.sidebar {
        width:100%;
}

.footer{
        width:720px;
}

p.form-submit, p.form-allowed-tags {
    margin-left:0px;
}
}

Пояснение. Фиксируем ширину header’a и выравниваем по центру, то самое делаем с основным блоком в котором находятся все остальные. Последовательно указываем стили menu, main — блок с постами, sidebar, footer и последнее p.form-submit — это элемент из внутренней страницы, отменяем ему левый отступ кнопки «отправить комментарий». Это те мелочи, которые некорректно отображаются. Нужно проверять сайт после каждого внесенного изменения.

Задаем стили для таблеток.

/**  Tablet  **/
@media screen and (min-width:481px) and (max-width:768px) {
.content{
        width:460px;
        margin: 0 auto;
}
.header {
        width:460px;
        margin: 0 auto;
}

.main{
        width:100%;
}

/**  Menu Mobile  **/
.menuwrapp_mobile{
        margin:0;
        position:relative;
        display: block;
}
.mobilemenu_toggle {
    background: url("images/menuicon.png") no-repeat scroll 100% 50% #3f3f3f;
    color: #fff;
    display: block;
    font-weight: bold;
    padding: 10px 20px;
    text-align: left;
    text-transform: uppercase;
        margin: 10px 0 0;
}

.mobilemenu_toggle:hover {
    color: #fff;
}

.menu_mobile{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D4D4D4;
    font-size: 18px;
    overflow: hidden;
    padding: 0;
        display:none;
}
.menu_mobile .sub-menu{
        background:none;
        display:block;
        position: static;
}
.menu_mobile li {
    border-top: 1px solid #e3e3e3;
}
.menu_mobile a {
    background: none repeat scroll 0 0 ##E5E5E5;
    color: #cc0000;
    display: block;
    font: 700 12px/40px Arial,sans-serif;
    padding: 0 0 0 20px;
    text-align: left;
}
.menu_mobile a:hover {
    opacity: 0.9;
        text-decoration:none;
        background:#CB0000;
        color: #fff;
}
.menu_mobile .sub-menu a{
        padding-left:30px
}
.menu_mobile  .sub-menu .sub-menu a{
        padding-left:30px
}

/** END  Menu Mobile  **/

.menu{
        display:none;
}

.header p.title {
    text-align: center;
    width: 100%;
}

form.searchform{
    display:block;
    float: none;
        margin:0 auto;
}

.sidebar {
    margin: 40px 0;
    width:100%;
}

#comments input {
    width: 348px!important;
}
#comments textarea {
    width: 348px!important;
}

p.form-submit, p.form-allowed-tags {
    margin-left:0px;
}
.footer{
    padding:0 15px;
        width: 430px;
}
}

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

После стилей мобильного меню идет основное меню .menu ему задано значение display:none; таким образом, мы его прячем, затем что подключается мобильное меню если это не сделать, то будет их два. И еще один момент, такое действие нужно проделать с моб.меню только за пределами медиа-запросов задать ему значение…

.menuwrapp_mobile {
display: none;
}

Надеюсь, с меню все ясно, идем дальше. А дальше у нас идет лого .header p.title задаем текст по центру и на всю ширину. Следующий блок form.searchform –это поиск, если ему задано обтекание, то отменяем и даем значение block чтобы выровнять по центру. Сайдбаром думаю здесь понятно, а вот #comments input – это уже внутренняя страница «форма комментариев» просто указываем нужную ширину. И последние два блока думаю тоже понятно, подвал и отмена отступа.

Для мобильных устройств.

/**  Mobile  **/
@media screen and (max-width:480px) {
.content{
        width:300px;
        margin: 0 auto;
}
.header {
        width:300px;
}

.main {
        width: 100%;
}

/**  Menu Mobile  **/
.menuwrapp_mobile{
        margin:0;
        position:relative;
        display: block;
}
.mobilemenu_toggle {
    background: url("images/menuicon.png") no-repeat scroll 100% 50% #3f3f3f;
    color: #fff;
    display: block;
    font-weight: bold;
    padding: 10px 20px;
    text-align: left;
    text-transform: uppercase;
        margin: 10px 0 0;
}

.mobilemenu_toggle:hover {
    color: #fff;
}

.menu_mobile{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D4D4D4;
    font-size: 18px;
    overflow: hidden;
    padding: 0;
        display:none;
}
.menu_mobile .sub-menu{
        background:none;
        display:block;
        position: static;
}
.menu_mobile li {
    border-top: 1px solid #e3e3e3;
}
.menu_mobile a {
    background: none repeat scroll 0 0 ##E5E5E5;
    color: #cc0000;
    display: block;
    font: 700 12px/40px Arial,sans-serif;
    padding: 0 0 0 20px;
    text-align: left;
}
.menu_mobile a:hover {
    opacity: 0.9;
        text-decoration:none;
        background:#CB0000;
        color: #fff;
}
.menu_mobile .sub-menu a{
        padding-left:30px
}
.menu_mobile  .sub-menu .sub-menu a{
        padding-left:30px
}

/** END  Menu Mobile  **/

.menu{
        display:none;
}

.header p.title {
    text-align: center;
    width: 100%;
}

form.searchform{
    display:block;
    float: none;
        margin:0 auto;
}

.sidebar {
    margin: 40px 0;
    width: 100%;
}

#comments input {
    width: 188px !important;
}
#comments textarea {
    width: 188px !important;
}
.footer  {
    padding:0 15px;
        width: 270px;
}

p.form-submit, p.form-allowed-tags {
    margin-left:0px;
}
}

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

И последнее…

На устройствах Iphone сайт может отображаться удаленно что приходиться увеличивать для полного размера. Решение этой задачи имеется на сайте разработчиков Safari с помощь мета-тега

<meta name="viewport" content="width=device-width" />

Его нужно прописать между тегами <head> после чего сайт будет отображаться в полном размере.

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

Скачать

AMP для WP — Ускоренные мобильные страницы — Плагин для WordPress

AMP for WP automatically adds Accelerated Mobile Pages (Google AMP Project) functionality to your WordPress site. AMP makes your website faster for Mobile visitors.

What’s New in this Version? | Priority Support | View Demo | Screenshots | Community

Extensions
Some useful extensions to extend AMP features, check AMP Adsense Support, Contact Form 7 Support, Email Opt-in Support and Call To Action Support. To view more, go to our Extensions page.

Support
We try our best to provide support on WordPress.org forums. However, We have a special community support where you can ask us questions and get help about your AMP related questions. Delivering a good user experience means a lot to us and so we try our best to reply each and every question that gets asked.

Bug Reports
Bug reports for AMP for WP are welcomed on GitHub. Please note GitHub is not a support forum, and issues that aren’t properly qualified as bugs will be closed.

Features:

• NEW — Gutenberg Support
• NEW — Divi and Elementor Support More Info
• NEW — Improved CSS Optimization (Tree Shaking)
• NEW — Google Fonts Support For All Designs
• NEW — Addthis Sharing Support
• NEW — AMP Infinite Scroll Support
• NEW — Photo Gallery by 10Web Support
• NEW — MEWE social network Support
• NEW — GDPR Compliance
• Out of the box compatiblity for Yoast SEO, All in One Seo, Rank Math, Genesis, SEOPress, Bridge Qode SEO, The SEO Framework and Squrilly SEO Plugin.
• Introducing Page Builder 3.0 for AMP! Learn More & Video
• New Default Theme for AMP called Swift
• 3 Pre-built AMP Layouts for Business websites and landing pages
• OneSignal Push Notifications integration
• Advanced WooCommerce Support More Info
• Gravity Forms Support More Info
• AMP Plugins Manager — Which allows you to disable a specific plugin functionality only in the AMP version
• Structured Data Options
• Page Break / NextPage (Pagination) Support
• Contact Form 7 Support More Info
• Graviry Form Support More Info
• Caldera Form Support More Info
• Ninja Form Support More Info
• Facebook Comments Support
• Github Gist Support
• Email Opt-in Subscription form support in AMP added
• Call to Action boxes and notification bars
• 9 Advertisement sizes — 2 More AD slots added recently
• Comments Forms in AMP.
• Native AMP Search functionality.
• Design 3 Watch the Video Overview
• Disqus Comments Support
• Google Tag Manager Support
• Page, Category & Tags Support Added
• Custom AMP Editor — Which allows you to override your Content that you had written in Post or page, so you can add the different content just for AMP.
• Mobile Redirection — More than 50% of your traffic is from mobile and you aren’t doing anything to improve their user experience, which means you are falling behind on SEO and it can result in lower SERPS. Lightning fast mobile version means faster User experience means more engagement which directly results in the lower bounce rate.
• Custom Post Type Support
• Star Ratings
• Drag & Drop Page builder Added
• 4 Designs for AMP
• AMP WooCommerce Support
• Switch on/off Support for Pages & Posts on AMP
• Translation Panel & RTL
• Internal AMP linking — You can browse AMP pages internally
• Related posts below the post
• Recent Comments list
• Automatically integrate AMP to your website.
• Google Adsense (AMP-AD) Support with 4 different Ad slots across the layout! The First Plugin to have this capability.
• Built in MGID Ads Support with 6 different ad slots.
• Google Analytics Support.
• User Friendly Theme Options Panel.
• Unlimited Color Scheme.
• Image Logo Upload.
• Supports Posts and Pages and other custom post types.
• Proper rel canonical tags which means that Google know the original page.
• Overlay Navigation Menu bar.
• Social Sharing in the Single.
• Sexy Design.
• Separate WordPress Menu for AMP version.
• Page builder & Shortcodes Compatibility.
• Carousel support for Gallery.
• Better Image stretching and resizing.
• Youtube Video Embed Support.
• Vine Embed Support.
• Twitter oembed Support.
• Instagram Embed Support.
• Facebook Video Embed Support.
• RTL Support
• Custom AMP FrontPage
• Notifications
• Alexa Metrics, Chartbeat, Hi-stats, Yandex Metrika, Piwik, Segment.com, StatCounter, Effective Measure and comScore Builtin Support
• Incontent & DoubleClick Support
• Great Support & Active Development.
• Widgets & WooCommerce
• Breadcrumb Support added
• Facebook Instant Articles Support Added
• AMP Installation Wizard that makes it easy to setup for new users.
• Category base remover support
• Tag base remover support
• 7 New Social Media Integrations added (Reddit, Tumblr, Telegram, Digg, StumbleUpon, Wechat, Viber)
• AMP Theme Framework Core Support Added. You can now create AMP templates of your own in just minutes. More
• NEW — Make AMP & Non-AMP Same with just one click!
• NEW — Allows you to use AMP as primary website!

JOIN CHAT GROUP COMMUNITY: Purpose of this group is to get proper suggestions and feedback from plugin users and the community so that we can make the plugin even better.

Getting Started:

1. User Documentation: The AMP for WordPress plugin is easy to setup but we have some tutorials and guides prepared for you which will help you dive deep with the plugin.

2. Developer Docs: We have created special documentations for developers and semi technical users who are willing to modify the plugin according to their own needs.

3. Support: We try our best to provide support on WordPress.org forums. However, We have a special community support where you can ask us questions and get help about your AMP related questions. Delivering a good user experience means a lot to us and so we try our best to reply each and every question that gets asked.

4. Premium Support: We will personally take care that your website’s AMP version is perfectly validated. We will make sure that your AMP version gets approved and indexed by Google Webmaster Tools properly and we will even keep an eye on AMP updates from Google and implement them into your website.

Credits

Some code used in this plugin was forked from ‘AMP for WordPress’ plugin https://wordpress.org/plugins/amp/ — License URI: http://www.gnu.org/licenses/gpl-2.0.html.
Mobile & Tablet detection library used https://github.com/serbanghita/Mobile-Detect — License URI: https://github.com/serbanghita/Mobile-Detect/blob/master/LICENSE.txt
PHP CSS Parser library used https://github.com/sabberworm/PHP-CSS-Parser — License URI: https://github.com/sabberworm/PHP-CSS-Parser#license (PHP-CSS-Parser is freely distributable under the terms of an MIT-style license.)

Can I add analytics?

Yes, you easily can. In fact, we have support for 12 Analytics companies. Including Google Analytics, Facebook Pixel, StatCounter, QuantCast, Chartbeat, comScore to list a few. Also, we have Google Tag Manager (GTM) support as well.

Can I add Ads in my AMP pages?

Yes, you can. We have 6 ad placement slots that are built in and strategically placed to get maximum views. Also, we have an extension from which you can insert ads between the content, will get more ad slots and also add custom banners to all the available slots.

Can I extend/Change the AMP design, so it suits my needs?

Yes, you easily can. We have created this plugin in such a way that it can easily be extended. Check out our AMP Theme Framework

Do you have any prebuilt designs?

Yes, we have AMP themes section where we have free and paid designs available. We also update it regularly. You can check it out our AMP Themes

I’m a developer and I want to add custom functionality for a client, can I do that?

Yes, of course. This plugin is very developer friendly, we have lots of hooks and filters that you can use to extend and customize according to the requirements. Also, we have developer documentation which we update regularly.

How do I report bugs and suggest new features?

You can report the bugs here

Will you Add New features to my request?

Yes, Absolutely! We would suggest you send your feature request by creating an issue in Github . It helps us organize the feedback easily.

How do I get in touch?

You can contact us from here

After deactivating this plugin my blogs page speed in Google Search Console increased. In Google Search Console under Enhancements —> Speed (expermental) tab red color line (slow URLs) went down drastically for both mobile and desktop views. Because of WordPress review guidelines I cannot insert Search Console’s screenshot. Please develop a lightweight theme like Astra for amp. I gave 5 star rating because it is not easy to make AMP plugin and there are only 3 amp plugins available. Out of those plugins this plugin has most customization options and developers of this plugin are releasing new version every week by fixing bugs and adding new features.

Ce plugin, y compris dans sa version de base, permet de booster le test à Google speed, et de se mettre globalement dnas les standards du moment. L’assistance est très réactive (dans la journée).

Actively developing and extremely useful plugin for anyone who wants to get the most out of their site on smartphones. Frequent updates, active and responsive support, as well as the most extensive AMP configuration options for a WordPress based site of all that I have tested in the last 3 months. Thank you so much for your work! You have a really chic and indispensable plugin)

This is a must have plugin for any WordPress site. The plugin seamlessly creates nice looking AMP pages. The support is excellent too!

If you have the patience and do not know the code. This is the best option for you. The support team is enthusiastic, always answers and fixes bugs quickly.

Globaly, it works, but configuration is a bit hard at the beginning. And it has with some minor flaws. But in the end, how do you request facebook to index your AMP ? I can’t find anything… :/

Посмотреть все 905 отзывов

«AMP для WP — Ускоренные мобильные страницы» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

1.0.19 (29th January 2020)

• Improvement: EWWW Image Optimizer plugin Compatibility #3984
• Fixed: WP Admin toolbar CSS is not loading when user is logged in #4076
• Fixed: AMP Options panel UI improvements done. #4088
• Fixed: video is not displaying in AMP when a video is inserted from gutenberg video module #4086
• Fixed: Performance section all features not working when Ezoic integration plugin is active. #4092
• Fixed: Playbuzz is not working #4085
• Fixed: RECENT POSTS label visible if no posts are available #4011
• Fixed: data-block-on-consent is missing for Vuukle comments when gdpr is enabled #4095
• Fixed: Remove Purge AMP CDN cache Settings buuton: #4099
• Fixed: When categories that we exclude from AMP through the plugin configuration present redirection problem along with mobile redirection option #4075
• Fixed: Alignment issue in GDPR Privacy link. #4101

1.0.18 (27th January 2020)

• Fixed: Debug warnings with Imagify plugin #3908

1.0.17 (27th January 2020)

• Improvement: Compatibility with the Imagify plugin #3908
• Improvement: EWWW Image Optimizer plugin Compatibility #3984
• Improvement: Accessibility score of Amp Layouts improved in Lighthouse test #4078
• Fixed: Admin toolbar is not showing on custom amp page #3718
• Fixed: Bug in Instant article’s Single option #3891
• Fixed: If the user adds the social share link in the users section then we need to show social share icon #3976
• Fixed: Treeshaking is enabled then » Content sneak to peek » button is showing below the content. #4069
• Fixed: AMP take over is not working on home page when user have no posts. #4056

1.0.16 (24th January 2020)

• Improvement: Need to built compatibility with «Mistape» plugin. #3974
• Improvement: Need to make compatibility with «Transposh WordPress Translation» plugin #3895
• Fixed: A Table is created trough Gutenberg then CSS of that Table is failing to load in AMP. #3902
• Fixed: When user search from the AMP site then results page should be in non-AMP. #3977
• Fixed: Add ‘wp-color-picker’ as dependency while registering the script #4061
• Fixed: The «for» attribute is removing in AMP #4054
• Fixed: Table heading style is not working properly #4050
• Fixed: Need to change the description of AMP page builder compatibility options when plugin is activated. #3899
• Fixed: Thumbnail image of homepage should show properly after changing the image size #3882
• Fixed: Need to remove the default AMP functionality from the User’s theme as it is breaking the layout. #4068
• Fixed: YOAST SEO Analysis is not working properly with AMP Page Builder. #4030
• Fixed: When AMP is disabled on pages,give an option of hide/unhide AMP on Blog page when in edit mode. #4066
• Fixed: The tag ‘template’ requires including the ‘amp-mustache’ extension JavaScript. #4079

Full changelog available at changelog.txt

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

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

Многие вебмастера в марте этого года получили уведомления от 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 и в появившемся окошке перейти в режим просмотра с мобильных (красная стрелочка), а далее выбрать само устройство (белая) и обновить страницу:

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

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

Но вообще, для вставки AdSense у них предусмотрена Pro-версия.

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

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

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

Loading…