BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Wordpress » Как создать мобильную версию блога для WordPress. Плагин MobilePress

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

2014-05-15 / Вр:23:33 / просмотров: 9026

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

Совсем недавно я задумался о том, как выглядит мой блог на мобильных телефонах. Ведь это очень важно, так как многие из молодежи (студенты, школьники) используют для просмотра веб-сайтов мобильные устройства или планшеты. Чтобы посмотреть, как выглядит блог/сайт на мобильном устройстве или планшете, существуют различные онлайн сервисы. О них я расскажу в следующей статье. Когда я посмотрел через мобильный телефон на свой блог, я ужаснулся – он абсолютно нечитабелен, то есть, быть на блоге очень неудобно.

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

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

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

Итак, скачайте и установите плагин MobilePress.
Скачать плагин MobilePress можно по адресу:

wordpress.org/plugins/mobilepress/

Как устанавливается плагин, вы знаете, но если не знаете, тогда прочитайте статью «Как установить плагин на вордпресс».
После того, как вы установили и активировали плагин MobilePress, можно перейти к его настройке. Для этого перейдите по меню слева «MobilePress» => «Settings».
Откроется страница с настройками, правда, на английском языке. Не беда, сейчас все переведем.

Front Page Display (отображение первой страницы) – здесь нужно указать, что показать на главной странице. Я оставил по умолчанию Latest Posts (последние посты).

Posts Per Page (сообщения на странице) – здесь указываем цифрой, сколько выводить постов на главной странице.

General Settings (общие настройки) – здесь отмечаем птичками, что показывать на главной странице:
Show Categories  → рубрики;
ShowPages → страницы;
ShowPostTags → теги;
ShowPostThumbnails → миниатюры.
○ Я выбрал все четыре.

Comments Settings (настройки комментариев) – здесь указываете, где могут оставлять читатели мобильные комментарии
PostsandPagesпостов и страниц;
PostsOnly → только посты;
PagesOnly → только страницы;
DisableCommentsотключить комментарии.
○ Я выбрал PostsOnly→ только посты.

Force Mobile Site (усилить мобильную версию) – здесь нужно указать «No». Если вы укажите «Yes», то сайт будет показываться на любом устройстве только в мобильной версии.

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

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

Увеличить?

Вот так выглядит мой блог BlogGood.ru на мобильном телефоне SamsungGTi9100 (GalaxyS2-mdpi: 320 X 533 – Android 2.3).

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

 

Редактирование плагина MobilePress

Не знаю, как вам, но мне не нравятся надписи «Latest Posts», «Next Page», «Pages», «Categories» в мобильной версии блога. Предлагаю перевести и сделать изменения на русском языке:

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

Для редактирования плагина MobilePress откройте FTP клиент (я рекомендую вам FTP клиент FileZilla).
Установите FTP соединение с хостингом (там, где находится ваш блог)
Перейдите в директорию /public_html/wp-content/plugins/mobilepress/themes/default и откройте файл «index.php» редактором Notepad++:

Редактирование плагин MobilePress

Найдите в файле «index.php» слова «LatestPosts» (строка №5), «NextPage» (строка №24), «PreviousPage» (строка №25)

Редактирование плагин MobilePress

Увеличить?

и замените английские слова русскими:
«LatestPosts» – последние посты блога;
«NextPage» – следующая страница;
«PreviousPage» – предыдущая страница.

 Внимание:   чтобы русские слова не отображались в виде кракозяблей, то преобразуйте файл в кодировку UTF-8 без BOM, а потом заливайте на хостинг в директорию /public_html/wp-content/plugins/mobilepress/themes/default.

Далее откройте файл «sidebar.php» редактором Notepad++
Найдите в файле «sidebar.php» слова «Pages» (строка №3), «Categories» (строка №13):

Редактирование плагина MobilePress

и замените английские слова русскими:

«Pages» – страницы;
«Categories»– категории.

Откройте файл «single.php». Найдите строку № 27 (она пустая) и добавьте в эту строку вот такой код:

<?php get_sidebar(); ?>

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

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

Редактирование плагин MobilePress

Открываю файл «footer.php». Нахожу и удаляю полностью строку № 6, она не нужна:

Редактирование плагин MobilePress

Увеличить?

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

Список плагинов для мобильной версии блога на WordPress:

1. WordPressMobilePack

2. WPtouchiPhoneTheme.

3. WordPressPDA& iPhone.

4. WPmob Lite.

5. MobilePress

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

