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

Дата: 18 жовтня 2013 Рубрика: Плагіни для Wordpress Коментарі: 23 коментарі

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/plugins/mobilepress/themes/default

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

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

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

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

Шануйтеся!

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

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

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

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


З повагою, Олег Волощук.

Бажаєте мати свій власний блог на WordPress?

Отримайте АБСОЛЮТНО БЕЗКОШТОВНО детальний відеокурс і вперед!

Ваш E-Mail 100% в безпеці!

 

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

  1. Олександр коментує:

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

    Відповіcти
    • Олександр коментує:

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

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

      Відповіcти
      • Олег Волощук коментує:

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

        Відповіcти
        • Олександр коментує:

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

          Відповіcти
          • Олег Волощук коментує:

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

            Відповіcти
            • Олександр коментує:

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

              Відповіcти
              • Олег Волощук коментує:

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

                Відповіcти
                • Олександр коментує:

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

                  Відповіcти
                  • Олег Волощук коментує:

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

                    Відповіcти
  2. Pavlofox коментує:

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

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

    Відповіcти
  3. fedun коментує:

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

    Відповіcти
    • Олег Волощук коментує:

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

      Відповіcти
    • ML коментує:

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

      Відповіcти
      • mr.psiho коментує:

        Яких саме недоліків, дозвольте запитати?

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

        Відповіcти
        • ML коментує:

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

          Відповіcти
          • Олег Волощук коментує:

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

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

            Відповіcти
            • ML коментує:

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

              Відповіcти
          • mr.psiho коментує:

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

            Відповіcти
            • ML коментує:

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

              Відповіcти
              • Олег Волощук коментує:

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

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

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

                Відповіcти
                • ML коментує:

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

                  Отож бо — розводять людей на гроші і називають це професійною роботою.

                  Відповіcти
                  • mr.psiho коментує:

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

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

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

                    Відповіcти
                    • Олег Волощук коментує:

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

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

Залишити свій коментар

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

Google + фейсбук Вконтакті Twitter RSS
Категорії
  • Інтерв’ю (4)
  • Конкурси (5)
  • Оголошення (11)
  • Особисте (19)
  • Плагіни для Wordpress (15)
  • Саморозвиток (7)
  • Технічні поради по WP (24)
Останні коментарі
  • Олег Волощук до Використовуємо звичайну флешку в якості оперативної пам'яті на OC Windows
  • Pavlofox до Використовуємо звичайну флешку в якості оперативної пам'яті на OC Windows
  • Олег Волощук до Використовуємо звичайну флешку в якості оперативної пам'яті на OC Windows
  • Pavlofox до Використовуємо звичайну флешку в якості оперативної пам'яті на OC Windows
  • Володимир до Як записати аудіо чи відео дзвінок в Skype — програма Free Video Call Recorder for Skype
Канал на YouTube
Соціальні спільноти
Кращі коментатори
Pavlofox(3)
Саша(3)
Ігор(3)
Козак(2)
Віктор Х.(2)
Володими.(1)
Владисла.(1)
Валентин.(1)
запитів / генер. стор. / спож. пам'яті
53 / 0.692 / 58.39mb
Вгору