Як зробити мобільну версію блогу на WordPress? Мобільні плагіни для WordPress Вордпрес мобільна версія плагін.

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

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

Плагін JetPack

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

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

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

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

Щоб переглянути як виглядатиме мобільна програма конвертована плагіном, зайдіть у блок налаштувань “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 із власним генератором для сайтів, що позитивно впливає на пошукову оптимізацію.

Зробіть основні налаштування плагіна та встановіть функції теми.

Мобільні WordPress темиОстаннім часом стали дуже популярними. І це цілком зрозуміло, оскільки технології не стоять дома. Багато користувачів змінюють свій десктоп на компактніші та сучасніші мобільні пристрої IPADS, iPhone, смартфони та інші накручені «таблетки». Вимоги до сучасних веб-сайтів розширились. Сайт повинен виглядати ідеально незалежно від того, за допомогою стаціонарного комп'ютера або мобільного пристрою користувач заходить на нього.

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

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

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

У цій статті якраз і зібрані найкращі мобільні WordPress теми та плагіни, які допоможуть вам адаптувати свій сайт для мобільних девайсів.

Розділи статті

Список Мобільних WordPress Тем

TOUCH Light Mobile WP Theme

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

BRAVE – A Dark Responsive Mobile Theme

Судячи з відгуків, багатьом подобається ця тема. Вона має чистий дизайн. особливості: встановлення Web App, галереї, можливість вибору кількох кольорів і т.д.

Ultimate And Slate Mobile WordPress

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

HERO Mobile Theme And Web App

Це потужна темаі мені дуже подобається функція, яка дозволяє відвідувачам додавати значок веб-застосунок (web app) на своєму iPhone. Мобільна версія буде ідеально працювати разом із Вашою WordPress темою. Простий дизайн та багато корисних функцій.

Resans WP Mobile Portfolio Theme

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

Spartan WP Theme For Mobile

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

Provocateur WordPress Theme для мобільних пристроїв

Provocateur — Вордпрес тема для мобільних пристроїв за допомогою JQuery Mobile, HTML5 і CSS3 технологій. Виглядає ідеально на мобільних пристроях.

Troller Mobile WordPress Theme

Ця тема має чистий дизайн та легка у використанні. Мобільна тема Вордпрес має гарний ретро / vintage вигляд.

Mobit Mobile WordPress Template

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

Metro Mobile WordPress Mobile Theme

Метро повністю гумова з Bootstrap 2.1, створена за допомогою HTML5 та CSS3. Вона має корисні функції, має 13 безкоштовних додатків. 24 кольорові кольори, а також Контактний формуляр, 7 Плагінів і кілька фото галерей і т.д.

Tiger Mobile Template WordPress Version

Тигр - WordPress тема для мобільних пристроїв з дисплеєм Retina, створена на базі HTML5. Вона має різні готові сторінки та безліч інших дивовижних особливостей.

Mobilize – jQuery Mobile WordPress Theme

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

Сьогодні я розповім про те, як без плагінів та скриптів створити мобільну версію шаблонудля вашого блогу на WordPress. Ні для кого не секрет, що зараз зростає кількість людей, які відвідують сайти за допомогою смартфонів. Наприклад, на одному з моїх блогів близько 2000 переглядів на місяць, а це 10-12% від загальної кількості, походить з мобільних пристроїв. До речі, це на 3% більше, ніж відвідувачів із браузером Internet Explorer. То чому, якщо практично на кожному сайті прописуються спеціальні теги для IE, не подбати і про користувачів мобільних телефонів?

Більшість сучасних для телефонів, з яких відбувається перегляд сайтів, управляються OS Android або iOS, на Symbian у 90% випадків використовується браузер Opera Mini (Mobile). Отже, браузери для телефонів підтримують CSS3, що ми і будемо використовувати при створенні мобільної версії теми.

До особливостямбраузерів мобільних пристроїв відносяться:

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

Тому шаблон блогу просто потрібно адаптувати під екран телефону! Це дасть помітне поліпшення його відображення у мобільному браузері. Ось так, наприклад, виглядає мій сайт із телефону:

Ось так виглядає Мобільна версіямого сайту з телефону

Давайте тепер визначимося, яким має бути дизайн сайту для телефону:

• адаптованим під невелику роздільну здатність екрану
• передбачати керування натисканням на сенсорний екран
• достатньо контрастним, щоб добре відображався на яскравому екрані телефону
• одноколоночним, щоб не було горизонтального прокручування
• "гумовим" - так як ми не можемо передбачити всі дозволи екранів

