Як адаптувати контент для теми WordPress з адаптивною версткою

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

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

Дивіться також:

• Як зробити просте адаптивне меню для WordPress сайту
• Адаптивні теми WordPress: єдиний сайт для всіх пристроїв
• Як адаптувати WordPress сайт до мобільних пристроїв
• 8 безкоштовних WordPress-плагінів для адаптації сайту під мобільні пристрої
• 20 безкоштовних тем WordPress з адаптивною версткою на 2013 рік

Що таке адаптивний контент?

Адаптуйте свій контент до оточення

Адаптивний контент — це контент, який може бути відображений коректно на підставі того, який пристрій (мобільний або настільний) на даний момент використовується для перегляду / веб-серфінгу.

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

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

У своїй чудовій книзі Mobile Content Strategy Карен МакГрейн (Karen McGrane) стверджує, що мобільні користувачі повинні отримувати повноцінну версію сайту на своєму пристрої, але підготовлену так, щоб це виглядало компактно, швидко і зручно відображалося на пристроях з невеликою діагоналлю екрану.

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

Але в цілому текст варто обробляти так, щоб масштабування та структура тексту на мобільних пристроях були максимально орієнтовані на споживача та можливості таких пристроїв.

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

Ярлики, заголовки та коментарі — окрема проблема у цьому контексті:

Видно лише одне заголовок

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

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

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

Для проведення такої адаптації достатньо виконати кілька ключових змін у рамках 3 порівняно простих кроків.

Крок 1. Визначаємо пристрої за допомогою WP Mobile Detect

Ключ до правильної роботи з адаптивним контентом є підстроюванням під тип пристрою, з якого створюється запит. У роботі ми будемо використовувати плагін WP Mobile Detect.

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

• [телефон] - в цей тег оберніть контент, який потрібно показувати на смартфонах, але не на планшетах або настільних ПК
• [таблетка] - контент тільки для інтернет-планшетів
• [пристрій] - тег для контенту на смартфонах або планшетах
• [notphone] — на всіх типах пристроїв, крім телефонів
• [nottab] - для всіх, крім планшетів
• [notdevice] - тільки для ПК
• [ios] — контент лише для iOS-пристроїв
• [iPhone] - тільки для iPhone
• [IPad] - тільки для iPad
• [чоловіча] - тільки для Android-пристроїв

Детальніше про всі шорт-коди та функції дивіться тут.

Крок 2. Додаємо кастомні поля

Для прикладу ми візьмемо поля, що настроюються Коротка назва и Short Excerpt у режимі роботи редактора постів. Саме з їх допомогою можна отримати максимум користі від коректного використання можливостей плагіна WP-Mobile Detect та його шорт-кодів.

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

Встановлюємо та активуємо плагін, клацаємо на Користувача поля у меню WordPress, а далі натискаємо на Додати у вкладці Field Groups. Вводимо заголовок "Адаптивний вмісті додаємо ще одну групу правил, щоб побачити, що нові поля з'являться на сторінці в режимі редагування.

Додаємо 2 нових поля:

• Short Title (short_title) Text - поле для заголовка, форматування ставимо в режим No formatting
• Short Excerpt (short_excerpt) Textarea - поле для опису, тут форматування ставимо в Convert new lines into tags

Публікуємо нову групу полів. Тепер при редагуванні та додаванні постів ви побачите поля під самим постом під назвою Коротка назва и Short Excerpt.

Крок 3. Відображаємо відповідний контент на відповідній платформі

У цьому прикладі ми просто замінимо заголовок і короткий опис посту даними з полів Коротка назва и Short Excerpt, коли сторінка переглядається з мобільного пристрою.

Для цього додайте наступний код у файлі functions.php:

function adaptive_content( $content ) {
// only change content if called in the loop
if ( !in_the_loop() ) return $content;
// check for phone
if ( wpmd_is_phone() ){
// get the name of the custom field - based on filter
$custom_field = str_replace( 'the_' , 'short_' , current_filter() );
$short_content = get_field($custom_field);
// if the field is populated then use it
if ( $short_content ) return $short_content;
}
// only get here if not phone
return $content;
}
add_filter( 'the_excerpt', 'adaptive_content' );
add_filter( 'the_title', 'adaptive_content' );

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

Дещо докладніше розглянемо, як все це працює.

Функція adaptive_content додається до фільтрів the_excerpt и назва. Вона виконується щоразу, коли відбувається виклик функцій get_the_title и get_the_excerpt. Це стосується тегів назва и the_excerpt для посту шаблону.

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

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

Настав час протестувати результати

Використання фільтрів ніяк не змінило роботу ядра нашої теми, тому тестувати отримані результати порівняно просто. Для цього просто відредагуйте пост і додайте контент у поля, що настроюються. Коротка назва и Short Excerpt. Далі перегляньте сторінку сайту з цим шорт-кодом з телефону та планшета, щоб побачити результати.

Можна також доповнити наведені у пості приклади групою полів Адаптивний вміст з відповідними значеннями та викликом функції adaptive_content.

Шорт-коди та плагін WP Mobile Detect допоможуть вам зробити контент однаково зручним для читання та навігації на всіх типів сучасних пристроїв, за допомогою яких відвідувачі переглядають ваш сайт.

Джерело:wpmu.org

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/