Відкрити меню

Як створити мобільну версію блогу на WordPress?

День добрий, товариство! Мобільна версія блогу webdigest.com.ua вже функціонує певний час, але тільки сьогодні я зібрався написати про це пост. Особисто я майже не користувався мобільними пристроями, до недавнього часу в мене був старенький телефон, який міг тільки здійснювати дзвінки та відправляти повідомлення, та коли в руки мені потрапив смартфон – про мобільну версію ресурсу я вирішив задуматись серйозніше.

Створюємо мобільну версію блогу

Не буду розказувати про необхідність такого рішення, адже всі знають, наскільки сьогодні популярні планшети, IPhone, різного роду смартфони і дуже багато користувачів заходить на улюблені ресурси з мобільних пристроїв. Якщо ж Ваш блог читач додає собі в закладки, то цілком ймовірно, що при нагоді він зайде на ресурс з підручного мобільного девайсу, тому подумати про наявність відповідної версії блогу – просто необхідно.

Як це зробити? Варантів виникає два – робити адаптивну верстку, під мобільні пристрої або вирішувати за допомогою інших методів, плагінів. Наприклад, мій нотатник www.olegvoloshchuk.com – базується на останній (в технічному плані) темі, яка адаптована розробником для відображення на різних мобільних пристроях, тому тут мені особливо і немає що вирішувати. А от блог www.webdigest.com.ua використовує тему, яка не розрахована на мобільні девайси. І хоча шаблон також авторський, з останніми технічними рішеннями, але мобільної адаптації в ньому немає.

Я не планую ближчим часом змінювати зовнішній вигляд блогу, мені цей одяг ресурсу надзвичайно подобається, тому необхідно було шукати інший спосіб створення саме мобільної версії. Вигадувати велосипед я не став – вирішив використати звичайний плагін для WordPress. Це просто, зручно, не потребує якихось змін коду – встановив плагін, налаштував і все працює в кращому вигляді.

Якщо вирішити зробити мобільну адаптацію за допомогою плагіна просто, то от з вибором самого додатку прийшлось побавитись. Справа в тому, що таких плагінів є декілька, але не всі відповідали вимогам, які я ставив. Найголовніше було – простота в налаштуванні та надійна робота. Протестувавши декілька, я зупинився на одному – це  MobilePress.

Мінімум налаштувань – тільки найнеобхідніше для створення мобільної версії. Отже, що ми бачимо, коли заходимо на ресурс, який не адаптований під мобільні пристрої.

Просте відображення блогу

В принципі – якщо шаблон якісний, виконаний за всіма правилами верстки, то відображатись блог буде нормально, нічого не з’їде, не попливе, але читати інформацію в такому випадку буде не зовсім зручно. На екранах від 10 дюймів – все буде в повному порядку, а от на менших … прийдеться збільшувати області блогу, пересуватись по сторінках вліво-вправо … приємного не дуже багато.

Наприклад, колись в мене був iPhone 3GS з розміром екрану 3,5″, а буквально вчора я придбав Samsung Galaxy Ace 3 з 4-дюймовим екраном – зручного мало, навіть на 5 дюймах юзабіліті змушує бажати кращого, тому створення мобільної версії ресурсу – річ просто необхідна.

Сам плагін MobilePress надзвичайно простий та зручний – встановили, поставили дві-три відмітки і все, можете бути спокійними за враження від свого блогу при відображенні на смартфонах, як приклад. Наперед скажу – плагін не дублює контент, не потрібно піддоменів чи щось таке. MobilePress має власну тему оформлення і при відвідуванні ресурсу з мобільного пристрою видає користувачеві потрібну версію блогу.

Наприклад, якщо відвідувач заходить з ноутбука, звичайного ПК – плагін спить, якщо ж захід відбувається з смартфона чи планшета – про це іде сигнал і користувачам показується версія ресурсу, яка створена самим плагіном.

Давайте перейдемо до самого MobilePress. Встановлюємо звично, як будь-який плагін WordPress (Плагіни-Додати).