Крок 1. Шлях до мобільної теми у header.php

По-перше, зробіть копію файлу стилів вашої теми та назвіть її style-mob.css.

Визначаємо мобільний пристрій. Спосіб 1

Зараз давайте трохи змінимо файл hearder.php. Знайдіть, де підключається файл стилів (зазвичай це перші кілька рядків коду):

та замініть її на наступне:

Ми розділили всі екрани користувачів на дві групи: ті, які більші за 640 px, і ті, які менші. Якщо екран більше 640 px, то завантажуватиметься звичайний файл стилів style.css, а якщо менше, то style-mob.css.

Якщо ви вирішили використати цей спосіб, перед рядками, які ви тільки що вставили, необхідно додати спеціальні рядки для IE 6-8.

Так-так, телефони підтримують media = "screen and (max-width: 641px)", а віслюк до 9 версії - немає 😀

Визначаємо мобільний пристрій. Спосіб 2

Існує другий спосіб. Можна встановити значення media="handheld" для шляху до "мобільного" стилю, і там прописати шлях до файлу стилю для телефону:

У разі, якщо перегляд відбувається з комп'ютера, вантажиться звичайний стиль, і якщо з телефону, то style-mob.css. Я не перевіряла, як це працюватиме.

Крок 2. Редагуємо style-mob.css

Якщо ви використовували спосіб 1 для вставки файлу стилів, просто зменшіть вікно браузера, щоб побачити, як ваш сайт виглядає з телефону! Якщо ви використовували спосіб 2, тимчасово замініть його на спосіб 1, і зробіть те саме:D. Ну, або перегляньте сайт безпосередньо з телефону. Насправді, перший спосіб хороший у процесі розробки мобільної теми, а другий - вже коли вона готова до використання.

Відкрийте style-mob.css вашим улюбленим файловим редактором.

Я зробила такі виправлення:

• встановила ширину сторінки (body) у 100%, а блока з контентом (page) у 95%, щоб зробити невеликі поля
• включила "видимість" для кнопки "пошук"
• збільшила розмір шрифту, переклала всі значення шрифтів на em
• прибрала float:left для центральної колонки, щоб шаблон став одноколоночним
• і ще деякі "косметичні" правки

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

Якщо виникли якісь питання, пишіть обов'язково відповім. І підписуйтесь на , щоб не пропустити нічого цікавого!

Будь-який якісний сайт повинен мати мобільну версію сайту, адже мобільний трафік поступово зростає, а відсутність адаптивної верстки сайту призводить до відмови. Це також помітили в Google, після чого було вирішено перевіряти сайти на наявність мобільної версії сайту, а з 21 квітня 2015 року і все стане фактором для ранжування.
То як зробити мобільну версію сайту, щоб уникнути відмов і зниження позицій? Для вирішення цієї проблеми існують два способи. Перший спосіб- зробити адаптивну верстку, другий спосіб- Зробити окремий дизайн мобільної версії сайту. Так як мій сайт на WordPress покажу рішення тільки для цього CMS движка.

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

Однак, якщо ви задоволені своїм шаблоном і вам не хочеться плагінів, є варіант зробити ваш шаблон таким, що розтягується без плагіну, як мій. Для цього достатньо прописати в css - "width: 100%". Ну а щоб дизайн не сильно розтягувався додати рядок:

#content (
max-width: 1280px;
}

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

img, embed, video (
max-width: 100%;
}

Недоліки такого способу:

• Важко розмістити кожен елемент красиво для різних екранів.
• Повільне завантаження сайту через не стислі картинки + підвантаження зайвих не оптимізованих скриптів.

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

Найзручніший варіант для користувачів, це мати окремий піддомен з мобільною версією, так роблять сайти гіганти, популярні сайти і різні успішні сервіси. Зазвичай виробляють піддомен m.website.ru або mobile.website.ru.

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

У чому недолік цього способу:
1. По суті ви створюєте дублікат сайту, виходить, що потрібно наповнювати 2 сайти, звичайно можна зробити авторепостінг за допомогою NextScripts: Social Networks Auto-Poster, але стежити за двома сайтами не практично.
2. Так як мобільна версія дублює контент, тому потрібно або забороняти до індексації піддомен, тоді пошукові системи не оцінять вашу працю. Або прописувати в head - rel = "canonical", показуючи що контент дублюється, але у видачі першої сторінки m. версії не будуть.
3. Як не намагатися SEO оптимізація таких сторінок перетворюється на важку роботу, або ви пишете унікальний контент для мобільної версії, або не вийти в топ таким сторінкам.

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

