Меню

Настройка мобильной версии сайта wordpress jetpack



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

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

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

1. JetPack

Начнем с самого простого и, пожалуй, самого эффективного способа сделать сайт на WordPress дружественным для мобильных устройств. Набор инструментов JetPack позволяет решить эту задачу нажатием всего 1 кнопки. Более того: он наверняка уже у вас установлен в числе других базовых плагинов. Если да – то просто кликните по ссылке «JetPack» в меню администратора сайта и перейдите на страницу модулей. Там надо активировать «Mobile Theme» — и всё готово.

2. WPtouch

Следующий по своей эффективности в списке бесплатных инструментов — плагин WPtouch. Его скачали уже более 4,3 млн раз. Он позволяет сделать красивый и быстрый мобильный сайт буквально за пару минут, при этом не написав ни строчки кода. Платная версия под названием WPtouch Pro предлагает еще отдельную админ-панель и поддержку в системе тикетов.

3. WP Mobile Detector

У этого плагина есть автоматическое распознавание обычных мобильников и смартфонов. В зависимости от этого сайт загружается в совместимой версии для каждого конкретного мобильного телефона или другого гаджета (с учетом разрешения экрана, диагонали и других параметров). Всего есть 7 предустановленных вариантов мобильной темы оформления. Также этот плагин автоматически меняет размер и разрешение картинок в зависимости от пользовательского дисплея. Кроме того, здесь есть свои виджеты и сбор статистики.

  • Автоматическое определение устройства на основе базы из более чем 5 тыс различных мобильников и смартфонов.
  • Умение отличать стандартные «звонилки» и продвинутые мобильные гаджеты.
  • Сбор статистики по мобильным пользователям, включая число уникальных посещений, поисковый трафик и т.д.

4. WordPress Mobile Pack

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

Также плагин включает :

  • переключатель между мобильной и классической настольной темой;
  • набор поддерживаемых и распознаваемых устройств, включая темы для Nokia и браузеров на WebKit;
  • настройку цветовой палитры по темам с поддержкой твиков в CSS;
  • автоматическую адаптацию картинок и разбиение постов и страниц;
  • мобильную панель администратора;
  • виджет мобильной рекламы, поддерживающий такие платформы как AdMob или Google’s Mobile Adsense;
  • мобильную аналитику;
  • виджет для добавления бар-кодов на сайт, чтобы быстро добавлять сайт в закладки на мобильном устройстве при просмотре сайта на большом экране настольного ПК.

5. WP Mobile Edition

По сути перед вами — брат-близнец предыдущего плагина. У него есть все те же фишки и опции, но есть еще поддержка системы комментирования Disqus и мобильная карта XML с собственным генератором для сайтов, что хорошо скажется на поисковой оптимизации. Также этот плагин создает мобильную версию на поддомене вида m.facebook.com , что хорошо для ускоренного кэширования и реализации поддержки мобильных cookie.

6. Wapple Architect Mobile Plugin

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

Читайте также:  Sharepoint настройка службы поиска

7. MobilePress

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

8. Duda Mobile Website Builder

Плагин-конструктор Duda Mobile помог создать мобильные версии сайтов в том числе для таких проектов и изданий как Forbes, Huffington Post, NY Times. Он очень простой и быстро превращает ваш обычный сайт в мобильный. Работает со всеми темами оформления для движка WordPress и автоматически синхронизируется с вашим основным сайтом.

Источник

Как создать мобильную версию сайта на WordPress с помощью плагина

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

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

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

Однако прежде, чем что-либо предпринимать, убедитесь, что ваш сайт под мобильные устройства не оптимизирован. Это можно сделать, например, с помощью сервиса Google.

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

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

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

1. В панели управления сайтом откройте Внешний вид -> Темы.

2. На появившейся странице щёлкните Добавить новую.

3. Нажмите Фильтр характеристик, в области Разметка установите флажок Адаптивный дизайн, при желании настройте другие параметры и щёлкните Применить фильтры.

4. Из предложенных тем (на момент создания статьи их 1614) выберите и установите любую, активируйте её и снова проверьте сайт сервисом Google.

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

Источник

Мобильные плагины для WordPress

Мобильные плагины адаптируют сайт под мобильные телефоны и планшеты: посетителю удобно пользоваться сайтом с любого устройства.

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

Плагин JetPack


JetPack адаптирует сайт на WordPress для мобильных устройств нажатием одной кнопки. Отметьте “Включает мобильную тему JetPack” в блоке настроек “Расширения темы”. JetPack подойдет для мобильной адаптации блога и простого сайта.

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

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

За определённую сумму можно опубликовать свои мобильные приложения для Android и IOs в AppStore и Play Market.

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

Читайте также:  Все настройки meizu m2 mini

Чтобы просмотреть как будет выглядеть мобильное приложение конвертированное плагином, зайдите в блок настроек “Settings” и выберите “Simulate the App – Web Simulator”. Выберите нужную вам систему Android либо iOS.

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

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

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

Чтобы посмотреть как будет выглядеть версия сайта адаптированная под мобильные платформы, нажмите в настройках плагина кнопку “Preview Theme”.

Платная версия под названием WPtouch Pro предлагает еще отдельную админ-панель и поддержку в системе тикетов.

Мобильный плагин WP Mobile Detector

Плагин WP Mobile Detector автоматически определяет модель смартфона пользователя и в зависимости от этого загружает для него одну из выбранных вами тем. При этом тема сайта со стационарного ПК или ноутбука останется прежней. У вас может быть несколько различных тем для различных устройств. Также плагин WP Mobile Detector автоматически меняет размер и разрешение картинок в зависимости от пользовательского дисплея. Плагин работает с более чем 5000 видов мобильных телефонов и смартфонов.

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

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