MobilePress

В боковій панелі інструментів у нас з’явиться окрема консоль для налаштування MobilePress.

Консоль MobilePress

Але перед тим, як переходити на блог і дивитись на результат, я рекомендую скинути кеш в плагіні Hyper Cache (або в аналогічному, який Ви використовуєте). Якщо ви це не зробите – результату можете не побачити, перед очима будуть закешовані, старі сторінки блогу.

Йдемо в налаштування плагіна для кешування:

Плагін кешування

Та скидаємо все, що міститься в пам’яті Hyper Cache.

Чистимо кеш

Тепер ідемо в панель налаштувань MobilePress – тут все просто, аскетично, немає нічого зайвого.

Налаштування MobilePress

Тут Ви можете виставити, що показувати (пости, категорії, сторінки), що коментувати, скільки постів показувати на сторінці. Більше нічого і немає, але більше нічого і не потрібно. Не чіпайте пункт Force Mobile Site, якщо поставите Yes, то мобільна версія блогу буде відображатись завжди, з будь-якого пристрою.

Я собі поставив ось такі налаштування: показувати 5 останніх публікацій, показувати все, крім тегів, коментувати пости і сторінки.

Мої налаштування MobilePress

Тепер я заходжу на блог зі смартфона і бачу перед собою зовсім іншу картину.

Готова мобільна версія

Користувач спокійно може гортати публікації, переглядати в рамках свого екрану – нічого зайвого йому не потрібно робити. Опускаюсь трішки нижче і бачу всі свої сторінки та категорії.

Мобільні сторінки та категорії

Якщо відкрити якусь публікацію, то можна побачити, що відображення коректне, всі картинки адаптуються під розмір екрану – все чудово.

Мобільний пост

Коментарі також не викликають запитань чи претензій – все чітко та зрозуміло.

Мобільні коментарі

Якщо Вас будуть мучити англійські слова, то в теці

/plugins/mobilepress/themes/default

лежить ця мобільна тема, яку можна відредагувати. Щось змінювати в оформленні я не буду, цілком нормальний мобільний шаблон, єдине – перекладу англійські слова.

Ось так, без особливих зусиль, за допомогою одного плагіна ми створили повноцінну мобільну версію свого ресурсу. Сам плагін MobilePress живий, останнє оновлення було 9-08-2013 і перевірено на сумісність з WordPress 3.6.1

Якщо є такі додатки, які дозволяють вирішити проблему з створенням мобільної версії, то вигадувати якісь інші, складніші рішення – потреби не бачу. Не нехтуйте цим питанням, створюйте мобільний аналог свого ресурсу, тим більше – зробити це можна дуже просто.

Бажаю Вам вдалого дня, багато відвідувачів і гарного настрою.

Шануйтеся!

P.S. Якщо Ви користуєтесь плагіном для кешування Hyper Cache, рекомендую зробити наступне. Переходьте в налаштування плагіну Hyper Cache і знайдіть пункт “Конфігурація для мобільних пристроїв“.

В першому полі WordPress Mobile Pack галочку НЕ СТАВИТЕ.

Відмічаєте галочкою друге поле “Визначати мобільні пристрої“, а в третє поле “Список мобільних агентів“, замість існуючих там записів, прописуєте наступне, без цифрового позначення:

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

