Бездротовий Інтернетта відповідні мобільні пристрої, що дозволяють виходити в мережу з будь-якого місця розвинені досить добре і використовуються досить широко. Такий стан речей все частіше призводить до того, що власники сайтів доопрацьовують свої дітища до мобільних версій. Звертаючись до статистики мобільного інтернету- 11% у Росії, 16% у США. Зрозуміло це загальні числа, але так чи інакше на ваш блог чи сайт напевно, заходять з мобільних пристроїв і втрачати таких користувачів не є добре.

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

Декілька плагінів, що створюють мобільний шаблон блогу

• - Дуже хороший плагін. Простий, функціональний нічого зайвого, тільки те, що потрібно. Працює як під PDA (КПК), так і під Смартфони, що добре їх визначає (Opera Mobile визначив як мобільний пристрій). Налаштування мінімум: можна змінити заголовки блогу та вказати окремий шаблон для iPhone.
• - Самоскид, до якого варто придивитися. Дозволяє налаштувати зовнішній виглядвідображення блогу. Змінити кількість постів, колірну схему, можна включити або вимкнути деякі доступні віджети. І ще низка налаштувань. Є статистика. Погано, що немає локалізації російською. Хороший детектор мобільних пристроїв (побачив Opera Mobile). Особливість: Копіює теми під мобільні пристрої до каталогу тем WordPress- Мені така поведінка здалася трохи дивною.
• - дуже простий плагін і водночас виконує свою функцію. Розрахований під PDA (КПК) та Смартфони (iPhone): окремий шаблон для кожного типу пристрою. Плагін досить простий, без зайвих наворотів. З налаштувань, можна лише розширити типи пристроїв (USER_AGENT), для яких відображатиметься мобільний шаблон.
  Перевірка мобільних пристроїв не повна: Opera Mobile не визначив як мобільний пристрій.
• - нічим не сподобався. Opera Mobile визначити як мобільний пристрій не зміг, але це настроюється в адмінці: можна додати типи пристроїв, які будуть визначатися як PDA (КПК) та окремо як Смартфони. За кодом - плагін простенький, що начебто добре, але структура теми трохи заплутана, що ускладнює її редагування у разі потреби. Залишає сліди (записи таблиці опцій) після видалення.
• - самоскид, розрахований на смартфони з тачскрином (мабуть від сюди і назва): iPhone / iPod touch, Google Android, Blackberry Storm and Torch, Palm Pre. Використовує ajax. Початкова версія урізана, тобто. є можливість придбати більш повну версію цього плагіна. Потребує російської локалізації. Будь-які PDA не визначає як мобільні пристрої, що не є гуд.

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

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

Визначаємо відвідувача з мобільного пристрою

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

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

Щоб визначити, що користувач зайшов з мобільного пристрою, потрібно:
1. завантажити цей архів;
2. залити файл mobile_device_detect.phpз архіву на сервер до папки теми;
3. у functions.php використовувати таку перевірку:

Require_once("mobile_device_detect.php"); $mobile = mobile_device_detect(); if($mobile)( // тут робимо що-небудь для користувачів з мобільних пристроїв, // наприклад, віддаємо їм мобільну тему)

додаткова інформація

Функція mobile_device_detect() може приймати низку параметрів:

Mobile_device_detect($iphone, $ipad, $android, $opera, $blackberry, $palm, $windows, $mobileredirect, $desktopredirect);

$iphone, $ipad, $android, $opera, $blackberry, $palm, $windows- усі ці параметри вказують, чи вважати відповідний пристрій мобільним. Типово: true. Можна вказати УРЛ (з http://), тоді, якщо зайшли з відповідного пристрою, користувача перекине на вказаний УРЛ.

$mobileredirect, $desktopredirect- У цих параметрах вказуємо УРЛ (з http://), на який перекинути, якщо зайшли з мобільного пристрою типу відмінного від вищенаведених. За замовчуванням false - просто поверне true (зайшли з мобільного пристрою), нікуди не буде редиректувати (перекидати).

Функція завжди повертає масив із 2-х елементів:

$mobile = mobile_device_detect();

$mobile = true або false (мобільний пристрій або десктопний).
$mobile = Рядок. Тип пристрою, яким можна визначити Смартфон це, iPhone або КПК

$mobile може бути:
"Apple iPad"
"Apple"
"Android"
"Opera"
"Blackberry"
"Palm"
"Windows Smartphone"
"Mobile matched on piped preg_match"
"Mobile matched on content accept header"
"Mobile matched on profile headers being set"
"Mobile matched on in_array"
"Desktop / full capability browser" (не мобільний пристрій)

---
Усі знають про гоночний чемпіонат Формула 1, а про Формулу 2 чули? Такий також є і вже існує третій рік.

Здрастуйте шановні колеги, гості сайт.

Не звертали уваги, як стрімко зростає кількість користувачів інтернету зі своїх мобільних телефонів? Чи не думали створити мобільну версію для свого сайту?

Я теж замислювався з цього приводу, але, було якось недозволене. Усе відкладав на завтра. Мабуть, чекав на того півня, який клюне у відоме місце. Так ось, днями в моїй панелі інструментів для веб-майстрів від Гугла з'явилося таке повідомлення:

Перейшовши за посиланням, запропонованим у повідомленні, за адресою https://www.google.com/webmasters/tools/mobile-friendly/і, проаналізувавши там головну сторінкусвого блогу, я отримав такий сумний результат:

Погодьтеся, безглуздо втрачати солідну частку трафіку (до 40%) через таку нісенітницю, як відсутність мобільної версіїсайту.

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

Тестуючи найпопулярніші плагіни WordPress для вирішення поставленого завдання, я зупинився на WP Mobile Detector.

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

Після встановлення та активації стандартним способом, у лівій колонці панелі адміністратора з'явиться нове підменю. WP Mobile Detector, при відкритті якого з'являться пункти з налаштуваннями, статистикою та списком доступних тем. Тут все просто, самі розберетеся.

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

Без цього не буде працювати кешування мобільної версії WordPress сайту.

Зайдіть на свій сервер, знайдіть там папку cacheі надайте їй повні права, як на картинці.

Попереджувальне повідомлення зникне.

Переклад WP Mobile Detector, видалення посилань

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

Почнемо з найпростішого і найважливішого - з видалення цих посилань.

Відредагуємо файли теми bluesteel-mobile", вже встановленою за замовчуванням. Використовуватимемо текстовий редактор Notepad++.

Отже, відкрийте файли , , , і видаліть коди, виділені на скріншотах. Шляхи до файлів підкреслені червоною межею.

Для русифікації потрібно відредагувати файли - в корені плагіна та файли шаблону - , search.php, index.php, comments.php, category.php, 404.php, archive.php, . Просто замініть всі слова, що потребують перекладу (надруковані ядерно-чорним шрифтом), на російську.

Перед редагуванням обов'язково змініть кодування текстового документаз ANSIна UTF-8 (без BOM)в інструментах Кодування" текстового редактора Notepad++.

Для наочності або використання, завантажте вже відредагований мною WP Mobile Detector за посиланням нижче.

Версії 1.8 без зовнішніх посилань.

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

Мобільна версія WordPress сайту - плагін WP Mobile Detectorоновлено: Червень 18, 2017 автором: Роман Ваховський

>Якого розділу?
Розділу з новинами

>Причому плагін до «мобільної версії»? У Вас і так тема адаптивна (Правда, давня, взята на смітнику, з шелами тощо)
Вибачаюсь, я слабо розуміюся на вордпресі в принципі, мені сайт робив один фрілансер. Якщо плагіни тут не допоможуть, то як мені можна налаштувати мобільну версію? Оновити тему чи іншу поставити? Потрібно, щоб цей розділ з новинами (віконце праворуч) було видно з телефону.

Розділу з новинами

Стало ще менш зрозумілим. Звістка сайту складається з «розділів з новинами». У ВП це називається «рубрики із записами». Або ж Ви маєте на увазі щось інше.

Вибачаюсь, я слабо розуміюся на вордпресі в принципі, мені сайт робив один фрілансер.

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

Якщо плагіни тут не допоможуть, то як мені можна налаштувати мобільну версію?

Що Ви маєте на увазі під "мобільну версію налаштувати"? Адаптивна тема – це є «для мобільних».

Потрібно, щоб цей розділ з новинами (віконце праворуч) було видно з телефону.

Яке «віконце праворуч»? Я нічого такого не бачу.

>Стало ще менш зрозуміло.
Зробив скріншот, щоб було зрозуміліше:
https://ibb.co/cwnSnH

>Що Ви маєте на увазі під "мобільну версію налаштувати"?
Я маю на увазі налаштувати те, що в мобільній версії відображається. Тому що зараз у ній не видно цього вікна (на скріншоті)

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

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

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

А які проблеми можуть бути?

Від неможливості отримати допомогу до лівих посилань та злому сайту з дуже поганими наслідками.

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

Як переробити тему, щоб сайдбари та віджети відображалися?

Була б тема з оф каталогу — можна було б сказати щось певне, а що зроблено в цій темі…

Наскільки складно змінити тему (на надійну та офіційну) із збереженням всього завантаженого контенту?

>Була б тема з оф каталогу - можна було б сказати щось певне, а що зроблено в цій темі…
Взагалі я дивився деякі знімки екрану з посібників і у мене консоль виглядає приблизно так само, як і у всіх.

>Контент загалом залежить від темы. Але якщо в темі використовувалося щось не стандартне, то роботи вже більше.
Зрозуміло. Загалом, копитиму грошей і шукатиму більш розумного програміста. Сам я, звісно, ​​не зможу все це зробити.

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

Консоль не до чого. Проблема в доступності коду теми (і не пропонуйте завантажити цей мотлох.)

Загалом, копитиму грошей і шукатиму більш розумного програміста. Сам я, звісно, ​​не зможу все це зробити.

В принципі, легко змінити тему не складно. Але ось довести до ладу і реалізувати всі хотілки — тут уже можуть бути складнощі.

Перегляд 10 відповідей - з 1 по 10 (всього 10)

• Тема "Порадьте плагін для налаштування мобільної версії" закрита для нових відповідей.

Всім привіт!

До 21 квітня залишилося трохи більше тижня, щоби оптимізувати свій сайт під мобільні пристрої. За цей час навряд чи вийде програміст замовити і отримати готову мобільну версію для сайту, та й не у всіх можуть бути гроші на це. У цій статті я розповім, як зробити мобільну версію сайту за допомогою WPtouch Mobile Plugin.

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

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

Установка плагіна стандартна. У рядок пошуку вводимо назву WPtouch Mobile Plugin та встановлюємо її. На цьому скрині дивіться покрокові діїпо встановленню:

Як тільки ви активували плагін, сайт має мобільну версію. Перевірка зручності перегляду на мобільних пристроях від Гугла показує чудово! Сторінку оптимізовано для мобільних пристроїв». Більше можна нічого не робити. Все працює. Зайдіть на свій сайт зі свого телефону та подивіться.

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

Як настроїти плагін WPtouch

У адмінці у лівій колонці з'явився пункт WPtouch.

Перший підпункт «Що нового» можна не дивитися. У ньому англійською розповідається про нові оновлення та покращення в плагіні, які вносять його розробники.

Другий підпункт « Базові налаштування». Він має дві вкладки: «загальні» та «сумісність». На вкладці «загальні» можна змінити назву сайту, вибрати початкову сторінку, вимкнути посилання перемикання до повної версії. Налаштування на вкладці «сумісність» нам не цікаві, тільки користувачі. Про версії можуть вибрати, які плагіни завантажуватимуться з мобільною версією, а також додати шорткоди.

Третій пункт – «Теми та розширення». Тут нам робити нічого. У безкоштовній версії є лише одна тема – Bauhaus, а з розширень взагалі нічого не доступно.

На першій вкладці «Загальні» зверніть увагу на наступні налаштування: виведення кількості записів, поекспериментуйте з ескізами, виберіть які елементи показувати (коментарі, слайдер). На жаль, для безкоштовної версії не доступне виведення блоку схожих записів. На вкладках «Фірмова символіка» та «Закладка піктограм» можна змінити кольори та емблеми теми.

У четвертому пункті меню виберіть, які сторінки меню показувати, а які ні. До кожної сторінки можна додати значки:

Хочу звернути увагу на те, що для телефону потрібно створювати рекламні блоки свого формату. Адсенс має стандартний блок 320*100. Можна створити свій із шириною 320, а висотою 300. Поекспериментуйте та подивіться результат.

Як вивести рекламу на мобільному на початку та в кінці статті

Тепер поясню куди додавати коди. У безкоштовній версії плагіна WPtouch є лише одна тема Bauhaus. Зайдемо в папку з нею наступним шляхом сайт.ru/public_html/wp-content/plugins/wptouch/themes/Bauhaus/default

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

Нас цікавить файл single.php. До нього ми і додаватимемо коди.

Другий блок Адсенс 320*300 на кінець посту, перед кодом:

А код тизерки перед виведенням коментарів:

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

Чекаю на ваші коментарі.

Зробіть це нарешті! Створіть мобільну версію свого сайту на WordPress і позбавте кожного відвідувача з мобільного пристрою від незручності постійно збільшувати масштаб сторінок для читабельності тексту і виконувати N-ну кількість зайвих рухів.

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

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

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

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

1. Hammy

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

, а також використовує код зображення WordPress 3.5 для зміни розміру зображення.

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

2. Responsive Widgets

Цей плагін пропонує нові текстові/HTML віджети WordPress, доступні лише на гаджетах типу iPad, Nook, PlayStation Vita та інших загальних пристроях– планшетах та смартфонах.

Щоб використовувати плагін, вам потрібне базове уявлення про віджети WordPress. Відкрийте сторінку віджетів і ви побачите багато нових віджетів для наступних девайсів та типів екранів:

• Mobile
• Mobile (landscape)
• iPhones and iPods
• Phablets
• Tablet (Portrait)
• Tablet (landscape)
• iPad Portrait
• iPad Landscape
• Nexus Tablets
• Kindle Tablets
• Surface Tablet
• Nook Tablets
• PS Vitas
• Desktops
• Large Monitors (1240px+ screens)
• Print only

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

3. WP Lightbox 2

Дуже популярний «lightbox» плагін для використання зображень і галерей, що спливають у віконці, з ефектами накладання. Але майте на увазі, що цей плагін не вирішує завдання «адаптивності», а є сам по собі адаптивним.

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

4. Responsible

Надзвичайно корисний WordPress плагін. За його допомогою ви протестуєте адаптивний дизайн у своєму браузері, не відходячи від каси. У ньому використовується Viewport Resizer Bookmarklet для розміщення фіксованої панелі вгорі сторінки, де ви зможете змінити розмір сторінки для потрібних адаптивних пристроїв (наприклад, смартфони, планшети, екрани стаціонарних ПК), а також встановлювати необхідні дозволи екрану.

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

Плагіни для створення мобільних тем

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

5. WPTouch Mobile Plugin

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

Але будьте обережні! Ще в липні 2014 року стало відомо про вразливість версії плагіна WPTouch 3. Вона була відразу помічена і виправлена, але встигла нашкодити багатьом сайтам, які використовували цей плагін. Тому завжди слідкуйте за оновленнями плагіна і дбайте про безпеку вашого сайту у всіх його версіях.

6. WordPress Mobile Pack

Ще один лідер тем для мобільної версії сайтів WordPress. Кількість завантажень плагіна перевалила за 600 тисяч, а рейтинг складає 3.8 зірок із 5 можливих. Його крутість полягає у заміні класичного дизайну на інтерфейс мобільного додатка.

Як і попередній плагін WPTouch, цей потребує лише встановлення та активації. За бажанням можете покопатися в налаштуваннях, але це необов'язково. Плагін можна використовувати відразу після його активації.

7. Jetpack

Цей плагін займає лідируючі позиції з популярності серед подібних до нього інструментів, це підтверджується підтримкою WordPress.com і Automattic. У ньому є дуже корисна функція"Mobile Theme". Щоб використовувати її, потрібно зайти на сторінку налаштувань (Jetpack → Settings) після встановлення та активації плагіна. Дій мінімум, а можливостей максимум. Ви переконаєтеся в цьому самі, якщо оберіть цей безкоштовний плагін.

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

Висновок

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

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