Порядок дій, як зробити окрему мобільну версію сайту WordPress:
1. Створюємо піддомен (приклад m.сайт) на хостингу;
2. Купуємо платний шаблон або створюємо власний для мобільних телефонів. Так само є варіант організувати мобільну версію окремо за допомогою тих же плагінів, про які писав у першому методі;
3. Завантажуємо знову весь контент, який повинен бути на мобільній версії сайту;
4. Налаштовуємо індексацію та прописуємо необхідні параметри для пошукових систем.
5. Налаштовуємо перевірку на вхід з мобільних пристроїв на основному домені та піддомені за допомогою веб-сервера nginx.

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

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

Раніше цей фактор не враховувався, але той, хто поквапився заздалегідь, зараз виявиться у виграші – будуть вищими в пошуку, отримають більше трафіку, зароблять більше грошей. Детальніше новину дивіться тут. Google подібну методику почав застосовувати ще раніше.

У новому Яндекс Вебмайстрі, про який я є функція перевірки сайту на мобільність. З її допомогою можна перевірити свій ресурс і на підставі отриманих результатів робити будь-які дії.

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

Для початку треба зрозуміти, що є 3 шляхи адаптації вашого ресурсу під мобільний пошук:

1. Створення окремої мобільної версії сайту на піддоміні чи іншому домені.
2. Використання адаптивної теми WordPress, яка автоматично змінює розміри та розташування елементів під час відкриття на маленьких екранах.
3. Застосування різних тем оформлення в залежності від пристрою – на комп'ютері буде один шаблон, для телефону інший (простіший та компактніший).

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

Адаптивні теми для WordPress

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

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

WordPress плагіни для мобільної версії сайту

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

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

Встановлювати плагіни легко і з цим впорається навіть вебмастер-початківець. Як встановлювати плагіни дивіться.

Всі плагіни, які я наведу нижче, є у каталозі WordPress і вони встановлюються прямо через адмінку.

1. WPtouch Mobile Plugin

Найперший плагін для мобільної версії сайту, з яким я познайомився, він же найвідоміший. Приклад роботи на моєму сайті DmitriyZhilin.ru

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

Працює плагін російською мовою, правда, переклад трохи корявий на даний момент, але все зрозуміло.

Крім налаштування кольору є можливість вказати пристрої, для яких буде застосовуватися плагін - "яблука", "андроїди", "фони ​​windows" і т.д.

2. WordPress Mobile Pack

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

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

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

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

Мало не забув - необхідна версія PHP вашого хостингу не нижче 5.3.0

3. Плагін Mobile Smart

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

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

Потрібна адаптивна тема для сайту (про які я розповідав на початку). Але тут фішка в тому, що ця адаптивна тема працює не завжди, а тільки для користувачів телефонів, решті відвідувачів сайт видає звичайний ваш шаблон (не адаптивний).

4. WP Mobile Edition

З тих, що я пробував, цей плагін мобільної версії WordPress мені найбільше сподобався. При мінімумі налаштувань він містить максимально зручний мобільний шаблон:

• Мінімалістичний дизайн (показав максимальну швидкість та адаптивність у PageSpeed ​​Insights від Google)
• зручне меню, спеціально адаптоване до маленьких екранів,
• зручна головна сторінка з останніми статтями,
• кнопка перемикання на звичайну тему з мобільного та шорткод для розміщення кнопки переходу в мобільну версію зі звичайної (цього не було в розглянутих вище).

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

Сам дизайн поки що один, але він містить кілька колірних схем.

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

Який плагін вибрати?

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

Спочатку випробуйте плагіни з мобільними темами – 1, 2, 4. Якщо жоден з них вам не сподобається, то шукайте хорошу тему з адаптивним дизайном і підключайте її для мобільних користувачів плагіном Mobile Smart (3), тут ніяких обмежень немає – використовувати можна будь-який шаблон.

Не забудьте про кешування

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

У плагіна Hyper Cache, налаштування якого є спеціальна вкладка "Мобільний" і в ній потрібно вказувати, що кеш повинен зберігатися окремо для комп'ютерів і окремо для телефонів. У тій же статті я про це налаштування розповідав. В інших плагінів кешування мають бути аналогічні налаштування, без них сенсу робити мобільну тему немає.