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

Мобильная версия блога

Мобильная версия блога

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

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

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

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

О необходимости установки мобильной версии для блога, если вы ещё этого не сделали, мы поговорили. Теперь о вариантах установки. Их множество, я выделяю для себя два.

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

  1. Адаптивная WordPress тема для блога.
  2. Установка и настройка плагина MobilePress.

Адаптивный дизайн блога

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

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

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

Установка и настройка плагина MobilePress

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

Итак, первым делом скачайте плагин и загрузите в папку /public_html/wp-content/plugins/, либо зайдите в админ-панели Плагины – Добавить новый и в поиске наберите MobilePress. После этого установите плагин и активируйте его.

После установки в админке, в меню боковой панели у вас появится MobilePress. Далее, идем MobilePress – Settings (см. криншот ниже), по-русски не шпрехает, как я говорила, поэтому буду переводить.

Настройки MobilePress

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

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

Следующие два пункта настройки комментариев и мобильный сайт или нет (оставляйте “No”, иначе будет показывать на любом устройстве только мобильную версию).

Когда будете производить настройки, откройте в другом окне http://адрес_вашего_блога/?mobile, тогда будет видно, что вы там настраиваете. По этому адресу и будет открываться ваш блог на мобильных устройствах. После того как сделали настройки сохраните, нажмите кнопку Save Settigs. Если и так все устраивает, оставляйте как есть и не заморачивайтесь, все будет работать.

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

Вам понадобятся две программы FileZilla и Notepad++. Все файлы темы находятся в папке /public_html/wp-content/plugins/mobilepress/themes/default. Скачиваем их при помощи FileZilla себе на компьютер и правим в Notepad++.

В файле style.css можно задать нужные стили темы, цвет шапки, футера, шрифтов. Далее открываете все скачанные php-файлы в блокноте Notepad++, смотрите на вашу мобильную версию и при помощи Ctrl+F ищите все что видите написанное на вражеском языке и в файлах меняете на родную речь. index.php – файл главной страницы, single.php – страница сообщения, footer.php – подвал блога и так далее. Правите и при помощи FileZilla загоняете с заменой в блог, пока не увидите, что все как надо.

Так же в папке img замените иконку на свою, но учтите, что все ваши изменения в этих файлах пропадут, как только вы снова измените настройки MobilePress и нажмете Save Settigs.

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

Светлана Ковалева

Мастер креатива и нестандартных решений
ВКонтакте Facebook Twitter Одноклассники
Запись опубликована в рубрике Сайтостроение с метками , . Добавьте в закладки постоянную ссылку.
Подпишитесь на обновления блога:

11 комментариев: Мобильная версия для блога

  1. Роман Папаша говорит:

    Здравствуйте.

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

    ДОБРОГО Вам утра!

  2. Алла Цариган говорит:

    Спасибо, Светлана, за пост. Для меня эта информация очень своевременно потому, что я сейчас занимаюсь оформлением своего первого блога на WordPress.

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

  3. Коля говорит:

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

  4. Алексаша говорит:

    Здравствуйте!
    Может кто знает, как прописать урлу в футер на полную версию?
    /?nomobile – не катит, т.к. она ведет на главную, а хотелось бы, чтобы полная версия оставалась на той же странице, на которой находится пользователь.
    Заранее благодарен!

    • Алексаша, так вы поставьте ?nomobile или ?mobile, в зависимости от того что вы хотите увидеть, в конец ссылки на нужную страницу сайта.

Добавить комментарий