40 Ответов на комментарий - Как создать мобильную версию блога для WordPress. Плагин MobilePress

  1. Игорь Черноморец

    Спасибо за этот пост,так как я уже пытался преобразить свой блог на мобильную версию с помощью двух плагинов из вашего списка, (1 и 4) но не понравилось!Сейчас попробую этот плагин,посмотрим как выйдет! Как сделаю,отпишусь!

    Ответить

  2. Мирана

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

  3. артем

    здравствуйте. поставил MobilePress, но он почему-то “косячит” слегка. смотрю на мобильном устройстве – некоторые страницы открываются нормально в мобильной версии, другие же открываются в полной версии не корректно. и наоборот, когда открываю сайт на ноутбуке, некоторые страницы открываются в мобильной версии. не подскажете, как исправить этот баг? В Force Mobile Site (усилить мобильную версию) я указал «No», кэш обновлял, но все равно вылазят такие косяки…

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Артем! Дайте адрес сайта!

    Ответить

    артем отвечает:

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Артем, давайте Вы сегодня установите плагин снова в 22:00 и я посмотрю. Может что-то получиться сделать? В крайнем случае в 23:00 Вы сможете удалить плагин.

    Ответить

    артем отвечает:

    ОК! Спасибо!

    артем отвечает:

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

    Степан => автор блога

    Степан => автор блога отвечает:

    Артем, какая именно страница не верно отображается. Я пробежался по Вашему сайту в мобильной версии, пока что все гуд!

    артем отвечает:

    вот в данный момент я заходил со смартфона sony из браузера гуглхром. к примеру, статьи – горнолыжные курорты свердловской области, заточка кантов…, безопасность на горнолыжном склоне открываются в полной “кривой” версии. и наоборот – захожу на главную страницу сайта с ноутбука из гуглхрома – отображается мобильная версия сайта. то есть почему-то не происходит корректное переключение версий сайта, соответствующее тому устройству, с которого заходит пользователь.

    артем отвечает:

    подозреваю просто, что я что-то выпилил из файлов, когда точил сайт…может что-то убрал из .htaccess

    Степан => автор блога

    Степан => автор блога отвечает:

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

    артем отвечает:

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

    артем отвечает:

    баннер адсенс у меня не отображается в моб версии :?:

    Степан => автор блога

    Степан => автор блога отвечает:

    Артем, Вы делали какие-то исправления в самой мобильной теме (…/public_html/wp-content/plugins/mobilepress/themes/default). Если делали, то какие?

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Степан => автор блога

    Степан => автор блога отвечает:

    Попробуйте плагин для рекламы “whydowork adsense”.

    артем отвечает:

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

    Степан => автор блога

    Степан => автор блога отвечает:

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

  4. артем

    нет, исправлений в мобильной теме я не производил

    Ответить

  5. артем

    сделано. “косячит” плагин W3 Total Cache. при его отключении мобил версия сайта работает на ура. другие плагины никакого влияния не оказали. вот только не хотелось бы отключать W3 Total Cache, неплохо он отрабатывает свой хлеб. :smile:

    Ответить

  6. Тамара Полякова

    Поставила плагин MobilePress Настройки сделала как у тебя. Больше ничего не меняла. Английские названия не меняла и футер тоже не трогала. Боюсь не справлюсь. Пока пусть будет так. Потом поумнею – сделаю. Открыла для проверки как выглядит мобильная версия на своем компьютере. Отображается все нормально вроде бы. Только текст расписан на всю ширину экрана компьютера. Так должно быть? Изображения расположены все с левой стороны, а текст – на всю ширину. У нас нет смартфонов и телефонов, чтобы проверить как отображается на мобильных устройствах мой сайт.Не смог бы ты Степан проверить! Спасибо тебе за очень большую помощь!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Проверил сегодня Ваш сайт, плагин мобильной версии не установлен или установлен не правильно.
    По адресу “http://адрес сайта/?mobile” у Вас должна была появиться мобильная версия сайта. Можете посмотреть у меня на блоге “http://bloggood.ru/?mobile”

    Ответить

  7. Андрей

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Андрей, попробуйте скачать адаптированный шаблон или сделать на Bootstrap и натянуть на движок WordPress.

    Ответить

    Андрей отвечает:

    Хороший шаблон стоит денег, скачать не вариант

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Почему, скачать не вариант?

    Ответить

  8. Вера

    За статью огромная благодарность, все по делу.

    Ответить

  9. Андрей

    Возможно ли в MobilePress исключить из мобильной версии определённые страницы сайта?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Если честно, не пробовал исключить из мобильной версии определённые страницы сайта!

    Ответить

    Степан отвечает:

    Андрей, попробуйте перейти в директорию «/public_html/wp-content/plugins/mobilepress/themes/default» и откройте файл «functions.php». Установите вот такой код:

    function exclude_post($query) {
    if ($query->is_home)
    {$query->set('post__not_in', array(1, 2) );} // id записи (поста)
    return $query; }
    add_filter('pre_get_posts','exclude_post');
    

    1, 2 – это id записи (поста)
    Должно заработать

    Ответить

  10. xsi

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    На моем блоге тоже такой глюк есть?

    Ответить

    xsi отвечает:

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

    www.obobrali.ru/2015/05/borba-s-mobilepress-on-ne-zapominaet-vyibor-polzovatelya

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

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Спасибо за ответ и идею!

    Ответить

  11. Николай

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте! В нормальную ширину, это в какую?

    Ответить

  12. Юрий

    Не подскажете как указать плагину название меню для выбора? У меня на сайте их несколько, но он берет верхнее. Да и разбрасывает его как-то по своему…. Спасибо.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Нужно ковыряться в коде и делать изменения. Рассказывать что и как делать, это получиться целая статья а не комментарий. Юрий, могу вам подсказать что решение этой задачи в файлах мобильной темы (/public_html/wp-content/plugins/mobilepress/themes/default). Меню выводите виджетом. В файлах выводит виджет

    <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('название')) : ?>
    <p>виджеты не подключены</p>
    <?php endif; ?> 
    

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки:

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 787
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4386