Мобильный плагин WP Mobile Edition

Плагин WP Mobile Edition, как и WP Mobile Detector, определяет популярные мобильные устройства и показывает контент в том разрешении и качестве, которое необходимо конкретному мобильному телефону. WP Mobile Edition создает мобильную версию на поддомене вида m.facebook.com с индивидуальными настройками и перенаправляет всех мобильных пользователей на него. Это необходимо для ускоренного кэширования и поддержки мобильных cookie.

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

Сделайте основные настройки плагина и задайте функции темы.

Источник

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

Настройка Jetpack by WordPress.com

Давайте продолжим изучать плагин Jetpack by WordPress.com, в данной статье остановимся на его настройках.
Скачать исходники для статьи можно ниже

1. Функция “Публикации”

Позволяет осуществить автопостинг ваших новых статей в социальные сети, такие как: Twitter, Facebook и другие.

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

Как видите, автопостинг возможен в Facebook, Twitter и LinkedIn , tumblr., Yahoo.

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

– входим в свой Twitter аккаунт – twitter.com.

– жмем на ссылку “Add new Twitter connection” (на скриншоте выше показана синей стрелкой).

Далее происходит автоматическая привязка вашего сайта к twitter аккаунту.

Теперь при написании новой статьи на своем сайте, около кнопочки “Опубликовать” в редакторе записей, вы увидите информации о автопостинге:

2. Функция подписки.

Позволяет добавить в форму комментирования два параметра:

– “Notify me of follow-up comments by email” (Подписаться на уведомления о новых комментариях по почте)

– “Notify me of new posts by email ” (Уведомлять меня о новых записях почтой)

Как это будет выглядеть?

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

Для этого в панели управления выбираем пункт “Плагины” и его подпункт “Редактор”, справа в списке плагинов выбираем Jetpack by WordPress.com, далее жмем кнопку “Выбрать” и внутри списка файлов плагина выбираем файл: jetpack/modules/subscriptions.php

Далее внутри кода данного файла (jetpack/modules/subscriptions.php) ищем наши английские строчки:

“Notify me of follow-up comments by email”

Читайте также:  Настройка firewall для торрента

и меняем на русские.

Конечно же, для поиска нужно воспользоваться функций поиска браузера, например для Firefox, в верхнем меню жмем на пункт “Правка” и его подпункт “Найти”.

Аналогично с выражением:

“ Notify me of new posts by email ”

3. Функция “Поделится”

Здесь все достаточно просто!

Нажимаем на кнопку “Настроить” (на скриншоте выше показана сеней стрелочкой) и попадаем как и в пункте 1 данной статьи в “Настройки общего доступа”, здесь спускаемся чуть ниже до пункта “Sharing Buttons”.

И здесь просто перетаскиваем значки сервисов из поля “Доступные сервисы” в поле “Включенные сервисы” и все готово!

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

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

Настроили и жмем на кнопку в самом низу “Сохранить изменения”.

Еще есть ссылка “Добавить новый сервис”

После нажатия на которую выплывет окошко:

Как видите нужно указать:

Например для того, чтобы добавить кнопку “ВКонтакте” в url сервиса нужно ввести:

Картинку 16*16 можно скачать по следующим url:

Нажимаем кнопку “Создать кнопку”, а далее перетаскиваем ее во “Включенные сервисы”:

4. Функция “Запись через электронную почту”

Жмем на кнопку “Настроить” (скриншот выше).

Далее жмем на кнопку “Enable Post by Email” (включить постинг через email).

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

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

Как видите есть еще две кнопочки:

– Regenerate Address – пере генерировать email.

– Disable Post By Email – отключить данную функцию – постинг через email.

Как же пользоваться?

Да очень просто!

Заходим например на mail.ru и создаем письмо, в котором в поле “кому” указываем свой персональный email, в поле “тема” – тему будущего поста, и набираем сам пост, далее нажимаем на кнопку “Отправить”.

Заходим на свой сайт и видим свои новый пост!

5. Функция Виджетов ( Extra Sidebar Widgets)

После установки плагина Jetpack by WordPress.com у вас появятся следующие виджеты (“Внешний вид” – “Виджеты”):

– Blog Subscriptions (Jetpack)

Добавляет форму регистрации, чтобы люди могли подписаться на ваш блог по email.

– Facebook Like Box

Отображение Facebook Like Box для подключения посетителей к вашей страницы на Facebook.

Отображение мини-версии Gravatar профиля.

Отображение изображения на боковой панели.

– RSS Links (Jetpack)

Ссылки на RSS блог каналы.

– Top Posts & Pages

Показывает ваши самые популярные посты и страницы.

Показывает ваши последние твитты в твиттере.

PS: Статью буду потихоньку дописывать.

Похожие записи:

Настройка Jetpack by WordPress.com : 7 комментариев

Здравствуйте! Не могли бы вы мне помочь, как из пункта (1.) сделать как в пункте (2.) или (3.)

Даниил, особых отличий не заметил на картинке, если хотите убрать надпись “Поделись!” – то удалите надпись в поле “Ярлык” (пункт 3 данной статьи), возможно вы имели ввиду как добавить кнопку “ВКонтакте” в Jetpack – данную информацию добавил в статью в пункт 3.

Добавьте пожалуйста информацию, о том, как настроить комментирования JetPack-a… а то вроде включил функцию, но как сделать данную форму комментирования не понимаю.

Спасибо.Отличная статья Константин!Жаль у тебя времени не хватило дописать остальные функции поагина…Придется самому разбираться:)

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

Cɦildrеn right now watch tv for long hours.

Привет, спасибо за очень интересный обзор, не подскажете, как можно отредактировать мобильную версию сайта установленную с помощью Jetpack?

Источник

Adblock
detector