Нічого цікавогоТак собіНормальноДобреЧудово (Голосів: 3, середній: 5,00 з 5)
Loading...
Обговорення: 30 коментарів
  1. Олександр сказав:

    Нарешті дочекався я цієї статті) Дякую, дуже корисна публікація! Сьогодні буду пробувати 🙂

    Відповіcти
    1. Олександр сказав:

      Олеже, не знаю чому, але в мене не спацювала мобільна версія. Тільки що вирішив подивитись на роботу плагіна, але чомусь завантажилась звичайна версія….

      п.с. Телефон Acer, Android 4.2.2

      Відповіcти
      1. Олег Волощук сказав:

        Цікаво, а все очистили? Всі кеші? В мене також Android 4.2.2 – все працює пречудово. Спробуйте пройтися по плагінах, повідключати по черзі, можливо там десь конфлікт.

        Відповіcти
        1. Олександр сказав:

          Ні ні, ви не зрозуміли, в мене не завантажився webdigest… заходив через звичайний браузер і через мобільний хром… без змін, грузиться звичайна версія і все

          Відповіcти
          1. Олег Волощук сказав:

            Спробуйте зараз.

            Відповіcти
            1. Олександр сказав:

              на жаль нічого не змінилось… напевне це проблема з моєї сторони…

              Відповіcти
              1. Олег Волощук сказав:

                Ну не знаю, Саша, зараз вже точно повинно працювати. Я додав практично всі відомі мобільні агенти.

                Відповіcти
                1. Олександр сказав:

                  Тепер все працює. Супер!!! Дякую)

                  Відповіcти
                  1. Олег Волощук сказав:

                    Зараз трішки підправлю статтю – вся проблема все ж таки, в плагіні кешування.

                    Відповіcти
  2. Pavlofox сказав:

    Так, мобільна версія має бути. Все більше людей заходять на сайт із мобільних пристроїв, і якщо немає мобільної версії, то просто залишать сайт.
    Я коли купував шаблон для свого блогу, то наявність мобільної версії було одним із факторів які мене переконали.

    Відповіcти
  3. fedun сказав:

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

    Відповіcти
    1. Олег Волощук сказав:

      Та гадаю що всі за адаптивний дизайн, але не у всіх є можливість його створити, знайти чи купити. Коли ресурс вже працює – створення мобільної версії окремим рішенням – вихід, по крайній мірі на певний час.

      Відповіcти
    2. ML сказав:

      Адаптивний дизайн добрий лише для візитки. В інших сайтах його ставити не доцільно. Має ряд недоліків, до того ж суттєвих!

      Відповіcти
      1. mr.psiho сказав:

        Яких саме недоліків, дозвольте запитати?
        Думаю, якщо дизайн мобільної версії продуманий, сама верстка виконана якісно, то недоліків немає у принципі. Навпаки, первеаги.

        Відповіcти
        1. ML сказав:

          Детальніше тут: www.cmsmagazine.ru/library/items/graphical_design/responsive-design-problems/

          Відповіcти
          1. Олег Волощук сказав:

            Мені здалось, що немає там якихось аргументів проти мобільної версії – скоріше вони просто попереджають, що не варто всі сили кидати на це і шаблон брати адаптований з самого початку.

            Якщо шаблон написаний професійно – то ніяких “проти” адаптивної верстки немає абсолютно, як на мене.

            Відповіcти
            1. ML сказав:

              Говориться про адаптивність, а не мобільну версію. Основний аргумент – це перенавантаження сторінки, тобто доводиться замість оптимізованої сторінки завантажувати весь сайт, як на компі, що не є зручно на мобільному. Також один з основних недоліків – неможливість відкрити повну версію.

              Відповіcти
          2. mr.psiho сказав:

            Аналогічно, там не описано якихось суттєвих недоліків. Тай вислів “дизайн мобільної версії продуманий” означає, що це і задумано для юзерів в першу чергу. Кнопки більші, менюшка зручніша, фото не обрізаються, “важкі елементи” заховано або замінено на “легші”.. Суцільні переваги!

            Відповіcти
            1. ML сказав:

              Немає переваг у приховуванні елементів, бо вони все одно завантажуються. А це час і трафік.

              Відповіcти
              1. Олег Волощук сказав:

                Стаття написана явно з оглядом на попередження, а не проти. Адаптивна верска, яка пишеться з нуля не “чайниками” нічого не перевантажує, а я якщо дизайн і справді продуманий і виконаний прямими руками – то тільки одні переваги.

                Точно сказав отой Рижкін в коментарі – Говорить «нужно делать только адаптивные сайты» или «не нужно делать адаптивные сайты» —глупо, так говорят только фанатики. – все вірно.

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

                Відповіcти
                1. ML сказав:

                  Отож, якщо сайт візитівка, де елементів не багато – адаптивна верстка це розумно. А Ви уявіть собі адаптивну в новинному сайті чи блозі, де інформації, віджетів, реклами і тому подібних додаткових фіч -гори. І це все грузитиме телефон (правда приховано).
                  Отож бо – розводять людей на гроші і називають це професійною роботою.

                  Відповіcти
                  1. mr.psiho сказав:

                    Та чого ж одразу розводять?)) Адаптивна верстка це класна річ. Може хіба якщо за неї просять тисячі доларів – то вже можливо варто задуматись чи не забагато просять.

                    Ось контентний сайт http://keddr.com/ , тут є адаптивна верстка, сайт зручно переглядати і користуватись на планшеті чи смартфоні (наскільки взагалі може бути зручно на смартфоні). Крім того, бажаючі можуть вимкнути спрощену версію і переглядати повну на час сесії. Зручно і приємно.

                    От окрема мобільна версія має багато не те що недоліків, скоріше нюансів. По-перше, вартість розробки в рази вища. По-друге, можуть бути проблеми із синхронізацією (це вже як де). По-третє, повноцінна моб. версія вимагає людських ресурсів на підтримку і т.д.

                    Відповіcти
                    1. Олег Волощук сказав:

                      Так, то воно так, погоджуюсь, саме невиправдана ціна – ось що може виступати проти адаптивної верстки, ну і ще хто як її зробить, звичайно.

                      В мене є ще один ресурс, блог персональний, там стоїть адаптивна верстка і я задоволений. Мені зручно і відвідувачам, скоріш за все, також буде зручно. http://olegvoloshchuk.com

  4. Vadeem сказав:

    Хоч статті вже майже три роки, але саме сьогодні вона мені стала у нагоді, тому дякую.Справа в тому, що на моєму вордпрес-сайті встановлена фрі-версія шаблону Levil, що має адаптивний дизайн (що характерно для свіжого вордпресу). Але є проблемка: шаблон заточений під гугл-шрифти, я їх перебрав половину, і на всіх така картина на смартфонах і планшетах: українські літери і,ї,є або не відображаються, або малюються крякозябрями. Встановив плагін зі статті – він малює все коректно.
    Дякую.

    Відповіcти
    1. Олег Волощук сказав:

      Ну тут суть скоріш за все в тому, що не всі гугл шрифти підтримують кирилицю, а шаблони як правило розробляють закордонні спеціалісти, тому вони вносять туди такі шрифти, які підтримують латину.

      Тут варто просто замінити шрифти на кириличні в шаблоні.

      Відповіcти
      1. Vadeem сказав:

        Я використовую плагін Motopress, там є інструмент вибору ГуглШрифтів, через який я визначаю, чи має шрифт кирилицю. Шаблон має вбудовану функцію вибору ГуглШрифтів (ставить різні шрифти для хедера, назв нодів, текстів). Тому справа не в цьому.
        Модуль зі статті, звісно, на цей час – костиль, але мені підходить.

        Відповіcти
        1. Олег Волощук сказав:

          Ну якщо і,ї,є – не відображається …явно щось з самою кирилицею, перевірте на Google Fonts чи реально той шрифт підтримує кирилицю.

          Відповіcти
          1. Vadeem сказав:

            А що – таке можливо, щоб на десктопі кириличний шрифт виглядав чудово, а на мобільних пристроях – некоректно?

            Відповіcти
            1. Vadeem сказав:

              В сенсі – чи можливо, що то проблема саме шрифтів?

              Відповіcти
              1. Олег Волощук сказав:

                Ну скажемо так, це перше що я б зробив, а потім би уже шукав далі проблему.

                Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

© 2017 Блог Олега Волощука · Копіювання матеріалів сайту без дозволу заборонено
Авторство підтверджено Google